Sie sind auf Seite 1von 4

Universit SAAD DAHLEB Facult des sciences 1re Anne MI

Module : Technologie Web Anne 2011/2012 Section G


Taille de caractre Couleur de caractre A la ligne Commentaires Paragraphe Centrage [Font size] [Font color] [Line break] [Comments] [Paragraph] [Center] <FONT SIZE=?>...</FONT> <FONT COLOR="#$$$$$$"></FONT> <BR> <!-- *** --> <P> <CENTER></CENTER> Dbut et fin de zone avec cette taille Dbut et fin de zone en couleur Aller la ligne Ne pas afficher Dbut d'un nouveau paragraphe Centrer

Rsum Cours Technologie Web


Le document HTML minimum:
<HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </ BODY> Ceci est le dbut d'un document de type HTML. Ceci est la fin d'un document de type HTML. Ceci est le dbut de la zone d'en-tte (prologue au document proprement dit contenant des informations destines au browser). Ceci est la fin de la zone d'en-tte. Ceci est le dbut du Titre de la page. Ceci est la fin du Titre de la page. Ceci est le dbut du document proprement dit. Ceci est la fin du document proprement dit.

Le codage des couleurs en HTML


Chaque lment de couleur (Rouge, Vert ou Bleu) est cod en HTML sur 8 bit en hexadcimal 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 :
Bleu Blanc Rouge Gris clair #0000FF #FFFFFF #FF0000 #C0C0C0 Vert Violet Jaune Noir #00FF00 #8000FF #FFFF00 #000000

Vous aurez remarqu qu' chaque balise de dbut 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 quivalent d'crire <HTML>, <html>, <HTml>, etc.

Les balises lmentaires :


Tout document HTML contiendra en majorit du texte. Voyons comment l'agrmenter par quelques balises lmentaires.
Gras Italique [Bold] [Italic] <B>...</B> <I>...</I> Dbut et fin de zone en gras Dbut et fin de zone en italique

Les Titres :
HTML a dispos ds son origine d'outils spcialement conus cet effet. Pour ce faire, on utilise la balise <Hn>...</Hn> o n peut prendre une valeur entire comprise entre 1 et 6 (dans l'ordre dcroissant de taille).

Charge de TP : N.Lahiani
1

Universit SAAD DAHLEB Facult des sciences 1re Anne MI

Module : Technologie Web Anne 2011/2012 Section G

Exemple :
<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3>septembre, octobre, novembre

Les listes puces :


Une liste non numrote est dfinie de la mme faon, sauf qu'elle est encadre par les balises <UL> et </UL>. Exemple : <UL> <LI>lment 1, <LI>lment 2, <LI>lment 3. </UL> Notez qu'il est possible d'imbriquer des listes du mme type ou de types diffrents. Exemple :
<UL> <LI>lment 1 : <OL> <LI>sous-lment A, <LI>sous-lment B. </OL> <LI>lment 2, <LI>lment 3. </UL>

Modifier la Police du Texte :


Pour modifier la police du texte on utilise l'attribut face de la balise <font> <font face="verdana">Ce texte sera en verdana.</font>

Modifier la taille du texte


<font size="5">Ce texte sera en taille 5.</font>Texte en verdana ou sansserif Le langage HTML permet de dfinir deux styles de listes : les listes numrotes et les listes non numrotes.

Les listes numrotes :


Une liste numrote est dlimite par les balises <OL> et </OL> entre lesquelles chaque lment de la liste est prcd de la balise <LI>. Exemple :
<OL> <LI>lment 1, <LI>lment 2, <LI>lment 3. </OL>

On obtient alors :

lment 1, 1. sous-lment A,

Charge de TP : N.Lahiani
2

Universit SAAD DAHLEB Facult des sciences 1re Anne MI


Module : Technologie Web Anne 2011/2012 Section G

2. sous-lment B. lment 2, lment 3.

1. Liens internes

<a href="#internes">Liens internes</a> <a name="internes"></a>

2. Lien Externe:

Les attributs
Type="type" Start="nombre" Value="nombre" Compact UL & OL OL LI OL & UL (dprci en faveur des css) : spcifie l'aspect des marqueurs des lments commence la numrotation la valeur spcifie. spcifie le nombre de l'lment. rendu plus compact de la liste

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

Les tableaux :
<table border=2 cellspacing=3 cellpadding=2 width=70%> .... </table>

Le type des listes :


<UL type="disc "> <UL type="circle"> <UL type="square"> <OL type=1> <OL type=a> <OL type=A> <OL type=i> <OL type=I> Puces rondes pleine Puces rondes creuses Puces carres (1,2,3) (a,b,c) (A,B,C) (i,ii,iii) (I,II,III)

<TR> :Le marqueur "tr" (table row en anglais) dfinit le dbut et la fin d'une ligne du tableau. Une ligne est compose de cellules.

<TD> : Le marqueur "td" (table data en anglais) dfinit le dbut et la


fin d'une cellule.

Les liens HyperTexte: Charge de TP : N.Lahiani

<table border="1"> <tr> <td>Cellule 1</td>

Universit SAAD DAHLEB Facult des sciences 1re Anne MI

Module : Technologie Web Anne 2011/2012 Section G cette procdure dans tous les cas, car cela permet de commencer lire le texte avant que l'image soit charge compltement. La plupart des outils d'imagerie vous indiquent la taille d'une image. Le paramtre "border" permet de crer un cadre autour de l'image. La largeur de la bordure est exprime en pixels. Une utilisation courante est de mettre BORDER=0 pour viter qu'un cadre bleu soit dessin autour d'une image qui serait la partie active d'un lien.

<td>Cellule 2</td> </tr> <tr> <td>Cellule 3</td> <td>Cellule 4</td> </tr> </table>
Pour Ajouter un titre a un tableau on fait : <caption align="bottom">Notes de la classe de 3meB</caption>

Insertion d'images
Une dclaration minimale ressemblerait ceci:
<img src="cow.gif">

Exemple :
<img src="cow.gif" align=top border=3 width=85 height=67 alt="a cow" >

Paramtres :

Le paramtre "src" doit contenir un URL ou un chemin relatif vers un fichier de format gif ou jpg. Le paramtre "align" permet de spcifier l'alignement de l'image par rapport au texte. Les valeurs possibles sont : top, bottom, middle, right, left Le paramtre "alt" contient le commentaire que les personnes utilisant un browser textuel (sans images) voient la place de l'image. Les paramtres "width" et "height" se rfrent la largeur et la hauteur de l'image (en pixels). Netscape cre un cadre vide de cette taille avant de commencer tlcharger l'image. Utilisez

Charge de TP : N.Lahiani
4