Aller au contenu principal

🧱 HTML - La structure

C'est quoi un fichier HTML ?​

La base d'un site web, c'est un ensemble de fichiers HTML. L'extension de ces fichiers est .html. Selon les bonnes pratiques de développement, le fichier initiale se nomme index.html.

Le fichier HTML est un fichier qui décrira le contenu de votre site.

Ecrire du HTML​

Le HTML est un langage de balisage, c'est-à-dire un langage qui permet de structurer du contenu grâce à des balises. On les écrit entre chevrons < et > :

Voici un exemple de balisage HTML :

<p>Bonjour</p>

Pour faire les chevrons sur le clavier, il faut presser :

  1. la touche < pour faire le chevron ouvrant ;
  2. et Maj + < pour le chevron fermant.

Les balises décrivent le type de contenu que l'on souhaite afficher. Par exemple, pour afficher un paragraphe, on utilise la balise <p>, pour un titre, on utilise la balise <h1> et pour une image, on utilise la balise <img>.

Il existe 2 types de balises :

  • les balises en paires <p></p> qui contiennent du contenu ;
  • les balises autofermantes <br> qui permettent de crĂ©er des sauts de ligne.

Les balises peuvent avoir des attributs qui permettent de préciser ou modifier leur comportement. Par exemple, pour spécifier l'url d'une image, on utilise l'attribut src :

<img src="https://user.oc-static.com/upload/2022/11/25/16693911549083_FR_1603881_HTML-CSS_Static-Graphics_p1c3-2.jpg">

La base HTML d'un site​

Le contenu minimum d'un fichier html est :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Le titre de ma page</title>
    </head>
    <body>
    </body>
</html>

Décortiquons les différentes lignes :

  • <!DOCTYPE html> : dĂ©claration de la version du langage html ;
  • <html lang="fr"> : dĂ©claration de la langue du site, la balise html est la base de tout contenu html ;
  • <head> : ce qui se trouve dans cette balise ne sera pas visible sur le site, mais qui contiendra des informations utiles Ă  l'utilisateur et Ă  la mise en page du site ;
  • <meta charset="utf-8"> : la balise meta permet de dĂ©clarer des mĂ©tadonnĂ©es du site, ici on dĂ©clare le l'encodage du texte du site ;
  • <title>Le titre de ma page</title> : le titre de la page (c'est ce que vous voyez dans la barre de titre de votre navigateur) ;
  • <body> : contenu visible de la page, ici il est vide.

Pour bien Ă©crire du HTML, il ne faut pas entre-croiser les balises, il faut seulement les imbriquer.

Par exemple, il ne faut pas Ă©crire le code suivant car les balises s'entre-croisent :

<html>
    <body>
    </html>
</body>
A toi de jouer !

Ta première mission est de créer un fichier html nommé index.html qui contient :

  • un titre de site : "Accueil - Mon site" ;
  • un titre de premier niveau : "Bienvenue sur mon site" ;
  • un paragraphe ;
  • une image ;
  • une liste Ă  puces ;
  • un lien vers cette page

Tu peux t'aider de la documentation de MDN pour trouver les balises Ă  utiliser.

Les balises utiles​

Important

Toutes les balises HTML sont décrites dans la documentation de MDN.

Si vous avez un doute sur la syntaxe d'une balise, il faut vous référer à la documentation.

Les titres​

Les titres sont des balises qui permettent de structurer le contenu de la page. Ils sont utilisés pour indiquer le titre de la page, de son premier niveau, de son second niveau, etc.

Il existe 6 niveaux de titres :

  • <h1> : titre de niveau 1 ;
  • <h2> : titre de niveau 2 ;
  • <h3> : titre de niveau 3 ;
  • <h4> : titre de niveau 4 ;
  • <h5> : titre de niveau 5 ;
  • <h6> : titre de niveau 6 ;
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<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>

Les liens hypertextes​

Les liens hypertextes permettent de créer des liens vers des pages internes ou externes.

Ils sont définis avec la balise <a> et ont un attribut href qui indique l'url vers laquelle on souhaite accéder.

Voici un exemple vers un site externe :

<a href="https://cours.lucasdebeve.eu">Lien vers la page d'accueil</a>

Pour les liens vers des pages internes, il faut utiliser l'attribut href avec un chemin relatif vers un fichier html.

<a href="./autre_page.html">Lien vers la page d'accueil</a>

Pour que ce lien fonctionne, il faut que le fichier html autre_page.html soit présent dans le même dossier que le fichier html courant.

info

Le chemin relatif ./autre_page.html signifie que le lien va vers le fichier html autre_page.html qui se trouve dans le mĂŞme dossier que le fichier html courant.

Les images​

Elles sont définies avec la balise <img> et ont un attribut src qui indique l'url ou le chemin vers l'image.

Voici un exemple avec une image tirée d'un autre site :

<img src="https://user.oc-static.com/upload/2022/11/25/16693911549083_FR_1603881_HTML-CSS_Static-Graphics_p1c3-2.jpg">

De la même manière que les liens hypertextes, les images peuvent être liées à des ressources internes.

Par exemple, si j'ai la structure de fichier suivante :

- index.html
- images/
    - image.jpg

Je peux afficher l'image avec la balise <img> suivante :

<img src="./images/image.jpg">
info

Le chemin relatif ./images/image.jpg signifie que l'image va se trouver dans le dossier images du mĂŞme dossier que le fichier html courant.

Les listes à puces/numérotées​

Les listes à puces sont des balises qui permettent de créer des listes dans le contenu de la page.

Elles sont définies avec la balise <ul> et <li> pour les éléments de la liste.

Voici un exemple :

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>

RĂ©sultat :

  • Element 1
  • Element 2
  • Element 3

Pour les listes numérotées, il faut utiliser la balise <ol> au lieu de <ul>.

Voici un exemple :

<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ol>

RĂ©sultat :

  1. Element 1
  2. Element 2
  3. Element 3

Les balises de division​

Les balises de division permettent de mieux strcuturer le contenu de la page.

Il en existe 2 types : les explicites et les "passe-partout".

Les balises explicites​

On retrouve les balises suivantes :

  • <section> : sections ;
  • <article> : articles ;
  • <aside> : contenu secondaire ;
  • <nav> : navigation ;
  • <header> : entĂŞte ;
  • <footer> : pied de page ;
  • <main> : contenu principal ;

Les balises "passe-partout"​

On retrouve les balises suivantes :

  • <div> ;
  • <span> ;

Exercice​

Pour vous aidez à maîtriser le code HTML, voici un exercice.

Le but est de créer une page web pour votre animal préféré.

Pour cela, vous suivrez les Ă©tapes suivantes :

  1. Ajouter une balise <h1> qui sera le nom de votre animal.
  2. Ajouter une balise <h2> qui contiendra les mots : Description physique.
  3. Ajouter une balise <p> qui contiendra la description physique de votre animal.
  4. Ajouter une balise <h2> qui contiendra les mots : Galerie d'images.
  5. Ajouter au moins 2 balises <img> qui contiendront des images de votre animal.
    • Au moins 1 image sera tĂ©lĂ©chargĂ©e sur votre ordinateur.
    • Au moins 1 image sera tirĂ© d'un lien internet.
  6. Ajouter un lien <a href=...> qui pointe vers la page Wikipédia de votre animal.
  7. Au début de votre page, ajouter la balise <nav> qui représente le menu principal de votre page.
  8. Dans le menu, ajouter un lien <a href=...> qui pointe vers le titre Description physique de votre page.
    • Le lien doit pointer vers la balise <h2> qui contient les mots Description physique.
    • Pour cela, on ajoute l'attribut id="physique" Ă  la balise <h2> qui contient les mots Description physique.
    • On ajoute l'attribut href="#physique" Ă  la balise <a>.
  9. Dans le menu, ajouter un lien <a href=...> qui pointe vers le titre Galerie d'images de votre page.
Exemple de code HTML
<!DOCTYPE html>
<html lang="fr">
    <head>
    <meta charset="utf-8" />
    <title>Ma page d'accueil</title>
    </head>
    <body>
        <nav>
            <a href="#physique">Description physique</a>
            <a href="#galerie">Galerie d'images</a>
        </nav>

        <h1>Le léopard</h1>
        <h2 id="physique">Description physique</h2>
        <p>
            Le léopard est une espèce de félins. Il a un pelage fauve tacheté de rosettes. Excellent grimpeur et sauteur, le léopard a la particularité de hisser ses proies à la fourche d'un arbre pour les mettre hors de portée des autres prédateurs.
        </p>
        <h2 id="galerie">Galerie d'images</h2>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Namibie_Etosha_Leopard_01edit.jpg/1024px-Namibie_Etosha_Leopard_01edit.jpg" alt="LĂ©opard" />
        <img src="./images/leopard.jpg" alt="LĂ©opard 2" />
        <a href="https://fr.wikipedia.org/wiki/L%C3%A9opard">Wikipédia</a>
    </body>
</html>