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
![[Esr] Tp4 - HTML](https://imgv2-2-f.scribdassets.com/img/document/132104557/149x198/f342f9b174/1364145374?v=1)
