Haut de page| Alain Barraud | Mémento informatique |
Les sémantiques des éléments et leurs attributs sont définis dans la Recommandation W3C pour le HTML 4. Ces sémantiques définissent les fondations de l'extensibilité future de XHTML. La compatibilité avec les agents utilisateurs HTML actuels est possible en suivant un ensemble raisonnable de règles.
HTML 4.0 et XHTML 1.0 sont des langages très vastes avec un registre pas tout à fait simple de 80 éléments, de leurs attributs possibles, de leurs règles d'imbrication et de toute une série de signes nommés. Les deux langages demandent pour les navigateurs certaines capacités qu'on ne peut pas demander à des logiciels tournant sur des téléphones portables par exemple.
Les évolutions suivantes, qui ont abouti à XHTML 1.1, divisent le langage XHTML en modules, chacun regroupant un type de fonctionnalités. Cette division est conçue pour permettre à du matériel informatique aux capacités techniques limitées, notamment du matériel portable, de ne prendre en charge que des parties bien définies de XHTML.
Cette modularisation est accompagnée de l'abandon des fonctionnalités de HTML 4 pouvant être reprises dans des feuilles de style (typiquement en CSS) : les fonctionnalités définissant les détails de présentation d'une page Web. Le but de cette séparation entre contenu informatif et présentation est également de doter les pages en XHTML de la souplesse nécessaire pour permettre la consultation avec des appareils très divers, de l'ordinateur de bureau au téléphone portable.
Voici une description de quelques-uns des modules disponibles, rangés dans leur catégorie, parmi les plus importants :
Modules de base
STRUCTURE : tout ce qui concerne le squelette du document (body, head, html, title)
TEXT : balises permettant de définir le type de texte, hors listes (p, acronym, em, strong…)
HYPERTEXT : le lien, tout simplement (a)
LIST : les définitions de liste (ul, li, dt, dd…)
PRESENTATION : balises de mise en page du texte (b, i, hr, sub…)
BASIC FORMS: le minimum nécessaire aux formulaires (form, input, label, textarea…)
BASIC TABLES : le strict nécessaire aux tableaux (table, td, tr, th, caption)
IMAGE : la balise image seule (img)
OBJET : les balises de gestion d'objets (object, param)
SCRIPTING : ce qui concerne un contenu exécutable (script, noscript)
STYLE SHEET : permet de styler le document (style)
LEGACY : les éléments ne devant plus être utilisés… mais quand même disponibles au cas où (font, center, strike, u…)
Sur les 28 modules disponibles, quatre sont nécessaires pour que le document soit conforme : les modules de base Structure, Text, HyperText et List.
Il y a 2 types de balises :
<address>, <blockquote>, <body>, <dd>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>, <head>, <hr />, <html>, <li>, <map>, <noscript>, <ol>, <p>,
<pre>, <script>, <style>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>, <ul>.
<img />, <object>, <button>, <input />,<select>, <textarea><a>, <abbr>, <acronym>, <area />, <bdo>, <br />, <button>, <caption>, <cite>, <code>, <del>, <dfn>, <em>, <img />, <input />,
<ins>, <kdd>, <label>, <legend>, <link />, <meta />, <object>, <optgroup>, <option>, <param />, <q>, <samp>, <select>, <span>,
<strong>, <sub>, <sup>, <textarea>, <title>, <var>.
Les attributs
Les attributs servent à donner des précisions sur une balise.
Note :
- Les noms des balises et attributs s'écrivent toujours en minuscules
- Les valeurs des attributs peuvent contenir des majuscules
Syntaxe du code de base d'une page en Xhtml
Explication :
Les commentaires : <!-- commentaires -->
Dans un commentaire, on peut écrire ce que l'on veut, mais mieux vaut éviter les caractères spéciaux notamment les crochets < et >, le dernier pouvant être interprété par le navigateur comme la fin du commentaire.
Les commentaires conditionnels sont des commentaires HTML classiques, mais avec une syntaxe particulière que seul Internet Explorer Windows peut interpréter (mécanisme propre à Windows et que Microsoft préconise). Les autres navigateurs considèrent ces commentaires conditionnels comme tels et les ignorent. IE Windows les prend en compte depuis sa version 5 pour gérer les défauts d'implémentation CSS qui changent suivant les versions.
Il est fortement conseillé d'utiliser ces commentaires conditionnels plutôt que les hacks CSS pour gérer les défauts d'implémentation CSS pouvant être différents suivant les versions IE rendant par la même les hacks problèmatiques.
Les commentaires conditionnels serviront surtout pour IE6 et IE7, IE8 respectant à priori CSS2 (pour CSS3, IE8 toujours en retard).
Les commentaires conditionnels embarquent des instructions que IE pourra interpréter.
Peuvent servir à ajouter des éléments <style>, <script> ou <link> à une page quand elle est lue par IE (cacher pour les autres).
Syntaxe type
<!--[if IE]>
Ici code HTML pour IE
<![endif]-->
<!--, ouverture du commentaire, à partir d'ici, tout ce qui se trouvera après jusqu'à la fin du commentaire, ne sera pas interprété par les navigateurs.[if IE] (et ses variantes), cette condition sera lue et interprétée par IE> sans les doubles tirets, ne ferme pas le commentaire HTML. Par contre, pour IE, cela veut dire que ce qui suit devra être interprété comme HTML (pour les autres, ce sera toujours le commentaire)<![endif] signifie à IE la fin du contenu conditionnel. Pour les autres navigateurs, ce n'est pas interprété, on est toujours dans le commentaire.--> indique la fin du commentairegt pour greater than : > strictement supérieurgte pour greater than equal : ≥ supérieur ou égallt pour less than : > strictement inférieurlte pour less than equal : ≤ inférieur ou égal<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 <![endif]-->
<link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style_ie7.css" />
<![endif]-->
! opérateur de négation (not), if !IE signifie si le navigateur n'est pas IE Windows<!--[if !IE]> <-->
<link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style.css" />
<!--> <![endif]-->
<!--[if !IE]>, comme avant, ouverture commentaire conditionnel disant si le navigateur n'est pas IE Windows. IE ignorera donc tout ce qu'il y aura jusqu'au [endif]<-->, indique aux autres navigateurs la fin du commentaire et ils interprèteront ce qui suivra.![endif] et le commentaire est finalement fermé<!--[if IE7]> <-->
<link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style.css" />
<!--> <![endif]-->
Pour connaître le détail des balises de mise en forme, se reporter au tableau des balises.
Ce paragraphe est destiné à survoler les principales balises, et à préciser certaines particularités.
Les paragraphes
<p>Ceci est un paragraphe</p>
Note : <p> est une balise de type block qui non seulement provoque un retour à la ligne, mais provoque également un saut de ligne. Donc pour créer un saut de ligne, il suffit de faire un second paragraphe.
A la ligne
Voici la balise <br />
pour aller à la ligne. On peut faire plusieurs retour à la ligne dans un paragraphe, mais cette balise deviendra inutile avec l'emploi des CSS
C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne. On doit obligatoirement la mettre à l'intérieur d'un paragraphe, donc pas de <br /> à l'extérieur des balises <p> </p>.
Les titres
6 niveaux de titres de h1 à h6 suivant l'importance que l'on souhaite. Idem à html
Note : la balise titre est une balise block qui donc constitue un bloc. On ne doit PAS mettre de titre à l'intérieur d'un paragraphe.
Mettre en valeur le texte
pour mettre en valeur des mots à l'intérieur d'un paragraphe, 2 balises :
Exposants et indices
Citation longue
C'est la balise blockquote de type block qui comme toutes les balises de type block sert à structurer la page et constitue un bloc séparé et donc ne doit pas se trouver à l'intérieur d'un paragraphe.
On doit mettre <p> à l'intérieur de <blockquote> comme ceci :
<blockquote>
<p>
texte à écrire
</p>
</blockquote>
Les acronymes
C'est une suite d'initiales dont on ne connaît pas toujours la signification. Grâce à l'attribut title, possibilité d'insérer une info bulle
Exemple : <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.
donne (laisser la souris sur XHTML) : XHTML est le langage qui permet de créer un site web.
Note : Firefox souligne en pointillés l'acronyme, tandis qu'IE... ne fait rien.
Idem à html
Lien vers une autre page
Note : mettre un info bulle sur un lien, utiliser l'attribut title
Aller sur la page <a href="balise.html" title="Liste des balises">Liste des balises</a>
donne : Liste des balises
lien pour envoyer un mail
Exemple de syntaxe : Pour me contacter, <a href="mailto:jean.dupont@free.fr">cliquez ici</a>
lien vers une ancre
Pour créer une ancre, on ajoute l'attribut id à une balise qui servira alors de repère
Exemple de syntaxe : <h2 id="mon_ancre">Titre</h2>
Il suffit de rajouter un dièse (#) : <a href="#mon_ancre">Titre</a>
Lien vers une ancre située dans une autre page : même syntaxe et idem html pour le lien :<a href="cible.html#mon_ancre">lien autre page</a>
.jpg, .png, .gif (a compléter)
insérer une image
utilisation de la balise de type marqueur <img />
<img /> peut avoir plusieurs attributs. 2 sont indispensables :
Note : comme pour alt, une image doit être insérée dans un paragraphe, entre les balises <p></p>, pour être conforme à la norme xhtml. (sinon, la page s'affichera mais ne sera pas valide en tant que xhtml.
info bulle avec l'attribut title. Avec IE, sans cet attribut, IE affiche le texte alt comme info bulle ce qui est anormal. Dans le cas où IE trouve les 2 attributs, il affichera l'info bulle de title.(ce qui est normal)
Exemple de syntaxe:
<p>
Voici une photo <img src="images/photo.jpg" alt="Photo de moi" title="Ceci est ma photo" />
</p>
image cliquable mettre image entre balises <a> et </a>
pour le cadre bleu, voir CSS
Syntaxe :
pour retourner au sommaire, cliquer sur le dossier :
<a href="index.html"><img src="images/dossier.gif" alt="dossier" title="Sommaire" /></a>
Résultat :
pour retourner au sommaire, cliquer sur le dossier :
