Vous êtes sur la page 1sur 95

crire ses pages Web en quelques leons

http://lita.univhttp://lita.univ-metz.fr/~paris/

D'aprs le cours de Jean-Philippe GURECKI JeanDeug STPI 1re anne 1

Sommaire
Qu'est-ce que HTML ? Convention d'criture Structure HTML Le codage des couleurs Les noms de fichiers L'entte <head></head> Le corps <body></body> Les listes Les Lignes horizontales Les liens Les images Les tableaux Les cadres Les feuilles de styles (CSS) Projet
Deug STPI 1re anne

4 5 6 7 8 11 14 22 27 29 34 40 48 57
2

Table des matires


Qu'est-ce que le langage HTML ? Conventions d'criture Structure d'un document HTML Le codage des couleurs Les noms de fichiers L'entte : <HEAD> </HEAD> La balise META Le corps : <BODY> </BODY> Les options du BODY Le texte Le codage des caractres accentus Mise en forme des caractres Mise en forme des paragraphes Les listes Les options des listes Cration de lignes horizontales Les liens externes Les liens internes
Deug STPI 1re anne

3 4 5 6 8 11 12 13 14 15 16 17 18 19 20 21 22 23
3

Table des matires


Les images Les images animes et images-map Les tableaux
Structure gnrale d'un tableau Les tableaux : <TABLE> </TABLE> Les lignes : la balise <TR> </TR> Les cellules : la balise <TD> </TD> Un exemple de tableau complexe

24 25 26
27 28 29 30 32

Les cadres
La structure des cadres : <FRAMESET> </FRAMESET> Le contenu des cadres : <FRAME> Un exemple de cadres complexe

33
34 37 39

Les feuilles de style CSS

La cration de style Les feuilles de style externes Les proprits de style


Deug STPI 1re anne 4

Qu'estQu'est-ce que HTML ?


Langage de description de page qui permet de coder de manire simple :
le texte de la page les instructions de mise en forme les appels aux fichiers externes les appels aux pages lies Une question ? Un site http://www.commentcamarche.net/ Besoin d'un logiciel ? Un site http://framasoft.org/
Deug STPI 1re anne 5

Qu'estQu'est-ce que HTML ?


Universel car les mises en forme sont exprimes l'aide de balises qui modifient l'affichage interprt au moment de l'utilisation et non compiles.
Les balises sont des mots-cls crits entre un < et un > Par exemple : <body>, <b>, <br>)

Peut tre enrichi l'aide de langages de programmation (Java, Javascript, ActiveX) Fonctionnalits multimdia automatises (normalement :-)
Deug STPI 1re anne 6

Conventions d'criture
Une page HTML est un fichier ASCII (texte) Elle est tape avec un traitement de texte (ex : Notepad++) et enregistrer avec le suffixe .html ou .htm Mais surtout ne pas utiliser le format HTML de World! Un commentaire s'crit entre <!-- et -->
Deug STPI 1re anne 7

Structure HTML
Commence toujours par la balise <html> pour activer l'interprte HTML Finit toujours par la balise </html> Comporte toujours 2 parties.

Deug STPI 1re anne

Structure HTML
Pour les pages sans frames
L'entte entre les balises <head> et </head> Le corps entre les balises <body> et </body>

Pour les pages avec frames


L'entte entre les balises <head> et </head> Les cadres entre les balises <frameset> et </frameset>
Deug STPI 1re anne 9

Le codage des couleurs


Pour tre universel, le codage des couleurs en HTML s'appuie sur le modle RVB (Rouge - Vert - Bleu). Chaque couleur affiche est dcomposable en 3 couleurs primaires Chaque couleur primaire prend sa valeur entre 0 et 255. La couleur dcrite par (0,0,0) est le noir. La couleur dcrite par (255,255,255) est le blanc.
Deug STPI 1re anne 10

Le codage des couleurs


La palette complte des couleurs est dcrite par toutes les valeurs de triplet possible entre le noir et le blanc.
Le rouge est dcrit par (255,0,0)

Le codage se fait en hexadcimal sur 3x2 chiffres (2 par couleur primaire) prcds par le caractre #
Le noir est reprsent par #000000, le blanc par #FFFFFF et le rouge par #FF0000
Deug STPI 1re anne 11

Les noms de fichier


Les fichiers HTML ont deux extensions possibles : .htm et .html La premire page d'un site est en gnral appele index.html Si aucun fichier n'est prcis lors de la visite d'un site, c'est ce fichier qui est recherch par dfaut sur le site par l'interprte HTML
Deug STPI 1re anne 12

Les noms de fichier


Les fichiers images sont de deux types :
Les images JPEG, principalement pour les images de qualit photographique
Leur extension est .jpg Elles offrent une possibilit de compression intressante pour les utilisateurs ayant une connexion faible dbit.

Les image GIF, pour les images de tout type et pour les images animes.
Leur extension est .gif Elles sont plus lourdes.
Deug STPI 1re anne 13

Les noms de fichier


Les pages Web qui sont atteintes par des liens, les images qui sont affiches, les sons ou vido qui sont jous l'aide de plugins sont des fichiers dont il faut donner le nom dans certaines balises.

Deug STPI 1re anne

14

Les noms de fichier


Si le fichier est stock sur le mme site que la page appelante, il faut toujours indiquer les noms de fichiers sous leur forme relative, c'est dire indiquer en plus de leur nom, leur chemin d'accs par rapport la page qui est affiche
. pour dsigner le mme rpertoire .. pour le rpertoire pre

Si le fichier est stock sur site web diffrent de la page appelante, il faut utiliser la notation absolue
toujours commencer le nom du fichier par http:// il faut reprendre ce qui est affich dans la barre d'adresse du navigateur
15

Deug STPI 1re anne

Les noms de fichier


www.toto.com japelle.html www.tutu.com plus_bas plus_bas_aussi encore_plus_bas www.toto.com plus_bas japelle.html

encore_plus_bas jerecois.html
../plus_bas_aussi/encore_plus_bas/jereco is.html
16

jerecois.html
http://www.tutu.com/plus_bas/enco re_plus_bas/jerecois.html

Deug STPI 1re anne

L'entte <head></head>
Contient des donnes "informatives" sur la page Est plac immdiatement aprs la balise <html> <title></title> change le titre de la fentre dans laquelle la page s'affiche

Deug STPI 1re anne

17

L'entte <head></head>
En fonction des options dclares, <meta> va permettre de faciliter la recherche de la page ou de passer automatiquement une autre page.

Deug STPI 1re anne

18

La balise META
<meta name="Author" content="auteur1[,auteur2,]">

permet de rechercher la page dans certains moteurs de recherche en se basant sur les noms des auteurs indiqus

Deug STPI 1re anne

19

La balise META
<meta name=" Keywords " content="mot-cl1[,mot-cl2,]">

permet de rechercher la page dans certains moteurs de recherche en se basant sur les mots-cls indiqus

Deug STPI 1re anne

20

La balise META
<meta http-equiv="Refresh" content="n;url=adresse de page">

permet de passer automatiquement un autre site aprs un certain dlai


n = dlai en seconde avant l'appel de la deuxime page. adresse de page = adresse (absolue ou relative) de la deuxime page Web afficher
Deug STPI 1re anne 21

Exercice 1 et 2
crivez le texte suivant et expliquez ce qui se passe. Ensuite lancez votre moteur de recherche prfr Tapez les mots clefs STPI, Deug et HTML et expliquez ce qui se passe.

Deug STPI 1re anne

22

<html> <head> <title>TP Bureautique : Deug STPI.</title> <meta name="Keywords" content="STPI, Deug, HTML"> <meta name="Author" content=" Paris & Sahnoune"> <meta http-equiv="Refresh" content="5; URL=http://www.lita.univ-metz.fr/~paris/"> </head> <body> Dans quelques instants vous allez passez automatiquement une nouvelle page. </body> </html>

Deug STPI 1re anne

23

Le corps <body></body>
Permet de dfinir l'apparence du fond de l'cran et la couleur des lments textuels 1 balise Body et 1 seule par page Elle peut s'employer seule ou avec une ou plusieurs de ses options Est place immdiatement aprs la balise </head>
Deug STPI 1re anne 24

Le corps <body></body>
</body> est plac immdiatement avant la balise </html> Est absent dans les pages dcrivant des frames

Deug STPI 1re anne

25

<body bgcolor="#RRVVBB" background="nom de fichier" text = "#RRVVBB" link = "#RRVVBB" vlink = "#RRVVBB" alink = "#RRVVBB">
BGCOLOR couleur de fond de la fentre BACKGROUND image rpte sous forme de mosaque en fond TEXT couleur du texte ordinaire (si omis, utilisation des couleurs standards) LINK couleur du texte/de la bordure d'une image qui est un lien (si omis, utilisation des couleurs standards) VLINK couleur du texte/de la bordure d'une image qui est un lien amenant sur une page dj vue (si omis, utilisation des couleurs standards) ALINK couleur prise par un lien tant qu'on clique dessus (peu utilis) Toujours mettre un BGCOLOR en fonction de TEXT et LINK (mme s'il y a un BACKGROUND)
Deug STPI 1re anne 26

Les options du BODY

Exercice 3
crivez le fichier reproduisant la page ci-dessous

Deug STPI 1re anne

27

Le texte du body
Tout texte tap hors d'une balise est considr comme du texte "statique" et apparatra de ce fait l'cran La mise en forme se fait 2 niveaux
caractres paragraphes

Deug STPI 1re anne

28

Le texte du body
Il faut coder les caractres spcifiques au franais (et aux langues autres que l'anglais) en utilisant un systme de codage qui permet un affichage universel quelque soit la langue de l'ordinateur sur lequel les pages sont lues

Deug STPI 1re anne

29

Le texte du body
&nbsp; &pound; &copy; &sup2; &frac14; &agrave; &eacute; & icirc; &quot; & lt; Espace inscable 2 " < &brvbar; &yen; &reg; &sup3; &frac12; &Agrave &Eacute; & Icirc; & szlig; &gt; | 3 > &plusmn; &Oslash; &deg; &amp; &frac34; &oelig; &euml; & ccedil; &ntilde; &micro;
30

&

Deug STPI 1re anne

Mise en forme des caractres


<b> </b> : gras <i> </i> : italique <u> </u> : soulign <basefont size="s"> sert fixer la taille par dfaut dans une page Web (s un entier compris entre 1 et 7)
La taille par dfaut des caractres est fixe 3

Deug STPI 1re anne

31

Mise en forme des caractres


<font face="police1[,police2,] size = "s|+s|-s" color = "#RRVVBB"> </font>
FACE : la premire police installe est utilise. Ne proposer que des polices dont on est sr qu'elles sont disponibles sur l'ordinateur de consultation (Arial/Helvetica et Times New Roman/Times) SIZE : 1..7 (taille absolue) ou +1, +2... (taille relative par rapport la valeur spcifie dans BASEFONT) Les balises <font> </font> peuvent tre imbriques <font face=""><font size="+1">toto</font></ font> est quivalent <font face="" size="+1">toto</ font>
Deug STPI 1re anne 32

Exercice 4
crivez le fichier reproduisant la page ci-dessous

Deug STPI 1re anne

33

Mise en forme des paragraphes


<h1> </h1> : format d'entte <br> retour la ligne simple <p> retour la ligne avec saut dune ligne <div align="center"></div> centre le texte <div align="right"></ div > positionne le texte droite dans la page <div align="left"></div> positionne le texte gauche dans la page
Deug STPI 1re anne 34

Exercice 5
crivez le fichier reproduisant la page ci-dessous

Ceci est l'option title du body

Deug STPI 1re anne

35

Les listes
2 types de listes
les listes puce : prcder et faire suivre les lments de la liste avec les balises <ul> et </ul> les listes numrotes : prcder et faire suivre les lments de la liste avec les balises <ol> et </ol>

Deug STPI 1re anne

36

Les listes
Chaque lment de la liste est prcd par la balise <li>
elle provoque l'affichage de la puce ou du chiffre

Les listes peuvent tre imbriques

Deug STPI 1re anne

37

Les options des listes puces


l'option type="disc|circle|square" dans <ul> permet de choisir sa puce.
taper les valeurs en minuscules (ie ne les applique pas si elles sont tapes en majuscules).

Exemple : <ul type="disc">.

Deug STPI 1re anne

38

Les options des listes numrotes


L'option start=nombre_de_dpart pour dmarrer la liste une valeur spcifique autre que 1. l'option type=i|I|a|A|1 pour changer le type de numrotation.
1=chiffres arabes (option par dfaut), i=romains minuscules, I=majuscules, a=lettres minuscules, A=majuscules.

Exemple : <ol type="I" start=4>


Deug STPI 1re anne 39

Les listes hirarchiques


2 listes imbriques l'une dans l'autre sans puce ni numro. Encadres par <dl></dl> Chaque nouvelle ligne de niveau 1 commence par <dt> Chaque nouvelle ligne de niveau 2 commence par <dd>

Deug STPI 1re anne

40

Les listes hirarchiques


Exemple
<dl> <dt>niv1 <dd>niv2 <dd>niv2 <dd>niv2 <dt>niv1 <dd>niv2 <dt>niv1 <dt>niv1 </dl>
Deug STPI 1re anne 41

Exercice6
crivez le fichier engendrant la page cicontre

Deug STPI 1re anne

42

Cration de lignes horizontales


<hr size="s" width="w|w%" align = "LEFT|CENTER|RIGHT" color = "#RRVVBB" noshade>
SIZE : paisseur en pixel de la ligne WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue (pixels) ou relative (en pourcentage de la largeur de la fentre) ALIGN : alignement gauche|au centre| droite dans la fentre ( utiliser si la ligne ne fait pas toute la largeur de la fentre) COLOR : couleur de la ligne. Option valable avec Internet Explorer NOSHADE : dsactivation de l'ombrage de la ligne. Option valable avec Netscape Navigator

<hr> seul affiche une ligne grise ombre de 1 pixel d'paisseur faisant toute la largeur de la fentre
Deug STPI 1re anne 43

Exercice7
crivez le fichier reproduisa nt la page ci-dessous

Deug STPI 1re anne

44

Les liens externes.


<a href="adresse atteindre" target="fentre d'affichage"> </a>
Encadre du texte et/ou une image Target permet de spcifier un nom de fentre pour l'affichage Si la fentre prcise n'existe pas, elle est cre Par dfaut l'affichage se fait dans la fentre courante
Deug STPI 1re anne 45

Les liens externes.


<a href="http//:www.lita.univ-metz.fr/~paris/"> chez moi </a> rfrence une page html que l'on atteint en cliquant sur chez moi. Si le fichier spcifi n'est pas un fichier HTML, le lien sera un lien de tlchargement. <a href="ftp//:"> ici </a> rfrence un fichier tlcharger mme si c'est un fichier html.

Deug STPI 1re anne

46

Les liens externes.


<a href =mailto:paris@univ-metz.fr?subject=qcq"> ma bote aux lettres </a>

quand on clique sur ma bote aux lettres une fentre de mail s'ouvre avec pour destinataire paris@univ-metz.fr et pour objet qcq

Le lien aura la couleur spcifie dans l'option LINK du BODY, sauf si le texte matrialisant le lien est inclus dans une balise <font color> (incluse elle-mme dans la balise <a href>) Le lien peut tre fait sur du texte et/ou une image

Deug STPI 1re anne

47

Exercice 8
crivez le fichier correspondant la page cidessous

Deug STPI 1re anne

48

Les liens internes


Un lien interne est un lien qui amne un endroit spcifique de la page HTML en cours. Il se construit en deux temps : Mise en place d'une tiquette l'emplacement atteindre avec la balise <a name="nom de l'tiquette"> </a> Appel du lien de manire classique, mais o l'adresse de la page atteindre est remplace par le nom de l'tiquette prcde d'un # : <a href="#nom de l'tiquette"> </a>

NB : il est possible d'atteindre un emplacement spcifique d'une page diffrente de celle o a lieu l'appel de lien. c'est dire de combiner les liens externes et internes, en faisant suivre le nom du fichier HTML par un # et le nom de l'tiquette.

Deug STPI 1re anne

49

Exercice 9
Construisez une page HTML identique l'exercice prcdent en ajoutant :
un lien interne rfrenant le troisime lment de la liste que l'on accde en cliquant sur le mot beau. Un lien interne rfrenant le haut de la page que l'on accde en cliquant sur anonymous.

Deug STPI 1re anne

50

Les images statiques et animes : <img>


Une image anime se cre en associant plusieurs images (les formats utilisables diffrent suivant les logiciels) dans un seul fichier au format .gif L'option src : nom du fichier contenant l'image L'option width : largeur de l'image affiche. Si cette option n'est pas spcifie, l'image est affiche sa taille relle. On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l'image. L'option height : hauteur de l'image affiche. Mmes remarques que pour width Quand une seule des deux options width ou height est spcifie, l'autre est automatiquement calcule en proportion Toujours indiquer au moins un des deux paramtres pour acclrer l'affichage

Deug STPI 1re anne

51

Les images statiques et animes


L'option alt : texte apparaissant dans une info-bulle quand la souris est positionne pendant 1 2 secondes sur l'image L'option border : taille en pixel de la bordure autour de l'image. Si l'image est un lien et qu'on ne veut pas voir de bordure de la couleur spcifie dans l'option LINK du BODY, mettre 0 L'option usemap : utilise pour associer une image une carte de zones ractives (par dfaut aucune). Voir aprs exercice 10
Deug STPI 1re anne 52

Exercice10

crivez le fichier correspo ndant la page ci-contre

Deug STPI 1re anne

53

Les cartes <map></map>


Ce couple de balises est utilis pour ajouter une carte une image. L'option name donne un nom la carte. Ce nom sera utilis pour raliser l'association entre la carte et l'image. Une carte est compose de zone (area). chaque zone est associe une action dclench quand l'utilisateur la dsigne.

Deug STPI 1re anne

54

Les cartes <area>


L'option shape sert spcifier la forme de la zone. rect (pour un rectangle), circle (pour un cercle) et poly (pour un polygone). L'option href dtermine l'URL appele lorsque l'utilisateur cliquera sur la zone que vous tre en train de dcrite. L'option coords fixe les coordonnes de la zone dcrite. Ces coordonnes doivent tre donnes sous la forme d'une liste d'entiers spars par des virgules. Dans le cas d'une zone rectangulaire, on spcifie les coordonnes de deux points diamtralement opposs Dans le cas d'une sphre, on donne son centre et un point de la circonfrence. Enfin, pour un polygone, on numre les coordonnes de tous les sommets, deux deux conscutifs
Deug STPI 1re anne 55

Exercice11
crivez le fichier qui correspond la page ci-contre o l'image smile est divise en 2 partie rectangulaire Une zone avec un lien sur http://www.infini-fr.com/ Une zone avec un lien sur www.jememarre.fr

Deug STPI 1re anne

56

Les tableaux <table></table>


<TR></TR> : ouverture et fermeture d'une ligne dans le tableau (Table Row) <TD></TD> : ouverture et fermeture d'une cellule (Table Data) Ne jamais oublier les balises de fermeture, car le tableau pourrait tre dsordonn, voire ne pas s'afficher Les tableaux peuvent tre imbriqus, mais il faut toujours qu'il y ait le mme nombre de balises d'ouverture et de fermeture (attention l'ordre) Les tableaux peuvent servir la mise en page : texte en colonne, cration de menus verticaux sur le cot de la fentre. mais si des attributs de caractres doivent tre spcifis, il faut le faire cellule par cellule (mme si c'est pour tout le tableau )
Deug STPI 1re anne 57

Exercice 12
crivez le code qui vient et visualisez le rsultat
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Keywords" content="STPI, Deug, HTML"> <meta name="Author" content="Stphane Paris"> <meta name="Generator" content="AceHTML 4 Pro"> <title>TP Bureautique : Deug STPI</title> </head> <body bgcolor="silver" text="purple" link="black" vlink="blue" alink="white" rightmargin=5 title="Le titre du Body c'est... Le corps!"> <table align="center" bgcolor="#FF00FF" bordercolor="#FF0000"> <tr> <td>pos 1 1</td> <td>pos 1 2</td> </tr> <tr> <td>pos 2 1</td> <td>pos 2 2</td> </tr> </table> </body> 58 Deug STPI 1re anne </html>

Les options des tableaux <table>


Les options height, width, align, border, bgcolor, background comme d'habitude L'option cellpadding dfinit l'espace entre le bord des cellules et leurs contenus (intra cellulaire) L'option cellspacing dfinit l'espace entre les cellules (inter cellulaire)
Deug STPI 1re anne 59

Exercice 13
crivez le fichier qui correspond la page ci-contre Il y a des bordures au tableau L'image se trouve sur le site
www.jememarre.com

Deug STPI 1re anne

60

Les options des lignes <tr>


Les options height, width, border, bgcolor, background comme d'habitude L'option align pour un alignement horizontal centr, justifi, gauche ou encore droite L'option valign permet de positionner verticalement le tableau
Deug STPI 1re anne 61

Les options des cellules <td>


Les options height, width, border, bgcolor, background, align, valign comme pour les lignes mais pour les cellules. L'option colspan=nombre de cellules fusionnes l'horizontal. Permet de disposer du texte sur plusieurs colonnes. Pour que le tableau s'affiche correctement, il faut que ligne par ligne, le nombre de cellules soit le mme. L'option rowspan=idem pour les fusions la verticale
<TD COLSPAN=3> ROWSPAN=3> <TD COLSPAN=2>
Deug STPI 1re anne 62

Exercice 14

Deug STPI 1re anne

63

Exercice 15
crivez le fichier qui correspond la page suivante

Deug STPI 1re anne

64

Les cadres
Les cadres permettent d'obtenir une ou plusieurs divisions horizontales et/ou verticales de la fentre du navigateur, et ainsi de disposer "virtuellement" de plusieurs navigateurs. Au moins une des divisions est gnralement employe pour afficher un menu de parcours du site. Pour crer un site avec des cadres, il faut disposer d'une page ou de plusieurs pages de structuration qui indiquent comment l'cran est divis (c'est le(s) frameset) en pages HTML classiques qui seront affiches dans les frames crs
Deug STPI 1re anne 65

La structure des cadres <frameset></frameset>


L'option rows=d1[,d2] pour une division en horizontale. di indique la hauteur en pixel de chaque cadre, en les sparant par des virgules. L'option cols=d1[,d2] pour une division verticale. di indique la largeur en pixel de chaque cadre. * permet d'attribuer au dernier cadre tout l'espace restant. Il est possible galement d'indiquer une valeur en pourcentage. Mais il faut tre trs prudent car l'affichage dpendra de la taille de la fentre du navigateur
Deug STPI 1re anne 66

La structure des cadres <frameset></frameset>


Pour dsactiver l'affichage des bordures entre les frames, il faut utiliser les 3 options BORDER=0, FRAMEBORDER=NO et FRAMESPACING=0 en mme temps de manire ce que toutes les versions de Netscape Navigator et Internet Explorer se comportent de manire identique. l'intrieur de chaque frameset, il y aura autant de balises <frame> (appels des pages afficher) que d'arguments dans l'option ROWS ou COLS
Deug STPI 1re anne 67

La structure des cadres <frameset></frameset>


Si des frames doivent eux-mmes tre diviss en (sous-)frames, il est possible de le faire au travers de frames imbriqus. Cette structuration est facile grer pour la maintenance : il n'y a qu'un seul fichier frameset. mais il n'est pas possible dans ces conditions de remettre jour en un seul lien 2 frames indpendamment des autres. Il est galement possible de le grer au travers de plusieurs pages qui s'enchanent : un frame divis contiendra un appel une page, qui sera elle-mme un descriptif de division. Cette structuration en plusieurs fichiers frameset sera plus souple grer pour l'affichage dans des frames spcifiques (multiplication des possibilits d'attribution de noms aux frames, voir page suivante). Dans ce cas, une au moins des balise <frame> appellera une page HTML qui sera un frameset
Deug STPI 1re anne 68

Le contenu des cadres <frame>


<frame src="adresse page afficher" name= "nom du frame" noresize scrolling= "YES|NO|AUTO" frameborder="YES|NO" border ="b" framespacing="fs" marginwidth="mw" matginheight="mh"> frameborder, border et framespacing ont la mme fonction que pour la balise frameset mais leur action est prioritaire s'ils sont ajouts celles de la balise frame.
Deug STPI 1re anne 69

Le contenu des cadres <frame>


name=nom du frame, qui sera utilis pour slectionner le frame o les liens cliqus seront affich. Un lien dans un frame produira son effet dans le mme frame, sauf si l'option target est utilise dans le href . On peut mettre comme valeur target le nom du frame o le lien doit s'afficher tel qu'il est spcifi dans l'option name. noresize permet d'empcher le frame d'tre redimensionn scrolling=gre l'affichage des ascenseurs (YES : toujours prsents, NO : jamais, AUTO : affichs si ncessaire) marginwidth, marginheight=espace vide laiss gauche et en haut du frame exprim en pixels
Deug STPI 1re anne 70

Un exemple de cadres complexes


(Version frames imbriques)
<frameset cols="50%,*" border="2" frameborder="YES" framespacing="2"> <frame name="1" src="1.html" marginwidth="10" marginheight="10" scrolling="yes"> <frameset rows="33%,33%,*"> <frame name="2" src="2.html" marginwidth="10" marginheight="10" scrolling="auto"> <frame name="3" src="3.html" marginwidth="10" marginheight="10" scrolling="auto"> <frameset cols="50%,*"> <frame name="4" src="4.html" marginwidth="10" marginheight="10" scrolling="auto"> <frame name="5" src="5.html" marginwidth="10" marginheight="10" scrolling="auto"> </frameset> </frameset> 71 Deug STPI 1re anne </frameset>

Un exemple de cadres complexes


Fichier "Frameset" 1
<FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" FRAMESPACING="2">
<FRAME NAME="1" SRC="1.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="yes"> <FRAME NAME="2" SRC="f2.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="yes">

Fichier "Frameset" 2 (f2.html)


<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="21" SRC="2.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto"> <FRAME NAME="22" SRC="3.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto"> <FRAME NAME="23" SRC="f3.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto">

</FRAMESET>

</FRAMESET> 21

Fichier "Frameset" 3 (f3.html)


<FRAMESET COLS="50%,*">
<FRAME NAME="231" SRC="4.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto"> <FRAME NAME="231" SRC="5.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto">

22

23 221 222

</FRAMESET>

Deug STPI 1re anne

72

Exercice 16
crivez le fichier qui correspo nd la page suivante

Deug STPI 1re anne

73

Dfinitions des CSS


Les versions actuelles des navigateurs respectent les normes CSS (Cascading Style Sheet, feuille de style). Les feuilles de style permettent un gain de temps en dveloppement et en maintenance de page mais sont peu connues.

Deug STPI 1re anne

74

La cration de style
La dclaration de style se fait dans l'entte de la page HTML, encadre par les balises <STYLE> et </STYLE> Il y a 3 possibilits pour affecter un style : modifier le style d'une balise existante crer une nouvelle classe de style affecter l'attribut style
Deug STPI 1re anne 75

Les balises existantes


Dans l'exemple du transparent suivant, vous avez la syntaxe pour affecter la police arial en 12 points toutes les cellules des tableaux d'une page Toutes les proprits de style sont dtailles dans le dernier paragraphe
La police dfinit la forme, la taille et la couleur des caractres

Deug STPI 1re anne

76

Les balises existantes


Dans l'exemple prsent, toutes les cellules TD auront comme style par dfaut Arial 12pt On peut modifier ainsi toutes les balises existantes
<HTML> <HEAD> <STYLE> TD {font-family:arial;font-size:12pt} </STYLE> </HEAD> <BODY> ... </BODY></HTML>
Deug STPI 1re anne 77

Les balises existantes Exercice


Compltez la page prcdente avec du code html et vrifiez que le style est bien pris en compte

Le cas particulier de la balise de lien A


La balise <A> est particulire, car elle peut tre drive selon l'action du visiteur On peut donc vouloir des apparence diffrentes de cette balise suivant que lon passe dessus, que lon clique dessus ou pour indiquer quelon a dj visit ce lien
Deug STPI 1re anne

79

Le cas particulier de la balise de lien A


On obtient ainsi 3 balises A
A:hover {text-decoration:underline} A:active {color:red} A:visited {color:green}

Avec cette dclaration, le texte de lien


est soulign au passage de la souris, devient rouge sur un clic, reste vert pour indiquer que ce lien a t visit.

Le cas particulier de la balise de lien A


Exercice compltez la prcdente page html avec des liens (balise A) et ajoutez y le style ci-dessus

Cration de classes
Modifier les balises existantes n'est pas suffisant quand il s'agit d'affecter un style une partie de texte. Par exemple dans cette page, les parties de code sont en police courier vert, grce la classe de style "code" qui est dclare ainsi :
<HTML><HEAD> <STYLE> .code {font-family:courrier;color:green} </STYLE> </HEAD>

Le point devant code indique la cration d'une nouvelle classe appele code.
Deug STPI 1re anne 82

Cration de classes
Pour affecter ce style une portion de texte, on crit :
<SPAN class="code">texte mis en forme</SPAN>

La balise <SPAN> permet d'affecter un groupe de mot une classe de style. Il est aussi possible d'affecter ce style une balise existante. Pour donner le style de la classe code une cellule de tableau, on crit :
<TD class="code">cellule en police courrier vert</TD>
Deug STPI 1re anne 83

Affecter l'attribut style


Il n'est pas indispensable de crer une classe de style pour affecter un style un objet. Par exemple :
<SPAN style="font-family:courier;color:green"> Texte mis en forme </SPAN>

L'attribut style d'une balise reoit les proprits de style. Il est toutefois prfrable de dclarer une classe pour regrouper la mise en forme.
Deug STPI 1re anne 84

Exercice
Crez une page html qui dfinit et utilise la classe de style code telle quelle est dfinie prcdemment. Vrifiez galement que la dclaration de style directement dans les ablise SPAN fonctionne.

Deug STPI 1re anne

85

Les feuilles de style externes


Nous avons vu jusqu'ici comment affecter un style une page, ce qui implique de recopier la dclaration dans toutes les pages et rend les mises jour longues et prilleuses. Il est possible de regrouper la dclaration des styles dans un fichier externe et de l'appeler dans toutes les pages du site. La maintenance est acclre et toutes les pages du site sont homognes.
Deug STPI 1re anne 86

Le fichier externe
L'extension d'un fichier de feuille de style est toujours .css Le fichier css contient uniquement l'intrieur des balises <STYLE>

Deug STPI 1re anne

87

Le fichier externe
Voici un exemple de fichier de style appel style.css :
// Ceci est un commentaire TD {font-family:arial;font-size:12pt} .code {font-family:courrier;color:green}

Ce fichier ne contient pas les balises <STYLE> Les commentaires sont marqus par
// blablabla le commentaire doit tenir sur la ligne /* et */ sont les marques de dbut et de fin dun commentaires pouvant tenir sur plusieurs lignes.
Deug STPI 1re anne 88

L'intgration du fichier externe


Une ligne dans l'entte suffit pour appeler le fichier de style dans une page :
<HTML><HEAD> <LINK rel="StyleSheet" type="text/css" href="style.css"> </STYLE> </HEAD>

La balise <LINK> fait un lien entre la page en cours et le fichier de style externe.

Exercices
Crez une page Web contenant des tables et insrez y le fichier de style prcdemment dfini.

Deug STPI 1re anne

90

Les proprits de style


Nous avons vu comment dclarer les styles dans une page. La norme CSS a prvu de nombreuses proprits pour les diffrents objets HTML. Toutes ces proprits ne sont pas prises en compte dans tous les navigateurs. Il vous faut donc toujours vous assurer que le style que vous utilis est adapt au(x) navigateur(s) que vous utilisez !
Deug STPI 1re anne 91

Les proprits de police


Proprit Signification Valeurs possibles font-size:12px font-size:10pt font-family:arial,verdana font-family:sans serif font-weight:bold font-weight:normal font-style:italic font-style:normal color:green color:#FFCC00 Deug STPI 1re anne 92 font-size Hauteur de police en points ou pixels

font-family

Nom de police

font-weight

paisseur de la police (gras)

font-style

Style de police (italic)

color

Couleur de police

Les proprits de texte


Proprit text-height Signification Hauteur de ligne en points ou pixels Valeurs possibles text-height:12px text-decoration:overline text-decoration:line-through text-decoration:underline text-decoration:none text-align:left text-align:right text-align:center text-indent:25px text-indent:-15px text-transform:capitalize text-transform:uppercase text-transform:lowercase 93

text-decoration

Attribut de soulignement

text-align

Alignement de paragraphe (balise P)

text-indent

Indentation de paragraphe (balise P)

text-transform

Transformation des majuscules

Deug STPI 1re anne

Les proprits d'arrireplan


Proprit Signification Valeurs possibles

background

Image d'arrire-plan

background:image.gif

background-color

Couleur d'arrire-plan

background-color:black

Deug STPI 1re anne

94

Projet Final
l'aide de cadres et de CSS, construisez un site traitant d'un thme de votre choix. La seule contrainte est que vous devez nous indiquez votre choix avant de commencer! Have fun et merci Robin Vivian pour ses cours en lignes
Deug STPI 1re anne 95