HTML & CSS - premiers pas

HTML : présentation

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.

Terminologie

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 éditeur de textes et un navigateur.
Le premier pour produire les pages de votre site et le second pour vérifier le rendu.

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 coutera 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 cette page.

Pour prendre quelques exemples le texte de la page est balisé. Une balise HTLM indique si une portion de textes est un titre et précise alors son niveau hiérarchique (balises H1 à H6) ou un lien hypertexte (balise A) ou un paragraphe (balise P) ou encore un item de liste (balise LI), etc.

En l'absence de CSS il y a toujours une mise en forme par défaut en fonction de la balise appliquée à la fraction de texte. Mais si vous voulez personnaliser la mise en forme il vous faut rajouter des règles de style écrites avec le langage CSS.
Je prends un seul exemple. Par défaut le texte encadré par la balise STRONG apparait en gras. Mais vous pouvez changer cette mise en forme par défaut. Il vous suffira de créer la règle de style suivante pour que le texte important balise par le conteneur STONG soit en rouge et souligné : strong {font-weight : none ; color : red ; text-decoration : underline ; }

Ma 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 cette page

<!DOCTYPE html> <html> <head> <title>première page</title> </head> <body> J'ai créé ma première page web et je suis très excité ! </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

Testez ce code !

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

Essayons de comprendre ce 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. Cette instruction est indispensable et indique au navigateur que le fichier en question est une page Web qui saura donc comment interpréter le code.
Puis nous avons la balise <html>. Notez que le code se termine par </html>.
En effet les balises fonctionnent 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 + 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ébarrassé 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>

Une balise ouvrante c'est un mot encadré par des chevrons. Exemple : <body>

La balise fin (ou fermante) est identique à la balise début (ou ouvrante) sauf la barre oblique après la parenthèse angulaire ouvrante). Exemple : </body>
Vous verrez plus loin que la balise début contient éventuellement des attributs.
Vous verrez aussi qu'il existe des balises isolées (pas de balise fermante) mais qu'elles sont peu nombreuses.

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.
Nous avons uniquement le conteneur TITLE qui contient un texte. Vous retrouvez ce texte affiché dans la barre de titre de l'onglet ouvert dans le navigateur.

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.

Étudions 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).

Ci-dessous un contre exemple

Essayez !

La page contient du code HTML (le même que la première page) et pourtant il n'est pas interprété par le navigateur mais simplement affiché tout simplement.
Pourquoi ?
Parce que le fichier a pour extension .txt !

Pages avec uniquement du HTML

Nous allons donc supposer dans ce chapitre que CSS n'existe pas (situation avec 1996).

Exemple 1

Le code de cette page (extraits)

<!DOCTYPE html> <html> <head> <title>onglet à fermer</title> </head> <body> <div id ="titres"> <h1 id ="haut" >Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... </div> <hr> <div id ="texte"> <h2>Les balises qui donnent des effets de style aux mots</h2> <p><b>Texte en gras </b><i>texte en italique </i><s>texte barré </s><u>texte souligné </u> <br>Le mot <sub>bas</sub> est en décalage bas <br>Le mot <sup>haut</sup> est en décalage haut <br> Le mot <q>cata</q> est entre guillemets <br><i>Texte en italique mais sans importance particulière</i>. <em> Texte en italique mais important</em> <br><b>Texte en gras mais mais sans importance particulière</b>. <strong> Texte en gras et très important</strong> <br><s>Texte barré mais effet de style</s>. <del> Texte barré mais indiquant une modification importante</del> </div> <!--fin boite texte--> <hr> <div id ="liste"> <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> </div> <!--fin boite liste--> <hr> <div id ="tableau"> <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> </div> <!--fin boite tableau--> <hr> <div id ="images"> <h2>Les images</h2> <img src ="../images/plongeur2.gif" alt ="plongeur" width = "200" > <img src ="../images/requin.gif" alt ="requin" width ="200"> </div> <!--fin boite images--> <hr> <div id ="liens"> <h2>Les liens hypertextes </h2> <a href = '#haut'>Haut de page </a> <a href = 'https://darchevillepatrick.info' target ='_blank'>Mes tutoriels en ligne </a> </div> <!--fin boite liens--> </body></html> Le rendu avec le navigateur

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 textes 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" apparait 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) : HR,BR,IMG,etc.

Alors qu'une balise double (ou conteneur) peut contenir d'autres balises une balise simple (ou isolée) ne le peut pas.
Donc ne dites jamais que la balise IMG est un conteneur !

Balises "block" et balises "inline"

Dans cette page on utilise ensuite différents balises doubles: 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), les balises DIV et P.

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 les éléments "inline" se positionnent côte à côte tandis que les éléments "block" se positionnent les uns en dessous des autres.
Donc pour provoquer un saut de ligne entre deux balises "inline" vous êtes obligé d'insérer la balise BR !

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

Mais revenons à certaines balises :

Avec B et STRONG le texte est en gras mais la balise STRONG a aussi un rôle sémantique ; elle précise que le texte est très important.
Avec I et EM le texte est en italique mais la balise EM a aussi un rôle sémantique ; elle précise que le texte est important.

Les listes

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.

Les tableaux de données

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 le conteneur TH est affiché en gras et est centré horizontalement dans la cellule mais ici ça ne se voit pas ...

Les images

Nous avons ensuite deux images qui ont été insérées dans la page. Il s'agit deux images "gif". 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 de l'image par rapport à la page appelé "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" >
Il y a aussi un attribut facultatif mais fortement conseillé : alt. Si l'image n'est pas affichée (car la valeur de l'attribut src est fausse) alors c'est le texte associé à alt qui s'affiche !

Les deux images sont côte à côte. En effet la balise IMG est une balise "inline" : les éléments "inline" se positionnent côté à côte sur la ligne..

Les liens

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 revenez en haut de page : vers la balise identifiée "haut". Il s'agit donc d'un lien vers une "ancre". Pour créer une "ancre" il faut utiliser l'attribut ID.
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é (ou "#nomId" s'il s'agit d'un lien vers une ancre)
Il existe aussi un attribut facultatif target avec pour valeur "_blank" . Ainsi la cible du lien est affichée dans une nouvelle fenêtre (ou nouvel onglet).
Notez que les liens hypertextes sont affichés en bleu souligné par défaut et qu'ils sont côte à côte. En effet A est aussi une balise "inline".

Les DIV

J'ai structuré la page avec des conteneurs DIV et pourtant rien n'apparait ...
C'est normal il n'y a aucune mise en forme par défaut associée à cette balise.
Div sert a un rôle sémantique : créer des grandes divisions de la page. Pour identifier sans ambiguité une boite DIV il faut lui attribuer une ID unique ! C'est ce que je fais ici : titres, texte, tableaux, listes, etc.
Pour mettre en forme une boite DIV il faut utiliser le CSS.
Notez que chaque balise fermante du conteneur DIV est suivie d'un commentaire HTML

Exemple 2

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'></center> <hr> <center><h2>Les liens hypertextes </h2></center> <a href = 'http://darchevillepatrick.info' target ='_blank' >Tutoriels mis en ligne </a> <br> <a href = '#debut'>retour haut de page</a> <hr> </body></html>

Aperçu avec votre navigateur


Testez ce code !

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 la balise double CENTER.

<body bgcolor = 'yellow' text = 'purple'> : ici j'utilise deux attributs de mise en forme bgcolor 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.

Identifier une balise de la page permet entre autres de créer un lien vers cette balise (créer une "ancre").

<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 à créer 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 dans 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/plongeur2.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).

Attention les sauts de ligne dans votre code source ne sont jamais pris en compte par le navigateur qui affichera un saut de ligne uniquement s'il lit une balise BR ou s'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 les conteneur CENTER, BIG, STRIKE ainsi que les attributs de mise en forme tels bgcolor, text, border, type, etc. d'ailleurs toutes ces balises et attributs sont considérés comme obsolètes par le W3C.

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 vingtaine d'année. Pour formater une page il faut utiliser CSS. C'est plus simple et tellement plus puissant.

Découverte du CSS

Je vais illustrer mon propos au travers d'une page dont le code CSS sera sans cesse amélioré !

Version 1 de la page

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


Essayez !

Nouveauté dans le code HTML

La grande nouveauté est l'apparition dans la partie HEAD de la page du conteneur STYLE qui contient le code CSS.

Nous pourrons donc dire que désormais dans une page web nous avons du code CSS (pour mettre en forme le texte) et du code HTLM pour structurer le texte (hiérarchie du texte et sémantique).
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 : une balise HTML ou plusieurs séparées par des virgules.
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>

Tous les éléments sont contenus dans BODY.
Ils sont tous "descendants" de BODY. On peut dire aussi que BODY est le parent des autres éléments de la page.
H1,H2,H3, P, TABLE, IMG,A sont "descendants directs" de BODY ou "enfants" de BODY.
Tandis que les TR sont contenus dans TABLE et sont "enfants" de TABLE et "petits enfants" de BODY.
Cette notion de hiérarchie des éléments HTML est fondamentale car dans le cadre du CSS les "descendants" héritent en général du style défini au niveau du "parent" : application en "cascade" ou héritage.

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".
Les boites H1 à H3 auront pour largeur 80% de celle de leur parent (c'est à dire BODY). On dit que la dimension est exprimée de façon relative.
Donc les boites "titres" auront une largeur de 480px (600px * 80%) tant que BODY aura une largeur de 600px. Mais si la largeur de BODY passe à 900px ...

table {width : 80% ; }: les tableaux de la page auront une largeur de 480 pixels tant que BODY aura une largeur de 600px.

body, h1,h2, h3, table, th {border-width : 1px; border-style : solid ; border-color : red; } : toutes les boites énumérées dans le sélecteur seront bordurées d'un trait de 1 pixel, de style continu et de couleur rouge.
La propriété CSS "border" est l'une des rares propriétés non héritables ; donc on est obligé d'énumérer dans le sélecteur toutes les balises qui doivent être bordurée.

img {width :60%; } : les images de la page n'auront pas leur largeur d'origine mais une largeur de 60% du conteneur parent (donc de BODY). Il s'agit donc encore d'une largeur exprimée de façon relative.
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 et surtout elle est alignée à gauche de l'écran ce qui est moche !
Les boites H1,H2 et H3 n'ont que 480 pixels de large et 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" et "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). C'est ce qu'on appelle l'héritage.

Version 2 de la page

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

Le code de la page (extrait)

Je vous indique uniquement le code de la feuille de style puisque le code de la partie BODY est toujours le même !

... <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 septiè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 boite parente !

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

Rendu avec le navigateur


Testez ce code !

Il reste cependant un gros BUG ! Les images ne sont pas centrées horizontalement dans cette page malgré la règle de style ..., img {margin-left : auto; margin-right : auto;}. Et pourquoi cette absence de centrage horizontal ???

L'explication est simple. Certaines propriétés CSS et en particulier le centrage horizontal ne s'appliquent qu'aux boites c'est à dire aux éléments de type block. Or IMG et A sont nativement des balise de type "inline".
Donc pour l'instant la règle CSS prévoyant le centrage horizontal des images n'est pas appliquée.

Version 3 de la page

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

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

Rendu avec le navigateur


Testez la version corrigée !

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 pour cette page. Donc désormais le centrage horizontal va s'appliquer aux images de la page.

Version 4 de la page

Il y a cependant encore un petit problème : les images se touchent par le haut ce qui n'est pas le cas pour les autres boites de la page.
Il faut savoir que pour les balises de type "block" il y a des espacements verticaux (marges haute et basse) par défaut. C'est pour cette raison que nos boites "titres" se suivent sans se toucher.
Or IMG n'est pas nativement une balise "block" donc n'a pas de "margin-top" et "margin-bottom" par défaut.

Ajouts dans la feuille de style

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

Donc la feuille de style définitive après réorganisation est la suivante :

* {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{display : block ; width :60%; margin-top :10px; margin-bottom : 10px;} body,h1,h2,h3,table,img {margin-left : auto; margin-right : auto;} p {text-align : justify; margin : 5px;}

J'ai rajouté pour les images une marge haute et une marge basse.
Pour les paragraphes le texte sera désormais justifié ; il y aura une marge haute, basse, gauche, droite de 5 pixels.
En effet la propriété margin suivie d'une seule valeur précise une taille unique pour les quatre marges.

Aperçu de la page avec cette feuille de style définitive


Testez !

CSS et les listes

Exemple 1

Le code de la page (extrait)

... <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> ...

Commentaire

La page va afficher 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 affichera 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 liste à puces: disc, square,circle, none
Les valeurs possibles de la propriété list-style-type pour une liste ordonnée: 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). mais à l'intérieur de chaque balise via l'attribut STYLE. On dit que le CSS est "en ligne". Cette solution n'a de sens que si chaque règle de style ne s'applique qu'à un élément de la page.
Dès qu'une règle de style concerne plusieurs éléments HTML de la page il faut privilégier la feuille de style (interne et/ou externe).
Nous verrons en effet plus loin qu'une feuille de style peut être commune à plusieurs pages si elle est matérialisée sous forme d'un fichier d'extension .css (feuille de style externe). Dans chacune des pages concernées il y a alors un lien vers la feuille de style externe. On dit que le CSS est externalisé !

Rendu du code avec le navigateur


Testez !

Liste : exemple 2

Le code de la page (extraits)

… <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 !

Les boites 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 éléments "enfants" ont la même largeur que leur "parent". 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 ci-dessous la notion de classe.

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

A propos de la feuille de style

* { 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 des items de liste seront en retrait (sont "in") si cette classe est appliquée à la liste.

ul, ol{ background-color : yellow; } : les boites 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 des caractères sera majorée de 50% par rapport à la taille de référence : celle définie par le sélecteur * : 20px.
border est un raccourci qui remplace border-width, border-style, border-color.
La propriété "méga propriété" border est toujours suivie de 3 valeurs : largeur style couleur.

A propos du HTML

<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 à cet élément 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.

Exemple 3 : les listes

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

Testez ce code !

Dans le cadre du "responsive web design" (adaptation de la page à tous types d'écrans) la largeur de BODY (la page) est exprimée en pourcentage. La largeur de la page sera toujours égale à 90% de celle de l'écran !
Donc même sur un petit écran la page ne sera jamais rognée.

Remarquez que la boite 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 boite 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 fait pour que vous visualisiez bien les largeurs des boites et vous montrer aussi que si text-align :center (centrer le texte dans sa boite parente) il faut aussi que cette boite soit centrée dans son conteneur (margin-left : auto & margin-right : auto) pour que le titre apparaisse centré dans la page

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

La feuille 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).

Une classe universelle a la syntaxe suivante : .nomclasse{...}
Une classe spécifique (à une balise) a la syntaxe suivante : balise.nomclasse{...}

Le 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 formater 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 pas 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.
L'instruction est donc erronée mais heureusement le navigateur "ne plante pas" ; il se contente d'appliquer seulement les styles prévus pour la balise 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 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 boite à couleurs

Avec le CSS3 on peut exprimer les couleurs en RGBA. Je n'en dis pas plus. Voir le tutoriel CSS dans le même site.

Maintenant vous pouvez passer à la deuxième partie de ce tutoriel (en repassant par le menu).
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