Petit guide du langage HTML 4 et XHTML 1

Transcription

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"
"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
Emplacement (dans …TR/…/DTD/…)
html | html4 | html401 | xhtml1 | xhtml11
4
nom du fichier html4/DTD/…
strict.dtd | loose.dtd | frameset.dtd
4
nom du fichier xhtml1
xhtml1-strict.dtd | xhtml1-transitional.dtd | xhtml1-frameset.dtd
GÉNÉRAL
4
Type de document
4
Espace de nom
4
En-tête
4
Titre
4
Corps
D Image d'arrière-plan
D Couleur d'arrière-plan
D Couleur de texte par défaut
D Couleur de lien par défaut
D Couleur de lien visité par défaut
D Couleur de lien actif par défaut
P
Largeur et Hauteur de la marge
P
4
Commentaires
<html> </html>
début et fin du document
xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"
<head> </head>
entoure l'en-tête du document
<title> </title>
titre de la fenêtre, à placer dans l'en-tête
<body> </body>
entoure le corps du document
background="url"
remplacé par style CSS
bgcolor="couleur"
text="couleur"
link="couleur"
vlink="couleur"
alink="couleur"
marginwidth="n" marginheight="n"
NN
leftmargin="n" topmargin="n"
IE

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="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>
D Sélection de fonte
face="nom_police1, nom_police2,…"
D Couleur de fonte
color="couleur"
D Taille de fonte absolue
size="n"
D Taille de fonte relative
size="+n|-n"
D Fonte de base du document
<basefont size="n" font="police" color="couleur" />
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>
4
Indice
<sub> </sub>
4
Exposant
<sup> </sup>
4
Texte télétype
<tt> </tt>
D Rayé
<strike> </strike>
D Rayé (version abrégée)
<s> </s>
P
Clignotant
<blink> </blink>
P
Texte défilant
<marquee>texte<marquee>
police à chasse fixe
NN
IE
Université de Marne-la-Vallée
Informatique / web
24 février 2006
à éviter car le souligné indique l'hypertexte
G. Molinengault & F. Petit / langage_HTML_guide.doc
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 >
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>
4
Définition de terme
<dfn> </dfn>
4
Emphase
<em> </em>
4
Emphase forte
<strong> </strong>
en général gras
4
Texte saisi au clavier
<kbd> </kbd>
4
Séquence de caractères littéraux
<samp> </samp>
4
Variable
<var> </var>
4
Fonte plus grosse
<big> </big>
4
Fonte plus petite
<small> </small>
TRAIT HORIZONTAL
4
Trait horizontal
D Alignement
D Épaisseur
D Largeur en pixel
D Largeur en pourcentage
D Ligne sans ombre
<hr />
align="left|right|center"
size="n"
width="n"
width="n%"
noshade="noshade"
SAUT DE LIGNE
4
Saut de ligne (sans espacement)
D Alignement forcé
P
Pas de coupure de ligne
P
Coupure éventuelle de mot
clear="left|right|all"
<nobr> </nobr>
<wbr>
ESPACEMENT, RETRAIT, MARGE
P
Espaceur
P
Type d'espaceur
P
Grandeur
P
Dimensions
P
Alignement
P
Multi-Colonnes
P
Longueur de colonnes
P
Largeur de colonne
<spacer>
type="horizontal|vertical|block"
size="n"
width="n" height="n"
<multicol cols="n"> </multicol>
gutter="n"
width="n"
BLOCS
4
Paragraphe
4
En-tête ou titre hiérarchisé
4
Division (bloc neutre)
D Alignement du texte (p, hn; div)
D Centré
4
Adresse électronique
4
Citation longue
4
Pré-formaté
P
Calque
<p> </p>
<hn> </hn>
<div> </div>
align="left|center|right|justify"
<center> </center>
<address> </address>
<blockquote> </blockquote>
<pre> </pre>
<layer> </layer> et <ilayer> </ilayer>
<br />
habillage du texte par rapport à un élément
IE NN
IE et NN (à l'intérieur d'une balise NOBR)
reconnu par NN
NN
avec type="horizontal|vertical"
avec type="block"
avec type="block"
NN
NN
NN
en général espacement entre paragraphes
n="1" (important) à "6" (moins important)
peut encadrer n blocs
souvent en italique
retrait à partir des 2 marges, doit contenir autre bloc
formatage de caractères sans modification
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"
D Type de numérotation (ol,li)
type="A|a|I|i|1"
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
Informatique / web
24 février 2006
2/2
TABLEAUX
4
Tableau
4
Bordure par défaut
4
Epaisseur de bordure
P
Couleur de bordure
P
Ombrage de bordure
4
Bordures extérieures
4
4
4
4
P
D
4
4
D
4
4
4
4
4
D
4
4
4
4
4
4
4
D
D
P
4
4
4
<table> </table>
border
border="n"
bordercolor="couleur"
IE
bordercolorlight="couleur" bordercolordark="couleur"
IE
frame = "void|above|below|hsides|vsides|rhs|lhs|box|border"
(aucune|haut|bas|horizontales|verticales|droite|gauche|contour)
Bordures intérieures
rules="none|rows|cols|groups|all"
Espace entre cellules (bordure interne)
cellspacing="n"
Espace entre texte et bord de cellule
cellpadding="n"
Largeur en pixel ou en pourcentage
width="n|n%"
Hauteur en pixel ou en pourcentage
height="n|n%"
IE NN
Alignement horizontal
pour table
Sens d'affichage des colonnes
dir="rtl|ltr"
rtl pour inverser
Légende du tableau
<caption>Légende du tableau</caption>
après <table>, facultatif
Alignement de légende
align= "bottom|top|left|right"
right pas reconnu dans NN
Ligne ou rangée (Table Raw)
<tr> </tr>
Cellule de tableau (Table Data)
<td> </td>
En-tête de tableau (Table Head)
<th> </th>
formatage souvent italique centré
Etendre la cellule sur n colonnes (horiz)
colspan="n"
pour th, td
Etendre la cellule sur n lignes (vert)
rowspan="n"
pour th, td
Pas de coupure de ligne
nowrap
pour th, td
Groupe structurel de n colonnes
<colgroup> </colgroup> ou <colgroup />
à mettre avant thead, tfoot, tbody
Groupe non structurel de colonnes
<col />
Regroupement de n colonnes
span="n"
pour col et colgroup (sans col)
Section d'en-tête horizontale
<thead> </thead>
un seul facultatif
Section de pied horizontale
<tfoot> </tfoot>
un seul facultatif
Section de corps horizontale
<tbody> </tbody>
à placer après thead et tfoot
Largeur de cellule
width="n|n%|*"
colgroup, col, thead, tfoot, tbody, td
Largeur - Hauteur
width="n|n%" height="n|n%"
pour th, td
Couleur de fond de cellule
bgcolor="couleur"
tout élément de tableau
Image de fond
background="url"
Alignement vertical
valign="top|middle|bottom|baseline"
Alignement horizontal
align="left|right|center|justify|char"
tout élément de tableau sauf table, caption
Alignement sur le caractère précisé
char =".|,|…")
fonctionne avec align="char"
LIEN ET ANCRE
4
Création d'une ancre nommée
4
Syntaxe générale d'un lien
4
Lien sur une image
4
Vers un site web
4
Vers une adresse électronique
P
Vers une adresse électronique "enrichie"
4
Relatif à la racine du site
4
Relatif à un document du site
4
Relatif à un document du même dossier
4
Relatif à un document du dossier parent
4
Relatif à un document d'un sous-dossier
4
Vers un fragment du document (ancre)
4
Vers un fragment de document
4
Dans un cadre-cible
4
Raccourci-clavier d'un lien
4
Titre-légende
4
Relation entre cible et source
4
Relation entre source et cible
4
Touche d'accès à l'élément
4
Adresse de base des liens
4
URL de base
4
Cadre-cible pour lien
<a name="nom_ancre" id="nom_ancre">
en XHTML, id remplace name
<a href="url">texte ou balise d'image</a>
<a href="url"> <img scr="nom_image" attributs éventuels /> </a>
href="http://url_site"
href="mailto:adresse@serveur"
href="mailto:adresse@serveur?subject=texte_sujet&cc=xxx@yyy"
IE NN
href ="/chemin/nom_fichier.htm"
href ="chemin/nom_fichier.htm"
href ="nom_fichier.htm"
href ="../nom_fichier.htm"
href ="nom_dossier/nom_fichier.htm"
href="#nom_id"
pointe sur un id (xhtml) ou name (html)
href="url#nom_id"
pointe sur un id (xhtml) ou name (html)
target="nom_cadre|_blank|_self|_parent|_top"
accesskey="lettre_du_clavier"
mettre une légende de type alt touche
title="…"
rel="parent|child|head|next|prev|toc|index|glossary"
type de relation cible/source
rev="parent|child|head|next|prev|toc|index|glossary"
type de relation source/cible
accesskey="x"
touche x (à utiliser avec Alt)
<base>
dans la section <head>
href="url"
sous forme d'adresse absolue
target="nom-cadre"
AFFICHAGE D'IMAGE (gif, jpg, png)
4
Afficher une image
4
Texte alternatif à l'image
4
Largeur - Hauteur
D Bordure
D Alignement horizontal
D Espacement horizontal et vertical
P
Image basse résolution
<img src="url" />
SRC est un attribut obligatoire
alt="texte de description…"
obligatoire ("" pour texte vide)
facultatif mais améliore le temps d'affichage
border="n"
n= "0" sans bordure
align="top|bottom|middle|left|right|texttop|absbottom|absmiddle|baseline"
hspace="n" vspace="n"
lowsrc="url"
IE NN
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" />
4
Insérer une carte extérieure client
<img src ="url" usemap="fichier#nom_carte" />
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>
4
Définir chaque zone cliquable
<area href="url"|nohref="nohref" alt="description" />
4
Forme de la zone cliquable
shape="rect|circle|poly"
4
Coordonnées du rectangle
coords="x1,y1,x2,y2"
4
Coordonnées du cercle
coords="x,y,r"
4
Coordonnées du polygone
coords="x1,y1,x2,y2,…, xn,yn"
4
Affichage dans un cadre particulier
target="nom_cadre|_blank|_self|_parent|_top"
STYLES
4
Lien vers feuille de style externe
4
Feuille de style globale interne
<link rel="stylesheet" href="url.css" />
<style type="text/css"> </style>
Méthode préférable
fichier extérieur
id remplace name en xhtml
dans le <map> </map>
angle gauche sup et angle droit inf
x et y du centre, r pour le rayon
x,y de chaque point
dans la section<head>
dans la section<head>
FORMULAIRES
4
Délimitation du formulaire
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
P
<form action="url"</form>
method="get" par défaut
method="get|post">
méthodes d'envoi des données
Méthode d'encodage pour envoi de fichier
enctype="multipart/form-data" pour envoi de fichier (avec post et input type="file")
Méthode d'encodage pour mail
enctype="text/plain"
pour envoi avec post en message
Création de zones de formulaires
<fieldset> </fieldset>
pour regrouper des zones de formulaires si besoin
Légende de zone de formulaires
<legend>…</legend>
dans le fieldset
Etiquette associée à un contrôle
<label for="id">…</label>
for se réfère à un identifiant du contrôle définit avec id
Champ d'entrée
<input name="nom_controle"/>
name pour récupérer la valeur du champ
Type de champ
type="text|password|checkbox|radio|image|hidden|submit|reset|button|file"
Valeur du champ
value="valeur_ controle"
pour tous sauf image et file
Case cochée initialement
checked="checked"
pour checkbox, radio
Désactive l'élément de formulaire
disabled="disabled"
pour tous
Met l'élément de formulaire en lecture seul
readonly="readonly"
pour tous
Grandeur du champ
size="n"
pour text, password
Longueur maximale
maxlength="n"
pour text, password, hidden
Liste de type de contenu (ex : text/css,image/*) accept="type-de-contenu1,type-de-contenu2"
pour <imput type="file">
Ordre de tabulation
tabindex="n"
n entier positif ; 0 pour exclure
Menu/Liste déroulante de sélection
<select name="nom_ controle"> </select>
nombre de ligne d'options visibles
size="n"
Choix multiple
multiple="multiple"
Regroupement d'options
<optgroup label="…"> </optgroup>
encadre plusieurs <option>
Option d'une liste
<option value="valeur_ controle">texte1</option>
dans <select>
Option sélectionnée par défaut
selected="selected"
Bouton à texte ou image
<button name="nom_ controle">balise de texte ou image</button>
Valeur et type de bouton
value="valeur_ controle" type="submit|reset"
Style du texte du bouton
style="style1;style2"
Boîte de texte (32700 caractères)
<textarea name="nom_ controle"> </textarea>
Taille de la boîte
rows="n" cols="n"
Retour à la ligne souhaitée
wrap="off|virtual|physical"
CADRES (division de fenêtre)
4
Document à cadres (jeu de cadre)
4
Hauteur des lignes
4
Largeur des colonnes
4
Bordures
P
Largeur de bordure
P
Couleur de bordure
4
Définition d'un cadre
4
Barre de défilement
4
Cadre non redimensionnable
4
4
Contenu sans cadre
4
Cadre flottant
4
Position du cadre flottant
4
Marge du cadre flottant
4
Bordures
4
Barre de défilement
4
Alignement
4
Cadre par défaut pour les liens
Informatique / web
<frameset> </frameset>
après </head>, mais avant <body>
rows="a,b,c "
taille fixe, en % ou relative (*, 3* pour hauteur restant)
cols= "a,b,c"
taille fixe, en % ou relative (*, 3* pour hauteur restant)
frameborder="yes|no|0|1"
pour FRAME ou FRAMESET
border="n"
bordercolor="couleur"
<frame src="url" name="nom" />
scrolling="yes|no|auto"
noresize="noresize"
marginwidth="n" marginheight="n"
<noframes> </noframes>
encadre la partie <body>
<iframe name="nom" id="nom" src="url"> </iframe>
NN6 IE3
width="n|n%" height="n|n%"
obligatoire sinon pb d'affichage dans IE4
marginwidth="n|n%" marginheight="n|n%" obligatoire sinon pb d'affichage dans IE4
frameborder="0|1"
scrolling="yes|no|auto"
align="left|right|top|middle|bottom"
<base target ="nom-cadre">
dans la section <head>
24 février 2006
4/4
INSERTION D'OBJET (SON, VIDEO…)
4
Objet inséré
4
Taille (object, applet, embed)
4
Type MIME (object, embed)
D Applet Java à charger et exécuter
D Nom du fichier
D Adresse du fichier
D Identificateur
D Espacement (applet, embed)
P
Objet inséré
D Texte alternatif à embed
P
Répétition
P
Affichage à l'écran
P
Déclenchement
P
Bouton
P
Son à l'affichage
<object data="url">texte</object>
devrait remplacer img, iframe, embed et applet
type= "video/quicktime"
<applet> </applet>
à remplacer par <object>
code="nom_fichier_applet"
codebase="url"
name="nom" id="nom"
hspace="n" vspace="n"
<embed src="url" />
NN IE
<noembed>texte</noembed>
loop="n|infinite|true|false"
NN IE
hidden="true|false"
NN IE
autostart= "true|false"
NN IE
controls="smallconsole|console|playbutton|pausebutton|stopbutton|volumelever"
NN IE
<bgsound src="url" loop="n|infinite" />
IE
SCRIPTS
4
Scripts
4
Emplacement d'un script externe
D Langage utilisé
4
Langage utilisé
4
Langage et version
4
Message alternatif au script
4
Langage de script par défaut
<script> <!-- … - - > </script>
src="url"
language="javascript|vbscript|jscript"
remplacé par type
type="text/javascript|vbscript|tcl"
type="text/javascript; version=1.2"
peu reconnu
<noscript> </noscript>
script désactivé ou non interprété
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.
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
4
p
p
Gestionnaire
Elément support
Description de l'événement
onclick
ondbclick
onkeydown
onkeypress
onkeyup
onmousedown
onmouseout
onmousemove
onmouseover
onmouseup
onfocus
onblur
onchange
onselect
onreset
onsubmit
onload
onunload
onabort
onerror
tout élément
tout élément
tout élément
tout élément
tout élément
tout élément
tout élément
tout élément
tout élément
tout élément
a, button, label, input, select, textarea
a, button, label, input, select, textarea
input, select, textarea
input, select, textarea
form
form
body, frameset
body, frameset
img
img
quand on clique sur l'élément (lien, image, bouton)
quand on double-clique sur l'élément (lien, image, bouton)
quand on enfonce une touche du clavier
quand on enfonce puis relache une touche du clavier
quand on relache la touche du clavier appuyée
quand le bouton de la souris est appuyé
quand le pointeur de souris quitte la zone de sélection (lien, image)
quand le pointeur de souris bouge
quand le pointeur de souris entre sur la zone de sélection (lien, image)
quand le bouton de la souris est relâché après avoir été appuyé
quand on sélectionne l'élément de formulaire
quand on quitte l'élément du formulaire (souris, tab)
quand on quitte un élément du formulaire (souris, tab) qui a été modifié
quand on sélectionne l'élément
quand on réinitialise un formulaire
quand on soumet un formulaire
quand le document est chargé
quand un document est déchargé (affichage d'un autre document)
quand on annule le chargement d'une image
NN IE
en cas de problème de chargement d'une image
NN IE
ATTRIBUTS GENERIQUES (utilisables avec tout élément)
4
4
4
4
4
4
Attribut
id
class
style
dir
lang
title
Exemple de valeurs
id="logoUMLV"
class="piedpage"
style="color:#000;align:left;"
dir= "rtl" dir= "ltr"
dir= "fr"
dir= "en"
title="Tapez votre nom"
Informatique / web
Commentaires
identifiant unique de l’élément
classe de l'élément, servant à lui appliquer un style
déclaration de style en-ligne (inline)
sens de lecture : rtl (right to left), ltr (left to right)
langue utilisée
titre souvent utilisé comme légende ou aide contextuelle (pop-up au survol)
24 février 2006
5/5

Petit guide du langage HTML 4 et XHTML 1

Transcription

Documents pareils

CV - Undergraphic, création de site Internet à Amboise (37)

Font Awesome - 31 place Web

Memento HTML

Webmaster/Intégrateur H/F

Son CV - David Marchesson

32 479 66 40 60 [email protected]

Latvia / Lettonie Riga 64,589 km² Latvian / Letton Andris Berzins

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

SCHWEIZERISCHER BEARDED - COLLIE

gabarits Web.indd