Dans cette section, nous allons examiner quelques balises permettant de structurer le texte d'un document. Nous ne nous intéressons pas à la mise en forme.
Un certain nombre de balises permettent d'enrichier les informations contenues dans une phrase. Même si elles ne sont pas souvent employées, il peut être intéressant de les connaître :
EM : Indique une mise en exergue.
STRONG : Indique une mise en exergue plus forte.
CITE : Contient un extrait ou une référence vers une autre source
DFN : Indique qu'il s'agit de l'instance définissante du terme englobé.
CODE : Désigne un fragment de code informatique.
SAMP: Désigne un exemple des sorties d'un programme, d'un script, etc.
KBD: Indique un texte que doit saisir l'utilisateur.
VAR: Indique l'instance d'une variable ou le paramètre d'un programme.
ABBR: Indique une forme abrégée (par exemple, « WWW », « HTTP », « i.e. », etc.).
ACRONYM: Indique un acronyme (par exemple, « radar », « LAN », etc.).
Les phrases sont contenues généralement dans des paragraphes. Nous avons vu dans le premier chapitre un exemple de l'utilisation de la balise p. Il est possible de sauter une ligne dans un même paragraphe en utilisant la balise br. Une fois de plus, il est important de na pas se soucier de la présentation du document lors du découpage du contenu en paragraphe : c'est le rôle des feuilles de style CSS, et non d'HTML.
Enfin , tout document devrait posséder une hiérarchisation de titres : titre de chapitre, titre de paragraphe, titre de sous-paragrpahe, etc... Cette hiérarchie est représentée en HTML par les balises H1, H2, H3, H4, H5, H6, du plus important au moins important. Il est important de sousligner que c'est l'agent utilisateur (le navigateur internet par exemple), qui s'occupe de la numérotation des titres ! Cette numérotation est généralement du style 1, 1.1, 1.1.1, 1.1.2, 1.2 ...
Voici un exemple de document utilisant quelques unes des balises précédentes :
Exemple 9. Squelette HTML
<h1>Titre du chapitre</h1> <p>Un exemple de hiérarchie de paragraphes</p> <h2>Titre de niveau 2</h2> <p>Voici <abbr>qqs</abbr> exemples de balises <acronym>HTML</acronym>, enrichissant le contenu d'un paragraphe. Il n'agit ici de ne préciser que le <strong>fond<strong> du document, et non sa forme. </p>
Une URI - Universal Ressource Identifier - est un pointeur qui identifie de façon certaine une ressource disponible quelque part. Une URI peut être :
URN : Qui permet d'appeler une ressource par son nom
URC : Qui décrit les caractéristiques d'une ressource
URL : Qui donne sa localisation (ou plutôt le mode d'emploi pour l'atteindre).
L'URL - Uniform Ressource Location - va donc permettre à un lien hypertexte d'atteindre une ressource. Une URL est composé de la manière suivante :
{scheme}://<nom d'utilisateur>:<mot de passe>@<hôte ou adresse IP>:<port de connexion>/<extension spécifique au protocole>
on dispose ainsi de plusieurs formes de ressources hypertextes :
Exemple 10. URL's
http://www.kurzweg.info/InitLL_2007/asrest/index.htm ftp://ftp.freebsd.org ../../asrest/index.htm mailto:ivan.kurzweg@wanadoo.fr
Comme nous venons de le voir dans l'exemple précédent, il est possible d'écrire le lien vers la page index.hml de deux manières :
en utilisant la référence (path, chemin) absolu
en utilisant la référence relative
Dans le cas de la référence relative, on cherche un objet dans le même espace de noms, en lui donnant le chemin complet depuis l'appelant. La remontée dans l'arborescence de fichier est possible en utilisant le raccourci .. qui siginfie répertoire parent. Ainsi, l'exemple précédent ../../asrest/index.html signifie que l'on descend de deux répertoires depuis le répertoire courant (celui où la page en cours est stocké, qui apparait dans la barre d'adresse), puis on remonte dans le répertoire asrest pour atteindre la page index.html.
Note
Attention, il est important de bien comprendre la nécessité de donner des chemins relatifs quand les objets appartiennent au même espace de noms. En effet, lors, par exemple, de la mise en ligne d'un site Internet, toutes les références changent : un chemin noté /home/ikare/public_html/InitLL/images/logo.jpg sur un poste en local n'aura plus aucune valeur chez un hébergeur Internet ! Par contre, ../images/logo.html sera toujours valide.
La balise a a deux fonctions :
faire une ancre : spécificier dans la page grâce à l'attribut name un point d'accès hypertexte
faire un lien : en spécifiant la valeur de l'attribut href
Il est a noter que la documentation HTML spécifie que la valeur de l'atribut alt (texte secondaire) doit être renseignée. Elle sert dans le cas de navigateur n'affichant pas d'images.
Exemple 11. Liens
<a name="acces">Ici, un point dans la page qui sera accessible grâce à un lien vers la page suivi de #acces</a> <a href="http://www.kurzweg.info/InitLL_2007/asrest/index.htm" alt="Vers une page de cours"> Cliquer ici pour acceder au cours</a> <a href="#acces" alt="Vers une ancre dans la page">Et ici pour remonter !</a>
Heureusement pour le Web, les pages HTML ne sont pas composées que de textes ! Malheureusement pour certains, il est possible d'y inclure des objets qui ne sont pas tous OpenSource, et loin d'être totalement portables (Flash, ActiveX, ... ). Nous nous contenterons dans cette partie d'aborder l'inclusion d'images dans une page HTML.
Les formats les plus couramment utilisés dans les images sont GIF, JPG, PNG. La partie de la formation consacrée aux outils bureautique vous donnera plus d'informations sur ces différents formats. De nombreux sites sur Internet propose des comparatif, en voici : http://csrs.qc.ca/Goeland/proj/envolee/sacdestic/html/optimiser.html.
Note
Il est à noter que le format GIF est un format propriétaire, déposé par Unisys, PNG est par contre libre.
La balise img permet d'inclure une image dans une page HTML. La recommandation du W3C nous donne la définition suivante :
<!-- Pour éviter les problèmes avec les agents utilisateurs
en mode texte seul ainsi que pour rendre le contenu d'une image
compréhensible et navigable pour les utilisateurs d'agents
utilisateurs non-visuels, il est nécessaire de fournir une
description avec ALT, et pour éviter les images cliquables
côté serveur -->
<!ELEMENT IMG - O EMPTY -- image incorporée -->
<!ATTLIST IMG
%attrs; -- %coreattrs, %i18n, %events --
src %URI; #REQUIRED -- URI de l'image à incorporer --
alt %Text; #REQUIRED -- description brève --
longdesc %URI; #IMPLIED -- lien vers une description longue
(en complément de l'attribut alt) --
name CDATA #IMPLIED -- nom de l'image destiné aux scripts --
height %Length; #IMPLIED -- surclasse la hauteur --
width %Length; #IMPLIED -- surclasse la largeur --
usemap %URI; #IMPLIED -- utiliser une image cliquable côté client --
ismap (ismap) #IMPLIED -- utiliser une image cliquable côté serveur --
>
Le renseignement de l'attribut ALT est une obligation. Indiquer les dimensions d'une image, même si elles sont celles d'origine peut permettre un affichage plus rapide de la page
Il existe deux types de listes en HTML : listes à puces et liste ordonnées. Dans les deux cas, le principe de rédaction est le même :
la balise globale ul ou ol (à puces ou ordonnée) englobe la liste
chaque élément de la liste est encadré par la balise li
Une fois de plus, il faut éviter toute inclusion de code lié à la présentation dans HTML.
Exemple 12. Liste à puces
<li class="tocline1"><a href="conform.html" class="tocxref">3 La conformité : obligations et recommandations</a>
<ul class="toc">
<li class="tocline2"><a href="conform.html#q1" class="tocxref">3.1 Définitions</a>
</li><li class="tocline2"><a href="conform.html#conformance" class="tocxref">3.2 La conformité</a>
</li><li class="tocline2"><a href="conform.html#q3" class="tocxref">3.3 Les conditions d'erreur</a>
</li><li class="tocline2"><a href="conform.html#text-css" class="tocxref">
3.4 <span class="index-def" title="text/css">Le type de contenu "text/css"</span></a>
</li></ul>
</li>
Le WEB est à l'origine un outil conçu pour les scientifiques. Ainsi on dispose d'une balise spéciale permettant de faire une liste de déifinitions :
Exemple 13. Liste de définitions
<DL>
<DT>Dweeb
<DD>Une jeune personne motivée qui peut évoluer
en <EM>nerd</EM> ou en <EM>geek</EM>
<DT>Hacker
<DD>Un programmeur futé
<DT>Nerd
<DD>Une personne techniquement brillante mais socialement inepte
</DL>
L'utilisation des tables en HTML est fréquente, même si certains designers les utilisent à mauvais escient (pour cadrer une mise en page par exemple). Le principe d'écriture du code est le suivant :
encadrement du tableau avec la balise table
déclaration des lignes avec la balise tr
déclaration des ccellules (colonnes) dans chaque ligne td
De ces principes découlent certaines contraintes : chaque ligne doit contenir le même nombre de colonnes. Dans des cas spéciaux, il est possible de fusionner plusieurs :
ligne en utilisant l'attribut rowspan
cellules en utilisant l'attribut colspan
Voici un exemple de déclaration de tabeau (source W3C) :
Exemple 14. Un tableau avec des cellules fusionnées
<TABLE border="1"
summary="Cette table donne quelques statistiques sur les
drosophiles : hauteur et poids moyens, et le
pourcentage de celles ayant des yeux rouges
(pour les mâles et les femelles).">
<CAPTION><EM>Une table test avec des cellules fusionnées</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Moyenne
<TH rowspan="2">Yeux<BR>rouges
<TR><TH>hauteur<TH>poids
<TR><TH>Mâles<TD>1.9<TD>0.003<TD>40%
<TR><TH>Femelles<TD>1.7<TD>0.002<TD>43%
</TABLE>
Ce qui nous donnerait le résultat suivant :
Les jeux de cadres - frameset - permettent de diviser la page du navigateur en plusieurs fenêtres indépendantes. Ils sont de moins en utilisés, car posent quelques problèmes dans le référencement opéré par les robots, et par l'affichage dans des navigateurs non-visuels. Par conséquent, je vous renvoie à la documentation W3C pour plus d'informations.
Nous allons maintenant compléter les pages créées dans le premier chapitre.
Page "stagiaire" : vous allez devoir entrer toutes les informations nécessaires dans cette page. Vous vous attaxherez à ne mettre aucune information de présentation, mais à structurer correctement le contenu.
Page liens : sans utiliser de tableau, proposez une classification des liens en 4 parties : HTML, CSS, PHP, MySQL. Entrez quelques liens dans la page
Créez ensuite une page de garde, nommée index.html, qui possède une image et deux liens vers les pages précédentes.
Note
Bien sûr, vos pages doivent être toujours valides W3C.