HTML (HyperText Markup Language) est un format permettant de définir les éléments variés d’une "page" qu’on observe avec un logiciel de navigation.
Les pages WEB sont toujours définies dans ce langage, ainsi votre Browser traduit le code source HTML, va chercher les éléments externes (images, sons, etc.) et reconstitue une page complète qu’il vous présente dans une fenêtre sur votre écran.
Il y a des versions successives de ce langage, permettant de définir plus finement la mise en page et la typographie.
On peut parfaitement définir des pages en local, sur son propre disque dur et les lire avec Netscape sans utiliser une liaison Internet. On peut aussi travailler sur un réseau local.
Il s’agit en fait d’une ligne de déclaration du type de document, qui indique au navigateur dans quel type le HTML de la page a été écrit. Par exemple, on pourra rencontrer la déclaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"Le HTML5 est arrivé, et son " DOCTYPE" est bien plus simple à retenir <!DOCTYPE html>.
En le rencontrant, tous les navigateurs actuels passent en mode de rendu standard, vous pouvez donc l'utiliser dès aujourd'hui.
Dans notre cas on choisira le code HTML 5 pour les nouvelles pages, car avec lui les anciens navigateurs tendront à les afficher en mode standard.
La directive doit être placée sur la première ligne du document, avant la balise <html>. C’est une méta instruction pour le navigateur et non une balise HTML. Dans la version 5, la directive indique simplement que l’on a une page Web à afficher:
" <!DOCTYPE html> "
Les différents types de DOCTYPE utilisables sur ce site avec plus de précision ICI
<html> </html>
C’est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante <html> se trouve tout à la fin du code !
L'attribut Lang ne s'adresse pas aux navigateurs, mais plutôt aux outils de traitement automatique qui doivent comprendre les contenus selon leur langue. Ici notre page est en français.
On a tendance à l’oublier : l’attribut lang précise la langue utilisée pour le contenu de la page, lorsqu’il est placé sur la racine <html>.
Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale.
<html lang="fr">
Une langue bien indiquée sera utile ainsi aux synthèses vocales (pour adopter le bon accent).
<head> </head>
Elle contient l’en-tête du document html, c’est-à-dire toutes les informations non visibles par l’internaute. C’est une balise qu’il ne faut pas oublier. Elle fait partie des 4 balises Html qui doivent être présentes dans tous les documents HTML.
<title> </title>
C’est le titre de votre page, probablement l’élément le plus important ! Toute page doit avoir un titre qui décrit ce qu’elle contient. Il est conseillé de garder le titre assez court (moins de 100 caractères en général). Le titre ne s’affiche pas dans votre page, mais en haut de celle-ci (souvent dans l’onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s’affiche dans l’onglet, comme sur la figure suivante. _
<body> </body>
C’est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l’écran. C’est à l’intérieur du corps que nous écrirons la majeure partie de notre code.
Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre aux balises contenues dans l’en-tête…
L’en-tête sert à indiquer un certain nombre d’informations relatives dont le navigateur peut tirer parti. En général ses informations ne sont pas affichées directement.
Quelques exemples : - Donner un titre au document.Préciser l’encodage des caractères est primordial pour exploiter la bonne page de code et ne pas se retrouver avec les caractères spéciaux ou accentués. Le choix de l’UTF-8 est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur internet (dont HTML).
<meta charset="utf-8">
Veiller à ce que l’éditeur permettant de coder en HTML et enregistre le fichier avec le bon encodage. Je vous conseille donc de bien encoder en UTF-8.
Placez cette déclaration d’encodage avant toutes les autres balises contenues dans la section <head>. En effet, celles-ci sont immédiatement concernées, par exemple <title> qui peut déjà faire appel à des caractères en UTF-8 ; ceci également dans un but de sécuriser l’interprétation des caractères spéciaux et prévenir les injections de contenu indésirables.
Dans la majorité des cas, une balise <link> placée dans l’en-tête permet de mettre en relation la page avec d’autres documents externes. La plupart du temps cela concerne les feuilles de style CSS externes avec une relation du type "stylesheet".
<link rel="stylesheet" href="style.css">
Personnellement, je n’ai jamais utilisé <link> que pour l’appel d’une feuille de style, mais d’autre emploi son possible, une recherche sur Google.fr sera indispensable.
Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. Il s’agit d’un format d’icône propriétaire de Windows, basé sur le BMP. Les navigateurs modernes acceptent d’autres types de fichiers d’image comme le PNG qui est un format libre et compressé, mieux adapté au web. Ces navigateurs acceptent également la valeur "icon" pour l’attribut rel. Enfin vous pouvez ajouter le type MIME du fichier image ce qui donne par exemple ceci :
<link rel="icon" type="image/png" href="favicon.png"/>Et du type "icône" pour déclarer l’icône qui se trouvera dans le titre de votre page.
L’attribut robots de la balise meta est utilisé pour donner des directives aux moteurs de recherche sur la manière d’explorer, indexer et parcourir les liens sur une page.
Exemple de balise meta robots :
Exemple de balise meta robots :
Si vous souhaitez simplement bloquer l’indexation de la page, mais laisser la possibilité aux moteurs de suivre les liens, il suffit de ne laisser que la valeur noindex :
<meta name="robots" content="noindex">
La balise <meta name="description" content="" /> permet d’indiquer au moteur de recherche une phrase résumant le contenu de la page. Cette description sera affichée par certains moteurs dans leur page de résultats, sous le titre décrivant la page trouvée.
Si la page ne contient pas de balise <meta name="description" content="" />, seront affichés en règle générale les premiers mots visibles sur la page.
Ce que HTML appelle titre du document c’est en fait du nom du document, qui est souvent utilisé par les navigateurs comme titre de fenêtre.
Pour plus de détails, voir : La balise <title>
L’utilisation de feuilles de styles permet de séparer la forme du fond et présente de nombreux avantages. En particulier, la conception et la maintenance des sites sont simplifiées. De plus, leur utilisation permet d’améliorer l’accessibilité des sites de façon sensible, sans altérer du tout la qualité visuelle des documents, bien au contraire.
La méthode la plus simple consiste à placer la feuille de style dans un fichier séparé, et à y faire référence dans l’en-tête du document. Cette technique permet de réutiliser la même feuille de style dans plusieurs documents.
<link href="style.css" rel="stylesheet" type="text/css"/>
Une méthode consiste à placer le style dans l’en-tête de document entre les balises <head> de telle façon:
<style type="text/css">
</style>
Nous voilà maintenant avec le squelette de notre page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="robots" content="noindex">
<title>Indiquer une feuille de style.</title>
<meta name="description" content="" />
<style type="text/css">
</style>
</head>
<body>
<!-- ICI seras écrit notre texte. -->
</body>
</html>
- Bien faire attention à l’Encodage en UTF-8 ...,