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

1 - Effet du CSS

⇩ ⇧ ⤊

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

Utiliser les designs proposés dans les menus pour voir qu'on ne change que l'apparence : le texte reste identique mais présenté différemment. Le problème est que la position des menus des designs changent aussi. Il faut parfois faire défiler la page pour le retrouver.

Principe du CSS : style de présentation

Nous obtenons une page contenant du texte et des menus permettant de changer l'apparence du site.

C'est cela qui est notable : seules changent

l'apparence du contenu,
la disposition du contenu

Par contre, le contenu reste identique : le texte est toujours le même. Le code qui se trouve à l'intérieur de la balise <body> reste identique sur toute ses pages si différéntes !

On dit qu'on a changé le style de présentation (la forme) mais pas le fond (le contenu lui-même).

02° Réaliser les actions suivantes :

Ouvrir deux pages du site ZenCSS sous deux styles différents, dans deux onglets différents.
Avec un clic-droit, visualiser le code-source de chacune des pages
Comparer le code contenu dans chacune des balises <body>.

Correction ?

...CORRECTION...

Le code contenu dans la balise body est strictement identique... Alors que l'apparence obtenue n'a rien à voir !

03° Observez maintenant attentivement le contenu des deux balises <head>. Cherchez quelle est l'unique ligne différente dans les balises <head> des différentes pages.

Exemple avec le code de la page Mid Century Modern

<head>
    <meta charset="utf-8">
    <title>Jardin Zen CSS&nbsp;: La beauté de la conception CSS</title>
     
    <link rel="stylesheet" media="screen" href="/221/221.css?v=8may2013">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dave Shea">
    <meta name="description" content="Une démonstration de ce qui peut être réalisé visuellement via la conception basée sur CSS.">
    <meta name="robots" content="all">
     
    <script src="http://use.typekit.net/vzq4ipz.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
     
    <!--[if lt IE 9]>
    <script src="script/html5shiv.js"></script>
    <![endif]-->
</head>

Exemple avec le code de la page Apothecary

<head>
    <meta charset="utf-8">
    <title>Jardin Zen CSS&nbsp;: La beauté de la conception CSS</title>
     
    <link rel="stylesheet" media="screen" href="/218/218.css?v=8may2013"">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dave Shea">
    <meta name="description" content="Une démonstration de ce qui peut être réalisé visuellement via la conception basée sur CSS.">
    <meta name="robots" content="all">
     
    <script src="http://use.typekit.net/vzq4ipz.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
     
    <!--[if lt IE 9]>
    <script src="script/html5shiv.js"></script>
    <![endif]-->
</head>

Exemple avec le code de la page Steel

<head>
    <meta charset="utf-8">
    <title>Jardin Zen CSS&nbsp;: La beauté de la conception CSS</title>
     
    <link rel="stylesheet" media="screen" href="/219/219.css?v=8may2013"">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dave Shea">
    <meta name="description" content="Une démonstration de ce qui peut être réalisé visuellement via la conception basée sur CSS.">
    <meta name="robots" content="all">
     
    <script src="http://use.typekit.net/vzq4ipz.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
     
    <!--[if lt IE 9]>
    <script src="script/html5shiv.js"></script>
    <![endif]-->
</head>

La seule différence ? Une ligne dans la balise head ! Celle qui comporte visiblement la référence d'un lien (link en anglais) vers un fichier

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

Ou alors ceci :

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

Ou alors ceci :

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

La balise <link> semble associer un fichier d'extension .css à notre fichier HTML. On donne son URL à l'aide d'un attribut href, le même que pour créer des liens avec la balise <a>.

Les fichiers d'extension .css sont des feuilles de style ("stylesheet") il s'agit de fichiers qui contiennent des instructions permettant au navigateur de savoir comment et où le concepteur de la page désire voir s'afficher le contenu des balises HTML.

2 - Création d'un CSS

⇩ ⇧ ⤊

04° 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 fichiers-HTML trouve-t-on dans ce dossier ?
combien de fichiers-CSS ?
combien de fichiers-images ?

Correction ?

...CORRECTION...

3 fichiers HTML, un ficher CSS et 2 fichiers-images.

05° En regardant la disposition des différents fichiers, pourquoi les 3 fichiers HTML peuvent-ils localiser le fichier CSS en utilisant 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 - Distinguer adresse locale et adresse absolue

Une adresse est locale lorsqu'elle ne contient aucune adresse de serveur et qu'elle ne commence pas un slash.

Exemple 1 : Adresse locale d'un fichier CSS

Imaginons une adresse permettant de trouver le fichier fournie de cette façon :

href="mes_gouts.css"

Cela veut dire que, pour trouver ce fichier CSS, on regarde juste dans le dossier où se trouve le fichier HTML.

Exemple 2 : Adresse absolue d'un fichier image.

Imaginons une adresse permettant de trouver une image fournie de cette façon :

src="https://doc.infoforall.fr/commun/images/accueil_blender_150.png"

Pour trouver ce fichier, on demande au site https://doc.infoforall.fr la ressource suivante (à partir de sa racine) /commun/images/accueil_blender_150.png"

06° 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 et visualiser les nouvelles apparences.

Pas de changement dans l'apparence du site ? Pensez à demander de l'aide !

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

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

08° Ouvrir le fichier mes_gouts.css. Observer le code pour essayer de voir comment il est structuré.

En voici un extrait :

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

Vous devriez comprendre qu'on dit que le texte des liens est en jaune et sera écrit en assez grand.

Codification CSS

On donne le nom d'une balise HTML sur laquelle on doit agir.

Dans l'exemple, c'est a.

Notez bien qu'en HTML, on note <a> mais qu'en CSS, on note juste a.

Nous allons changer certaines des propriétés d'affichage de ces balises.

Lesquelles ? Celles fournies entre l'accolade d'ouverture { et l'accolade de fermeture }.

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

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

on donne le nom de la propriété
on place un double-point pour indiquer la nouvelle valeur de la propriété (et pas =)
on donne la nouvelle valeur de la propriété
on place un point-virgule pour indiquer la fin de la modification sur cette propriété

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

Ici, on utilise donc des balises a dont

le texte sera en jaune : color:yellow;
les caractères sont de taille x-large : font-size:x-large;

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.

09° Modifier le code pour que les liens apparaissent en orange et en encore plus grand.

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,   ... */
}

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.

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

10° A votre avis, à quoi correspond l'attribut background-color ? Rajouter un attribut background-color au survol des balises a. Vous pourriez les définir un fond rouge par exemple.

Attention, les couleurs sont à fournir en anglais.

Correction ?

...CORRECTION...

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

Code RGB couleur HTML en hexadécimal

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, un peu de vert et un peu de bleu, il interprète cela en gris foncé.

De la couleur la moins intense à la plus intense, 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).

11 - à faire valider° 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.

Une fois que vous êtes certain, vous pouvez m'appeler pour valider avec une question en plus.

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.

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 - à faire valider° 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 HTML du fichier index.html de façon à obtenir l'affichage voulu : pas de gris entre les paragraphes (il faut juste entourer les bons paragraphes avec une balise HTML <div>.

Correction ?

...CORRECTION...

<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 3 pages HTML en utilisant un éditeur externe comme Notepad++, Atom ou autres.

On devra y trouver au moins trois pages différentes.

Vous pourrez éventuellement réaliser

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.

⏪

⏫

⏩