7 - CSS pour la gestion de la forme

⏪

⏬

⏩

1 - effet css

2 - création css

3 - RGB

4 - Balise div

Depuis deux activités, nous travaillons sur le langage HTML :

Nous avons vu comment est structurée une page HTML, à savoir

Une unique balise <html> qui contient... toutes les autres.
Une unique balise <head> qui contient les informations non visuelles qu'on veut transmettre au navigateur.
Une unique balise <body> qui contient tous les contenus qu'on veut voir apparaître à l'écran et qui contient notamment

du texte avec des balises <p>, <h1>... ,
des liens avec des balises <a>
et des images avec des balises <img>

Nous allons voir ici comment améliorer l'apparence de nos pages en utilisant, en complément du HTML, un autre langage nommé CSS.

✌ questions 08-11-13-projet

MODE COURS (cacher les questions)

1 - Effet du CSS

⇩ ⇧ ⤊

Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.

01 ✔° Ouvrir la page suivante : http://www.csszengarden.com/tr/francais/.

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

Voir

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 :

<link rel="stylesheet" media="screen" href="/217/217.css?v=8may2013">

<link rel="stylesheet" media="screen" href="/216/216.css?v=8may2013">

<link rel="stylesheet" media="screen" href="/221/221.css?v=8may2013">

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.

2 - Création d'un CSS

⇩ ⇧ ⤊

02 ✔° Créer un nouveau répertoire nommé sntcss. Nous allons y placer les fichiers de cette activité.

03 ✔° Télécharger un à un les 6 fichiers suivants (à l'aide d'un clic-droit sur leurs noms et enregistrer la cible du lien sous) et les placer dans un répertoire nommé sntcss qu'il faudra créer au préalable :

📁 sntcss

📄 index.html

📄 liens_html.html

📄 liens_perso.html

📄 mes_gouts.css

🖼 html.png

🖼 python.jpg

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 ?

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

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

Voir

Définition

Une adresse relative est une adresse qu'on donne par rapport à la localisation d'une autre ressource.

Une adresse relative est donc une adresse qui ne commence

ni par le nom d'un serveur
ni par le nom d'un disque dur ou d'un ordinateur

Application au Web

Imaginons que vous ayez deux pages HTML situées au même endroit.

📁 PAGES_WEB

📄 page_1.html

📄 page_2.html

Elles sont donc enregistrées dans le même répertoire nommé PAGES_WEB.

Pour créer un lien vers page_2.html depuis le code de page1.html, il suffit d'insérer une adresse relative et non pas une URL totale : on reste au même endroit, pas la peine de donner une adresse externe.

Code à placer dans page1.html

`1`	`<p>Liens perso : <a href="page_2.html">Perso</a></p>`

Code à placer dans page2.html

`1`	`<p>Liens perso : <a href="page_1.html">Perso</a></p>`

(Rappel) 2.2 Adressage relatif des images

Voir

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'insérer ceci dans le code :

`1`	`<img src="mon_image.png">`

`1`	`<img src="mon_autre_image.png">`

On remarquera bien qu'il ne s'agit pas d'adresses absolues puisqu'elles ne contiennent ni nom de serveur, ni nom de disque dur.

On donne bien ici des adresses relativement à la position du fichier HTML dans laquelle se trouve cette ligne.

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.

<link rel="stylesheet" href="mes_gouts.css">

Par exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Accueil HTML</title>
        <link rel="stylesheet" href="mes_gouts.css">
    </head>
    <body>
        <h1>Accueil</h1>
        <p>Vers les liens <a href="liens_html.html">HTML</a></p>
        <p>Vers les liens <a href="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 ?

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

Voir

Exemple

Pour agir sur toutes les balises d'un même type, il faut juste noter son nom. Notez bien qu'en CSS, on note simplement son nom : a par exemple pour dire comment on veut agir sur toutes les balises de lien.

a {
    color:yellow;
    font-size:x-large; /* ou small, x-small, x-large, medium,   ... */
}

Les propriétés seront placées dans ce bloc {...} et indentées de façon à rendre le code plus clair.

Ici, on définit donc la façon dont on veut afficher 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;

Généralisation

Chaque modification est donc codifiée de la même façon :

on note le nom des balises qu'on veut gérer.
on place une accolade d'ouverture

on donne le nom de la propriété suivi d'un double-point
on donne la nouvelle valeur de la propriété
on place un point-virgule pour indiquer la fin de la modification

on place une accolade de fermeture.

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 :

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 ?

...CORRECTION...

a {
    color:orange;
    font-size:xx-large; /* ou small, x-small, x-large, medium,   ... */
}

2.4 CSS sous condition

Voir

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.

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 ?

...CORRECTION...

background-color correspond à la couleur de fond.

a:hover {
    color:yellow;
    background-color:red;
    font-size:x-large; /* ou small, x-small, x-large, medium,   ... */
}

3 - Couleurs RGB

⇩ ⇧ ⤊

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

Voir

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 :

00 < 11 < 22 < 33 < 44 < 55 < 66 < 77 < 88 < 99 < AA < BB < ; CC < DD < EE < FF

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.

10° 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 ?

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

11 ✌° 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

4 - Balise div

⇩ ⇧ ⤊

Imaginons maintenant qu'on veuille reproduire sur la page d'accueil le bloc bleu regroupant plusieurs paragraphes :

12° 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 ?

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

13 ✌° 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 ?

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

<body>
    <h1>Accueil</h1>
    <div>
        <p>Vers les liens <a href="liens_html.html">HTML</a></p>
        <p>Vers les liens <a href="liens_perso.html">SNT</a></p>
    </div>
</body>

14° 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 :

<body>
    <h1>Accueil</h1>
    <div>
        <p>Vers les liens <a href="liens_html.html">HTML</a></p>
        <p>Vers les liens <a href="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 ?

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

la description d'un groupe/interpréter et au moins une chanson de ce groupe.
une histoire dont vous êtes le héros,
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 :

Des images stockées localement et dimensionnées (4 points)
Des liens externes (4 points)
Des liens internes entre vos pages (4 points)
Un fichier CSS (4 points)

La bonne tenue du code produit (indentation, respect de la structure de base des balises...) apporte également 4 points.

Bon courage et soyez créatif.

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.

⏪

⏫

⏩