06/11/2008

Abderrazak MKADMI Institut supérieur de documentation Université de la Manouba amkadmi@gmail.com http://amkadmi.neuf.fr

Un document html "standard" doit impérativement commencer par <HTML> et finir par </HTML>. Les commandes HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives. Les commandes HTML utilisent les caractères < et > comme délimiteurs. Les commandes HTML peuvent être écrites en minuscules ou en majuscules. Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considéré comme du texte à afficher.
A. MKADMI, ISD, Université de la Manouba

2

<HTML> <HTML/> : Commandes de début et de fin de document <HEAD> </HEAD> : Informations non affichées concernant le document (Date et auteur par exemple) <TITLE> </TITLE> : Titre du document. Cette information apparaît dans la barre de titre du client WWW. <BODY> </BODY> : Corps du document. Toutes les informations affichées par le client WWW y sont contenues.
A. MKADMI, ISD, Université de la Manouba

<HTML> <HEAD> <TITLE>Exemple de structure de document HTML </TITLE> </HEAD> <BODY>
Les données propres au document HTML

</BODY> </HTML>

3

A. MKADMI, ISD, Université de la Manouba

4

1

06/11/2008

TITLE Ce texte apparaîtra dans la barre de titre du navigateur lorsqu'un utilisateur affichera votre page sur son écran. Exemple : pour cette page il s'agit du Guide HTML. <HEAD><TITLE>Guide HTML</TITLE></HEAD>

HTML autorise les auteurs à spécifier des métadonnées (des informations sur le document plutôt que sur le contenu du document) de diverses manières : auteur, description, mots clés <META NAME="Author" CONTENT="Abderrazak MKADMI"> <META NAME="owner" CONTENT=amkadmi@gmail.com"> <META NAME="Description" CONTENT="Guide du HTML"> <META NAME="identifier-url" CONTENT="http://amkadmi.neuf.fr/liens/CoursHTML.htm"> <META NAME="language" CONTENT="FR"> <META NAME="Keywords" CONTENT="HTML, Site Web, Langage du Web, ISD, Internet">

A. MKADMI, ISD, Université de la Manouba

5

<html><head><TITLE>GED</TITLE> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <META NAME="AUTHOR" CONTENT="Scanfile France"> <META NAME="OWNER" CONTENT="info@scanfile.fr"> <META NAME="SUBJECT" CONTENT="gestion electronique de documents"> <META NAME="DESCRIPTION" CONTENT="Scanfile propose des logiciels de gestion electronique de documents, de dematerialisation et de workflow et des scanners de production ged"> <META NAME="KEYWORDS" CONTENT="gestion électronique documents, logiciel ged, logiciel geide, logiciel ged scanfile, logiciel geide filedirector"> <META NAME="identifier-url" CONTENT="http://www.scanfile.fr"> <META NAME="REVISIT-AFTER" CONTENT="7 DAYS"> <META NAME="LANGUAGE" CONTENT="FR"> <META NAME="COPYRIGHT" CONTENT="Scanfile France"> <META NAME="ROBOTS" CONTENT="All"> </head>

BODY Tout ce qui est contenu entre <BODY> et </BODY> sera affiché à l'écran, c'est la partie intégrante de votre document, c'est là que vous saisirez votre texte, insérerez vos images et établirez vos liens.

2

00 de vert et 00 de bleu). RR la quantité de rouge contenue dans la couleur. LINK : Permet de changer la couleur des liens. A. par défaut cette couleur est en principe le noir. Université de la Manouba 12 3 . VV la quantité de vert contenu dans la couleur. le fond de page est en blanc. <BODY BACKGROUND="nom_de_fichier. ALINK : Permet de changer la couleur des liens sélectionnés. MKADMI. Exemple: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF"> Le fond sera noir. ISD. A. Tout d'abord le format de la commande de couleur est: "#RRVVBB" # est le symbole qui permet de différencier une valeur d'un nom de couleur. ISD.La séquence de numérotation hexadécimale est (de min. Par défaut.gif"> BGCOLOR Permet de changer la couleur de l'arrière plan sans avoir à charger une image. mais elle peut-être changée dans les préférences du browser.06/11/2008 BACKGROUND Permet de mettre une image dans le fond de la page. LOOP=" " permet de déterminer le nombre de fois où le son va être joué.La couleur: #000000 correspond au noir (00 de rouge. Attention à la couleur d'écriture et celle des liens. . en fonction de la couleur du fond. Université de la Manouba 10 L’élément BODY : les couleurs SON Insérer un son en fond de page <EMBED SRC="son. ou beaucoup plus précisément au moyen d'un symbole # et de 6 chiffres (en hexadécimal . ISD. TEXT : Permet de changer la couleur du texte.La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible) . <BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur" ALINK="couleur"> VLINK="couleur"> COULEUR La couleur que vous voulez obtenir peut être décrite de deux façons: avec le nom anglais de la couleur. le texte en noir. les liens activés en rouge et les liens visités en violet. il faudra veiller à ce que le texte et les liens soient visibles dans tous les cas. La valeur -1 signifie que le son sera répété à l'infini. On peut également choisir une couleur de fond proche de celle de l'image. MKADMI. les liens en bleu souligné. BB la quantité de bleu contenu dans la couleur. MKADMI.wav" AUTOSTART="true" LOOP="-1"> AUTOSTART="True or False" : permet de déclarer le lancement du son à l'ouverture de la page. . VLINK : Permet de changer la couleur des liens déjà visités.base16). Université de la Manouba 9 A. à max.ext"> Exemple : <BODY BACKGROUND="cahier. le texte blanc et les liens en rose. là aussi.): 0 1 2 3 4 5 6 7 8 9 A B C D E F.

ISD. +3. ISD. -2. <FONT> Ce marqueur permet de changer la fonte. 4. I (italique). et aussi d'autres paramètres. etc. MKADMI. Aucune police n'est spécifiée ce qui signifie que c'est la police choisie par défaut dans le menu Préférences qui sera affichée. Mise en forme de caractères Option Style B (gras). Exemple : <FONT FACE="arial" SIZE="3"> : type et taille de police <FONT COLOR="YELLOW">ou COLOR="#RRVVBB" </FONT> : couleur de police <FONT SIZE="-1">Ou +2. ISD. -3. U (souligné). CENTER (centre) et LEFT (gauche). images. On peut modifier la taille initiale d'une image : HEIGHT ="valeur" pour modifier la hauteur WIDTH="valeur" pour modifier la largeur ALT = texte alternatif TITLE : titre de l’image Le texte est aligné à droite avec une police d'1 taille supérieure et en gras.gif"></CENTER> Marqueur CENTER .</FONT></B></CENTER></ALIGN> <IMG SRC ="">: insertion d'image en donnant le nom et le chemin de l’image par l’attribut SRC <CENTER><IMG SRC="abeille. ou à droite de l'écran. Université de la Manouba 15 A. Bienvenue sur ma Page. au centre.</FONT></B> Le texte est centré. MKADMI. 5</FONT> : La taille des caractères en pixels <FONT SIZE="x">) : taille de police Caractères.06/11/2008 Le texte peut avoir plusieurs polices et attributs. MKADMI. A. <ALIGN=right><B><FONT SIZE=+1>Bienvenue…. paragraphes. ou encore 3.. S (barré). A. Université de la Manouba 16 4 . RIGHT ou LEFT pour positionner l'image horizontalement. Option FONT SIZE pour gérer la taille de la police Exemple : Bienvenue sur ma page <B><FONT SIZE=+1>Bienvenue…. Université de la Manouba 14 Insérer une image Mise en forme de paragraphes Le texte peut être positionné à gauche. en gras avec une police d'une taille supérieure à la taille standard.. Option ALIGN avec RIGHT (droit). comme la taille et la couleur.

&#182. &para. <DIV ALIGN=""> et </DIV> : Positionnement horizontal.06/11/2008 Le texte se saisit comme sur un traitement de texte le passage à la ligne est automatique. ISD. &#188. &#189. Université de la Manouba HTML utilise le jeu de caractères ISO Latin-1 codés sur 8 bits et les caractères ASCII codés sur 7 bits. &#187. ISD. &#181. &frac34. &quot. Avec cette dernière codification les caractères accentués sont représentés par les séquences suivantes : &eacute. &micro. &ccedil. &frac14. &raquo. &agrave. &#190. MKADMI. & et " étant interprétés par HTML. les séquences suivantes permettent leur affichage. <SUB> et </SUB> : indice. <BLINK> et </BLINK> Clignotant 17 Les espaces n'étant pas significatifs. &#176. &egrave. permet de forcer un "blanc" autant que souhaité A. &ntilde. &iuml. <CENTER> et </CENTER> : Centrage horizontal (texte et images). Marqueur <BR> : Pour créer un nouveau paragraphe Marqueur <P> : Changer l'alignement du paragraphe avec les options d'alignement: <P ALIGN="RIGHT"> (ou LEFT CENTER JUSTIFY) gauche/centre/aligné. Université de la Manouba A. <U> et </U> : Souligné <S> et </S> : Barré (ne fonctionne pas avec tous browsers). &laquo. <I> et </I> : Italiques (<EM> </EM> aussi). &AElig. &amp. &#169. &frac12. é É è ê à ï ç ñ Æ HTML &copy. ISD. &Eacute. Université de la Manouba HTML © ® ° « » µ ¶ ¼ ½ ¾ 20 A. MKADMI. ISD. &lt. &ecirc. < > & " MARQUEURS DIVERS <B> et </B> : Caractères gras (<STRONG> </STRONG> aussi). &deg. MKADMI. Université de la Manouba 19 5 . le caractère &nbsp. MKADMI. &reg. &#174. > . A. <SUP> et </SUP> : exposant. &gt. Les caractères < . &#171.

ISD. Université de la Manouba 23 A. Université de la Manouba 24 6 . XBM Il est même possible de cumuler un hyperlien et une image incrustée afin de pouvoir suivre le lien en cliquant sur l'image. Lien dans la même page Il faut utiliser les cibles ou ancrages. Identifier la cible avec <A NAME="titre">Texte ou image</A> et utiliser le marqueur: <A HREF="#Titre">pour y aller</A> Pour sauter dans une section particulière d'une autre page Web. du texte. MKADMI.06/11/2008 Un lien vers une autre partie du document ou vers un autre document peut être de plusieurs nature. WIDTH=n: Ces deux options permettent de spécifier la taille de l’image.. et un click sur les objets situé entre ces deux bornes provoquera l'action contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page) Liens internes.html">Allez voir ce site</A> A. plus rarement. ISD. il suffit tout simplement de rajouter le nom de la section après le nom de la page dans le lien. mettez l'option border du marqueur image à zéro.html#sectionX"> Texte</A> A..com">‫ة‬crivez-moi</A> Pour faire un lien à partir d'une image remplacez le texte par le marqueur IMG SRC="image.gif". Liens et insertion d’images Un hyperlien très spécial est l'insertion d'une image dans le texte <IMG SRC="url-de-l'image"> Cette image doit être au format GIF. MKADMI. externes. si vous ne voulez pas qu'un lien image ait une bande de couleur autour de lui.com/index.gif"></A> L'alternative ALT permet d'afficher un texte si le lecteur de Web ne sait pas lire les images. MKADMI. ISD. de l'image. <A HREF="mailto:showtime@ifrance. exemple: <A HREF="page2.html"><IMG SRC="/data/man.html">Sommaire</A> Lien vers un site extérieur Exemple : Pour aller sur le site Netscape <A HREF="http://www. Positionnez vous à l'endroit que vous souhaitez atteindre.gif" ALIGN=LEFT>. une partie d'une image voire même le document tout entier. La syntaxe est : <A HREF="utilisateurs.} : Cette option permet de définir l'alignement du texte autour de l'image. ex: <IMG SRC="image. HEIGHT=n.. JPEGou.com"><IMG SRC="mail. dans cet exemple le haut de cette page. <A HREF="xxx"> Début de lien qui finit par </A> Tout ce qui se trouve entre les deux est considéré comme zone sensible. de messageries … Lien vers une page en local Exemples : Pour retourner au sommaire de ce site <A HREF="index. Université de la Manouba 22 Lien vers un e-mail Exemple : Pour m'envoyer un courrier électronique <A HREF="mailto:showtime@ifrance..netscape.gif" BORDER="0"></A> Petite astuce. Par exemple : <IMG SRC="nom du fichier" ALT="texte"> ALIGN={BOTTOM | TOP| RIGHT | LEFT .

deux attributs sont possibles : 1. MKADMI. text-decoration: none } A:HOVER { color: #ffffff. la déclaration « start=3 » signifie « C ». Les valeurs possibles sont : <OL TYPE="a"> : liste alphabétique minuscule <OL TYPE="A"> : liste alphabétique majuscule <OL TYPE="1"> : liste numérique en chiffres arabes <OL TYPE="I"> : liste numérique en chiffres romains 2. au survol ils se transforment en blanc et ils restent en noir après avoir été visités. Le numéro initial par défaut est "1". etc. ISD.TYPE : indication de style de numérotation : cet attribut fixe le style de numérotation des items de liste ordonnée. ISD. Université de la Manouba 27 7 . Vous devez incorporer les lignes de commande suivante dans la partie <HEAD> de votre page : <STYLE> A:LINK { color: #000000. Université de la Manouba 25 Il est possible de créer des listes d'objets numérotées ou non avec quelques marqueurs. text-decoration: none } </STYLE> Dans cet exemple les liens apparaissent en noir non souligné.START : Cet attribut spécifie le numéro initial du premier item dans une liste ordonnée. Liste non numérotée : <UL> <LH>Entête en option</LH> <LI>Point numéro1 <LI>Point numéro2 <LI>Point numéro3 <LI>Point numéro4 </UL> OPTIONS <ul type="circle"> ◦ <ul type="disc"> ● <ul type="square"> ▪ <OL> <LH>Entête en option</LH> <LI>texte <LI>texte </OL> A l’intérieur de la balise ouvrante <OL>. Listes simples Listes numérotées Listes de définition A. text-decoration: none } A:VISITED { color: #000000. A. la déclaration « start=3 » signifie « iii ». Quand l'item de liste a un style de lettres latines en majuscule (A). MKADMI.06/11/2008 Modifier l'apparence des liens Il est possible de modifier l'apparence des liens de façon à ne pas les faire apparaître en bleu souligné et modifier la couleur au survol. Quand l'item a un style de chiffres romains en minuscules.

MKADMI. Université de la Manouba 32 8 .06/11/2008 Liste de définition Terme 1 à définir Définition du terme 1 Terme 2 à définir Définition du terme 2 suite du terme 2 <DL> <DT> Terme 1 à définir <DD> Définition du terme 1 <DT> Terme 2 à définir <DD> Définition du terme 2 <DD> suite du terme 2 </DL> l'imbrication de listes est bien sûr possible Syntaxe. Insérer un tableau <TABLE> et </TABLE> : pour définir un tableau <TR> et </TR> : pour définir une rangée <TH> et </TH> : pour les cellules de haut de colonne (facultatif) <TD> et </TD> : pour une cellule Exemples : <TABLE WIDTH=50%> <TR><TD><IMGSRC="tv. mise en forme… A.CENTER.gif" HEIGHT=39 WIDTH=50></CENTER> <TD><CENTER>Bienvenue</CENTER></TD></TR> </TABLE> A. permettant un contrôle amélioré de la position des objets. Université de la Manouba 29 Syntaxe : <TABLE> : Indique le début du tableau (finissant par </TABLE>) Option : <TABLE BORDER> pour indiquer que le tableau aura une bordure <TR> : indique une nouvelle ligne (Table Row) <TH> : indique une nouvelle colonne de titre (Table Header). <TABLE BORDER COLS=2 WIDTH="100%" > <TR></TD><CENTER><IMG SRC="tv. options COLSPAN=n -> Permet de mettre une colonne identique sur n colonnes ROWSPAN=n -> Permet de mettre une ligne identique sur n lignes <TD> : Indique une nouvelle colonne (Table Data) Option : ALIGN={RIGHT. Ces tables peuvent avoir un fond et des bords visibles ou non. ISD. Université de la Manouba 31 A. ISD. Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes.gif"></TD><TD>Bienvenue</TD></TR> </TABLE></CENTER> Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première cellule l'image et dans la seconde le texte. ISD. images. Structure. couleurs). MKADMI. MKADMI.LEFT} -> Alignement du contenu C'est la seule façon de gérer convenablement la présentation. le tout étant centré.

. comme mettre plusieurs lignes de texte (avec <BR>. modifier les couleurs et les épaisseurs de bordure.33. ISD. Université de la Manouba 33 <table border=« 2 »> <tr><th rowspan=2>SERVICE<th colspan=2>Identification <tr><th>NOM<th>TEL <tr><th rowspan=3>DIM<td>Burgun Anita<td>86703 <tr><td>Pouliquen Bruno<td>86161 <tr><td>Delamarre Denis<td>86162 <tr><th rowspan=2>MEDIATHEQUE<td>Canal Sabine<td>99.69. celle du fond de la cellule.90 <tr><td>Le Beux Pierre<td>99. etc.33.06/11/2008 Mise en forme d'un tableau A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible.</TD> <TD WIDTH="50%" ALIGN="left" BACKGROUND="fonkraft. Vert(GG) et Bleu(BB). A.. Université de la Manouba 35 9 . changer la couleur des caractères. A. MKADMI. MKADMI.</TD> </TR> </TABLE> <table bgcolor="#008080"> : mettre un fond de couleur <table width="50%"> : Occupation en % de la page <table border="1"> Taille des bords (0=pas de bords) border color="#FF0000" couleur des bordures cellpadding="2" Définit l'espace entre l'objet et le contour d'une cellule cellspacing="3" Définit l'épaisseur du trait entre les cellules Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""). ISD.90 </table> Résultat <CAPTION ALIGN="" > </CAPTION> ALIGN= ALIGN=TOP (par défaut) la légende du tableau est en haut ALIGN=BOTTOM la légende du tableau est en bas BGCOLOR= BGCOLOR="#RRGGBB" Définit la couleur de fond de la cellule. de mettre des liens. ou les deux. GG et BB sont les valeurs hexadécimales du Rouge(RR). RR. <P> ou autre). des images.jpg">&nbsp. <TABLE BORDER="2" CELLPADING="2" CELLSPACING="3" WIDTH="50%" BORDERCOLOR="#000080"> <TR> <TD WIDTH="50%" ALIGN="left" BGCOLOR="#008080" BORDERCOLOR="#FF0000">&nbsp.69.

tn La largeur du tableau est 75%.isd. Les titres enseignant.rnu. La marge intérieure des cellules est de 6 et l’espacement entre les cellules est 6 Les formulaires Formulaires et interactivité récupérer des données à partir d'une page HTML dans une boite e-mail (questionnaires. Site de M. Structure. systèmes de recherche documentaires. Balises… Deux objectifs collecter des informations sur les utilisateurs transmettre des données à traiter sur le serveur A. Public et Objectifs représentent une liste de définition ISD renvoie à l’adresse URL : http://www. Le tableau est de largeur 75%. la taille est de "84" de largeur et de "81" d’hauteur. Mkadmi est un lien hypertexte qui renvoie à l’adresse http://amkadmi.neuf.fr. moteurs de recherche. ISD. Université de la Manouba 40 10 .…).…) entrer en communication avec un système ou une base de données sur le serveur (bases de données. MKADMI. Pour la photo.06/11/2008 E-mail est un lien de messagerie. payement électronique.

ISD. Zone texte 1 <INPUT TYPE="text" NAME="nom" SIZE="n"> Nom de famille : <input type="text" size="20" name="NFAMILLE"> <P>Nom de famille : <input type="text" size="80" name="NFAMILLE"> <FORM ACTION=" mailto:amkadmi@gmail. MKADMI.com" METHOD="POST" ENCTYPE="text/plain"> A. la valeur POST est la seule valeur possible. ISD. ISD. Université de la Manouba 44 11 . ENCTYPE : définit le format de codage des données si le protocole du serveur n'a pas imposé le sien (text/plain dans le cas des formulaires classiques). Dans le cas de la réception dans une boite de courrier électronique. Université de la Manouba 42 Zone texte 2 <TEXTAREA NAME="nom" ROWS= "i" COLS= "j" ></TEXTAREA> Liste déroulante <SELECT NAME="nom"> <OPTION>élément1 <OPTION>élément n </SELECT> Adresse : <textarea name="Adresse" rows="3" cols="30"> </textarea> <b>Pays</b> : <SELECT NAME="pays"> <OPTION>France <OPTION> Suisse <OPTION>Italie </SELECT> A. Université de la Manouba 41 A. MKADMI. MKADMI.06/11/2008 <form>Formulaire</form> 3 attributs : ACTION : type d'action à déclencher (adresse é-mail par exemple dans laquelle on reçoit les données du formulaire) METHOD : définit la méthode de transfert des données (2 valeurs : GET et POST). Université de la Manouba 43 A. ISD. MKADMI.

06/11/2008 <INPUT TYPE="radio" NAME="nom" VALUE="valeur"> Sexe : masculin <INPUT TYPE="radio" NAME="sexe" VALUE="masculin"> féminin <INPUT TYPE="radio" NAME="sexe" VALUE="feminin"> Boutons (submit & reset) <INPUT TYPE="submit" VALUE="valeur"> <INPUT TYPE="reset" VALUE="valeur"> Cases à cocher (choix multiple) <INPUT TYPE="checkbox" NAME="nom" VALUE="valeur"> Favoris : cinéma<INPUT TYPE="checkbox" NAME="favoris" VALUE="cinema"> musique<INPUT TYPE=" checkbox " NAME="favoris" VALUE="musique"> voyage<INPUT TYPE=" checkbox " NAME="favoris" VALUE="voyage"> <INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset" VALUE="Annuler"> A. MKADMI. MKADMI. MKADMI. MKADMI. Université de la Manouba 46 A. Université de la Manouba 48 12 . Université de la Manouba 47 A. Université de la Manouba 45 A. ISD. ISD. ISD. ISD.

Université de la Manouba 51 A.. MKADMI.*"></FRAMESET> A.60%.. Université de la Manouba 52 13 . Université de la Manouba 50 <FRAMESET…></FRAMESET> <Frameset> remplace la balise < Body> <FRAMESET ROWS=“. ISD. MKADMI.. MKADMI.10%"></FRAMESET> <FRAMESET COLS="10%.”></FRAMESET> définir des fenêtres horizontales <FRAMESET COLS=“. ISD..*.06/11/2008 Les FRAMES Frames = cadres = fenêtres C’est la division de votre écran en plusieurs zones pouvant être chacune une source d ’information. ISD.70%"> FRAMEBORDER="0" <FRAME name="" src=""> <FRAMESET COLS="30%. Quoi de plus simple que les frames? Mais aussi quoi de plus délicat et dangereux (risque de plantage) que les frames? Les Cadres Introduit en 1996 par Netscape présenter d’une manière simple des données complexes et reliées en elles A.70%"> <FRAME name="" src=""> <FRAME name="" src=""> </FRAMESET> </FRAMESET> > <FRAMESET ROWS="10%.”></FRAMESET> définir des fenêtres verticales <FRAMESET ROWS="30%.

06/11/2008 Déclaration des frames Les navigateurs ne supportant pas les Frames balise : <NOFRAMES></NOFRAMES> à ajouter avant le marqueur </FRAMESET> <NOFRAMES> <BODY> Votre navigateur ne supporte pas les Frames </BODY> </NOFRAMES> </FRAMESET> </HTML> Pour l ’instant nos frames sont vides.htm"> <FRAMESET COLS="30%.htm" target="C">Mon CV</a> <li><a href="presentation.jpg" height="300" width="320"> <img src="isd1.html"> </FRAMESET> </FRAMESET> frameset. A.html accueil.html <HTML><BODY> <h1>Menu principal</h1> <hr> <ul><li><a href="accueil. <FRAME MARGINWIDTH=n> : détermine la marge entre le bord du frame et le contenu <FRAME MARGINHEIGHT=n> : détermine l’espace entre les marges sup et inf du frame et celles des documents.html menu. Université de la Manouba 55 14 .html <FRAMESET ROWS="30%. on doit les paramétrer et leur donner à manger <FRAME NAME=“nom”> : nom de la case <FRAME SCROLLING=“yes/no”> : présence ou pas de barre de défilement <FRAME SRC=“source”> : nom et/ou adresse du fichier source à afficher.80%"> <FRAME NAME="A" SRC="entete. <FRAME NORESIZE> : par défaut un frame est redimensionnable.html A.htm"> <FRAME NAME="C« SRC="accueil. ISD.html <HTML><BODY> <H1>C</H1> </BODY></HTML> <HTML><BODY> <HTML><BODY> <H4>A</H4> <H1>B</H1> <img src= "logisd. Université de la Manouba 54 Déclaration des frames entete. ISD.htm"> </FRAMESET> </FRAMESET> <FRAMESET ROWS="20%.htm" target="C">Qui suis je ?</a> </ul> </BODY></HTML> <HTML><BODY> <img src="isd.html menu.70%"> <FRAME NAME="B" SRC=" menu. MKADMI.gif" height="100" width="120" align="right"> </table> </BODY></HTML> entete.70%"> <FRAME NAME="A" SRC="entete.70%"> <FRAME NAME="B" SRC="menu. Université de la Manouba 53 A.html"> <FRAMESET COLS="30%.html" target="C">Accueil</A> <li><a href="cv.jpg" height="300" width="320"> </BODY></HTML> accueil. ISD. MKADMI.html"> <FRAME NAME="C" SRC="accueil. MKADMI. avec cette balise on fige le frame.jpg"> </BODY></HTML> </BODY></HTML> <HTML><BODY> <table width="100%"><tr><td> <H2><font color="blue">Institut Supérieur de documentation</font></H2> <td><img src= "logisd.

html” TARGET=“nom_frame_cible”>lien</A> Supposons qu ’à partir d ’une ancre dans la fenêtre B on veut établir un lien pour afficher le contenu du fichier A dans la fenêtre C Fonctionnement des frames Paramètres de l’attribut TARGET _self : le document est à afficher dans le même frame. MKADMI. Syntaxe: <A HREF=“nom. Université de la Manouba 58 CSS A. _blank : force le navigateur à ouvrir une nouvelle fenêtre plein écran qui n’a pas de nom .html <HTML><BODY> <H1><A HREF="A. _parent : affiche la cible dans le document parent du document actuel. ISD. MKADMI. B.06/11/2008 Fonctionnement des frames Établir des liens dans le fichier source pour afficher la cible dans l’une des fenêtres. MKADMI.html" TARGET="C">B</H1> </A> </BODY></HTML> A. ISD. ISD. _top : efface les frames présents et affiche la cible en plein écran. Université de la Manouba 59 15 . Université de la Manouba 57 A.

On donne la valeur de l'attribut par la syntaxe suivante "nom de l'attribut:valeur de l'attribut". elle précise la balise à laquelle le style va s'appliquer. c’est dans la partie entête du document HTML qu’on ajoute cette ligne <LINK href="fichier. A.css" type=text/css rel=stylesheet> A. propriété de style: valeur } L'un des objectifs majeurs de CSS est de proposer une stylisation indépendante de la structure du document. et de réduire la complexité de l'architecture d'un document.. permettant d'améliorer l'accessibilité. Les attributs sont enfermés entre deux accolades ou 2 guillemets (précédés de Style=) selon les cas. Cette séparation fournit un certain nombre de bénéfices. Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis. font-weight:bold. La syntaxe d'un style est toujours la même. MKADMI. Université de la Manouba 62 Séparation du contenu et de la mise en forme. CSS est une norme du W3C BODY { color : blue. et c'est le World Wide Web Consortium (W3C) qui en a la direction.font-size:large. HTML. contrôle de la distance entre les lignes. Réduire le temps de chargement des pages. } H2 { color:#ff1111. } H1 { color:red. contrôle des marges et des indentations et ainsi augmenter la créativité des écrivains du Web. ISD. MKADMI. Modifier l'aspect d'une page ou d'un site sans en modifier le contenu.background-color:yellow. ne décrit que l'architecture interne. Palier certaines insuffisances du langage Html (contrôle des polices.06/11/2008 Le langage informatique CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML. tandis que CSS décrit tous les aspects de la présentation. et les différents attributs du style. de changer plus facilement de structure et de présentation. text-transform:captalize } Cohésion de la présentation tout au long du site. Université de la Manouba 63 16 . et chacun des attributs est séparé par un point virgule. text-transform:capitalize. balise { propriété de style: valeur. Pour faire le lien entre un fichier html et une feuille de style. ISD. par exemple.

surligné. barré ou through || blink ] decoration: none } clignotant baseline | sub | spécifie super | top | textl'alignement top | middle | EM {vertical-align: vertical du texte sub} bottom | textpar rapport au bottom | reste du texte <pourcentage> permet de forcer les caractères en majuscule (uppercase) ou en capitalize | H2 { text-transform: uppercase | minuscule uppercase } (lowercase).gif). façon l'écran repeat background-repeat: horizontale repeat-y. helvetica.0.gif).jpg) défaut : 0%. d'écran fixed.4em} EM { letter-spacing: 0.06/11/2008 Nom Description Définition Exemple Remarque font-family nom et famille de la police [[<nom> | <famille>]. sansSi un nom serif } comprend des espaces il doit être coté. gill. } BLOCKQUOTE {font-size: larger } EM { font-size:150%} EM { font-size:1. italique et oblique style petites polices ou normal normal | italic | oblique défaut : normal font font-variant normal | small-caps défaut : normal défaut : normal Souvent des noms logiques remplacent les nombres donnés ici Permet de regrouper les différentes propriétés de polices en une ligne [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> P { font: 12pt/14pt sansserif } P { font: 80% sans-serif } P { font: x-large/110% défaut : dépend "new century schoolbook". H2.gif)} défaut : none word-spacing backgroundrepeat backgroundattachment BODY { repeat-x permet façon de répéter repeat | repeat-x | background-image: de répéter de l'image du fond de repeat-y | nourl(ungi. H3{fontstyle: italic } H3 {font-variant: small-caps } font-size < xx-small | xsmall | small | medium | large | x-large | xxTaille de la police large> | < larger | smaller> |<taille> | <pourcentage%> P { font-size: 12pt.} spécifie la position [<pourcentage> | de l'image de fond <longueur>]{1.1em } défaut : normal défaut : normal text-decoration vertical-align backgroundposition background permet de regrouper les différentes propriétés de fond d'écran en une P { background: url(hess.com/banner.2} | par rapport au coin [top | center | supérieur gauche bottom] || [left | de la fenêtre center | right] <background-color> || <backgroundimage> || <backgroundrepeat> || <backgroundBODY { background: url(http://www.0)} EM { color: #f00 } H1 { background-color: #F00 } font-weight Epaisseur de la police normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 EM {fontweight:bolder } color backgroundcolor couleur d'un texte couleur du fond d'écran <couleur> <color> | transparent défaut : black défaut : transparent background-image image du fond d'écran <url> | none BODY { backgroundimage: url(ungi.5em} défaut : medium font-style style normal. serif } P { font: normal smallcaps 120%/120% fantasy } P { color: red } EM{color:rgb(255. de la serif } configuration du P { font: bold italic large navigateur Palatino. sans-serif BODY {font-family: est la famille.ungi . lowercase | none capitalize force en majuscule le défaut : none défaut : baseline défaut : none 17 . } défaut : repeat BODY { background: permet de red spécifier si l'image url(pendant.*] gill et helvetic sont les noms des polices.0% right top } letter-spacing définit la distance normal | d'espacement <longueur> entre mots définit la distance d'espacement normal | <length> entre caractères H1 { word-spacing: 0. H1. || overline || lineA:active { textest souligné. A:visited. reste fixe avec les scroll | fixed défaut : scroll background-repeat: déplacements repeat-y.gif) green 50% repeat fixed } text-transform défaut : aucun permet de spécifier si le texte none | [ underline A:link.

style et <couleur> couleur H1 { border-top: thick } défaut :aucune les valeurs omises sont égales aux valeurs par défaut défaut : medium défaut : medium border-right border-width permet de regrouper les différentes propriétés de border-width en une ligne défaut : medium Les valeurs manquantes sont [thin | medium | H1 { border-width: celles définies sur thick | thin } le coté opposé <longueur>]{1.4} Une seule valeur est applicable à tous H1 { border-color: red } regroupe toutes <border-topdéfaut :aucune les propriétés des width> || <border.4} propriétés de marge en une ligne défaut : auto Les valeurs BODY { margin: 1em 2em 3em } /* manquantes sont top=1em.5em } thin | medium | thick | <longueur> thin | medium | thick | <longueur> H1 { borderbottomwidth: 0.2. valeur de l'indentation avant la première ligne left | right | center | justify P { text-align:justify} défaut : dépend de la configuration du navigateur défaut : 0 margin <longueur> | <pourcentage> P { text-indent: 3em } permet de regrouper les [ <longueur> | <pourcentage> | différentes auto ]{1. défaut : normal font-size: 10pt } H1 { margin-top: 3px } H1 { margin-rigth: 3px } H1 { margin-bottom: 3px } H1 { margin-left: 3px } padding-top padding-right défaut : auto padding-bottom padding-left défaut : auto valeur de remplissage haut valeur de remplissage droit valeur de remplissage bas valeur de remplissage gauche permet de regrouper les différentes propriétés de padding en une ligne <longueur> | <pourcentage> <longueur> | <pourcentage> <longueur> | <pourcentage> <longueur> | <pourcentage> défaut : auto padding défaut : auto [<longueur> | H1 { padding: 1em <pourcentage>]{1. right. de le centrer ou de le justifier. à droite. le coté opposé bottom=3em. style et <couleur> valeurs par défaut couleur border-bottom border-color donne la couleur des bordures regroupe toutes <border-topdéfaut :aucune les propriétés des H1 { borderwidth> || <borderles valeurs omises bottom: thick solid bordures basses: style> || sont égales aux red } épaisseur. bottom et left Les valeurs manquantes sont celles définies sur le coté opposé line-height margin-top margin-right margin-bottom margin-left normal | <nombre> | valeur entre deux lignes adjacentes <longueur> |<pour centage> <longueur> | valeur de la marge <pourcentage> | haute auto <longueur> | valeur de la marge <pourcentage> | droite auto <longueur> | valeur de la marge <pourcentage> | basse auto <longueur> | valeur de la marge <pourcentage> | gauche auto DIV { line-height: 1. Une seule valeur left=2em */ est applicable à tous H1 { padding-top: 3px } H1 { padding-right: 3px } H1 { paddingbottom: 3px } H1 { padding-left: 3px } défaut : 0 défaut : 0 défaut : 0 défaut : 0 défaut : 0 top.5em } H1 { border-leftwidth: 0.5em } défaut : medium border-top thin | medium | H1 { border-rigththick | <longueur> width: 0. 2em } 4} border-top-width border-rightwidth border-bottomwidth border-left-width donne l'épaisseur du bord haut donne l'épaisseur du bord droit donne l'épaisseur du bord droit donne l'épaisseur du bord droit thin | medium | thick | <longueur> H1 { border-topwidth: 0. style et <couleur> valeurs par défaut couleur <couleur>{1.4} défaut : black 18 . celles définies sur right=2em.5em } défaut : medium regroupe toutes <border-toples propriétés des width> || <borderbordures hautes : style> || épaisseur.06/11/2008 text-align text-indent permet de placer le texte à gauche.H1 { border-right: les valeurs omises bordures droites: 1em } style> || sont égales aux épaisseur.

} défaut : auto float défaut : none disc | circle | définit le type square | decimal OL { list-stylede | lower-roman | type: lowerlist-style-type numérotation. font-family. font-size.icon { width: 100px } height permet de donner la longueur d'un IMG.gif) } list-style-type par une image défaut : disc défaut : none Tp sur les feuilles CSS list-styleposition spécifie si les bullets ou numérotation ou UL { list-styleimages sont à inside | outside position: outsid défaut : outside l'intérieur ou à e} l'extérieur du texte. style et <couleur> couleur regroupe toutes <border-width> || les propriétés des <border-style> || bordures <color> permet de donner la largeur d'un élément texte ou image <longueur> | <pourcentage> | auto défaut :aucune les valeurs omises sont égales aux valeurs par défaut défaut :aucune toutes les bordures sont identiques défaut : auto clear display white-space border P { border: solid red } permet à un élément d'être none | left | H1 { clear: left } défaut : none cadré sur le côté right | both spécifié spécifie où block | inline | P { display: block l'élément est défaut : none list-item | none } affiché type d'espace normal | pre | PRE { whitedéfaut : normal blanc nowrap space: pre } width IMG. upper-roman | roman } /* i ii de bullet dans lower-alpha | iii iv v etc. */ les listes upper-alpha | none permet de remplacer les UL { list-styletypes de list-style-image <url> | none image: numérotation de url(ungi. margin -left: 0.icon { float: left.. telque c'est décrit dans le contenu du document B) réécrire le document HTML sans mise en page list-style permet de regrouper les différentes catégories de list-style (disc | circle | square | decimal | lowerroman | upperroman | loweralpha | upperalpha | none) ||<url> | none || inside | outside UL { list-style: upper-roman inside } défaut : aucune 19 .icon { height: <longueur> | auto élément texte ou 100px } image permet de cadrer l'élément là où il left | right | none apparaît ou à gauche ou à droite IMG.06/11/2008 border-left regroupe toutes <border-toples propriétés des width> || <border.<td>body {backgroundcolor:yellow} </table> </html> A) créez une feuille de style css permettant de mettre en page ce document HTML. font-style.H1 { border-left: bordures gauches: style> || thick solid red } épaisseur. Soit le fichier HTML suivant : <html> </head> <body bgcolor="gray" text="blue" link="red"> <h1 align="left"><font color="black" face="verdana" size="5"> Les feuilles de style CSS</h1> <h2 align="center"><font color="white">Syntaxe</h2> <table width="75%" bgcolor="yellow"> <tr><td>Propriétés de style<td>exemple <tr><td>color..

font-size. font-family.w3.color:blue} A {color:red} h1 {text-align:left.org/Style/CSS/ 20 ..06/11/2008 Corrigé Style.css" type="text/css" rel="stylesheet"></head> <body> <h1> Les feuilles de style CSS</h1> <h2>Syntaxe</h2> <table> <tr><td>Propriétés de style<td>exemple <tr><td>color.color:white} table {width:75%.org http://www.font-family:verdana.font-size:15px} h2 {text-align:center.w3.color:black.org/html/ http://www.html (sans mise en page) <html> <head><link href="style.w3. font-style.background-color:yellow} _______________________________________ Style.<td>body {backgroundcolor:yellow} </table> </html> Références bibliographiques http://www..css body {background-color:gray.

Sign up to vote on this title
UsefulNot useful