AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  


 

Partagez | 
 Voir le sujet précédent Voir le sujet suivant Aller en bas 

avatar
Citoyen


Messages : 298
Date d'inscription : 14/01/2014
Fiche : NERO — boisson, amour et chocolat

Infos
Points de vie:
8/10  (8/10)

Nerone Jelkins - Le HTML pour les nuls
Message Sujet: Le HTML pour les nuls    Jeu 22 Mai - 14:19

Salut !
Alors, je vais donc parler des bases du html,et uniquement du html. Donc le css, les pages html et le reste ne sera pas présent ici!

I. LE HTML
Pour commencer, du html, pour aller vite, c'est une balise, un bloc, nommé div. Ca s'ouvre, et ça se ferme. On l'écrit de cette façon :
Code:
<div style="propriétés;"></div>
On peut parfois également voir la balise span qui est utilisée pour les textes. De même, ça s'ouvre et ça se ferme.
Code:
<span style="propriétés;">le texte</span>
Personnellement, j'utilise peu les span, parce que c'est capricieux et que les div marchent souvent aussi bien. Enfin bon, revenons-en à nos moutons.

Dans une div, on ajoute des propriétés. Comme noté plus haut, on fait ça comme ça:
Code:
<div style="propriétés; propriétés;">

Des propriétés, on peut en mettre autant qu'on veut. Elles sont séparées par un point virgule ( ; ). Après avoir mis style, on met des guillements (") et après avoir mit toutes nos propriétés, on ferme ces guillemets.

Pour commencer, nous allons créer un bloc, donc une div. Nous allons lui donner une largeur (width) et une hauteur (height).  Par exemple, je vais faire un bloc de 200*320. Pour ces deux propriétés, il faut noter un nombre suivit (généralement) de px (pixels).
Code:
<div style="height: 320px; width: 200px;"></div>
Si vous essayez ... Eh bah on voit rien. Normal, on a juste défini une hauteur et une largeur. Mais si  on met du texte dans la div, le texte ne dépassera pas les 200px de largeur (mais il dépassera en hauteur si vous en mettez trop, c'est comme ça).
Maintenant, on va mettre un fond (background). La propriété background est suivie du nom d'une couleur, d'un code couleur hexadecimal, ou d'un code en rgba. Les noms de couleurs s'écrivent en anglais, et les codes héxadécimaux sont composé d'un dièse et de cinq nombres. Exemple : #FFFFF (qui est du blanc.) ; #00000  (qui est du noir.) Je ne parlerai pas du rgb parce qu'on en a pas besoin dans notre cas.
Code:
<div style="height: 320px; width: 200px; background: #9FFF8C;"></div>
ah bah là, ça se voit. J'ai maintenant une boite très moche. Et maintenant, si je veux mettre beaucoup de texte, je fais comment ?


Si je veux mettre beaucoup de texte, on peut soit agrandir la boîte, soit la laisser s'ajuster seule (il suffit de retirer le height), soit d'ajouter une scrollbar. J'ai pas d'exemple en  image, donc vous verrez.
Pour ça, on utilise la propriété overflow. Voici quelques exemples :
Spoiler:
 
Nous allons donc utiliser overflow: auto;.
Code:
<div style="height: 320px; width: 200px; background: #9FFF8C; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Vous voyez, c'était pas compliqué !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Bon, maintenant, on sait faire une boite basique avec du texte dedans. Après, on peut ajouter de multiples propriétés supplémentaires pour que ce soit plus esthétique, on peut empiler des boîtes dans des boîtes, mais ça, c'est votre imagination qui vous le dira.
Maintenant, je vais parler un peu des polices.

II. LES POLICES
Pour ma part, même avec les polices, j'utilise des div. Vous pouvez utiliser des span si vous voulez, après c'est chacun son truc. Les span fonctionnent de la même façon que les div. Étant donné que vous devriez savoir utiliser des div, je vais simplement vous lister les propriétés basiques.
Spoiler:
 
Voilà, vous connaissez à présent la base de la base des polices en html.

III. BRIC À BRAC
Oui, maintenant je vais lister des propriétés un peu en vrac, histoire que vous vous débrouillez.
les bordures:
 
les arrondis:
 
défilement:
 
Les images:
 
UC:
 

Ce topic pourra être mis à jour dès l'ajout de propriétés.

rodrakaset product


Le tuto sur le CSS/HTML est en cours de rédaction!


[23:45:27] Fraus Néri : Voyons Nero tu n'as pas besoin de ça pour me séduire <3
[23:18:20] @ Sacha ##### : NERONE JTM
[22:42:55] Ludwig Hammerstein : T'es un na mour

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

Le HTML pour les nuls

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» les amplis a lampes pour les nuls!
» JOHNNY POUR LES NULS
» Johnny Hallyday pour les nuls ...
» ampli pour les nuls
» Les Rolling Stones pour les nuls

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
-