Utiliser trois des designs proposés dans les menus pour constater qu'on ne change que l'apparence : le texte reste identique mais la présentation change. Attention, la position des menus des designs changent aussi parfois. Il faut alors faire défiler la page pour le retrouver.
1.1 Principe du CSS : style de présentation
Nous obtenons une page contenant du texte et des menus permettant de changer l'apparence de la page, à savoir :
l'apparence du contenu,
la disposition du contenu
Le code à l'intérieur de l'élément <body> reste identique sur toutes ces pages si différentes !
On dit qu'on a changé le style de présentation (la forme) mais pas le fond (le contenu lui-même).
Nous allons voir dans cette activité :
qu'on fixe le contenu (le fond) via un fichier HTML
qu'on fixe l'apparence (la forme) via un fichier CSS
La seule différence entre les codes-source de ces différentes pages ? Une seule ligne située dans la balise head ! Elle indique la référence d'un lien à suivre (link en anglais) pour trouver le fameux fichier CSS :
Les fichiers d'extension .css sont des feuilles de style ("stylesheet") : il s'agit de fichiers qui contiennent des indications permettant au navigateur de savoir comment et où le concepteur de la page désire afficher le contenu des balises HTML.
02 ✔° Créer un nouveau répertoire nommé sntcss. Nous allons y placer les fichiers de cette activité.
03 ✔° Télécharger les 6 fichiers suivants (à l'aide d'un clic-droit sur leurs noms et enregistrer la cible du lien sous) et les placer dans le répertoire sntcss :
Vous devriez obtenir la structure ci-dessus sur votre ordinateur.
Questions :
combien de fichier(s)-HTML trouve-t-on dans ce dossier ?
combien de fichier(s)-CSS ?
combien de fichier(s)-images ?
...CORRECTION...
3 fichiers HTML, un ficher CSS et 2 fichiers-images.
04° En regardant la disposition des différents fichiers, pourquoi les 3 fichiers HTML peuvent-ils localiser le fichier CSS en utilisant simplement une adresse RELATIVE du type href="mes_gouts.css".
...CORRECTION...
Tout simplement car ils sont situés dans le même répertoire.
📁 sntcss
📄 index.html
📄 liens_html.html
📄 liens_perso.html
📄 mes_gouts.css
🖼 html.png
🖼 python.jpg
(Rappel) 2.1 Adresses relatives et liens internes
Définition
Une adresse relative est une adresse qui permet de localiser une ressource en partant de la ressource actuelle.
Une adresse relative ne commence
ni par le nom d'un serveur ;
ni par le nom d'un ordinateur ;
ni par le nom d'un disque dur ;
ni par un slash.
Application au Web
Imaginons que vous ayez deux pages HTML enregistrées dans le répertoire nommé PAGES_WEB.
📁 PAGES_WEB
📄 page_1.html
📄 page_2.html
Pour créer des liens entre les deux pages, on peut utiliser leurs adresses relatives l'une par rapport à l'autre.
Cela veut dire : cherche dans le répertoire du fichier actuel (page2.html), un fichier qui se nomme page1.html.
(Rappel) 2.2 Adressage relatif des images
Imaginons trois fichiers (un html et deux images) placés dans le même dossier :
📁 travail
📄 ma_page.html
📄 mon_image.png
📄 mon_autre_image.png
Pour afficher les deux images à l'aide du fichier HTML ma_page.html, il suffit d'utiliser l'adressage relatif puisque les 3 fichiers sont dans le même répertoire :
1
<imgsrc="mon_image.png">
1
<imgsrc="mon_autre_image.png">
Comme on ne donne pas d'indication supplémentaire, cela veut dire qu'on doit chercher l'image dans le même répertoire que le fichier HTML.
05 ✔° Trois actions à réaliser :
Ouvrir vos 3 fichiers HTML dans un navigateur Web de façon à visualiser l'apparence obtenue.
Ensuite, rajoutez cette ligne à l'intérieur des balises <head>des 3 fichiers HTML.
<linkrel="stylesheet"href="mes_gouts.css">
Par exemple :
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>Accueil HTML</title><linkrel="stylesheet"href="mes_gouts.css"></head><body><h1>Accueil</h1><p>Vers les liens <ahref="liens_html.html">HTML</a></p><p>Vers les liens <ahref="liens_perso.html">SNT</a></p></body></html>
Sauvegarder chaque fichier
Visualiser les nouvelles apparences obtenues.
Pas de changement dans l'apparence du site ? Pensez à demander de l'aide, ce n'est pas normal !
Moralité : nous avons réussi à créer une unité de ton sur nos trois pages en utilisant un seul fichier commun de configuration graphique : le fichier CSS (pour Cascading Style Sheets ) nommé "mes_gouts.css".
06° Faire bouger la souris sur la page pour tenter de voir s'il y a des animations.
Notre ensemble de fichiers forme un site dit statique.
Question : Statique veut-il dire que le site ne possède pas d'éléments qui bougent ?
...CORRECTION...
Statique fait référence au fait que les codes HTML et CSS sont toujours fournis à l'identique par le serveur HTTP qui les transmet. On ne peut pas enregistrer d'informations envoyées par un utilisateur sur un site statique.
Sur un site dynamique, le serveur peut recevoir des données, les enregistrer, lire des données dans sa propre base de données et renvoyer un code HTML ou CSS différents en fonction de la façon dont il a été programmé.
Comment utiliser le CSS ?
C'est relativement simple à comprendre lorsqu'on a le code sous les yeux.
2.3 Syntaxe du langage CSS
Exemple
En CSS, pour agir sur tous les éléments HTML d'un même type, il faut noter son nom (a par exemple et pas <a> ).
1
2
3
4
a{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Les propriétés seront placées dans un bloc délimité par {...}. On l'indente de façon à rendre le code plus clair.
Ici, on définit donc la façon dont on veut afficher toutes les balises a :
"les textes de tous les liens seront écrits en jaune" est formulé ainsi : color:yellow;
"les textes de tous les liens sont de très grande taille" est formulé ainsi : font-size:x-large;
Le symbole ':' joue le rôle du symbole '=' et on finit chaque déclaration par le symbole ';'.
07 ✔° Ouvrir le fichier mes_gouts.css dans l'éditeur de texte. Observer le code pour essayer de voir pourquoi le texte des liens est assez grand et en jaune.
En voici un extrait :
1
2
3
4
a{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Dernière remarque : on peut placer des commentaires en utilisant /* puis */. Le texte situé entre les deux sera alors uniquement destiné au lecteur humain du code.
08 ✌° Modifier le code pour que les liens apparaissent dans une autre couleur et avec une taille différente de celle proposée de base dans le fichier CSS.
Vous pourriez ainsi utiliser xx-large, large, medium, small, x-small, xx-small.
...CORRECTION...
1
2
3
4
a{color:orange;font-size:xx-large;/* ou small, x-small, x-large, medium, ... */}
2.4 CSS sous condition
Le CSS permet également de gérer des conditions d'états.
Par exemple, nous pouvons modifier les apparences lorsqu'on survole une balise. On utilise alors :hover derrière le nom de la balise à gérer de cette façon.
1
2
3
4
a:hover{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Dans ce cas, les modifications ne seront faites qu'après survol du lien par la souris.
09° A votre avis, quelle est la traduction de l'attribut background-color ? Rajouter un attribut background-color au survol des éléments a. Vous pourriez leur définir un fond rouge par exemple.
Attention, les couleurs sont à fournir en anglais.
...CORRECTION...
background-color correspond à la couleur de fond.
1
2
3
4
5
a:hover{color:yellow;background-color:red;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
10° La propriété padding permet de définir la place interne que prend ce type de balise. Plus le padding est grand, plus cette balise "gonfle".
Dans le fichier CSS, modifier le padding des paragraphes. Pour l'instant, il vaut 20 pixels. Passer à 50 px par exemple pour visualiser la différence.
Si vous voulez que votre balise prenne plus de place, il faudra donc utiliser cette propriété padding.
11° La propriété margin permet de définir la marge d'écartement entre cette balise est celles sont à proximité.
Dans le fichier CSS, modifier le margin-bottom de l'élément h1 : cela vous permet de définir la distance entre le côté bas(bottom) du titre et les autres balises. Pour l'instant, il vaut 50 pixels. Passer à 150 px par exemple pour visualiser la différence.
Si vous voulez que votre balise soit plus ou moins écartée des autres, il faudra donc utiliser cette propriété margin.
En regardant le reste du fichier CSS mes_gouts.css, vous pouvez voir qu'il existe une autre façon de fournir les couleurs en donnant trois composants :
le rouge,
le vert et
le bleu.
Cette façon d'obtenir toutes les autres couleurs à partir de ces trois couleurs de base sera détaillée dans la partie "photographie numérique" du programme de SNT.
3.1 Code RGB couleur HTML en hexadécimal
Principe R G B
On peut définir une couleur à partir des trois intensités
Rouge - Vert - Bleu (RVB en français) ou
Red - Green - Blue (RGB en anglais).
Dans le fichier CSS, on peut lire que pour h1, on a color:#333333;
#333333 veut dire qu'on a :
une intensité rouge de 33
33 pour le vert
et 33 pour le bleu.
Votre oeil reçoit un peu de rouge (33), un peu de vert (33) et un peu de bleu(33) en même quantité. Il interprète cela en gris foncé.
Valeurs possibles
De la couleur la moins intense (00) à la plus intense (FF), je vous propose de vous limiter à ceci :
L'intensité 00 veut dire : pas de couleur de ce type (pas de rouge par exemple).
L'intensité FF veut dire : intensité maximale pour cette couleur (rouge max par exemple).
Moyen mnémotechnique : F pour "A Fond".
Quelques exemples visuels
Si on veut du rouge pur et intense, il suffit d'écrire ceci :
style=background-color:#FF0000;"
On met donc le rouge à FF et les autres à 00.
Si on veut du vert pur et intense, il suffit d'écrire ceci :
style=background-color:#00FF00;"
On met donc le vert à FF et les autres à 00.
Si on veut du bleu pur et intense, il suffit d'écrire ceci :
style=background-color:#0000FF;"
On met donc le bleu à FF et les autres à 00.
Si on veut du jaune pur et intense, il suffit d'écrire ceci :
style=background-color:#FFFF00;"
On met donc rouge et vert à FF et le bleu à 00.
Si on veut du blanc pur et intense, il suffit d'écrire ceci :
style=background-color:#FFFFFF;"
On met donc toutes les intensités au maximum hexadécimal.
Si on veut du noir pur et intense, il suffit d'écrire ceci :
style=background-color:#000000;"
Exemple final
color:#9900FF;
Cela veut dire : un peu de rouge (66), pas de vert (00) et bleu intense (FF).
On obtient donc du violet qui tend plus vers le bleu que vers le rouge.
12° A votre avis, comment coder
du rouge vif en RGB ?
du rouge plus sombre en RGB ?
du noir en RGB ?
du blanc ?
Faire des essais pour vérifier en modifiant le CSS.
...CORRECTION...
Le rouge vif est codé par #FF0000 ou #F00 de façon simplifiée.
Un rouge plus sombre par une lettre inférieur à F ou par un chiffre. Par exemple, #AA0000 ou #A00 de façon simplifiée.
Un rouge encore plus sombre serait #990000 ou #900 de façon simplifiée.
Le noir est codé par #000000 ou #000 de façon simplifiée.
Le blanc est codé par #FFFFFF ou #FFF de façon simplifiée.
13 ✌° A votre avis, comment coder
du vert vif en RGB ?
du vert plus sombre en RGB ?
du gris en RGB ?
Faire des essais pour vérifier en modifiant le CSS.
Une fois que vous êtes certain, vous pouvez m'appeler pour valider avec une question en plus.
De nombreux sites proposent de visualiser les couleurs obtenues par une association RGB en hexadécimal. Un exemple parmi d'autres : https://htmlcolorcodes.com/fr
Imaginons maintenant qu'on veuille reproduire sur la page d'accueil le bloc bleu regroupant plusieurs paragraphes :
14° Modifier le CSS pour les balises p pour que la couleur du fond soit bleue (par exemple #0000FF ou blue). Regarder la page d'accueil.
Ca fonctionne bien ou il y a un problème visuellement ?
...CORRECTION...
Et ça ne fonctionne pas. Il reste du gris entre les paragraphes !
Pour parvenir à englober tous les paragraphes dans du bleu, nous allons utiliser une balise HTML générique de type block (c'est à dire une balise qui provoque un passage à la ligne) : la balise <div>.
Remarque : la balise HTML <div> est une balise-bloc n'ayant aucun sens sémantique. Elle sert simplement de conteneur (ici pour des différents paragraphes). En appliquant une propriété CSS à div, les balises internes (les paragraphes) suivent les mêmes règles CSS que le conteneur si elles n'ont possèdent pas elles-mêmes.
15 ✌° Réaliser les actions suivantes :
Supprimer la couleur de fond des balises p dans le CSS.
Observer le code HTML de liens_html.html : quelles sont les balises qui sont contenues dans la balise div ?
Modifier le code CSS pour imposer un fond bleu aux balises div.
Observer le visuel obtenu pour liens_html.html.
Modifier le code HTML des deux autres fichiers HTML de façon à obtenir cet affichage sur les trois pages : pas de gris entre les paragraphes mais un fond bleu uniforme sous les trois paragraphes.
...CORRECTION...
Il faut rajouter un attribut background-color à div dans le CSS.
Il faut ensuite rajouter des balises div dans les deux fichiers qui n'en ont pas. Par exemple :
1
2
3
4
5
6
7
<body><h1>Accueil</h1><div><p>Vers les liens <ahref="liens_html.html">HTML</a></p><p>Vers les liens <ahref="liens_perso.html">SNT</a></p></div></body>
16° Piqure de rappel sur les adresses locales : pourquoi a-t-on pu créer des liens en utilisant juste les noms des fichiers HTML de destination ?
Le code HTML :
1
2
3
4
5
6
7
<body><h1>Accueil</h1><div><p>Vers les liens <ahref="liens_html.html">HTML</a></p><p>Vers les liens <ahref="liens_perso.html">SNT</a></p></div></body>
La structure du site :
📁 sntcss
📄 index.html
📄 liens_html.html
📄 liens_perso.html
📄 mes_gouts.css
🖼 html.png
🖼 python.jpg
...CORRECTION...
Toujours pareil : les fichiers sont dans le même dossier. Il suffit donc de transmettre leurs noms, sans slash au début. Il s'agit d'adresses relatives.
Pour en apprendre plus sur le CSS et tester les modifications en direct, vous pouvez utiliser par exemple le site de W3Schools (interactif) ou OpenClassRooms (en français) ou la partie HTML de infoforall (c'est gratuit)
.
Projet noté ✌° Réaliser un site Web comportant au moins 2 pages HTML en utilisant un éditeur externe comme Notepad++, Atom ou autres.
On devra y trouver au moins deux pages différentes.
Vous pourrez éventuellement réaliser
une histoire dont vous êtes le héros comportant au moins une dizaine de pages ;
un site décrivant un projet d'orientation (le métier, les études pour y aboutir, pourquoi ce métier est bien à vos yeux...) ;
un site décrivant une de vos activités (présentation, quels clubs ou association dans la région, quels concours ou rencontres...) ;
un site pour réviser telle ou telle matière (une partie cours, une partie exercice, une partie expliquant les intérêts de cette matière...) ;
Voici le barême :
Bonne structure du code produit (indentation...) (3 points) ;
Des images stockées localement et dimensionnées (3 points) ;
Des liens externes (3 points) ;
Des liens internes entre vos pages (4 points) ;
Un fichier CSS à part (7 points) comportant :
au moins une propriété color ;
au moins une propriété background-color ;
au moins une propriété font-size ;
au moins une propriété margin ;
au moins une propriété padding ;
au moins deux couleurs définies avec la notation hexadécimal #RRGGBB ;
au moins deux éléments div pour imposer du CSS particulier : c'est le seul cas où vous aurez le droit de placer du CSS avec l'attribut style.
Bon courage et soyez créatif. A part avec div, ne placez pas votre CSS directement dans le HTML avec l'attribut style. Cette façon de faire n'est destiné qu'aux modifications rapides ou à la réalisation d'un premier prototype.
Si vous voulez apprendre à faire quelque chose, le plus facile est de taper une requête "HTML + le truc à faire" dans un moteur de recherche.
Activité publiée le 07 10 2019
Dernière modification : 07 10 2019
Auteur : ows. h.
