Memento HTML

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 : 
 <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

Memento HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Memento HTML

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences -Rabat Technologies du Web

Département d’Informatique Memento des balises

Document HTML (minimal) <center> ... </center> : centrer un contenu

align=’’left|center|right|justify’’ Alignement du texte target="_self |_blank" _self (par défaut ) : fenêtre ou

border="nbpixel" bordure autour de l'image align="left|center|right" Alignement horizontal du

Exemple : <abbr>...</abbr> abréviation

border="nbpixel" épaisseur de la bordure action="url" mail ou adresse du script de

submit bouton soumettre shape surface = rect (rectangle), circle (cercle) ou

Vous aimerez peut-être aussi