HTML et CSS

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

Principe

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.

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

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 !

En classe, vous utiliserez l'éditeur Bluefish.

Sous Windows, vous pouvez utiliser par exemple Notepad++, ou Visual Studio Code.

Vous trouverez ici un mémento des balises HTML avec leur signification, et ici, quelques exemples d'utilisation de ces balises.

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 1 indique au navigateur la version HTML utilisé ( ici HTML5 )
La ligne 3 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 7 indique le codage des caractères utilisé; ne pas la modifier
La ligne 8 contient le titre de la page qui s'affichera dans la barre de titre de l'onglet de la page
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....

Mytho...

Travail sur le thème Web

Vous allez écrire le ficher HTML décrivant une page simple au sujet d'un des grands noms de l'histoire de l'informatique.

Pour l'instant, vous allez vous limiter au code HTML de la page, sans vous préoccuper de la mise en page.

Le texte ne devra pas être un simple copier-coller d'une page ( Wikipedia au hasard...) mais un résumé de la vie de la personne et ses contributions au domaine de l'informatique.
Ce texte devra bien entendu être structuré en paragraphes, titres, etc....

La page devra contenir :

au moins deux images
au moins une table
au moins une liste
au moins un lien vers une page sur le web traitant du même sujet.

Le nom de votre fichier .html devra être le même que celui de la personnalité dont votre page traite ( par exemple : alan_turing.html, richard_stallman.html, etc... ), de façon à pouvoir y accéder directement une fois en ligne à l'aide des liens ci-dessous.

Les noms des personnalités :

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.

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

Travail sur la feuille de style de votre page

A vous d'écrire les règles de style nécessaire pour formater la page dont vous avez écrit précédemment le fichier .html. ( mais attention, pas trop de fantaisie, on évitera par exemple les couleurs trop "flashy"...)

Donnez à votre fichier .css le même nom que celui du fichier .html. Ex. : alan_turing.html → alan_turing.css

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 (des) l'image(s)
bords, arrière-plan,....
.....

Pensez à lier le fichier .css au fichier .html pour pouvoir appliquer la feuille de style à votre page !