cours_01<HTML5>

4. Structure d'un document html 5

4.1 Éléments de base du code html et ce qu'il affichera dans un fureteur.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>titre de la page </title>
</head>

<body>
</body>

</html>

Ouvrez le logiciel Note Pad ++

Copier ce texte et coller-le dans une page html du logiciel Note Pad ++

 

4.2 Balises, attributs et valeur

4.2.1Balises

Le HTML utilise des balises (aussi appelées « éléments ») pour distinguer les éléments logiques de la page.

Toute balise doit être ouverte (sans quoi elle n'existe pas, évidemment) ; et toutes les balises doivent également être fermées.

Voici un exemple où <h1> est une balise :

<h1> Ceci est un titre 1 </h1>


Les balises HTML fonctionnent :

1. Par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /.

<h1> Ceci est un titre 1 </h1>

ou

2. Les balises seules (ou autofermantes) : elles sont un peu plus rares, mais il y en a quand même. Il existe des cas où la balise n'a pas besoin d'une balise de fermeture. Dans ce cas de figure, la structure est la suivante :

<nomdelabalise />

!!! l'espace et le / avant le signe > sont important pour que votre balise soit interprétée dans les anciens navigateurs. !!!

 

Voici une liste des balises seules (ou autofermantes) en :

<area />, <br />, <hr />, < img />, < input />, <link />, < meta />, < param />,

 

 

Imbrication des balises

Les balises doivent être ouvertes et refermées dans l'ordre. Faites spécialement attention dans le cadre de balises imbriquées.

Bon : <body> <p>corps du document </p> </body>

Mauvais : <body> <p>corps du document </body> </p>

retou vers haut de page

 

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

4.2.2 Attributs et valeur

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé. Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir une ou plusieurs valeurs.

Voici un exemple d'attribut pour la balise <a>

<a href="mailto:maLegault@cegepoutaouais.qc.ca">mon adresse courriel </a>

 

a ( Correspond à la balise <a> est un lien hypertexte )

href ( Correspond à l'attribut href (page de destination))

"mailto:maLegault@cegepoutaouais.qc.ca" ( Correspond à la valeur de l'attribut href )

4.3 types de balises : bloc et ligne

En , il y a 2 types de balises :

Les balises de type ligne « inline » : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe et elles ne peuvent contenir que des éléments de d'autres balises ligne, mais pas de balises de type BLOC.C'est le cas notamment des balises <strong>, <em>, <q> etc... Par exemple :

<a>, <br />, <hr />, < img />, < strong >, <span>, <abbr>



Les balises de type bloc « blocs » : ces balises servent à structurer la page en plusieurs "blocs". Chacune de ces balises constitue un bloc séparé et peuvent contenir d'autres éléments bloc ou ligne. Par exemple :

<blockquote>, <body>, <div>, < li >, <h1>, <body>,

4.3.1 types de balises : autofermantes

Les balises de type « autofermantes » sont des balises qui sont ouvrantes et fermantes en même temps. Elles ne contiennent pas de contenu. On ferme donc la balise en ajoutant un espace et une barre oblique (/) à la fin de la balise.

Les balises « autofermantes » sont soit de type BLOC (exemple : <hr />),
soit de type EN LIGNE (exemple : <img />).

Voici la liste des balises « autofermantes » :
<area /> , <br /> , <hr /> , <img /> , <input /> , <link /> , <meta /> , <param />

retou vers haut de page

4.4 Explication de la structure d'un fichier

Nous reprenons l'exemple du point 3.2, et nous allons voir les différentes parties qui composent le fichier . La compréhension des parties est capitale pour écrire en .

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>titre de la page </title>
</head>

<body>
</body>

</html>

 

4.4.1 Le Doctype : <!DOCTYPE html>

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

Cette ligne du doctype était autrefois incroyablement complexe. Il était impossible de la retenir de tête. Pour XHTML 1.0, il fallait écrire :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
Dans le cadre de HTML5, il a été décidé de la simplifier, pour le plus grand bonheur des webmasters. Quand vous voyez une balise doctype courte (<!DOCTYPE html>), cela signifie que la page est écrite en HTML5.

 

4.4.2 La balise <html>

<html >


</html>


 

4.4.3 L'en-tête d'un document : <head>

<head>
<meta charset="utf-8" />
<title>titre de la page </title>
</head>

La balise <title>

 

4.4.4 Le corps du document : la balise <body>

 

4.4.5 <meta charset="utf-8" />

 

retou vers haut de page

 

© Mathieu Legault

Techniques d'intégration multimédia
Cégep de l'Outaouais