HTML & CSS - premiers pas

Les différents chapitres

Généralités Pages avec uniquement du HTML Découvertes du CSS CSS et les listes CSS et les couleurs

Généralités

Terminologie

Vous rêvez de créer votre propre site. C'est possible à condition de consacrer, disons une vingtaine d'heures pour apprendre les bases de deux langages indispensables pour réaliser un site : HTML et CSS.

HTML (HyperText Markup Language) date de 1991 quant à CSS (Cascading Style Sheets) il date de 1996. Les navigateurs implémentent progressivement la version 5 de HTML et la version 3 de CSS.

Pour réaliser votre site web sur votre PC vous avez besoin de deux logiciels : un navigateur et un éditeur de textes.

Pour publier votre site web c'est à dire pouvoir transférer tous les fichiers constitutifs de votre site de votre PC vers un hébergeur (afin que votre site devienne publique) vous avez besoin d'un logiciel de transfert tel Filezilla. Mais nous n'en sommes par encore là.

Revenons aux deux premiers logiciels cités. Vous avez certainement entendu parler de Internet Explorer, Firefox, Chrome, safari. Ce sont les principaux navigateurs. L'un de ces quatre est forcément installé sur votre ordinateur sinon vous ne pourriez pas "surfer" sur Internet …

Concernant l'éditeur de texte tout PC dispose de bloc-notes (bien caché avec windows 8). C'est un éditeur de textes certes mais aux fonctionnalités très limitées. Je vous conseille donc d'installer NotePad++. Ce logiciel propose de nombreuses fonctionnalités en particulier la coloration syntaxique qui permet de repérer rapidement les erreurs de syntaxe et c'est un logiciel gratuit également.

Attention pour télécharger un logiciel n'allez jamais sur des sites comme 01.net ou clubic.com vous risquez de récupérer "des cochonneries" sur votre ordinateur.
Téléchargez toujours à partir du site officiel de l'éditeur du logiciel.

Donc l'apprentissage de HTML & CSS ne vous coûtera pas un centime.

Mais au fait pourquoi deux langages pour le web et non pas un seul ? N'est ce pas faire compliqué ? Et bien pas du tout. Du temps ou le CSS n'était pas encore connu, les développeurs web n'utilisaient que le HTML. Le code de leur page était très compliqué, très lourd bref un calvaire pour la maintenance logicielle. Désormais le code d'une page web doit en principe simple et léger. Car les deux langages se complètent merveilleusement : HTML gère la structure et le contenu de la page tandis que CSS s'occupe de la mise en forme de la page.

Première page web

Voici le code de notre première page web !

Cette page web a été produite avec l'éditeur de textes notepad++. N'importe quel navigateur va interpréter ce code et l'afficher dans une fenêtre (onglet).

Le code de la page 'page1.htm'

<!DOCTYPE html> <html> <head> <title>première page</title> </head> <body> J'ai créé ma première page web et je suis très exité ! </body> </html>

Une page web est un fichier qui a pour extension htm ou html !

Attention sous notepad++ si vous ne précisez pas l'extension lors de l'enregistrement de la page le logiciel va ajouter automatiquement l'extension txt.
Si vous demandez à votre navigateur d'ouvrir un fichier txt il va se contenter d'afficher le code mais ne va pas l'interpréter ...

Aperçu avec votre navigateur (dans un autre onglet)

Essayez !

Chaque page d'exemple est affichée dans un nouvel onglet. Pensez à fermer ces onglets ensuite sauf celui avec pour titre : "HTML & CSS - premiers pas".

Commentaire

Parlons pour l'instant du code.

Notez que tout le code est saisi en minuscules. Mais j'aurais pu saisir en majuscules.
On dit que HTML est insensible à la casse.

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web.
Puis nous avons la balise <html>. Notez que le code se termine par </html>.
En effet les balises marchent en général par paire avec une balise début et une balise fin. On parle de conteneur pour désigner l'ensemble balise début et balise fin.

Dans la suite de mon exposé et par convention, je désignerais toujours un conteneur (donc l'ensemble balises ouvrante et fermante) par son nom en majuscules débarassé des chevrons. Prenons un exemple quand vous lirez dans le texte "conteneur HEAD" je désigne par ce terme la paire de balises <head> et </head>


Donc, par exemple, conteneur HTML désignera l'ensemble <html> et </html>

La balise fin (ou fermante) est identique à la balise début (ou ouvrante) sauf la barre oblique après la parenthèse angulaire ouvrante).
Vous verrez plus loin que la balise début contient éventuellement des attributs.

L'en-tête  de la page web donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux).
Il contient aussi la feuille de style interne et/ou des liens vers des feuilles de style externes.

Observons la partie HEAD (donc entre <head> et </head>)de cette première page web.
Nous avons uniquement le conteneur TITLE qui contient un texte. Vous retrouvez ce texte affiché dans la barre de titre de l'onglet correspondant à cette page.

Le corps de la page (à l'intérieur de BODY) contient tout le texte de la page. Ce texte est délimité par des balises qui précisent la nature du texte.
Le balisage sera différent selon que le texte est un titre ou un corps de texte ou le contenu d'une cellule de tableau ou encore la légende d'un lien hypertexte.

Etudions maintenant la partie BODY de notre première page web.
Nous avons le texte "j'ai créé ma première page web …" .C'est ce texte qui s'est affiché dans la fenêtre du navigateur
Remarquez que le texte est affiché avec la police TNR(Times New Roman) car c'est la police par défaut.
TNR fait partie de la famille des polices avec serifs (ou empattements). Alors que Arial fait partie de la famille des polices sans serif (sans empattements).

Pages avec uniquement du HTML

Nous allons donc supposer dans ce chapitre que CSS n'existe pas.

La page intitulé "page2.htm"

Le code de cette page (extraits)

<!DOCTYPE html> <html> <head> <title>page2.htm</title> </head> <body> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. Blabla blabla Blabla blabla Blabla ... <hr> <h2>Les balises pour donner des effets de style aux mots</h2> <b>texte en gras</b><i>texte en italique</i><s>texte barré</s><u>texte souligné</u> <sub>texte en décalage bas</sub><sup>texte en décalage haut</sup> <q>texte entre guillements</q> <i><b>texte en italique et en gras</b></i> <strong>texte en gras</strong><del>texte barré</del><em>texte en italique</em> <hr> <h2>Les listes</h2> <ul>Une liste à puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> <hr> <h2>Un tableau</h2> <table> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> <hr> <h2>Les images</h2> <img src ="../images/plongeur1.gif" > <img src ="../images/requin.gif" > <hr> <h2>Les liens hypertextes </h2> <a href = 'http://darchevillepatrick.info' target ='_blank'>Mes tutoriels en ligne </a> <a href = 'http://darchevillepatrick.com' target ='_blank' >Blog de Patrick Darcheville </a> <hr> </body></html>

Vérifiez le rendu avec votre navigateur (dans un autre onglet)

Essayez !

Commentaire

Il y a beaucoup de choses à dire sur cette page.

Vous constatez que la page occupe tout l'écran et que le texte est aligné à gauche de l'écran.

Vous constatez également que certains textes apparaissent en gras qu'il y a des traits horizontaux, des textes en gras, soulignés, barrés ou en italique, des listes à puces et numérotées, un tableau de données, des images insérées dans la page, des liens hypertexte (légende du lien en bleu souligné).

Concernant le code la partie HEAD rien de nouveau par rapport à la page précédente sinon que l'on demande d'afficher dans la barre de titre de l'onglet le nom du fichier : page2.htm

Par contre dans la partie BODY nous avons beaucoup de texte délimités avec de nombreuses balises.
Nous avons d'abord les balises de type titres qui fonctionnent par paire et qui sont au nombre de 6 : h1, h2 … h6
Le texte contenu dans une balise de type "titre" apparaît en gras et avec une grande taille mais avec une taille décroissante en fonction de l'indice de H. Ainsi la taille d'un titre balisé par H6 sera beaucoup plus petite que la taille d'un texte balisé par H1.
Le corps de texte correspondant à chaque titre est délimité par le conteneur P (P comme Paragraphe).
Ensuite nous avons un trait horizontal grâce à la balise orpheline HR.
En effet si la plupart des balises fonctionnent par paire (conteneurs) il y a aussi quelques balises isolées (ou orphelines) : br, hr, img, etc.

On utilise ensuite différents conteneurs : B, S, U, I, DEL, EM, STRONG, SUB, SUP, Q

Vous pouvez remarquer qu'avec ces dernières balises il n'y a pas de saut de ligne alors qu'il y en avait avec les balises de titres (H1à H6) et le conteneur P.

En HTML Il y a en effet deux types de balises : les balises block et les balises inline. Les premières provoquent des sauts de ligne et les secondes ne provoquent pas de saut de ligne.
Donc P, DIV, H1, … H6 sont des balise de type block
B,S,U,I,EM, DEL, SUB, SUP, STRONG sont des balises de type inline

Les conteneurs de type block sont aussi appelées des boîtes car elles se positionnent par défaut les unes en dessous des autres.

Les conteneurs de type block peuvent contenir d'autres balises de type block et des balises inline.
Par contre une balise inline ne peut contenir une balise block.

Mais revenons aux balises inline.

B, I, S sont des conteneurs obsolètes. Cela veut dire qu'il ne faut plus en principe les utiliser mais à leur place il faut utiliser STRONG, EM, DEL. Maintenant pas de panique, les navigateurs mêmes récents sont encore en mesure d'interpréter correctement les balises obsolètes...

Nous avons ensuite des listes. Pour créer une liste à puces il faut utiliser le conteneur UL et à l'intérieur de ce conteneur le conteneur LI pour chaque item de la liste.
Pour créer une liste numérotée il faut utiliser le conteneur OL et à l'intérieur de ce conteneur le conteneur LI pour chaque item de la liste.

Nous avons ensuite un tableau de données (4 lignes et 3 colonnes). Le tableau est délimité par le conteneur TABLE.
Chaque ligne du tableau est délimitée par le conteneur TR (table row).
Chaque cellule est délimitée par le conteneur TH (table head) ou TD (table data).
Le conteneur TH doit être utilisé pour délimiter les cellules d'en-tête et le conteneur TD pour les cellules contenant des données.
Remarquez que le texte délimité par TH est affiché en gras.

Nous avons ensuite deux images qui ont été insérées dans la page. Il s'agit deux gif animés. Pour insérer dans une page une image il faut utiliser la balise orpheline IMG. Cette balise comporte un attribut obligatoire src avec pour valeur le chemin de l'image (chemin par rapport à la page ou chemin relatif).
Le chemin relatif est une notion un peu délicate. Aussi je préfère en parler plus tard.
La valeur d'un attribut doit être entre guillemets simples ou doubles (ne jamais mélanger les deux types de guillemets).
Donc la syntaxe minimale pour la balise IMG est :<img src ="chemin_relatif_image" >

Les deux images sont côte à côte. En effet la balise IMG est une balise inline (pas de saut de ligne).

Nous avons ensuite deux liens hypertextes. Quand vous cliquez sur le premier lien vous arrivez sur un mon site contenant mes tutoriels et quant vous cliquez sur le deuxième lien vous arrivez sur mon blog. A chaque fois le site s'affiche dans une nouvelle fenêtre du navigateur (on dit aussi nouvel onglet).
Examinons attentivement le code d'un lien. Pour créer un lien hypertexte il faut utiliser le conteneur A. Il y un attribut obligatoire  href avec pour valeur l'adresse du site ciblé et un attribut facultatif target avec la valeur "_blank" pour afficher le site dans une nouvelle fenêtre (ou nouvel onglet).
Notez que les liens hypertextes sont affichés en bleu souligné.

La page "page3.htm"

Le code de la page (extrait)

<!DOCTYPE html> <html> <head> <title>page3.htm</title> </head> <body bgcolor = 'yellow' text = 'purple'> <center><h1 id = 'debut'>Titre général de la page</h1></center> <center><h2>Titre de niveau 2</h2></center> <p>Corps de texte associé au titre de niveau 2. Blabla blablaBlabla blabla Blabla blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. Blabla blablaBlabla blabla Blabla blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. Blabla blablaBlabla blabla Blabla blabla ... <center><h2>Titre de niveau 2</h2></center> <p>Corps de texte associé au titre de niveau 2. Blabla blablaBlabla blabla Blabla blabla ... <hr> <center><h2>Les balises pour donner des effets de style aux mots</h2></center> <b>texte en gras</b><i>texte en italique</i><s>texte barré</s><u>texte souligné</u> <sub>texte en décalage bas</sub><sup>texte en décalage haut</sup><q>texte entre guillements</q> <i><b>texte en italique et en gras</b></i> <strong>texte en gras</strong><del>texte barré</del><em>texte en italique</em> <hr> <center><h2>Les listes</h2></center> <ul type ='square'>Une liste a  puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol type = 'a'>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> <hr> <center> <h2>Un tableau</h2> <table width = '500' border = '2'> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> </center> <hr> <center><h2>Les images</h2></center> <center><img src ="../images/plongeur1.gif" alt ="plongeur" height = '200'></center> <br> <center><img src ="../images/requin.gif" alt = "requin" width = '200' height ='400'></center> <hr> <center><h2>Les liens hypertextes </h2></center> <a href = 'http://darchevillepatrick.info' target ='_blank' >Tutoriels mis en ligne </a> <br> <a href = 'http://darchevillepatrick.com' target ='_blank' >Blog de Patrick Darcheville </a> <br> <a href = '#debut'>retour haut de page</a> <hr> </body></html>

Aperçu avec votre navigateur (dans un autre onglet)

Essayez !

Commentaire

Attention ce code est obsolète mais vous risquez encore de le rencontrer dans certains sites.

Dans cette page j'ai essayé d'améliorer la mise en forme de la page mais sans utiliser le CSS.
J'ai donc utilisé des balises de formatage de HTML et en particulier le conteneur CENTER. J'ai utilisé aussi des attributs de mise en forme tels bgcolor, border,text, etc.

Vous constatez que désormais les titres de niveau 1 et 2, le tableau et les images sont centrées horizontalement dans la page car à chaque fois les conteneurs H1 ou H2 ou TABLE ou IMG sont inclus dans le conteneur CENTER.

<body bgcolor = 'yellow' text = 'purple'> : ici j'utilise deux attributs de mise en forme bgcolor (backgroundcolor) et text. Donc la page aura une couleur de fond jaune et le texte en violet.

Au fait je rappelle que les attributs de balise sont toujours dans la balise ouvrante (et jamais dans la balise fermante).

<table width = '500' border = '2'> : le tableau aura une largeur de 500 (pixels) et sera borduré avec un trait de 2 pixels d'épaisseur.

<h1 id = 'debut'> :
emploi de l'attribut id (id comme identifiant) pour identifier de façon unique cet élément de la page.

<a href = '#debut'>retour haut de page</a> :
lien hypertexte vers la balise identifiée debut donc vers la balise H1.
Donc la balise A ne sert pas uniquement à produire des liens vers d'autres sites mais aussi à construire des liens vers d'autres pages du même site ou comme ci-dessous vers un endroit précis de la même page.

Pour personnaliser les listes j'utilise l'attribut type.

<ul type ='square'>: dans la liste à puces ces dernières seront des petits carrés (et non pas de petits cercles pleins)

<ol type = 'a'> : dans la liste ordonnées les items seront numérotées par des lettres minuscules (et non pas des chiffres)

<img src ="../images/plongeur1.gif" alt ="plongeur" height = '200'> :
L'attribut alt facilite le référencement du site et le débugage du code. La valeur de l'attribut alt va en effet s'afficher si l'image n'est pas trouvée (chemin relatif incorrect). Les moteurs d'indexation des sites utilisent beaucoup le contenu de l'attribut alt.
L'image va s'afficher non pas avec sa taille d'origine (58 par 116) mais avec une hauteur de 200 pixels.
Le navigateur va automatiquement calculer une largeur d'affichage qui respecte les proportions pour que l'image ne soit pas déformée. Puisque dans l'image d'origine le rapport est 1/2 l'image va s'afficher sur une largeur de 100 pixels (la moitié de 200).

Vous pouvez notez que les images et les liens ne sont plus côte à côte. Nous avons inséré dans le code HTML des balises isolées BR. La balise isolée BR provoque un saut de ligne !

Attention les sauts de ligne dans votre code source ne sont jamais pris en compte par le navigateur. Le navigateur affichera un saut de ligne uniquement si il lit une balise BR ou si il détecte une balise de type block (balise qui provoque un saut de ligne avant et après).

Maintenant je vais vous demander d'oublier ce code et en particulier le conteneur CENTER ainsi que les attributs de mise en forme tels bgcolor, text, border, type, etc.

Utiliser HTML pour mettre en forme une page web aboutit à un code lourd (donc difficile à maintenir). Cette page a été codée comme on le faisait encore il y a une bonne dizaine d'année. Pour styliser une page il faut utiliser CSS. C'est plus simple et tellement plus puissant.

Découverte du CSS

La page intitulée "page4.htm"

Le code de la page

<!DOCTYPE html> <html> <head> <title>page4.htm</title> <style> * {font-family :arial ; color: navy ; } body {width : 600px ; } h1,h2,h3{width : 80%;text-align :center;} table {width : 80% ; } body,h1,h2, h3, table, th {border-width : 1px; border-style : solid ; border-color : red; } img {width :60%; } </style> </head> <body> <h1 id ='debut'>Les balises titres</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <p>Corps de texte du titre de niveau 3 <br>Blabla ... <br>Blabla ...</p> <h1>Un tableau</h1> <table> <tr><th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr><td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td></tr> <tr><td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr><td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td></tr> </table> <h1>Les images</h1> <img src ="../images/toucan.jpg" > <img src ="../images/tortue.jpg" > <br> <a href ='#debut'>Retour haut de page </a> </body> </html>

Aperçu de la page avec votre navigateur (dans un autre onglet)

Essayez !

Nouveauté dans le code

La grande nouveauté est l'apparition dans la partie HEAD de la page du conteneur STYLE.
Entre <style> et <style/> se trouve la feuille de style qui comprend des règles de style écrites en CSS.
Ici nous avons 6 règles de style.

Le sélecteur est plus ou moins complexe.
Pour chaque propriété CSS il faut attribuer une valeur.
Les propriétés entre accolades doivent être séparés par un point virgule !

Structure de la page

Avant d'examiner en détail les différentes règles de style il faut introduire la notion de hiérarchie des balises.
La structure de notre page est la suivante :

<body> <h1></h1> <h2></h2> <h3></h3> <p></p> <h1></h1> <table> <tr></tr> ... </table> <h1></h1> <img /> <img /> <a></a> </body>

Toutes les balises sont contenues dans BODY.
Elles sont toutes "descendantes" de BODY.
H1,H2,H3, P, TABLE, IMG,A sont "descendantes directes" de BODY ou "enfants de BODY.
Tandis que TR sont contenues dans TABLE et sont "enfants" de TABLE et "petits enfants" de BODY.

Examinons maintenant en détail les différentes règles de style

* {font-family :arial ; color: navy ; } :
* est le sélecteur universel (il correspond à toutes les balises). Donc grâce à cette règle de style on remet en cause la mise en forme par défaut d'une page web qui est police : TNR (Times New Roman), couleur de texte : noir. Ici nous demandons l'emploi de la police Arial et comme couleur de texte nous demandons "navy" (bleu marine).

body {width : 600px ; } :
Jusqu'à présent la page s'affichait sur toute la largeur de l'écran. Ici nous demandons que la page s'affiche sur une largeur de 600 pixels seulement.

N'insérez jamais d'espace entre le nombre et px

h1,h2,h3{width : 80%; text-align :center;}:
Dans un sélecteur la virgule se lit "et" . Donc il faut lire "les balises h1 et h2 et h3".
Attention la largeur est ici exprimée en % donc en relatif. Les balises h1,h2,h3 sont contenues dans le container BODY. On dit que ces balises sont des "enfants" de BODY donc la largeur des boîtes titres sera déterminée en pourcentage de la largeur de son container !
Ici les boîtes titres auront une largeur de 480px (600px * 80%) !
Cette façon d'exprimer la largeur des "descendants" de BODY est très souple. Ainsi si dans la feuille de style et pour la la largeur de BODY vous écrivez "1000px" alors les boîtes titres auront une largeur de 800px (80% de 1000px).

table {width : 80% ; }:
Le tableau de la page aura une largeur de 480 pixels puisque la balise TABLE est aussi "descendant direct" de BODY.

body, h1,h2, h3, table, th {border-width : 1px; border-style : solid ; border-color : red; } :
Toutes les boîtes énumérées dans le sélecteur seront bordurées d'un trait de 1 pixel, de style continu et de couleur rouge.

img {width :60%; } :
Les images de la page n'auront pas leur largeur d'origine mais une largeur de 360px (60% de 600px).
Rappel : La hauteur sera recalculée automatiquement afin que les proportions d'origine soient respectées.

Tout ça pour un résultat aussi moche !

J'en conviens avec vous. Le rendu avec le navigateur n'est pas "jojo".
La page n'occupe que 600 pixels de large mais elle est aligné à gauche de l'écran.
Les boîtes H1,H2 et H3 n'ont que 480 pixels de large mais sont alignées à gauche dans la page.
Le tableau n'a que 480 pixels de large mais est aligné aussi à gauche dans la page.
Certaines cellules du tableau ne sont pas bordurées (celles délimitées par la balise TD). Il y a donc un oubli dans le sélecteur !

Le texte du paragraphe (balise P) occupe toute la largeur de l'écran.
P est une balise "block" enfant de BODY et la largeur n'est pas définie dans la feuille de style donc par défaut la largeur est égale à la largeur de son "parent" (BODY).

La page intitulée "page5.htm"

Nous allons améliorer la mise en page dans une nouvelle version : page5.htm

Le code de la page (extrait)

Je vous indique uniquement le code de la partie HEAD puisque le code de la partie BODY est identique à celui de la page précédente.

... <style> * {font-family :arial ; color: navy ; } body {width : 600px ; } h1,h2,h3{width : 80%; text-align :center;} table {width : 80% ; } body,h1,h2, h3, table,th,td {border-width : 1px; border-style : solid ; border-color : red; } img {width :60%; } body, h1,h2,h3, table, img {margin-left : auto; margin-right : auto;} </style> </head>

Remarque

Par rapport à la feuille de style de la page précédente nous avons corrigé le sélecteur de la cinquième règle de style (ajout de td)
Nous avons aussi ajouté une 7ième règle de style :
body, h1,h2,h3, table, img {margin-left : auto; margin-right : auto; } :
Sens : pour les balises énumérées dans le sélecteur il y aura centrage horizontal dans leur boîte parente !

Donc BODY (la page) va désormais être centée horizontalement dans l'écran !
Les boîtes "enfants" de BODY (h1,h2,h3, table, img, a ) vont être centrées horizontalement dans la page !

Rendu avec le navigateur (dans un autre onglet)

Essayez !

Il reste cependant un gros bug ! Les images ne sont pas centrées horizontalement dans cette page ...

L'explication est simple. Certaines propriétés CSS et en particulier la propriété margin :auto ne s'appliquent qu'aux boîtes c'est à dire aux balises de type block. Or IMG e A ne sont pas nativement des balise "block" mais des balises "inline".
Nous allons corriger ce bug dans la page suivante.

La page "page6.htm"

La feuille de style

Ajout dans la feuille de style par rapport à la version précédente :

... img {display :block;} ...

Rendu avec le navigateur

Essayez !

Remarque

Désormais les images sont bien centrées horizontalement dans la page.

Par rapport à la page précédente le code CSS est le même sauf que l'on a simplement inséré une règle de style avant la dernière : img {display : block ; }
Cette règle de style transforme la balise IMG en balise de type block ! Donc les margin-left : auto et margin-right :autos'appliquent alors effectivement aux images de la page !

Par contre le lien n'est pas centré horizontalement ... Mais c'est logique puisque c'est aussi une balise nativement de type "inline" !

Dernier problème et solution

Il y a cependant encore un problème. Les images se touchent par le haut ce qui n'est pas le cas pour les autres boîtes de la page.
Il faut savoir que pour les balises de type "block" il y a des marges hautes et basses par défaut. C'est pour cette raison que nos boîtes titres se suivent sans se "coller" .
Or IMG n'est pas nativement une balise "block" donc n'a pas de "margin-top" et "margin-bottom" par défaut.

Aperçu avec le code définitif (page7.htm)

Essayez !

Rajouts dans la feuille de style

img {margin-top :10px; margin-bottom : 10px; } p {text-align : justify; margin : 5px;}

On rajoute aux images une marge haute et basse.
Pour les paragraphes le texte sera justifié il y aura une marge haute,basse,gauche et droite de 5 pixels.
En effet la propriété margin précise les quatre marges !

CSS et les listes

Exemple 1

Le code de la page (extrait)

... <body> <h1>Les listes avec CSS</h1> <p>On peut changer le style des puces ou numéros grâce à la propriété CSS : <b>list-style-style</b> <br>On peut changer la position des puces ou numéros grâce à la propriété : <b>list-style-position</b>. <h2>Liste à  puces</h2> <p>Par défaut les puces sont des ronds pleins</p> <ul>puces sont cercles pleins <li>item 1</li><li>item 2</li><li>item 3</li> </ul> <ul style = 'list-style-type : square'>puces sont des carrés : <li>item 1</li><li>item 2</li><li>item 3</li> </ul> <ul style ='list-style-type : circle ; list-style-position : inside ;'>puces sont des ronds vides et en intérieur : <li>item 1</li><li>item 2</li><li>item 3</li> </ul> <ul style ='list-style-type : none'>liste à puces sans puces : <li>item 1</li><li>item 2</li><li>item 3</li> </ul> <h2> Listes numérotées</h2> <p>Par défaut numérotation décimale</p> <ol>Liste numérotée avec chiffres décimaux en extérieur : <li>niveau initiation</li><li>niveau approfondissements</li><li>niveau perfectionnement</li> </ol> <ol style = 'list-style-position : inside'>Liste numérotée avec chiffres décimaux en intérieur : <li>niveau initiation</li><li>niveau approfondissements</li><li>niveau perfectionnement</li> </ol> </ol> <ol style = 'list-style-type :upper-roman ; list-style-position : inside; '> Liste numérotée avec chiffres romains en majuscules : <li>niveau initiation</li><li>niveau approfondissements</li><li>niveau perfectionnement</li> </ol> <ol style = 'list-style-type : lower-roman ; list-style-position : inside; '> Liste numérotée avec chiffres romains en majuscules : <li>niveau initiation</li><li>niveau approfondissements</li><li>niveau perfectionnement</li> </ol> <ol style = 'list-style-type :upper-alpha; list-style-position : inside; '> Liste numérotée avec lettres en majuscules : <li>niveau initiation</li><li>niveau approfondissements</li><li>niveau perfectionnement </ol> <ol style = 'list-style-type :lower-alpha; list-style-position : inside;'> Liste numérotée avec lettres en minuscules : <li>niveau initiation</li> <li>niveau approfondissements</li> <li>niveau perfectionnement</li> </ol> </body></html>

Aperçu avec le navigateur

Essayez !

Commentaire

La page affiche d'abord des listes à puces avec différents types de puces voire sans puce… avec les puces tantôt à l'extérieur et tantôt à l'intérieur.
Puis elle affiche ensuite des listes ordonnées avec différents systèmes de numérotation et avec les numéros tantôt à l'extérieur de la boîte et tantôt à l'intérieur .

Nous utilisons deux propriétés CSS : list-style-type pour préciser le style de puce ou de numéro et list-style-position pour la position "in" ou "out" des puces ou numéros.
Les valeurs possibles de la propriété list-style-type pour une boîte UL: disc, square,circle, none
Les valeurs possibles de la propriété list-style-type pour une boîte OL: decimal,upper_roman, lower-roman, upper-alpha, lower-alpha, none
les valeurs possibles de la propriété list-style-position : outside, inside

Ci-dessus j'ai souligné les valeurs par défaut c'est à dire la valeur appliquée lorsque il n'est pas fait mention de la propriété.

Notez que dans cette page le code CSS n'est pas à l'intérieur du conteneur STYLE dans la partie HEAD (feuille de style interne).
Le code CSS est ici dans chaque balise début via l'attribut style. On dit que le "CSS est en ligne".
Nous verrons plus loin que le CSS peut être aussi dans un fichier CSS (fichier d'extension css). On parle alors de feuille de style externe.

Exemple 2

Le code de la page (extraits)

Il s'agit d'un extrait du code de la page.
En effet et à partir de maintenant je ne fais plus mention des premières instructions (doctype, TITLE) et des dernières (balises fermantes BODY et HTM puisque c'est toujours la même chose.

… <style> * { font-family : arial ; font-size : 20px ;} body {width : 400px ; margin : 10px auto 10px auto ; } ol{list-style-type : upper-roman ;} ul{list-style-type : square ; } .interieur {list-style-position : inside; } ul, ol { background-color : yellow; } h1 {text-align : center ; font-size : 150% ; border : 1px solid black ; } </style></head> <body> <h1>Quatre listes</h1> <p>Pour les listes ordonnées : numérotation en chiffres romains majuscules</p> <p>Pour les listes à puces : puces sous forme de carrés </p> <ul>première liste à puces <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ul> <ol>première liste numérotée <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ol> <ul class ='interieur'>deuxième liste à puces <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ul> <ol class ='interieur'>deuxième liste numérotée <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ol> …

Aperçu avec le navigateur

Essayez !

Commentaire de l'aperçu

Les boîtes H1, OL et UL ont la même largeur que la page (400px) et pourtant cette largeur n'est pas précisée dans la feuille de style ...
Par défaut les boîtes "enfants" ont la même largeur que leur boîte "parente". On dit qu'il y a "héritage" (par l'enfant) de la valeur de la propriété width du parent.

Je rappelle que H1,OL, UL sont "enfants" de BODY puisque ces éléments sont contenus dans BODY.
Vous constatez aussi que dans les deux premières listes les puces/numéros sont "out" alors que les dans les deux dernières les puces/numéros sont "in" car on fait appel à une classe. Je vais expliquer plus loin la notion de classe.

Pour les quatre listes on a un fond jaune ... très moche j'en conviens (lol).

Etudions la feuille de style interne !

* { font-family : arial ; font-size : 20px ;} :
Le texte de toutes les balises de la page sera écrit avec la police Arial et tout le texte aura une taille de 20 pixels. Donc on supprime les tailles par défaut en particulier pour les balises H (1 à 6).

body {width : 400px ; margin : 10px auto 10px auto ; } :
La page a une largeur de 400 pixels et est centrée horizontalement dans l'écran.
Ici on décrit les quatre marge avec une seule propriété : margin : haut droit bas gauche

ol{list-style-type : upper-roman ;} : style de numérotation pour les listes ordonnées

ul{list-style-type : square ; } : style de puces pour les listes à puces

.interieur{list-style-position : inside; } : classe nommée interieur qui prévoit que les puces/numéros seront en retrait (sont "in").

ul, ol{ background-color : yellow; } : les boîtes UL et OL auront un fond jaune.

h1 {text-align : center ; font-size : 150% ; border : 1px solid black ; } :
Le texte balisé par H1 sera centré dans sa boîte et la taille sera majorée de 50% par rapport à la taille de référence (celle définie par le sélecteur * ). On dit qu'on exprime la taille en relatif ; c'est très très pratique !

<ul class ='interieur'> :
Nous utilisons l'attribut class avec comme valeur le nom d'une classe. On dit que l'on appelle une classe.
Appeler avec le conteneur UL la classe interieur signifie que l'on applique à cette balise toutes les règles de style définies pour cette classe en plus des formatages prévus pour la balise UL.
Donc ici les puces seront des carrés (mise en forme prévue pour le conteneur UL) et ces carrés seront "in" (mise en forme prévue par la classe interieur.

<ol class ='interieur'> :
Pour cette liste ordonnée les numéros seront des lettres (mise en forme prévue pour le conteneur OL) et les lettres seront "in" (mise en forme prévue par la classe interieur.

h1 {... font-size : 150% ; border : 1px solid black ; } :
Les caractères balisés par H1 auront une taille de 30px (150% de 20px).
border est un raccourci qui remplace border-width, border-style, border-color.
La propriété border est toujours suivie de 3 valeurs : largeur style couleur.

La page intitulée "page10.htm"

Le code de la page (extrait)

… <style> * { font-family : sans-serif ; font-size : 20px; } body {width : 90% ; margin : 10px auto 10px auto ; border :1px solid black; } ol,ul {list-style-position :inside ; } ol.romain {list-style-type : upper-roman ; } ul.carre {list-style-type : square ; } .barbie {background-color : rgb(255,255,0) ; color : rgb(255,0,255) ; border : 1px solid orange; } h1 {width : 80% ; text-align : center ; border : 1px solid black ; font-size : 150% ; } </style> </head> <body> <h1>six listes</h1> <ul>liste à puces - puces : ronds pleins <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ul> <ol>liste ordonnées - numéros : chiffres décimaux <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ol> <ul class = 'carre'>liste à puces - puces : carrés <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ul> <ol class = 'romain'>liste ordonnée - numéros : chiffres romains <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ol> <ul class = 'carre barbie'>liste à puces - puces : carrés <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ul> <ol class = 'romain barbie'>liste ordonnée - numéros : chiffres romains <li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li> </ol> <p class ='romain'>Texte d'un paragraphe</p> …

Rendu du code avec le navigateur

Essayez !

Commentaire

Dans le cadre du "responsive web design" (adaption de la page à tous types d'écrans) la largeur de BODY (la page) est exprimée en pourcentage (en % de la largeur de l'écran).

Remarquez que la boîte H1 est toujours alignée à gauche dans la page.
Que devez vous rajouter dans la règle de style relative au sélecteur H1 pour que cette boîte soit bien centrée horizontalement dans la page ?

Bordurer la page et les titres c'est pas forcément très joli mais dans cette page je l'ai fais pour que vous visualisiez bien les largeurs des boîtes et vous montrez aussi que si text-align :center centre le texte dans sa container il faut aussi que cette boîte soit centrée dans la page (margin : auto).

Dans toutes les listes les puces/numéros sont en "in".

Etudions certaines règles de style !

ol.romain {list-style-type : upper-roman ; } : on crée une classe nommée romain qui est spécifique à la balise OL.
La classeromain ne peut être appelée qu'avec la balise OL !

ul.carre {list-style-type : square ; } : classe nommée carre qui est spécifique à la balise UL.
La classecarre ne peut être appelée qu'avec la balise UL !

.barbie {background-color : rgb(255,255,0) ; color : rgb(255,0,255) ; border : 1px solid orange; } :
on crée une classe universelle nommée barbie.
Une classe universelle peut être appelée avec n'importe qu'elle balise.
Dans la classe barbie les couleurs sont notées selon la syntaxe rgb (red green blue). C'est à dire que l'on indique entre parenthèses l'intensité de rouge, de vert et de bleu. Pour chaque couleur de base l'intensité va de 0 à 255 (2 à la puissance 8).

Etudions maintenant le code HTML.

<ul class = 'carre barbie'> : On peut appeler deux classes via l'attribut class
Les mises en forme prévues par les deux classes et la balise UL s'ajoutent pour styliser la liste.

<p class ='romain'>:
Vous pouvez remarquer dans l'aperçu que le paragraphe n'est pas numéroté.
Cette instruction n'a en effet aucun sens. On ne peut appeler la classe romain avec la balise P !
La classe romain ne peut être appelée qu'avec la balise OL puisqu'il s'agit d'une classe spécifique.
Le navigateur se contente donc d'appliquer que les mises en forme prévues pour le conteneur P.

CSS et les couleurs

On pouvait donc écrire (pour un fond jaune) :

background-color : yellow ou backrgound-color : #FFFF00 ou background-color : rgb(255,255,0) ou encore (toujours en RGB) : background-color : rgb(100%,100%,0%)

Les 16 couleurs de base

Pendant longtemps les navigateurs n'ont reconnu que les noms de 16 couleurs.

Les 16 couleurs de base par ordre alphabétique
nomcode hexadécimalcode RGB
aqua / cyan#00FFFF0,255,255
black#0000000,0,0
blue#0000FF0,0,255
fuchsia / magenta#FF00FF255,0,255
gray#808080128,128,128
green#0080000,128,0
lime#00FF000,255,0
maroon#800000128,0,0
navy#0000800,0,128
olive#808000128,128,0
purple#800080128,0,128
red#FF0000255,0,255
silver#C0C0C0192,0,192
teal#0080800,128,128
white#FFFFFF255,255,255
yellow#FFFF00255,255,0

Vous pouvez remarquez qu'il y a deux paires de synonymes.

Déterminer le code RGB

J'ai mis au point une petite application qui permet d'obtenir le code RGB d'une couleur après avoir déterminé celle-ci grâce à une palette. la boîte à couleurs

Maintenant vous pouvez passer à la deuxième partie de ce tutoriel. Dans cette deuxième étape vous allez approfondir vos connaissances en HTML & CSS. En effet puisque toute la mise en forme de la page est déléguée au CSS l'apprentissage du HTML proprement dit se résume à peu de choses ...
Retour menu