Le HTML


Premier pas en HTML

Composition d’une page HTML

Décrit la composition d’un fichier HTML5 de base et présente quelques balises

Avec l’arrivée du HTML   en version 5, une petite révolution c’est produite dans la manière de concevoir une page web et il bon de partir sur de bonnes bases. C’est ce que vous propose cet article.


 Introduction

Actuellement la plupart des navigateurs WEB implémentent des moteurs de rendu capables d’interpréter du HTML5 et du CSS3. Les articles qui suivent se baseront donc sur cette syntaxe.

Les moteurs de rendus HTML5 sont assez souples, ce qui veut dire que si vous oubliez des guillemets ou une balise fermante, la page devrait quand-même s’afficher sans message d’erreur pour éviter que les visiteurs du site ne soient bloqués, ce qui pourrait être gênant pour un site marchand. Néanmoins, dans les exemples fournis dans ces articles nous essayerons de fournir du code le plus propre possible dans une syntaxe proche du XHTML, langage basé sur XML et donc plus rigoureux. Cela vous permettra de détecter plus facilement pourquoi une de vos page ne s’affiche pas correctement dans votre navigateur.

 Définition d’une page HTML5

Une page blanche

Commençons par les balises qui devraient se trouver au minimum dans la définition d’une page.

  1. <!DOCTYPE html>
  2.  
  3. <html lang="fr">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>Page vide en HTML5</title>
  7.   </head>
  8.   <body>
  9.        
  10.   </body>
  11. </html>

Télécharger

Quelques explications sur les différentes sections et balises.

Le DOCTYPE

La première ligne défini qu’il s’agit bien d’une page html   (DOCTYPE). Contrairement aux versions précédentes du HTML  , on ne précise plus de n° de version de la norme.

L’élément html

L’élément <html> constitue la racine du document HTML. Il est conseillé d’y ajouter l’attribut lang qui précise la langue utilisée pour le texte de la page.

L’élément <html> doit contenir un élément <head> et un élément <body>.

L’élément head

Définie l’entête de page. Ce dernier peut contenir les éléments <title>, <meta>, <link>, <style>, <script> et <base>.

Mais si vous voulez être sur que vos pages HTML 5 s’affiche correctement sous les versions récentes de IE qui peut par défaut utiliser un mode de compatibilité pour afficher votre sites, vous devrez ajouter la ligne suivante :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

De même, si vous désirez que vos pages s’affiche avec le bon niveau de zoom sur les smartphones, vous devrez ajouter la ligne suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Ce qui donne le fichier suivant :

  1. <!DOCTYPE html>
  2.  
  3. <html lang="fr">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <!-- Oblige IE à utiliser le haut mode de rendu et non un mode de compatibilité avec les anciens sites -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <!-- Force le bon niveau de zoom sur les périphériques mobiles -->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  10.     <title>Page par défaut</title>
  11.   </head>
  12.   <body>
  13.  
  14.   </body>
  15. </html>

Télécharger

L’exemple suivant montre l’utilisation de quelques balises meta que l’on peut trouver dans la section head du fichier :

  1. <!DOCTYPE html>
  2. <html lang="fr">center
  3.   <head>
  4.     <!-- encodage des caractères -->
  5.     <meta charset = "UTF-8" />
  6.     <!-- Oblige IE à utiliser le haut mode de rendu et non un mode de compatibilité avec les anciens sites -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <!-- titre dans l'onglet du navigateur -->
  9.     <title>Site du programmeur</title>
  10.     <!-- description du contenu (moteur de recherche) -->
  11.     <meta name="description" content="Tous sur les langages de programmation" />
  12.     <!-- mots clés (moteur de recherche -->
  13.     <meta name="keyword" content="java, delphi, html, css, rubyn, python, go" />
  14.     <!-- rafraichir la page toute les 30s -->
  15.     <meta http-equiv="refresh" content="30" />
  16.     <!-- redirection vers une autre url au bout de 10s -->
  17.     <meta http-equiv="refresh" content="10;url:http://www.monsite.fr" />
  18.     <!-- permet d'adpter l'affichage pour les téléphones portables  -->
  19.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.   </head>
  21.   <body>
  22.     <!-- contenu de la page à afficher -->
  23.   </body>
  24. </html>

Télécharger

 Intégrer une feuille de style

Un fichier html ne devrait contenir que les informations à afficher (texte, images...) ainsi que des balises sémantiques pour indiquer si il s’agit d’un titre, d’un paragraphe, d’un lien, une citation… C’est le rôle des feuilles de styles CSS   de préciser le style des différents éléments. C’est dans la feuille de style que vous précisez si le titre de niveau 1 (texte compris entre les balises <h1> et </h1> doit être centré, en gras ou en rouge, avec une ombre etc.

Le lien avec la feuille de style se fait avec la balise <link> dans la section <head> de la page.

  1. <html lang="fr">
  2.   <head>
  3.     <meta charset="UTF-8">
  4.     <title>Page vide en HTML5</title>
  5.     <link href="style.css" rel="stylesheet" type="text/css" />
  6.   </head>
  7.         …

Télécharger

Il est possible de référencer plusieurs feuilles de styles pour une page. On peut, par exemple, préciser le type de média pour spécifier une feuille de style spécifique en fonction de médias particuliers.

  1. <link href="style.css" rel="stylesheet" type="text/css" media="print" />

Les types de média reconnus sont :

screen écran d’ordinateur (média par défaut)
print style dédié à l’impression
projection video-projecteurs
braille pour appareils braille
aural pour synthétiseurs vocaux
tty téléscripteurs ou téléimprimeurs
tv téléviseurs (faible résolution)
handleld appareils portables (petits écrans)
all concerne tous les médias précédents

 Intégrer un fichier JavaScript

Il est très courant d’utiliser des fonctions JavaScript définies dans des fichiers ayant l’extension .js. Comme pour les feuilles de styles .css, vous devez lier votre fichier HTML au fichier JavaScript. Pour cela, on utilise la balise <script ....

Admettons que vous désiriez utiliser JQuery, une bibliothèque de fonctions très courante, vous pourriez la définir dans le bloc head du fichier comme ceci :

  1. <html lang="fr">
  2.   <head>
  3.     <meta charset="UTF-8">
  4.     <title>Page vide en HTML5</title>
  5.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  6.   </head>
  7.         …

Télécharger

Dans cet exemple, on crée un lien directement avec le site Internet d’hébergement de jquery. Dans le cas d’un site intranet non relié à internet, vous devrez télécharger et héberger en local le fichier .js.

Si vous utilisez plusieurs gros fichier JavaScript, dans le but d’optimiser l’affichage de la page, une méthode est de déclarer les fichier en fin de page comme dans l’exemple suivant :

  1. <html lang="fr">
  2.   <head>
  3.     <meta charset="UTF-8">
  4.     <title>Page vide en HTML5</title>
  5.      </head>
  6.   <body>
  7.         …
  8.     <!-- chargement des fichiers js -->
  9.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  10.   </body>
  11. </html>

Télécharger

 Premières balises de mise en page

Maintenant, il faut s’occuper du contenu de la page, ce qu’elle doit afficher. C’est ce que l’on va mettre dans la section body. Nous allons nous contenter dans cet article de créer des pages ne contenant que du texte. Nous ne verrons que quelques balises qui vont nous permettre de définir des paragraphes et différents niveaux de titres. Un peu l’équivalent des styles que l’on trouve dans les traitements de texte.

Définir un paragraphe

C’est tout simple, il suffit de définir le texte entre les balises <p> et </p>

Exemple :

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset = "UTF-8" />
  5.     <title>Exemple</title>
  6.   </head>
  7.   <body>
  8.     <p>Ceci est un paragraphe.
  9. Dans mon fichier HTML je peux aller à la ligne sans que cela ait de conséquence sur l'affichage</p>
  10.   </body>
  11. </html>

Télécharger

Ce qui donne :

Si vous désirez afficher un retour à la ligne à l’intérieur de votre paragraphe, vous pouvez insérez la balise <br />. Autrement, vous pouvez également créer plusieurs paragraphe et vous aurez un retour à la ligne également.

Exemple :

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset = "UTF-8" />
  5.     <title>Exemple</title>
  6.   </head>
  7.   <body>
  8.     <p>Ceci est un paragraphe.</p><p>Ceci est un autre paragraphe</p>
  9.   </body>
  10. </html>

Télécharger

Ce qui donne :

Définir les titres

Il est possible de définir jusqu’à 6 niveaux de titres :

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset = "UTF-8" />
  5.     <title>Exemple</title>
  6.   </head>
  7.   <body>
  8.     <h1>Titre niveau 1</h1>
  9.     <h2>Titre niveau 2</h2>
  10.     <h3>Titre niveau 3</h3>
  11.     <h4>Titre niveau 4</h4>
  12.     <h5>Titre niveau 5</h5>
  13.     <h6>Titre niveau 6</h6>
  14.   </body>
  15. </html>

Télécharger

Ce qui donne :

Remarque : Nous n’avons pas défini de styles particuliers et pourtant nos différents niveaux de titres ont des tailles différentes. Cela vient du fait que la plupart des balises ont un style pré-défini par défaut. Attention, autrefois ces styles par défaut n’étaient pas définis par la norme et donc, vous pouviez vous retrouver avec des polices de caractères, des tailles ou des marges différentes en fonction du navigateur. Lors de la conception d’un site réel, il faudra définir votre propre style pour l’ensemble des balises.

Définir un lien hypertexte

Avant de terminer cet article, voyons une des balises les plus importante puisqu’il s’agit de rendre des portion de textes cliquable pour afficher une autre page ou une autre section. C’est le but premier du HTML (H comme hypertexte). La balise utilisée est <a>. Et voici une utilisation basique de cette balise.

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset = "UTF-8" />
  5.     <title>Page 1</title>
  6.   </head>
  7.   <body>
  8.     <p>
  9.       Ceci est un texe contenant un lien hypertexte.
  10.       Il suffit de cliquer sur ce <a href="page02.html">mot</a>
  11.     </p>
  12.   </body>
  13. </html>

Télécharger

Ce qui donne :

En cliquant sur "mot" vous afficherez le contenu de la page définie dans le fichier page02.html. Dans cet exemple, le fichier devra se trouver dans le même répertoire que page01.html

 Conclusion

A l’origine du HTML les sites n’étaient composés que d’hypertexte, c’est à dire du texte avec des portions cliquables permettant de ce balader d’un article à l’autre à partir de certains mots du texte cliquables. C’est ce que vous pourrez réaliser à partir des quelques balises présentées ici. Bien sur, si vous désirez réaliser un site correspondant aux modes actuelles contenant des images, des videos et des animations, vous aurez encore beaucoup de choses à apprendre mais il faut bien débuter.

Article n° 60

Crée par: chris

Créé le: 15 novembre 2015

Modifié le: 19 février 2018

Nombre de visites: 106

Popularité: 10 %

Popularité absolue: 1

Mots clés de cet article


SPIP

2003-2019 LePpf
Plan du site | | Contact | RSS 2.0

Visiteurs connectés : 6

Nombre moyen de visites quotidiennes sur le site: 170