Petit guide du langage HTML 4 et XHTML 1

(1)

Petit guide du langage HTML 4 et XHTML 1

Dans ce polycopié, les attributs sont placés de manière décalée par rapport à la balise de l'élément.

Les variantes de valeurs sont indiquées sous la forme : variante1|variante2|variante3.

Légende de ce document :

4 élément ou attribut officiel de la version 4 (donc du HTML 4.01 et du XHTML 1)

D élément ou attribut déprécié ("deprecated") en HTML 4 (en général remplacé par un style CSS).

P élément ou attribut propriétaire, reconnu par un des navigateurs courants : IE (Internet Explorer) ou NN (Netscape Navigator).

X élément ou attribut apparu en XHTML

PROLOGUE : XML et DTD (Tout document XML bien formé devrait contenir ces balises) 4 Déclaration XML <?xml version="1.0" encoding="iso-8859-1" ?>

5 DTD du HTML5 <!DOCTYPE html> précise le rendu d'affichage au navigateur

4 DTD et version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4 Version de langage HTML 4.0 | HTML 4.01 | XHTML 1.0 | XHTML 1.1

4 Type de DTD de XHTML 1.0 Strict | Transitional | Frameset selon les balises utilisées

4 nom du fichier xhtml1 xhtml1-strict.dtd | xhtml1-transitional.dtd | xhtml1-frameset.dtd GÉNÉRAL

4 Type de document <html> </html> début et fin du document

4 Espace de nom xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"

5 langue lang="fr"

4 En-tête <head> </head> entoure l'en-tête du document

4 Titre <title> </title> titre de la fenêtre, à placer dans l'en-tête

4 Corps <body> </body> entoure le corps du document

D Image d'arrière-plan background="url" remplacé par style CSS

D Couleur d'arrière-plan bgcolor="couleur" remplacé par style CSS

D Couleur de texte par défaut text="couleur" remplacé par style CSS

D Couleur de lien par défaut link="couleur" remplacé par style CSS

D Couleur de lien visité par défaut vlink="couleur" remplacé par style CSS

D Couleur de lien actif par défaut alink="couleur" remplacé par style CSS

P Largeur et Hauteur de la marge marginwidth="n" marginheight="n" NN

P Largeur et Hauteur de la marge leftmargin="n" topmargin="n" IE

4 Commentaires

META-INFORMATION sur le DOCUMENT (dans la section HEAD)

4 Information META <meta />

4 Jeu de caractères utilisé http-equiv="content-type" content="text/HTML; charset=utf-8"

4 Requête de rafraichissement de document http-equiv="refresh" content="n;URL=url" n secondes

4 Expiration du document dans le cache http-equiv="expires" content="Tue, 20 Jul 2003 01:00:00 GMT"

4 Description du site name ="description" lang="fr" content="résumé décrivant le site"

4 Mots clés du document name="keywords" lang="fr" content="exp1, exp2, exp3" xml:lang en xhtml1.1 4 Logiciel de création utilisé name ="generator" content="Nvu"

4 Indexation de document par un moteur name="robots" content="noindex|all|nofollow"

4 Auteur name="author" content="PETIT Florence, DUPONT Jean" nom des auteurs Date de création name="DC.Date.created" content="2001-12-31"> cf. Dublin Core Copyright name="copyright " content="année détenteur_droit"

FONTE, POLICE DE CARACTERES (dans la section BODY)

D Fonte <font> </font> remplacé par style CSS

D Sélection de fonte face="nom_police1, nom_police2,…" remplacé par style CSS

D Couleur de fonte color="couleur" remplacé par style CSS

D Taille de fonte absolue size="n" remplacé par style CSS

D Taille de fonte relative size="+n|-n" remplacé par style CSS

D Fonte de base du document <basefont size="n" font="police" color="couleur" /> remplacé par style CSS BALISE PHYSIQUE de TEXTE EN LIGNE

4 Gras (Bold) <b> </b>

4 Italique <i> </i>

D Souligné <u> </u> à éviter car le souligné indique l'hypertexte

4 Indice <sub> </sub>

4 Exposant <sup> </sup>

4 Texte télétype <tt> </tt> police à chasse fixe

D Rayé <strike> </strike> remplacé par style CSS

D Rayé (version abrégée) <s> </s> remplacé par style CSS

(2)

BALISE LOGIQUE de TEXTE EN LIGNE

4 Bloc de texte <span> </span> pas de changement de ligne, ni de paragraphe

4 Texte supprimé <del> </del> en général texte barré

4 Texte inséré <ins> </ins> en général soulignement

4 Abréviation de terme <abbr title="…"> </abbr> contenu du post-it au survol 4 Acronyme de terme <acronym title="…"> </acronym > contenu du post-it au survol 4 Désactivation Unicode <bdo dir="rtl|ltr"> </bdo> Sens de lecture : right to left, left to right 4 Titre d'une source citée <cite> </cite> en général italique (titre de livre, de poème) 4 Citation courte <q lang="fr" cite="source"> </q> guillemets ajoutés (type selon la langue)

4 Code informatique <code> </code> police à chasse fixe

4 Définition de terme <dfn> </dfn> en général italique

4 Emphase <em> </em> en général italique

4 Emphase forte <strong> </strong> en général gras

4 Texte saisi au clavier <kbd> </kbd> police à chasse fixe

4 Séquence de caractères littéraux <samp> </samp> police à chasse fixe

4 Variable <var> </var> en général italique

4 Fonte plus grosse <big> </big>

4 Fonte plus petite <small> </small>

LIGNE HORIZONTALE (rupture thématique) 4 Ligne horizontale <hr />

D Alignement align="left|right|center" remplacé par style CSS

D Épaisseur size="n" remplacé par style CSS

D Largeur en pixel width="n" remplacé par style CSS

D Largeur en pourcentage width="n%" remplacé par style CSS

D Ligne sans ombre noshade="noshade" remplacé par style CSS

SAUT DE LIGNE

4 Saut de ligne (sans espacement) <br />

D Alignement forcé clear="left|right|all" habillage du texte par rapport à un élément

P Pas de coupure de ligne <nobr> </nobr> IE NN

P Coupure éventuelle de mot <wbr> IE et NN (à l'intérieur d'une balise NOBR)

ESPACEMENT, RETRAIT, MARGE

P Espaceur <spacer> reconnu par NN

P Type d'espaceur type="horizontal|vertical|block" NN

P Grandeur size="n" avec type="horizontal|vertical"

P Dimensions width="n" height="n" avec type="block"

P Alignement align="left|right|center" avec type="block"

P Multi-Colonnes <multicol cols="n"> </multicol> NN

P Longueur de colonnes gutter="n" NN

P Largeur de colonne width="n" NN

BLOCS

4 Paragraphe <p> </p> en général espacement entre paragraphes

4 En-tête ou titre hiérarchisé <hn> </hn> n="1" (important) à "6" (moins important)

4 Division (bloc neutre) <div> </div> peut encadrer n blocs

D Alignement du texte (p, hn; div) align="left|center|right|justify" remplacé par style CSS

D Centré <center> </center> remplacé par style CSS

4 Adresse électronique <address> </address> souvent en italique

4 Citation longue <blockquote> </blockquote> retrait à partir des 2 marges, doit contenir autre bloc

4 Pré-formaté <pre> </pre> formatage de caractères sans modification

P Calque <layer> </layer> et <ilayer> </ilayer> NN

LISTES (Différentes listes peuvent être imbriquées)

4 Liste à puces (non-ordonnée) <ul> </ul> Les listes peuvent s'imbriquer

4 Liste numérotée (ordonnée) <ol> </ol> Les listes peuvent s'imbriquer

D Type de puce (ul,li) type="disc|circle|square" remplacé par style CSS

D Type de numérotation (ol,li) type="A|a|I|i|1" remplacé par style CSS

D Valeur de départ de la liste (ol) start="n" en chiffre arabe (sans tenir compte de TYPE) 4 Elément de liste (ul, ol) <li> </li> A placer dans un <ul> ou <ol>

D Valeur à partir d'un élément value="n" en chiffre arabe (sans tenir compte de TYPE)

4 Liste de définition <dl> </dl> contient les DT et DD

4 Eléments de liste de définition <dt>terme 1 à définir </dt <dd>Définition du terme 1</dd>

D Liste de menu <menu> <li> </li> </menu> affichage sur une colonne D Liste de répertoire <dir> <li> </li> </dir> affichage sur plusieurs colonnes

D Liste compacte compact="compact" s'applique à UL, OL, DIR, MENU, DL

(3)

TABLEAUX

4 Tableau <table> </table>

4 Bordure par défaut border

4 Epaisseur de bordure border="n"

P Couleur de bordure bordercolor="couleur" IE

P Ombrage de bordure bordercolorlight="couleur" bordercolordark="couleur" IE

4 Bordures intérieures rules="none|rows|cols|groups|all"

4 Espace entre cellules (bordure interne) cellspacing="n"

4 Espace entre texte et bord de cellule cellpadding="n"

4 Largeur en pixel ou en pourcentage width="n|n%"

P Hauteur en pixel ou en pourcentage height="n|n%" IE NN

D Alignement horizontal align="left|right|center" pour table

4 Sens d'affichage des colonnes dir="rtl|ltr" rtl pour inverser

4 Légende du tableau <caption>Légende du tableau</caption> après <table>, facultatif D Alignement de légende align= "bottom|top|left|right" right pas reconnu dans NN 4 Ligne ou rangée (Table Raw) <tr> </tr>

4 En-tête de tableau (Table Head) <th> </th> formatage souvent italique centré

4 En-tête de colonne, rangée… scope="col|row|colgroup|rowgroup"

4 Cellule de tableau (Table Data) <td> </td>

4 Etendre la cellule sur n colonnes (horiz) colspan="n" pour th, td

4 Etendre la cellule sur n lignes (vert) rowspan="n" pour th, td

D Pas de coupure de ligne nowrap pour th, td

4 Groupe structurel de n colonnes <colgroup> </colgroup> ou <colgroup /> à mettre avant thead, tfoot, tbody 4 Groupe non structurel de colonnes <col />

4 Regroupement de n colonnes span="n" pour col et colgroup (sans col)

4 Section d'en-tête horizontale <thead> </thead> un seul facultatif

4 Section de pied horizontale <tfoot> </tfoot> un seul facultatif

4 Section de corps horizontale <tbody> </tbody> à placer après thead et tfoot

4 Largeur de cellule width="n|n%|*" colgroup, col, thead, tfoot, tbody, td

D Largeur - Hauteur width="n|n%" height="n|n%" pour th, td

D Couleur de fond de cellule bgcolor="couleur" tout élément de tableau

P Image de fond background="url" tout élément de tableau

4 Alignement vertical valign="top|middle|bottom|baseline" tout élément de tableau

LIEN ET ANCRE

4 Création d'une ancre nommée <a name="nom_ancre" id="nom_ancre"> en XHTML, id remplace name 4 Syntaxe générale d'un lien <a href="url">texte ou balise d'image</a>

4 Lien sur une image <a href="url"> <img scr="nom_image" attributs éventuels /> </a>

4 Vers un site web href="http://url_site"

4 Vers une adresse électronique href="mailto:adresse@serveur"

P Vers une adresse électronique "enrichie" href="mailto:adresse@serveur?subject=texte_sujet&cc=xxx@yyy" IE NN 4 Relatif à la racine du site href ="/chemin/nom_fichier.htm"

4 Relatif à un document du site href ="chemin/nom_fichier.htm"

4 Relatif à un document du même dossier href ="nom_fichier.htm"

4 Relatif à un document du dossier parent href ="../nom_fichier.htm"

4 Relatif à un document d'un sous-dossier href ="nom_dossier/nom_fichier.htm"

4 Vers un fragment du document (ancre) href="#nom_id" pointe sur un id (xhtml) ou name (html) 4 Vers un fragment de document href="url#nom_id" pointe sur un id (xhtml) ou name (html) 4 Dans un cadre-cible target="nom_cadre|_blank|_self|_parent|_top"

4 Raccourci-clavier d'un lien accesskey="lettre_du_clavier" mettre une légende de type alt touche

4 Titre-légende title="…" contenu du post-it au survol

4 Touche d'accès à l'élément accesskey="x" touche x (à utiliser avec Alt)

4 Adresse de base des liens <base> dans la section <head>

4 URL de base href="url" sous forme d'adresse absolue

4 Cadre-cible pour lien target="nom-cadre"

AFFICHAGE D'IMAGE (gif, jpg, png)

4 Afficher une image <img src="url" /> SRC est un attribut obligatoire

4 Texte alternatif à l'image alt="texte de description…" obligatoire ("" pour texte vide) 4 Largeur - Hauteur width="n" height="n" facultatif mais améliore le temps d'affichage

D Bordure border="n" n= "0" sans bordure

D Espacement horizontal et vertical hspace="n" vspace="n"

(4)

AFFICHAGE DE CARTE-IMAGE REACTIVE

4 Insérer une carte côté client <img src ="url" usemap="#nom_carte" /> Méthode préférable 4 Insérer une carte extérieure client <img src ="url" usemap="fichier#nom_carte" /> fichier extérieur 4 Insérer une carte côté serveur <img src ="url" ismap="ismap" />

4 Définir une carte et ses zones <map name="nom_carte" id="nom_carte" </map> id remplace name en xhtml 4 Définir chaque zone cliquable <area href="url"|nohref="nohref" alt="description" /> dans le <map> </map>

4 Forme de la zone cliquable shape="rect|circle|poly"

4 Coordonnées du rectangle coords="x1,y1,x2,y2" angle gauche sup et angle droit inf

4 Coordonnées du cercle coords="x,y,r" x et y du centre, r pour le rayon

4 Coordonnées du polygone coords="x1,y1,x2,y2,…, xn,yn" x,y de chaque point

4 Affichage dans un cadre particulier target="nom_cadre|_blank|_self|_parent|_top"

STYLES

4 Lien vers feuille de style externe <link rel="stylesheet" href="url.css" /> dans la section<head>

4 Feuille de style globale interne <style type="text/css"> </style> dans la section<head>

FORMULAIRES

4 Délimitation du formulaire <form action="url"</form> method="get" par défaut

method="get|post"> méthodes d'envoi des données

4 Méthode d'encodage pour envoi de fichier enctype="multipart/form-data" pour envoi de fichier (avec post et input type="file") 4 Méthode d'encodage pour mail enctype="text/plain" pour envoi avec post en message 4 Création de zones de formulaires <fieldset> </fieldset> pour regrouper des zones de formulaires si besoin

4 Légende de zone de formulaires <legend>…</legend> dans le fieldset

4 Valeur du champ value="valeur_ controle" pour tous sauf image et file

4 Case cochée initialement checked="checked" pour checkbox, radio

4 Désactive l'élément de formulaire disabled="disabled" pour tous

4 Met l'élément de formulaire en lecture seul readonly="readonly" pour tous

4 Grandeur du champ size="n" pour text, password

4 Longueur maximale maxlength="n" pour text, password, hidden

4 Liste de type de contenu (ex : text/css,image/*) accept="type-de-contenu1,type-de-contenu2" pour <imput type="file">

4 Ordre de tabulation tabindex="n" n entier positif ; 0 pour exclure

4 Menu/Liste déroulante de sélection <select name="nom_ controle"> </select>

4 nombre de ligne d'options visibles size="n"

4 Choix multiple multiple="multiple"

4 Regroupement d'options <optgroup label="…"> </optgroup> encadre plusieurs <option>

4 Option d'une liste <option value="valeur_ controle">texte1</option> dans <select>

4 Option sélectionnée par défaut selected="selected"

4 Bouton à texte ou image <button name="nom_ controle">balise de texte ou image</button>

4 Valeur et type de bouton value="valeur_ controle" type="submit|reset"

4 Style du texte du bouton style="style1;style2"

4 Boîte de texte (32700 caractères) <textarea name="nom_ controle"> </textarea>

4 Taille de la boîte rows="n" cols="n"

P Retour à la ligne souhaitée wrap="off|virtual|physical"

CADRES (division de fenêtre)

4 Document à cadres (jeu de cadre) <frameset> </frameset> après </head>, mais avant <body>

4 Hauteur des lignes rows="a,b,c " taille fixe, en % ou relative (*, 3* pour hauteur restant) 4 Largeur des colonnes cols= "a,b,c" taille fixe, en % ou relative (*, 3* pour hauteur restant)

4 Bordures frameborder="yes|no|0|1" pour FRAME ou FRAMESET

P Largeur de bordure border="n" pour FRAME ou FRAMESET

P Couleur de bordure bordercolor="couleur" pour FRAME ou FRAMESET

4 Définition d'un cadre <frame src="url" name="nom" />

4 Barre de défilement scrolling="yes|no|auto"

4 Cadre non redimensionnable noresize="noresize"

4 Largeur et Hauteur de la marge marginwidth="n" marginheight="n"

4 Contenu sans cadre <noframes> </noframes> encadre la partie <body>

4 Cadre flottant <iframe name="nom" id="nom" src="url"> </iframe> NN6 IE3 4 Position du cadre flottant width="n|n%" height="n|n%" obligatoire sinon pb d'affichage dans IE4 4 Marge du cadre flottant marginwidth="n|n%" marginheight="n|n%" obligatoire sinon pb d'affichage dans IE4

4 Bordures frameborder="0|1"

4 Barre de défilement scrolling="yes|no|auto"

4 Alignement align="left|right|top|middle|bottom"

4 Cadre par défaut pour les liens <base target ="nom-cadre"> dans la section <head>

(5)

INSERTION D'OBJET (SON, VIDEO…)

4 Objet inséré <object data="url">texte</object> devrait remplacer img, iframe, embed et applet 4 Taille (object, applet, embed) width="n" height="n"

4 Type MIME (object, embed) type= "video/quicktime"

D Applet Java à charger et exécuter <applet> </applet> à remplacer par <object>

D Nom du fichier code="nom_fichier_applet"

D Adresse du fichier codebase="url"

D Identificateur name="nom" id="nom"

D Espacement (applet, embed) hspace="n" vspace="n"

P Objet inséré <embed src="url" /> NN IE

D Texte alternatif à embed <noembed>texte</noembed>

P Répétition loop="n|infinite|true|false" NN IE

P Affichage à l'écran hidden="true|false" NN IE

P Déclenchement autostart= "true|false" NN IE

P Son à l'affichage <bgsound src="url" loop="n|infinite" /> IE

SCRIPTS

4 Scripts <script> <!-- … - - > </script>

4 Emplacement d'un script externe src="url"

D Langage utilisé language="javascript|vbscript|jscript" remplacé par type

4 Langage utilisé type="text/javascript|vbscript|tcl"

4 Langage et version type="text/javascript; version=1.2" peu reconnu

4 Message alternatif au script <noscript> </noscript> script désactivé ou non interprété 4 Langage de script par défaut http-equiv="content-script-type" content=" text/javascript|vbscript|tcl"

GESTIONNAIRE D'EVENEMENT INTRINSEQUE

Un événement donné peut s'appliquer à un ou plusieurs éléments donnés.

Gestionnaire Elément support Description de l'événement

4 onclick tout élément quand on clique sur l'élément (lien, image, bouton) 4 ondbclick tout élément quand on double-clique sur l'élément (lien, image, bouton) 4 onkeydown tout élément quand on enfonce une touche du clavier

4 onkeypress tout élément quand on enfonce puis relache une touche du clavier

4 onkeyup tout élément quand on relache la touche du clavier appuyée

4 onmousedown tout élément quand le bouton de la souris est appuyé

4 onmouseout tout élément quand le pointeur de souris quitte la zone de sélection (lien, image) 4 onmousemove tout élément quand le pointeur de souris bouge

4 onmouseover tout élément quand le pointeur de souris entre sur la zone de sélection (lien, image) 4 onmouseup tout élément quand le bouton de la souris est relâché après avoir été appuyé 4 onfocus a, button, label, input, select, textarea quand on sélectionne l'élément de formulaire

4 onblur a, button, label, input, select, textarea quand on quitte l'élément du formulaire (souris, tab)

4 onchange input, select, textarea quand on quitte un élément du formulaire (souris, tab) qui a été modifié 4 onselect input, select, textarea quand on sélectionne l'élément

4 onreset form quand on réinitialise un formulaire pas en HTML5

4 onsubmit form quand on soumet un formulaire

4 onload body, frameset quand le document est chargé

4 onunload body, frameset quand un document est déchargé (affichage d'un autre document)

p onabort img quand on annule le chargement d'une image NN IE

p onerror img en cas de problème de chargement d'une image NN IE

ATTRIBUTS GENERIQUES (utilisables avec tout élément)

Attribut Exemple de valeurs Commentaires

4 id id="logoUPEM" identifiant unique de l’élément

4 class class="piedpage" classe de l'élément, servant à lui appliquer un style 4 style style="color:#000; align:left;" déclaration de style en-ligne (inline)

4 dir dir= "rtl" dir= "ltr" sens de lecture : rtl (right to left), ltr (left to right) 4 lang dir= "fr" dir= "en" langue utilisée

4 title title="Tapez votre nom" titre souvent utilisé comme légende ou aide contextuelle (pop-up au survol)

(6)

Petit guide du langage HTML 5 et XHTML 5

HTML 5 est reconnu à partir de IE9, Firefox 6.

DOCTYPE

5 DTD <!DOCTYPE html> Evite le passage en mode Quirks

META-DATA : META-INFORMATION

5 Information META <meta charset="UTF-8" /> ou autre jeu de caractère

SECTIONS : SECTIONS DE STRUCTURATION du document 5 Zone d'en-tête <header> </header >

5 Zone de pied de page <footer> </footer> ex: pied de page d'un document ou d'un article 5 Zone de navigation <nav> </nav>

5 Zone relative à un autre contenu (à-côté) <aside> </aside>

5 Elément de contenu <article> </article>

5 Section d'un document (ex: chapitre) <section> </section> ex: regroupe des articles ou fragmente un article

5 Regroupement de titre <hgroup> </hgroup> ex: encadre un h1 et un h2

5 Rôle de la partie (balise form, nav, section..) role="…" ex: main, banner, navigation, definition, search…

GROUPING CONTENT : REGROUPEMENT DE CONTENUS

5 Regroupement d'image et légende <figure></figure> ex: encadre une balise img et figcaption 5 Légende de la balise figure <figcaption></figcaption>

EMBEDDED CONTENT : OBJET INSÉRÉ (SON, VIDEO…)

5 Audio, son… <audio src="url"> description alternative </audio> à utiliser s'il n'y a qu'une source 5 Vidéo <video src="url">description alternative</video> à utiliser s'il n'y a qu'une source 5 Paramètre (booléen) de contrôle vidéo/audio controls="controls" ou seulement controls en HTML 5 Paramètre pour l'image affichée initialement poster="url_image"

5 Paramètre de largeur width="…"

5 Paramètre de hauteur height="…"

5 Paramètre de lancement automatique autoplay="autoplay" ou seulement autoplay en HTML 5 Paramètre de pré-chargement preload="auto|none|metadata" ignoré si autoplay présent

5 Paramètre (booléen) pour jouer en boucle loop="loop" ou seulement loop en HTML

5 Source de l'audio ou vidéo <source src="url" type="…" /> A encadrer de balise video ou audio s'il y a n sources 5 paramètre du type d'audio/video type="video/mp4"

5 Piste (sous-titrage) <track /> dans une balise video par ex

5 kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch"

5 Eléments graphiques <canvas>…</canvas> à associer à un script pour l'animer

TEXT-LEVEL SEMANTICS : TEXTE DE NIVEAU SÉMANTIQUE 5 Texte de langue ou ton différent <i>texte</i>

5 Emphase, accentuation <em>texte</em>

5 Renforcement <strong>texte</strong>

5 Mise en évidence d'un texte <b>texte</b> à utiliser si aucune autre balise ne convient

5 Texte rayé <s>texte</s> ex: un ancien prix rayé suivi du nouveau prix soldé

5 Date <date>texte</date>

5 Temps <time>texte</time>

INTERACTIVE ELEMENTS : ÉLÉMENTS INTERACTIFS

5 Menu <menu></menu>

5 type="toolbar|context" menu classique | contextuel

5 Bouton de commande <command onclick="…">…</command> doit être encadré par <menu>