HTML et CSS

(actualisé le ) par administrateur


1. Le langage HTML


1.1. Introduction

Le HTML (Hypertext Markup Language = langage hypertexte de balisage) est le langage qui sert à écrire les pages Web (WWW : World Wide Web).

Ce n’est pas un langage de programmation mais de description : on "n’écrit pas un programme" en HTML, mais on décrit une page par l’intermédiaire de balises de description (voir ci-dessous).

Le HTML est généralement associé avec :

  • les feuilles de style CSS (Cascading Style Sheets) pour la mise en page (la présentation, le design, formatage des caractères,...) )
  • les scripts, morceaux de programme écrits en langage JavaScript, Python ou autres,
  • pour obtenir un comportement dynamique (interaction avec l’utilisateur par exemple )

La dernière version du langage, et la plus utilisée, est HTML5.

1.2. Les bases du langage HTML5

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 fichier est formaté par des balises ("markups"), qui apparaissent dans le code encadrées par des chevrons :

‹balise›

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

Bref, tous les éléments constitutifs d’une page web !!

Généralement, une paire de balises ( une ouvrante et une fermante ) encadre l’élément sur lequel elle porte :

‹balise ouvrante›...... élément du code ............‹/balise fermante›

Certaines balises sont cependant uniques.

Un mémento HTML5 disponible ci-dessous présente un certain nombre de balises avec des exemples d’utilisation.

Mémento HTML5

Attention, le concept actuel d’écriture des pages web est de séparer la sémantique de la mise en forme, c’est à dire en gros le fond et la forme de la page.

Ainsi, le fichier HTML indiquera les éléments qui devront s’afficher dans la page, tandis que la mise en page sera traité dans un fichier à part ( une feuille de style CSS )...
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 caratères doivent être formatés de manière particulière ( par exemple ), mais c’est dans la feuille de style CSS ( un fichier à part ) que l’on indiquera quel est ce formatage...

1.3. Les outils pour écrire en HTML5

Le code d’une page HTML est stocké dans un fichier texte avec l’extension .htm ou .html.

  • Un simple éditeur de texte est donc nécessaire et suffisant pour écrire le code source bien que certains logiciels appelés CMS assimilables à des traitements de texte permettent d’écrire des pages web sans une ligne de code.
  • Un navigateur Web servira à interpréter ce code et à visualiser la page résultante.

Remarque :

Avec le navigateur Firefox, pour accéder :

  • au code source de la page : Outils → Développeur Web → Code source de la page (ou CTRL + U), ou clic-droit sur la page et sélectionner Code source de la page
  • aux informations sur la page : Outils → Informations sur la page (ou CTRL + I)

2. Structure d’un fichier HTML5


2.1. Les sections principales

Un fichier HTML contient 2 sections principales :

  • un en-tête (balises "head") qui contient des éléments qui ne seront pas affichées mais qui apportent des informations au navigateur ;
  • le corps (balises "body") qui décrit les éléments qui seront effectivement affichés sur la page ;
  • le tout englobé dans une paire de balises "html".

  • ‹ !DOCTYPE html› indique au navigateur la version HTML utilisé (ici HTML5 )
  • ‹html› est la balise html ouvrante de la page
    • ‹head› est la balise d’en-tête
      • ‹meta charset = "UTF-8"› indique le codage des caractères utilisé
      • ‹title›Titre de la page‹/title› 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 l’emplacement des feuilles de style et des scripts attachés à la page)
    • ‹body› est la balise de corps de page contenat la description de tous les éléments affichés dans la page
  • ‹/html› la dernière ligne du fichier est toujours la balise html fermante de la page.

Remarque :

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

2.2. Quelques règles de syntaxe à respecter

  • 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›

2.3. Eléments de type bloc et de type inline

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›, ‹img›, ‹sup›, ‹sub› ...

  • Propriétés

Les éléments de type bloc peuvent contenir des éléments de type bloc ou de type inline.

Exceptions : les paragraphes ‹p› et les titres ‹h1› ‹h2›, ... ne peuvent contenir que des éléments inline ( donc pas de titres dans un paragraphe, pas de paragraphes dans un paragraphe ! )

Les éléments inline ne peuvent contenir que des éléments inline.


3. Les feuilles de style CSS


3.1. Principe

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.

Il est ainsi souhaitable de ne décrire que la structure d’un document en HTML, et de décrire toute la mise en forme dans une feuille de style CSS séparée.

Cette séparation fournit 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.

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

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

3.3. 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 quel élément 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,...) suivie de son attribut (en gros sa "valeur" : rouge, Arial, 3 pixels,...).

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 auxquels les propriétés concernées doivent être appliquées.

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

3.4 Les propriétés

Elles sont en très grand nombre, et dépendent de l’élément à formater...
En voici quelques exemples :

Nom de la propriétéRôleAttribut(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 valeurs 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 )

Pour une liste un peu plus complète, et pour montrer tout ce qu’il est possible de faire, voir par exemple le site OpenClassrooms.

3.5 Les sélecteurs

Un sélecteur peut être :

  • le nom d’une balise HTML :

→ formate tous les liens (balises ‹a›‹/a› ) en couleur orange et sans soulignement ( par défaut, les navigateurs affichent les liens en bleu et soulignés )

→ formate tous les caractères signalés par les balises ‹strong›‹/strong› en couleur rouge et en gras

  • l’identifiant d’un élément HTML quelconque mais unique dans la page ; dans ce cas, le sélecteur est précédé du symbole dièse # :

→ formate un élément d’identifiant "titre_1" avec des propriétés de marge, de fond, etc.....

Dans le code HTML, le nom de l’identifiant est indiqué dans la balise d’ouverture désignant l’élément sur lequel on veut appliquer cet ensemble de propriétés :

Seul l’élément ( ici un titre de niveau 4 ) ayant cet identifiant sera formaté en accord avec ces règles de style ; tous les autres éléments de même nature seront formatés "par défaut"...)

  • Ce peut être enfin le nom d’une classe, c’est à dire un "groupe" d’un ensemble d’éléments HTML ( même de nature différente ) sur lesquels on veut appliquer les mêmes propriétés ; dans ce cas, le sélecteur commence par un point :

→ formate tous les éléments de la classe "python".

Dans le code HTML, le nom de la classe est indiqué pour chaque élément dans sa balise d’ouverture :

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

Par exemple, on peut "cibler" uniquement les éléments de type lien contenus dans les paragraphes appartenant à une classe donnée et pas dans les autres :

→ sélection uniquement des liens contenus dans les paragraphes appartenant à la classe "python".

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 :

→ sélection des classes python, code, java et de l’élément d’indentifiant programme.

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.

3.6. Les balises génériques

Pour le cas où il n’existe aucune balise déja définie pour désigner un élément HTML à formater, il existe deux types de balises "génériques" :