Vous êtes sur la page 1sur 4

Université SAAD DAHLEB Module : Technologie Web

Faculté des sciences Année 2011/2012


1ère Année MI Section G

Résumé Cours Technologie Web Taille de [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone
caractère avec cette taille
Le document HTML minimum: Couleur de [Font color] <FONT COLOR="#$$$$$$"></FONT> Début et fin de zone
caractère en couleur
<HTML> Ceci est le début d'un document de type HTML. A la ligne [Line break] <BR> Aller à la ligne
</HTML> Ceci est la fin d'un document de type HTML. Commentaires [Comments] <!-- *** --> Ne pas afficher
<HEAD> Ceci est le début de la zone d'en-tête (prologue au document Paragraphe [Paragraph] <P> Début d'un nouveau
proprement dit contenant des informations destinées au browser). paragraphe
</HEAD> Ceci est la fin de la zone d'en-tête. Centrage [Center] <CENTER></CENTER> Centrer
<TITLE> Ceci est le début du Titre de la page.

</TITLE> Ceci est la fin du Titre de la page. Le codage des couleurs en HTML
<BODY> Ceci est le début du document proprement dit. Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8
</ BODY> Ceci est la fin du document proprement dit. bit en hexadécimal soit de 00 à FF (de 0 à 255)
Ainsi FF de rouge, FF de Vert et FF de Bleu, donne du Blanc Voici les codes
de quelques couleurs basiques :
Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>,
correspond (en toute logique) une balise de fin d'une action </...>.
Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc Bleu #0000FF Vert #00FF00
équivalent d'écrire <HTML>, <html>, <HTml>, etc. Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00


Les balises élémentaires :
Gris clair #C0C0C0 Noir #000000
Tout document HTML contiendra en majorité du texte. Voyons comment
l'agrémenter par quelques balises élémentaires. Les Titres :

Gras [Bold] <B>...</B> Début et fin de zone HTML a disposé dès son origine d'outils spécialement conçus à cet effet.
en gras
Pour ce faire, on utilise la balise <Hn>...</Hn> où n peut prendre une
Italique [Italic] <I>...</I> Début et fin de zone valeur entière comprise entre 1 et 6 (dans l'ordre décroissant de taille).
en italique

Chargée de TP : N.Lahiani
1
Université SAAD DAHLEB Module : Technologie Web
Faculté des sciences Année 2011/2012
1ère Année MI Section G

Exemple : Les listes à puces :

<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois Une liste non numérotée est définie de la même façon, sauf qu'elle est
d'automne</H3>septembre, octobre, novembre encadrée par les balises <UL> et </UL>.

Modifier la Police du Texte : Exemple :

Pour modifier la police du texte on utilise l'attribut face de la balise <font>


<UL>
<LI>élément 1,
<font face="verdana">Ce texte sera en verdana.</font>
<LI>élément 2,
<LI>élément 3.
Modifier la taille du texte
</UL>
<font size="5">Ce texte sera en taille 5.</font>Texte en verdana ou sans-
serif Notez qu'il est possible d'imbriquer des listes du même type ou de types
différents.
Le langage HTML permet de définir deux styles de listes : les listes
numérotées et les listes non numérotées. Exemple :

Les listes numérotées : <UL>


<LI>élément 1 :
Une liste numérotée est délimitée par les balises <OL> et </OL> entre <OL>
<LI>sous-élément A,
lesquelles chaque élément de la liste est précédé de la balise <LI>. <LI>sous-élément B.
</OL>
Exemple : <LI>élément 2,
<LI>élément 3.
</UL>
<OL>
<LI>élément 1,
<LI>élément 2, On obtient alors :
<LI>élément 3.
</OL>  élément 1,
1. sous-élément A,

Chargée de TP : N.Lahiani
2
Université SAAD DAHLEB Module : Technologie Web
Faculté des sciences Année 2011/2012
1ère Année MI Section G

2. sous-élément B.
 élément 2,
1. Liens internes
 <a href="#internes">Liens internes</a>
 élément 3.
 <a name="internes"></a>

2. Lien Externe:

Les attributs <a href="adresse/de/destination.html">Texte du lien</a>

Type="type" UL & (déprécié en faveur des css) : spécifie l'aspect des marqueurs
Les tableaux :
OL des éléments
<table border=2 cellspacing=3 cellpadding=2 width=70%>
Start="nombre" OL commence la numérotation à la valeur spécifiée. ....
</table>
Value="nombre" LI spécifie le nombre de l'élément.

Compact OL & rendu plus compact de la liste


UL

Le type des listes :

<UL type="disc "> Puces rondes pleine

<UL type="circle"> Puces rondes creuses

<UL type="square"> Puces carrées


<TR> :Le marqueur "tr" (table row en anglais) définit le début et la fin
<OL type=1> (1,2,3) d'une ligne du tableau. Une ligne est composée de cellules.
<OL type=a> (a,b,c) <TD> : Le marqueur "td" (table data en anglais) définit le début et la
<OL type=A> (A,B,C) fin d'une cellule.
<OL type=i> (i,ii,iii) <table border="1">
<OL type=I> (I,II,III) <tr>
<td>Cellule 1</td>
Les liens HyperTexte:

Chargée de TP : N.Lahiani
3
Université SAAD DAHLEB Module : Technologie Web
Faculté des sciences Année 2011/2012
1ère Année MI Section G

<td>Cellule 2</td> cette procédure dans tous les cas, car cela permet de commencer
</tr> à lire le texte avant que l'image soit chargée complètement. La
<tr> plupart des outils d'imagerie vous indiquent la taille d'une image.
<td>Cellule 3</td>  Le paramètre "border" permet de créer un cadre autour de
<td>Cellule 4</td> l'image. La largeur de la bordure est exprimée en pixels. Une
</tr> utilisation courante est de mettre BORDER=0 pour éviter qu'un
</table> cadre bleu soit dessiné autour d'une image qui serait la partie
active d'un lien.
Pour Ajouter un titre a un tableau on fait :

<caption align="bottom">Notes de la classe de 3èmeB</caption>

Insertion d'images Exemple :


Une déclaration minimale ressemblerait à ceci: <img src="cow.gif" align=top border=3 width=85
height=67 alt="a cow" >
<img src="cow.gif">

Paramètres :

 Le paramètre "src" doit contenir un URL ou un chemin relatif vers


un fichier de format gif ou jpg.
 Le paramètre "align" permet de spécifier l'alignement de l'image
par rapport au texte. Les valeurs possibles sont : top, bottom,
middle, right, left
 Le paramètre "alt" contient le commentaire que les personnes
utilisant un browser textuel (sans images) voient à la place de
l'image.
 Les paramètres "width" et "height" se réfèrent à la largeur et à la
hauteur de l'image (en pixels). Netscape crée un cadre vide de
cette taille avant de commencer à télécharger l'image. Utilisez

Chargée de TP : N.Lahiani
4

Vous aimerez peut-être aussi