HTML CSS

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/
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 :-)
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 
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>
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.
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
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
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.
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
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>
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)
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
£ © ² ¼ à é & icirc; " & lt; Espace inscable 2 " < ¦ ¥ ® ³ ½ &Agrave É & Icirc; & szlig; > | 3 > ± Ø ° & ¾ &oelig; ë & ccedil; ñ µ
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>
Exercice 4
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
Exercice 5
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>

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>
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
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
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
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
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 )
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)
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
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>
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
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

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

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
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.
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
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
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>
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

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.

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.
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>
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.
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.
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.
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 !
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

HTML CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML CSS

Uploaded by

Copyright:

Available Formats

crire ses pages Web en quelques leons

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

Table des matires

Table des matires

Les feuilles de style CSS

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

Qu'estQu'est-ce que HTML ?

Qu'estQu'est-ce que HTML ?

Deug STPI 1re anne

Pour les pages avec frames

Le codage des couleurs

Le codage des couleurs

Les noms de fichier

Les noms de fichier

Les noms de fichier

Deug STPI 1re anne

Les noms de fichier

Deug STPI 1re anne

Les noms de fichier

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

permet de passer automatiquement un autre site aprs un certain dlai

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

Les options du BODY

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

Deug STPI 1re anne

Mise en forme des caractres

Deug STPI 1re anne

Mise en forme des caractres

Deug STPI 1re anne

Mise en forme des paragraphes

Ceci est l'option title du body

Deug STPI 1re anne

Deug STPI 1re anne

Les listes peuvent tre imbriques

Deug STPI 1re anne

Les options des listes puces

Exemple : <ul type="disc">.

Deug STPI 1re anne

Les options des listes numrotes

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

Les listes hirarchiques

Deug STPI 1re anne

Les listes hirarchiques

Deug STPI 1re anne

Cration de lignes horizontales

Deug STPI 1re anne

Les liens externes.

Les liens externes.

Deug STPI 1re anne

Les liens externes.

Deug STPI 1re anne

Deug STPI 1re anne

Les liens internes

Deug STPI 1re anne

Deug STPI 1re anne