Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université SAAD DAHLEB Module : Technologie Web Faculté des sciences Année 2011

Université SAAD DAHLEB Module : Technologie Web Faculté des sciences Année 2011/2012 1ère Année MI Section G Chargée de TP : N.Lahiani 1 Résumé Cours Technologie Web Le document HTML minimum: <HTML> Ceci est le début d'un document de type HTML. </HTML> Ceci est la fin d'un document de type HTML. <HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser). </HEAD> Ceci est la fin de la zone d'en-tête. <TITLE> Ceci est le début du Titre de la page. </TITLE> Ceci est la fin du Titre de la page. <BODY> Ceci est le début du document proprement dit. </ BODY> Ceci est la fin du document proprement dit. 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 équivalent d'écrire <HTML>, <html>, <HTml>, etc. Les balises élémentaires : Tout document HTML contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires. Gras [Bold] <B>...</B> Début et fin de zone en gras Italique [Italic] <I>...</I> Début et fin de zone en italique Taille de caractère [Font size] <FONT SIZE=?>...</FONT> Début et fin de zone avec cette taille Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"></FONT> Début et fin de zone en couleur A la ligne [Line break] <BR> Aller à la ligne Commentaires [Comments]  Ne pas afficher Paragraphe [Paragraph] <P> Début d'un nouveau paragraphe Centrage [Center] <CENTER></CENTER> Centrer Le codage des couleurs en HTML Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8 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 : Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 Gris clair #C0C0C0 Noir #000000 Les Titres : HTML a disposé dès son origine d'outils spécialement conçus à cet effet. Pour ce faire, on utilise la balise <Hn>...</Hn> où n peut prendre une valeur entière comprise entre 1 et 6 (dans l'ordre décroissant de taille). Université SAAD DAHLEB Module : Technologie Web Faculté des sciences Année 2011/2012 1ère Année MI Section G Chargée de TP : N.Lahiani 2 Exemple : <H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3>septembre, octobre, novembre 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 sans- serif Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non numérotées. Les listes numérotées : Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>. Exemple : <OL> <LI>élément 1, <LI>élément 2, <LI>élément 3. </OL> Les listes à puces : Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL> et </UL>. Exemple : <UL> <LI>élément 1, <LI>élément 2, <LI>élément 3. </UL> Notez qu'il est possible d'imbriquer des listes du même type ou de types différents. Exemple : <UL> <LI>élément 1 : <OL> <LI>sous-élément A, <LI>sous-élément B. </OL> <LI>élément 2, <LI>élément 3. </UL> On obtient alors :  élément 1, 1. sous-élément A, Université SAAD DAHLEB Module : Technologie Web Faculté des sciences Année 2011/2012 1ère Année MI Section G Chargée de TP : N.Lahiani 3 2. sous-élément B.  élément 2,  élément 3. Les attributs Type="type" UL & OL (déprécié en faveur des css) : spécifie l'aspect des marqueurs des éléments Start="nombre" OL commence la numérotation à la valeur spécifiée. Value="nombre" LI spécifie le nombre de l'élément. Compact OL & UL rendu plus compact de la liste Le type des listes : <UL type="disc "> Puces rondes pleine <UL type="circle"> Puces rondes creuses <UL type="square"> Puces carrées <OL type=1> (1,2,3) <OL type=a> (a,b,c) <OL type=A> (A,B,C) <OL type=i> (i,ii,iii) <OL type=I> (I,II,III) Les liens HyperTexte: 1. Liens internes  <a href="#internes">Liens internes</a>  <a name="internes"></a> 2. Lien Externe: <a href="adresse/de/destination.html">Texte du lien</a> Les tableaux : <table border=2 cellspacing=3 cellpadding=2 width=70%> .... </table> <TR> :Le marqueur "tr" (table row en anglais) définit le début et la fin d'une ligne du tableau. Une ligne est composée de cellules. <TD> : Le marqueur "td" (table data en anglais) définit le début et la fin d'une cellule. <table border="1"> <tr> <td>Cellule 1</td> Université SAAD DAHLEB Module : Technologie Web Faculté des sciences Année 2011/2012 1ère Année MI Section G Chargée de TP : N.Lahiani 4 <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 3èmeB</caption> Insertion d'images Une déclaration minimale ressemblerait à ceci: <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 cette procédure dans tous les cas, car cela permet de commencer à lire le texte avant que l'image soit chargée complètement. La plupart des outils d'imagerie vous indiquent la taille d'une image.  Le paramètre "border" permet de créer un cadre autour de l'image. La largeur de la bordure est exprimée 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. Exemple : <img src="cow.gif" align=top border=3 width=85 height=67 alt="a cow" > uploads/Science et Technologie/ resume-cours-technologie-web 1 .pdf