<< Retour au sommaire

 

HTML 5, INTRODUCTION

 

 

 

Table des matières

  1. Présentation .
  2. Le squelette de base.
  3. La balise de paragraphe <p> et le saut à la ligne <br />.
  4. Les commentaires ;
  5. Les attributs ;
  6. Balises de mise en forme héritées des versions antérieures du HTML.

 

 

Présentation

 

Le langage de description HTML 5 est le successeur d’une série de langages, le HTML 4 et le XHTML, qui eux-mêmes, à l’origine ont été un dérivé du langage XML.

« HyperText Markup Language ».

Avec le navigateur INTERNET EXPLORER, vous devez utiliser la version 9 ou plus…

 

Règles de base :

  1. Les balises et leurs attributs doivent toujours être écrits en minuscule ;
  2. Les valeurs affectées aux attributs de balises doivent toujours être placées entre guillemets ;
  3. Les balises uniques dites « orphelines » n’étant pas des balises de paires, par exemple la balise « br », doivent se terminées par un « espace », puis un « slash » avant le signe supérieur. Par exemple :

<br />

  1. Le squelette de base d’une page doit comporter une balise qui définit la page comme une page écrite en HTML, et d’une autre balise spécifiant la langue utilisée.

 

Pour développer vos pages WEB en XHTML, je vous conseille d’utiliser le bloc-Notes de WINDOWS, accessible depuis le sous menu « accessoires » du menu démarrer.

Après avoir écris la page, vous pourrez renommer l’extension du fichier « txt » en « html ».

Puis, le fait de presser la touche entrée sur le fichier « XHTML » l’ouvrira dans votre navigateur.

De plus, si vous utilisez le navigateur INTERNET EXPLORER, vous pourrez accéder au code HTML par l’intermédiaire du menu déroulant :

ALT, « Affichage|Source ».

Le code du fichier sera automatiquement ouvert dans le bloc-notes ou dans un éditeur HTML en fonction de la version de votre INTERNET EXPLORER…

Réalisez les modifications du HTML, puis quittez le bloc-notes en acceptant l’enregistrement des modifications. Vous reviendrez automatiquement dans le navigateur INTERNET EXPLORER, pour que les modifications réalisées soient prises en compte, actualisez le navigateur en pressant la touche de fonction « F5 ». 

 

 


Le squelette de base

 

Je vais maintenant vous présenter le squelette de base que doit contenir votre page XHTML.

Le squelette contient uniquement des balises HTML, elles ne seront bien évidemment pas visibles depuis votre navigateur.

 

Le squelette :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Bienvenue sur mon site !</title>

</head>

<body>

 

</body>

</html>

 

Analysons maintenant les différentes balises de ce squelette…

 

La première balise définit la page comme étant une page écrite en XHTML, elle est :

<!DOCTYPE html>

 

<html>

Dans ce cas, l’élément de fin de balise porte le même nom que l’élément de fin de balise mais précédé d’une barre oblique.

Entre les deux éléments de la balise <html>, vous devez placer toutes les autres balises composant votre page.

Le contenu de la balise <html> doit néanmoins se subdiviser en deux parties :

  1. La balise <head>.
  2. La balise <body>.

 

Les informations du bloc contenues entre <head> et </head> peuvent être des balises générales portant sur la page, telle que, par exemple, le titre à afficher dans la barre de titre du navigateur par l’intermédiaire de la balise <title>.

Exemple :

<head>

<title>Bienvenue sur mon site</title>

</head>

 

Toujours dans le bloc <head>, vous devez placer la balise <meta> qui permet de définir la page comme étant une page écrite en français :

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Bienvenue sur mon site</title>

</head>

 

Quant aux 3 lignes suivantes :

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

 

Puis, dans le bloc <body>, vous devez écrire le contenu de votre page, contenu qui sera cette fois visible depuis le navigateur…

Puisqu’il s’agit d’une balise de paire, vous devez écrire le contenu de la page entre <body> et </body>.

 

Voici donc une dernière fois l’intégralité du code minimal que doit contenir une page :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title> mon titre </title>

</head>

<body>

 

</body>

</html>


La balise de paragraphe <p> et le saut à la ligne <br />

 

Le texte contenu dans le bloc délimité par <p> et </p> sera affiché comme un paragraphe, donc avec une ligne vide avant le texte contenu dans le bloc <p>, et une ligne vide après l’élément de fin de balise </p>.

Mais dans le bloc, les retours chariots que vous réaliserez à l’intérieur de votre bloc-notes durant l’élaboration de votre texte n’auront aucun effet dans le navigateur !

Pour exécuter un retour chariot à l’intérieur d’un bloc <p> qui sera visible depuis le navigateur, vous devez saisir la balise <br /> à l’endroit exact où doit être inséré le saut à la ligne…

 

Les balises telles que la balise <p> sont dites des balises bloc, puisqu’elles s’emploient directement dans la composition du bloc <body>.

On verra ultérieurement qu’il existe d’autres balises bloc, tels que les balises de titres…

Cependant, il existe un certain nombre de balises qui ne peuvent s’employer que dans un bloc, ce sont les balises inline.

<br /> est donc une balise inline…

 

Voici un exemple :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Bienvenue sur mon site !</title>

</head>

<body>

<p>

Je suis heureux de vous accueillir !<br />

Le HTML 5 est un super langage de description pour l'élaboration de vos pages WEB !

<br />

Bon, maintenant au boulot et bonne chance à vous...</p>

</body>

</html>

 

Tester la page >>

 

 


Les commentaires

 

Les commentaires sont des lignes de texte qui commentent votre page afin que vous puissiez mieux vous y retrouver lors de votre prochaine relecture.

Ces lignes de texte ne sont pas affichées par le navigateur, elles sont vraiment prévues pour aider le programmeur en commentant le fichier source.

 

Ces lignes de commentaires doivent être placées entre les éléments d’une balise bizarre que voici :

<!-- le texte du commentaire ici -->

 

Reprenons maintenant l’exemple de tout à l’heure, mais cette fois-ci, deux commentaires ont été insérés, le premier au début du paragraphe, et bien sûr, le second à la fin.

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Bienvenue sur mon site !</title>

</head>

<body>

<p>

<!-- Bon, je vais écrire un petit texte pour accueillir l'utilisateur -->

Je suis heureux de vous accueillir !<br />

Le HTML 5 est un super langage de description pour l'élaboration de vos pages WEB !<br />

Bon, maintenant au boulot et bonne chance à vous...

<!-- Voilà, maintenant que je l'ai bien accueilli, il a intérêt à bosser ! -->

</p>

</body>

</html>

 

Tester la page >>

 


Les attributs

 

Les attributs sont des indications complémentaires que l’on fournit à la balise de sorte à modifier certaines propriétés.

Par exemple, pour que le texte d’un paragraphe soit centré :

<p align="center">

Le texte ici

</p>

 

Ici, « align » est l’attribut, et « center » sa propriété.

Les 4 propriétés que peut prendre l’attribut « align sont :

 

Remarque :

  1. Si plusieurs attributs sont insérés dans une balise, la position des attributs dans la balise n’a réellement aucune importance.
  2. Si certains attributs sont facultatifs, pour quelques balises, certains attributs sont obligatoires, c’est le cas par exemple pour les balises <img> et <a>.

 

Balises de mise en forme héritées des versions antérieures du HTML

 

Gras et italique avec les balises <em> et <strong>

 

Ces balises de type inline permettent de valoriser à l’écran un texte de façon à attirer l’attention du lecteur.

 

La balise <em> permet de mettre en évidence un texte mais de façon plus discrète que la balise <strong>.

En quelle que sorte, on peut dire que la balise <em> se rapproche de l’italique, tandis que la balise <strong> se rapproche du style gras.

 

Par exemple :

<p>

Salut jeunesse !<br />

Je me présente, je suis <em>Philippe BOULANGER</em>.<br />

Ok, je ne suis "<strong>pas un cadeau"</strong>.

</p>

 

Exposant et indice avec les balises <sup> et <sub>

 

Les 2 balises que nous allons étudier sont des balises de type inline.

Mettre en exposant, c’est écrire un ou plusieurs caractères en petites lettres en haut de la ligne, c’est la balise <sup>.

Par exemple :

<p>

Jules VERNE a écrit son premier roman au milieu du XIX<sup>ème</sup> siècle.

</p>

 

Mettre en indice, c’est écrire des caractères en petites lettres en bas de la ligne, c’est la balise <sub>.

Par exemple :

<p>x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub></p> 

 

Les citations avec les balises <q> et <blockquote>

 

Pour une citation courte, on utilise la balise inline <q> à l’intérieur d’un paragraphe, et rien ne vous empêche d’associer la citation aux autres balises de style de type <em>, <strong> etc..

 

Par exemple :

<p>

Ecoutez bien ce conseil, <q>rien ne sert de courir, il faut partir à point…</q>

</p>

 

La balise <blockquote> quant à elle, ne doit pas être placée dans un bloc paragraphe mais au

contraire, c’est elle qui doit contenir le paragraphe :

Elle est donc une balise de type bloc, j’ai presque envie de dire « super block » ! Puisqu’elle peut contenir une balise de type block,…

Par exemple :

<blockquote>

<p>

Rien ne sert de courir, il faut partir à point !

</p><p>

C’est ben vrai ça…

</p>

</blockquote>

 

Afficher un trait horizontal avec la balise <hr />

 

La balise de block <hr /> permet de tirer un trait horizontal à l’endroit précis où elle es située dans la page.

Etant une balise de block, elle doit être employée hors d’un block.

 

Voici un exemple :

 

<h1>Premier chapitre</h1>

<p>

Il était une fois un homme trop sympa qui s'appelait Philippe.

</p>

<hr />

<h1>Deuxième chapitre</h1>

<p>

Mais finalement, quand on le connaît bien, il n'est pas si terrible que cela !

</p>

 

Les balises <del> et <ins>, indication d’insertion et de suppression

 

La balise <del> permet de spécifier qu’une chaîne de caractères a été supprimée.

C’est une balise inline, vous devez l’utiliser dans un block…

A l’inverse, la balise <ins> permet de spécifier une chaîne de caractères qui a été insérée !

Le texte intégré dans la balise <del> est barré, tandis que le texte intégré dans la balise <ins> est souligné.

 

Voici un exemple :

<p>

Bonjour cher rédacteur, vous venez de supprimer le texte suivant :<br />

<del>aucune information n'est disponible concernant la réunion du 14 juillet</del><br />

Vous insérer le texte suivant :<br />

<ins>Pour connaître le sujet qui sera abordé lors de la réunion qui aura lieue le 14 juillet, veuillez vous en reporter à l'article approprié du journal</ins>

</p>

 

<dfn> noter une définition

 

<dfn> est une balise de type inline qui permet de noter une définition.

Par exemple :

<p>

Voici la définition de <em>abaissement</em> :<br />

<dfn>nom masculin<br />

1. Action d'abaisser ; baisse, diminution. <br />

2. Fait de s'abaisser.</dfn>

</p>

 

<font> mettre de la couleur à votre texte

 

·        <font> est une balise de type inline qui permet de colorer du texte, vous devez impérativement employer cette balise avec l’attribut « color ».

La syntaxe :

<font color="la-couleur">

Le texte ici

</font>

 

La description –

« la-couleur » est la propriété de l’attribut « color », vous devez spécifier la couleur en anglais,

Liste des couleurs disponibles

Les propriétés de l’attribut « color »

Traduction

Black

Noir

Red

Rouge

yellow

Jaune

green

vert

White

Blanc

Navy

Bleu marine

fuchsia

Rose fuchsia

Blue

Bleu

Gray

Gris

maroon

Maron

Olive

Vert olive

purple

Vilet

silver

Argenté

 

Par exemple :

<p>

La planète <font color="red">rouge</font> n'est autre que la planète MARS.

<br />

La planète <font color="blue">bleue</font> n'est rien d'autre que La TERRE.

</p>

 

Philippe BOULANGER