Ressources::HTML
Introduction
Les balises
Une liste complète de toutes les balises html disponibles est accessible ici : http://www.w3schools.com/tags/default.asp
Le code html permet de structurer les données d’une page. Il n’est pas question de mise en forme ici mais d’organisation du contenu, de manière à pouvoir appliquer la mise en forme ultérieurement, à l’aide d’une feuille de style. Le langage html est composé de balises ouvrantes et fermantes. Toute balise ouverte doit être fermée ultérieurement. exemple de balise ouvrante :
<body>
exemple de balise fermante :
</body>
Certaines balises sont à la fois ouvrantes et fermantes, c’est le cas de la balise
<img />
qui s’ouvre avec le signe < et qui se ferme avec les signes />.
Les commentaires html sont délimités par les signes
<!--
qui marquent le début d’un commentaire, et les signes
-->
qui en marquent la fin. Les commentaires ne sont affichés que dans le code, ils ne seront donc pas visibles pour le visiteur. Ils sont par contre utile pour marquer des indications au sein même du code ; voir l’exemple ci-dessous.
La structure commune à toute page html ressemble à ceci :
1<!DOCTYPE html><!-- où l'on indique le type de document -->
2<html><!-- où l'on indique le début de la page html -->
3 <head><!-- où l'on indique le début de la partie "head" -->
4 </head><!-- où l'on indique la fin de la partie "head" -->
5 <body><!-- où l'on indique le début de la partie "body" -->
6 </body><!-- où l'on indique la fin de la partie "body" -->
7</html><!-- où l'on indique la fin de la page html -->
Notons au passage que lorsque des balises contiennent d’autre balises, on "indente" le code, c’est à dire on insère un espace de tabulation qui permet de distinguer directement une balise contenue dans une autre.
On distingue deux parties principales à la page ; la partie "head" et la partie "body". La partie "head" contiendra ce que l’on appelle les éléments "meta" d’une page, c’est à dire les éléments non-visibles dans l’espace de la page web mais utiles aux moteurs de recherches et au navigateur.
Par exemple :
1<head>
2 <title>
3 Le titre de la page
4 </title>
5 <meta charset="UTF-8" />
6</head>
Va permettre au navigateur d’afficher "Le titre de la page" dans sa barre de titre, c’est à dire tout en haut de la fenêtre, ainsi que d’afficher les caractères de la page dans le bon encodage (UTF8).
Enfin, la partie "body" contiendra le contenu visible de la page ; les éléments à afficher lors de la consultation de la page par un visiteur.
Exemple d’une page html complète :
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>
5 Mon titre
6 </title>
7 <meta charset="UTF-8" />
8 </head>
9 <body>
10 <h1>
11 Ma page
12 </h1>
13 <div>
14 <h2>
15 Mon titre de mon article
16 </h2>
17 <img />
18
19 <p>
20 Mon nouveau paragraphe
21 </p>
22 <p>
23 Mon autre nouveau paragraphe
24 </p>
25 <h3>
26 Mon sous titre
27 </h3>
28 <p>
29 Mon troisième nouveau paragraphe
30 </p>
31 </div>
32 <div>
33 <h2>
34 Mon titre de mon article
35 </h2>
36 <p>
37 Mon nouveau paragraphe
38 </p>
39 <p>
40 Mon autre nouveau paragraphe
41 </p>
42 <h3>
43 Mon sous titre
44 </h3>
45 <p>
46 Mon troisième nouveau paragraphe
47 </p>
48 </div>
49 </body>
50</html>
On distingue ci-dessus les balises <div>, <h1>, <h2>, <h3>, <p>, <img>.
La balise <div> permet de regrouper plusieurs éléments html ensemble. Elle correspond à un "bloc de contenu", à l’image d’un article intégré dans une page de journal.
Les balises <h..> permettent de hiérarchiser les différents niveaux de titres présents dans la page. Dans notre exemple, la balise <h1> est attribuée au titre global de la page, la balise <h2> aux titres des articles et la balise <h3> aux sous-titres des articles. On peut indiquer jusqu’à 6 niveaux de titres à l’aide de ces balises ; <h1>, <h2>, <h3>, <h4>, <h5>, <h6> . La hiérarchie de ces balises est décroissante (<h1> est plus important que <h2>).
Les balises <p> correspondent à des paragraphes de texte.
La balise <img> à un contenu image.
Contenu d'une page html
Les pages html ne contiennent que du texte, soit le code html qui structure le document et le contenu texte. Les médias externes doivent être stockés à l’extérieur de la page. Les images, vidéos, sons, les feuilles de style (fichiers css pour la mise en forme de la page), les fichiers javascript (pour – entre autres – l’interactivité dans la page), sont placés dans des dossiers propres et référencés dans le code html.
L’organisation des dossiers contenant tous ces types de fichiers pour un site web correspond à ceci :
+---site | index.html | page.html | +---images | | image01.jpg | | image02.jpg | +---css | | styles.css | +---js | | init.js
Un dossier site contenant deux pages html : index.html et page.html, ainsi que trois dossiers : images, css et js, qui contiendront respectivement les images, les feuilles de style et les fichiers javascript.
Pour insérer une image dans une page html, il faut insérer une balise <img> comme ci-dessous :
<img src="images/image01.jpg" />
Avec comme syntaxe : le signe < qui ouvre la balise, le mot-clé img qui spécifie le type de balise, le paramètre src (source) qui indique le type de paramètre, le signe = qui indique que la valeur qui suit, (images/image01.jpg – donc l’adresse de l’image – ), entourée par des guillemets correspond au paramètre src, les signes /> qui ferment la balise.
Les paramètres d’une balise html se notent donc :
paramètre="valeur"
L’adresse de l’image se définit à partir de la page dans laquelle elle s’insère. On parle dans ce cas d’adresse relative (relative au document html qui affichera l’image). Pour atteindre le fichier image01.jpg à partir de la page index.html, il faut accéder d’abord au dossier images. La valeur src de la balise img se notera donc src="images/image01.jpg".
Pour insérer un lien dans une page html, il faut insérer une balise <a> comme ci-dessous :
<a href="page.html">Texte du lien</a>
Le paramètre href, ici avec comme valeur "page.html", de la balise <a> spécifie l’adresse de l’élément auquel le navigateur doit accéder lorsque l’on clique sur le lien. La balise <a> entoure l’élément cliquable, ici "Texte du lien". Elle peut entourer également une image comme dans l’exemple ci-dessous :
<a href="page.html"><img src="images/image01.jpg" /></a>
Ci-dessous, deux pages html, index.html et page.html, qui contiendront respectivement un lien pour rediriger le navigateur l’une vers l’autre.
index.html
1<html>
2 <head>
3 <title>
4 Ma page
5 </title>
6 </head>
7 <body>
8 <h1>Mon titre</h1>
9 <div>
10 <h2>Sous titre 1</h2>
11 <a href="page.html"><img src="images/image01.jpg" /></a>
12 </div>
13 <div>
14 <h2>Sous titre 2</h2>
15 <img src="images/image02.jpg" />
16 </div>
17 </body>
18</html>
page.html
1<html>
2 <head>
3 <title>
4 Page 2
5 </title>
6 </head>
7 <body>
8 <h1>page 2</h1>
9
10 <div>
11 <h2><a href="index.html">Sous titre 2</a></h2>
12 <img src="images/image02.jpg" />
13 </div>
14 </body>
15</html>