Faculté des Sciences -Rabat Technologies du Web
Département d’Informatique Memento des balises
HTML
Document HTML (minimal) <center> ... </center> : centrer un contenu
<html>
<head> <hr> : ligne horizontale
<title> Titre de la fenêtre </title> attribut et valeur Description
Informations aux navigateurs et robots, auteur,
mots clé, scripts etc. align="left|center|right" Alignement de la ligne
</head> size="nbpixel" épaisseur de la ligne
<body> width="nbpixel| n%" longueur de la ligne
… contenu du document noshade="noshade " ombre
</body>
</html> Balises de style
<b> ... </b> Texte en gras
Syntaxe d'écriture de balises et attributs :
<i> ... </i> Texte en italique
<balise attribut1=’’ valeur1’’ …>
… </balise> <u> ... </u> Texte souligné
ou pour d’autres balises <strike> ... Texte barré
<balise attribut1=’’ valeur1’’ …> </strike>
<sup> ... </sup> Exposant mathématique
Commentaire en HTML : <!-- … -->
<!-- un commentaire n'est pas affiché par le navigateur. <sub> ... </sub> Indice mathématique
Il peut être sur une ou plusieurs lignes. --> <tt> ... </tt> Police type machine à écrire
Casse : HTML est indépendant de la casse. En général
on écrit en minuscule. <pre> ... </pre> : texte préservé avec retour à la ligne,
espaces et police type machine à écrire.
Couleurs en HTML : peuvent être déclarées :
- par nom de couleur en anglais : aqua, black, blue, <font> ... </font>
fuchsia, gray, green, lime, maroon, navy, olive, purple, Définition de la taille, le type et la couleur de police.
red, silver, teal, white, yellow; orange etc . . . attribut et valeur Description
- #rrggbb, où rr, gg et bb sont des nombres face="font1, choix de polices par ordre de préférence
hexadécimaux de 00 à FF, indiquant la portion de font2, font3"
rouge, de vert et de bleu respectivement.
Exemple : color= "yellow" ou color= "#FF00FF" color="couleur" Couleur du texte
size="taille" taille de la police de 1 à 7. Par défaut 3.
Longueur en HTML : en pixel ou pourcentage. Par
Exemple : size= "75" ou width="50%"
<div> ... </div> : utile avec CSS
HTML accepte les images de types ,png, ,gif ou , jpg (jpeg). <span> ... </span> : utile avec CSS
Balises de titres liens <a> et </a>
<hn> et </hn> : Titre de section. n=1,2, …,6 Lien hypertexte
attribut et valeur Description href="url" lien vers l'adresse indiqué
align=’’left|center|right|justify’’ Alignement du texte target="_self |_blank" _self (par défaut ) : fenêtre ou
dans un titre onglet du lien
_blank : nouvelle fenêtre ou onglet
Balises de paragraphe name="nom" nom du lien (utile en JavaScript)
<p> ... </p> : définit un paragraphe <body> ... </body>
attribut et valeur Description Contient le contenu à afficher
align=’’left|center|right|justify’’ Alignement du texte attribut et valeur Description
dans un paragraphe bgcolor="couleur" couleur de fond :BackGround
background="image.ext" Image de fond
<br> : Retour à la ligne
text = "couleur" Couleur du texte normal
1
link="couleur" Couleur des liens hypertexte
<tr> … <tr> : définition de ligne de tableau
vlink="couleur" Couleur des liens visités
attributs des balises Description
alink="couleur" Couleur des liens actifs
bgcolor="couleur"
leftmargin="nbpixel" Marge de gauche
rightmargin="nbpixel" Marge de droite
topmargin="nbpixel" Marge du haut <th>…</th> : définition de cellule de la 1ère ligne de tableau
<td> … </td> : définition de cellule de tableau
Balises d'image <img> attributs des balises <th> Description
insertion d'une image de type .jpg ou jpeg. gif, .png et <td>
attribut et valeur Description bgcolor="couleur" couleur de l'arrière plan
scr="image.ext" SouRCe de l'image background="image.ext" image de l'arrière plan
name="nom" nom de l'image utile en JavaScript rowspan="nb_ligne" nombre le lignes fusionnées
height="nb_pixel" hauteur de l'image dans le navigateur colspan="nb_ligne" nombre le colonnes fusionnées
width="nb_pixel" largeur de l'image dans le navigateur valign="top|middle|bottom Alignement vertical : haut,
alt="descriptif" infobulle et texte avant chargement " centre , bas
border="nbpixel" bordure autour de l'image align="left|center|right" Alignement horizontal du
texte : gauche, centre, droit
hspace="nbpixel" espace libre à droite et à gauche de
l'image liste de définition <dl>…</dl>
vspace="nbpixel" espace libre en haut et en bas de l'image permet de créer un glossaire.
<dl> …</dl> : définit la liste
Liste numérotées <ol> ... </ol> <dt>…</dt> : contient le terme à définir
<dd> …</dd> : contient la définition du terme
attribut et valeur Description exemple :
type= "1|i|i|a|a" Type de numérotation (chiffre arabe, <dl>
romain, lettre …) <dt>c</dt>
<dd>langage de programmation … </dd>
start="entier" valeur de début de numérotation <dt>c++</dt>
<dd>langage de programmation … </dd>
<li> ... </li> : élément de liste </dl>
Exemple : <abbr>...</abbr> abréviation
<ol> attribut : title
<li> … </li> Exemple : Le <abbr title="World Wide Web Consortium
<li> … </li> "> W3C </abbr> développe les languages du Web.
</ol>
Liste à puce <ul> ... </ul> <address> … </address> information pour contact
attribut et valeur Description
Formulaire
type="disc|circle|square" Type de puce : disque, cercle <form> et </form> création de formulaire
carré ces attributs de <form> ... </form> sont utiles pour les
<li> ... </li> : élément de liste langages de scripts : PHP etc
attribut et valeur descriptif (utile pour les scripts)
Balises de tableau <table> ... </table>
attribut et valeur Description name="nom" nom du formulaire
border="nbpixel" épaisseur de la bordure action="url" mail ou adresse du script de
traitement
width="nbpixel |n %" largeur du tableau
method="get|post" façon dont les paramètres sont
height="nbpixel | n %" longueur du tableau envoyés
cellspacing="nbpixel" espace entre les cellules enctype="mime" type mime d’envoi des données au
cellpadding="nbpixel" espace entre contenue de la serveur
cellule et son bord
<input type="type"> pour définir de nombreux éléments
bgcolor="couleur" couleur de l'arrière plan
de formulaire à inclure dans <form> et </form>
background="image.ext" image de l'arrière plan attributs valeur descriptif
align="left|center|right " Alignement du tableau : gauche, text champ de texte
centre, droit type
password champ de texte pour mot de passe
2
checkbox case à cocher insérée par <img src=".." name="texte" ..
radio bouton radio
<area> ... </area>
hidden champ caché défini des zones dans <map> ... </map> avec les paramètres
button bouton shape, coords, href, target, alt
reset bouton effacer attributs descriptif
submit bouton soumettre shape surface = rect (rectangle), circle (cercle) ou
="surface" polygon (polygone)
file chargement de fichiers (pour scripts
php ...) - (0,0) est le coin supérieur gauche de
l'image. l'axe des x est vers la droite et l'axe
name texte nom de l'élément (utile aux scripts) des y vers le bas
value texte valeur de l'élément (utile aux scripts) - rect : coordonnées (x,y) du coin supérieur
gauche et du coin inférieur droit.
checked checked case à cocher ou bouton radio cochée coords rect=x_sup_gauche,y_sup_gauche,x_inf_dr
par défaut ="liste_coords" oit,y_inf_droit"
- circle : coordonnées du centre du cercle et
<texarea> ... </texarea> zone de texte multi-ligne à insérer son rayon
dans <form> ... </form> circle="x_centre,y_centre,rayon"
paramètre descriptif - polygon : liste des sommets x,y du
polygone. polygon="x1,y1,... ,xn,yn,x1,y1"
name="nom" nom de la zone
href="fichier" Lien cible de la zone
cols="nb_cols" nombre de colonnes de texte
target="_self|_b Fenêtre d'affichage de la cible
rows="nb_lignes" nombre de lignes de texte lank"
wrap="retour_ligne" type de retour à la ligne : off (par alt="texte" texte alternatif
défaut)| hard
readonly ="readonly" pour éviter les modifications Voir la carte administrative du Maroc.
Établir un lien de la région 1 vers un fichier HTML décrivant
<select> et </select> liste déroulante à insérer dans <form> cette région. Faire de même pour la région 16.
... </form>
attribut descriptif balises d'objet (son, vidéo...)
<object> ... </object> permet l’inclusion d'objets génériques.
name="nom" nom du champ attribut et valeurs descriptif
size="taille" nombre de ligne visible type type d'objet à insérer
multiple pour pouvoir faire des choix multiples data uri du source du document
<option> texte choix </option> liste des choix possibles width largeur
dans <select> height longueur
attribut descriptif alt alternatif
value="valeur" valeur du choix insertion de son
selected choix préselectionné <object data="freeswsong.ogg" type="application/ogg"
="selected" width="200" height="100">
</object>
<label> ... </label> donne un nom à un champ input de type insertion de fichier html
text, radio, checkbox ou textarea. Un clic sur le nom donne <object data="test.html" type="text/html"
le focus au champ width="300" height="200">
attribut et valeur descriptif </object>
for="texte"
Exemple :
Meta balises
<label for="prenom">Entrez votre
prénom</label> <meta name="nom" content="valeur">
<input id="prenom" type="text" balises importantes pour le référencement de site
name="prenom"> nom valeu descriptif
description description descriptif succinct du site
<map> ... </map>
découpage d'une image en zones avec des liens mots_clés liste des mots clés relatifs au
keywords
attributs descriptif site (impératif)
usemap="texte" image à utiliser comme carte déjà déjà robots all | none accepte ou non les robots
3
follow|nofollow suivie ou non des liens refresh durée[;url=url] rafraîchi une page et
index|noindex indexation ou non des pages éventuellement renvoi
vers une autre page
nb_jour nombre de jours après lequel
revisit-after
le robot doit revisiter la page content-type mime;jeu_carac type de document et jeu
de caractères utilisé
author auteur auteur des pages
pragma no-cache force le téléchargement
subject sujet sujet traité dans la page
de la page
copyright informations sur le (les)
copyright window- _top affichage dans une
copyright(s)
target nouvelle fenêtre
<meta http-equiv="nom" content="valeur"> expires never | date date d'expiration (pas de
Balise équivalente à celles envoyées par le serveur disparition) de la page
nom valeur descriptif
