Comment marche le HTML ?

Publié le par

Comme vu précédemment le HTML est un des piliers du Web. Nous allons voir ici comment ça marche.

Les balises

La base du HTML est le principe de balises. Une balise est là pour délimiter une zone. en HTML, une balise s’écrit à l’aide de chevrons; exemple: <p>.

En HTML, sauf exception, les balises fonctionnent par paire: une balise ouvrante, et une balise fermante; exemple: <p></p>.

La structure d’un document HTML

Voici le moment tant attendu, la découverte de la véritable apparence d’un fichier HTML:

<!DOCTYPE html>
<head lang="fr">
    <meta charset="UTF-8">
    <title>Mon premier fichier HTML</title>
</head>
<body>
    <p>Bonjour le monde !</p>
</body>
</html>

Dans cet exemple extrêment simple, nous distingons les trois zones importante d’un fichier HTML:

  1. la zone délimitée par <html> et </html>, elle correspond tout simplement à tout notre document, sans elle, pas de fichier
  2. ensuite vient la zone d’entête, délimitée par <head> et </head> ; cette zone contient des éléments n’étant pas affichés dans la zone principale du navigateur, comme le titre (<title></title>) de la page, qui apparait dans l’onglet
  3. ensuite vient la partie principale de notre document, le corps (body en anglais).

Les attributs

<p id="par01" class="par">Blablabla</p>

Dans l’exemple ci-dessus, id et class sont ce qu’on appelle des attributs. Ils permettent de préciser quelques paramètres.

id et class sont deux attributs très importants pour le CSS et le Javascript. id permet de distinguer un élément de la page unique, class permet de distinguer un ensemble d’éléments. Exemple avec des balises fictives:

<voiture class="renault" id="clio"></voiture>
<voiture class="renault" id="mégane"></voiture>
<voiture class="renault" id="espace"></voiture>
<voiture class="peugeot" id="408"></voiture>
<voiture class="peugeot" id="208"></voiture>

Comment rendre ça plus beau

Copiez mon premier exemple de code, collez le dans Notepad, et enregistez le avec l’extension .html, puis ouvrez le avec votre navigateur.

C’est fait ? Alors, que pensez-vous du résultat ? C’est vraiment pas beau… Et c’est normal, car pour gérer l’affichage de vos site, HTML ne travaille pas seul ; en effet, il est aidé par son compagnon de toujours, CSS.

Avant de vous expliquer le principe, laissez moi vous montrer un extrait de fichier CSS:

p {
    margin-left: 15px;
}

#wrapper {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.tile {
    float: left;
}

Le principe est simple: on précise l’élément ou l’ensemble d’éléments sur lequel agir, puis entre accolades on précise les propriétés sur lesquelles on veut agir. Dans cet exemple on peut voir trois façons de désigner un élément ou un ensemble d’éléments:

  1. toutes les balises d’un certain type (ici, les balises de paragraphe <p></p>
  2. une balise avec un id précis (ici, l’élément avec l’id « wrapper »)
  3. toutes les balises avec une classe précise (ici, la classe « tile »)

Laisser un commentaire