2 - Structure basique de votre première page
Nous avons vu jusqu’à présent comme afficher un simple texte à l’écran. Une page html est bien plus que cela vous vous en doutez bien.
Néanmoins, nous ne savons toujours pas comment différencier les affichages des paragraphes dans l’en-tête et dans section par exemple. Pas plus que nous ne savons comment changer l’espace entre deux paraphrases autrement qu’en utilisant la balise <br /> directement dans le fichier html.
I – Les balises structurelles de base
Structure de la partie visible :
Chaque page de votre site devra avoir son propre code HTML, avec un nom d’enregistrement différent. Ainsi, si vous avez 500 pages, vous aller devoir créer 500 fichiers HTML.
Voilà la structure minimale habituelle du contenu visible d’une page :
- Un en-tête (tout en haut habituellement) : on y trouve souvent le titre ou le logo du site.
- Une barre de navigation : les liens qui permettent de sauter d’une partie à l’autre.
- La zone de contenu : c’est là que se trouve les articles.
- Le pied de page : on y trouve les références du site, les moyens de contacter les auteurs … On le trouve habituellement en bas de page.
Nous allons pouvoir indiquer au navigateur si un texte ou une image se trouve dans l’en-tête ou le pied de page par exemple. A quoi cela va-t-il lui servir ? Et bien à choisir la priorité des éléments à afficher par exemple en cas de difficulté de téléchargement ou autres. On peut toujours se passer du pied de page dans un premier temps, c’est plus difficile sans le contenu.
Voilà le nom des balises structurantes que nous allons utiliser dans un premier temps :
- <header> pour l’en-tête.
- <nav> pour la navigation.
- <section> pour le contenu.
- <footer> pour le pied de page.
Le squelette de la structure du contenu d’une page ressemble donc à ceci :
<header>
</header>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
Si nous remplissions un peu ?
<header>
<h3>Le titre de mon site</h3>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases puisque c'est la partie la plus encombrante de la page habituellement.</p>
<p>J'en profite pour vous montrer comment utiliser la balise strong pour <strong>renforcer</strong> une partie d'un texte.</p>
<p>Il est également possible d'utiliser la <em>balise em</em>, ce n'est pas très compliqué...</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués, c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration de votre présentation.</h6>
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
</section>
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
01° Tester ce code. On ne peut pas dire qu’on puisse clairement voir à quoi correspond chaque bloc, mais c’est bien dans l’ordre, si si. Le fond (le contenu pur) de la page est là. Mais sans la forme.
Remarque : contrairement à Python, la tabulation n’a ici aucun rôle sémantique : le navigateur ne les voit pas. Par contre, veuillez à respecter la structure qui consiste à tabuler dès qu’on rentre dans une nouvelle balise : cela permettra à la personne qui lit votre code de mieux le comprendre.
Remarque 2 : Pour faire tabuler tout un bloc d’instructions, il suffit de les sélectionner à la souris et d’utiliser la touche TAB.
Remarque 3 : Si vous voulez voir le texte affiché sans avoir besoin d’aller loin à droite, vous avez donc le droit de passer à la ligne et de tabuler : ça ne changera rien pour le navigateur : il n’interprète pas le passage à la ligne dans votre code comme un passage à la ligne à afficher à l’écran : les deux lignes de code ci-dessous seront affichées de la même façon.
En exemple, deux fois le même code qui donnera le même rendu, à savoir ceci :
<p>Nous allons pouvoir faire ici de très longues phrases puisque c'est la partie la plus encombrante de la page habituellement.</p>
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
Ce qui donne le rendu suivant en fond coloré :
Nous allons pouvoir faire ici de très longues phrases puisque c'est la partie la plus encombrante de la page habituellement.
Nous allons pouvoir faire ici de très longues phrases puisque c'est la partie la plus encombrante de la page habituellement.
Pour y voir un peu plus clair, nous allons devoir faire appel au CSS pour changer au moins la couleur du fond de chaque partie. Cela nous permettra de travailler dans de meilleures conditions. Néanmoins pour l’instant, le code ne contient que des informations sur le contenu (le fond) à afficher. Nous allons devoir séparer les informations données en deux : le fond en HTML et la forme en CSS.
Tout ce que nous venons de voir est visible à l’écran : nous allons l’inclure dans une nouvelle balise : la balise <body>.
02° Jouer sur la tabulation de tout le texte et rajouter les balises <body> et </body> pour entourer l’ensemble de ce que vous aviez codé pour l’instant.
<body>
<header>
</header>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
</body>
Maintenant que nous avons clairement délimité la zone où on doit mettre le contenu visible, il nous reste à la voir la structure des informations fournies au navigateur mais que n'apparaissent pas à l'écran.
Structure de la partie invisible :
Dans la balise <body> nous avons donné le contenu, le « corps » de la page.
Dans une autre balise nommée <head>, nous pouvons donner au navigateur plein d’informations qui n’ont pas à être affichées dans la fenêtre d’affichage du navigateur. Nous pouvons ainsi lui donner simplement :
- l’encodage de la page : nous allons lui indiquer comment les caractères sont codés sous forme numérique (voir les parties 7 et 8 sur l’encodage dans la section Python). L’encodage UTF-8 est devenu la norme pour l’instant.
- le titre de la page : c’est ce qui va s’afficher sur l’onglet de votre navigateur (aller voir la page que nous venons de créer, vous devriez uniquement avoir l’adresse du fichier HTML pour l’instant)
- la langue utilisée sur la page
- le nom et la localisation du fichier CSS à utiliser !
Ce qui se traduit en code html par :
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
On voit bien que certaines balises sont orphélines (elles ne possèdent pas de balises de fermeture : <meta> et <link>.
Les balises <meta> permettent de fournir des informations au navigateur en fonction des attributs nommés dans la balise : ils sont ici colorés en rouge.
- charset permet de définir comment sont enregistrés et lus les chaînes de caractères. Nous verrons plus tard que les ordinateurs ne stockent que des nombres. Il faut donc utiliser un système codé pour enregistrer des lettres ou d'autres caractères. Cela s'appele l'encodage. On remarquera d'ailleurs qu'on doit fournir l'encodage sous la forme d'une chaîne de caractères comprise entre deux doubles apostrophes. Les chaînes de caractères apparaissent ici colorées en vert.
- http-equiv et content permettent de préciser le langage dans lequel la page est écrite (cela permet aux moteurs de recherche de fournir en priorité les sites proposant le langage de l'utilisateur).
Les balises <link> permettent de fournir au navigateur les adresses d'autres fichiers nécessaires à l'affichage de la page en cours. Ici, il s'agit via l'attribut rel valant "stylesheet" de fournir l'adresse d'une feuille de style css. Nous les verrons un peu plus loin dans l'activité. Pour l'instant, nous fournissons une addresse via href="style_1.css" sans que cela ne puisse être lu puisque vous n'avez pas encore créé le fichier "style_1.css". La balise <link> ne sert donc, pour l'instant, à rien.
La grande nouveauté est donc qu'on peut transmettre des informations dans les balises à l'aide des attributs.
L’ensemble formé par les balises <head> et <body> forme la page HTML. En bien, nous allons le dire au navigateur en utilisant une balise <html>. D’ailleurs, la première ligne du code va servir à signaler au navigateur que nous travaillons en html.
Voilà la structure finale sans code interne :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Voilà la structure finale avec code interne :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<header>
<h3>Le titre de mon site</h3>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<p>J'en profite pour vous montrer comment utiliser la balise
strong pour <strong>renforcer</strong> une partie d'un texte.</p>
<p>Il est également possible d'utiliser la <em>balise em</em>, ce
n'est pas très compliqué...</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
de votre présentation.</h6>
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
</section>
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
</body>
</html>
Comme nous n’avons pas encore créé le fichier css, nous allons mettre sa référence en commentaire de façon à ce que le navigateur ne l’utilise pas.
03° Utiliser le code ci-dessus. Mettre la ligne de la référence CSS en commentaire et lancer le code pour vérifier qu’il fonctionne normalement, c’est à dire que rien n’a changé par rapport au cas précédent. Le commentaire devrait apparaître en vert dans Notepad++. Par contre, nous avons donné un titre à la page et il devrait apparaître sur l’onglet du navigateur. Le voyez-vous ?
<!-- <link rel="stylesheet" href="style_1.css" /> -->
Bien, nous allons bientôt gérer la forme en utilisant le CSS dans sa version moderne.
Néanmoins, pour parvenir à voir un peu mieux la structure de votre page en cours, nous allons faire une page HTML à l’ancienne : nous allons mélanger le fond et la forme dans le même fichier. On peut en effet utiliser le CSS directement depuis le code HTML. Pour cela, il faut définir le style d’affichage dans le nom de la balise elle-même :
04° Remplacer le code des balises d’ouverture ci-dessous (au bon endroit) par les codes suivants :
<header style="background-color:green;">
<nav style="background-color:red;">
<section style ="background-color:silver;">
<footer style ="background-color:blue;">
Voyez-vous mieux la structure que nous venons de créer ? Bon, ça pique un peu les yeux mais au moins, on voit bien lorsqu’on passe d’une balise structurelle à l’autre.
Comme vous pouvez le voir, l'utilisation de l'attribut style permet de donner des instructions liées à la couleur du fond de la balise (background-color ici).
Pourquoi y-a-t-il du blanc entre les zones ? Il s’agit de la couleur de base du corps de la page, le body.
05° Changer la couleur du fond (du body donc). En noir (black) ? En purple ?
...CORRECTION...
<body>
est à remplacer par :
<body style ="background-color:black;">
Que les choses soient claires : mettre du CSS directement dans du HTML est contre-productif : le CSS a été créé pour modifier automatiquement toutes les pages à l’aide des mêmes lignes de code. Si vous placez la couleur de vos parties directement sur vos pages, vous allez devoir :
1-Les taper à chaque fois.
2-Les modifier une à une sur chacune de vos pages en espérant ne pas vous tromper ou en oublier une.
Bref, sauf cas exceptionnel, on ne gère pas la forme du fond à l’aide de la méthode que nous venons de voir.
Résumé
Nous avons donc vu comment une page devait être structurée :
Une première ligne indiquant qu’il s’agit d’un code HTML
Une balise html contenant deux balises :
- La balise head qui contient les balises d’informations pour le navigateur dont la forme (CSS) du contenu.
- La balise body qui contient le corps du texte, le fond du contenu.
- Une balise header
- Une balise nav
- Une balise section
- Une balise footer
Pour l’instant, la forme donnée aux textes par les différentes balises est la forme par défaut du navigateur. Nous pourrons plus tard modifier par exemple la forme donnée par une balise <strong> à l’aide du CSS.
II – Les couleurs et leurs codes
Nous allons faire un petit chapitre sur la gestion des couleurs en HTML et CSS. En effet, il existe un très grand nombre de façon de définir une couleur.
La première façon d’imposer une couleur est d’utiliser un nom prédéfini (ce qu’on a fait juste au dessus avec red, green, yellow …) : background-color:green; fonctionne très bien.
La deuxième façon est de donner les intensités RGB : background-color:rgb(0,255,0); donnera le même résultat que précédemment comme nous l’avons vu (ou allons le voir) lors de l'activité sur les images.
06° Définir les couleurs en utilisant les intensités RGB en décimal plutôt que les noms (voilà un court extrait des couleurs disponibles par leur nom) :
| Nom | Int. R | Int. G | Int. B | Exemple | Hexa |
|---|---|---|---|---|---|
| black | 0 | 0 | 0 | #000000 | |
| gray | 128 | 128 | 128 | #808080 | |
| silver | 192 | 192 | 192 | #C0C0C0 | |
| white | 255 | 255 | 255 | #FFFFFF | |
| red | 255 | 0 | 0 | #FF0000 | |
| maroon | 128 | 0 | 0 | #800000 | |
| lime | 0 | 255 | 0 | #00FF00 | |
| green | 0 | 128 | 0 | #008000 | |
| blue | 0 | 0 | 255 | #0000FF | |
| navy | 0 | 0 | 128 | #000080 | |
| aqua | 0 | 255 | 255 | #00FFFF | |
| teal | 0 | 128 | 128 | #008080 | |
| fuchsia | 255 | 0 | 255 | #FF00FF | |
| purple | 128 | 0 | 128 | #800080 | |
| yellow | 255 | 255 | 0 | #FFFF00 | |
| olive | 128 | 128 | 0 | #808000 |
La troisième façon est de donner le code hexa, ce qu’on appelle le code HTML : background-color: #aabbcc ;
C’est la façon la plus courante de présenter une couleur en HTML.
07° Définir les couleurs sur votre page en utilisant plutôt les codes HEXA .
...CORRECTION...
<header style="background-color:#008000;">
<nav style="background-color:#FF0000;">
<section style ="background-color:#C0C0C0;">
<footer style ="background-color:#0000FF;">
Le code hexadécimal correspond en réalité au code RGB mais l’intensité décimale 0 à 255 est remplacée par l’intensité en hexadécimal de 0 à FF.
Ainsi rgb(0,0,0) en décimal correspond à #000000 en hexadécimal.
De la même façon, rgb(255,255,255) en décimal correspond à #FFFFFF en hexadécimal.
Comprendre l'hexadécimal
Pour transformer un nombre hexadécimal en nombre en base 10 (notre base naturelle puisqu’on a 10 doigts), il faut savoir que :
- Le bit le plus à droite est nommé le bit de poids faible car il code uniquement 1, ou 160.
- Le bit juste d’à côté code 16, ou 161.
- Celui d’encore après code 256, ou 162.
- ...
La différence avec le décimal ou le binaire vient de l'existence de 'nouveaux' chiffres :
- Le 0 vaut 0
- Le 1 vaut 1
- Le 2 vaut 2
- ...
- Le 9 vaut 9
- Le A vaut 10
- Le B vaut 11
- Le C vaut 12
- Le D vaut 13
- Le E vaut 14
- Le F vaut 15
Voilà un exemple pour un nombre hexadécimal de 4 bits, M = A9FE.
| Nombre M = | A | 9 | F | E |
| Les bits codent | 4096 | 256 | 16 | 1 |
| On obtient donc | 10*4096 | 9*256 | 15*16 | 14*1 |
D'ou la valeur de M en base 10 : M = 10*4096 + 9*256 + 15*16 + 14*1 = 43518.
08° En utilisant le rappel sur l'hexadécimal, montrer que le nombre hexa 80 correspond à 128. A quoi correspond FF ? F2 ?
...CORRECTION...
(80)16 correspond à (8*16+0*1)10 = (128)10
(FF)16 correspond à (15*16+15*1)10 = (255)10
(F2)16 correspond à (15*16+2*1)10 = (242)10
Le code HTML est donc simplement le code RGB mais exprimé en hexadécimal.
Le rouge (255,000,000) est donc représentée par # FF 00 00.
L’olive (128,128,000) est donc représentée par # 80 80 00.
Cas particulier : il est possible que les trois intensités RGB soit représentée par trois doublets identiques en hexa :
La couleur #00FFFF soit 00 FF FF pourra alors être codée par #0FF.
Voyant uniquement trois chiffres, le navigateur va recréer le vrai code en doublant les nombres : #00FFFF.
Une quatrième façon est de donner les composantes RGB en %, 100% représentant 255 : background-color : rgb(20%,50%,30%);
Vous pouvez faire un essai ou deux si vous voulez mais je pense que vous avez compris le principe.
Nous avons désormais fait le tour des notions sur les couleurs à l’aide des parties Python et HTML : nous avons vu que l’intensité était codée sur 8 bits et donc de 000 à 255 en décimal ou de 00 à FF en hexadécimal.
III – Introduction à la gestion de la forme via le CSS
09° Créez un nouveau document avec Notepad++. Précisez bien un encodage UTF-8 et que le langage est le CSS. Enregistrer le fichier sous le nom style_1.css.
Après l'avoir créé, vous devriez avoir cela dans votre répertoire de travail :
votre dossier de travail
ma_page.html
style_1.css
10° Créer un fichier HTML à partir de la source suivante. Vérifiez bien que dans la balise head le fichier CSS indiqué soit bien nommé style_1.css.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<header>
<h3>Le titre de mon site</h3>
<p>La phrase est située dans mon header</p>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<p>J'en profite pour vous montrer comment utiliser la balise
strong pour <strong>renforcer</strong> une partie d'un texte.</p>
<p>Il est également possible d'utiliser la <em>balise em</em>, ce
n'est pas très compliqué...</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
de votre présentation.</h6>
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
</section>
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
</body>
</html>
11° Créer un second fichier HTML à partir du code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<header>
<h3>C'est la seconde page</h3>
<p>La phrase est située dans mon header</p>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence mon deuxième article !</h1>
<br />
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
</body>
</html>
Vous avez donc désormais deux pages HTML pointant vers le même fichier css nommé style_1.css. Si on modifie le code css cela va donc automatiquement modifier la forme sur les deux pages. L’uniformité entre les différentes pages est ainsi garantie.
12° Ouvrez vos deux pages HTML dans le navigateur. Les couleurs doivent avoir totalement disparues : nous sommes revenus aux modes par défaut pour lesquelles la couleur de fond est toujours le blanc.
Commençons par remettre un peu de couleur sur la page.
Pour cela, nous allons devoir préciser sur quel(s) éléments la couleur de fond (background-color) doit s’appliquer.
Dans style_1.css, la codification est la suivante si on veut par exemple avoir un menu de navigation colorée :
nav /* Voilà un commentaire : c'est ici qu'on modifie la forme de nav */
{
background-color:#AAAA00;
}
Ici, on voit que nous allons modifier les balises nommés nav.
Sur ces objets, nous allons définir une propriété (couleur de fond, background-color) à la valeur #AAAA00.
On code la fin de l’instruction par un point-virgule, ne l’oubliez pas.
On remarquera l’utilisation des accolades ou brackets { et } pour signaler le début et la fin des informations de forme s’appliquant à la balise précisée en début d’accolades.
J’ai rajouté tout de suite la façon de faire des commentaires. Résumons la façon de faire des commentaires :
En Python : # Commentaires
En HTML : <!-- Commentaires -->
En CSS : /* Commentaires */
13° Rajoutez les noms des balises body, header, nav, section et footer dans le CSS et définissez un ensemble de propriétés-couleurs de fond (via background-color qui ne vous fera pas trop mal aux yeux.
Remarque : Il existe de multiples sites d’infographie qui peuvent vous enseigner à faire un choix pertinent de couleurs. Cette partie de la conception d’un site sort du cadre de l’ICN mais vous pouvez vous renseigner si vous avez vraiment du mal à obtenir un rendu pas trop moche.
Remarque 2 : on peut vouloir modifier à l’identique deux balises. Imaginons qu’on veille rendre identique le header et le footer.
On peut alors écrire utiliser une seule accolade en séparant les éléments identiques par des virgules
header, footer /* Les deux auront les mêmes effets de forme */
{
background-color:#AAAA00;
}
Bien, nous remarquons que le fond est toujours blanc : c’est normal, nous n’avons rien défini pour la balise body.
Imaginons qu’on désire un texte en blanc, partout.
La propriété correspondant à la couleur du texte est color.
La valeur correspondant à blanc est white ou #FFFFFF ou #FFF ou rgb(255,255,255) ou rgb(100%,100%,100%).
On peut donc écrire :
color :white;
Comment faire pour sélectionner toutes les balises et affecter tous les objets de la même façon ? Il faut utiliser l’étoile *.
14° Ainsi, ceci devrait modifier tous les textes de votre page et les afficher en blanc :
*
{
color:white;
}
Remarque : comme pour le HTML, le CSS ne lit pas les sauts de lignes et les espacements multiples. La présentation donnée ici permet à un utilisateur de comprendre rapidement l’enchaînement des propriétés associées à la balise.
On aurait très bien pu simplement noter :
* {color:white;}
15° Et si vous vouliez que les paragraphes p aient le texte en jaune ? A vous de coder.
...CORRECTION...
p
{
color:yellow;
}
16° Ca commence à faire beaucoup de style. La possibilité qu’on oublie qu’une balise avait déjà été définie est réelle. Imaginons le code donné ci-dessous. A votre avis, quelle va être la couleur du texte des paragraphes ? J’ai enlevé les espaces et les sauts de lignes pour avoir un code plus condensé mais moins lisible. Donner votre réponse pour les deux cas et lancer ensuite le code à tour de rôle :
*{color:white;}
p{color:black;}
p{color:pink;}
...CORRECTION...
Toutes les balises sont configurées avec un texte blanc.
Les balises p sont configurées avec un texte noir qui est ensuite écrasé par un texte rose.
Les balises auront donc un texte blanc, exceptées les balises p qui auront un texte rose.
*{color:white;}
p{color:pink;}
p{color:black;}
...CORRECTION...
Toutes les balises sont configurées avec un texte blanc.
Les balises p sont configurées avec un texte rose qui est ensuite écrasé par un texte noir.
Les balises auront donc un texte blanc, exceptées les balises p qui auront un texte noir.
Vous devriez avoir vu que le deuxième définition du classe paragraphe a écrasé à chaque fois celle donnée juste au dessus. Il s’agit de la première règle de choix des priorités : lorsque deux éléments ayant le même rang sont donnés et veulent modifier la même propriété, le dernier inscrit gagne la mise. Si vous placez plusieurs balises ayant le même nom dans votre fichier css, c’est la valeur de celui le plus bas dans le code qui sera activée.
17° Et là ? Quelle va être la couleur de texte de votre paragraphe ?
p{color:pink;}
p{color:black;}
*{color:white;}
Voilà : seconde règle de priorité : un élément plus précis qu’un autre gagne en priorité : la balise p étant plus précise que la balise *, c’est la définition de p en noir qui prime. Dans l’ordre croissant, on obtient donc :
La version par défaut du navigateur : certainement noir.
La moins forte : la couleur de *.
La plus forte : la couleur de la seconde balise p qui remplace la première.
Vous pouvez voir la balise * comme voulant dire « Change l’élément sauf si un ordre plus précis concernant une balise précise est donnée ». Ainsi même en mettant la balise * à la fin, vous ne parviendrez pas à modifier les valeurs précédentes : la balise * est la balise la moins prioritaire puisqu’elle englobe tout par définition.
18° Et là ? Quelle va être la couleur de fond (background-color) des paragraphes ?
body {background-color:green;color:yellow;}
p{color:pink;background-color:orange;}
section {background-color :#999955;color:red;}
p{color:black;}
Explication :
Puisqu’on cherche à connaître la couleur de fond de p, la définition la plus précise est celle de … p. Et la seconde écrase la première. On aura donc un fond orange pour les balises p.
Sinon, dans l’ordre croissant des possibilités :
La version par défaut du navigateur : aucune (on prendra donc la couleur de la balise qui contient le p).
La moins forte : la couleur de fond de body qui contient les balises qui contiennent des p.
Au dessus : la couleur de section pour les paragraphes contenus dans section mais pas les autres.
La plus forte : la couleur de p : orange.
Tous les paragraphes auront donc un fond orange (et un texte noir).
19° On continue. On enlève la dernière ligne. Quelle va être la couleur de fond (background-color) de vos paragraphes p ?
body {background-color:green;color:yellow;}
section {background-color :#999955;color:red;}
p{color:black;}
Et bien la réponse n’est pas unique : il suffit de reprendre le raisonnement de la partie d’avant en s’arrêtant avant d’arriver à la partie sur p. Comme il n’existe pas de background-color propre à p, il faut regarder dans quoi p est contenu :
La version par défaut est aucun (transparent, on prend la couleur de la balise contenant p).
Un paragraphe p contenu dans section va avoir un fond #999955 car le background-color de section va écraser celui de body.
Sinon, les autres paragraphes vont avoir un fond correspondant à body, donc green.
Un dernier exemple (avec page html et css à changer) :
Code html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Premiers pas HTML en ICN</title>
<meta http-equiv="content-Language" content="fr" />
<link rel="stylesheet" href="style_1.css" />
</head>
<body>
<header>
<h3>Le titre de mon site</h3>
<p>La phrase est située dans mon header</p>
</header>
<nav>
<ul>
<li>Accueil</li>
<li>Partie 1</li>
<li>Partie 2</li>
</ul>
</nav>
<section>
<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<p>J'en profite pour vous montrer comment utiliser la balise
strong pour <strong>renforcer</strong> une partie d'un texte.</p>
<p>Il est également possible d'utiliser la <em>balise em</em>, ce
n'est pas très compliqué...</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
de votre présentation.</h6>
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
<li>Proton(s)</li>
<li>Neutron(s)</li>
<li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
<li>On équilibre le carbone C</li>
<li>On équilibre l’hydrogène</li>
<li>On équilbre l’oxygène</li>
</ol>
</section>
<footer>
<p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>
</body>
</html>
Code CSS
body {background-color:silver;color:green;}
nav {color:blue}
section {background-color :orange;color:red;}
footer{}
p{color:black;}
Couleur du texte :
Les paragraphes seront tous en noir.
Les autres types de texte (listes, titres…) seront :
- rouge dans la balise section,
- bleu dans la balise nav et
- vert sinon (dans header et footer donc).
Couleur du fond :
Le body (ainsi que header, nav et footer ) est silver.
La section est orange.
En résumé :
On précise le nom de la balise dont on désire changer une propriété en utilisant les accolades.
On code la valeur à donner à une propriété et on finit par un point-virgule.
Les modification d’une propriété sur une balise peuvent être remplacées par une modification plus précise.
Exemple de code CSS
body {
background-color:silver;
color:green;
}
20° Réaliser une présentation rapide d'un sujet, votre exposé de TPE par exemple. Créer deux versions de CSS de façon à avoir deux présentations possibles du même contenu html.
La prochaine fois, nous irons fouiller dans le CSS puis le HTML. Mais vous avez fait le plus dur.