Différences entre les versions de « Ressources::HTML »

De {}
Aller à la navigation Aller à la recherche
Ligne 1 : Ligne 1 :
 
[[HTML::Introduction|Introduction au langage HTML]]
 
[[HTML::Introduction|Introduction au langage 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 :
 +
 +
<syntaxhighlight lang="html5">
 +
<body>
 +
</syntaxhighlight>
 +
 +
exemple de balise fermante :
 +
 +
<syntaxhighlight lang="html5">
 +
</body>
 +
</syntaxhighlight>
 +
 +
Certaines balises sont à la fois ouvrantes et fermantes, c’est le cas de la balise
 +
 +
<syntaxhighlight lang="html5">
 +
<img />
 +
</syntaxhighlight>
 +
 +
qui s’ouvre avec le signe < et qui se ferme avec les signes />.
 +
 +
Les commentaires html sont délimités par les signes
 +
<syntaxhighlight lang="html5">
 +
<!--
 +
</syntaxhighlight>
 +
qui marquent le début d’un commentaire, et les signes
 +
<syntaxhighlight lang="html5">
 +
-->
 +
</syntaxhighlight>
 +
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 :
 +
 +
<syntaxhighlight lang="html5" line>
 +
<!DOCTYPE html><!-- où l'on indique le type de document -->
 +
<html><!-- où l'on indique le début de la page html -->
 +
    <head><!-- où l'on indique le début de la partie "head" -->
 +
    </head><!-- où l'on indique la fin de la partie "head" -->
 +
    <body><!-- où l'on indique le début de la partie "body" -->
 +
    </body><!-- où l'on indique la fin de la partie "body" -->
 +
</html><!-- où l'on indique la fin de la page html -->
 +
</syntaxhighlight>
 +
 +
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 :
 +
<syntaxhighlight lang="html5" line>
 +
<head>
 +
    <title>
 +
        Le titre de la page
 +
    </title>
 +
    <meta charset="UTF-8" />
 +
</head>
 +
</syntaxhighlight>
 +
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 :
 +
 +
<syntaxhighlight lang="html5" line>
 +
<!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <title>
 +
            Mon titre
 +
        </title>
 +
        <meta charset="UTF-8" />
 +
    </head>
 +
    <body>
 +
        <h1>
 +
            Ma page
 +
        </h1>
 +
        <div>
 +
            <h2>
 +
                Mon titre de mon article
 +
            </h2>
 +
            <img />
 +
 +
            <p>
 +
                Mon nouveau paragraphe
 +
            </p>
 +
            <p>
 +
                Mon autre nouveau paragraphe
 +
            </p>
 +
            <h3>
 +
                Mon sous titre
 +
            </h3>
 +
            <p>
 +
                Mon troisième nouveau paragraphe
 +
            </p>
 +
        </div>
 +
        <div>
 +
            <h2>
 +
                Mon titre de mon article
 +
            </h2>
 +
            <p>
 +
                Mon nouveau paragraphe
 +
            </p>
 +
            <p>
 +
                Mon autre nouveau paragraphe
 +
            </p>
 +
            <h3>
 +
                Mon sous titre
 +
            </h3>
 +
            <p>
 +
                Mon troisième nouveau paragraphe
 +
            </p>
 +
        </div>
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
On distingue ci-dessus les balises <code>&lt;div&gt;</code>, <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;img&gt;</code>.
 +
 +
La balise <code>&lt;div&gt;</code> 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 <code>&lt;h..&gt;</code> permettent de hiérarchiser les différents niveaux de titres présents dans la page. Dans notre exemple, la balise <code>&lt;h1&gt;</code> est attribuée au titre global de la page, la balise <code>&lt;h2&gt;</code> aux titres des articles et la balise <code>&lt;h3&gt;</code> aux sous-titres des articles. On peut indiquer jusqu’à 6 niveaux de titres à l’aide de ces balises ; <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code> . La hiérarchie de ces balises est décroissante (<code>&lt;h1&gt;</code> est plus important que <code>&lt;h2&gt;</code>).
 +
 +
Les balises <code>&lt;p&gt;</code> correspondent à des paragraphes de texte.
 +
 +
La balise <code>&lt;img&gt;</code> à un contenu image.
 +
 +
  
 
[[Catégorie:Ressources]]
 
[[Catégorie:Ressources]]

Version du 11 octobre 2015 à 17:43

Introduction au langage 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.

Récupérée de « https://curlybraces.be/wiki/index.php?title=Ressources::HTML&oldid=251 »