Css

Initiation la fabrication de sites web
Table des matires

Plantons le dcor ! ................................................................................................. 1 Concepts de base du HTML.................................................................................. 2
1. 2. 3. 1. 2. 3. 1. 2. Les liens hypertexte........................................................................................................ 2 Les balises ...................................................................................................................... 2 Ossature dune page HTML........................................................................................... 3 Les balises indispensables.............................................................................................. 6 Balises bloc, balises en ligne.......................................................................................... 9 Hirarchie et proprits des blocs dinformations........................................................ 10
Une premire page web......................................................................................... 5
Mise en page et feuilles de style.......................................................................... 11

Structure dune feuille de style..................................................................................... 11 Units de mesures et couleurs ...................................................................................... 13 2.1 Mesures absolues.................................................................................................. 13 2.2 Mesures relatives.................................................................................................. 13 2.3 Indications de couleurs......................................................................................... 13 3. Positionnement des blocs ............................................................................................. 14 3.1. Marges externes, marges internes et dimensions ................................................. 14 3.2. Positionnement flottant ........................................................................................ 17 3.3. Positions absolues, fixes et relatives .................................................................... 18
Ecriture des pages dun site................................................................................. 19

1. 2. 1. 2. Matriel ncessaire....................................................................................................... 19 Etapes de la fabrication dun site ................................................................................. 19 Un menu vertical .......................................................................................................... 20 Un menu horizontal...................................................................................................... 22 Liens internes une page ................................................................................................. 25 Liens vers une page diffrente ......................................................................................... 25 Liens externes au site ....................................................................................................... 26 Liens e-mail...................................................................................................................... 26
Crer des menus simples ..................................................................................... 20
Matriser les liens ................................................................................................ 25
Balises HTML ..................................................................................................... 27

1. 2. 1. 2. 3. 4. 5. 6. 7. 8. Les balises bloc ............................................................................................................ 27 Les balises en ligne ...................................................................................................... 28 Marges .......................................................................................................................... 29 Positionnement des blocs ............................................................................................. 29 Alignement de texte ..................................................................................................... 30 Formatage dcriture .................................................................................................... 31 Bordures ....................................................................................................................... 32 Arrires-plans ............................................................................................................... 32 Formatage des listes ..................................................................................................... 33 Formatage des tableaux ................................................................................................ 34
Proprits CSS..................................................................................................... 29
Glossaire Internet ................................................................................................ 35 Codification des caractres spciaux................................................................... 42
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.
Le metteur en scne / Le public /
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 .htm ou .html .
Concepts de base du HTML

Le langage dcriture des pages web permet dimplanter des liens vers d'autres pages, de dcrire la forme du texte (gras, italique, polices, ...), comme les premiers traitements de texte et dinclure des images fixes ou animes, du son , de la vido et mme des programmes interactifs ( l'aide de Javascript). Le langage HTML est galement utilis pour fournir une interface aux CD ROM multimdia et aux DVD ROM.
1. Les liens hypertexte

Ils constituent la base de la navigation sur les sites de la toile mondiale. Un lien hypertexte peut tre constitu dun mot (ou dun ensemble de mots) gnralement soulign qui ragit avec la souris et renvoie automatiquement vers un endroit appel cible qui traite le sujet . La cible du lien peut se situer dans la page courante, dans une autre page du mme site ou dans un site diffrent. Un dictionnaire sur le web illustre bien la notion de lien hypertexte :
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 autours 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. Avec Internet Explorer le menu Affichage puis loption Source, rvle le code HTML de la page courante.
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"> Balise d'ouverture
Fabriquer un site web

texte Balise de fermeture
</p>
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
3. Ossature dune page HTML

<!DOCTYPE >  <html> <head>



</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.
Un exemple dcriture incorrecte :

<html> <body> ............ </html> </body>
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 /> :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
prcise le jeu de caractres utiliss pour laffichage des textes.

<meta name="keywords" content="festival, gospel, midi-pyrnes, france" />
numre des mots cls judicieux permettant aux moteurs de recherche (Google et autres) de rfrencer votre site. Le corps du document (<body>) C'est ici que se trouvent les donnes afficher (titres, textes, images, tableaux, liens...)
Une premire page web

Pour crire le code HTML un diteur lmentaire tel que le Bloc notes sous Windows convient. Exemple de page minimale (sans doctype ni balises meta) :
<html> <head> <title> Ma premire page</title> <body> Voici ma premire page web! </body> </html> </head>
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.htm". 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.
1. Les balises indispensables

La balise p Elle indique un paragraphe (au sens littraire) et provoque un saut de ligne. Exemple:
<p>Le premier paragraphe </p> <p>Le deuxime paragraphe </p> <p>Le troisime paragraphe</p>
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:
<p> /* Dbut du paragraphe */ La premire phrase <br /> /* ligne suivante */ La deuxime <br /> /* ligne suivante */ La troisime </p> /* Fin du paragraphe */ Le paragraphe est fini !
Rsultat :
La premire phrase La deuxime La troisime Le paragraphe est fini !
La balise a Indique un lien hypertexte Exemple:

Visitez notre <a href="page.html" title="Nos activits">Page web</a>
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 autre 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.
La balise img Insertion dune image Exemple:

<p> Les singes et les hommes <img src="singes.jpg" alt="photo de singes" /> </p>
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.
La balise ul Dlimite une liste puces
Exemple:
<p>Voici une liste :</p> <ul> <li> Rubrique1 </li> <li> Rubrique2 </li> <li> Rubrique3 </li> <li> Rubrique4 </li> </ul>
Rsultat :
Voici une liste: Rubrique1 Rubrique2 Rubrique3 Rubrique4
Les items de la liste sont placs lintrieur de balises <li> et saffichent prcds dune puce.
La balise 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
Un autre titre de niveau 2
La balise strong Caractres gras Exemple:

<p> Il faut dfinir ce que sont <strong>les balises</strong> </p>
Rsultat :
Il faut dfinir ce que sont les balises
La balise em Caractres obliques Exemple:

<p> Nous devrons revenir sur <em>les liens hypertexte</em> car ils sont la base de la navigation sur Internet. </p>
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.
2. Balises bloc, balises en ligne

Les balises possdent deux types de comportement diffrent ; Les balises "bloc" qui servent distinguer les parties entires de texte, comme des titres, des paragraphes, des listes, des divisions (h1 h6, p, ul, div). A laffichage, les "blocs" se placent toujours par dfaut l'un en dessous de l'autre (comme le ferait un retour chariot). Les balises "en ligne" insres dans le texte pour l'enrichir comme un lien hypertexte, italique, gras, image (a, em, strong, img). Elles interviennent dans le droulement naturel du texte sans provoquer de saut de ligne.
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. Une balise en ligne ne peut contenir quune (ou plusieurs autres) balise en ligne. Exemples : <b> <div> blabla </div> </b> <div> <b> blabla </b> </div> est incorrect est correct
3. Hirarchie et proprits des blocs dinformations

Un document HTML est toujours compos de conteneurs. L'imbrication des diffrents conteneurs compose une structure hirarchique semblable une famille et conduit une hrdit : la transmission des caractristiques dun conteneur aux blocs quil contient. Voici la dfinition des termes qui seront employs : Un bloc contenu directement dans un conteneur est dit Enfant de ce conteneur. Le bloc contenant directement un bloc contenu est dit Parent de ce bloc. Un lment Anctre est un lment bloc qui contient un autre lment ou une hirarchie d'lments. Exemple : llment body est lAnctre de tous les lments dune page. A dfaut de nouvelles proprits dfinies pour un de ces blocs, tous les lments dune page hritent des proprits du bloc body. Un bloc Parent est lAnctre immdiat du bloc quil contient directement. Les lments ayant le mme lment Parent sont appels Frres. Tout bloc insr dans un conteneur hrite, par dfaut, des proprits dfinies pour le conteneur.
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. 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
Mise en page et feuilles de style

Dans la construction dun site web, lutilisation des feuilles de styles en cascade, appeles communment CSS (Cascading Style Sheets), permet de sparer le fond de la forme. Le source HTML contient uniquement le texte et les images structurs par les balises. Si le code est bien crit, un site doit pouvoir tre consult sans avoir de feuilles de styles (une vrification prliminaire effectuer). Les CSS associes au code source donnent toutes les informations de prsentation utilises dans les pages : police utilises dans les titres, les blocs dinformation, les listes couleurs de fond ou du texte bordures de texte positionnement des blocs, marges internes et externes etc
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>
Le fichier CSS sappelle ici "habillage.css"
1. Structure dune feuille de style

Exemple :
p { font-size : 14pt ; }
est llment de la feuille de style. est une proprit de la feuille de style. est la valeur affecte la proprit font-size.
p font-size 14pt
Une feuille de style peut dfinir autant de couples proprit : valeur que llment 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).
11
Des commentaires peuvent tre insrs sous la forme :

/* Ceci est un commentaire*/
On distingue 3 catgories de feuilles de style :
Les feuilles de styles globales :

Le nom dlment appartient aux balises bloc du HTML (h1, p, div, td, etc). Exemple : Rsultat : Cette feuille de style va affecter la couleur verte tous les paragraphes de la page. p { color : green ; }
Les feuilles de style indpendantes :

Le nom dlment, indpendant des balises bloc du HTML, est de la forme #nom . Ce nom, choisi librement, affectera des caractristiques individuelles un bloc unique. Une dnomination significative est privilgier. Exemple : Ct HTML :
<div id="entete">...</div>
#entete { font-size : 14pt ; }
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.
Les dfinitions de classes :

Ces feuilles de style sont les cousines des feuilles de style indpendantes ; seul le nom de llment est de forme diffrente .nom. A la diffrence dune feuille de style indpendante, une classe pourra affecter des caractristiques identiques plusieurs blocs. Exemple : Ct HTML :
<div class="encart">...</div>
.encart { border : solid ; }
Rsultat : Le texte plac lintrieur de ce conteneur sera entour dune bordure continue. Tous les blocs div de la page appartenant la classe "encart" seront entours dune bordure continue. 12
2. Units de mesures et couleurs

Le signe dcimal des units de mesures est le point. 2.1 Mesures absolues
pt pc px 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)
2.3
Indications de couleurs 16,7 millions de couleurs sont disponibles (2563):

#XXXXXX rgb(R,G,B) rgb(%,%,%) Couleur (16 noms standards)
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%)
13
3. Positionnement des blocs

3.1. Marges externes, marges internes et dimensions Sans dfinition explicite du positionnement, un bloc se place par dfaut en haut gauche de son conteneur (le body, un autre bloc,...) et occupe toute la largeur de ce conteneur. Ses frres se placeront en-dessous. Les proprits de marges permettent de positionner un bloc au sein de son parent.
margin-top padding-left
padding-top
margin-left
blablablablablabla blablablablablabla blablablablablabla blablablablablabla blablablablablabla blablablablablabla bla
margin-right
padding-right padding-bottom margin-bottom
Le terme margin dsigne les marges externes dun bloc

Le bloc en jaune reoit des marges externes (ici par rapport lcran) respectivement notes : - margin-top pour la marge externe suprieure - margin-right pour la marge externe droite - margin-bottom pour la marge externe infrieure - margin-left pour la marge externe gauche 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 simplifie */ #comment{ margin: 20px,30px,30px,20px; } /* les 4 valeurs sont toujours dans lordre top, right, bottom, left */
ou bien
14
En notation simplifie : 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 et en bas et 30px droite et gauche et 10px en bas.
margin : 20px ;
Le terme padding dsigne les marges internes dun bloc

Le padding du bloc en jaune dtermine lespace intrieur utilisable pour afficher des informations. Les marges internes sont notes : - padding-top pour la marge interne suprieure - padding-right pour la marge interne droite - padding-bottom pour la marge interne infrieure - padding-left pour la marge interne gauche Le notation simplifie utilisable avec le padding obit aux mmes conventions que celle du margin.
Les termes width et height dsignent les dimensions dun bloc

width height pour la largeur du bloc pour la hauteur du bloc
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
15
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.
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
Trois blocs cte cte spars par un espace : Partie HTML:

<div class="bloc1">bloc1</div> <div class="bloc2">bloc2</div> <div class="bloc3">bloc3</div>
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
16
Un bloc contenu dans un autre bloc: Partie HTML:

<div class="conteneur"> <div class="bloc">bloc</div> </div> Conteneur
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; }
17
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"1 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.
Attention "fixed" ne fonctionne ni avec IE6 ni avec IE7
18
Ecriture des pages dun site

1. Matriel ncessaire
Le matriel minimum pour crire le code HTML et les CSS est un diteur lmentaire tel que le Bloc notes sous Windows. Cependant, lcriture des feuilles de style sous Windows est grandement facilite par lditeur de CSS TopStyle (gratuit): indentation automatique des dfinitions de style aide lcriture des couples proprits-valeurs aide au choix des nuances de couleurs vrification de la syntaxe.
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, Web Developer, extension de Firefox, contient une quantit doutils prcieux pour la fabrication de sites. Le passage du site en ligne se fera en utilisant un logiciel FTP (File Transfer Protocol) pour copier les fichiers du site ( .htm , .css et les images .gif , .png , .jpg) sur le serveur dun hbergeur. Le logiciel FileZilla (gratuit) ou tout autre logiciel FTP remplira cette fonction.
2. Etapes de la fabrication dun site

Dfinir larchitecture du site (papier, crayon, et cogitations). Transcrire en HTML, sans aucune indication de mise en forme, le contenu dune page. Enregistrer la page sur son ordinateur (extension .htm ou .html). La page daccueil se nomme gnralement index.htm. Ecrire les feuilles de style ncessaires la mise en forme du source HTML. Enregistrer le fichier sur son ordinateur par exemple habillage.css. Etablir dans le bloc en-tte head du HTML le lien avec le fichier CSS. Dans notre cas :
<head> ........ <link rel="stylesheet" href="habillage.css" type="text/css" /> </head>
Essayer la page sur un navigateur en double-cliquant sur index.htm. Transfrer lensemble des pages du site sur le serveur dun hbergeur. A lissu du transfert, le site est consultable en ligne.
19
Crer des menus simples

Il n'existe pas de balise spcifique pour dsigner un ensemble de liens. La solution la plus frquente consiste traiter le menu de navigation comme une liste de liens, en utilisant la balise <ul> correspondant aux listes non ordonnes. Exemple, pour un menu comportant 4 items:
<ul id="navigation"> <li><a href="#" title="aller <li><a href="#" title="aller <li><a href="#" title="aller <li><a href="#" title="aller </ul> la la la la section section section section 1">Section1</a></li> 2">Section2</a></li> 3">Section3</a></li> 4">Section4</a></li>
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 */
Rsultat lcran: Section1 Section2 Section3 Section4
20
La suppression des marges et des padding 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; }
/* bordure pour chaque ligne */ /* marge infrieure " " " */
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 */
21
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 ; }
22
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 ; }
23
Suppression des marges, padding et puces (toujours pareil )

#navigation li { float: left ; width: 150px ; border: 1px solid #600 ; margin-right: 1px ; color: #fff ; background: #c00 ; }
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, menu Affichage, option Modifier la taille du texte) 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.
24
Matriser les liens

Liens internes une page Les liens internes permettent au visiteur de se dplacer l'intrieur d'une page sans tre oblig de faire dfiler la fentre (scrolling). Le visiteur va donc cliquer sur un lien et il sera amen vers la cible de ce lien. Pour cela deux tapes sont ncessaires: Dfinir la cible d'un lien (l'ancre) Exemple:2 <a name="debut"></a> Le nom "debut" suffit caractriser la cible. Il ne doit contenir ni espaces, ni accents, ni caractres spciaux. Associer un lien lancre dfinie Exemple: <a href="#debut">Retour au dbut</a> Liens vers une page diffrente Cest lemploi classique pour assurer la navigation lintrieur dun site. Chaque item du menu est assorti dun lien vers la page atteindre. La page est situe dans le mme rpertoire Exemple :
<a href="nom.htm">Cliquez ici</a>
La page est situe dans un rpertoire diffrent Exemple :
<a href="sujet/nom.htm">Cliquez ici</a>
Lien vers une ancre d'une autre page et du mme rpertoire : Larrive se fait en un endroit prcis dune page diffrente Exemple :
<a href="nom.htm#debut">Cliquez ici</a>
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 :
<a href="sujet/nom.htm#debut">Cliquez ici</a>
On dfinit plus commodment la cible dun lien en utilisant le nom dlment dune balise : Ex :<div id="article"> ou <h1 id="titre1">. (voir Structure dune feuille de style)
25
Liens externes au site La syntaxe de la valeur affecte lattribut href varie selon le protocole. Lien externe vers un site http Exemple :
<a href="http://www.site.com">Dcouvrez SITE</a>
Lien externe vers un serveur FTP (transfert de fichiers) : Exemple :
<a href="ftp://ftp.site.com">Transfert de fichiers</a>
Lien externe vers un fichier : Pour faire un tlchargement (fichier .exe ou .zip) Exemple :
<a href="util.exe">Cliquez pour tlcharger</a>
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":
<a href= "mailto:nom@fournisseur.com?subject=demande">Contact </a>
Mme chose avec pr-remplissage du sujet du message et du texte. Exemple avec le texte "Blablabla":
<a href= "mailto:nom@fournisseur.com?subject=demande&body=Blablabla"> Webmaster du site </a>
26
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
lment de bloc gnrique
<div> Bloc de texte </div>
Balise gnrique utilise pour marquer lunit smantique dun texte ou pour sa mise en page par CSS
<hr />
Filet horizontal
Trace une sparation sur toute la largeur disponible.

<table border="paisseur"> <caption> Titre du tableau </caption> <tr> < !1re ligne --> <th>cellule d'entte</th> <th>cellule d'entte</th> </tr> <tr> < !2me ligne --> <td> < !1re cellule --> Contenu de la premire cellule </td> <td> < !2me cellule --> Contenu de la deuxime cellule </td> </tr> <tr> < !3me ligne --> < !--Ici on place de mme les cellules de la 3me ligne du tableau--> </tr> </table>
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>
27
Liste ordonne
<ol type="Type"> <li>Texte 1</li> <li>Texte 2</li> </ol>
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
<body> Contenu du document </body>
Les proprits CSS affectes cette balise dfinissent les caractristiques gnrales du document
2. Les balises en ligne

Lien hypertexte <a href="page.html" title="Nos activits"> Page </a>. <br />
Saut de ligne
Renforcement
<strong> </strong>
Emphase
<em> </em>
lment en ligne gnrique
<span> Texte <span
Regroupe au fil du texte des lments ayant une unit smantique. Correspond la balise bloc <div>
<img src=nom.format alt=lgende/>
Insertion dune image
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
28
Proprits CSS
1. Marges
Marges externes = margin et marges internes = padding. La syntaxe est similaire:
margin-x
Marge externe en haut
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.
2. Positionnement des blocs

position
Type de positionnement
absolute = positionnement mesur partir des bords de l'lment parent; peut dfiler. fixed3 = positionnement mesur partir du bord de l'lment parent; fixe lors du dfilement. relative = positionnement relatif mesur partir de la position normale de l'lment proprement dit. static = Dans le flux normal (rglage par dfaut).
top left
Plac en haut du conteneur Plac gauche du conteneur Plac en bas du conteneur
valeur numrique valeur numrique
bottom right
valeur numrique
Plac droite du conteneur valeur numrique
position : fixed ne fonctionne pas sous IE6
29
width
Largeur du bloc Hauteur du bloc Action si le contenu dpasse la taille du conteneur
valeur numrique ou auto (par dfaut) valeur numrique ou auto (par dfaut) visible = Augmentation de la taille du conteneur pour rendre visible tout le contenu 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). 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).
height
overflow
float
Positionnement flottant
clear
Annule les effet du positionnement flottant
display
Changement de mode daffichage
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
Affichage avec rservation despace
3. Alignement de texte
text-indent line-height
Retrait de la 1re ligne Hauteur de ligne
valeur numrique (px, cm, etc) Si % est utilis, il est relatif la taille de la
30
relatif la taille de la police vertical-align
Alignement vertical
top aligner en haut, middle aligner au milieu, bottom aligner en bas. sub =mettre en indice (sans rduire la taille de la police). super = mettre en exposant (sans rduire la taille de la police). 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).
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-style font-variant font
style de la police Variante de la police
font-family, font-style, fontNotation globale des caractristiques de la police variant, font-size, font-weight sont nots par leurs valeurs spares par des espaces. Exemple : font:Times 13px bold; nom standard ou valeur hexadcimale de la couleur
color
Couleur du texte
31
textdecoration
Dcoration de texte
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.
text-transform
Casse du texte
letter-spacing
Espacement des lettres
word-spacing
Espacement des mots
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
Epaisseur de la bordure Couleur de la bordure Notation globale des caractristiques de la bordure
border
6. Arrires-plans
backgroundcolor backgroundimage backgroundrepeat
Couleur d'arrire-plan Image darrre-plan Rptition dune image
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 = ne pas rpter,
32
image unique. backgroundattachment
Effet de filigrane
scroll = dfile avec le texte (rglage par dfaut) fixed = l'image d'arrire-plan reste fixe.
backgroundposition
Position darrre-plan
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;
background
Notation globale des caractristiques de larrireplan
7. Formatage des listes

list-styletype
Type de reprsentation
Pour les listes numrotes (ol)

decimal = numrotation 1.,2.,3.,4. etc... lower-roman = numrotation i.,ii.,iii.,iv. etc... upper-roman = numrotation I.,II.,III.,IV. etc... lower-alpha = numrotation a.,b.,c.,d. etc... upper-alpha = numrotation A.,B.,C.,D. etc... lower-greek = numrotation grecque: ., ., ., . etc...
Listes non numrotes (ul)

disc = pour les listes ul: : rond plein comme puce. circle = pour les listes ul: puce ronde. square = pour les listes ul: puce rectangulaire. none = pas de puce, pas de numrotation. list-styleposition
Retrait des listes
inside = sans retrait. outside = avec retrait (rglage par dfaut). URL ou chemin daccs au
list-styleimage
Puces personnalises
fichier
33
image list-style
graphique cible (GIF ou JPEG) 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;
8. Formatage des tableaux

caption-side
Position d'un titre (lment HTML caption)
top = en haut du tableau. bottom = sous le tableau. 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
largeurs fixe/variable (lment HTML table)
bordercollapse
Modle de bordure (lment HTML table)
border-spacing
Espace entre bordures (lment HTML table)
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).
34
Glossaire Internet
Adresse lectronique Equivalent de l'adresse postale pour la messagerie lectronique. Sexprimer 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. 35
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. Groupe de news
36
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). Lien hypertexte 37
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.
38
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. 39
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. Webmaster, webmestre 40
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.
41
Codification des caractres spciaux

Caractre Code Iso Entit À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ À Á Â Ã Ä Å &Aelig; Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ Caractre Code Iso à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ Entit à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ
42
ß
ß
ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿
ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® &masr; ° ± ² ³ ´ µ ¶ · ¸ &supl; º » ¼ ½ ¾ ¿
&Oelig;
Espace
&oelig;
€ €
43
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.
de lexcellent ouvrage de Raphal GOETTER CSS2 pratique du design web
44

Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

Initiation la fabrication de sites web

Table des matires

Une premire page web......................................................................................... 5

Mise en page et feuilles de style.......................................................................... 11

Ecriture des pages dun site................................................................................. 19

Crer des menus simples ..................................................................................... 20

Matriser les liens ................................................................................................ 25

Balises HTML ..................................................................................................... 27

Glossaire Internet ................................................................................................ 35 Codification des caractres spciaux................................................................... 42

Initiation la fabrication de sites web

Le metteur en scne / Le public /

Initiation la fabrication de sites web

Concepts de base du HTML

1. Les liens hypertexte

Initiation la fabrication de sites web

Fabriquer un site web

3. Ossature dune page HTML

Commentaires En-tte du document -->

Ici figurent lensemble des informations afficher -->

Initiation la fabrication de sites web

Un exemple dcriture incorrecte :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

prcise le jeu de caractres utiliss pour laffichage des textes.

Initiation la fabrication de sites web

Une premire page web

Initiation la fabrication de sites web

1. Les balises indispensables

La balise a Indique un lien hypertexte Exemple:

Initiation la fabrication de sites web

La balise img Insertion dune image Exemple:

La balise ul Dlimite une liste puces

Initiation la fabrication de sites web

Un autre titre de niveau 2

La balise strong Caractres gras Exemple:

Initiation la fabrication de sites web

La balise em Caractres obliques Exemple:

2. Balises bloc, balises en ligne

Initiation la fabrication de sites web

3. Hirarchie et proprits des blocs dinformations

Initiation la fabrication de sites web

Mise en page et feuilles de style

Le fichier CSS sappelle ici "habillage.css"

1. Structure dune feuille de style

Initiation la fabrication de sites web

Des commentaires peuvent tre insrs sous la forme :

On distingue 3 catgories de feuilles de style :

Les feuilles de styles globales :

Les feuilles de style indpendantes :

#entete { font-size : 14pt ; }

Les dfinitions de classes :

.encart { border : solid ; }

Initiation la fabrication de sites web

2. Units de mesures et couleurs

Indications de couleurs 16,7 millions de couleurs sont disponibles (2563):

Initiation la fabrication de sites web

3. Positionnement des blocs

blablablablablabla blablablablablabla blablablablablabla blablablablablabla blablablablablabla blablablablablabla bla

padding-right padding-bottom margin-bottom

Le terme margin dsigne les marges externes dun bloc

Initiation la fabrication de sites web

Le terme padding dsigne les marges internes dun bloc

Les termes width et height dsignent les dimensions dun bloc

Initiation la fabrication de sites web

Trois blocs cte cte spars par un espace : Partie HTML:

/* bordure pour chaque ligne / / marge infrieure " " " */