Bases de HTML et css

Sergio Muriel

Année 2004/2005

Table des matières

1 Introduction 1 1.1 Notion de balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Page de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 HTML 2

2.1 Structure du document . . . . . . . . . . . . . . . . . . . . . . . . 2 2.1.1 Division . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2.1.2 Paragraphe . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.1.3 L’erreur des sites webs actuels (tables) . . . . . . . . . . . 3

2.2 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.2.1 Tableau Simple . . . . . . . . . . . . . . . . . . . . . . . . 4 2.2.2 Fusion de cellules . . . . . . . . . . . . . . . . . . . . . . . 4 2.2.3 Attributs possibles pour les tables . . . . . . . . . . . . . 4

2.3 Listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.4 Définitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 CSS 6 3.1 Utilisation des css . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.2 Mise en page du texte . . . . . . . . . . . . . . . . . . . . . . . . 7 3.3 Mise en page des divisions . . . . . . . . . . . . . . . . . . . . . . 7 3.4 Listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.5 Margin et Padding . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3.6 Pseudo éléments et sélécteurs . . . . . . . . . . . . . . . . . . . . 9 3.7 Attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1 Introduction

Ce document ne vise pas à présenter l’ensemble des possibilités du HTML/XHTML et css, mais plutôt à présenter des bases, sur le foncionnement de ces elements qui structurent les pages webs actuelles.

1.1 Notion de balise

Le format html est structuré en balises, de type <balises>, obligatoirement ouvertes, puis fermées. Par exemple, la balise Title, suivie du titre, se présente sous la forme : <title>Notre titre</title>.

On ne peut pas faire chevaucher des balises ouvrantes et fermantes comme on le veut, il faut respecter une certaine règle. Ne jamais fermer une balise si une autre balise à l’interieur n’a pas été fermée. En Xhtml, les balises fermantes peuvent etre intégrées à la balise ouvrante, en intégrant un "/" en fin de balise. Par exemple la balise <img> , que nous pouvons ouvrir/fermer avec un <img />.

1.2 Page de base

Une page vide contient un certains nombres de balises essentielles pour la compréhension du navigateur. Elles sont au nombres de trois :

– html

– head

– body Voir le tableau annexe 1, pour leurs utilisation. Une page blanche html se présente donc sous cette forme :

<html>
<head></head>
<body></body>
</html>

html  Début de toute page html
head  Entête pour renseigner le titre et les métas données
body Corps du document, contenant tout ce que l’utilisateur voit à l’écran

Tab. 1 – Page de base

2 HTML

Il existe de nombreuses spécifications sur le html. Ce document ne prétend pas faire la liste de toutes les possibilitées : on ne vera donc que certaines balises "classiques" définies par la normes HTML 4.01 (voir ref [5]). Pour utiliser une norme spéciale, il faut avant tout la spécifier dans le doctype (voir ref [2]).

2.1 Structure du document

2.1.1 Division

Une page internet est souvent divisée en divisions, du type entête, menu, contenu de la page, pied de page, etc… Pour cela, on peut utiliser la balise <div>, afin de structurer le document clairement.

<body>
    <div>Mon entete</div>

    <div>Mon menu</div>
    <div>Mon pied de page</div>
</body>

Au départ cela peut paraître décevant comme présentation, mais avec les feuilles de style (Chap 3), vous pouvez facilement arranger la mise en page générale.

2.1.2 Paragraphe

La balise <p> est une des bases des pages HTML. En effet l’ensemble du contenu de la page se trouve généralement entre ce genre de balise. Pour l’ensemble du texte d’un article ou autre par exemple, on utilisera :

<p>Paragraphe 1<p>
<p>Paragraphe 2</p>

2.1.3 L’erreur des sites webs actuels (tables)

Beaucoup de webmasters actuels structurent l’ensemble de leur site via des <tables> imbriquées (ref [1]). Ce style de présentation est une relique de l’ancien style de page, lorsque les feuilles de style (Chap 3) n’éxistaient pas encore. Plusieurs raisons de ne pas utiliser des tableaux imbriquées existent :

– Le poids du code : En effet un code fait d’ une multitude de balises est souvent beaucoup plus lourd qu’un code fait avec des feuilles de style, et ce pour une présentation equivalente.

– La lisibilité du code : lorsque l’on affiche les sources d’une page web fait de tables, on se perd souvent dans les differents lignes et colonnes.

– Le temps d’affichage : un code css (respectant les normes) s’affiche de manière bien plus rapide que des tables imbriquées.

– La mise a jour des sites web est rendue bien plus difficile, vu la lisibilité du code.

2.2 Tableaux

Bien que les tableaux ne soient pas recommandés pour la mise en forme des documents, il sont souvent très utils pour trier des données, de manière colonne/ligne. Un exemple classique de tableaux est celui des notes d’élèves d’un ecole, triées par matières (colonnes) et lignes (élèves). Les tableaux en html sont structurés de manière tres précise :

– Debut de tableau : <table>

– Debut de ligne : <tr>

– Elements de la ligne : <td> contenu </td>

– Fin de ligne : </tr>

– Fin de tableau : </table> 2.2.1 Tableau Simple

Comme expliqué ci-dessus, un tableau de 2 lignes et 3 colonnes se présente donc sous cette forme :

<table>
    <tr>
    <td>Element 1</td> <td>Element 2> <td>Element 3</td>
    </tr>
    <tr>
    <td>Element 1</td> <td>Element 2> <td>Element 3</td>
    </tr>
</table>

Ce qui nous donne un affichage identique au tableuau 2.

Element 1 Element 2 Element 3
Element 1 Element 2 Element 3

Tab. 2 – Tableau simple

2.2.2 Fusion de cellules

Lors de la formation des tableaux, nous devont souvent regrouper plusieurs cellules liées entre elles par leur thème ou autres. Pour l’exemple pris précedemment, on aurait pu créer une première colonne regroupant les elevès par classe. Il existe pour cela des attributs pour la balise <td>.

– rowspan : permet de regrouper un contenu sur 2 lignes.

– colspan : permet de regrouper un contenu sur 2 colonnes. Ainsi vous pouvez imaginer toute forme de tableaux, jouant aussi avec les differents attributs possibles de la balise <table>.

2.2.3 Attributs possibles pour les tables

La liste des attributs présentés ici n’est pas complète. Il s’agit d’une liste des recommandations du W3C (ref [3]).

1. summary : Explique le contenu du tableau

2. width : Spécifie la longueur du tableau. Peut se donner en pixels,ou en em^{1}.

3. border : Sert à spécifier la taille de bordure. 0 pour l’absence de bordures.

4. frame : Possibilitées void, above, below, hsides, vsides, lhs, rhs, box, border. (voir le site ref [3] pour plus d’informations)

5. rules : Possibilitées none, groups, rows, cols, all. (voir le site ref [3] pour plus d’informations)

6. cellspacing : Taille en pixels, em ou pourcentage entre chaque bordures. (voir image 1)

7. cellspadding : Taille en pixels, em ou pourcentage entre chaque element et bordures des cases. (voir image 1)

1unitée de mesure basée sur la longueur du "m" classique

Fig. 1 – Attributs de la balise <table> (ref [3])

2.3 Listes

Nous somme souvent ammené à enumérer une serie d’ éléments de facons ordonnées ou pas. Il existe en html des balises permétant de faire cela :

– <ol> Pour les listes ordonnées.

– <ul> Pour les listes non ordonnées. Pour créer une liste ordonnée, il suffit donc d’ ouvrir la balise <ol>, suivie de chaque element de la liste entre <li></li>, puis refermer </ol>. Les listes ordonnées donnent à l’affichage une liste enuméree, avec l’indice de chaque élément au début. Pour les listes non-ordonnées, on procède de la même facon, mise à part que l’on utilse la balise <ul> au lieu de la balise <ol>. Cela donne comme résultat une liste dite "à puces". On peut évidemment imbriquer plusieurs listes de facon transparente, par exemple :

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <ol>
        <li>numero 1</li>
        <li>numero 2</li>
    </ol>
</ul>

2.4 Définitions

Voila des balises trop peu utilisées : <dd><dl> et <dt>. En effet, seules les personnes s’intéressant réellement aux possibilitées du html les connaissent. Elles sont souvent pas utilisées ou mal dans la plupart des cas. Elles permettent de définir une liste de définitions.

<dl>
    <dt>Mot 1</dt>  <dd> Definition du mot 1</dd>
    <dt>Mot 2</dt>  <dd> Definition du mot 2</dd>
</dl>

En pratique cela donne pour affichage, un léger décalage de la définition par rapport au mot, mais cela est modifiable via les feuilles de style (Chap 3).

3 CSS

Une des raisons d’utiliser les feuilles de style est de notemment séparer le contenu de la page de sa présentation externe. Ainsi vous pouvez utiliser ce même contenu pour d’autres applications, ou pour imprimer de manière différente.

3.1 Utilisation des css

De facon générale, vous pouvez intégrer du code css à l’intérieur du code html, mais cela n’est pas conseillé. Il est plus raisonnable d’intégrer les feuilles de style dans le header, ou mieux encore dans un fichier exterieur.

Vous pouvez donc, soit déclarer <style type="text/css"> </style> dans le header, ou alors <link rel="stylesheet" type="text/css" href="style.css">. Dans ce second cas, votre fichier style.css doit se trouver dans le même répèrtoire que la page html. Vous pouvez cependant spécifier l’emplacement exact.

En generale, pour attribuer un style a une balise, on nomme cette balise, et on spécifie les atttributs voulus entre accolades, par exemple :

<html>
      <head>
        <title>Page test</title>
<style type="text/css">
  div { border:1px solid #000; }
</style>
      </head>
      <body>
         <div><p>Test de style</p></div>
      </body>
</html>

Cela va créer une bordure noire solide de 1 pixel, sur toute les <div> présentes dans le document html.

On peut cependant spécifier des attributs pour une balise spécifique de la page, en donnant à cette balise un nom de classe. Par example, <div class="premier">test</div>, aura pour style ce qu l’on aura entré dans la feuille pour div.premier :

<html>
  <head>
   <title>Page test</title>
   <style type="text/css">
    div.premier { border:1px solid #000; }
   </style>
  </head>
  <body>
   <div class="premier"><p>Test de style</p></div>
   <div><p>Autre division</p></div>
  </body>
</html>

Vous pouvez également regrouper des attributs pour plusieurs balises. On utilise alors les virgules, pour les séparer :

     H1,H2,DIV { color:red; }

3.2 Mise en page du texte

Il existe de multiples manières de modifier la police et présentation. Vous pouvez notemment modifier la police utilisée, sa taille, sa couleur, le fond de celle-ci, la séparation etre chaque lettre, la séparation entre chaque mot, etc…(voir tableau 3 annexe) Attention cependant à ne pas surcharger la page de couleurs trop flash, nuisant à la lisibilité du site.

3.3 Mise en page des divisions

De la même facon, vous pouvez très bien utiliser les feuilles de style pour modifier la présentation de votre document html. Une méthode fréquemment utilisée consiste à coller certaines divisions à gauche ou à droite de manière à se retrouver avec plusieurs divisions sur un même plan horizontal :

Texte avec float:left |  Autre texte

Il existe de multiples autres possibilitées, permettant de donner la taille des bordures, sa couleur, son style, ainsi que la taille de la division, sa longueur, sa hauteur (voir tableau 4 annexe).

3.4 Listes

Les listes ordonnées et non-ordonnées peuvent elles aussi être modifiées via des feuilles de style. Parmis les possibilitées il y a le choix du type d’affichage devant chaque élément de la liste.

Balise Contenu

Explications

color couleur predefinie (ref [6]) ou #rgb^{2} Définie la couleur d’un texte

background- color idem que pour color Définir la couleur de fond

à utiliser.

font-size taille en pixel, em, ou relative^{3} Fixe la taille de la police de caractères.

font-family

Une famille de Police Fixe la police à utiliser.

font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ou 900 Spécifie la grosseur de la police

font-style

normal, italic ou oblique Fixe le style de la police

font-variant normal ou small-caps small-caps fixe les lettres non majuscules comme de petites majuscules

text- decoration none, underline, overline, line-trough, blink ou inherit Spécifie une decoration à un ensemble de texte.

letter- spacing Taille en pixel ou em Fixe la taille entre chaque

lettre

word- spacing Taille en pixel ou en Fixe la taille entre chaque

mot

line-height Taille en pixel ou em Fixe la taille entre deux

lignes

text- transform capitalize, uppercase, lowercase ou none

Transforme le texte

text-align

left, right, center, justify Aligne le texte

Tab. 3 – Modification de texte avec les feuilles de style (Source [4])

– list-style-type : disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Spécifie le type d’affichage devant chaque élément de la liste

– list-style-image : url , ou none Appliqué aux listes lorsque l’ attrbut display à pour valeur "list-item".

– list-style-position : inside ou outside De même, il s’agit de la place ou le list-style-type est placé par rapport à la bordure de la liste.

– list-style : list-style-type suivie de sa position et/ou de l’url de l’image Combiné de tout les précédents

3.5 Margin et Padding

Les différents éléments de la page html peuvent être séparès entre eux via les attributs margin et padding. Voir le tableau 2. La principale différence entre ces deux balises se situe sur la position vis-à-vis de la bordure. En effet margin nous donne la taille entre la page et la bordure, tandis que padding nous donne la taille entre cette même bordre et le texte à

Fig. 2 – Margin et Padding

l’interieur.

3.6 Pseudo éléments et sélécteurs

Bien que fort suffisants, vous ne pouvez pas tout faire avec les balises classiques. Vous ne pouvez pas par exemple modifier la taille d’une première lettre de paragraphe, ou des premières lignes. Les pseudos éléments et sélecteurs les plus connus sont hover, first-letter et first-line. Comme leurs noms l’indique, ils servent à modifier une partie de la balise et/ou certains éléments dans la balise.

– first-letter : Modifie la présentation de la première lettre de cette balise. Example :

     p:first-letter { font-size: 200%; }

– first-line : Modifie la prśentation de la première ligne de cette balise. Example :

     div:first-line { color: grey; }

– hover : Modifie la prśentation lorsque la souris passe sur cette balise Example :

     a:hover { background-color: black; }

3.7 Attributs

Certains attributs ont un nombre d’arguments variables, comme margin et padding. La balise réagit alors en fonction du nombre d’arguments qu’elle a recue :

– Avec un élément : tout les attributs de la balise prennent cette valeur.

– Avec deux éléments : le premier attribut est utilisé pour le haut et le bas, le second pour la gauche et la droite.

– Avec trois éléments : le premier attribut donne le haut, le second la droite, le troisieme le bas. La gauche reprends le second argument.

– Avec quates éléments : les différents arguments sont dans l’ordre : haut, droite, bas puis gauche.

Références

[1] mat. Les problèmes de la mise en page par tableaux. openweb.eu.org, 2004.

[2] Liam Quinn. Choosing a doctype. http ://htmlhelp.com/tools/validator/doctype.html, 2004.

[3] W3C. Recommendation w3c sur les tables. http ://www.w3.org/TR/REChtml40/struct/tables.html, 2004.

[4] W3.org. Cascading style sheets level 1 specs. http ://www.w3.org/TR/REC-CSS1, 2004.

[5] W3.org. Specification html 4.01. http ://www.w3.org/TR/REC-html40/, 2004.

[6] W3school. Html colors names. http ://www.w3schools.com/html/html_colornames.asp, 2004.

Balise Contenu

Explications

border-top- width thin, medium, thick, ou taille Donne la taille de la bordure du haut

border-right-width thin, medium, thick, ou taille Donne la taille de la bordure de droite

border- bottom- width thin, medium, thick, ou taille Donne la taille de la bordure du bas

border-left-width thin, medium, thick, ou taille Donne la taille de la bordure de gauche

border- width thin, medium, thick, ou taille Mélance de border-top-width, border-right-width, border-bottom-width et border-left-width. nombre d’attributs variable (voir section 3.7)

border-color couleur #rgb ou prédéfinie

Couleur de la bordure

border-style none, dotted, dashed, solid, double, groove, ridge, inset ou outset

Style de la bordure

border-top border-top-width suivie du border-style suivie de la couleur (example : thick solid red)

Spécifie plusieurs attributs de la bordure en une fois

border-right border-right-width suivie du border-style suivie de la couleur (example : thick solid red)

Spécifie plusieurs attributs de la bordure en une fois

border- bottom border-bottom-width suivie du border-style suivie de la couleur (example : thick solid red)

Spécifie plusieurs attributs de la bordure en une fois

border-left border-left-width suivie du border-style suivie de la couleur (example : thick solid red)

Spécifie plusieurs attributs de la bordure en une fois

border border-width suivie du border-style et de la couleur Spécifie plusieurs attribts en une fois

width taille en pixel, em ou pourcentage

Longueur de la division

height taille en pixel, em ou pourcentage

Largeur de la division

float left, right ou none La division sera collée se-

lon l’attribut que vous lui donnait.

clear

none, left , right, both Annule l’effet du float

Tab. 4 – Modification des div avec les feuilles de style (Source [4])