Créer son site web, étape n°2 : Les balises utiles

Boujour à tous pour ce dimanche aprem.

Etant donné que vous vous en êtes plutot bien tiré lors du dernier cours, la série continue avec un cours sur les balises utiles et necessaires pour faire un site ou une page web qui soit présentable et organisée...

NOTE : le terme d'organisation est tres important car si votre site n'est pas impecablement organisé, vous allez tres vite vous y perdre...

Tout d'abord, les balises de base pour le formatage du texte (il se peut que j'en répete certaines :

Code:: Aller à la ligne : <br>
Souligner : <u>mot souligné</u>
Mettre en gras : <b>texte en gras</b>
Exposant : <exp>exposant</exp> (comme dans 2eme où "eme" serait en exposant)
Clignotant : <blink>Clignotant</blink>
...
(il en existe un certain nombre mais celles ci sont la base)

Bon comme ces choses là vous sont acquises à présent, nous allons parler des titres...

car en effet, pour faire un titre dans un éditeur de texte, il suffi de changer la taille de la police...
Ici il existe le même principe, mais aussi un petit truc bien pratique qui vous permet de ne pas vous énerver bien longtemps...

il s'agit des balises <h>titre</h>

NOTE : le mode d'écriture [1...6] permet de définir un choix parmis la liste. Dans l'exemple suivant : h[1...6] signifie h1 ou h2 ou h3 ... ou h6.

le titre de niveau 1 est le plus gros et le 6 le plus petit...

vous n'avez qu'a essayer cet exemple :

Code:: <h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Bon à présent vous savez faire des titres et saisir un texte de maniere basique...
Il est possible d'ajouter des arguments à certaines balise, ce que vous allez découvrir plus loin...

Nous allons pousser le formatage un peu plus loin.
Le centrage : il vous permet de centrer votre texte au milieu de la page.

Code:: <center>texte centré</center>

Changer de paragraphe : C'est le rôle du marqueur <p> qui passe à la ligne et en saute une. <p> possède des attributs. Dans ce cas vous devez fermer le conteneur par </p> pour arrêter ses effets.

Code:: Exemple :
<p>Texte aligné à gauche</p>
<p>texte aligné à droite</p>
<p>Texte centré</p>
(vous remarquez qu'il existe plusieurs moyens de faire les même choses)

et pour être assez complet, nous allons voir les balises de polices, avec le mot clé FONT.

Code:: Exemple :
[b]Taille :[/b]
<font size="3">texte en taille 3 (normale)</font>
<font size="1">texte en taille 1 (petite)</font>
<font size="+3">texte en taille 7 (normale + 4)</font>

NOTE Pour la suite : Connaissez vous l'hexadécimal ? il s'agit d'une maniere de compter en base 16 (car vous et moi comptons en décimal - base 10)
Donc si je résume quand je compte en hexa cela donne : 1(1), 2(2), 3(3), 4(4), 5(5), 6(6) ,7(7) ,8( ,9(9), A(10), B(11), C(12), D(13), E(14), F(15), 11(16*1 + 1 = 17), 12(16*1 + 2) = 17), ...
en hexa et avec 2 digit (deux caracteres) on ne peux aller que jusqu'a... FF (15*16 + 16 = 255)

NOTE pour les couleurs : les couleurs sont codées selon 3 composantes (les 3 couleurs primaires) Rouge, vert et bleu.
L'ordre est important car il n'est jamais préciser mais sous entendu.
Pour coder une couleur en HTML, on se base sur l'Hexadécimal et sur les couleurs RVB(Rouge Vert Bleu).
exemple :
couleur rouge : FF0000 (FF en rouge (le maxi) et 0 pour les autres)
couleur verte : 00FF00
couleur noire : 000000 (oui le noir d'est pas de couleurs)
couleur blanche : FFFFFF
couleur turquoise (bleu-vert) : 00FFFF

Bien sur vous pouvez nuancer : 67F1AA... mais pas la peine d'entrer dans les détails sauf si vous le voulez, alors dans ce cas on pourra se faire un petit cour à part pour que vous maitrisiez l'Hexa et le codage des couleurs..

Bon ben comme vous avez tout compris, on passe aux textes colorés .

Code:: Exemple :
[b]Couleur[/b]
<font color="#0000ff"> Texte en bleu </font> (le # signifie hexadécimal)

Mais vous pouvez acumuler les balises :

Code:: <font color="#00ffff" size="6">truc en gros et en truquoise</font>

Bon ben ca fait dejà pas mal de choses pour aujourd'hui peut etre...

Je vous invite à essayer un peu toutes les basiles et à les imbriquer les unes dans les autres pour faire des choses de plus en plus belles...

Si vous avez des questions sur ce cours, ou même sur le précedent, n'hesitez pas...
De même si vous cherchez à faire un truc précis mais vous n'y arrivez pas ou vous ne savez pas comment vous y prendre...
Dans tous les cas n'hesitez surtout pas, je suis là pour ca...

» Mon site perso