Faculté des Sciences -Rabat SMI 3
Département d’Informatique Technologies du Web
2020-21 Memento des balises
HTML
- Utiliser un éditeur de texte simple ; Notepad++ (gratuit à télécharger de [Link] bloc notes
de Windows, gedit ou Kwrite de Linux ou autres.
- Garder constamment les deux fenêtres sur l 'écran : fenêtre de l'éditeur de texte et fenêtre du navigateur. Après
sauvegarde dans l'éditeur actualiser la fenêtre du navigateur.
- Tester chacune des balises HTML ainsi que ses attributs.
- Ces balises HTML sont celles des versions 4 et antérieures. Dans la dernière version 5 de HTML certaines
balises vont disparaître et d'autre vont apparaître.
- Références importantes : [Link], [Link]
- La notation attribut= "X|Y|Z" veut dire que attribut peut prendre une et une seule des 3 valeurs X, Y , Z à la fois.
Document HTML (minimal) Balises de paragraphe
<html> <p> ... </p> : définit un paragraphe
<head> attribut et valeur Description
<title> Titre de la fenêtre </title>
Informations aux navigateurs et robots, auteur, align=’’left|center|right|justify’’ Alignement du texte
mots clé, scripts etc. dans un paragraphe
</head>
<body> <br> : Retour à la ligne
… contenu du document
</body> <center> ... </center> : centrer un contenu
</html>
<hr> : ligne horizontale
Syntaxe d'écriture de balises et attributs : attribut et valeur Description
<balise attribut1=’’ valeur1’’ …> align="left|center|right" Alignement de la ligne
… </balise> size="nbpixel" épaisseur de la ligne
ou pour d’autres balises width="nbpixel| n%" longueur de la ligne
<balise attribut1=’’ valeur1’’ …> noshade="noshade " ombre
Commentaire en HTML : <!-- … --> Balises de style
<!-- un commentaire n'est pas affiché par le navigateur.
Il peut être sur une ou plusieurs lignes. --> <b> ... </b> Texte en gras
<i> ... </i> Texte en italique
Casse : HTML est indépendant de la casse. En général
<u> ... </u> Texte souligné
on écrit en minuscule.
<strike> ... Texte barré
Couleurs en HTML : peuvent être déclarées : </strike>
- par nom de couleur en anglais : aqua, black, blue,
<sup> ... </sup> Exposant mathématique
fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow; orange etc . . . <sub> ... </sub> Indice mathématique
- #rrggbb, où rr, gg et bb sont des nombres
<tt> ... </tt> Police type machine à écrire
hexadécimaux de 00 à FF, indiquant la portion de
rouge, de vert et de bleu respectivement.
Exemple : color= "yellow" ou color= "#FF00FF" <pre> ... </pre> : texte préservé avec retour à la ligne,
espaces et police type machine à écrire.
Longueur en HTML : en pixel ou pourcentage. Par
Exemple : size= "75" ou width="50%" <font> ... </font>
Définition de la taille, le type et la couleur de police.
HTML accepte les images de types ,png, ,gif ou , jpg (jpeg). attribut et valeur Description
Balises de titres face="font1, choix de polices par ordre de préférence
<hn> et </hn> : Titre de section. n=1,2, …,6 font2, font3"
attribut et valeur Description
color="couleur" Couleur du texte
align=’’left|center|right|justify’’ Alignement du texte
size="taille" taille de la police de 1 à 7. Par défaut 3.
dans un titre
<div> ... </div> : utile avec CSS
1
<span> ... </span> : utile avec CSS
liens <a> et </a> Balises de tableau <table> ... </table>
Lien hypertexte attribut et valeur Description
href="url" lien vers l'adresse indiqué
border="nbpixel" épaisseur de la bordure
target="_self |_blank" _self (par défaut ) : fenêtre ou
width="nbpixel |n %" largeur du tableau
onglet du lien
_blank : nouvelle fenêtre ou onglet height="nbpixel | n %" longueur du tableau
name="nom" nom du lien (utile en JavaScript) cellspacing="nbpixel" espace entre les cellules
<body> ... </body> cellpadding="nbpixel" espace entre contenue de la
Contient le contenu à afficher cellule et son bord
attribut et valeur Description bgcolor="couleur" couleur de l'arrière plan
bgcolor="couleur" couleur de fond :BackGround background="[Link]" image de l'arrière plan
background="[Link]" Image de fond align="left|center|right " Alignement du tableau : gauche,
text = "couleur" Couleur du texte normal centre, droit
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="[Link]" SouRCe de l'image background="[Link]" 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,
" centre , bas
alt="descriptif" infobulle et texte avant chargement
align="left|center|right" Alignement horizontal du
border="nbpixel" bordure autour de l'image
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
2
attribut et valeur descriptif (utile pour les scripts)
<label> ... </label> donne un nom à un champ input de type
name="nom" nom du formulaire text, radio, checkbox ou textarea. Un clic sur le nom donne
action="url" mail ou adresse du script de le focus au champ
traitement attribut et valeur descriptif
method="get|post" façon dont les paramètres sont for="texte"
envoyés Exemple :
enctype="mime" type mime d’envoi des données au <label for="prenom">Entrez votre
serveur prénom</label>
<input id="prenom" type="text"
name="prenom">
<input type="type"> pour définir de nombreux éléments
de formulaire à inclure dans <form> et </form> <map> ... </map>
attributs valeur descriptif découpage d'une image en zones avec des liens
text champ de texte attributs descriptif
password champ de texte pour mot de passe usemap="texte" image à utiliser comme carte déjà déjà
insérée par <img src=".." name="texte" ..
checkbox case à cocher
radio bouton radio <area> ... </area>
hidden champ caché défini des zones dans <map> ... </map> avec les paramètres
type shape, coords, href, target, alt
button bouton
attributs descriptif
reset bouton effacer
shape surface = rect (rectangle), circle (cercle) ou
submit bouton soumettre ="surface" polygon (polygone)
file chargement de fichiers (pour scripts - (0,0) est le coin supérieur gauche de
php ...) 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
- rect : coordonnées (x,y) du coin supérieur
value texte valeur de l'élément (utile aux scripts) 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
son rayon
<texarea> ... </texarea> zone de texte multi-ligne à insérer circle="x_centre,y_centre,rayon"
dans <form> ... </form> - polygon : liste des sommets x,y du
paramètre descriptif 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
Voir la carte administrative du Maroc.
readonly ="readonly" pour éviter les modifications Établir un lien de la région 1 vers un fichier HTML décrivant
cette région. Faire de même pour la région 16.
<select> et </select> liste déroulante à insérer dans <form>
... </form> balises d'objet (son, vidéo...)
attribut descriptif <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
width largeur
<option> texte choix </option> liste des choix possibles
dans <select> height longueur
attribut descriptif alt alternatif
insertion de son
value="valeur" valeur du choix
<object data="[Link]" type="application/ogg"
selected choix préselectionné width="200" height="100">
="selected" </object>
3
subject sujet sujet traité dans la page
insertion de fichier html
<object data="[Link]" type="text/html" copyright informations sur le (les)
copyright
width="300" height="200"> copyright(s)
</object>
<meta http-equiv="nom" content="valeur">
Meta balises Balise équivalente à celles envoyées par le serveur
nom valeur descriptif
<meta name="nom" content="valeur">
refresh durée[;url=url] rafraîchi une page et
balises importantes pour le référencement de site
éventuellement renvoi
nom valeu descriptif vers une autre page
description description descriptif succinct du site content-type mime;jeu_carac type de document et jeu
mots_clés liste des mots clés relatifs au de caractères utilisé
keywords
site (impératif) pragma no-cache force le téléchargement
all | none accepte ou non les robots de la page
robots follow|nofollow suivie ou non des liens window- _top affichage dans une
index|noindex indexation ou non des pages target nouvelle fenêtre
nb_jour nombre de jours après lequel expires never | date date d'expiration (pas de
revisit-after
le robot doit revisiter la page disparition) de la page
author auteur auteur des pages