Scribd
Importer
48 vues5 pages

Langage HTML Guide

Transféré par

rugal201
Copyright
© Attribution Non-Commercial (BY-NC)
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
48 vues5 pages

Langage HTML Guide

Transféré par

rugal201
Copyright
© Attribution Non-Commercial (BY-NC)
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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" ?>
4 DTD et version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
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 Emplacement (dans …TR/…/DTD/…) html | html4 | html401 | xhtml1 | xhtml11
4 nom du fichier html4/DTD/… [Link] | [Link] | [Link]
4 nom du fichier xhtml1 [Link] | [Link] | [Link]

GÉNÉRAL
4 Type de document <html> </html> début et fin du document
4 Espace de nom xmlns="[Link] lang="fr" xml: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 <!--remarque qui n'apparaît pas à l'affichage de la page web-->

META-INFORMATION sur le DOCUMENT (au début de 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="[Link]" 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 : l'auteur spécifie l'apparence du texte


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
P Clignotant <blink> </blink> NN
P Texte défilant <marquee>texte<marquee> IE

Université de Marne-la-Vallée G. Molinengault & F. Petit / langage_HTML_guide.doc


Informatique / web 24 février 2006 1/1
BALISE LOGIQUE de TEXTE EN LIGNE : l'apparence par défaut dépend du navigateur
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 Source d'une citation <cite> </cite> en général italique
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>

TRAIT HORIZONTAL
4 Trait horizontal <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

Université de Marne-la-Vallée G. Molinengault & F. Petit / langage_HTML_guide.doc


Informatique / web 24 février 2006 2/2
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 extérieures frame = "void|above|below|hsides|vsides|rhs|lhs|box|border"
(aucune|haut|bas|horizontales|verticales|droite|gauche|contour)
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 Cellule de tableau (Table Data) <td> </td>
4 En-tête de tableau (Table Head) <th> </th> formatage souvent italique centré
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
4 Alignement horizontal align="left|right|center|justify|char" tout élément de tableau sauf table, caption
4 Alignement sur le caractère précisé char =".|,|…") fonctionne avec align="char"

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="[Link]
4 Vers une adresse électronique href="[Link]
P Vers une adresse électronique "enrichie" href="[Link] 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 Relation entre cible et source rel="parent|child|head|next|prev|toc|index|glossary" type de relation cible/source
4 Relation entre source et cible rev="parent|child|head|next|prev|toc|index|glossary" type de relation source/cible
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 Alignement horizontal align="top|bottom|middle|left|right|texttop|absbottom|absmiddle|baseline"
D Espacement horizontal et vertical hspace="n" vspace="n"
P Image basse résolution lowsrc="url" IE NN

Université de Marne-la-Vallée G. Molinengault & F. Petit / langage_HTML_guide.doc


Informatique / web 24 février 2006 3/3
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="[Link]" /> 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 Etiquette associée à un contrôle <label for="id">…</label> for se réfère à un identifiant du contrôle définit avec id
4 Champ d'entrée <input name="nom_controle"/> name pour récupérer la valeur du champ
4 Type de champ type="text|password|checkbox|radio|image|hidden|submit|reset|button|file"
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>

Université de Marne-la-Vallée G. Molinengault & F. Petit / langage_HTML_guide.doc


Informatique / web 24 février 2006 4/4
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 Bouton controls="smallconsole|console|playbutton|pausebutton|stopbutton|volumelever" 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
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="logoUMLV" 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)

Université de Marne-la-Vallée G. Molinengault & F. Petit / langage_HTML_guide.doc


Informatique / web 24 février 2006 5/5

Vous aimerez peut-être aussi