Un document html propre
Un document html a une structure d’éléments emboîtés. Par exemple
Il est très important que la structure soit respectée. Toutes les balises doivent être refermées (à quelques exceptionsprè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
Deux éléments et un attribut
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 les propriétés seront définies ailleurs.
Il y aura plus loin des exemples illustrant ceci.
Où mettre des indications de style
Il y a plusieurs endroits où l’on peut donner des indications de style.
- D’abord dans une feuille de style externe.
- On peut aussi ajouter un élément style dans l’élément head:
- On peut enfin ajouter un attribut style à la plupart des éléments :
Si j’ai mis mes indications de style dans le fichier style.css, je l’indiquerai dans l’élément head en ajoutant :
< link rel=”stylesheet” type=”text/css” href=”style.css”> .
Cette méthode a l’intérêt de permettre d’utiliser un même fichier de style pour plusieurs pages.
< style type=”text/css”> ...</style>
< 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.
Syntaxe
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 style.css :
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. De plus, 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.
Il existe aussi parfois des raccourcis pour indiquer plusieurs propriétés en une seule fois :
Unités de longueur
Unités relatives em : taille horizontale de la police ex : taille verticale de la police px : pixel
Unités absolues in : poucecm : centimètre mm : millimètre pt : point (1/72 pouce) pc : pica (12 points)
Exemples
Consultez la page : http://www.csszengarden.com/ et regardez le rendu de la page suivant le CSS qui est appliqué.
S’il y a des choses que vous ne savez pas faire, vous pouvez aller vous promener sur les liens utiles. Personne ne connaît tout par cœur, il est donc parfaitement normal de se référer à la documentation régulièrement.