2. HTML et CSS

A faire à la maison pour le prochain cours : regarder la vidéo de présentation du HTML et CSS et refaire en parallèle chez vous (vous avez forcément sur votre ordinateur un éditeur de texte et un navigateur).

Le concept actuel d'écriture des pages web est de séparer le contenu de la mise en forme de la page.

le fichier HTML indiquera les éléments qui devront s'afficher dans la page.
On n'écrira donc pas directement dans le fichier HTML les instructions de mise en forme; le fichier HTML signalera simplement par des balises que tels ou tels caractères doivent être formatés d'une certaine façon, mais sans décrire quelle est cette façon.
c'est dans la feuille de style CSS ( que vous verrez plus tard ) que l'on indiquera quel est exactement ce formatage.

Cette séparation entre contenu et mise en forme apporte un certain nombre de bénéfices :

la structure du document et la présentation peuvent être gérées dans des fichiers séparés.
la conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
dans le cas d'un site web, la présentation est uniformisée : les différentes pages HTML feront référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel d'un site entier.
un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

Principes du langage HTML

Une page web est entièrement décrite par un fichier HTML, qui est un simple fichier texte ( d'extension .html ), dans lequel on indique les éléments à afficher dans la page ( texte, liens, images,...).

Le navigateur lit les fichiers HTML depuis le début, de haut en bas et de gauche à droite : il faut en tenir compte pour l'affichage des divers éléments les uns par rapport aux autres...

Le langage de description utilisé ( ce n'est pas un langage "de programmation" ), le HTML ( = Hypertext Markup Language ) a été inventé en 1990, en même temps que le web, au CERN à Genève par Tim Berners-Lee.
Ce langage en est à sa version 5 actuellement.

Voici le lien vers la première page web jamais mise en ligne...

Avec le navigateur Firefox, on peut consulter le code source HTML de la page affichée : clic-droit sur la page et sélectionner Code source de la page
Vous pouvez par exemple visualiser le code source de cette page que vous êtes en train de lire...

Les balises

Le fichier est structuré par des balises ( = "markups", le "m" du sigle HTML ), dont le nom apparaît dans le code encadrées par des chevrons : <nom_de_la_balise>.

Généralement, une paire de balises ( une ouvrante <nom> et une fermante </nom>) encadre l'élément sur lequel elle porte :


	<html> la page entière </html>
	
	<h1> un titre </h1>
	
	<em> un texte important </em>

Pour certaines balises cependant, seule celle ouvrante est nécessaire ( par exemple, la balise <img> qui signale une image ).

Les balises servent à signaler au navigateur des éléments d'une page comme :

les limites des différentes sections d'un document HTML ( en-tête, paragraphe, section,... : voir ci-dessous )
les portions de texte à formater de manière particulière ( passage important, citation, etc... )
les liens hypertextes et l'adresse vers laquelle ils « pointent »
l'insertion d'une image, d'une vidéo,...
....

De manière plus générale, à chaque balise est associé un élément sémantique particulier, c'est à dire un élément ayant une certaine signification dans la page.

Les outils pour écrire en HTML

Pour écrire des pages web, il existe des logiciels, tout à fait similaires à des traitements de texte, qui permettent de créer la page de manière "visuelle" ( on dit WYSIWYG = "What You See Is What You Get" ), et de générer automatiquement le fichier HTML; mais, d'une part, ces logiciels créent un code HTML extrêmement confus et difficile à lire ( et donc à corriger ou à améliorer ), et, d'autre part, ils ne permettent pas d'apprendre le langage HTML et de comprendre "comment ça marche"...

Vous allez donc créer vos pages web "à partir de zéro", en écrivant vous-mêmes dans un fichier le code HTML avec les balises nécessaires pour décrire vos pages.

Pour cela, bien qu'un simple éditeur de texte ( comme le Bloc Notes ) suffise, vous utiliserez pour plus de "confort" un éditeur de texte "enrichi" qui propose une option particulièrement intéressante, la coloration syntaxique, c'est à dire le fait qu'il mette en couleur les portions de texte ayant une certaine signification pour le code, comme les balises justement !

Sous Windows, vous utiliserez Notepad++, que vous pourrez installer sur votre clé USB personnelle après avoir téléchargé ici la version portable.

Vous trouverez également ici un mémento des balises HTML avec leur signification.

Structure d'un fichier HTML

Examinons rapidement le code HTML "minimum" pour une page web :


<!DOCTYPE html>

<html lang="fr">

	<head>
	
		<meta charset="UTF-8">
		<title>Titre de la page</title>
							
	</head>

	<body>
	
	
	
	</body>
</html>

La ligne 2 indique au navigateur la version HTML utilisé ( ici HTML5 )
La ligne 4 est la balise html qui indique le début de la page; la balise fermante correspondante se trouve à la ligne 18, logiquement tout à la fin du code...
L'option linguistique permet de cibler l'affichage de la page dans une langue particulière, ici le français, pour gérer par exemple les coupures de mots en fin de ligne.
En-tête ( balises head) :

la ligne 8 indique le codage des caractères utilisé; ne pas la modifier
La ligne 9 contient le titre de la page qui s'affichera dans la barre de titre de la fenêtre du navigateur
de nombreuses autres indications peuvent être portées dans l'en-tête, comme les feuilles de style et scripts attachés à la page ( cf. plus loin )

Corps de page ( balises body ) : il contient la description de tous les éléments affichés dans la page.
C'est dans le corps de la page que sont décrits les éléments qui constituent la page elle-même.

L'indentation et les sauts de ligne dans le code source ne sont absolument pas obligatoires ( le navigateur les supprime à la lecture du fichier ) : on pourrait très bien décrire une très longue page HTML dans un fichier sur une seule ( très longue ) ligne !!
Mais bien sur, le code source apparaît beaucoup plus clair si on prend ainsi soin de le structurer....

Quelques précisions

Toute balise ouverte doit être refermée.
les balises doivent être correctement imbriquées : une balise incluse dans une autre doit être refermée avant que la précédente ne le soit.
```
	<p>Cette syntaxe est <strong>bonne</strong></p>
	<p>Cette syntaxe est <strong>mauvaise</p></strong>
					
```
Suivant leur signification, les balises peuvent être de deux types :
- Éléments de type bloc
  Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.
  
  Exemples :
```
	<h1>, <p>, <ul>, <table>, <pre>, <form> ...		
					
```
- Éléments de type inline
  Les éléments de type inline se placent normalement l'un à côté de l'autre ( pas de saut de ligne ).
  
  Exemples :
```
	<strong>, <em>, <a>, <sup>, <sub>, ...		
					
```
Pour le cas où il n'existe aucune balise déjà définie pour désigner un élément HTML ( oui, ça arrive souvent ), il existe deux types de balises "génériques" :
```
	<div>.........</div> pour les éléments de type bloc
				
	<span>.........</span> pour les éléments de type inline			 
				
```

Travail sur le thème Web

Le travail pour ce chapitre va être de créer une page HTML présentant un simulateur de notes pour le Bac.

Vous en trouverez un par exemple ici, mais il est bien mieux d'écrire son propre simulateur, non ?

Voila à quoi devra ressembler votre simulateur.

Ressources

Vous ne partirez pas de zéro; téléchargez cette archive, et décompressez-là sur votre zone personnelle/clé USB.

Le fichier HTML

Dans le dossier Simulateur Bac, vous trouverez ( en plus d'une image et d'un fichier dont nous verrons plus loin le rôle ) le fichier HTML décrivant la page du simulateur; vous pouvez l'ouvrir dans votre navigateur.
Vous constaterez que le fichier est incomplet et que son aspect visuel ne correspond pas du tout à celui désiré; c'est normal, vous allez compléter tout ça au fur et à mesure...

Structure de la page

Le code est structuré par un ensemble de balises génériques div correspondant aux différentes zones de la page.

Ces différentes balises ont un nom ( qui servira par la suite pour le formatage de la page ), indiqué par classou id ( vous verrez plus tard à quoi correspondent ces deux termes ).

Les différents éléments de la page sont "inclus" dans ces balises génériques : on dit que ce sont les enfants des balises div ( qui sont inversement les parents des éléments ).

En étudiant le code source de la page, compléter le document distribué en y indiquant :

quel est le nom de la balise générique div dont chaque élément est l'enfant
le rôle de la balise de l'élément
si il s'agit d'un élément permettant l'interaction avec l’utilisateur

Complétion du code

ajouter, à l'endroit adéquat, le code permettant l'insertion de l'image dans la page.
il manque la partie de la page concernant la Terminale...à vous de compléter le fichier HTML avec les éléments nécessaires en vous inspirant de l'aspect proposé.
rajouter tout élément qui vous semblerait nécessaire pour cette page, comme un lien hypertexte par exemple.

Les feuilles de style CSS

Les feuilles de style en cascade, généralement appelées CSS ( Cascading Style Sheets ), forment un langage informatique qui décrit la présentation et la mise en forme des documents HTML.

Les fichiers `.css`

Une feuille de style est en fait contenue dans un simple fichier texte d'extension .css.

Dans notre simulateur, la feuille de style ( le fichier est dans le dossier Simulateur Bac ) s'appelle style.css ( attention, il est très incomplet pour l'instant ! ).

Ce fichier est lié au document HTML auquel la feuille de style doit s'appliquer, par l'intermédiaire d'une unique balise link placée dans l'en-tête ( balises head ) du fichier .html décrivant la page :


	<head>
	
		.......................
	
		<link rel="stylesheet" href="style.css"/>
		
		......................
		
	</head>

Un site peut très bien utiliser différentes feuilles de style, que ce soit pour distinguer des pages ou pour adapter la présentation à l'appareil utilisé pour consulter le site ( PC, tablette,...).

Contenu d'un fichier `.css`

Le fichier .css contient la description de l'ensemble des règles de style, c'est à dire des règles de présentation, de formatage de texte,..., qui permettront la mise en page du fichier HTML lié.

Les règles de style peuvent s'appliquer sur n'importe lequel des éléments d'une page HTML : caractère, lien, image, paragraphe, tableau, liste, etc...

Une règle de style est constituée du nom d'une propriété de présentation ( couleur, police, espacement des caractères, taille de la marge, ...) suivie de son attribut ( en gros sa "valeur" : rouge, Arial, 3 pixels,...)


	propriété: attribut;

Les règles de style à appliquer sur un même élément HTML donné sont regroupées par blocs de règles, délimités par des accolades { }.

Chaque bloc est précédé d'un sélecteur désignant le (ou les) élément(s) de la page au(x)quel(s) les propriétés concernées doivent être appliquées.

En résumé, un bloc de règles se présentera sous cette forme :


	sélecteur {

		propriété_1: attribut_1; 
		propriété_2: attribut_2; 
		........

		}

Les propriétés : que peut-on formater ?

Un très grand nombre de choses !! Et ces propriétés dépendent de l'élément à formater...
En voici quelques exemples :

Nom de la propriété	Rôle	Attribut(s) possible(s)
`color`	couleur de caractères ou de paragraphe	nom d'une couleur en anglais ( `red, blue, green`,...), ou bien codée en hexadécimal en donnant les evaleurs de `0x00` à `0xFF` codant les trois couleurs primaires Rouge, Vert et Bleu ( exemples : `#FFFFFF` correspond au blanc, `#000000` au noir, `#FFFF00` au jaune, etc...), ce qui permet d'indiquer n'importe quelle couleur parmi 16 millions de nuances différentes...
`text-align`	alignement de texte ou de paragraphe	`left, right`,....
`font-size`	taille de caractères	valeurs en pixels ( ex. : `10px` ) ou en multiple de la taille par défaut des caractères d'une page ( ex. : `0.9em` )

La liste est très longue ! Voila un pense-bête qui résume un grand nombre de propriétés et leur signification.

Les sélecteurs

Un sélecteur désigne un élément à formater; ce peut être :

Le nom d'une balise HTML
Exemples :
```
	a { 
		............; 
		............; 
		}			
				
```
→ formate tous les liens ( balises a ) sans exception. Par défaut, les navigateurs affichent les liens en bleu et soulignés, on peut donc changer ce comportement...
```
	strong {
		...........; 
		...........; 
		}
				
```
→ formate tous les caractères signalés par les balises strong; ces balises ne signifient donc pas forcément que le texte doit être en gras ( c'est le comportement pas défaut ), mais simplement que le texte qu'elles encadrent est à mettre évidence...On peut bien entendu changer les règles de style pour cela : pourquoi ne mettrait-on pas ce genre d'informations plutôt en rouge et en italique ??
L'identifiant d'un élément quelconque mais unique dans la page
Dans le code HTML, le nom de l’identifiant unique ( id ) est indiqué dans la balise d'ouverture de l'élément que l'on veut mettre en forme.
Exemple :
```
	<h4 id="titre_1">Titre à formater</h4> 
				
```
Dans le fichier CSS, le sélecteur est alors l'id précédé du symbole # :
```
	#titre_1 {
		..............;
		..............;
		}
				
```
→ formate un élément d'identifiant "titre_1" .

Seul l'élément ayant cet identifiant ( ici un titre de niveau 4 ) sera formaté en accord avec ces règles de style; tous les autres éléments de même nature ( donc tous les autres titres de niveau 4 ) seront formatés "par défaut"...
Une classe d'éléments
On désigne ainsi un ensemble d'éléments HTML ( même de nature différente ) sur lesquels on veut appliquer les mêmes propriétés.

Dans le code HTML, le nom de la classe ( class ) est indiqué, pour chacun des éléments de la classe, dans sa balise d'ouverture.

Exemples :
```
	<p class="python">1^erparagraphe à formater</p>
					
	<p class="python">2^èmeparagraphe à formater</p>
					
	.......................
				
```
Dans le fichier CSS, le sélecteur est le nom de la classe précédé d'un point :
```
	.python {
		..............;
		..............;
		} 
				
```
→ formate tous les éléments appartenant à la classe "python".

Les sélecteurs peuvent être encore plus complexes : on peut sélectionner un unique élément lui-même contenu dans un autre, tout en excluant d'autres éléments du même type...

On peut aussi sélectionner plusieurs classes ou élément d'identifiant unique en même temps pour les formater de la même manière.

Les possibilités sont vraiment très variées et puissantes...mais leur manipulation demande une bonne compréhension de la "hiérarchie" des éléments dans la page HTML.
Pour plus d'informations, voir par exemple cette page ou celle-là.

Travail sur la feuille de style de notre simulateur

Vous avez du "lier" la feuille de style au fichier HTML, recharger celui-ci, et vous rendre compte que pas mal de boulot restait à faire ! Pour l'instant, le fichier ne contient que les règles qui permettent de positionner les différentes parties les unes par rapport aux autres ( le positionnement est un des points les plus délicats en développement web...)

A vous d'écrire les règles de style nécessaire pour formater la page en conformité avec le résultat désiré ( ou avec vos propres règles, mais attention, pas trop de fantaisie !...)

couleurs d'arrière-plan des différentes parties de la page
marge intérieure ( padding ) et extérieure ( margin )
police et taille des caractères
taille de l'image ( elle est un peu trop large...)
largeur des zones d'entrée des notes
formatage du bouton, et comportement lors de son survol ( sélecteur :hover )
bords arrondis
.....