Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)

Delphine Malassingne — Wed, 11 Jun 2008 20:16:09 +0000

Ouverture / fermeture

Une page HTML contient nécessairement certains éléments :

les balises qui indiquent que l’on va « parler » en HTML

Elles encapsulent la totalité du HTML.

la section qui contient les informations non affichées mais nécessaires au navigateur

Elles encapsulent des informations telles que le titre de la page, la description de la page, les mots-clé, l’encodage utilisé, la langue, la favicon, etc.

On y trouve aussi certains appels aux autres « couches » de la page : feuille de style, script Javascript, etc.

la section visible par le navigateur

C’est dans cette section que ce trouve tout ce qui peut être vu/lu par l’internaute ; tout ce qui s’adresse à lui.

Le doctype

Le doctype fait partie des éléments obligatoires sur une page HTML. Il indique quelle est la « grammaire » utilisée : la version de (X)HTML et le lien vers la grammaire en question, sur le site du W3C. Il se situe donc juste avant la balise qui indique le début de HTML.

Par exemple, de Doctype pour indiquer qu’on utilise du XHTML 1.0 Strict est :

Initiation au HTML – Plan de l’article complet

Initiation au HTML (1/5)
HTML et Internet (Initiation au HTML 2/5)
Le langage HTML (Initiation au HTML 3/5)
Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
Le W3C (Initiation au HTML – Annexe III)
Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Le langage HTML (Initiation au HTML 3/5)

Delphine Malassingne — Wed, 04 Jun 2008 19:55:44 +0000

HTML et les autres éléments d’une page

La séparation des différents éléments

Une page web est un ensemble de « couches » d’éléments qui, combinés ensemble, font la totalité de la page : texte, design, fonctionnalités, interactivité, etc.
Chacun de ses aspects est traité indépendamment les uns des autres par différents langages.

La structure de l’information est gérée par le HTML.

La mise en forme (couleurs, typographies, emplacements des éléments, etc.) est traitée par les feuilles de style (CSS).

Certains comportements destinés à amener une « couche de confort » (ouverture dans une nouvelle fenêtre, apparition/disparition de texte, etc) sont traiter par le Javascript.

Enfin, dans le cas de traitement de données importantes (simulation en ligne, formulaire de demande, etc.), on utilise un langage de développement ; le PHP par exemple.

Le rôle du HTML : structurer le contenu

Le langage HTML est un langage de structuration : cela veut dire qu’il indique pour chaque information donnée dans la page, le type d’information dont il s’agit : paragraphe, lien, image, citation, adresse, etc.

A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).

Le code

Les outils

Les outils du développeur sont :

un éditeur. Cela peut être un simple éditeur de texte ou un logiciel type « WYSIWYG » : What You See Is What You Get.
dans l’idéal, des plateformes de test. Pour pouvoir tester ses pages dans différentes configuration
dans la plupart des cas, un logiciel FTP. Pour envoyer les fichiers créés à disposition sur le serveur, pour les mettre « en ligne ».

Un langage de balises

Le HTML est composé avec des balises. Les balises sont des éléments encadrant le contenu. Elles indiquent le type d’information donnée (titre, paragraphe, image, liste, etc). Elles permettent de structurer la page et d’indiquer le type d’information.

Ex :
<p>Cette balise indique un paragraphe.</p>

Ce qui donne, dans la page :
Cette balise indique un paragraphe.

Une balise HTML est un élément de la grammaire HTML (de la « langue » HTML). La balise marche par paire : une balise ouvrante, une balise fermante. Entre les deux balises, se place le contenu.

Aperçu du code de la même section de page

Les attributs

Une balise HTML indique donc le type d’information qu’elle délivre. La balise peut ensuite être « paramétrée » par des éléments supplémentaires : les attributs.

Par exemple, pour indiquer un lien, on utilise la balise . Mais signaler que le texte qui est encapsuler dans la balise est un lien ne suffit pas. D’autres renseignements sont nécéssaires, comme par exemple la cible du lien. On utilise alors les attributs de la balises : « href » pour la destination du lien, « title » pour le titre du lien (info-bulle).

Ex :

<a href= »http://www.nissone.com/ » title= »Conception de sites web »>Nissone.com</a>

Ce qui donne dans la page :

Nissone.com