Le langage HTML
HTML signifie Hyper Text Markup Langage
Le HTML n'est pas considéré comme un langage au sens strict, en effet, il ne contient pas système de variable ou de fonction, ni d'opérateur, ni de structure de contrôle comme les boucle ou les condtions.
Le HTML a été inventé pour permettre de STRUCTURER les documents que les universitaires s'échangaient aux prémices de l'internet.
N'étant pas un langage au sens strict, l'apprentissage de sa syntaxe est très rapide.
Le langage HTML est un langage interpréter, la façon dont il est affiché d'un navigateur à l'autre peut être variable (voir complètement différente).
Un code HTML ne contiens QUE du texte, les autres médias (visible dans la page web) le sont par intégration (ils ne sont pas inclue dans la page web).
Format de fichier
Un fichier contenant du HTML doit être enregistré avec l'extension de fichier HTM ou HTML. Cette extension indique au navigateur que le fichier contiens du code HTML.
Code HTML
Le code HTML ne contiens que des balises, du texte ou des commentaires, la partie code (balise et attributs) s'écris toujours (en respectant la norme XHTML/HTML 4) en minuscule.
Syntaxe des balises
Balise ouvrante, balise fermante
Les balises ont pour but de structurer le contenu d'une page web (on parle souvent de structure sémantique). Le HTML ne doit JAMAIS être utiliser pour mettre en forme le contenu (La mise en forme c'est le rôle du langage CSS).
Par exemple pour le texte, les balises nous permettrons de spécifier où se trouve le titre, le sous-titre et les paragraphes.
Les balises ouvrantes se déclarent avec le nom de la balise en minuscule entourée de chevrons : <balise>
Pour refermer une balise, c'est le nom de la balise précédé d'un slash entouré de chevron : </balise>
exemple :
<p>Ceci est un paragraphe</p> <strong>Ceci est du texte important</strong>
Règle N°1 : Toute balise qui s'ouvrent sont forcement fermée.
Balises imbriquées
Les balises peuvent être imbriquées les une dans les autres pour en cumuler les effets :
<p>Ceci est un paragraphe qui contiens <strong>du texte important</strong></p>
Lorsque l'on imbrique des balises, la seule règle est :
Règle N°2 : Première ouverte, dernière fermée
Balises auto-fermante
Certaines balises n'entrourent pas de texte, afin d'éviter un syntaxe trop lourde : <balise></balise>, on utilise une syntaxe particulière <balise />
Exemple :
<p>Ce paragraphe est suivi d'une ligne de séparation</p> <hr/>
Règle N°3 : Une balise qui ne contiens pas de texte doit être auto-fermante
Attributs de balises
Certaines balises permettent au moment de leur déclaration (dans la balise ouvrante) de spécifier des attributs :
<acronym title="HyperText Markup Language">HTML</acronym>
La syntaxe des attributs est toujours la même : nomattribut="valeur"
On peut également accumuler les attributs en les séparant par un espace :
<abbr title="Monsieur" lang="fr">Mr.</abbr>
La majorité des balises n'ont pas d'attributs obligatoires.
Le système d'imbrication peut être représenté par un arbre qui part de la racine du document. On parle de l'arbre DOM. Chaques balises ou élément texte est qualifié de noeud.
Commentaire
Vous pouvez également placer des commentaires dans votre code :
<!-- Ceci est un commentaire HTML -->
Attention, les commentaires sont visibles en inspectant la source de la page web.
A retenir
- Le code HTML est composé de balise et de texte
- Le HTML sert à structurer les informations et PAS à les mettre en formes
- Les balises ouvertes doivent être refermées (sauf si la balise est auto-fermante)
- Une balise peut avoir 0, 1 ou plusieurs attributs
Structure d'un document XHTML
Un document HTML contiens 2 grandes parties, la partie visible dans la fenêtre du navigateur, le corps et une partie "cachée" qui va fournir au navigateur / moteur de recherche des informations techniques sur le document, l'en-tête.
Pour déclarer ces différentes partie du document, on utilise respectivement la balise head pour l'entête et la balise body pour le corps, ces deux balises sont contenues dans une balise racine : html.
Voici la structure d'un document HTML standard :
<html>
<head>
<!-- en-tête du document -->
</head>
<body>
<p>Contenu de la page</p>
</body>
</html>
L'en-tête
On y trouve des informations techniques à l'attention des navigateurs et des moteurs de recherche.
title
Balise incontournable, son contenu sera affiché dans le navigateur pour titrer la fenêtre, et sera utilisé lors de la création d'un favoris :
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
Ma page
</body>
</html>
La balise title fournis des informations sur le document et est utilisée par les moteurs de recherche pour l'indexation des pages. Cependant il faut éviter les titres "four-tout". Dans ce sens, les moteurs de recherche ne prennent en compte que les 60/70 premiers caractères de la balise title.
metas
Ces informations sont renseignées dans des balises que l'on rencontre dans le head. La plus courante est la fameuse balise meta, voici sa syntaxe :
<meta name="nom de l'information" content="valeur de cette information" />
La balise meta est auto-fermante, comme beaucoup de balise présente dans le head. On peut trouver plusieurs fois la balise meta dans un même document, leur fonction précise est déterminé par la valeur des attributs name ou http-equiv
Voici un exemple de meta classique :
<html>
<head>
<!-- Information sur l'encodage du document (recommandé)
La valeur de content permet de savoir que le fichier contiens du texte
HTML (text/html), et que le fichier est encodé en UTF-8. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Information sur le document (faculatives) -->
<meta name="author" content="Jacksay" />
<meta name="copyright" content="© Studio Jacksay 2011" />
<meta name="language" content="fr" />
<!-- Meta pour les moteurs de recherche, elle sera (généralement)
utiliser comme description dans les résultats de la recherche -->
<meta name="description" content="Description du document" />
<!--
Dans la meta qui suit, le noindex indique de ne pas indexer la page,
le nofollow de ne pas suivre les pages des liens.
Pour que le moteur de recherche index et suive les liens de la page
normalement, vous n'avez pas besoin de mettre de meta robots (c'est
le comportement par défaut)
-->
<meta name="robots" content="noindex, nofollow" />
<title>Ma première page web</title>
</head>
<body>
<p>Contenu de la page</p>
</body>
</html>
A retenir : La seule balise Meta quasi-obligatoire est celle qui définit l'encodage et le type de contenu, la meta Content-Type comme disent les intégrateur web.
http://www.webrankinfo.com/dossiers/techniques/guide-balises-meta : Un article de webrank sur les balises meta (optique référencement)
http://www.alsacreations.com/article/lire/628-balises-meta.html : Utilité des balises meta
link
La balise link est utiliser pour "lier" un fichier au document (un peu comme une pièce jointe). Les fichiers sont chargés par le navigateur en fonction du type de liaison que vous avez définit.
Parmis les link les plus courant :
Icône
Elle sert par exemple à définir l'icône (image de 16x16 pixel) présent devans l'URL du document dans la barre d'adresse (et également d'icône dans les favoris)
<link rel="shortcut icon" type="image/png" href="favicon.png" />
L'image doit être en 16x16 pixel (32x32 toléré). IE a parfois du mal avec les icônes au format PNG.
http://aful.org/gdt/interop/index/icones-page : Tous sur les favicons et des astuces pour contenter IE et faire des icônes animés :P
Feuille de style CSS
La balise link est également utiliser pour attacher des feuilles de style CSS au document.
<link rel="stylesheet" type="text/css" media="all" href="chemin/vers/le/fichier.css" />
L'attribut media peut prendre différentes valeur :
- all : (par défaut) : La feuille de style est appliqué à tous les médias.
- screen : Affiché dans un écran (majorité des cas)
- projection : Supporté par quelques navigateur (dont opéra), activé en mode plein écran
- handheld : Petits écrans
http://www.yoyodesign.org/doc/w3c/css2/media.html : Documentation exaustive sur l'attachement de feuille de style.
Flux RSS
La balise link permet d'associer un flux RSS à votre page (la plupart des navigateurs notifi cette syndication via un icône dans la barre d'adresse)
<!-- Format ATOM --> <link rel="alternate" type="application/atom+xml" title="Nom du flux" href="chemin/vers/le/feed.xml" />
Autre cas
Les balises link sont également utilisées dans d'autre situation qui touche à l'eéchange d'information entre site avec des systèmes automatisés comme le feedback des blogs, les accès remote (ou services web). Ces utilisations sont souvent en rapport avec des systèmes automatisés de gestion de contenu (CMS, librairy PHP).
BASE
La balise base permet de préciser l'URL de base pour les chemins relatif, cette balise est présentée ici à titre anecdotique car on ne l'utilise généralement pas :
<!-- un lien pages/tutoriels.html pointera vers http://studio.jacksay.com/pages/tutoriels/html --> <base href="http://studio.jacksay.com" />
http://www.la-grange.net/w3c/html4.01/struct/links.html#edef-BASE : Documentation officiel pour la balise BASE
La déclaration
Dans le respect des standards, il convient de toujours placer une déclaration DOCTYPE (la DTD) au début du document, cette déclaration indique la norme utilisée pour le document et assure au webmaster et a l'utilisateur la garantit du respect des standards.
http://www.la-grange.net/w3c/xhtml1/#docconf : Doc officiel pour le conformité d'un document XHTML
http://www.siteduzero.com/tutoriel-3-38586-choisir-le-bon-doctype.html : Un article qui explique simplement les différences entre les différentes déclaration standard, et comment choisir la bonne.
Parmis les DOCTYPE disponible, 2 sont à retenir :
XHTML 1.0 strict
Cette première déclaration indique le respect strict de la norme XHTML 1.0. Elle est rarement utilisé en entreprise car elle ne permet pas l'ouverture de lien dans une nouvelle fenêtre.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
XHTML 1.0 transitional
C'est la plus utilisée :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Validation
Comment savoir si mon document XHTML est correctement formatté ? Pour cela la W3C a mis en place un système de validation de contenu :
http://validator.w3.org/ : Validateur de document W3C
Le respect des standards est un gage de qualité et de compatibilité
Document de base
Voici au final le code source de base d'un document HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Titre de la page</title> </head> <body> Corps de la page </body> </html>
Notez que la norme XHTML 1.0 impose la présence de certains attributs dans la balise html, un xmlns (namespace XML), et les attributs xml:lang et lang qui indique la langue di document (cela vous dispense d'utiliser la meta language).