1 - Structure d'une page html 2 - Les balises html Balises de subdivision Balises de mise en forme Balises pour organiser du contenu 3 - Liens externes 4 - Formulaire html

HTML 2 : LES BALISES html

Le langage html, dans une page Internet, est chargé de gérer le contenu d'une page. Cela comprend : les textes, les images, les vidéos, les musiques, les liens vers d'autres pages, etc.

Ce langage repose exclusivement sur une succession de balises qui permettent de présenter l'information.

ATTENTION !!
Pour chaque balise, on fera attention à écrire et positionner la balise entrante et fermante dès le début.
Respectez la règle : première balise ouverte = dernière balise fermée.

1. Balises de subdivision
Pour avoir un contenu clair, qui donne envie à l'internaute de continuer à naviguer, il est important d'aérer ses apports de texte.

Cependant, la subdivision a surtout un intérêt lors de l'intégration du style (appliqué par le CSS) dans une page internet. En effet, elle est nécessaire pour pouvoir indiquer au code que l'on souhaite, un style sur telle partie, et un autre sur la suivante.

Fonction Balise Remarque Exemple
Mise à la ligne <br> C'est une balise orpheline (pas de balise fermante), qui permet de faire un saut de ligne (équivalent à Entrée sur un traitement de texte). Ligne1
Ligne2
Intégrer un paragraphe <p> </p> Elle est spécialement réservée à la mise en place de texte (sans image, ni autre format). Pour chaque nouvelle balise, le texte est mis à la ligne, avec espacement.

Paragraphe1

Paragraphe2
Balise de subdivision en bloc <div> </div> Pour chaque nouvelle balise, le texte est mis à la ligne.
Elle est souvent utilisée pour définir les blocs pouvant contenir des textes, des images, des vidéos, etc.
Bloc1
Bloc2
Balise de subdivision en ligne <span> </span> Dans un texte, la balise tent à passer inaperçu, elle va cependant permettre d'appliquer un style à quelques mots sélectionnés entre balises. Bloc1Bloc2
2. Balises de mise en forme
Fonction Balise Remarque Exemple
Intégrer un titre <h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> 		Permet de mettre un texte à des grandeurs différentes.

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5
Titre h6
Mise en gras <b></b> Permet de mettre un texte en gras (bold, en anglais). Texte en gras
Mise en italique <i></i> Permet de mettre un texte en italique (italic, en anglais). Texte en italique
Commentaires <!-- --> Permet de mettre une partie du code en commentaire. (Uniquement visible dans le code !)

Et comment mettre en couleur ?

Le langage html n'intègre pas la coloration (du texte ou de l'arrière plan), pour mettre de la couleur, il faut mettre en place du langage CSS.
3. Balises pour organiser du contenu
Fonction Balise Remarque Exemple
Construire une liste non ordonnée 

<ul>
    <li></li> 
    <li></li>
</ul>
 La balise <ul></ul> permet d'ouvrir la liste.
La balise <li></li> génère une nouvelle puce.
  • Point 1
  • Point 2
  • Point 3
Construire une liste ordonnée 

<ol>
    <li></li> 
    <li></li> 
</ol>
 La balise <ol></ol> permet d'ouvrir l'énumération.
La balise <li></li> génère un nouveau chiffre.
  1. Point 1
  2. Point 2
  3. Point 3
Construire un tableau 

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
 La balise <table> </table> ouvre un nouveau tableau.
La balise <tr></tr> génère une nouvelle ligne.
La balise <th> </th> génère une colonne de titre (h pour head).
La balise <td> </td> génère une colonne de contenu.
Col 1 Col 2 Col 3
A B C