On a découvert à la séance précédente comment utiliser un certain nombre de balises en html (si vous n'avez pas fini la semaine dernière, voyez au moins les liens et les images avant de commencer ce TP). Cependant, l'ensemble restait peu organisé, les pages ressemblaient souvent à ce que l'on appelle une soupe de tags (tag est un mot anglais pour désigner les balises). La situation est analogue avec celle de Word. Il s'agit maintenant d'organiser nos pages de façon à utiliser un style propre et efficace.
Le TP se fera de préférence sous Linux.
Un document html a une structure d'éléments emboîtés. Par exemple :
| html | |||||||||
| head | body | ||||||||
| meta | title | h1 | p | ul | h2 | p | p | ||
| em | li | li | abbr | em | |||||
Ceci se code sous la forme :
<html>
<head>
<meta>
<title></title>
</head>
<body>
<h1></h1>
<p><em></em></p>
<ul>
<li></li>
<li></li>
</ul>
<h2></h2>
<p><abbr></abbr><em></em></p>
</body>
</html>
Il est très important que la structure soit respectée.
Toutes les balises doivent être refermées (à quelques exceptions près
comme meta, img et br). De plus,
le texte ne peut pas se promener n'importe où dans le document. Il doit
être par exemple dans un élément p. Une bonne base est de
vérifier si le validateur
considère votre page comme valide.
On aura parfois besoin des éléments span et
div. span permet de délimiter un bout de texte
au milieu d'un paragraphe, div sert lui à délimiter un bloc
entier, pouvant contenir plusieurs paragraphes, listes, tableaux. La
plupart des éléments peuvent se voir donner un attribut
class avec comme valeur une chaîne de caractères permettant
de spécialiser l'élément. Par exemple on pourra utiliser :
<span class="gras">blabla</span> pour indiquer
que ce mot est dans la catégorie span.gras dont je
définirai les propriétés ailleurs. Il y aura plus loin des exemples
illustrant ceci.
Il y a plusieurs endroits où l'on peut donner des indications de style.
style.css, je l'indiquerai dans
l'élément head en ajoutant :
<link rel="stylesheet" type="text/css" href="style1.css">Cette méthode a l'intérêt de permettre d'utiliser un même fichier de style pour plusieurs pages.
style dans l'élément
head :
<style type="text/css"> </style>
style à la plupart des
éléments :
<h1 style="...">Titre</h1>
Le navigateur regarde les informations de style dans l'ordre indiqué et les combine. Si il reçoit deux informations contradictoires, il ne retient que la dernière.
Une indication de style a la forme suivante :
background: blue
On va donc écrire par exemple un mot en gras avec :
<span style="font-weight: bold">mots en
gras</span>.
On peut mettre plusieurs indications de style à la suite, en les séparant
par un ;.
Maintenant, on a vu qu'on pouvait aussi mettre une indication de style au début du document, voire dans un autre fichier. Dans ce cas, il faut préciser à quels éléments le style s'applique. On aura ainsi par exemple dans le fichier style1.css :
body {
background: gold;
}
h1,h2 {
font-weight: bold;
text-align: center;
}
h1 {
font-size: 240%;
}
span.gras {
font-weight: bold;
}
p#intro span.gras {
font-weight: bolder;
}
Expliquons rapidement ce que cela signifie. D'abord, l'élément
body a un fond doré. Les titres h1 et
h2 sont en gras et centrés. Les titres h1 sont
écrits 2.4 fois plus gros que le texte normal. Le contenu de
<span class="gras">des mots</span> est mis en
gras, sauf dans le paragraphe qui s'appelle intro (donc introduit par
<p id="intro" name="intro"> ), où ils sont en très
gras.
.it,#droite {
...
}
Ici, les indications de style vont s'appliquer à tout élément d'attribut
class="it" ou id="droite" ou
name="droite".
Il existe aussi parfois des raccourcis pour indiquer plusieurs propriétés en une seule fois :
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
h1 { font: bold 12pt/14pt Helvetica }
Les deux formulations sont complètement équivalentes.
h1:first-letter { text-transform: uppercase ; }
Cela met en majuscule la première lettre des titres
h1.
Regardez le source de la page suivante, et comparez ce que vous voyez avec ce que montre un navigateur moderne. Toutes les subtilités de CSS ne sont pas encore bien gérées par tous les navigateurs. Dans vos pages, il faudra donc vous contenter pour l'instant de celles qui sont gérées au moins par Internet Explorer et Firefox. Recopiez la page d'exemple chez vous, et supprimez une à une les indications de style pour comprendre leur effet. En lisant ceci (pour une version française, c'est ici), essayez de vous arranger pour avoir le plan en haut de la page, sur une seule ligne, en ne modifiant que le style.
S'il y a des choses que vous ne savez pas faire, vous pouvez aller vous
promener sur les liens utiles. Insérez un tableau
dans la page, et mettez une image comme fond d'une des cellules.
Sauriez-vous faire la même chose avec nvu ?
Personne ne connaît tout par cœur, il est donc parfaitement normal
de se référer à la documentation régulièrement.
Pour vérifier que vous savez trouver l'information : arrangez-vous pour
que vos listes ul utilisent des carrés à la place des ronds
(ou le contraire), et que ces dessins indiquant chaque nouvel item soient
dans la marge. Pour décorer, vous ferez aussi clignoter le titre
(attention, évitez ce genre de chose sur une page sérieuse).
Maintenant il est temps de revenir à votre site. Avec les connaissances acquises lors de ces deux derniers TPs, vous devriez pouvoir améliorer vos pages. Commencez par vérifier que vos pages sont valides, ce qui vous obligera à mettre ceci au début pour spécifier de quel type de document il s'agit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Il vous restera probablement des messages au sujet de l'attribut
name, les dernières versions d'Internet Explorer semblent
gérer id correctement, donc c'est à vous de voir si vous
voulez le supprimer. Si votre page est valide, il vous proposera aussi de
vérifier la validité des CSS de votre page, ce qui est une bonne idée.
Vous remarquerez peut-être à cette occasion que des couleurs comme
gold ou grey ne sont pas valides. Il aurait
fallu les entrer sous la forme : #ffd800 ou #808080.
Il serait bon aussi d'enlever toutes les indications de couleur, taille,
etc parsemées au fil du texte et de les regrouper en une feuille de style.
Il faudrait surtout nettoyer toutes les horreurs que nvu a
pu écrire, notamment les lignes entières de
.
N'oubliez pas enfin de faire en sorte que vos pages soient accessibles en
suivant des liens depuis la page index.html située
directement dans votre répertoire public_html.