Partie I – Qu`est-ce qu`une page Web
publicité
Partie I – Qu'est-ce qu'une page Web 1. Structure de base Une page Web de base est un fichier texte (ASCII) écrit en HTML (Hyper Text Marking Language). Sous ce nom barbare se cache quelque chose de très simple. La syntaxe HTML consiste à indiquer aux navigateurs le formatage des éléments de la page sous forme de balises (tags en anglais). Une page Web contient essentiellement : – des paragraphes de texte – des images – des liens Il y aura donc des balises pour mettre en forme les paragraphes et le texte qu'ils contiennent (alignement, italique, gras, etc.), des balises pour indiquer une image à un endroit précis de la page, des balises pour indiquer qu'une portion de texte ou une image fait office de lien vers une autre page ou un autre site Web. Voici la structure de base d'une page Web : <html> <head> ..... entête de la page (indications diverses : titre, mots clefs, etc.) </head> <body> .... corps de la page (textes, images, liens) </body> </html> Fig. I-1 Voici un exemple de page fonctionnelle : <html> <head> <title>Ma première page Web</title> <meta name= « keywords » content= « football sport féminisme » > </head> <body> <h1>Ma première page Web</h1> <p> Il est <b>important</b> de bien commencer </p> </body> </html> Fig. I-2 Cours Bawet – Conception de pages Web p. 1 Une page Web doit impérativement avoir la structure de la Fig. I-1. Elle indique aux navigateurs qu'il s'agit d'une page écrite en HTML. Les premières balises : <html> ... </html> indiquent aux navigateurs que tout ce qui se trouve entre ces deux balises peut être interprété comme du HTML. Les balises <head> .... </head> indiquent que ce qui se trouve entre elles est une entête. On y met généralement des informations générales sur la page : – le titre (de 50 caractères maximum entre deux balises ): <title>Titre de la page</title>. Il est important car 1) il apparaîtra dans la barre de titre du navigateur et il sera utilisé par les moteurs de recherche pour repérer votre page et la stocker dans une base de données. – les mots clés (permettant également aux moteurs de recherche de répertorier la page dans leur base de données) : <meta name= « keywords » content= « football, sport, féminisme » > – d'autres informations sur la conception de la page qui ne sont pas essentielles pour son fonctionnement Les balises <body> ... </body> entourent le corps du document. C'est à cet endroit que l'on place le contenu de la page : textes, images, liens, etc. Excercice I.1 : – Ouvrez Mozilla – Allez dans le menu « Fenêtre » et choisissez « Composeur » Une nouvelle fenêtre s'ouvre. Il s'agit d'un éditeur fonctionnant comme un traitement de texte. Dans la barre inférieure, se trouvent des onglets : « Normal », « Montrer les balises HTML», <HTML> Source », « Prévisualisation » – Le mode « Normal » vous permet de composer votre document comme dans un traitement de texte ordinaire – Le mode « <HTML> Source » vous permet de voir le code HTML généré automatiquement par l'éditeur – Le mode « Montrer les balises HTML» ne montre que les balises introduites – Le mode « Prévisualisation » donne un aperçu de la page avant publication sur le Net – Cliquez sur « <HTML> Source » Que voyez-vous ? Mozilla génère automatiquement un document HTML. Entre les balises d'entête <head></head>, il place une indication sur le type de document (text/html) et la méthode d'encodage des caractères (ISO8859-1): <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Le reste est laissé à notre entière discrétion. Excercice I.2 : En mode HTML, tapez l'exemple de la Fig. I.2 et regardez ce que cela donne en mode « Normal » Le fichier HTML doit être enregistré sous le format texte (ASCII) avec l'extension .htm (version Microsoft) ou .html (version Unix/Linux que nous privilégions ici) Mozilla met l'extension .html automatiquement. Si vous utilisez un autre éditeur de texte (WordPad, Kedit, Xedit, etc.), vous devrez probablement la mettre vous-même. Cours Bawet – Conception de pages Web p. 2 2. Les principales balises de mise en page A part les balises de structure imposées <html>, <head>, <body>, toutes les autres balises concernent la mise en page du contenu et sont laissées à l'entière disposition des concepteurs. C'est à vous de jouer... Voici les principales balises : <h1> ... <h2> ... <h3> ... <h4> ... <h5> ... </h1> : </h2> : </h3> : </h4> : </h5> : Titre Titre Titre Titre Titre <p> ... </p> : <b> ... </b> : <i> ... </i> : <u> ... </u> : <s> ... </s> : <sub> ... </sub> : <sup> ... </sup> : <center> ... </center> : <br> : <hr> : de 1er niveau de 2ème niveau de 3ème niveau de 2ème niveau de 2ème niveau Délimitation de paragraphe Texte en gras Texte en italique Texte souligné (à éviter car peut être confondu avec des liens) Text barré (peu utilisé) Indice en bas Exposant ou n° de note Texte centré Retour à la ligne (pas de balise fermante) Ligne horizontale (pas de balise fermante) Excercice I.3 : A l'aide des balises de mise en forme ci-dessus, composer une page qui ressemble à ceci : Mon petit site 1 Présentation Ce site risque d'être intéressant. 1.1 Ce que je veux dire : • pratiquement tout • encore plus Tapez le texte et les balises en mode HTML de Mozilla Composeur et faites Ctrl-S pour sauver régulièrement votre travail. Mozilla passe automatiquement en mode « Normal » après un Ctrl-S. Autres éléments de mise en page : Les puces : Comme dans une composition normale ne traitement de texte, on dispose en HTML de puces numérotées ou non. Les puces numérotées se marquent comme suit : Cours Bawet – Conception de pages Web p. 3 <ol> <li>puce numéro 1</li> <li>puce numéro 2</li> <li>etc</li> </ol> Les puces sans numéros comme suit : <ul> <li>premier point</li> <li>deuxième point</li> <li>etc</li> </ul> Excercice I.4 : Faites la liste numérotée suivante : 1. fromage 2. Saucisson 3. produit vaisselle de deux manières : – en mode HTML – en mode éditeur (en utilisant les boutons de la barre d'outils) Comparez les résultats au niveau du code HTML Les tableaux : C'est l 'équivalent des tableaux d'un traitement de texte classique à l'exception des possibilités de sousdivision des cellules. On peut toutefois imbriquer les tableaux les uns dans les autres pour arriver au même résultat. Voici un exemple de tableau de 3 lignes et 2 colonnes : <table > <tr> <td> cellule 1 1 </td> <td> cellule 2 1 </td> </tr> <tr> <td> cellule 1 2 </td> <td> cellule 2 2 </td> </tr> <tr> <td> cellule 1 3 </td> <td> cellule 2 3 </td> </tr> </table> Cours Bawet – Conception de pages Web p. 4 Ce qui donne ceci en mode « Normal » : cellule 1 1 cellule 2 1 cellule 1 2 cellule 2 2 cellule 1 3 cellule 2 3 Exercice I.5 : Utiliser le mode « Normal » pour insérer un tableau. Indice : menu « Insertion » ... Regardez le résultat et comparez avec le résultat ci-dessus Essayez de découvrir la raison de la différence... Note : La balise <th> ... </th> est utilisée à la place de <td> pour mettre des titres dans les tableaux. 3. Les principales balises d'insertion Outre les balises de mise en page, il existe une série de balises qui permettent d'insérer des objets dans la page Web. Les deux principales sont : – la balise de placement d'une image : <img> : <img src= « nom du fichier »> – la balise de placement d'un lien : <a> : <a href= « URL du lien »>texte du lien </a> Insertion d'une image : La balise <img> est plus complexe que les balises de mise en page. Elle requiert, en effet, le nom du fichier que l'on veut insérer. Pour cela, il faut préciser la source de l'image (d'où la syntaxe src= dans la balise) : si l'image se trouve dans le même répertoire que la page Web, il suffit de taper son nom, par exemple : <img src= « ballon.jpg » > Si, par contre, l'image se trouve dans un autre répertoire (par exemple un sous-répertoire « images »), alors il faut préciser le chemin : <img src= « /images/ballon.jpg » > Dans le dernier cas, il faut penser que la page Web est destinée à être hébergée sur une autre machine que la vôtre (sur un serveur distant). Il faut donc être attentif à reproduire la même hiérarchie de répertoires sur les deux machines. Vérifiez toujours que la balise <img> ne contient pas de chemin propre à votre ordinateur, comme par exemple : <img src= « C: /Mes Documents/Divers/Pages/Images /ballon.jpg » > Ce genre de chemin ne correspondra à rien sur le serveur distant et l'image ne s'affichera pas. Faites au plus simple : un sous-répertoire « images », un sous-répertoire « sons » (si nécessaire), pas plus ! Important : Ajoutez un texte alternatif à votre image : <img src= « ballon.jpg » alt= « un ballon » >. Ceci permet au vieux navigateurs d'afficher le texte au lieu de l'image et aux aveugles d'entendre quelque chose à la place de l'image. Insertion d'un lien : La balise <a> est également complexe. Elle requiert l'URL du lien et l'objet qui fera office de lien sur la page (texte souligné ou image, par exemple). Voici les principaux type de liens : Cours Bawet – Conception de pages Web p. 5 – Lien vers une autre page du site (par exemple « article.html ») : <a href= « article.html » > Lisez cet article </a> On suppose ici que le fichier « article.html » se trouve dans le même répertoire que la page dans laquelle se trouve le lien. Sinon, comme pour la balise <img>, il faut indiquer le chemin. Le texte balisé « Lisez cet article » apparaîtra souligné en bleu. Il devient le lien sur lequel on doit cliquer pour passer à la page « article.html ». – Lien vers un autre endroit de la page ou un endroit précis d'une autre page (ancrage) : <a href= « #endroit1 » > Ce lien va vers l'endroit 1 de la page </a> Il suffit alors de placer une ancre à l'endroit voulu de la page : <a name= « endroit1 » > Ceci est l'endroit 1 de la page </a> Cliquer sur la texte souligné « Ce lien va vers l'endroit 1 de la page » vous enverra à l'endroit précis de la page où vous avez placé l'ancre, c'est-à-dire la balise <a name= « endroit1 » > ... </a> – Lien vers un autre site (par exemple : http://www.google.be ) : <a href= « http://www.google.be » Allez sur Google </a> Sans commentaire... Exercice I.6 : a) Faites une petite page avec des liens qui ressemblerait à celle-ci : Mes liens favoris : • Google • Bawet • RTBF – la une télé b) Faites une autre page présentée plutôt comme suit : Mes liens favoris Google Bawet RTBF – la une télé Les liens sont alignés à l'aide d'un tableau. Utilisez le mode « Normal » pour la création du tableau et le remplir. Amusez-vous à découvrir les possibilités de modification des tableaux (formes et couleurs). Regardez toujours ce que cela donne en mode HTML. Remarque : les liens doivent être fonctionnels. c) Remplacer le texte soulignés des liens par les images correspondantes. Pour cela, il faut télécharger les images et les mettre à dimension dans la balise <img>. Indice : largeur se dit weigth en anglais et hauteur : height. Cours Bawet – Conception de pages Web p. 6 4. Enrichissement des balises Les exemples ci-dessus nos permettent d'aborder un point délicat du HTML : l'enrichissement des balises permettant d'introduire des raffinements de mise en page. Nous verrons qu'il est recommandé à l'heure actuelle d'utiliser ces raffinements avec parcimonie. 4.1Mise en page globale Nous pouvons enrichir la balise <body> de manière à modifier la présentation globale : – choix de la couleur du fond de la page : <body bgcolor=#code couleur > où « code couleur » est le nombre hexadecimal d'une couleur RGB (mélange Rouge Vert Bleu) Exercice I.7 Testez quelques couleur de fond en vous basant sur la liste des couleurs fondamentales en Annexe I - choix de la couleur du texte et des liens partout sur la page : <body text=#code couleur link=#code couleur vlink= code couleur alink= code couleur > • text= correspond au texte normal de la page • link= correspond aux liens pas encore visités • vlink= correspond aux liens visités • alink= correspond aux liens activés 4.2Mise en page locale Si on ajoute des propriétés aux balises locales, on change évidemment la mise en page à cet endroit précis. – Les paragraphes : • <p align=left > ... </p> : alignement à gauche de tout le paragraphe • <p align=right > ... </p> : alignement à droite de tout le paragraphe • <p align=justify > ... </p> : justification de tout le paragraphe • <p align=center > ... </p> : centrage de tout le paragraphe – Les polices de caractères : • <font size=1 > ... </font> : fixe la taille des caractères (en ordre croissant de 1 à 7) <font size=+1 > ... </font> : augmente la taille par rapport à la taille par défaut • <font size=-1 > ... </font> : diminue la taille par rapport à la taille par défaut • – Les lignes horizontales : • • – <hr width=80% align=left > : fixe la longueur de la ligne à 80% de l'écran et aligne à gauche <hr width=80% align=left noshade > : même chose sans ombre Les tableaux : On peut changer l'allure générale du tableau en modifiant la balise générale <table> : • <table border > : met des bordures aux cellules du tableau • <table border=10 cellspacing=5 > : fixe les bordures et l'espacement des cellules • <table cellpadding=2 > : fixe l'écart entre les bordures et le contenu des cellules • <table bgcolor=#code > : fixe la couleur de fond du tableau • <table align=left > : aligne le tableau On peut changer les cellules individuellement en modifiant les balises internes <th>, <td> et <tr> Cours Bawet – Conception de pages Web p. 7 – Les listes à puces : • • • • • – <ol type=i > : fait une liste de style i, ii, iii, ... <ol type=I > : fait une liste en chiffre romain : I, II, III, ... <ol type=a > : liste de style a, b, c, ... <ol type=A > : liste de style A, B, C, ... <ol start=x > : commence la numérotation à partir de x Les images : • <img src= « ballon.jpg » width=x height=y > : fixe la largeur (x) et la hauteur (y) de l'image • <img src= « ballon.jpg » align=top > : fixe la position du texte jouxtant l'image (ici au dessus) les valeurs possibles sont : top, bottom, left, right, middle Il y a bien d'autres propriétés que l'on peut ajouter aux balises, notamment dans la balise <font> qui permettrait de changer le type de police, par exemple. Vous pouvez expérimenter cela vous-même en trouvant les propriétés dans une documentation sur HTML (voir Annexe bibliographique). Nous n'allons pas poursuivre dans ce sens car il est préférable de prendre, dès le départ, de bonnes habitudes de conception. Les bonnes habitudes à prendre sont : – Détecter ce qui est répétitif dans la page d'accueil (index.html) et dans les autres pages de votre site. Par exemple, vous voulez que tous les titres de niveau 1 (h1) soient en police Georgia et de grandeur 32pt, que tous les paragraphes principaux soient écrits en police Times 10pt et justifiés, etc. – Faites un plan sur papier de la structure de votre site (une feuille par page) en identifiant les différents éléments (les paragraphes principaux, les menus, les bannières, logos, etc.) par un nom simple mais suggestif du style « menu_gauche » ou « logo_debut » – Introduisez tous ces éléments dans un éditeur HTML (Mozilla en mode HTML ou Quanta+ ou WordPad, ...) en utilisant les balises de base expliquées précédemment. Eventuellement, simplifiezvous la tâche en utilisant le mode Editeur (Normal) de Mozilla (pour les tableaux et les listes à puces, par exemple), mais pas trop pour ne pas encrasser le code avec des raffinements de balises propre à Mozilla. Surveillez toujours le code produit en mode HTML et modifiez-le si nécessaire – Faites en sorte que cette première écriture de code donne un résultat le plus lisible et fonctionnel. Pour cela, il faut savoir que les navigateurs vont lire vos fichiers de gauche à droite et de haut en bas. La position de vos éléments sur l 'écran correspond donc à leurs positions dans votre code – Déterminez le plus précisément la position de chaque élément de votre page : menu à gauche de telle largeur, paragraphes au centre de telle autre largeur, logo en haut à gauche de telle dimension, etc. – Ecrivez un fichier texte mon_style.css dans un éditeur de texte (WordPad, Emacs ou autre) qui va définir tous les styles et les positions des éléments (voir suite du cours) Cours Bawet – Conception de pages Web p. 8 Partie II – Les feuilles de style CSS Avec les feuilles de style (Cascading Style Sheet ou CSS), nous entrons dans la véritable conception des pages Web à savoir l'alliance entre la création esthétique et les moyens techniques pour la concrétiser... 1. Le principe est simple... Tout d'abord, vous élaborez une page en code HTML le plus pur possible : des balises sans raffinements. Ensuite, vous faites un fichier texte avec l'extension .css contenant les propriétés de ces balises. Il suffira, ensuite, d'ajouter une ligne dans le <head> du fichier HTML indiquant que l'on veut appliquer les styles contenus dans le fichier .css sur la page : <link rel= « stylesheet » type= « text/css » href= « mon_style.css » > Exemple : Voici un fichier HTML simple : <html> <head> <title>Ma première page Web</title> <meta name= « keywords » content= « football sport féminisme » > <link rel= « stylesheet » type= « text/css » href= « mon_style.css » > </head> <body> <h1>Ma première page Web</h1> <p> Il est <b>important</b> de bien commencer </p> <p> Pour bien commencer, il faut respecter quelques règles de base. C'est peut-être fastidieux au départ, mais peu à peu on se rend compte que ces règles nous facilitent la vie... </p> <p> Tout l'art consiste à placer les textes au bon endroit. Pour cela nous allons voir comment nous pouvons donner des propriétés aux balises HTML. Toutes ces propriétés seront placées dans un fichier séparé mis lié à la page HTML. </p> <p> Si vous voulez me contacter, n'hésitez-pas à m'envoyer un courrier à l'adresse suivante : <a href= « mailto:[email protected] » > paulette sur wanadoo.fr </a> </body> </html> Fig. II-1 Cours Bawet – Conception de pages Web p. 9 Ecrivons maintenant un fichier de style mon_style.css : body { background: #FFC; font: 13px verdana, sans-serif ; } p{ margin-left: 3cm ; } Fig. II-2 Le fichier contient deux règles : – la première définit la balise body : on précise la couleur de fond (ici de l'ocre : #FFC). C'est utile de le faire systématiquement (même pour le blanc #FFF) car certains navigateurs comme Netscape mettent du gris en fond, ce qui fait négligé ! On précise églement le type de police (font), ici du Verdana sans empâtement (sans-serif en anglais) de 13 pixels – la deuxième règle définit la balise p : on définit une marge de gauche de 3 centimètres Utilisons, dès à présent, les termes officiels. Une règle définie dans une feuille de style .css se décompose de la manière suivante : Sélecteur { propriété : valeur ; } ce qui se trouve entre les accolades, s'appelle une déclaration. Nous pouvons donc choisir n'importe quelle balise HTML comme sélecteur. Chaque balise HTML possède un certain nombre de propriétés en fonction de son rôle dans la page. – La balise body : a pour rôle de définir la présentation globale de la page. On peut donc y définir les polices, la couleur ou l'image de fond, les marges, etc. • background: #code RGB de couleur : définit la couleur de fond • background: url(« fond1.jpg ») : définit l'image « fond1.jpg » comme image de fond • font: 12pt verdana, sans-serif : définit le type de police pour toute la page • margin: apx bpx cpx dpx : définit les marges du corps de la page • padding: 0 : définit l'écart entre le contenu de la page et les marges Exemple : body { margin:9px 9px 0 9px; padding:0; background:#FFF; } Exercice II.1 : Modifier les fichiers ci-dessus pour définir partout la police Verdana, sansserif. Nous pouvons donner des propriétés ainsi à toutes les balises d'une page Web. Cours Bawet – Conception de pages Web p. 10 Dès à présent, nous pouvons faire les constatations suivantes : – Toutes les balises d'un même type (par exemple de paragraphe <p>) sont affectées de la même manière partout dans le document – Les balises incluses dans d'autres (ce que l'on appelle les descendants) héritent des propriétés des parents : par exemple les balises <p> de notre exemple héritent des propriétés de la balise <body> . Elles héritent du type de police définie dans <body>. Nous allons voir, à partir d'un exemple complet, comment nous pouvons : – faire en sorte que certaines balises seulement soient affectées par des propriétés (de manière, par exemple, à avoir des paragraphes différents en fonction de leur position ou leur rôle dans le document) – tenir compte des héritages afin de ne pas répéter plusieurs fois les mêmes définitions de style et parfois modifier une propriété héritée 2. Les boîtes et les classes Les briques fondamentales sont : – les boîtes : nous allons diviser des portions de code avec la balise fondamentale <div> ... </div> – nous allons ranger ces boîtes dans des classes : <div class= « boite de gauche » > ... </div> Nous pouvons ainsi attribuer des propriétés différentes aux boîtes de classes différentes. Voyons tout cela sur un exemple : Nous voulons obtenir le résultat suivant : Cours Bawet – Conception de pages Web p. 11 1) Créons un fichier index.html (avec Mozilla composeur, par exemple) contenant le code suivant : <html> <head> <title>Les joies du CSS</title> <meta name= « keywords » content= « style html web» > <link rel= « stylesheet » type= « text/css » href= « style1.css » > </head> <body> <div class="contenu"> <h1>Pour bien commencer</h1> <p>Nous pouvons regarder les Feuilles de Style (CSS) à partir de perspectives différentes. Personnellement, je préfère les voir comme la correction d'une erreur fondamentale commise au tout début du Web au milieu des années 90. C'était le temps où Tim Berners-Lee et une troupe de constructeurs du Web ont commencé à le concevoir à leur manière. </p> <p> Quelle était cette erreur ? </p> </div> <div class="contenu"> <h2>Les CSS dans leur contexte</h2> <p>A partir du moment où le Web est devenu populaire, les graphistes ont rapidement entrevu ce qu'ils ont considéré comme un problème fondamental : la méthode utilisée par les navigateurs pour afficher les informations à partir de fichiers HTML échappait totalement à leur contrôle. En effet, c'est le visiteur des pages qui a en charge la manière dont ces informations seront présentées sur leur système </p> </div> <div class="contenu"> <h2> Continuer à mettre du contenu</h2> <p> Vous constaterez qu'il est très facile d'ajouter du contenu à cette page. En effet, on ajoute très aisément des boîtes à cette page dans lesquelles il suffit de taper du texte. </p> </div> suite à la page suivante... Cours Bawet – Conception de pages Web p. 12 <div id="gauche"> <h2>Quelques liens</h2> <p> <a href="http://www.csszengarden.com" title="Zen garden">Le jardin du Zen </a> <br> <a href="http://sitepoint.com" title="Accueil de Site Point">Site Point </a> <br> <a href=" " title=" ">Autre lien 1</a><br> <a href=" " title=" ">Autre lien 2</a><br> <a href=" " title=" ">Autre lien 3</a><br> <a href=" " title=" ">Autre lien 4</a><br> </p> </div> <div id="droite"> <h2>Les CSS c'est mieux</h2> <p>Les feuilles de style en cascade (CSS) permettent de séparer le contenu d'une page Web de sa mise en forme. Cela entraîne les conséquences suivantes : </p> <p> <ul> <li>une maintenance plus facile</li> <li>une meilleure lisibilité du code de la page</li> <li>des pages moins lourdes à télécharger</li> <li>une plus grande souplesse dans l'agencement des objets</li> </ul> </p> </div> <div id="pied"> <p>Cette page a été réalisée en CSS par un membre de l'équipe de Bawet </p> </div> </body> </html> Fig. II-3 Nous avons définit des boîtes de plusieurs classes : – des boîtes de classe « contenu » qui contiendront les textes principaux situés au milieu de la page – des boîtes de type « gauche » qui formeront des encadrés à gauche de la page – des boîtes de type « droite » qui formeront des encadrés à droite de la page – des boîtes de type « pied » qui forme le pied de page Pour le contenu, nous avons utilisé la notion de classe (class). En effet, on prévoit la présence de plusieurs boîtes de ce type dans la page et, peut-être, dans les pages suivantes. Cours Bawet – Conception de pages Web p. 13 Pour les encadrés de gauche, de droite et le pied de page, nous avons utilisé la notion d'identification (id). Nous pensons, ici, qu'il s'agit d'éléments uniques que l'on peut repérer par un identifiant spécifique. Toutefois, on aurait très bien pu utiliser la notion de classe dans tous les cas. Si nous regardons le résultat de notre code dans un navigateur : dans Mozilla, par exemple, en ouvrant le fichier index.html (menu Fichier / Ouvrir / .... ), nous remarquons l'absence de toute mise en page. Le navigateur a lu le code de haut en bas et de gauche à droite. Il a placé les éléments à la suite l'un de l'autre, dans l'ordre d'apparition dans le code. On dit que leurs positions sont relatives. Nous devons maintenant créer un fichier contenant les styles. Dans le code (dans la balise <head>), nous avons fixé un lien vers un fichier appelé style1.css : <link rel=... type=... href= « style1.css » > Créons donc ce fichier dans l'éditeur de votre choix. Je recommande gedit en Linux qui est très facile à utiliser (en Windows, on peut utiliser WordPad, par exemple). Je livre ici le fichier en entier (tiré du livre « Designing without table » que vous pouvez trouver sur le site http://www.sitepoint.com ), mais la règle absolue est de tester chaque propriété introduite avant de passer à la suivante. Les erreurs sont, en effet, très difficile à repérer dans un grand fichier. body { background-color: teal; margin: 20px; padding: 0; font-size: 1.1em; font-family: verdana, arial, helvetica, sans-serif; } h1 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 15px 0; padding 0; color: #888; } h2 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 5px 0; padding 0; font-size: 1.1em; } p{ font-family: verdana, arial, helvetica, sans-serif; line-height: 1.1em; margin: 0 0 16px 0; padding: 0; } .contenu > p { margin: 0; } Cours Bawet – Conception de pages Web p. 14 .contenu > p+p { text-indent: 30px; } a{ color: teal; font-family: verdana, arial, helvetica, sans-serif; font-weight: 600; text-decoration: none; } a:link { color: teal; } a:visited { color: teal; } a:hover { background-color: #bbb; } .contenu { position: relative; width: auto; min-width: 120px; margin: 0 210px 20px 170px; border: 1px solid black; background-color: white; padding: 10px; z-index: 3; } #gauche { position: absolute; width: 128px; top: 20px; left: 20px; font-size: 0.9em; border: 1px dashed black; background-color: white; padding: 10px; z-index: 2; } Cours Bawet – Conception de pages Web p. 15 #droite { position: absolute; width: 168px; top: 20px; right: 20px; font-size: 0.9em; border: 1px dashed black; background-color: #eee; padding: 10px; z-index: 1; } /* Je définit ici les propriétés d'un pied de page */ #pied { position: relative; left: 200px; font-size: 0.7em; } Fig. II-4 Introduisez donc les règles une par une. Regardez leur effet dans un navigateur. Note sur les outils de conception et la méthode de travail Pour travailler à l'aise, je vous propose de procéder de la manière suivante : – Ouvrez le navigateur Mozilla : vous êtes dans la fenêtre de navigation – Sélectionnez « Composeur » dans le menu « Fenêtre » : vous êtes dans la fenêtre d'édition – Cliquez sur l'onglet « HTML Source » – Tapez votre code HTML – Enregistrez le fichier avec l'extension .html (index.html s'il s'agit de la page d'accueil ou un autre nom sinon). Pensez enregistrer régulièrement. L'opération d'enregistrement remet Mozilla composeur en mode « Normal ». Il suffit de recliquer sur «HTML Source» pour revenir dans votre code. – Revenez dans la fenêtre de navigation et ouvrez le fichier créé (menu Fichier / Ouvrir ) – Ouvrez un éditeur de texte (gEdit, par exemple) – Tapez une règle et enregistrez le fichier avec extension .css (style1.css, par exemple) – Revenez dans la fenêtre de navigation et cliquez sur « Actualiser » – Laissez tous ces programmes ouverts en même temps ce qui vous permet de taper une règle, enregistrer et tester immédiatement l'effet de cette règle. Il y a 3 fenêtres utiles : fenêtre de navigation – fenêtre d'édition – fenêtre de l 'éditeur de texte. Vous passez d'une fenêtre à l'autre en cliquant, par exemple, sur leurs réductions dans la barre des tâches. Cours Bawet – Conception de pages Web p. 16 Passons en revue le contenu du fichier style1.css Tout d'abord, nous allons réaliser l'arbre généalogique de notre page (fichier index.html) : <body> <div> contenu <h1> <p> <div> contenu <h2> <p> <div> contenu <h2> <p> <div> gauche <h2> <p> <a> <div> droite <h2> <p> <p> <ul> <li> <div> pied <p> Ce diagramme permet de visualiser les héritages de propriétés. Vous pouvez obtenir cette visualisation en cliquant sur l'onglet « Montrer les balises HTML » dans la fenêtre d'édition. Vous pouvez ainsi imaginer que la balise <p> dans le <div> de gauche ne puisse pas avoir les mêmes propriétés que la balise <p> dans le <div> de droite. Nous y reviendrons... Règle 1 : body { background-color: teal; margin: 20px; padding: 0; font-size: 1.1em; font-family: verdana, arial, helvetica, sans-serif; On donne des propriétés à la balise <body>. Cette balise est la mère de toutes les balises (voir arbre généalogique). Les balises filles vont donc hériter de certaines propriétés compatibles : police de caractères, par exemple. Elles n'héritent pas des propriétés de fond, de marges. background-color : teal; définit la couleur de fond de la page. Ici, on utilise un alias (teal) pour une couleur courante au lieu d'entrer son code. Les couleurs de base ont toutes un alias : red, blue, green, etc. On aurait pu utiliser la propriété générique background: avec une seule valeur (voir le tableau en Annexe III) Exercice : Mettez une image au lieu d'une couleur de fond Cours Bawet – Conception de pages Web p. 17 margin: 20px; Définit les marges séparant le corps de la page avec l'écran. On utilise ici le pixel comme mesure. On peut aussi utiliser le mm, le cm, le pc (pica), le pt (point). padding: 0; Définit l'écart entre le contenu et le bord d'un cadre. Ici, on le met à zéro (pas besoin d'unité de mesure dans ce cas). Ci-dessous, la signification des termes margin, padding et border font-size: 1.1em; On utilise ici une unité de mesure relative (voir Annexe IV) pour définir la grandeur des polices de caractères à un facteur 1.1 par rapport à leur grandeur par défaut dans le navigateur. font-family: verdana, arial, helvetica, sans-serif; On force ici la police de caractères à un type particulier sans empâtement (sans-serif) avec 3 polices possibles (Verdana, Arial ou Helvetica) selon les possibilités des différents navigateurs. Cours Bawet – Conception de pages Web p. 18 Règles 2, 3, 4 : h1 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 15px 0; padding 0; color: #888; } h2 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 5px 0; padding 0; font-size: 1.1em; } p{ font-family: verdana, arial, helvetica, sans-serif; line-height: 1.1em; margin: 0 0 16px 0; padding: 0; } On définit ici trois balises principales : h1 (titre principal), h2 (sous-titres) et p (paragraphes). Ces propriétés seront donc appliquées à chaque occurrence de ces balises quelques soient leurs position dans la page. La répétition de la propriété font-family: déjà présente dans <body> n'est pas nécessaire. Cela permet, éventuellement, de modifier la police par défaut (dans <body>) sans produire de changement dans les éléments déjà présents. On utilise la propriété générique margin: avec 4 arguments (voir Annexe III) : dans l'ordre haut, droite, bas, gauche (sens horlogique à partir du haut) La propriété color: définit la couleur de la police avec un code hexadécimal à 3 chiffres (RGB). Passons quelques lignes plus compliquées sur lesquelles nous reviendrons plus tard... Règle 11 : .contenu { position: relative; width: auto; min-width: 120px; margin: 0 210px 20px 170px; border: 1px solid black; background-color: white; padding: 10px; z-index: 3; } On définit ici une règle de classe. Cette règle va donc s'appliquer à toute balise identifiée comme appartenant à cette classe par la syntaxe : <balise class=''contenu'' > ... </balise> et uniquement à ces balises-là ! Cours Bawet – Conception de pages Web p. 19 Dans notre cas, nous avons définit des boîtes <div> de classe « contenu » contenant les paragraphes principaux de notre page. La règle va donc s'appliquer aux balises <div class= ''contenu''> ... </div> On peut limiter la validité de la règle à certains type de balise. Dans ce cas on place le nom de la balise avant le point : Par exemple, pour limiter la règle au paragraphe <p>, on écrirait : p.contenu { position: relative; ... } Dans notre cas, on aurait pu limiter la règle au seuls <div> et écrire : div.contenu { ... } Ce degré de liberté amène à réfléchir sur la conception même des pages Web : Au tout début de la conception (sur papier), il faut partir du plus général (quel sont les éléments qui sont censés se reproduire le plus fréquemment) au particulier (les éléments qui se reproduisent 2 ou 3 fois ou qui sont uniques). On réfléchit ainsi d'emblée en terme de classes d'objets... position: relative; On précise ici que la position des éléments de classe « contenu » est déterminée par leur position dans le code HTML (relativement les uns aux autres). Dans le cas contraire, on écrit : position: absolute; et l'on définit des coordonnées de l'élément par : top: xcm; left: ycm; par exemple, où top détermine la distance par rapport au bord supérieur et left la distance par rapport au bord de gauche. On peut utiliser aussi, vous l'aurez deviné, right et bottom. De nouveau, il faut déterminer quel genre d'unité de mesure il est préférable d'utiliser pour obtenir l'effet voulu dans les diverses résolutions d'écran. On préférera toujours, lorsque c'est possible, la position relative de manière à faire correspondre le plus possible la page en HTML pur (qui doit être lisible dans les navigateurs ne supportant pas les CSS) et la page mise en forme. Il vaut donc mieux réfléchir sur la position des objets au moment de la conception du code HTML afin d'utiliser au maximum des positions relatives. width: auto; Cette propriété permet au blocs de classe « contenu » d'adapter leur largeur en fonction de la grandeur de la fenêtre qui le contient. Essayez : réduisez la fenêtre de notre page index.html, vous verrez que les blocs de textes s'adaptent jusqu'à un certain point car la propriété suivante définit une largeur minimale : min-width: 120px; margin: 0 210px 20px 170px; Définit les marges selon le principe horlogique décrit plus haut : top, right, bottom, left (TRBL) border: 1px solid black; On définit ici une bordure de largeur de 1px en trait continu (solid) et de couleur noire (black). On aurait pu décomposer les propriétés de la manière suivante : border-width: 1px; border-style: solid; (autres choix : dashed (lignes brisées), dotted (points), double (ligne double) Cours Bawet – Conception de pages Web p. 20 border-color: black; la propriété border-width: se décompose elle-même (cfr. Annexe III) en : border-width-bottom: border-width-left: etc. ce qui permet des effets de relief. Exercice : précisez des largeurs pour le bord droit et le bord inférieur et regardez le résultat. background-color: white; padding: 10px; Ces deux propriétés définissent respectivement la couleur du fond de la boîte <div> de classe « contenu » et la distance entre le texte et le bord de la boîte. z-index: 3; Voici une propriété importante ! Elle définit la profondeur de l 'élément ou, si vous préférez, sa position sur l'axe des z perpendiculaire à l'écran. Nous entrons dans la troisième dimension ! Cela permet de placer des objets au dessus d'autres afin de les faire chevaucher : pensez à une image transparente qui surplombe un texte ou l'inverse. Cela donne des effets très jolis... Règle 12 : #gauche { position: absolute; width: 128px; top: 20px; left: 20px; font-size: 0.9em; border: 1px dashed black; background-color: white; padding: 10px; z-index: 2; } On définit ici une règle liée à un identificateur (ID). Cette règle va donc s'appliquer à toute balise identifiée par l'identificateur « gauche » par la syntaxe : <balise = ''gauche'' > ... </balise> C'est le même principe donc que pour les classes. On peut même dire que dans notre exemple, il n'y a aucune différence. ON aurait pu utiliser une classe « gauche » ou, à l'inverse, utiliser un identificateur « contenu ». Le choix est une question de philosophie... Même remarque pour les règles liées aux identificateurs « droite » et « pied ». Notez que les commentaires dans un fichier CSS commencent par /* et finissent par */ Nous pouvons nous attaquer maintenant à des règles incontournables dans les feuilles de styles, les règles de pseudo-classes. Elles concernent essentiellement la définition du comportement des liens. Règles 7,8,9,10 : a{ color: teal; font-family: verdana, arial, helvetica, sans-serif; font-weight: 600; text-decoration: none; Cours Bawet – Conception de pages Web p. 21 } a:link { color: teal; } a:visited { color: teal; } a:hover { background-color: #bbb; } On définit, d'abord, les propriétés de la balise <a> (la mère de tout les liens) : couleur de police, la famille de la police, la profondeur de graisse (gras 600) et la décoration : ici il n'y en a pas, mais on pourrait mettre : underline (souligné) ou line-through (texte barré), par exemple (voir Annexe III). On précise ensuite le style correspondant aux actions de l'utilisateur : a:link correspond au liens définis (par défaut ils apparaissent en bleu soulignés) a:visited correspond aux liens déjà visité (par défaut les liens deviennent mauves) a:hover correspond au passage de la souris au dessus d'un lien Attention à l'ordre des déclarations : toujours définir a:hover APRES a:visited de manière à ce que l'effet a:hover reste valable pour les liens visités. Exercices : modifiez a:hover de manière à changer la grandeur de la police de caractères au passage de la souris. Modifiez de nouveau a:hover de manière à faire apparaître une image en fond au lieu d'une couleur. Il y a d'autres pseudo-classes qui peuvent vous intéresser : p:first-letter modifie le style de la première lettre d'un paragraphe (lettrine) p:first-line modifie le style de la première ligne d'un paragraphe. difficile à manier car la notion de première ligne est floue puisqu'elle dépend de la grandeur de la fenêtre... Exercice : définir une lettrine pour le paragraphes principaux. Comment limiter cette règle aux seuls paragraphes de classe « contenu » ? Règles 5 et 6 : .contenu > p { margin: 0; } .contenu > p+p { text-indent: 30px; } Ces règles paraissent ésotériques à première vue, pourtant le principe est simple : la première redéfinit une règle pour les paragraphes <p> qui descendent directement d'un élément de classe « contenu ». Ici, il s'agit de ce qui se trouve entre les balises <p> situées dans les <div> de classe « contenu ». Regardez l'arbre généalogique de la page. Cours Bawet – Conception de pages Web p. 22 Deux formes existent de ce type de règle : 1) la règle générale : élément1 élément 2 { propriété: valeur; } La règle sera appliquée à tout élément (balise) élément2 qui descend de près ou de loin de l'élément élément1 (qui a un lien de descendance dans l'arbre généalogique) 2) la règle stricte : élément1 > élément 2 { propriété: valeur; } La règle ne sera appliquée qu'aux éléments (balise) élément2 qui descendent directement (relation mère/fille) de l'élément élément1. Dans notre cas, il s'agit d'une relation stricte. On veut appliquer la règle (marge à 0) uniquement aux paragraphes <p> qui descende directement d'un <div> (ou autre chose) de classe « contenu ». On aurait pu écrire : div.contenu > p { margin: 0; } puisqu'il n'y a aucun autre élément que <div> appartenant à la classe « contenu ». La seconde règle combine deux règles : 1) p+p { propriété: valeur; } Le signe + entre deux éléments signifie que l'on veut appliquer la règle à l'élément situé à droite du signe + lorsque les deux éléments sont adjacents dans le code HTML de la page. Ici, on veut appliquer la règle aux paragraphes <p> qui suivent directement un premier paragraphe <p> . 2) .contenu > p+p { text-indent: 30px; } On précise ici que l'on désire que la règle précédente (indentation du texte de 30 pixels) ne s'applique qu'aux paragraphes adjacents descendants directs d'un élément de classe « contenu », à savoir, dans notre cas d'un <div>. De nouveau, nous aurions pu écrire : div.contenu > p+p { text-indent: 30px; } Le résultat de cette règle est le retrait à droite de la question « Quelle était cette erreur ? » dans le premier paragraphe. Exercice : Ajoutez un autre paragraphe quelque part pour voir l'effet de cette règle... L'Annexe II reprend les différentes syntaxes des règles. Cours Bawet – Conception de pages Web p. 23 3. Aller plus loin... L'exemple que nous venons d'introduire devrait vous servir de laboratoire. En modifiant et en ajoutant des règles, vous pouvez expérimenter les différentes possibilités. Pour aller plus loin, la seule manière dans ce domaine, comme dans d'autres concernant l'informatique en général, est de regarder d'autres exemples, de les décortiquer et de s'en inspirer. C'est la seule façon de profiter du savoir accumulé par d'autres... Voici donc quelques exemples qui devraient vous inspirer : Example 1 : http://www.debona.homelinux.org/pirates/ réalisé par Julien De Bona informaticien de Bawet. Voici la feuille de style pirates.css (situé à l'adresse : http://www.debona.homelinux.org/pirates/pirates.css body { background-color:#fff; color:#000; margin-right:1em; text-align:left } div.logo { background-color:#000; color:#fff; text-align:left; margin:0; padding:1em } Cours Bawet – Conception de pages Web p. 24 div.menu { background-color:#000; color:#fff; width:25%; float:left; padding-right:0.1em; } div.main { background-color:#fff; color:#000; margin-left:25%; padding-left:1em; width:75%; } div.titlebar { /* Il y a des astuces à partir d'ici */ background-color:#fff; background:url("img/bgtitle.png"); /* pour produire l'arrondi de la barre */ background-repeat:repeat-x; /* de titre... */ color:#fff; text-align:right; width:100%; padding:0; border:0; margin:0; position:relative; left:-1em; } h1 { color:#fff;text-align:right; font-size:25px; white-space:nowrap; margin:0; } h1:after { content:url(img/brcorner.png); } /* fin des astuces... */ div.footer { text-align:center; clear:both } a.menu_link { } a.menu_link:link { color:#ace; } a.menu_link:visited { color:#ace } Cours Bawet – Conception de pages Web p. 25 a.menu_link:hover { color:#000; background-color:#ace; } h2 { color:#333 } h3 { color:#666 } div.news { margin:1em; padding:0.5em; border:2px; border-color:#000; border-style:solid; background-color:#ace; } li.act_page { color:#f00; /*list-style-image:url(img/puce_act.png);*/ background-color:#000; font-weight:bold } li.oth_page { color:#ace; /*list-style-image:url(img/puce.png);*/ } span.station { font-variant:small-caps; font-weight:bold } span.date { text-decoration:underline } Remarquez la manière de définir les liens <a>. Ici, on précise le comportement des liens situés dans un menu par la définition d'une classe « menu_link ». On applique les règles de pseudo-classe sur des éléments de la classe « menu_link » par la syntaxe : a.menu_link:hover, par exemple. Regardez également la manière élégante de produire un arrondi autour du titre principal par les définitions de règle sur h1. Voici le code de la page (index.html) : <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> Cours Bawet – Conception de pages Web p. 26 <head> <title>Pirates::Accueil</title> <meta name="Author" content="Julien De Bona" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="pirates.css" /> </head> <body> <div class="logo"> <img src="img/logo.png" alt="Pirates" /><br /> La radio libre en ondes courtes </div> <div class="menu"> <hr /> <ul> <li class="act_page">Accueil</li> <li class="oth_page"><a href="intro.html" class="menu_link">Aperçu de la radio pirate</a></li> <li class="oth_page"><a href="qsl.html" class="menu_link">Cartes QSL</a></li> <li class="oth_page"><a href="sons.html" class="menu_link">Sons pirates</a></li> <li class="oth_page"><a href="aem.html" class="menu_link">Pirates AEM</a></li> <li class="oth_page"><a href="liste.html" class="menu_link">Liste de stations pirates</a></li> <li class="oth_page"><a href="liens.html" class="menu_link">Liens</a></li> </ul> <hr /> </div> <div class="main"> <div class="titlebar"> <h1>Pirates::Accueil</h1> </div> <p>Le principe est simple: un gars un peu d&eacute;soeuvr&eacute; bricole ou r&eacute;cup&egrave;re un &eacute;metteur radio et une antenne, et diffuse ses propres programmes dans la plus parfaite ill&eacute;galit&eacute; ...</p> <h2>Derni&egrave;res nouvelles</h2> <div class="news">2004-02-02: Le 486 qui héberge ce site a été remplacé par un <a href="/phpsysinfo">Pentium</a>. Le site sera donc désormais plus rapide.</div> <div class="news">2003-12-22: Le site est passé en XHTML 1.1. Seules les archives de la rubrique AEM doivent encore être converties. Ce sera fait selon le temps disponible. Un effort a aussi été fait sur l'accessibilité du site (retrait des tableaux inutiles et report des images décoratives dans les feuilles de styles).</div> <div class="news">2003-12-22: L'adresse de la boîte postale du SRS à Ytterby a légèrement changé ce 1er décembre: c'est désormais c/o SRS / Ostra Porten 49 / 442 54 Ytterby / Suède</div> <div class="news">2003-12-21: Pirates est désormais hébergé chez moi. La bande passante n'est pas énorme (128 kbps) et mon serveur n'est pas très puissant, mais il n'y a pas de pub et je pourrai envisager de rendre ce site plus dynamique (par exemple, recherches dans la liste d'adresses). Bienvenue!</div> <!-<dl> <dt><a href="intro.html">Aperçu de la radio pirate</a>:</dt> Cours Bawet – Conception de pages Web p. 27 <dd>En quoi consiste la radio pirate en ondes courtes.</dd><dt><a href="qsl.html">Cartes QSL</a>:</dt> <dd>Une exposition de mes cartes QSL de radios pirates.</dd><dt><a href="sons.html">Sons pirates</a>:</dt> <dd>Des enregistrements de stations pirates.</dd><dt><a href="aem.html">Pirates AEM</a>:</dt> <dd>Les rubriques "Pirates" publiées dans "A l'Ecoute du Monde".</dd><dt><a href="liste.html">Liste de stations pirates</a>:</dt> <dd>Plus de 100 stations pirates, avec leurs adresses postale, e-mail et www.</dd><dt><a href="liens.html">Liens</a>:</dt> <dd>Quelques liens utiles pour approfondir le sujet.</dd> </dl> --> </div> <div class="footer"> <hr /> <a href="http://debona.homelinux.org/pirates">http://debona.homelinux.org/pirates</a> - <a href= "mailto:[email protected]"> [email protected] </a> <br /> <a href="http://validator.w3.org/check/referer"><imgsrc="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" /></a> <img src="img/css2.png" alt="CSS 2" /> </div> </body> </html> Example 2 : Comment réaliser des mises en pages complexes sans utiliser de tableaux : http://www.webreference.com/authoring/style/sheets/layout/advanced/ Cours Bawet – Conception de pages Web p. 28 Voici la feuille de style : body { margin:9px 9px 0 9x; padding:0;} #level0 { background:#FC0;} #level1 { margin-left:143px; padding-left:9px; background:#FFF;} #level2 { background:#FFF3AC;} #level3 { margin-right:143px; padding-right:9px; background:#FFF;} #main { background:#CCC} #topBar{ background:#FC0;} #advBar{ background:#FFF3AC;} Et le code HTML : ... <body> <div id="level0"> <div id="level1"> <div id="topBar"> This is the top navigation bar. <div id="advBar"> This is the advertisement bar. </div> </div> <div id="level2"> <div id="level3"> <div id="main"> The code you are reading. </div> </div> </div> </div> </div> </body> Un bel exemple de <div> emboîtés qui permet des mises en page que l'on réalisait auparavant difficilement avec des tableaux. N'hésitez pas à vous inspirer de cet exemple, de le modifier, pour en faire ce que vous voulez... Cours Bawet – Conception de pages Web p. 29 Ce que l'on tire comme enseignement de l'étude de ces exemples c'est que tout repose sur le positionnement des boîtes par le padding et le positionnement du texte par le margin. Nous devons donc maîtriser... 4. L'art du padding et du margin Nous pouvons voir n'importe quel élément d'une page comme une boîte, pas seulement les <div> (qui peuvent contenir beaucoup d'autres éléments), mais aussi les en-têtes (h1, h2, ...), les <p>, etc. A partir de là, la mise en page consiste à positionner le contenu de ces boîtes par rapport au bord de la boîte (padding) et à positionner la boîte par rapport aux autres boîtes (margin). On peut aussi modifier la bordure de la boîte (border). 4.1 Le padding absolu ou relatif Prenons un exemple : Code HTML (marpad.html) : <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Page sur les padding et les margin</title> <link rel="stylesheet" type="text/css" href="marpad.css"> </head> <body> <h1>Au secours ! Je suis coincé dans cette boîte...</h1> <h4>Ce n'est pas grave, il suffit de se faire plus petit </h4> </body> </html> Feuille de style (marpad.css) : body { background-color: #808080; } h1, h4 { background-color: c0c0c0 ; } On définit uniquement la couleur de fond. Pas de mise en page.... Résultat : Cours Bawet – Conception de pages Web p. 30 Ajoutons le padding : 1) padding absolu en pixels : body { background-color: #808080; } h1, h4 { background-color: c0c0c0 ; padding: 10px; } Résultat : Cours Bawet – Conception de pages Web p. 31 On constate que la boîte s'étend sur toute la largeur, par conséquent le padding de droite ne change rien. On ne le voit que lorsqu'on réduit la fenêtre. 2) padding relatif en % : body { background-color: #808080; } h1, h4 { background-color: c0c0c0 ; padding: 10%; } Résultat : Surprenant ! Les 10% sont calculés sur la largeur de la fenêtre. Cours Bawet – Conception de pages Web p. 32 3) padding relatif en em : body { background-color: #808080; } h1, h4 { background-color: c0c0c0 ; padding: 1em; } La grandeur du padding est égal à la grandeur de la police contenu dans la boîte... Résultat : Dans ce cas, le padding s'adapte à la grandeur des caractères... On ajoute des margin à gauche et à droite : h1, h4 { background-color: c0c0c0 ; padding: 1em; margin: 10px 25px; } Résultat : Cours Bawet – Conception de pages Web p. 33 On voit que les marges permettent de réduite les boîtes... Créons une boîte de classe ''boite'' qui contient tous les éléments : <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Page sur les padding et les margin</title> <link rel="stylesheet" type="text/css" href="marpad.css"> </head> <body> <div class=''boite''> <h1>Au secours ! Je suis coincé dans cette boîte...</h1> <h4>Ce n'est pas grave, il suffit de se faire plus petit </h4> </div> </body> </html> h1, h4 { background-color: c0c0c0 ; padding: 1em; margin: 10px 25px; } .boite { backgroud-color: #fff; } Cours Bawet – Conception de pages Web p. 34 Résultat : Remarquez l'effet des marges (gauche et droite) définies dans les h1 et h4 qui contrecarre l'effet du padding définit dans le <div> de classe ''boite''. Plaçons maintenant une boite dans une boite : <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Page sur les padding et les margin</title> <link rel="stylesheet" type="text/css" href="marpad.css"> </head> <body> <div class=''boite''> <h1>Au secours ! Je suis coincé dans cette boîte...</h1> <div class=''boite''> <h1> une boîte dans une boîte </h1> </div> <h4>Ce n'est pas grave, il suffit de se faire plus petit </h4> </div> </body> </html> Résultat : Cours Bawet – Conception de pages Web p. 35 Remarquez que la boite du milieu est légèrement plus étroite. En général, il y a cumul des padding et des marges. Il faut en tenir compte... En fait, toutes les mesures de positionnement se réfèrent à leur environnement. Les repères sont les boîtes qui entourent l'objet. La boîte de base par défaut étant la « boîte » de base <body>. Le même phénomène apparaît lorsqu'on utilise la propriété position. Si nous avions positionné notre boîte de classe ''boite'' avec, par exemple : position: absolute; top: 50px; left: 20px; La boîte dans la boîte se retrouverait à 100px du bord supérieur et à 40px du bord de gauche, puisque la boîte interne prendrait comme référence les bord de la boîte qui l'englobe. Cours Bawet – Conception de pages Web p. 36 Un classique : un titre et trois colonnes Cet exemple permet d'apprendre à combiner les marges, les padding et le positionnement absolu. Voici le code HTML (troicol.html) : <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Page avec trois colonnes</title> <link rel="stylesheet" type="text/css" href="troicol.css"> </head> <body> <div id="gauche"> <p>Le positionnement de cette colonne est évident. Nous avons défini un positionnement absolu de 10 pixels à partir du bord supérieur du document et de 10 pixels à droite à partir de la marge de gauche de cet espace. On a fixé une valeur absolue pour la largeur de cette colonne. Vous pouvez essayer de la remplacer par une valeur relative (un pourcentage, par exemple) ce qui permettrait aux colonnes de s'adapter à la grandeur du document </p> </div> <div id="centre"> <p>Notez que cette colonne ne peut pas être positionnée. Elle prendra la place "naturelle" que lui attribue le code HTML de la page. Les marges assurent que les colonnes de gauche et de droite (dont la largeur respective est définie à 200 pixels)auront assez de place sans devoir créer un espace visible entre les colonnes adjacentes. </p> </div> <div id="droite"> <p>La colonne de droite a exactement les mêmes caractéristiques que celle de gauche. Je ne vais donc pas perdre mon temps à vous les décrire... </p> </div> </body> </html> Avec les styles suivants (troicol.css) : Cours Bawet – Conception de pages Web p. 37 body { background-color: #fff; } #gauche { position: absolute; left: 10px; top: 10px; width: 200px; } #centre { margin-left: 220px; margin-right: 220px; } #droite { position: absolute; right: 10px; top: 10px; width: 200px; Résultat : Cours Bawet – Conception de pages Web p. 38 Le code de la feuille de style (troiscol.css) est très explicite : – On définit une colonne de gauche (<div> d'identificateur id=''gauche'') d'une largeur de 200 pixels, positionnée de manière absolue à 10 pixels du bord supérieur et de 10 pixels du bord de gauche. – La colonne de droite est définie de la même manière (<div> d'identificateur id=''droite'') à la seule différence que c'est la propriété right qui est fixée à 10 pixels. – La colonne du centre (<div> d'identificateur id=''centre'') est coincée entre les deux colonnes. Elle prend sa place « naturelle » et donc relative par défaut en fonction de sa position dans le code HTML. On définit donc uniquement des marges de 220 pixels de manière à ce que le texte soit séparé des deux autres colonnes de 20 pixels. Exercices : essayer de justifier le texte des colonnes. Amusez-vous à mettre des couleurs de fond.... Nous allons maintenant modifier un peu les codes pour ajouter une barre de titre : nous ajoutons une boîte de classe ''titre'' de 100 pixels d'épaisseur et, par la même occasion, nous allons mettre un peu de couleurs (gris) à la colonne du centre... Ajoutons ces lignes au code HTML (juste après le <body> ) <div id=''titre''> <h1>Ceci est le titre de cette page à trois colonne </h1> </div> Voici la nouvelle feuille de style : #titre { margin: 20px; padding: 10px; background: #ccc; height: 100px; } #gauche { position: absolute; left: 10px; top: 160px; /* au lieu de 10px width: 200px; } #centre { background: #ccc; /* fond en gris margin-left: 220px; margin-right: 220px; } #droite { position: absolute; right: 10px; top: 160px; /* au lieu de 10px width: 200px; */ */ */ Cours Bawet – Conception de pages Web p. 39 Résultat : Nous avons été obligé de modifier la position verticale des colonnes de gauche et de droite pour laisser la place au titre puisque ces colonnes sont positionnée de manière absolue. Par contre, la colonne du centre n'a pas besoin d'être modifiée puisqu'elle a une position relative. Elle s'adapte donc en fonction de sa position dan le code HTML. Remarquez, d'ailleurs, le léger décalage par rapport aux deux autres colonnes. Comme exercice, vous pouvez modifier tout cela et mettre tout en position relative ou absolue. Il ne faut jamais oublier qu'il y a toujours plusieurs façons d'arriver au même résultat final... Je vous invite à consulter la Webliographie pour trouver des astuces et surtout des exemples que vous pouvez copier et modifier à votre convenance... Cours Bawet – Conception de pages Web p. 40 Partie III – L'hébergement Toutes vos pages sont réalisées. Vous les avez testées en local (sur votre ordinateur). Il ne vous reste plus qu'à les héberger sur un serveur Internet. Nous supposons ici que vous avez trouvé un hébergeur. Il s'appelle Piscali. Vous avez un nom d'utilisateur (ou login) : fleurette222 et un mot de passe : Nom&dunPistil . Le nom du serveur Internet que Piscali vous propose est : users.piscali.be Parfait ! Ouvrez un programme de connexion FTP (LeechFTP ou gFTP, par exemple). Voici la fenêtre du programme gFTP (en Linux) : Son utilisation est évidente : Vous tapez le nom du serveur ( users.piscali.be) dans le champ « Hôte », votre nom d'utilisateur (ou login) dans le champ « Utilisateur » et votre mot de passe dans le champ « Mot de passe ». Puis vous cliquez sur le gros bouton à gauche (représentant deux ordinateurs). Cours Bawet – Conception de pages Web p. 41 Vous êtes connecté : Dans la fenêtre de gauche apparaît le contenu de votre disque dur. Dans celle de droite le contenu du disque dur du serveur (ou plus exactement le contenu de l'espace qui vous est réservé). Au départ, si c'est la première fois que vous y accédez, la fenêtre de droite devrait être vide. Dans l'exemple ci-dessus, elle ne l'est pas car nous sommes connecté au site de Bawet : la fenêtre de droite montre le contenu du répertoire « bawet » sur le serveur domainepublic.net. Utilisez les flèches : vers la droite pour transférer les fichiers de votre ordinateur au serveur (upload) et vers la gauche du serveur à votre ordinateur (download) : sélectionnez au préalable le ou les fichiers que vous voulez transférer puis cliquez sur la flèche correspondante. Une fois le transfert terminé, cliquez sur le gros bouton pour vous déconnecter. Vous utiliserez ce programme pour mettre à jour votre site. Pour vous faciliter la vie, créez un Signet lorsque vous êtes connecté (cela fonctionne comme un Favori ou un Marques Pages) : allez dans le menu « Signet », sélectionnez « +Ajouter un signet » et donnez-lui un nom). Plus tard, lorsque vous voudrez vous reconnecter à votre espace, il vous suffira de sélectionner votre signet dans le menu Cours Bawet – Conception de pages Web p. 42 Signets. Lors d'une mise à jour, vous transférerez des fichiers déjà existants sur le serveur. Dans ce cas, lors d'un transfert (upload), gFTP vous demandera si vous voulez « Ecraser » le(s) fichier(s) déjà existant sur votre espace. Il suffit de cliquer sur « Ecraser » puis sur « Valider » pour remplacer ce(s) fichier(s) par le(s) nouveau(x). Soyez attentifs lors des transferts car il n'y a pas de moyen de récupérer des fichiers écrasés... Et voilà, vous savez publier sur Internet !!! ... Cours Bawet – Conception de pages Web p. 43 Annexe I Table de codes de couleurs RGB : #000000 #005500 #009900 #00DD00 #00FF00 #000011 #005511 #009911 #00DD11 #00FF11 #000022 #005522 #009922 #00DD22 #00FF22 #000033 #005533 #009933 #00DD33 #00FF33 #000044 #005544 #009944 #00DD44 #00FF44 #000055 #005555 #009955 #00DD55 #00FF55 #000066 #005566 #009966 #00DD66 #00FF66 #000077 #005577 #009977 #00DD77 #00FF77 #000088 #005588 #009988 #00DD88 #00FF88 #000099 #005599 #009999 #00DD99 #00FF99 #0000AA #0055AA #0099AA #00DDAA #00FFAA #0000BB #0055BB #0099BB #00DDBB #00FFBB #0000CC #0055CC #0099CC #00DDCC #00FFCC #0000DD #0055DD #0099DD #00DDDD #00FFDD #0000EE #0055EE #0099EE #00DDEE #00FFEE #0000FF #0055FF #0099FF #00DDFF #00FFFF #770000 #775500 #779900 #77DD00 #77FF00 #770011 #775511 #779911 #77DD11 #77FF11 #770022 #775522 #779922 #77DD22 #77FF22 #770033 #775533 #779933 #77DD33 #77FF33 #770044 #775544 #779944 #77DD44 #77FF44 #770055 #775555 #779955 #77DD55 #77FF55 #770066 #775566 #779966 #77DD66 #77FF66 #770077 #775577 #779977 #77DD77 #77FF77 #770088 #775588 #779988 #77DD88 #77FF88 #770099 #775599 #779999 #77DD99 #77FF99 #7700AA #7755AA #7799AA #77DDAA #77FFAA #7700BB #7755BB #7799BB #77DDBB #77FFBB #7700CC #7755CC #7799CC #77DDCC #77FFCC #7700DD #7755DD #7799DD #77DDDD #77FFDD #7700EE #7755EE #7799EE #77DDEE #77FFEE #7700FF #7755FF #7799FF #77DDFF #77FFFF Cours Bawet – Conception de pages Web p. 44 #990000 #995500 #999900 #99DD00 #99FF00 #990011 #995511 #999911 #99DD11 #99FF11 #990022 #995522 #999922 #99DD22 #99FF22 #990033 #995533 #999933 #99DD33 #99FF33 #990044 #995544 #999944 #99DD44 #99FF44 #990055 #995555 #999955 #99DD55 #99FF55 #990066 #995566 #999966 #99DD66 #99FF66 #990077 #995577 #999977 #99DD77 #99FF77 #990088 #995588 #999988 #99DD88 #99FF88 #990099 #995599 #999999 #99DD99 #99FF99 #9900AA #9955AA #9999AA #99DDAA #99FFAA #9900BB #9955BB #9999BB #99DDBB #99FFBB #9900CC #9955CC #9999CC #99DDCC #99FFCC #9900DD #9955DD #9999DD #99DDDD #99FFDD #9900EE #9955EE #9999EE #99DDEE #99FFEE #9900FF #9955FF #9999FF #99DDFF #99FFFF #AA0000 #AA5500 #AA9900 #AADD00 #AAFF00 #AA0011 #AA5511 #AA9911 #AADD11 #AAFF11 #AA0022 #AA5522 #AA9922 #AADD22 #AAFF22 #AA0033 #AA5533 #AA9933 #AADD33 #AAFF33 #AA0044 #AA5544 #AA9944 #AADD44 #AAFF44 #AA0055 #AA5555 #AA9955 #AADD55 #AAFF55 #AA0066 #AA5566 #AA9966 #AADD66 #AAFF66 #AA0077 #AA5577 #AA9977 #AADD77 #AAFF77 #AA0088 #AA5588 #AA9988 #AADD88 #AAFF88 #AA0099 #AA5599 #AA9999 #AADD99 #AAFF99 #AA00AA #AA55AA #AA99AA #AADDAA #AAFFAA #AA00BB #AA55BB #AA99BB #AADDBB #AAFFBB #AA00CC #AA55CC #AA99CC #AADDCC #AAFFCC #AA00DD #AA55DD #AA99DD #AADDDD #AAFFDD #AA00EE #AA55EE #AA99EE #AADDEE #AAFFEE #AA00FF #AA55FF #AA99FF #AADDFF #AAFFFF Cours Bawet – Conception de pages Web p. 45 #CC0000 #CC5500 #CC9900 #CCDD00 #CCFF00 #CC0011 #CC5511 #CC9911 #CCDD11 #CCFF11 #CC0022 #CC5522 #CC9922 #CCDD22 #CCFF22 #CC0033 #CC5533 #CC9933 #CCDD33 #CCFF33 #CC0044 #CC5544 #CC9944 #CCDD44 #CCFF44 #CC0055 #CC5555 #CC9955 #CCDD55 #CCFF55 #CC0066 #CC5566 #CC9966 #CCDD66 #CCFF66 #CC0077 #CC5577 #CC9977 #CCDD77 #CCFF77 #CC0088 #CC5588 #CC9988 #CCDD88 #CCFF88 #CC0099 #CC5599 #CC9999 #CCDD99 #CCFF99 #CC00AA #CC55AA #CC99AA #CCDDAA #CCFFAA #CC00BB #CC55BB #CC99BB #CCDDBB #CCFFBB #CC00CC #CC55CC #CC99CC #CCDDCC #CCFFCC #CC00DD #CC55DD #CC99DD #CCDDDD #CCFFDD #CC00EE #CC55EE #CC99EE #CCDDEE #CCFFEE #CC00FF #CC55FF #CC99FF #CCDDFF #CCFFFF #FF0000 #FF5500 #FF9900 #FFDD00 #FFFF00 #FF0011 #FF5511 #FF9911 #FFDD11 #FFFF11 #FF0022 #FF5522 #FF9922 #FFDD22 #FFFF22 #FF0033 #FF5533 #FF9933 #FFDD33 #FFFF33 #FF0044 #FF5544 #FF9944 #FFDD44 #FFFF44 #FF0055 #FF5555 #FF9955 #FFDD55 #FFFF55 #FF0066 #FF5566 #FF9966 #FFDD66 #FFFF66 #FF0077 #FF5577 #FF9977 #FFDD77 #FFFF77 #FF0088 #FF5588 #FF9988 #FFDD88 #FFFF88 #FF0099 #FF5599 #FF9999 #FFDD99 #FFFF99 #FF00AA #FF55AA #FF99AA #FFDDAA #FFFFAA #FF00BB #FF55BB #FF99BB #FFDDBB #FFFFBB #FF00CC #FF55CC #FF99CC #FFDDCC #FFFFCC #FF00DD #FF55DD #FF99DD #FFDDDD #FFFFDD #FF00EE #FF55EE #FF99EE #FFDDEE #FFFFEE #FF00FF #FF55FF #FF99FF #FFDDFF #FFFFFF Cours Bawet – Conception de pages Web p. 46 Annexe II Les types de sélecteur CSS Type de sélecteur Utilisation sélecteur universel applique la règle à tous les éléments du documents * applique la règle à tous les éléments (balise) HTML du document h1 type élément (balise) sélecteur de classe Example(s) (pas de sélecteur) p applique la règle à tous les .menu_de_gauche éléments HTML précédent le div.menu_de_gauche point de séparation (ou à tout élément si aucun élément n'est précisé) dont on précise l'appartenance par la syntaxe <element class=«classe» ... > dans le code HTML sélecteur ID applique la règle à un seul #special élément HTML identifié par la p#special syntaxe <element ID= «identifiant» ... > sélecteur de pseudo-élément applique la règle à toute occurrence du pseudoélément p:first-letter p:first-line h1:first-child sélecteur de pseudo-classe applique la règle à toute occurrence de la pseudoclasse dont l'apparence dépend de l'interaction entre l'utilisateur et la page a:hover a:active a:focus a:link a:visited body:lang(d) sélecteur de descendance div p applique la règle à tout élément de type situé le plus à div.gauche p droite dans la liste si et seulement si cet élément est un descendant des éléments situé à sa gauche Cours Bawet – Conception de pages Web p. 47 Type de sélecteur Utilisation Example(s) sélecteur parent-enfant div > p applique la règle à tout élément de type situé à droite div.gauche > p du signe « > » si et seulement si cet élément descend directement de l'élément de type situé à gauche du signe « > » (forme stricte du sélecteur de descendance) sélecteur d'adjacence h1+h2 applique la règle à tout élément de type situé à droite p+h3 du signe « + » si et seulement si cet élément est physiquement adjacent (dans le code HTML) à l'élément dont le type est situé à gauche du signe « + » Remarque 1 : Evidemment, certaines combinaison de ces sélecteurs sont possible, par exemple : div > p+h3 Remarque 2 : On peut définir plusieurs sélecteurs ayant les mêmes propriétés en les regroupant dans une liste (en les séparant avec des virgules) Example : h1, h2, p { font: 12px sans-serif; } Cours Bawet – Conception de pages Web p. 48 Annexe III Liste des attributs CSS Attributs Généraux Les attributs suivants concernent tous les types d'éléments Attribut Valeurs Effet & Notes display block : indépendant du reste (forme un bloc au même titre qu'un paragraphe, ou un titre) inline : est insérée dans un paragraphe comme si c'était un mot d'une ligne Indique comment doit être affiché l'élément. list-item: comme une liste (avec un marqueur précédent l'élément comme pour la balise <li> d'une liste) none: affichage par défaut auto : hauteur automatique. Valeur d'Epaisseur Définit (et force) la hauteur d'un élément. Si l'image contenu dans l'élément est trop grande, elle sera redimensionnée (à l'échelle si la valeur de width est auto. Si c'est du texte, il pourra être entièrement vu avec des barres d'ascenseur, ou l'élément sera automatiquement agrandit pour laisser entrer tout le texte (selon les navigateurs utilisés). width auto : largeur automatique. Valeur d'Epaisseur Définit (et force) la largeur d'un élément. Si l'image contenu dans l'élément est trop grande, elle sera redimensionnée (à l'échelle si la valeur de height est auto. Si c'est du texte, il pourra être entièrement vu avec des barres d'ascenseur, ou l'élément sera automatiquement agrandit pour laisser entrer tout le texte (selon les navigateurs utilisés). float left : élément aligné à gauche. Définit comment l'élément doit se placer par rapport aux right : élément autres éléments d'une page. A la manière des images aligné à droite. quand on veux les placer à gauche ou a droite d'un texte. none : alignement normal. height Cours Bawet – Conception de pages Web p. 49 clear left : pas d'autres éléments à gauche. right : pas d'autres éléments à droite. both : aucun Définit si l'élément admet que d'autres éléments flottants élément à gauche soit situés de part et d'autre de lui. ou à droite. none : éléments acceptés à gauche et à droite. margin-width * margin-bottom-width margin-left-width margin-right-width margin-top-width none : aucune marge Poucentage de la fenêtre ou du cadre Valeur d'Epaisseur Définit la marge entre la bordure de l'élément et les bords de la fenêtre ou du cadre. Il affecte soit l'ensemble des marges d'un élément, soit un coté de celui-ci (top: marge supérieure, bottom: marge inférieure, left: marge gauche, right: marge droite). padding-width * padding-bottom-width padding-left-width padding-right-width padding-top-width none : aucun espace Poucentage de la fenêtre ou du cadre Valeur d'Epaisseur définit l'espacement entre le contenu d'un élément et ses bordures. Il affecte soit l'ensemble des cotés d'un élément, soit un coté de celui-ci (top: supérieure, bottom: inférieure, left: gauche, right: droite). Attributs de Bordure Les attributs suivants affectent soit l'ensemble des bordures d'un élément, soit une seule des bordures (top: bordure supérieur, bottom: bordure inférieur, left: bordure gauche, right: bordure droite). Attribut Valeurs Effet & Notes border-color * border-bottom-color border-left-color border-right-color border-top-color Valeur de couleur transparent : (aucune couleur) Donne une couleur ou aucune à la bordure. L'effet varie suivant le style de bordure utilisé. border-width * border-bottom-width border-left-width border-right-width border-top-width thin : fine medium : moyenne thick : épaisse Valeur d'Epaisseur Définie l'épaisseur de la bordure border-style * border-bottom-style border-left-style border-right-style border-top-style none : aucune dotted : pointillé dashed : tirée solid : unie double : double groove : ??? ridge : ??? inset : enfoncé ouset : relief Définie le style de la bordure Cours Bawet – Conception de pages Web p. 50 border * border-bottom border-left border-right border-top valeurs des propriétés de bordure définit Définie le style, l'épaisseur, et la couleur de la précédemment. Dans l'ordre: bordure. Chaque valeur doit être séparé de la border-width border-style précédente par un espace. border-color Attributs d'arrière plan Définissent les propriétés des arrières plans des éléments Attribut Valeurs Effet & Notes background-color Valeur de couleur transparent : (aucune couleur) Couleur d'arrière plan background-image URL de l'image Image d'arrière plan il est conseillé de définir une couleur d'arrière plan au cas où l'image ne soit pas affichée. background-repeat repeat: répétition horizontale et verticale. repeat-x: répétition horizontale. repeat-y: répétition verticale. no-repeat: image non répée Répétition de l'image d'arrière plan scroll : l'image défile en même temps de la page background-attachement fixed : l'image reste fixe lorsque la page défile Définie si l'image de fond doit ou non défiler lorsque l'on déplace les barres d'ascenseur. Cours Bawet – Conception de pages Web p. 51 valeurs des propriétés border-width, borderstyle, et border-color. 2 valeurs qui peuvent être de 3 types: * textuelle • 1ère valeur: définie la position verticale: • top : Sommet de l'élément. • center : Milieu (verticale) de l'élément. • bottom : Bas de l'élément. • 2ère valeur: définie la position horizontale: • left : calé à gauche de l'élément. • center : milieu (horizontale) de l'élément. • right : calé à droite de l'élément. background-position Définie la position de la première image à partir de laquel sera définie la répétition. * cordonnées par rapport au coin supérieur gauche de l'élément. La première valeur indique la position horizontale, et la deuxième la position verticale. * positions en pourcentage à partir du coin supérieur gauche de l'élément. La première valeur indique la position horizontale, et la deuxième la position verticale. valeurs des propriétés border-width, borderstyle, et border-color. Définit en une fois plusieurs Dans l'ordre: background-color backgroundpropriétés d'arrière plan. image background-repeat backgroundattachment background-position background Attributs de police d'écriture Les attributs et propriétés suivantes permettent de définir les polices d'écriture utilisées pour les différents éléments textuels. Attribut Valeurs liste de noms de polices, ou familles de style de police parmi les suivantes: font-family • • • • • serif sans-serif cursive fantasy monospace Effet & Notes Police d'écriture du texte. Plusieurs valeurs peuvent être choisit, séparées par des virgules par ordre de préférence d'utilisation des polices. Cours Bawet – Conception de pages Web p. 52 valeur relative : • larger : plus grand • smaller : plus petit • +/- Entier • +/- poucentage Taille relative ou absolue de la police. Les modifications relatives se font par rapport au la taille de base de l'élément dans lequel se trouve la balise. Si une balise em avec une taille larger se trouve dans un paragraphe de taille medium. la balise em sera de taille large. valeur absolue : font-size • • • • • • • font-style xx-small x-small small medium large x-large xx-large oblique : Oblique italic : Italique normal : normale Style de la police normal : normale bold : Gras bolder : Gras épais lighter : Léger Epaisseur de la police. L'effet dépend de la police font-weight Une valeur parmie les utilisée. suivantes: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900. normal : normale font-variant small-caps : police de petite majuscules font lettres de la police. Permet de définir en une seul fois plusieurs propriétés de police. Les valeurs sont celles de chaque propriétés définies précédemment. Dans l'ordre: font-style font-variant font-weight font-size font-family font-size peut être remplacé par font-size/line-height . Ce qui voudra dire que line-height (voir attributs de texte) sera définit relativement à font-size Attributs de texte Les attributs suivants définissent différentes propriétés relatives aux éléments textuels indépendamment des polices utilisées. Attribut Valeurs Effet & Notes text-align center : centré left : gauche right: droit jusify: justifié alignement du texte color Valeur de couleur Couleur du texte Cours Bawet – Conception de pages Web p. 53 text-decoration none : aucune underline : souligné overline : surligné (ligne au dessus du texte) line-through : barré blink : clignotant ? vertical-align baseline : collé au bas de l'élément underline : le milieu de l'élément est aligné avec le milieu du bloc dans lequel il se trouve. sub : en indice super : en exposant text-top : le sommet de l'élément est aligné avec le sommet de l'élément dans lequel il se trouve Alignement vertical du texte dans text-bottom : le bas de l'élément est aligné avec un bloc. le bas de l'élément dans lequel il se trouve top : le sommet de l'élément est aligné avec le sommet de l'élément le plus haut du bloc dans lequel il se trouve top : le bas de l'élément est aligné avec le bas de l'élément le plus bas du bloc dans lequel il se trouve text-transform capitalize : Met en majuscule la première lettre de chaque mot uppurcase : Met en majuscule toutes les lettres du texte lowercase : Met en minuscule toutes les lettres du texte none : annule tous les effets définit dans les styles hérités des blocs externes. Modifie l'ensemble du texte. text-indent pourcentage : pourcentage Valeur d'Epaisseur Indentation (retrait) de la première ligne de l'élément. line-height normal : ne change rien nombre reel pourcentage : pourcentage relatif à la taille de font-size Valeur d'Epaisseur Hauteur de la ligne letter-spacing normal : ne change rien Valeur d'Epaisseur Espacement des lettres. word-spacing normal : ne change rien Valeur d'Epaisseur Espacement des mots (en plus de la taille habituelle de l'espace). white-space normal : espaces classiques pre : comme dans la balise pre (tous les espaces sont affihés) Indique comment les espaces sont nowrap: le retour à la ligne se fait uniquement gérés. avec la balise <br /> . none: ne fait rien ornementation du texte Cours Bawet – Conception de pages Web p. 54 Attributs de listes Les attributs suivants définissent différentes propriétés relatives à l'affichage des éléments de type liste. Attribut Valeurs Effet & Notes list-style-type disc : cercle plein circle : cercle vide square : carré plein decimal : chiffres arabes lower-roman : chiffres romains minuscule upper-roman : chiffres romains majuscule lower-alpha : lettres minuscule upper-alpha : lettres majuscule none: aucune puce/numerotation Précise le type de puce ou de numérotation à utiliser pour les listes. list-style-position outside : puce à l'exterieur, et texte en retrait. Définit ou se trouve la puce/numérotation par inside : puce intégrée au texte. Le rapport au texte des éléments de liste. tout est en retrait. list-style-image URL : url de l'image none : aucune image list-style Prend les valeurs des 3 propriétés précédentes séparés par des Définit en une fois les 3 propriétés de listes espaces. (type, image et position). Dans l'ordre type position image . Définit la puce comme une image dont il faut préciser le chemin d'accès. Valeur de Couleur Les valeurs de couleur peuvent s'écrire de différents manières: Nom de couleur parmis les suivants: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Les autres couleurs ne sont pas sur de fonctionner. Couleur hexidécimale à 3 chiffres : s'écrit #xyz où x est le rouge, y le vert, et z le bleu. x y et z vont de 0 à 9 et de a à f . Couleur hexidécimale à 6 chiffres : s'écrit #xxyyzz ou xx est le rouge, yy le vert, et zz le bleu. x, y et z vont de 0 à 9 et de a à f . entiers : s'écrit rgb(x,y,z), ou x est le rouge, y le vert, et z le bleu. x, y et z sont des entiers qui compris entre 0 et 255. pourcentage : s'écrit rgb(x%,y%,z%), ou x est le rouge, y le vert, et z le bleu. x, y et z sont des réels compris entre 0.0 et 100.0 . Valeur d'Epaisseur Les valeurs d'épaisseur s'écrivent avec un nombre suivit d'un type de valeur parmi les suivants: em : taille de la police. ex : valeur x-height de la police. px : pixels pt : points (1/72e de pouce) in : inch (pouces=2.52cm) Cours Bawet – Conception de pages Web p. 55 Annexe IV Les unités de mesure en CSS Pour définir les tailles des différents éléments de mise en page (police de caractères, bordure, marges, padding, etc.), on utilise les unités de mesure suivantes : 1) Les unités de mesure absolues : Abréviation Signification correspondances in inch (pouce) 2.54cm cm centimètre mm millimètre pt point 1/72 inch (pouce) pc pica 12 points (1/6 pouce) px pixel un pixel d'écran 2) Les unités de mesure relatives : Abréviation Signification correspondances % pourcentage par rapport à la taille par défaut em unité correspondant à la taille 1em = 100% de la lettre « M » de la police par défaut Parmi les unités de mesure absolue, le pixel (px) est le plus utilisé car il assure le maintien des proportions entre les polices, les marges, ... et les images dont la grandeur est exprimée en pixels. La grandeur de 1px correspond à la grandeur d'un pixel physique de l'écran (un petit carré ou diode luminescente pouvant prendre la couleur rouge, vert ou bleu). Elle dépend donc de la résolution de l'écran sur lequel sera affiché l'élément. Pour se faire une idée, pour une résolution de 800x600 (800 pixels sur 600 pixels), 1px correspond donc à 1/600 de la hauteur de l'écran. Sur un écran de 15 pouces (10.5 pouces de hauteur et 13 pouces de largeur), une police de 12px aurait une hauteur de 1/50 de hauteur d'écran, soit 10.5/50 = +/- 1/5 pouce, soit 0.5 cm. De grandes différences de grandeur peuvent apparaître entre les différentes résolutions actuellement utilisées : 800x600, 1024x768, etc. mais aucune mesure absolue ne résous ce problème. Les concepteurs se maintiennent donc à la mesure la plus répandue dans le domaine de l'informatique : le pixel. Pour tous les éléments autres que les polices, c'est la meilleure manière d'exprimer des distances puisque c'est l'unité de mesure par défaut de la plupart des éléments d'affichage. Les polices, quant à elles, sont souvent exprimées dans d'autres mesures (le point ou le pica) en raison de leur existence propre en dehors de l'informatique. La manière la plus élégante et la plus souple de contourner les difficultés des valeurs absolues est d'utiliser des unités relatives. Cela permet d'exprimer des proportions entre différents éléments, ce qui est finalement le but de la mise en page (mise en évidence, souci esthétique, ...). Pour cela, on utilise de préférence l'unité em qui permet de définir un facteur de grossissement ou de rapetissement des éléments (des polices, par exemple) par rapport à une grandeur définie par défaut. Cours Bawet – Conception de pages Web p. 56 Annexe V Les différentes manières d'introduire des styles Il existe 3 façons d'introduire des styles dans une page Web : les feuilles de style locales, internes et externes. 1) Feuilles de style locales Consiste à introduire les styles directement dans le code HTML : <html> <head> </head> <body> <p style= ''font-family: verdana, sans-serif; font-size: 20pt; color: green''> Ce paragraphe a du style, mais il est local... </p> </body> </html> 2) feuilles de style internes Consiste à introduire les règles de style dans la section <head> du document HTML : <html> <head> <style type=''text/css''> <!-h2 { font-family: Verdana, sans-serif; } --> </style> </head> <body> ... </body> </html> Remarquez la présence des balises de commentaires <!-- et --> entourant les définitions de style. Il s'agit, en fait, de vieilles balises reconnues uniquement par les navigateurs qui ne supportent pas les styles. Les nouveaux navigateurs utilisent une nouvelle syntaxe pour les commentaires (<!--- et --->) et ne prendront donc pas en compte les anciennes balises. 3) Les feuilles de style externes Consiste à écrire toutes les règles dans un fichier séparé. Ce fichier aura toujours une extension .css et sera appliqué à la page HTML par une ligne de code HTML située dans le <head> : <head> < link rel= ''stylesheet'' type= ''text/css'' href= ''styles.css'' > </head> Cours Bawet – Conception de pages Web p. 57 Il existe aussi la syntaxe : <style> @import url( ''styles.css'' ) Mais celle-ci n'est pas reconnue par les navigateurs Netscape 4.xx. Il est donc préférable d'utiliser la fonction link qui est reconnue par tous les navigateurs connus. Les feuilles locales ont préséance sur les feuilles internes qui ont préséance sur les feuilles externes. Le principe général étant que c'est la dernière feuilles lue qui est appliquée. C'est ce mécanisme qui a donné le nom de Cascading Stylesheet (feuilles en cascade). On peut donc court-circuiter une règle externe par une règle interne ou locale sauf si on ajoute le drapeau !important dans la règle externe : .texte { font: bold 18pt verdana, sans-serf; color: yellow !important; } dans ce cas, c'est la règle externe qui garde la main. On peut appliquer le même raisonnement entre une règle internet et locale ou entre une règle externe et interne. En pratique, ces astuces sont fortement déconseillées. En effet, ces exceptions rendent le code illisible et donc difficile à maintenir. Il est fortement conseillé de n'utiliser que des feuilles de style externes. Cela permet de séparer clairement le code HTML (que l'on met à jour) et les styles, de rendre les pages HTML plus légères à télécharger et de pouvoir appliquer la même feuille de style à plusieurs pages HTML d'un site. 4) La feuille de style personnelle Il existe un autre endroit où l'on peut placer une feuille de style : la cache du navigateur. Il suffit d'écrire une feuille de style externe et de placer le fichier dans une mémoire prévue à cet effet dans son navigateur personnel. Cette feuille sera alors appliquée à toutes les pages consultées sur le Web. Elle a donc préséance sur toutes les feuilles définies par le concepteur de la page. Elle défait donc le travail minutieux des concepteurs, mais son but est avant tout de faciliter la lecture à certaines personnes souffrant de problèmes visuels (le daltonisme par exemple). La méthode de placement de cette feuille dépendant du type de navigateur, il m'est impossible de la décrire ici. Consultez la rubrique d'Aide de votre navigateur. Cours Bawet – Conception de pages Web p. 58 Webliographie Conseil : taper « css » dans Google 1) Exemples de codes HTML avec aperçus : Un excellent site : http://www.w3schools.com/html/html_examples.asp sur lequel vous pouvez expérimenter en modifiant le code des exemples (dans le cadre de gauche) et voir le résultat dans le cadre de droite... 2) Sites de référence où vous retrouverez toutes les propriétés et les syntaxes CSS : http://selfhtml.selfhtml.com.fr/navigation/css.htm Vous y trouverez des exemples, des visualisations des exemples, etc. http://www.htmlhelp.com/reference/css/ Ce site vous aiguille vers tous les sites principaux de référence http://www.blooberry.com/indexdot/css/ Un site interactif donnant les différentes propriétés en vigueur http://builder.com.com/5100-31-5071268.html Un autre donnant la liste des propriétés http://openweb.eu.org/css/ Un site incontournable en français qui vous ouvre les portes au CSS. Il s'adapte à votre niveau par le choix entre Débutant, Expert, Gourou... http://www.w3.org/ Le site de référence pour une syntaxe respectant les spécifications du W3C. Il est possible de faire valider son site (voir dans le menu de gauche : CSS validator) 3) Sites permettant d'apprendre des techniques plus poussées, des astuces... http://www.pompage.net/pompe/csspratique/ Un site en français superbe : vous y apprendrez à vous passer des tableaux pour aligner des objets (images et légende, par exemple) et bien d'autres choses... http://webmaster.webcrealisation.com/webmastering_article_113.htm Un cours en français sur les CSS http://mammouthland.free.fr/cours/css/ Un cours en français pour débutants http://www.meyerweb.com/eric/css/ Le site du « gourou » des CSS. Une mine de renseignement. Il a publié aussi chez O'Reilly. 4) Sites pour le plaisir des yeux ou comme source d'inspiration... http://www.csszengarden.com/tr/francais/ C'est simplement superbe. Regardez les sources et le fichier .css à l'adresse : Cours Bawet – Conception de pages Web p. 59 http://www.csszengarden.com/001/001.css http://www.webreference.com/authoring/style/sheets/layout/advanced/ Ce site vous explique comment réaliser des mises en page complexe. Vous pouvez suivre l'élaboration pas à pas d'un exemple. http://www.webreference.com/html/tutorials/ Le même site, au niveau des tutoriels. Vous y apprendrez comment maîtriser les différents aspects du CSS: les boîtes, les formulaires, etc. http://www.cybercodeur.net/weblog/presentations/seybold/30examples.html Ce site renvoie à plusieurs exemples de sites écrits en CSS et à pratiquement tous les sites utiles sur le Web concernant les CSS : INCONTOURNABLE !!! http://www.glish.com/css/ Ici, vous trouverez tous les exemples de mises en page que vous pourrez utiliser dans votre projet. http://realworldstyle.com/ Ici aussi, vous trouvez des exemples de base qu'il suffit de pomper... 5) Les livres (ça existe encore ?) HTML 4 XML Micro Application – PC Poche 1999 ISBN : 2-7429-1672-5 640 pages – 10 € Tout ce qu'il faut savoir sur le HTML, le multimedia (streaming), le javascript, etc. Bien structuré, clair et complet pour passer ensuite aux CSS. CSS, le Web avec du style Compétence Micro – Numéro 25 – Internet ISBN: 2-912954-87-8 87 pages – 5,95 € Bonne introduction aux CSS – Présentation claire et « décomplexante » des bases. Designing Without Tables Using CSS By Dan Shafer livre disponible seulement sur Internet à l'adresse : http://www.sitepoint.com Des chapitres importants peuvent être téléchargés gratuitement en PDF (170 pages) Cascading Style Sheets : the Definitive Guide By Eric A. Meyer Published by O'Reilly & Associates ISBN 1-56592-622-6 456 pages – Voir prix chez Amazon Le livre de référence par le gourou du CSS. En anglais seulement... Cours Bawet – Conception de pages Web p. 60
