Informatique et sciences du numérique.

Langage HTML/CSS: Cascading Style Sheet.

Principes

On peut appliquer un style aux balises qui structurent le document du type: < body >, < h1 > etc...

Voici un exemple: exemple1.

Les balises < div >, < span> peuvent être nommées (typage des balises) pour notamment appliquer un style à certains éléments ou à une famille d'éléments.

Pour nommer un seul élément dans une page on utilise: id
Pour nommer une famille d'éléménts, on utilse: class

Voici un exemple: exemple2.

Pour réaliser une feuille de style, il faut creér entre les balises<head>-</head> une section délimitée par les balises:
<style type="text/css" media="screen">-</style>.
Entre ces balises on définit les propriétés donnant les apparences des éléments body, h1,... , p, div,id.
On peut ainsi définir:

l'apparence(fonte,style, couleur,...)
la taille (largeur, image,...)
le positionnement(absolu,ou relatif, visibilité)
...

Pour un div ou un span nommé par" class=", le nom est précédé d'un ".".
Pour un div ou un span nommé par "id=", le nom est précédé par un "#". Il est ici utile de revoir les exemples 1 et 2.

Quelques propriétés classiques

chaque élément a des propriétés exprimées sous forme de couples: propriété:valeur
Exemple:

 h1{
   font-size:24px;

   color:navy;

   font-weight:bold;

   }

Voici quelques propriétés souvent utilisées: Propriétés pour les feuilles de style

TP 1: Réaliser une page en HTML qui doit vous présenter et qui utilise toutes les notions vues précédemment.

Utilisation d'une feuille de style.
Réalisation d'un petit menu en utilisant les listes renvoyant à plusieurs pages.
Insertion d'images, de liens hypertextes, d'une carte de géolocalisation etc...

Séparation du contenu et de la forme

Une feuille de style peut être intégrée dans la page html mais peut-être aussi séparée de la page html. Cette façon de procéder permet plusieurs mises en forme pour un même contenu éventuellement en fonction du média(print, screev,...), de plus le code HTML est plus lisible.

On crée le document(contenu et structure) sans se préoccuper de sa mise en forme
On conçoit la (les) mise(s) en forme puis éventuellement on les modifie ou adapte.

Il faut creér entre les balises<head>-</head> une ligne donnant le lien du fichier CSS:
<link href="style1.css" rel="stylesheet" type="text/css" media="screen">.
Puis, il faut créer un fichier style1.css contenant la feuille de style.
Des exemples de page html avec différents styles sont visisibles sur le site: jardin zen css

TP 2: Reprendre la page HTML du TP 1 en séparant le contenu de la forme et en appliquant plusieurs feuilles de styles à cette page.