SNT Web CSS

Identification

Infoforall

6 - CSS pour la gestion de la forme


Nous avons vu comment créer une page HTML contenant des textes, des liens et des images.

Logo Html5

Nous allons voir maintenant comment améliorer l'apparence de nos pages en utilisant le langage CSS Logo Html5

1 - Effet du CSS

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

Utiliser les choix de style pour voir qu'on ne change que l'apparence, le texte restant identique mais présenté différemment..

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 l'apparence et la disposition changent, pas le contenu : le texte reste identique. Le code HTML dans la balise body reste identique.

On dit qu'on a changé le style de présentation.

02° Ouvrir deux pages de ce site dans deux onglets différents. Avec un clic-droit, visualiser les codes-sources. Tentez de comparer les codes-sources contenus dans la balise body.

...CORRECTION...

Le code source est quasiment identique : si on regarde à partir de la balise body, on peut même voir qu'il est strictement identique...

03° Observez attentivement le contenu des deux balises head. Cherchez la différence qui existe dans les balises link, permettant de lier un document externe à la page html.

Notez les deux codes correspondants.

Voici ce qu'on pourrait obtenir :

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

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

Les fichiers fournis sont des feuilles de style CSS ("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.

Comment ça fonctionne ?

Pour le savoir nous allons aller sur un site moins complexe à comprendre.

2 - Création d'un CSS

04° Utiliser le lien suivant pour vous connecter sur trinket :

https://formation.infoforall.fr/structure.html.

ou

https://trinket.io/html/fc2c81f15e.

05° Observez l'aspect puis rajoutez cette ligne à l'intérieur des balises head des 3 fichiers HTML.

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

Par exemple :

1 2 3 4 5 6 7 8 9 10 11 12 13
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Accueil HTML</title> <link rel="stylesheet" href="mesgouts.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>

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(Cascading Style Sheets ) nommé "mesgouts.css".

06° Notre ensemble de fichiers forme un site dit statique. Faire bouger la souris sur la page. Statique veut-il dire que le site ne possède pas d'éléments mouvants ?

...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. Sur un site dynamique, le serveur peut recevoir des données, 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é. L'une des prochaines activités traite du cas du PHP par exemple.

Comment utiliser le CSS ?

C'est relativement simple à comprendre lorsqu'on a le code sous les yeux.

07° Dans le trinket, ouvrir l'onglet mesgouts.css. Observer le code pour tenter d'en voir la structure.

En voici un extrait :

1 2 3 4
a { color:yellow; font-size:x-large; /* ou small, x-small, x-large, medium, ... */ }
Codification CSS

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

Dans l'exemple, c'est 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 :

  1. on donne le nom de la propriété
  2. on place un double-point pour indiquer la nouvelle valeur de la propriété (et pas =)
  3. on donne la nouvelle valeur de la propriété
  4. on place un point-virgule pour indiquer la fin de la modification sur cette propriété
1 2 3 4
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.

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

Vous pourriez ainsi utiliser xx-large.

...CORRECTION...

1 2 3 4
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 : et on utilise le mot-clé hover qui veut dire "flotter au dessus".

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

09° A votre avis, à quoi correspond l'attribut background-color ? Arrangez-vous pour créer une unité de couleur avec le lien lorsqu'il n'est pas survolé.

...CORRECTION...

Il correspond à la couleur de fond.

1 2 3 4
a:hover { color:orange; font-size:x-large; /* ou small, x-small, x-large, medium, ... */ }

Voilà pour les bases de CSS. C'est pas bien compliqué.

3 - Couleurs RGB

En regardant les codes du fichier mesgouts.css, vous pouvez voir qu'il existe une autre façon de fournir les couleurs en donnant trois composants :

  1. le rouge,
  2. le vert et
  3. le bleu.

Cette façon d'obtenir toutes les autres couleurs à partir de ces trois couleurs de base sera vue dans la partie photographie.

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

Ici dans h1, on a : color:#333333;.

#333333 veut dire qu'on a

  1. une intensité rouge de 33 (valeur comprise entre 00 et FF en hexadécimal)
  2. Idem, 33 pour le vert
  3. 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é.

10° A votre avis, comment coder du rouge vif ? comment coder du rouge sombre ? Comment coder du noir en RGB ? Comment coder 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.

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 :

Visuel voulu

11° Modifier la balise p pour que le fond soit bleu (par exemple #0000FF). Regarder la page d'accueil.

Ca fonctionne ou pas ?

...CORRECTION...

Et ça ne fonctionne pas. Il reste du gris entre les paragraphes !

Visuel raté

Pour parvenir à englober tout à la fois, nous allons utiliser une balise générique de type block, c'est à dire une balise qui provoque un passage à la ligne : la balise div.

Cette balise n'a aucun sens sémantique, elle n'a pour but que de regrouper certaines balises en vu de leur appliquer un CSS commun.

12° Supprimer la couleur de fond de la balise p dans le CSS.

Observer le code HTML de liens_html.html.

Modifier ensuite le code HTML de index.html de façon à obtenir l'affichage voulu, sans trace grise entre les paragraphes.

...CORRECTION...

1 2 3 4 5 6 7
<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>

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)

.

Remarque : la balise html <div> est une balise-bloc n'ayant aucun sens sémantique. Elle sert simplement de conteneur. Ici, elle sert à contenir différents paragraphes. En appliquant une propriété à la div, les balises internes (on dit filles) suivent les mêmes règles CSS.

Question finale notée° Réaliser une page HTML en utilisant un éditeur externe comme Notepad++, Atom ou autres.

On devra y trouver :

  • Des images
  • Des liens externes
  • Des liens entre vos pages
  • Un fichier CSS

Bon courage et soyez créatif.

Il existe encore bien des règles à connaître sur le CSS pour obtenir un résultat vraiment adapté à ce qu'on veut faire mais vous avez maintenant déjà pas mal de possibilité d'actions.

Activité publiée le 07 10 2019
Dernière modification : 07 10 2019
Auteur : ows. h.