Beruflich Dokumente
Kultur Dokumente
Balises HTML............................................................................................................... 29
1. 2. 1. 2. 3. 4. 5. 6. 7. 8. Les balises bloc ............................................................................................................ 29 Les balises en ligne ...................................................................................................... 30 Marges .......................................................................................................................... 31 Positionnement des blocs ............................................................................................. 31 Alignement de texte ..................................................................................................... 33 Formatage dcriture .................................................................................................... 33 Bordures ....................................................................................................................... 34 Arrires-plans ............................................................................................................... 34 Formatage des listes ..................................................................................................... 35 Formatage des tableaux ................................................................................................ 36
Plantons le dcor !
Visiter un site web, cest un peu comme aller au thtre. On peut dailleurs tenter dtablir un parallle entre ces deux spectacles : La pice de thtre Les diffrents actes Le livret Le producteur La scne / / / / / le site consult les pages du site le code source des pages Internet lcran de lordinateur le navigateur lensemble des internautes.
Les pices de thtre du producteur Internet sont interprtes sur toutes les scnes de notre plante. Lcriture du livret utilise donc un langage reconnu par tous les metteurs en scne : le HTML (Hyper Text Markup Language). Le World Wide Web Consortium, plus connu sous lacronyme W3C est lorganisme qui dfinit les normes du HTML et ses volutions. La dernire version est appele XML 1. Sil est normal - comme au thtre - que le rsultat final diffre selon le metteur en scne, lauteur (celui qui a conu le site) doit veiller ce que le metteur en scne respecte le livret et ne dnature pas luvre. Nous verrons en effet que tous les navigateurs ne traduisent pas le code source HTML dans un parfait respect des normes qui le dfinissent Un fichier contenant du code source HTML se caractrise par lextension .html .
Dfinition : (nf) *Ensemble de propositions qui font accder la comprhension dun concept. *Explication prcise de ce que le mot signifie Concept : (nm) *Reprsentation mentale gnrale et abstraite dun objet. Voir aussi ide Proposition : (nf) *Action de proposer un projet, une offre *nonciation dun jugement, affirmation *mot ou groupe de mots, gnralement ordonn autour dun verbe, constituant une phrase Abstrait : (adj) * Se dit dune notion de qualit ou de relation considre par abstraction
2. Les balises
Les balises constituent le principe mme du HTML (langage balises). Les navigateurs permettent de visualiser le code source correspondant une page affiche. Dans le code source, une balise (ou tag) est facilement identifiable : elle est constitue d'un ou plusieurs mots encadrs par les signes infrieur (<) et suprieur (>).
Exemple : <p align="center"> Fabriquer un site web </p> texte Balise de fermeture Balise d'ouverture p est un lment du langage HTML. align est un attribut de llment p. ="center" affecte la valeur center lattribut align. Certains lments peuvent avoir plusieurs attributs. Chaque balise doit tre ouverte puis ferme ; les balises <br /> <hr /> ou <img /> (respectivement saut de ligne, trait horizontal et insertion dune image) sont parmi les rares exceptions. On parle alors de balises "auto-fermantes". Bien que majuscules et minuscules soient autorises, les minuscules seront toujours utilises dans ce document pour tre conforme au XHTML (eXtended Hypertext Markup Language) et assurer la compatibilit avec les volutions du langage.
</head> <body>
<!--
</body> </html>
Important:
Les balises <head> et <body> sont imbriques dans la balise <html>. Dans les pages HTML limbrication des balises est systmatique. Lindentation (non obligatoire) permet de sassurer du respect de la rgle absolue : La premire balise rencontre dans le source est aussi la dernire ferme. Rciproquement la dernire balise rencontre est la premire ferme.
Les commentaires ne sont pas obligatoires et leur couleur est sans importance. Cependant la prsence dun commentaire peut faciliter la comprhension du code source et les modifications de la page
Dclaration du standard HTML utilis La dclaration du "doctype" qui spcifie le standard HTML utilis dans la rdaction des pages de site nest pas obligatoire. Elle est ncessaire pour effectuer auprs du W3C une validation qui consiste vrifier le respect des normes dcriture du standard choisi. Elle aide aussi le navigateur interprter la page le plus correctement possible. Dans ces feuillets, il sera toujours question de XHTML, qui est la dernire version du langage HTML. Do la "formule" doctype correspondante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
Len-tte du document (<head>) Aprs la balise <html>, dbut de tout code source, la balise <head> donne des informations gnrales : la balise <title> donne le titre de votre page tel quil apparat au-dessus de la fentre du navigateur ou dans les favoris du visiteur qui rajoute votre site sa liste de favoris. les balises <meta /> :
numre des mots cls judicieux permettant aux moteurs de recherche (Google et autres) de rfrencer votre site. les balises <link /> :
<link rel="stylesheet" href="habillage.css" type="text/css" media="screen" />
donne le lien du code avec une feuille de styles ralisant la mise en page. Il peut y avoir plusieurs fichiers CSS pour une page. Le corps du document (<body>) C'est ici que se trouvent les donnes afficher (titres, textes, images, tableaux, liens...)
Il faut ensuite enregistrer la page sur le disque dur en lui donnant un nom de fichier. Une page daccueil de site se nomme gnralement "index.html". Ds lors, un double-clic sur le nom du fichier source de cette page suffira ouvrir le navigateur Internet et afficher lcran : Voici ma premire page web !
Ce premier succs encourage composer une page avec un peu plus de contenu. Il est possible de faire un copier-coller pour rcuprer une partie dun document .doc ou .rtf et linsrer la place de la phrase actuelle. Hlas laffichage de la nouvelle page par le navigateur ne reflte pas exactement la mise en forme du texte: les passages la ligne suivante et les tabulations sont ignors. les espaces conscutifs sont rduits un espace unique. Ce nest pas un dysfonctionnement, cest la rgle avec le langage HTML ! Un certain nombre de balises seront indispensables pour rendre au texte sa structure.
Rsultat :
Le premier paragraphe Le deuxime paragraphe Le troisime paragraphe
La balise br Elle permet un simple passage la ligne suivante sans saut de ligne. Exemple:
/* Dbut du paragraphe */ La premire phrase <br /> /* ligne suivante */ La deuxime <br /> /* ligne suivante */ La troisime </p> /* Fin du paragraphe */ Le paragraphe est fini ! <p>
Rsultat :
La premire phrase La deuxime La troisime Le paragraphe est fini !
Rsultat :
Visitez notre Page web
Attributs associs la balise a : href : indique ladresse (relative ou absolue cf rpertoires et arborescence) de la cible vers laquelle le lien renvoie. La cible peut tre une page du site (cas des menus) ou dun autre site.
Page web est le lien hypertexte vers "page.html", fichier situ dans le
mme rpertoire que le source. title : Permet de spcifier une description du lien. Au passage de la souris sur le lien, le navigateur affichera "Nos activits" dans une bulle. Le lien dcrit par lattribut href peut tre : interne une page web vers un site diffrent vers un e-mail (Exemple crire au webmestre : ouverture automatique du logiciel de messagerie avec ladresse de destination dj remplie). (cas du sommaire dune page) vers une page diffrente (cas dun menu gnral de site)
Les divers cas de figure sont dtaills page 25: Matriser les liens.
Rsultat :
Les singes et les hommes
Attributs associs : src : alt : Attribut obligatoire qui donne ladresse de limage (relative ou absolue cf rpertoires et arborescence). Texte alternatif qui permet aux dficients visuels utilisant un logiciel de lecture audio davoir une interprtation de limage.
Rsultat :
Voici une liste: Rubrique1 Rubrique2 Rubrique3 Rubrique4
Les items de la liste sont placs lintrieur de balises <li> et saffichent prcds dune puce.
Les balises h1 h6 Titre hirarchiss du niveau 1 (le plus gros) au niveau 6 (le plus petit) Exemple:
<h1>Titre gnral</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h2>Un autre titre de niveau 2</h2>
Rsultat :
Titre gnral
Titre de niveau 2
Titre de niveau 3
Rsultat :
Il faut dfinir ce que sont les balises
Rsultat :
Nous devrons revenir sur les liens hypertexte car ils sont la base de la navigation sur Internet.
La balise div Division de texte. Cette balise gnrique ne produit par dfaut aucun effet particulier. Elle sert diviser le texte en bloc ayant une unit smantique et (ou) une mise en page particulire. Exemple:
<div> Dans ce chapitre nous aborderons les arguments en faveur des documents bien structurs, et de la mise en page soigne qui rend leur consultation plus agrable. </div>
Rsultat :
Dans ce chapitre nous aborderons les arguments en faveur des documents bien structurs, et de la mise en page soigne qui rend leur consultation plus agrable.
Les balises bloc peuvent servir de conteneur du texte, des balises en ligne ou - exception faite des balises de titre h1 h6 - dautres balises bloc. Les balises en ligne ne peuvent contenir que des balises en ligne. Exemples : <b> <div> blabla </div> </b> <div> <b> blabla </b> </div> est incorrect est correct
Pour donner aux blocs leurs proprits (positions lintrieur de la page, dimensions, couleur de fond, police de caractres, etc) on utilisera des feuilles de style (semblables celles des traitement de texte) qui seront associes au code HTML par lintermdiaire de balises link (voir page 4 :Ossature dune page HTML) situes dans lentte du document. Avant lintroduction des feuilles de style, les mises en pages taient ralises en utilisant des tableaux, souvent imbriqus et modifier une page tait un exercice vritablement fastidieux.
10
Les feuilles de styles sont consignes dans un fichier caractris par lextension .css Le source HTML contient dans lentte lindication de liaison avec la CSS associ :
<head> <meta...... /> <title>Fabriquer un site web</title> <link rel="stylesheet" href="habillage.css" type="text/css" /> </head>
1. Structure dune feuille de style slecteur{proprit:valeur;} p font-size 14pt Exemple : p { font-size : 14pt ; }
est le slecteur de la feuille de style compos dun seul lment. Cest un slecteur simple. est une proprit de la feuille de style. est la valeur affecte la proprit font-size.
Une feuille de style peut dfinir autant de dclarations que le slecteur peut autoriser. Une proprit correspond un attribut dlment HTML de type bloc (margin-top , font-size, background-color, etc.) Une valeur doit tre cohrente avec la proprit CSS laquelle elle est affecte (par exemple une couleur pour background-color et pas une mesure). Dans le cas contraire, la dclaration est ignore. 11
Des commentaires peuvent tre insrs en tout endroit du fichier sous la forme :
/* Ceci est un commentaire */
Des slecteurs contextuels, forms par combinaisons de slecteurs simples, permettent de viser des lments selon leur position dans le document :
Exemple : a img ne dsignera que les
Rsultat : - Le texte plac lintrieur de ce conteneur aura une taille de police de 14pt.
-
Tout autre bloc div non contenu dans le bloc id="entete" naura pas la taille de police prcise dans la feuille de style #entete.
Ct HTML :
Rsultat : - Le texte plac lintrieur de ce conteneur sera entour dune bordure continue. Toutes les pages du site lies notre fichier CSS, auront les blocs div appartenant la classe "encart" entours dune bordure continue. 12
Les pseudo-classes :
Elles sont principalement employes associes derrire llment a (lien). La syntaxe est de la forme :
lment:pseudo-classe{proprit:valeur ; }
Exemples :
a:link {color:blue ;}
Tous les liens vers des cibles non visites seront crits en bleu
a:visited {color:purple ;}
Tous les liens vers des cibles dj visites seront crits en violet.
a:hover {text-decoration:underline;}
Au survol dun lien par le pointeur de la souris le libell sera soulign. La pseudo-classe :hover est ignore dIE6 lorsquelle nest pas associe aux liens.
a:active {color:red;}
Slectionne un lien qui reoit la zone de saisie active dun formulaire. La pseudo-classe :focus est ignore de Google Chrome et Apple Safari et nest pas supporte par Internet Explorer avant la version 8.
Les pseudo-lments :
Exemples :
p:first-letter {font-size:200%;}
La premire lettre dun paragraphe aura une taille de police multiplie par 2.
p:first-line {text-decoration:overline;}
La premire ligne dun paragraphe sera place au-dessous dune ligne horizontale.
Pour rpondre ces contraintes opposes, la dfinition des marges, des fontes, des bordures, des arrire-plans et du style des listes, peut se faire selon deux modes : la notation classique et la notation globale.
13
2.
pt pc px1 in mm cm
2.2
Point. Mesure typographique. 1 point correspond 1/72 de pouce Pica. Unit de mesure typographique. 1 pica correspond 12 points Pixel. Mesure absolue pour un cran donn, mais relative la dfinition de laffichage si on modifie ce dernier 1 pouce correspond 2,54 centimtres Millimtre. Seules les valeurs entires sont autorises Centimtre Mesures relatives
Cest ce type de mesures quil faut privilgier car elles harmonisent taille des caractres et taille disponible pour laffichage.
em ex %
Relatif la taille de la lettre m dans la police de l'lment Relatif la taille de la lettre x dans la police de l'lment Pourcentage relatif la taille disponible pour l'lment. Cette unit est intressante pour adapter lespace occup par un bloc de texte la dfinition de lcran de lordinateur (1280 X 800, 1024 X 768, 800 X 600, etc)
Attention : De IE 5.0 IE 7.0 impossible l'utilisateur de modifier la taille de la police affiche dont lunit est le pixel
14
2.3
Mention hexadcimale RGB comme pour HTML (ex FFFFFF) Valeurs RGB dcimales (0-255,0-255,0-255) Rpartition RGB en pourcentage (0-100%,0-100%,0-100%)
3.
3.1.
Les dfinitions des marges externes et internes sont similaires : margin-top et padding-top margin-right et padding-right margin-bottom et padding-bottom margin-left et padding-left
pour la marge suprieure pour la marge droite pour la marge infrieure pour la marge gauche
margin-top padding-left
padding-top
margin-left
margin-right
15
On peut affecter les valeurs des quatre marges de deux faons quivalentes en crivant :
/* notation classique */ #comment{ margin-top : 20px ; margin-right : 30px ; margin-bottom : 30px ; margin-left : 20px ; } /* notation globalee */ #comment{ margin: 20px 30px 30px 20px; } /* les 4 valeurs sont toujours dans lordre top, right, bottom, left */
ou bien
En notation globale : affecte la mme dimension aux 4 marges soit 20px. margin : 20px, 30px ; affecte 20px en haut et en bas et 30px droite et gauche. margin : 20px, 30px, 10px ; affecte 20px en haut, 30px droite et gauche et 10px en bas.
margin : 20px ;
Important: Des marges affectes par dfaut et variables selon les navigateurs, provoquent des diffrences de rendu visuel. Une solution : affecter aux marges des valeurs choisies.
Exemples de positionnement Placer un bloc jaune de 100px X 100px 80px du haut du conteneur et 35px de la gauche du conteneur :
.conteneur { padding-top: 80px; padding-left: 35px; } .bloc { width: 100px; height: 100px; background-color: yellow; }
Conteneur
Bloc
Nota : On emploie ici un padding-top et un padding-left pour dfinir le positionnement du bloc lintrieur du conteneur (marge interne). Cela signifie que la zone situe autour du bloc jaune ne pourra pas tre remplie par du texte.
16
Deux blocs l'un au-dessous de l'autre avec un espace de sparation : Partie HTML:
<div class="bloc1">bloc1</div> <div class="bloc2">bloc2</div> bloc1
Rsultat :
CSS correspondante:
.bloc1 { background-color: aqua; height: 50px; } .bloc2 { background-color: lime; height: 50px; margin-top: 20px; }
bloc2
CSS correspondante:
.bloc1 { background-color: aqua; height: 50px; width: 100px; float: left; } .bloc2 { background-color: lime; height: 50px; width: 100px; float: left; margin-left: 20px; } .bloc3 { background-color: red; height: 50px; width: 100px; float: left; margin-left: 20px; }
Rsultat :
bloc1
bloc2
bloc3
17
Rsultat :
CSS correspondante:
.conteneur { background-color: aqua; height: 150px; width: 100px; padding-top: 40px; } .bloc { background-color: yellow; height: 50px; width: 50px; margin-left: 20px; }
3.2.
Positionnement flottant
La proprit float permet de positionner un bloc gauche (float : left;) ou droite (float : right;) lintrieur du bloc parent (et non-plus l'un en-dessous de l'autre). Le reste du conteneur parent occupera alors l'espace laiss libre, ct puis ventuellement audessous. Exemple : Une image insre droite d'un texte. Partie HTML:
<div class="conteneur"> <img class="image" src="..." alt="" /> <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla... </p> </div>
Rsultat :
CSS correspondante:
.conteneur { width: 40%; background-color: yellow; } .image { float: right; }
18
Attention : Le bloc positionn en flottant sort du flux courant des informations : sa hauteur nest donc plus limite celle du conteneur. Si aucune hauteur ne lui a t affecte, le bloc peut dborder du conteneur
Nota : Dans le cas de plusieurs lments flottants, il est souvent prfrable de les placer dans un parent commun. Il est possible de cumuler les proprits float pour obtenir plusieurs blocs cte cte. 3.3. Positions absolues, fixes et relatives
Position "absolute", position "fixed" Llment est plac l'aide des proprits "top" et "left" par rapport au coin suprieur gauche : de son parent si ce dernier est positionn, ou alors du dernier Anctre positionn. de la page entire (balise html) si aucun Anctre n'est positionn. Consquences : La position de llment est indpendante de lemplacement de sa balise lintrieur du code source du Parent . Llment positionn en absolu ne dcale pas et ne perturbe pas les autres donnes, auxquelles il peut cependant se superposer. Ce positionnement rend difficile l'adaptation du site aux diffrentes rsolutions dcrans des visiteurs. Diffrence entre "absolute" et "fixed": "absolute" autorise le dfilement des donnes positionnes "fixed"2 interdit le dfilement des donnes positionnes
Position "relative": La position "relative" d'un lment est dpendante de la position de l'lment qui le prcde dans le code HTML. Le code CSS donne la position finale du bloc laide des proprits "top", "right","bottom" et "left". Consquences : Llment positionn est dpendant des lments frres. Il influence les lments frres.
19
Pour ajouter des rgles spcifiques, il faut utiliser le moins possible de slecteurs. Exemple :
<div id="page"> /* Conteneur */ <p> ... <ul> <li> <a>...</li> ... </ul> </p> </div>
Il est inutile de spcifier le style des liens <a> partir de la rgle #page p ul li a la rgle #page a suffit. Par contre, si en dehors des listes d'autres liens dun style diffrent figurent dans le conteneur page il faudra utiliser div#page li a.
20
Il faudra aussi vrifier le rendu de la page web avec les diffrents navigateurs. Sous Windows, outre linvitable Internet Explorer il sera bon dinstaller Firefox (gratuit). Par ailleurs, plusieurs modules complmentaires de Firefox sont des assistants prcieux pour la fabrication de sites tel Web Developer (aide au dveloppement), Html Validator (validateur W3C) et ColorZilla (outil pipette pour prlever une couleur et rcuprer son codage). Le passage du site en ligne se fera en utilisant un logiciel FTP (File Transfer Protocol) pour copier les fichiers du site ( .html , .css et les images .gif , .png , .jpg) sur le serveur dun hbergeur. Le logiciel FileZilla (gratuit) ou tout autre logiciel FTP remplira cette fonction.
Essayer la page sur un navigateur en double-cliquant sur index.html. Transfrer lensemble des pages du site sur le serveur dun hbergeur. A lissu du transfert, le site est consultable en ligne.
21
L'identifiant plac dans la balise <ul> sera ncessaire pour accder aux diffrents lments du menu et pour les modifier dans la feuille de style. Rsultat lcran: Section1 Section2 Section3 Section4
1. Un menu vertical
On va donner une largeur au menu (200px), supprimer marges et padding par dfaut ainsi que la puce des lments de la liste:
#navigation { width: 200px; list-style: none; margin: 0; padding: 0; } /* /* /* /* largeur du menu */ pas de puce */ pas de marge */ pas de padding */
22
La suppression des marges externes et internes est ncessaire pour obtenir le mme rendu avec tous les navigateurs : les valeurs par dfaut de ces proprits ny sont pas identiques. Le comportement des lments de liste est de type bloc: ils s'empilent les uns sur les autres et occupent toute la largeur disponible. La disposition des lments est donc dj correcte. On va donner une couleur de fond, une couleur de texte, et une bordure aux lments <li> ainsi quune marge infrieure qui va arer la liste:
#navigation li { background: aqua; color: black; border: 1px solid #600; margin-bottom: 1px; }
Rsultat lcran:
Section1 Section2 Section3 Section4
Pour le fond et le texte il faut veiller au choix de couleurs compatibles et donnant un contraste suffisant. Pour faire ragir les lments du menu comme des boutons au survol du pointeur de la souris, les liens doivent occuper tout l'espace l'intrieur des <li>:
#navigation li a { display: block; /* les lments occupent tout lespace */ background: aqua; color: black; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; text-align: center ; /* centrage du texte */ text-decoration: none ; /* supprime le soulignement des liens */ padding: 4px 0 ; /* padding pour arer le texte */ }
Pour faire en sorte que les liens ragissent au passage de la souris nous emploierons la pseudo-classe hover. Attention, IE6 ne gre la pseudo-classe hover que lorsqu'elle est applique la balise <a>.
#navigation li a:hover { background: fuchsia; text-decoration: underline ; } /* couleur de fond au survol */ /* item soulign au survol */
23
Rsultat lcran:
Section1 Section2 Section3 Section4 Aller la section 3
2. Un menu horizontal
Cette fois, il faut modifier le comportement par dfaut des <li>: ils ne doivent plus s'empiler, mais se placer les uns ct des autres. Il y a deux approches possibles pour y parvenir. Mode de rendu "en-ligne" On peut modifier le mode d'affichage pour que les <li> s'affichent comme des lments de type "inline":
#navigation li { display: inline ; ... }
Les lments du menu se comportent maintenant comme du texte "normal". Rsultat lcran:
Section1 Section2 Section3 Section4
Cette mthode permet de raliser facilement un menu de navigation align droite ou centr, et vite de sortir les <li> du flux de la page (on verra plus loin quelques ennuis lis la sortie de ces lments du flux). De plus, la largeur des lments du menu s'adapte automatiquement la taille du texte. Malheureusement, en procdant de cette faon, on ne peut plus contrler les hauteurs et largeurs des <li>, on ne peut agir que sur les padding et sur l'interlignage. Un exemple de menu centr:
#navigation { margin: 0 ; padding: 0 ; list-style: none ; text-align: center ; }
24
On supprime les marges, padding et puces de la mme manire que pour le menu vertical. La proprit "text-align: center" aura pour effet de centrer toutes les balises de type inline l'intrieur de la liste.
#navigation li { display: inline ; margin-right: 1px ; color: #fff ; background: #c00 ; }
On modifie le rendu des lments de liste, et on ajoute couleur de fond, couleur du texte et bordures.
#navigation li a { padding: 4px 20px ; background: #c00 ; color: #fff ; border: 1px solid #600 ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; text-align: center ; text-decoration: none ; }
Attention, il ne faut pas utiliser "display: block" sur les liens, sinon ils vont tirer les lments de liste sur toute la largeur disponible, les obligeant se superposer! On peut les agrandir en utilisant les valeurs de padding. Le comportement ractif des liens est obtenu de la mme faon que pour le menu vertical.
#navigation li a:hover, { background: #900 ; text-decoration: underline ; }
Items flottants Une autre possibilit est de faire "flotter" les lments :
#navigation li { float: left ; }
Dans ce cas, les <li> restent de type bloc, et on peut encore les dimensionner. Par contre, ils sont sortis du flux de la page, et la proprit text-align n'aura plus d'effet sur eux. Cette mthode ne sera donc utile quavec des lments de menu de mmes dimensions. Toujours partir du mme code XHTML, on peut construire un menu de ce type:
#navigation { margin: 0 ; padding: 0 ; list-style: 0 ; }
25
On fait "flotter" les <li> et on leur donne une largeur. Il faut veiller laisser suffisamment d'espace pour que le texte du lien puisse tre agrandi par l'utilisateur! (dans les navigateurs, par appuis successifs de CTRL + pour agrandir, CTRL pour rduire, CTRL0 pour retrouver la taille nominale). Le rendu des liens se modifie exactement comme pour le menu vertical:
#navigation li a { display: block ; background: #c00 ; color: #fff ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; padding: 4px 0 ; text-align: center ; } #navigation li a:hover { background: #900 ; }
Attention : si on insre du texte dans la page juste en dessous du menu et que celui-ci n'occupe pas toute la largeur, on observe que le texte vient se placer ct du menu, au lieu de rester sagement en-dessous ! Explication : La proprit float: left, a retir les <li> du flux de courant de la page. Ds lors ils n'entrent plus dans le calcul de la hauteur de la liste <ul>, dont cest le seul contenu : sa hauteur est donc nulle !!!. Il existe (au moins) 2 solutions simples cet inconvnient: 1. appliquer clear: left l'lment qui suit directement le menu dans le code HTML. 2. forcer la liste occuper une hauteur suffisante :
#navigation { height: 1.8em ; ... }
Mais il n'est pas toujours facile de dterminer la hauteur requise, et des problmes vont surgir si le visiteur agrandit suffisamment la police de caractres pour obliger le texte des items du menu passer sur 2 lignes.
26
Lien vers une ancre d'une autre page et du mme rpertoire : Larrive se fait en un endroit prcis dune page diffrente Exemple :
Lien vers une ancre d'une autre page et dun rpertoire diffrent : Cas similaire au prcdent mais la page atteinte est dans un autre rpertoire. Exemple :
On dfinit plus commodment la cible dun lien en utilisant le nom dlment dune balise de type bloc : Ex :<div id="article"> ou <h1 id="titre1">. (voir Structure dune feuille de style)
27
Liens externes au site La syntaxe de la valeur affecte lattribut href varie selon le protocole. Lien externe vers un site http Exemple :
Lien externe vers un fichier : Pour faire un tlchargement (fichier .exe ou .zip) Exemple :
Liens e-mail La messagerie par dfaut du visiteur se lance et ladresse du destinataire sinscrit automatiquement (nom@fournisseur.com dans les exemples cidessous). Le visiteur reste matre de la dnomination du sujet et du contenu du mail Exemple :
<a href="mailto:nom@fournisseur.com">Responsable</a>
Mme chose avec pr-remplissage du sujet du message. Exemple o le sujet est "demande":
Mme chose avec pr-remplissage du sujet du message et du texte. Exemple avec le texte "Blablabla":
28
Balises HTML
1. Les balises bloc
Titre hirarchique <h1> <h6>
Affiche en caractres gras le titre contenu dans la balise. La balise <h1> correspond aux titres de niveau 1. La taille des polices par dfaut, affecte automatiquement par le navigateur, diminue quand lindice augmente. Exemple : <h1>Titre principal</h1>.
<p>Texte</p>
Paragraphe
Balise gnrique utilise pour marquer lunit smantique dun texte ou pour sa mise en page par CSS
<hr />
Filet horizontal
Tableau
Quadrillage visible par la mention de border= dans la balise d'ouverture du tableau. "paisseur" contient l'paisseur de la bordure extrieure en nombre de pixels
Listes puces <ul> <li>Texte 1</li> <li>Texte 2</li> </ul>
29
Liste ordonne
Valeurs donnes "Type" a = liste alphabtique minuscules, A = " alphabtique majuscules, i = chiffres romains minuscules, I = chiffres romains majuscules.
Citation
<blockquote>Texte</blockquote>
Corps du document
Les proprits CSS affectes cette balise dfinissent les caractristiques gnrales du document
Saut de ligne
Renforcement
<strong> </strong>
Emphase
<em> </em>
Regroupe au fil du texte des lments ayant une unit smantique. Correspond la balise bloc <div>
<img src=nom.format alt=lgende/>
Les formats de fichier dimage reconnus par tous les navigateurs sont GIF, JPEG et PNG. Le texte alternatif pour malvoyants ou navigateurs en mode texte est obligatoire en XHTML
30
Proprits CSS
1. Marges
Marges externes = margin et marges internes = padding. La syntaxe est similaire:
margin-x
Valeurs donnes x :
top = marge suprieure. Valeur numrique, % ou auto. right = marge droite. Valeur numrique, % ou auto. bottom = marge infrieure. Valeur numrique, % ou auto. left = marge droite. Valeur numrique, % ou auto.
margin
Notation globale
Les 4 valeurs sont toujours sous la forme top right bottom left et toujours dans cet ordre.
Type de positionnement
absolute = position mesure partir des bords de l'lment parent; peut dfiler. fixed4 = position mesure partir du bord de l'lment parent; fixe lors du dfilement. relative = position relative mesure partir de la position normale de l'lment proprement dit. static = Dans le flux normal (rglage par dfaut).
valeur numrique
Plac droite du conteneur valeur numrique Plac en bas du conteneur Plac gauche du conteneur valeur numrique valeur numrique
31
Largeur du bloc Largeur minimale du bloc Largeur maximale du bloc Hauteur du bloc Hauteur minimale du bloc Hauteur maximale du bloc
valeur numrique ou auto (par dfaut) valeur numrique valeur numrique, utiliser overflow valeur numrique ou auto (par dfaut) valeur numrique valeur numrique, utiliser overflow
visible = Augmentation de la Comportement quand le contenu dpasse la taille du taille du conteneur pour rendre visible tout le contenu conteneur hidden = Le contenu sera coup s'il dpasse les limites. scroll = Le navigateur propose des barres de dfilement. auto = Le navigateur dcide de la stratgie en cas de dpassement de taille. left = L'lment est gauche du conteneur et entour par llment suivant right = L'lment est droite du conteneur et entour par llment suivant none = L'lment ne sera pas entour (rglage normal).
float
Positionnement flottant
clear
left = poursuite dessous suite float : left. right = la poursuite dessous suite float : right. both = poursuite dessous aprs float : left et float : right. none = pas deffet (rglage normal).
display
block = impose laffichage en mode bloc - l'lment cre un nouvelle ligne. inline = impose l'affichage enligne none = l'lment n'est pas affich et noccupe aucun espace. hidden = Le contenu de l'lment est cach. visible = Le contenu de l'lment est affich (rglage normal).
visibility
32
3. Alignement de texte
text-indent line-height
valeur numrique (px, cm, etc) Si % est utilis, il est relatif la taille de la police
top aligner en haut, middle aligner au milieu, bottom aligner en bas. sub = mettre en indice (taille de police non rduite). super = mettre en exposant (taille police non rduite). text-top = aligner sur le bord suprieur de l'espace disponible. text-bottom = aligner sur le bord infrieur de l'espace disponible. left (rglage par dfaut), center, right , justify (texte justifi).
vertical-align
Alignement vertical
text-align
Alignement horizontal
4. Formatage dcriture
font-size
Taille de la police
xx-small, x-small, small, medium, large, x-large, xxlarge, larger, smaller, ou taille dfinie (px, cm, mm, pt, %) serif, sans-serif, cursive, fantasy, monospace, ou nom de la police ( Arial, Verdana, Times, etc...) normal, bold, bolder, lighter, ou valeur numrique (de 100 900 par tranche de 100) normal, italic, oblique normal, small-caps
font-family
Type de police
font-weight
Poids de la police
font-family, font-style, fontNotation globale pour les caractristiques de la police variant, font-size, font-weight sont nots par leurs valeurs spares par des espaces. Exemple : font:Times 13px bold;
33
color
nom standard ou valeur hexadcimale de la couleur underline = soulign. overline = ligne au dessus. line-through = barr. blink = clignotant. none = normal. capitalize = dbut des mots en majuscules. uppercase = tout en majuscules. lowercase = tout en minuscules. none = normal. normal (par dfaut) ou valeur numrique. Les % sont interdits. normal (par dfaut) ou valeur numrique. Les % sont interdits.
textdecoration
text-transform
Casse du texte
letter-spacing
word-spacing
5. Bordures
border-style
Style de la bordure
none, dotted, dashed, solid, double, groove, ridge, inset, outset. thin, medium, thick. Nom ou valeur hexadcimale de la couleur. border-style, border-width et border-color sont nots par leurs valeurs spares par des espaces. Exemple : border : solid 3px #FFCC99;
border-width border-color
border
6. Arrires-plans
backgroundcolor backgroundimage backgroundrepeat
nom standard ou valeur hexadcimale de la couleur Cible ou adresse web dune image gif ou jpeg . repeat = rpter (rglage par dfaut) repeat-x = rpter en "ligne. repeat-y = rpter en "colonne" no-repeat = image unique.
34
backgroundattachment
Effet de filigrane
scroll = dfile avec le texte (rglage par dfaut) fixed = l'image d'arrire-plan reste fixe. top = align en haut. center = centrage horizontal. middle = milieu vertical. bottom = align en bas. left = align gauche. right = = align droite. background-image, backgroundrepeat, background-attachment et background-position sont nots par leurs valeurs spares par des espaces. Exemple : background : URL(fond.gif) repeat-x fixed;
backgroundposition
Position darrre-plan
background
Type de reprsentation
inside
= sans retrait.
list-styleimage
Puces personnalises
35
list-style
Notation globale
list-style-type, list-styleposition et list-style-imgage sont nots par leurs valeurs spares par des espaces. Exemple : list-style:lower-roman inside;
left = gauche du tableau. right = droite du tableau. fixed = Largeur fixe. Le contenu est tronqu sil ne tient pas dans une cellule. auto = Largeur ajuste au contenu des cellules (par dfaut). separate = de tableau collapse = de tableau bordures de cellules distinctes. bordures de cellules confondues.
table-layout
bordercollapse
border-spacing
Mention numrique
empty-cells
Affichage de cellules vides show = Les bordures des cellules vides sont affiches. (lment HTML table)
collapse = Les bordures des cellules vides sont caches (rglage par dfaut).
36
Glossaire Internet
Adresse lectronique Equivalent de l'adresse postale pour la messagerie lectronique. Sexprime sous la forme :
nom@fournisseur.domaine
Adresse IP Adresse affecte tout quipement informatique connect un rseau qui utilise le protocole TCP/IP (cas dInternet). Sexprime sous la forme : 195.154.194.004. ADSL (Asynchrounous Digital Suscriber Line). Technologie permettant la transmission de donnes haut dbit jusqu 24Mbit/s sur une ligne tlphonique classique (au lieu du bas dbit limit 56Kbit/s). Le dbit dans le sens aval (du serveur vers lordinateur) est plus lev que celui dans le sens amont (de lordinateur vers le serveur). Le dbit diminue avec laugmentation de la distance entre lutilisateur et le central tlphonique. Le tlphone reste libre durant la connexion. Administration Aucun ordinateur ne fonctionne tout seul... il faut au minimum assurer les dpannages lorsque cela est ncessaire, surveiller que tout fonctionne correctement, que le disque dur nest pas plein, que de mchants pirates ne sattaquent pas aux fichiers, etc... Cest le rle de ladministrateur systme. Ladministrateur du serveur web (la mme personne pour les sites de petite taille) se limite la surveillance du logiciel serveur. Apache Ce nest pas un indien ! Cest le logiciel serveur le plus rpandu sur Internet (depuis une bonne dizaine dannes). Logiciel libre, Apache a beaucoup contribu lessor dInternet. Balise Mots spciaux du langage HTML qui donnent au navigateur des instructions de mise en forme du texte. Par exemple, pour mettre un texte en gras, il suffit dcrire : <strong> est une balise. "<strong>le texte</strong>". Base de donnes Une base de donnes est un programme qui ordonne des donnes (textes, tableaux de chiffres, photos, ..) de manire structure (titres dun ct, articles de lautre) afin dy accder rapidement. Un grand nombre dhbergeurs proposent la base de donnes Mysql. Blog Un blog (contraction de Binary Log, littralement journal numrique) est un site web permettant une personne dcrire et mettre en ligne son journal, tout en prservant des fonctions dinteractivit : chacun peut commenter le blog. Des logiciels spcialiss permettent de saffranchir de toute contrainte technique. Browser Butineur voir navigateur. 37
CMS (Content Management System) Un CMS (en franais Logiciel de Gestion de Contenu) est un logiciel permettant de grer simplement le "contenu" de votre site web (par opposition la prsentation). SPIP est une sorte de CMS. Code, code source Dsignation dinstructions rdiges en langage informatique connu dun logiciel. Lcriture dune page web en langage HTML produit le code reconnu par les navigateurs. On parle de code source de la page. Courriel, Courrier lectronique Courriel est le terme officiel, synonyme de courrier lectronique. Le courrier lectronique (change de messages entre personnes, comparable au courrier postal) est une des applications les plus anciennes dInternet, et sans doute la plus utile. (voir aussi e-mail) CSS Le langage HTML dcrit la structure du texte (titres, paragraphes, etc). Le langage CSS le complmente en dcrivant des feuilles de style indiquant la manire dcrire les titres, les paragraphes et comment effectuer la mise en page. DNS (Domain Name Server) Systme d'annuaire distribu sur l'Internet qui donne ladresse IP correspondant nom de domaine (tf1.fr par exemple) et rciproquement. Easyphp Cest un "pack" logiciel sous Windows comprenant trois logiciels libres : Apache, Php et Mysql. Lensemble de ces trois logiciels vous permet de raliser une maquette de site web, sur votre PC, que vous pourrez ensuite envoyer sur la machine de votre hbergeur. Flash Ne souriez pas pour la photo : Flash est tout simplement le nom dun logiciel informatique (dont la licence cote relativement cher), permettant de raliser des animations. Attention, linternaute ne dispose pas obligatoirement de Flash : pensez donc donner la possibilit de "contourner" le code Flash pour consulter le site. Forum web Cest comme un grand espace daffichage dans un lieu public ; chacun peut lire, crire ce quil veut et participer la conversation Quand lespace vient manquer, les messages les plus anciens sont effacs pour laisser de la place aux nouveaux. Fournisseur daccs Comme son nom lindique, il fournit un accs Internet, via une ligne tlphonique, le cble, ou tout autre moyen de transmission. Ftp (File Transfer Protocol) Protocole de communication dfinissant une manire dchanger des fichiers en utilisant Internet. Un logiciel FTP sera utilis pour envoyer les pages dun site web sur un serveur de lhbergeur. 38
Groupe de news Imaginez une bote postale, qui serait mise en place dans le bureau de poste de votre quartier. Vous crivez un message, vous le mettez dans la bote, et aussitt celui-ci est photocopi et envoy tous les bureaux de postes de toutes les villes du monde. Dautre part, chaque message reu (quil vienne dun habitant du quartier ou quil ait t envoy par un autre bureau de poste) est affich dans le bureau de poste, de sorte que vous pouvez lire tous les messages reus... jusqu ce que le tableau daffichage soit plein (les employs des PTT retirent alors les messages les plus anciens). Chacun peut donc lire les discussions passant par ce service, et chacun peut y participer. Hbergement Si un internaute dit quil cherche tre hberg, cela ne veut pas forcment dire quil est la rue mais plutt quil recherche un serveur sur lequel il pourrait dposer ses pages html afin que celles-ci soient consultables sur lInternet. Hbergeur Socit ou organisme charg de mettre en ligne des sites Internet. Les pages html sont stockes sur des serveurs dont lhbergeur assure la maintenance, le dpannage et la scurit la fois matrielle et logicielle. Les tarifs dhbergement sont variables selon les exigences de service requises. HTML (HyperText Markup Language). Langage de balisage qui permet une prsentation agrable des textes et la navigation dans le texte et en dehors du texte par des liens (hyperliens ou liens hypertexte). Le html, "langage" au sens informatique du terme, sera interprt par un navigateur. Http Protocole de communication dfinissant la manire de transfrer des pages html. Lorsquune adresse Internet commence par le mot http://, cela signifie quil sagit dune page web. Internet Littralement ce qui relie les rseaux , Internet est le nom donn au super-rseau de cbles et de fibres optiques qui permet de relier entre eux des ordinateurs ou d'autres rseaux distants et diffrents dans le monde entier Ce rseau universel est la proprit collective de ses utilisateurs. Il permet de relier entre eux divers rseaux humains, rseaux de relations, communauts dides. On parle aujourdhui de communauts virtuelles et de communauts lectroniques... Internet Explorer Logiciel de navigation sur Internet labor par Microsoft. Il existe de nombreux autres navigateurs (voir Mozilla, Firefox et Opra). IP (Internet Protocol) Cest le protocole standard universel de transmission des donnes sur le rseau Internet. On parle plus frquemment de protocole TCP/IP. javascript Javascript est un "langage de scripts" qui sexcute sur votre PC. Il est surtout utilis pour donner aux pages web plus de vie ou plus dinteractivit (par exemple en activant des images ou des sons lorsque la souris survole tel ou tel lment).
39
Lien hypertexte Les liens hypertextes dune page web apparaissent gnralement en lettres bleu soulign. Lutilisateur pointe sa souris sur ce lien, clique, et accde directement la page de destination indique. Cette nouvelle page peut se trouver sur le mme serveur, ou tre sur une machine situe des milliers de km de l. Linux Systme dexploitation gratuit, et de ce fait seul vrai rival de Windows . Liste de diffusion Imaginez un service des PTT au fonctionnement suivant: chaque courrier qui lui est adress est photocopie et renvoye toutes les personnes figurant sur une liste (les abonns de cette liste). Trs pratique pour la communiquer au sein dun groupe, le procd serait assez lourd. Remplacez le terme courrier par courriel, et ce service des PTT par un logiciel et voila le mode de fonctionnement des listes de diffusion. Logiciel libre Un logiciel libre donne aux termes de sa licence 4 droits fondamentaux lutilisateur; ce dernier peut : utiliser le logiciel sans aucune restriction (certains logiciels commerciaux vous imposent de payer pour utiliser le logiciel durant une dure limite). analyser le code du logiciel, afin de comprendre comment il marche (et par exemple de vrifier quil ne fait pas doprations non visibles). redistribuer des copies du logiciel (ventuellement, revendre ces copies, par exemple avec un livre qui en explique le fonctionnement). modifier le code du logiciel (il est techniquement possible de lempcher) et redistribuer ses modifications (ce qui permet dassurer un dveloppement collectif). Avec sa dmarche cratrice collective, le logiciel libre offre son utilisateur une relle libert et la possibilit dtre acteur des volutions. Mail, e-mail voir courrier lectronique. Modrateur Concernant une liste de diffusion, un groupe de news ou un forum web, le modrateur est une personne qui reoit tous les messages (le pauvre...) et prend la dcision de publier ou non chaque message. Il peut liminer les messages hors sujet ou personnels, tout ce qui nuit ce genre de dbats, et peut amener les lecteurs srieux sen dtourner. Moteur de recherche Le nombre de sites sur Internet est extrmement lev, la quantit dinformation est donc norme, mais elle nest absolument pas structure. Les moteurs de recherche permettent de rechercher les sites consacrs un thme prcis (recherche par mots-cls). Mozilla, Firefox voir Internet Explorer. Multimdia Internet est multimedia, car il est possible de faire figurer sur une page html aussi bien du texte que des images ou des sons. 40
Mysql Voir Base de donnes Navigateur Pour surfer sur Internet (passer dun serveur lautre en cliquant sur les liens hypertextes), il faut utiliser un programme informatique : cest le navigateur (appel aussi browser ou butineur). Nom de domaine Nom apparaissant dans une adresse Internet : le-pic.org, sncf.fr sont des noms de domaine. OpenOffice Une suite bureautique, un logiciel libre qui offre quasiment les mmes fonctionnalits que Microsoft Word, Excel et Powerpoint. En plus, OpenOffice permet de gnrer trs simplement des fichiers au format pdf. Opera Voir Internet Explorer. Page html Page crite en langage html. Chaque page possde une URL (une adresse) qui peut tre rfrence par un lien hypertexte. pdf Un format de fichiers, qui garantit la reproduction du document lidentique sur les crans de tous formats (contrairement une page html). La taille dun document au format pdf est plus rduite que sous les formats issus des traitements de texte : laffichage sera plus rapide. Enfin, un fichier pdf ne transporte pas de virus et ne peut pas tre modifi. La suite bureautique OpenOffice permet de gnrer des fichiers pdf de manire trs simple Php Php est un "langage de scripts" qui sexcute sur le serveur. Il permet de raliser aussi bien de petits outils pour simplifier la gestion du site, que des logiciels trs puissants. SPIP est crit en Php. Pointeur voir lien hypertexte. Protocole de communication Ensemble des rgles auxquelles doit obir tout programme ayant pour objet dtablir une communication. Sur Internet, ces protocoles sont publics (on dit aussi ouverts) ce qui permet tout un chacun daccder toutes les informations disponibles mais aussi de raliser ses propres publications. Registrar En franais : bureau denregistrement de nom de domaine. Une socit qui soccupe de rserver et de publier les donnes de DNS correspondant votre domaine. En France, Gandi est un de ces bureaux. Serveur Systme informatique (logiciel et machine) destin fournir des services des utilisateurs connects et, par extension, organisme qui exploite un tel systme. 41
Les pages html sont places sur des serveurs pour tre consultables sur le web. On peut avoir son propre serveur ou choisir dutiliser les services (gratuits ou non) dun hbergeur. SPIP Un CMS (voir ce mot) simple demploi, pris du monde associatif et du monde professionnel. SPIP est un logiciel libre, qui a besoin pour fonctionner des logiciels Php et Mysql prsents chez la plupart des hbergeurs (mais pas tous. Il faudra vrifier si votre hbergeur est dans ce cas). Pour mettre au point votre site vous pouvez aussi installer SPIP sur votre PC sous Windows (grce au logiciel easyphp), ou sur votre C sous Linux ou votre Mac sous Mac OS X. Squelette Dans un site sous SPIP, se dit des fichiers (une vingtaine environ) qui permettent de dfinir la mise en pages du site, les facilits de navigation, la disposition des rubriques, etc... Un fichier CSS est toujours associ au squelette, il permet en particulier de slectionner les polices, et les couleurs qui vont habiller le squelette. Syndication Deux sites web syndiqus fonctionnent en tandem : les mises jour de lun sont automatiquement refltes par lautre. Grce la syndication, une association qui possde plusieurs sites rgionaux, peut obtenir dafficher en rgion, sans intervention des webmestres, des informations nationales parfaitement jour. Tag voir balise. TCP/IP voir IP Tlchargement Transfert de programmes ou de donnes dun ordinateur vers un autre. Pour un internaute, le tlchargement est le plus souvent un transfert vers son propre ordinateur depuis un serveur (sens aval), ou parfois depuis lordinateur vers le serveur (sens amont). URL Adresse dune page html par exemple, ou de tout autre objet (par exemple, une adresse lectronique est une URL. Validation html ou Xhtml Si vous voulez que votre page html soit correctement reprsente sur tous les navigateurs (et pas seulement sur le vtre), il est important quelle soit valide "conforme aux spcifications" du langage html. Dans le cas contraire, vous laissez le champ libre au navigateur, qui interprtera le code sa faon... et les diffrents navigateurs nont pas la mme manire ! Web En anglais web, est labrg de World Wide Web (toile daraigne mondiale). La plupart des adresses Internet commencent par les initiales de ce mot : www. La multitude des liens hypertextes qui permettent, dun clic de souris, de passer dune page html lautre voque les fils de la toile d'araigne. 42
Webmaster, webmestre Personne qui assure la maintenance dun site Internet. Ladresse de courriel du webmestre figure le plus souvent sur les pages dun site pour servir de contact aux internautes qui ont des demandes, des observations ou des suggestions faire. W3C (World Web Consortium). Organisme qui dfinit les normes des langages HTML et CSS. Wiki Un wiki est un site web que lon construit " plusieurs" : toutes les personnes ayant accs au wiki (cest--dire, bien souvent tout le monde) peuvent crire des articles, et ainsi faire vivre et grossir le site. Techniquement, Wikipedia est construit autour dun wiki. Wikipedia Une encyclopdie libre, ce qui signifie que chacun peut participer llaboration de cette encyclopdie, et ainsi partager ses connaissances. WYSIWYG Acronyme de What You See Is What You Get. Un diteur HTML est de type WYSIWYG lorsque le source html reflte exactement ce qui apparat lcran de composition de la page. Ces logiciels facilitent la cration de pages web (pas de ncessit de connatre le langage HTML) mais produisent souvent un code de qualit mdiocre. Xhtml (eXtended HTML) Dsigne le langage HTML tendu (voir Html), conforme aux dernires spcifications du W3C.
43
44
ß  ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ  Ž   ‘ ’ “ ” • – — ˜ ™ š › œ  ž Ÿ  
ß
ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿
ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® &masr; ° ± ² ³ ´ µ ¶ · ¸ &supl; º » ¼ ½ ¾ ¿
&Oelig;
Espace
œ
€ €
45
Ces feuillets sont largement inspirs : de plusieurs sites consacrs au sujet : http://www.alsacreations.com/ http://fr.selfhtml.org tutoriels CSS. rfrences du HTML et des CSS.
46