Le Web est un système permettant d’accéder à un ensemble de documents hypertextes en utilisant principalement un navigateur. Le Web était développé par Tim Berners-Lee au CERN (Suisse) en 1990.

Internet : Un système de communication qui permet aux ordinateurs autour du monde de communiquer et de s’échanger des informations entre eux.

Le Web ou World Wide Web (toile d’araignée mondiale) ou le WWW : est un système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un navigateur, des pages mises en ligne dans des sites.

Hypertexte : Ensemble de textes et d’autres documents qui peuvent être consultés à partir d’un système d’envoi hiérarchisé.

Les composants du Web

Un document hypertexte est principalement un document texte écrit en HTML/CSS/JavaScript contenant des unités d’information liées entre elles par des hyperliens. Mais, le type du document peut être aussi texte, audio, image, vidéo ou binaire.

Les documents en Web sont regroupés en ensembles de sites Web identifiés par des noms de domaines. Pour accéder à un document dans un site Web, on saisit l’URL (Unified Ressource Link), le nom du domaine du site et le chemin du document dans la barre d’adresse du navigateur. Exemples de sites Web :

Site de l’ISET de Sfax : www.isetsf.rnu.tn
L’article Web dans Wikipédiai : fr.wikipedia.org/wiki/World_Wide_Web

Pour l’échange de ces documents, le Web utilise le protocole HTTP (HyperText Transfer Protocol) qui permet la communication entre le client (navigateur) et le serveur. On peut nommer comme navigateurs principaux dans le marché :

Google Chrome - développé par Google depuis 2008. Il était basé sur le même moteur de rendu que Safari jusqu’à 2013
Firefox - développé par Mozilla depuis 2004 comme un successeur de Netscape
Safari - développé par Apple depuis 2003
Microsoft Edge - développé par Microsoft comme successeur d’Internet Explorer développé depuis 1995
Opera - développé depuis 1994. Depuis 2013, il est basé sur le même moteur de rendu que Chrome

L’évolution des navigateurs entre 1993 et 2016 — L'évolution des navigateurs entre 1993 et 2016. Par cours-web.ch

Le fonctionnement du Web

Le Web fonctionne suivant l’architecture Client/Serveur où les ordinateurs connectés sont des clients et des serveurs.

Les clients correspondent aux appareils connectés sur Internet et aux logiciels utilisés pour consulter les pages Web (par exemples les navigateurs Web : Firefox, Chrome, …)
Les serveurs sont les ordinateurs qui stockent des pages Web, des sites ou des applications Web. Lorsqu’un appareil “client” souhaite accéder à une page Web, une copie de page est générée par le serveur et téléchargée vers le client.

De plus le Web se compose d’autres concepts réseaux qui se trouvent entre le client et le serveur pour assurer son fonctionnement :

Internet TCP/IP : Transmission Control Protocol / Internet Protocol, sont des protocoles qui définissent la manière dont les données sont transférées à travers le Web.
DNS : Domain Name System, est un système qui ressemble à un annuaire pour les sites Web. Le navigateur utilise le DNS pour résoudre l’adresse IP du serveur avant de récupérer le site Web. En effet, le navigateur a besoin de savoir sur quel serveur le site Web est situé pour pouvoir envoyer des requêtes HTTP au bon endroit.
HTTP : HyperText Transfer Protocol, est un protocole d’application qui définit le language avec lequel les clients et les serveurs communiquent. Il était inventé par Tim Berners-Lee au CERN en 1990 comme protocole d’échange des documents HTML.

HTML

Le HTML (HyperText Markup Language) n’est pas un langage de programmation, mais un langage de “marquage” (markup en anglais) ou bien de “balises” (tags en anglais). Il permet de structurer le contenu d’une page Web selon un format déterminé par le concepteur et réalisé par le programmeur Web.

Les versions du langage HTML

Durant ses années d’existence, le standard HTML a connu diverses évolutions. La première version proposée en 1991 comportait 18 éléments. Différentes versions du standard HTML sont publiées, jusqu’à la version HTML 4.01 en 1999.

S’en suit une période de stagnation, durant laquelle le groupe de travail HTML du W3C (World Wide Web Consortium) focalise ses efforts sur un nouveau langage, le XHTML, qui s’avère une impasse.

En 2004, un groupe de travail concurrent se forme, nommé WHATWG (Web Hypertext Application Technology Working Group), rassemblant des représentants de Apple, Mozilla et Opera. Ce groupe élaborait le standard HTML5 entre 2004-2007. En janvier 2008, la première spécification a été publiée. Cette spécification a été adoptée comme référence par le groupe de travail HTML du W3C. Ce n’est qu’en 2014 que le HTML5 est devenu une recommandation stable du W3C. En fin 2017, le W3C a rendu officielle la version HTML 5.2. La version suivante HTML 5.3 est en cours d’élaboration.

L’évolution des standards HTML et CSS entre 1995 et 2015 — L'évolution des standards HTML et CSS entre 1995 et 2015. Par cours-web.ch

Les éléments HTML

Le vocabulaire du langage HTML se compose de plus qu’une centaine de balises qu’on assemble autour des différentes parties du contenu pour lui fournir un sens. Les balises qui entourent un mot ou le nom d’une image peuvent former un lien hypertexte, mettre le texte en italique, etc. Par exemple, avec la ligne de contenu suivante :

J'aime le Web

Si vous souhaitez indiquer que ce texte fait partie d’un paragraphe, on le placera dans un élément de paragraphe (<p>) :

<p>J'aime le Web</p>

Si on veut qu’il soit un titre, on le met dans la balise <h1>.

<h1>J'aime le Web</h1>

Anatomie d’un élément HTML

Regardons de plus près cet élément paragraphe <p> :

Les composants principaux de notre élément sont :

La balise ouvrante : celle-ci se compose du nom de l’élément (ici “p”), entre deux chevrons. Cela indique le début de l’élément, où l’endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
La balise fermante : ici on a également des chevrons et le nom de l’élément, auxquels on ajoute une barre oblique avant le nom de l’élément. Cela indique la fin de l’élément. Pour notre exemple, cela indique la fin du paragraphe.
Le contenu : C’est le contenu de l’élément, ici c’est simplement du texte.
L’élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.

Imbriquer des éléments

Vous pouvez placer des éléments au sein d’autres éléments, c’est ce qu’on appelle l’imbrication. Par exemple, si vous souhaitez montrer que vous aimez beaucoup le web, vous pouvez placer le mot « beaucoup » dans un élément <strong>, ce qui signifie que le mot sera mis en gras :

<p>J'aime <strong>beaucoup</strong> le Web</p>

Ce qui résulte en :

Toutefois il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l’exemple précédent, on ouvre l’élément <p>, puis l’élément <strong>. Plus loin, on ferme l’élément <strong> puis on ferme l’élément <p>. Si on utilise le code suivant, ce sera incorrect :

<p>J'aime <strong>beaucoup le Web</p></strong>

Même que les navigateurs implémentent différents algorithmes pour essayer de fixer ces erreurs dans les documents HTML avant d’afficher le résultat, il faut vérifier la structure du document parce que ces algorithmes ont des limites et peuvent donner des résultats différents et inutilisables.

Les balises orphelines

Ce sont des balises qui ont uniquement un indicateur de début. Comme la balise :

<img .../>

Les attributs

Les éléments peuvent avoir des “attributs”.

Les attributs contiennent des informations supplémentaires qui portent sur l’élément et qu’on ne souhaite pas afficher avec le contenu.

Exemples :

Dans une balise <a href ="http:...">Nom du lien </a> l’attribut href a comme valeur “http:….”.
Dans la balise <img src="...." width="150" height="200"> les trois attributs src, width et height sont des attributs de l’élément img.

Les attributs seront très utiles dans les chapitres suivants par exemple pour définir le comportement de nos formulaires et pour les mises en forme de page Web.

Un attribut doit toujours avoir :

un nom (le nom de l’attribut) qui doit être séparé par un espace du nom de la balise ou de l’attribut précédent (s’il y a des multiples attributs).
une valeur encadrée par des guillemets (“) et séparés par un signe égal “=” du son nom (le nom de l’attribut).

L’attribut a alors la syntaxe suivante : nom = "valeur"

Remarque : Les guillemets peuvent être omises dans HTML5.

Les attributs booléens ne nécessitent pas une valeur, un exemple d’un attribut booléen est l’attribut checked (coché) de l’élément case à cocher pour spécifier que la case est cochée, cet attribut ne nécessite pas une valeur car sa présence est interprétée comme la valeur vrai. Au contraire son absence est interprété comme la valeur faux.

Les commentaires dans HTML sont délimités par . Par exemple :

<!-- Un texte dans un commentaire -->

Les commentaires peuvent exister dans n’importe quelle partie du code HTML mais pas dans une balise (entre les chevrons de la balise). Prenons l’exemple :

Un texte
<!-- Un commentaire 
multi-ligne -->
à
<!-- un autre commentaire -->afficher
<p>une autre
  <!-- commentaire -->texte</p>

Le résultat sera :

Le document HTML

Pour l’instant nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l’exemple contenu dans le fichier index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ma première page Web</title>
  </head>
  <body>
    <p>J'aime <strong>beaucoup</strong> le Web.</p>
  </body>
</html>

Cet exemple contient :

<!DOCTYPE html>: le doctype. Au début de HTML, dans les années 1991-1992, les doctypes étaient utilisés pour faire référence à des ensembles de règles qu’on pouvait utiliser pour dire qu’un document était du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd’hui et sont juste présents pour s’assurer que la page puisse fonctionner y compris sur les anciens navigateurs.
<html></html>: l’élément <html>. Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l’élément racine.
<head></head>: l’élément <head>. Cet élément est utilisé comme un conteneur (container) pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C’est dans cet élément qu’on mettra des mots-clés, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères (character sets) à utiliser et ainsi de suite.
<body></body>: l’élément <body>. Cet élément est celui qui contient tout le contenu que vous souhaitez afficher pour qu’il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des fichiers sons, etc.
<meta charset="utf-8" />: Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c’est utf-8. utf-8 regroupe l’ensemble des caractères connus utilisés dans les différents langages humains. Généralement utf-8 permet de gérer n’importe quel texte que vous pourriez utiliser sur la page. C’est pour cette raison qu’on utilise ce jeu de caractères car il permet de couvrir l’extrême majorité des cas.
<title></title>: Cet élément définit le titre de votre page. C’est ce titre qui apparaîtra sur l’onglet lorsque la page sera chargée. C’est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages ou pour gérer l’accessibilité au niveau des navigateurs.

Les balises principales

Baliser le texte

Dans cette section, nous verrons quelques-uns des éléments de base de HTML pour baliser le texte.

Les titres

Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D’une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : <h1>–<h6>. La plupart du temps, 3-4 niveaux suffisent amplement :

<h1>Mon titre principal</h1>
<h2>Mon titre de section</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>

Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments.

Les paragraphes

Comme expliqué auparavant, les éléments <p> sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :

<p>Voici un paragraphe</p>

Un élément <p> placé dans un autre élément de type <p> sera interprété comme définit au dehors et le paragraphe externe est terminée avant l’ouverture de la balise de l’élément <p> interne.

<p>un paragraphe
  <p>un autre paragraphe</p> un texte</p>

Un élément <p> élimine les espaces redondants et les retours à la ligne suivante. Pour maintenir des espaces voulus ou bien un retour à la ligne, vous pouvez utiliser la balise <pre> au lieu de <p>.

Exemple :

<p>Un     paragraphe
  multi-ligne avec    espaces</p>

<pre>Un     paragraphe
  multi-ligne avec    espaces</pre>

Les listes

Une grande partie du contenu sur le Web est présente sous forme de listes à puces ou bien listes numérotées. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Le type de liste et les lignes de listes (les items). Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

Les listes non-ordonnées sont des listes pour lesquelles l’ordre des éléments n’a pas d’importance (correspondent aux listes à puces). La balise utilisée pour ces listes est l’élément <ul> (ul signifie unordered list qui signifie liste non-ordonnée en anglais)
Les listes ordonnées sont des listes pour lesquelles l’ordre des éléments est important c’est à dire les listes numérotées. La balise utilisée pour ces listes est l’élément <ol> (ol signifie ordered list qui signifie liste ordonnée en anglais)

Chaque élément d’une liste est balisé avec un élément <li> (list item).

Par exemple, si on souhaite modifier un paragraphe en une liste :

<p>Mozilla est une communauté mondiale composée de technologues, penseurs,
constructeurs qui travaillent ensemble...</p>

On pourrait faire :

<p>Mozilla est une communauté mondiale composée de</p>

<ul>
  <li>technologues</li>
  <li>penseurs</li>
  <li>constructeurs</li>
</ul>

<p>qui travaillent ensemble...</p>

Une liste ordonnées est similaire :

<ol>
  <li>Étape 1</li>
  <li>Étape 2</li>
  <li>Étape 3</li>
</ol>

Une liste peut être interne dans une liste. On peut aussi mélanger les listes des différents types.

<ul>
  <li>
    Chapitre I
    <ol>
      <li>Section 1</li>
      <li>
        Section 2
        <ul>
          <li>Sous Section A</li>
          <li>Sous Section B</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>Chapitre II</li>
</ul>

Listes de descriptions

La liste des descriptions permettent de décrire un terme. Elle est délimitée par la balise <dl> (description list). On utilise la balise <dt> (description term) pour spécifier le terme à définir suivi par une balise <dd> (description description) pour décrire le terme. On peut spécifier des multiple de termes par description ou multiple description par terme.

<dl>
  <dt>Un seul terme</dt>
  <dd>Une seule description</dd>

  <dt>Premier terme</dt>
  <dt>Deuxième terme</dt>
  <dd>Première description</dd>
  <dd>Deuxième description</dd>
</dl>

Le résultat sera :

Les images

Pour afficher un image, on utilise la balise <img>. Cet élément permet d’intégrer une image dans la page, à l’endroit où l’élément apparaît. La source de l’image utilisée est définie via l’attribut src (pour source) qui contient le chemin vers le fichier de l’image.

<img src="../assets/imgs/early-ibm-mainframe.jpg" alt="Un ancient mainframe IBM" />

Nous avons aussi utilisé l’attribut alt (pour alternatif) qui contient un texte qui permet de décrire l’image et qui peut être utilisé par les utilisateurs qui ne peuvent pas voir l’image en cas où ils sont malvoyants ou en cas où quelque chose qui s’est mal passée et que l’image n’a pas pu être affichée. Par exemple, cela peut se produire si le chemin vers l’image est incorrect ou bien le fichier de l’image est supprimé accidentellement.

L’image affichée dans le document HTML sera de même dimensions que les dimensions réelles du fichier image. Les attributs height et width permettent de modifier les dimensions d’affichage en dimensionnant l’image par rapport à la hauteur ou à la largeur spécifiées en pixels ou à la hauteur et la largeur spécifié ensemble.

Prenons l’exemple de spécification d’une seule dimension, l’autre dimension sera calculée relativement à la dimension spécifiée pour garder le format de l’image origine.

<img height="150" src="../assets/imgs/early-ibm-mainframe.jpg" />

Au contraire, si on spécifie les deux dimensions :

<img height="150" width="300" src="../assets/imgs/early-ibm-mainframe.jpg" />

Les navigateurs supportent de multiple formats d’images. Les principaux formats d’images les plus supportés sont :

JPEG : format image compressé avec perte. Standardisé par JPEG (Joint Photographic Experts Group). Les extensions sont .jpg et .jpeg.
PNG (Portable Network Graphics) format image compressé sans perte. Il supporte les images transparentes. L’extension est .png.
GIF (Graphics Interchange Format) format image compressé sans perte. Il supporte les images transparentes et les animations. Les couleurs sont limitées à 8 bits (256 couleurs). L’extension est .gif.
BMP format image non compressé (Bit Map) sans perte. L’extension est .bmp.
SVG format image vectoriel standarisé par W3C. L’exntesion est .svg.

Les liens

Les liens sont très importants, ce sont eux qui font que le Web est une toile sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d’utiliser l’élément <a> (le a est un raccourci pour « ancre »). Pour transformer du texte en un lien, suivez ces étapes :

Choisissez un texte (ici nous travaillerons avec le texte « Google Search ».
Encadrez le texte dans un élément <a> :
```
<a>Google Search</a>
```
Fournissez un attribut href (href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français) pour l’élément <a>, de cette façon :
```
<a href="">Google Search</a>
```
Dans cet attribut, ajoutez le lien du site vers lequel vous voulez faire diriger les utilisateurs :
```
<a href="https://www.google.com/search/">Google Search</a>
```

Les références hypertexte sont de différents types :

Références externes absolues : Ce sont des URL absolues vers une ressource dans le Web. Ces URL doivent être composés de la partie protocole (http:// ou https://), de la partie du nom de domaine (p.ex: google.com) ou de l’adresse IP (p.ex: 127.0.0.1), du numéro du port TCP optionnel (80 par défaut pour http:// et 443 par défaut pour https://) et le chemin vers la ressource Web (page Web, image, …).
```
<a href="https://www.google.com/search/">Google Search</a>
```
Si la ressource est dans le même site Web que la page Web courante, on peut spécifier seulement le chemin absolu de la ressource en commençant par /.
```
<a href="/fr/contact.html">Contactez Nous</a>
```
Références externes relatives : Ce sont des liens relatifs à la page Web courante. Par exemple, pour référencer une page Web contact.html dont le même dossier que la page courante :
```
<a href="contact.html">Contactez Nous</a>
<a href="./contact.html">Contactez Nous</a>
```
De même pour référencer une page Web acceuil.html dans le dossier parent :
```
<a href="../acceuil.html">Acceuil</a>
```
Références internes : Ce sont des références aux éléments HTML dans le même document. Pour référencer un élément, on lui donne un identificateur unique en utilisant l’attribut id puis on le référence par son identificateur préfixé par le signe “#”.

<h1 id="titre">Mon titre</h1>
<a href="#titre">Allez au titre</a>

L’élément <a> n’est pas limité à référencer les ressources accessibles par le protocole HTTP (http:// et https://). D’autres protocoles sont supportés nativement ou à travers des plugins. Ces protocoles sont principalement :

ftp:// (FTP) pour accéder aux ressources dans les serveurs FTP.
file:// pour accéder aux ressources qui sont dans le système de fichier de l’appareil dont le navigateur est éxecuté.
mailto: permet d’ouvrir le client e-mail pour créer un nouveau message électronique avec l’email de réception spécifiée. Le format du lien est mailto:<ADRESSE_EMAIL>. Par exemple, pour créer un lien mailto de destination contact@exemple.com :
```
<a href="mailto:contact@exemple.com">Contactez Nous</a>
```
tel: pour référencer un numéro de téléphone. Il est supporté par la majorité des navigateurs mobiles. Le format du numéro de téléphone doit suivre la spécification RFC 3966. Par exemple : pour contacter le numéro de téléphone tunisien 12345678 (qui est de préfixe international +216) :
```
<a href="tel:+21612345678">Contactez Nous</a>
```

L’élément <a> peut accepter l’attribut target pour spécifier où sera ouvrert le lien. La valeur _blank permet d’ouvrir le lien dans un nouvel onglet. La valeur par défaut _self permet d’ouvrir le lien dans le même onglet que la page Web courante.

Les balises textes en ligne (inline)

Ces balises sont utilisées pour définir la structure, le style et la sémantique du texte. Contrairement aux éléments de structure de texte précédents de type “bloc” (comme les éléments du paragraphe et de listes), ces éléments peuvent être contenus dans un paragraphe et ne causent pas la création d’un nouveau bloc.

Mise en forme de texte

Ces éléments sont initialement introduits dans les anciennes versions de HTML comme des éléments de mise en forme. Ils se sont évolués en HTML5 pour présenter des significations plus sémantiques et la mise en forme est délaissée pour le CSS. On va présenter les éléments principaux et leurs significations physique (de mise en forme) et sémantique.

L’élément <b> (boldface) met le texte en gras pour attirer l’attention de l’utilisateur sans aucune signification d’importance. Par exemple, il est utilisé pour mettre en gras le nom d’un produit ou des mots clés.

Le <b>HTML</b> était inventé en <b>CERN</b>.

L’élément <i> (italic) met en italique le texte. Il permet d’indiquer qu’une partie de texte est différente du reste du texte. Par exemple, il est utilisé pour mettre en italique un texte écrit en langage étrangère ou un terme technique.

PNG (<i>Portable Network Graphics</i>) est un format d'image

L’élément <u> (underline) met le texte en mode souligné. Il n’a pas de signification sémantique exacte comme les autres éléments mais il peut être utilisé pour indiquer par exemple un texte mal écrit.

Ce texte contient un <u>mal écrite contenu</u>

L’élément <s> (strikethrough) met le texte barré. Il permet d’indiquer que le texte n’est plus précis ou relié au contexte. Pour indiquer que le texte est supprimé par l’utilisateur, on utilise l’élément <del> (delete).

Ce produit <s>est</s> était très demandé

L’élément <small> met le texte à une taille plus petite. Il permet d’indiquer que le texte est un commentaire ou une note comme une note de droit d’auteur ou une note légale.

<small>Copyright © 2017-2018</small>

Importance Logique

Ces éléments indiquent la différence de niveau d’importance logique du texte dans son contexte. Ils peuvent causer des changements de la mise en forme du texte mais pas forcément.

L’élément <strong> indique que le texte est de haute importance. Par exemple, il est utilisé pour présenter un alerte ou un message très sérieux. Généralement, le texte sera mis en gras.

<strong>Attension!</strong> Ce produit est <strong>dangereux</strong>

L’élément <mark> met en évidence un texte pour indiquer son importance dans son contexte. Par exemple, il est utilisé pour indiquer le résultat d’une recherche ou pour indiquer que le texte est intéressant pour l’utilisateur. Généralement, le texte aura une couleur de fond différente.

Il est <mark>sensible à cet produit</mark>

L’élément <em> (emphasise) indique que le texte est de forte accent. Généralement, le texte sera mis en itallique. La combinaison de <em> et <strong> (l’un dans l’autre) augmente l’importance du texte.

<em>Arrête!</em>

Abréviation et Citation

L’élément <abbr> permet d’indiquer une abréviation avec son explication en utilisant l’attribut title qui sera affichée dans un tooltip quand la souris sera dessus du texte. La mise en forme du texte diffère entre les navigateurs.

L' <abbr title="World Wide Web Consortium">W3C</abbr> principale est l'organisation de standardisation de HTML.

L’élément <cite> permet de citer un objet ou un travail par nom ou URL. Par exemple, il est utilisé pour citer un livre, une recherche, un film, une musique, un jeu ou un site, etc. Généralement, le texte est mis en italique.

La spécification de JavaScript est définit dans le standard <cite>ECMA-262</cide>

L’élément <q> (quotation) permet de mettre un texte entre quôtes. L’attribut optionnel cite référence l’URL de source de l’information. Généralement, le texte sera délimité par deux quôtes. L’élément <blockquote> permet de quôter un bloc.

<q cite="http://www.w3.org/TR/2014/REC-html5-20141028/">
  Le standard HTML5 était publié comme recommandation en 2014
</q>

Insertion du code

L’élément <code> indique que le texte est un partie de code source d’un logiciel. Le texte sera affiché en fonte monospace.

La fonction <code>main()</code> est obligatoire dans les programmes développés en C

La combinaison de l’élément <code> avec l’élément <pre> permet d’insérer un bloc de code source en gardant les espaces et les retours à la ligne.

<code><pre>
int main() {
    return 0;
}
</pre></code>

HTML définit un ensemble d’autres éléments permettant de présenter des fragments de texte comme des variables en utilisant <var>, des textes saisis par l’utilisateur au programme ou un ensemble de commandes en utilisant <kbd>, le texte généré par un programme en utilisant <samp>.

Les balises universelles

Le HTML définit deux éléments universels qui sont généraux, qui n’ont aucune signification sémantique ou physique (aucune mise en forme prédéfinie). Ces deux éléments sont :

<span> : C’est l’élément en ligne (inline) (de contenu phrasé) ; C’est à dire qu’il peut être contenu dans un paragraphe et qu’il ne cause pas la création d’un nouveau bloc. La mise en forme de cet élément est faite par le CSS à travers la définition d’un identificateur unique (l’attribut id) ou l’ensemble des classes auxquelles il appartient (l’attribut class).
<div> : C’est l’élément bloc ; c’est à dire qu’il occupe toute la largeur à disposition et crée une cassure de la ligne visuelle avant lui et après. Aussi, la mise en forme de cet élément est à travers l’attribut id ou l’attribut class.

Un exemple de l’élément <span> :

<span>un texte</span>
<span>et un autre</span>

Un exemple de l’élément <div> :

<div>
  un bloc
</div>
<div>
  un autre bloc <span>avec un span</span>
</div>

Balises structurantes

HTML5 a ajouté un ensembles de balises dont un ensemble de balises structurantes qui permettent de construire un document HTML plus sémantique et qui sont préférées à l’utilisation de <div> quand c’est possible. Ces balises n’ont pas un effet visuel dans le document. C’est le rôle du CSS.

Les nouvelles balises structurantes du HTML5 :

header: Section d’introduction d’un article, d’une nouvelle section ou du document entier (en-tête de page).
article: Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
nav: Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages).
aside: Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
footer: Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).
section: Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec une en-tête. Il est recommandé de ne l’utiliser que s’il n’y a pas d’élément sémantique plus spécifique (parmis les éléments ci-dessus indiqués) pour représenter le contenu.

Structure d’une page Web d’un article

On va montrer la structure d’une page Web d’un article. Cette page contient :

en-tête de page : contient le nom du site Web, le logo, etc. Cette partie est délimitée par la balise <header>.
barre de navigation : contient des liens vers la page d’accueil, les différentes catégories des articles, la page du contact, etc. Cette partie est délimitée par la balise <nav>.
pied de page : contient une note légale (le droit d’auteur et la licence de l’article), un lien vers le terme d’utilisation, etc. Cette partie est délimitée par la balise <footer>.
L’article principal : contient le titre de l’article, les données supplémentaires (date de publication, noms d’auteurs, …) et le contenu de l’article. Cette partie est délimitée par la balise <article>.
section complémentaire : contient des liens vers d’autres contenus. Cette partie est délimitée par la balise <aside>.
corps de la page : contient l’article et la section complémentaire. Cette partie est délimitée par la balise <main>.

Application

Structure sémentique d'une page Web contenant un article — Structure sémantique d'une page Web contenant un article. Par Beginning HTML5 and CSS3

Exemple: le code HTML suivant permet de rendre la page juste après.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Titre de l'article</title>
</head>

<body>

  <header>
    <h1>Nom du site</h1>
  </header>

  <nav>
    <ul>
      <li><a href="/index.html">Accueil</a></li>
      <li><a href="/top.html">Top Articles</a></li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <header>
        <h1>Titre de l'article</h1>
        <p>
          Posté en <time datetime="2017-10-05 09:42">10 Oct</time> par Sawssen Hariz
        </p>
      </header>
      <p>
        Contenu de l'article...
      </p>
      <footer>
        <!-- Données auxiliaires (non auteur, commentaires,...) -->
      </footer>
    </article>

    <aside>
      <h3>Articles similaires</h3>
      <ul>
        <li><a href="/article/3.html">Article 3</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <small>Copyright © 2018 Sawssen Hariz</small>
    <ul>
      <li><a href="/tos.html">Termes d'utilisation</a></li>
      <li><a href="/privacy.html">Confidence</a></li>
      <li><a href="/about.html">À propos</a></li>
    </ul>
  </footer>

</body>

</html>

Tableaux

Une tâche commune dans le développement Web est de structurer et de présenter des données sous forme de tableau. HTML contient un ensemble de balises pour construire des tableaux simples et des tableaux complexes et les mettre en formes avec le CSS. Dans ce chapitre, nous allons introduire ces balises HTML. Leur présentation par CSS, sera introduite dans le chapitre CSS.

Les balises de Tableau

Pour structurer un tableau, on utilise la balise <table> qui est utilisé comme un conteneur (container) de toutes les données du tableau et qui encadre les lignes et les colonnes. Pour présenter une ligne on utilise la balise <tr> (table row) qui elle même contient les balises <td> (tabular data) représentants les colonnes du tableau. Par exemple, le code suivant présente un tableau de personnes contenant deux lignes chacune présente une personne (son prénom dans la première colonne et son nom dans la deuxième colonne) :

<table>
  <tr>
    <td>Ali</td>
    <td>Masoud</td>
  </tr>
  <tr>
    <td>Salma</td>
    <td>Hchicha</td>
  </tr>
</table>

Le tableau résultant est :

On va maintenant ajouter le titre des différentes colonnes du tableau en utilisant la balise <th> (table header) dans une ligne qui simplifie l’exploitation du tableau visuellement.

<table>
  <tr>
    <th>Prénom</th>
    <th>Nom</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Masoud</td>
  </tr>
  <tr>
    <td>Salma</td>
    <td>Hchicha</td>
  </tr>
</table>

Le tableau résultant est :

Pour le reste de ce chapitre, on va utiliser l’attribut border de la balise <table> qui ajoute une bordure entre les éléments du tableau pour les identifier plus facilement. Même que cet attribut est obsolète¹ depuis HTML5 en faveur des propriétés de CSS, on va l’utiliser comme solution temporaire jusqu’à ce qu’on arrive au chapitre de CSS3. Donc, en remplaçant la première ligne du code précédent <table> par <table border="1">, le résultat sera :

Structure Tableau Avancée

Le HTML nous permet de fusionner horizontalement les colonnes et verticalement les lignes d’un tableau grâce aux attributs colspan et rowspan respectivement des balises <td> et <th> qui prennent comme valeur le nombre des cellules à fusionner. Prenons comme exemple un tableau d’un mini emploie du temps avec les séances de cours sont de durée de 2 heures tantdis que les séances de TP sont de durée d’une heure. Sans les attributs de fusions, le tableau sera le suivant :

<table border="1">
  <tr>
    <th>Journée</th>
    <th>08 - 09</th>
    <th>09 - 10</th>
    <th>10 - 11</th>
    <th>11 - 12</th>
  </tr>
  <tr>
    <td>Landi</td>
    <td>Cours Web</td>
    <td>Cours Web</td>
    <td>TP Java</td>
    <td>TP Linux</td>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>TP Web</td>
    <td>Cours Linux</td>
    <td>Cours Linux</td>
    <td></td>
  </tr>
</table>

La solution est de fusionner les deux colonnes des séances de cours en utilisant l’attribut colspan.

<table border="1">
  <tr>
    <th>Journée</th>
    <th>08 - 09</th>
    <th>09 - 10</th>
    <th>10 - 11</th>
    <th>11 - 12</th>
  </tr>
  <tr>
    <td>Landi</td>
    <td colspan="2">Cours Web</td>
    <td>TP Java</td>
    <td>TP Linux</td>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>TP Web</td>
    <td colspan="2">Cours Linux</td>
    <td></td>
  </tr>
</table>

Le tableau supporte le groupement des lignes en trois sections : l’en-tête en utilisant la balise <thead>, le corps en utilisant la balise <tbody> et le pied en utilisant la balise <tfooer> ce qui permet la séparation sémantique des lignes du tableau et facilite ses mises en forme. Si ces balises n’étaient pas utilisées, toutes les lignes du tableau sont délimitées implicitement par la balise <tbody>. Prenons l’exemple précédent avec le groupement des lignes :

<table border="1">
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>Masoud</td>
    </tr>
    <tr>
      <td>Salma</td>
      <td>Hchicha</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </tfoot>
</table>

Le tableau résultant est :

Pour ajouter un titre (une légende) à un tableau, on utilise la balise <caption> après l’ouverture de la balise <table> ou avant sa fermeture :

<table border="1">
  <caption>Liste des personne</caption>
  <thead>
    <tr>
      <th>Prénom</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>Masoud</td>
    </tr>
    <tr>
      <td>Salma</td>
      <td>Hchicha</td>
    </tr>
  </tbody>
</table>

Le tableau résultant est :

Remarques

Anciennement, la balise <table> était utilisée pour mettre en forme la page Web à cause des limites de CSS et son mal support par les navigateurs. Mais, depuis le HTML5, il est recommandé de ne plus utiliser les tableaux pour la mise en forme de pages Web mais plutôt, il vaut mieux utiliser le CSS3 parce que la balise <table> n’est pas sensible aux différents types d’écrans (c’est à dire n’est pas responsive design) et demande une structure HTML plus complexe.

La plupart des attributs des balises de tableaux (<table>, <th>, <tr>, <td>, …) sont devenus obsolètes¹ depuis HTML5 en faveur des propriétés de CSS ou en faveur des autres balises en HTML.

Cette fonctionnalité n’est plus officiellement supportée par le standard. Et les vendeurs des navigateurs vont supprimer son support dans le futur sans aucune notification préalable. ↩ ↩²

Formulaire

Le HTML fournit un ensemble de balises pour construire des formulaires qui sont les éléments de base pour développer des pages interactives où l’utilisateur peut saisir des données, cliquer des boutons et sélectionner un ensemble de choix. Ces données peuvent être envoyées au serveur Web ou interceptées et utilisées par la page Web en utilisant le langage de programmation Web JavaScript. La mise en forme des formulaires avec CSS et le traitements dynamiques des ces formulaires avec JavaScript seront présentés dans des sections ultérieures.

Création d’un formulaire

Les formulaires doivent être délimités par la balise <form> et </form>. Comme celui-ci :

<form action="https://example.com/page-traitement" method="post">
</form>

C’est un élément conteneur définissant un formulaire. Pour spécifier la manière dont il se comporte, on ajoute les attributs action et method :

action : définit l’URL de la page où doivent être envoyées les données collectées par le formulaire.
method : définit la méthode HTTP utilisée pour envoyer les données (“get” ou “post”).

On ajoute ensuite les balises du formulaire. HTML5 a enrichi la liste de ces balises pour supporter différents types de données à saisir et a amélioré l’intégration avec le système.

Éléments d’un formulaire

Le HTML5 contient un nombre riche d’éléments de formulaire supportant des multiples types de données à saisir et améliorant l’intégration avec le système.

Champ de texte simple

C’est l’élément le plus basique de saisie. Il permet la saisie d’une seule ligne de texte.

<input type="text" />

Mot de passe

Il permet la saisie d’une seule ligne de données sensible à la casse (mot de passe). Le texte saisi n’est pas affiché mais des astérisques ou des points seront affichés.

<input type="password" />

Nombre

Il permet la saisie d’un nombre. On peut spécifier le nombre minimal possible par l’attribut min et le maximal par max et le pas entre les nombres possibles step

<input type="number" placeholder="Temperature en °C" min="-50" max="150" step="0.2" />

Zone de texte

Il permet de saisir un texte de plusieurs lignes. On peut changer sa hauteur et sa largeur en nombre des caractères.

<textarea cols="30" rows="3"></textarea>

Étiquette / label

La balise <label> permet de décrire le champ à saisir. On utilise l’attribut for pour spécifier l’identificateur de l’élément correspondant.

<label for="nom">Donnez votre nom :</label>
<input type="text" id="nom" />

Case à cocher

Elle permet de sélectionner de multiple choix dans une liste proposée (soit zéro ou un ou multiple choix). Les choix doivent appartenir au même groupe en leur donnant le même nom (même valeur de l’attribut name) mais chaque choix doit avoir une valeur différente de l’attribut value.

<p>
  <label>
    <input type="checkbox" name="food" value="végétarian" />
    Végétarien
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="fruit-de-mer" />
    Fruit de mer
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="steak" />
    Steak
  </label>
</p>

Groupe radio

Il permet de sélectionner un seul choix dans une liste proposée. Les choix qui sont les boutons radios doivent appartenir au même groupe en leur donnant le même nom (même valeur de l’attribut name) mais chaque choix (chaque bouton radio de même groupe) doit avoir une valeur différente de l’attribut value.

<p>
  <label>
    <input type="radio" name="reponse" value="vrai" />
    Vrai
  </label>
</p>
<p>
  <label>
    <input type="radio" name="reponse" value="faux" />
    Faux
  </label>
</p>

Bouton d’envoi

Il permet l’envoi des données saisies à l’URL spécifié dans l’attribut action du formulaire en utilisant la méthode HTTP spécifiée dans l’attribut method du formulaire. La création du bouton d’envoi peut être à travers un élément <input> de type submit ou d’un élément <button> qui est par défaut de type submit.

<p>
  <input type="submit" value="Envoyé le formulaire" />
</p>
<p>
  <button>Envoyé le <mark>formulaire</mark></button>
</p>

Bouton de réinitialisation

Il permet la réinitialisation des champs du formulaire. La création du bouton de réinitialisation peut être à travers un élément <input> de type reset ou d’un élément <button> de type reset.

<form>
  <input type="text" />
  <input type="reset" value="Réinitialiser" />
  <button type="reset"><b>Réinitialiser</b></button>
</form>

Liste à choix multiple

Il permet de sélectionner un seul (ou plusieurs) choix dans une liste d’options déroulante. Les choix sont des balises <option> avec différentes valeurs de l’attribut value. Elles sont toutes regroupées dans une balise <select>. L’attribut multiple permet la sélection de multiples choix dans une liste non déroulante.

<p>
  <select>
    <option value="tn">Tunisie</option>
    <option value="fr">France</option>
    <option value="us">États-Unis</option>
  </select>
</p>
<p>
  <select multiple>
    <option value="m">Musique</option>
    <option value="v">Vidéo</option>
    <option value="p">Photo</option>
  </select>
</p>

Fichier

Il permet de sélectionner un fichier depuis l’appareil de l’utilisateur pour le télécharger (uploader) vers le serveur. L’attribut enctype du formulaire doit être égal à “multipart/form-data” pour que le formulaire peut uploader le fichier. L’attribut multiple permet la sélection de fichier multiples. L’attribut accept peut être utilisé pour définir les types de fichier que le contrôle permet de sélectionner sous la forme d’une liste d’extensions de fichier ou de types MIME séparés par des virgules.

<form enctype="multipart/form-data">
  <input type="file" accept="image/*" />
</form>

Dates / Temps

Cette classe de type permet de saisir une date, un horaire ou les deux en utilisant respectivement les types date, time, datetime-local sans fuseau horaire. En plus, il permet de saisir une semaine d’une année et un mois d’une année en utilisant le type week et month respectivement. Le navigateur utilisera une interface pour améliorer l’expérience utilisateur. On peut spécifier la valeur minimale et la valeur maximale et le pas pour ces champs en utilisant respectivement les attributs min, max et step.

<p>
  <label>Champ de Date :</label>
  <input type="date" />
</p>
<p>
  <label>Champ de temps :</label>
  <input type="time" min="13:00" max="18:30" />
</p>
<p>
  <label>Champ de date et temps local:</label>
  <input type="datetime-local" />
</p>
<p>
  <label>Champ de mois:</label>
  <input type="month" />
</p>
<p>
  <label>Champ de semaine:</label>
  <input type="week" />
</p>

Noté bien: Le support des champs de type datetime-local, week et month ne sont pas encore supporté par la version bureautique du Firefox et Safari.

Couleur

Il permet la sélection d’une couleur en utilisant un sélecteur des couleurs.

<input type="color" />

Zone de recherche

Permet de saisir une seul ligne du texte. La différence entre ce type et le type texte est qu’il peut avoir une mise en forme différente qui dépend du navigateur utilisé.

<input type="search" />

Champ email

Il permet la saisie d’une ou de plusieurs adresses électroniques (email) qui sera/seront validée(s) par le navigateur. Le clavier tactile du smartphone sera optimisé pour la saisie des email. L’attribut multiple permet le saisir de multiple emails séparés par des virgules.

<input type="email" />

Champ URL

Il permet la saisie d’un URL absolu qui sera validé par le navigateur. Le clavier tactile du smartphone sera optimisé pour la saisie des URL.

<input type="url" />

Champ Téléphone

Il permet la saisie d’un numéro de téléphone. Il ne sera pas validé par le navigateur par ce que leurs formats varient beaucoup entre les pays. Le clavier tactile du smartphone sera optimisé pour leur saisie.

<input type="tel" />

Les attributs du formulaire

name

Définir le nom de l’élément du formulaire qui sera utilisé lors de l’envoi des données saisies au serveur qui peut les manipuler correctement. Cet attribut est obligatoire à tous les champs de saisie dont les valeurs seront envoyées au serveur.

type

Cet attribut spécifie le type du champ de saisie pour les éléments <input> et le type du bouton pour l’élément <button>.

value

Spécifie la valeur par défaut du champ et sera modifiée en cas de saisie.

autocomplete

Indiquer que le champ peut avoir sa valeur par défaut complétée automatiquement par le navigateur en utilisant les valeurs anciennement saisies. L’attribut autocomplete supporte un ensemble de valeurs permettant de spécifier le type de données à compléter, par exemple, la valeur “country-name” indique que le navigateur peut compléter le champ par le nom du pays de l’utilisateur. La liste complète des valeurs possible est accessible dans Mozilla Developer Network.

autofocus

Un attribut booléen pour mettre l’élément en focus lorsque la page est chargée. Un seul élément peut avoir le focus.

placeholder

Spécifier le texte à afficher dans le champ en gris à moitié transparent quand le champ est vide pour donner plus d’allusion à l’utilisateur.

<input type="email" placeholder="Exemple: contact@exemple.com" />

max, min, step

Spécifier la valeur maximale, la valeur minimale et le pas entre les valeurs possible pour les champs numériques ou des dates et des temps.

<p>
  <label>Saisi un nombre entre 5 et 10</label>
  <input type="number" min="5" max="10" />
</p>
<p>
  <label>Saisi un nombre entre -Inf et 100</label>
  <input type="number" step="10" max="100" />
</p>
<p>
  <label>Saisi un horaire entre 13:00 et 18:30</label>
  <input type="time" min="13:00" max="18:30" />
</p>

maxlength, minlength

Spécifier la longueur maximale et la longueur minimale du texte saisi pour les champs textuels.

<p>
  <label>Text de longeur maximale 20 lettres</label>
  <input type="text" maxlength="20" />
</p>
<p>
  <label>Mot de passe de longeur entre 8 et 32 lettres</label>
  <input type="password" minlength="8" maxlength="32" required />
</p>

checked, selected

Deux attributs booléens:

pour spécifier les choix sélectionnés par défaut dans une liste de cases à cocher ou dans une liste de choix sélectionné ou encore dans une liste de boutons radios en utilisant l’attribut checked
pour spécifier le(s) choix sélectionné(s) par défaut dans une liste d’options en utilisant l’attribut selected.

<label>
  <input type="radio" name="genre" value="h" checked />
  Homme
</label>
<label>
  <input type="radio" name="genre" value="f" />
  Femme
</label>


<p>
  <label>
    <input type="checkbox" name="food" value="végétarian" checked />
    Végétarien
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="fruit-de-mer" />
    Fruit de mer
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="steak" checked />
    Steak
  </label>
</p>

<p>
  <select>
    <option value="fr">France</option>
    <option selected value="tn">Tunisie</option>
    <option value="us">États-Unis</option>
  </select>
</p>
<p>
  <select multiple>
    <option selected value="m">Musique</option>
    <option value="v">Vidéo</option>
    <option selected value="p">Photo</option>
  </select>
</p>

required

Indique que la saisie des données (avec validation si supportée) dans le champ est obligatoire avant l’envoi des données. Dans le cas des boutons radios ou d’une liste de choix, l’attribut booléen indique que, un des choix doit être coché/sélectionné. Dans le cas de cases à cocher, il indique que ce choix doit être coché. Dans un élément de type fichier, il indique qu’un fichier doit être sélectionné.

<form>
  <p>
    <input type="text" />
  </p>
  <p>
    <input type="text" required />
  </p>
  <p>
    <label>
      <input type="radio" name="quiz" value="c1" />
      Choix 1
    </label>
    <label>
      <input type="radio" name="quiz" value="c2" required />
      Choix 2
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="check" value="c1" />
      Case 1
    </label>
    <label>
      <input type="checkbox" name="check" value="c2" required />
      Case 2 (Obligatoire)
    </label>
  </p>
  <p>
    <select multiple required>
      <option value="m">Musique</option>
      <option value="v">Vidéo</option>
      <option value="p">Photo</option>
    </select>
  </p>
  <input type="submit" value="Valider et Envoyez" />
</form>

pattern

Spécifier l’expression régulière des valeurs valides à saisir dans les champs textuels. Dans le cas d’un champ d’email ou d’URL, l’attribut est appliqué seulement si l’email ou l’URL est déjà de format valide.

Dans le premier exemple, on va limiter le texte saisi seulement à des chiffres hexadécimaux. On va utiliser une expression régulière qui accepte seulement des chiffres décimaux (‘0’…‘9’) et les lettres ‘A’ à ‘F’ en minuscule et en majuscule.

<form>
  <p>
    <label>Solution 1</label>
    <input type="text" pattern="[a-fA-F0-9]*" required />
  </p>
  <p>
    <label>Solution 2</label>
    <input type="text" pattern="[a-fA-F\d]*" required />
  </p>
  <input type="submit" value="Valider" />
</form>

Dans le deuxième exemple, on veut limiter les emails saisis aux emails du Google Mail (gmail) seulement. On a besoin donc d’une expression régulière qui soit valide si le nom du domaine de l’email est “gmail.com”, nous n’avons pas besoin de valider le format d’email (le contenu saisi avant ‘@’) car le format est validé avant la validation avec le pattern.

<form action="#">
  <input type="email" pattern=".+@gmail.com" required />
  <button>Vérifier</button>
</form>

disabled, readonly

Attributs booléens dont disabled spécifie que l’élément ne doit pas réagir à toutes les intéractions d’utilisateur (clic, sélection, …) et ne doit pas être envoyé au serveur. Tantdis que readonly spécifie que la valeur de l’élément ne doit pas être modifiée par l’utilisateur mais son contenu doit être envoyé au serveur.

<p>
  <input type="text" value="Je suis disabled" disabled />
</p>
<p>
  <input type="text" value="Je suis readonly" readonly />
</p>

Application

Premier formulaire

On va créer un formulaire simple de contact qui permet de saisir le nom et le prénom, l’email, le téléphone et le message. Il ne contient que quatre champs de texte, chacun ayant un libellé. Le premier est un champ texte pour la saisie du nom et prénom, le deuxième est un champ texte qui n’accepte qu’une adresse email valide, le troisième est un champ texte pour la saisie d’un numéro de téléphone et finalement un champ de type texte de plusieurs lignes pour la saisie du message de contact.

<form action="/contact.php" method="post">
  <p>
    <label for="nom">Nom et Prénom :</label>
    <input type="text" id="nom" name="nom" />
  </p>
  <p>
    <label for="email">Email :</label>
    <input type="email" id="email" name="mail" />
  </p>
  <p>
    <label for="phone">Téléphone :</label>
    <input type="tel" id="phone" name="phone" />
  </p>
  <p>
    <label for="message">Message :</label>
    <textarea id="message" rows="4" cols="30" name="msg"></textarea>
  </p>
  <p>
    <input type="submit" value="Envoyez" />
    <input type="reset" value="Réinitialiser" />
  </p>
</form>

L’utilisation de la balise <p> ici est juste pour structurer notre code et séparer visuellement les différents champs sans besoin de CSS. Chaque champ est accompagné d’une étiquette (veuillez noter la balise <label>). Pour faire la relation logique entre le champ et son étiquette, on utilise l’attribut for de l’étiquette pour référencer l’identificateur du champ (l’attribut id). Un des avantages de lier l’étiquette à son élément correspondant est de permettre à l’utilisateur de cliquer sur l’étiquette pour activer le champ correspondant.

Les trois premiers champs sont des éléments <input> dont on a utilisé l’attribut type pour spécifier le type de données à saisir. Le HTML5 supporte de différents types :

le type text permet de saisir une seule ligne de texte (nom et prénom dans notre cas) sans contrôle ni validation,
le type email permet de saisir une adresse email qui doit forcément être une adresse électronique valide,
le type tel permet la saisie d’un numéro de téléphone malgré il n’y a pas contrôle de numéros de téléphone car ils ne sont pas “standard international”, L’utilisation du champ de type tel améliore l’intégration avec les téléphones en affichant un clavier virtuel adapté à la saisie des numéros de téléphone (aussi pour le cas de champ de type email).
Le quatrième élément est un champ de texte de plusieurs lignes, on peut dimensionner ce champ en nombre de caractères visibles par ligne en utilisant l’attribut cols et le nombre de lignes visibles en utilisant l’attribut rows.

Les boutons sont des éléments <input>. Le premier bouton avec le type submit pour spécifier que ce bouton doit envoyer les données saisies à notre serveur. Le deuxième bouton est un autre élément de type reset pour spécifier que ce bouton doit réinitialiser les champs de notre formulaire. Pour changer le contenu de ces boutons, on utilise l’attribut value.

Deuxième formulaire

Donc, on va créer un nouveau formulaire utile et fonctionnel qui permettra de chercher un terme dans le moteur de recherche Google. Le moteur de recherche Google attend de passer le terme à rechercher avec le nom q (query) à https://www.google.com/search en utilisant la méthode “get”.

<form action="https://www.google.com/search" method="get" target="_blank">
  <input type="search" name="q" placeholder="Entrez votre terme..." required />
  <button>Recherche en <i>Google</i></button>
</form>

Pour le champ texte de saisie du terme, on a utilisé un élément <input> de type search. C’est un élément équivalent au champ de type text mais qui peut avoir une différente mise en forme qui dépend du navigateur utilisé. On a nommé ce champ q en utilisant l’attribut name puisque le moteur de recherche Google attend le terme à chercher passé avec le nom q. Deux nouveaux attributs utilisés dans cet élément sont placeholder qui permet de définir le texte à afficher en gris à moitié transparent dans le champ s’il est vide et qui peut être utilisé au lieu ou avec l’étiquette. L’autre attribut est required qui indique que ce champ est obligatoire à saisir avant l’envoi des données au serveur.

On a aussi utilisé l’élément <button> au lieu du <input type="submit" />. Ils ont presque le même rôle. En effet, l’élément <button> est plus flexible et supporte la mise en forme de son contenu tandis que <input type="submit" /> ne peut accepter qu’un texte simple dans l’attribut value sans des balises de mise en forme.

Remarque

Pendant la conception de votre formulaire, il est important de garder la quantité de données à saisir par l’utilisateur le minimum possible, parce que par expérience, plus que vous demandez de données, plus vous risquez que l’utilisateur s’en aille. De plus, de point de vue de la sécurité et de la confidentialité, plus que vous stockez des données à propos de vos utilisateurs dans vos serveurs plus que vous augmentez le dommage en cas d’une faille de sécurité et fuite des données personnelles de vos utilisateurs.

Multimédia et Intégration

Avant le HTML5, pour l’ajout du contenu multimédia ou des animations dans une page Web, les développeurs ont utilisé des plugins embarqués dans la page du Web comme des plugins de lecteurs vidéos/audio (VLC, RealPlayer, QuickTime, Windows Media Player, …) ou des plateformes propriétaires comme Adobe Flash (anciennement Macromedia Flash) et Microsoft Silverlight. Ces solutions ont des limites comme le manque d’intégration avec le HTML/CSS, des problèmes de sécurité, de stabilité et de manque d’accessibilité.

HTML5 a ajouté un support native des contenus multimédia et des animations en utilisant une combinaison de HTML5, CSS3 et JavaScript. Dans cette section, on va démontrer seulement les fonctionnalités fondamentales du HTML5 sans CSS3 et JavaScript.

Les Vidéos

La balise <video> permet d’intégrer une vidéo dans la page Web. Un exemple d’un élément vidéo :

<video src="mon-video.mp4" controls></video>

Les attributs principaux d’élément vidéo sont :

src : l’URL de la vidéo à afficher.
controls : attribut booléen pour afficher les contrôles de base du lecteur vidéo (lecture, pause, contrôle du volume).
poster : L’URL de l’image à afficher jusqu’à l’utilisateur dèmarre la vidéo.
autoplay : attribut booléen pour spécifier que la vidéo doit commencer automatiquement quand la page est chargée.
preload : charger le contenu du fichier vidéo en même temps que la page Web. La valeur auto permet de charger tout le contenu du fichier. La valeur metadata (par défaut dans la majorité des navigateurs) permet de charger seulement les données méta du fichier vidéo (longueur du vidéo, …). La valeur none permet de ne charger aucune donnée de la vidéo.
loop : attribut booléen permet de répéter la vidéo en boucle.
muted : attribut booléen permet de mettre le volume de la vidéo à 0.

Les navigateurs supportent de multiples formats de vidéo. Ce support diffère entre les navigateurs. Les deux formats principaux sont :

WebM : Un conteneur vidéo développé par Google avec le codage vidéo VP8 ou VP9 et le codage audio Vorbis ou Opus. Il est supporté par la majorité des navigateurs à l’exception de Safari.
MP4 : Un conteneur vidéo avec le codage vidéo H.264 ou H.265 et le codage audio MP3 ou AAC. Il est supporté par la majorité des navigateurs avec l’exception du Opera.

Pour fournir plus d’un format de vidéo, on peut utiliser la balise <source> qui accepte L’URL de la vidéo dans l’attribut src et le format MIME de vidéo dans l’attribut type.

<video controls>
  <source src="mon-video.webm" type="video/webm" />
  <source src="mon-video.mp4" type="video/mp4" />
</video>

Les audios

L’élément audio de HTML5 fonctionne de même façon que l’élément vidéo mais il est limité aux formats audio.

<audio controls>
  <source src="mon-audio.mp3" type="audio/mp3" />
  <source src="mon-audio.ogg" type="audio/ogg" />
  <source src="mon-audio.webm" type="audio/webm" />
</audio>

Les formats principaux d’audio sont :

MP3 : Supporté par la majorité des navigateurs.
WebM : Utilise le codage audio Vorbis. Il est supporté par la majorité des navigateurs à l’exception de Safari.
OGG : Supporté principalement par Firefox et Google Chrome. Il peut utiliser le codage audio Opus ou Vorbis ou FLAC.

Les images vectorielles

Les images sont divisées en deux types principaux :

Les images pixels (raster) : dont l’unité est le pixel. Elles sont définies par une matrice de pixels (bitmap). Les formats les plus connus sont : JPEG, PNG, GIF, BMP. Ces images perdent la qualité quand elles sont agrandies plus que leur taille originale.
Les images vectorielles : dont l’unité est celle des éléments géométriques tel que un rectangle, un cercle, etc. Ces images ne perdent pas la qualité quand elles sont agrandies. Le format le plus connu est SVG.

La format SVG (Scalable Vector Graphics) est un format d’image vectoriel basé sur le langage XML développé par W3C depuis 1999. Ce format est supportée par la majorité des éditeurs des images vectorielles. Il est utilisé dans le Web pour structurer des images complexes que le HTML/CSS peut structurer. SVG est désigné pour s’intégrer bien avec les technologies du Web comme le HTML et CSS. Il supporte les animations aussi. La version courante est SVG 1.1. La version SVG 2.0 est en cours de développement.

Pour afficher un fichier SVG, on utilise la balise <img>.

<img src="mon-image.svg" />

On peut aussi intégrer le code SVG directement dans notre code HTML en utilisant la balise SVG.

<p>Un démo page Web avec image SVG</p>
<svg width="300px" height="200px">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

Intégration de contenu externe

À côté de l’intégration des vidéos et audio dans la page Web, le HTML permet l’intégration d’autres types de ressources (p.ex: PDF, Flash, sous pages Web, …) dans un document Web. Cette fonctionnalité était très importante surtout avant la standardisation des éléments <video> et <audio>. Pendant les années 90s et le début de 2000s, les développeurs Web ont utilisé l’élément <object> ou l’élément <embed> qui permettent d’intégrer différents types de ressources à travers des plugins (comme Adobe PDF Reader, VLC, RealPlayer, QuickTime, Windows Media Player, …) ou des plateformes propriétaires comme Adobe Flash (anciennement Macromedia Flash), Java Applets et Microsoft Silverlight. Aussi, l’élément <iframe>, et ses précédents absolues <frame> et <frameset>, permettent l’intégration des sous page Web dans le document HTML.

Intégration des pages Web

On va discuter seulement l’élément <iframe> parceque les éléments <frame> et <frameset> sont obsolètes depuis HTML 5.0 . Cet élément permet d’intégrer des pages Web dans le document HTML courant ce qui permet d’intégrer des contenus d’autres sites Web ou de réutiliser des contenus sans besoin de l’implémenter dans chaque page Web. Par exemple, on peut intégrer une vidéo ou un audio hébergé dans un fournisseur de services vidéos ou audio (YouTube, Vimeo, SoundCloud, …), ou un système de commentaires (Disqus, …), ou des cartes géographiques (Google Maps, Here, …), ou des banners d’avertissement (Google Adsense, …).

<iframe> accepte de multiples attributs dont les principaux sont :

src : C’est le seul attribut obligatoire. Il permet de spécifier l’URL de la page Web à intégrer.
allowfullscreen : Un attribut booléen pour permettre la page intégrée à entrer le mode plein écran (par exemple : permettre le lecteur vidéo de YouTube d’entrer le mode plein écran).
frameborder : S’il est assigné la valeur “1”, une bordure sera affichée autour de l’élément qui est le comportement par défault. S’il est assigné la valeur “0”, aucune bordure ne sera rendue. Il est recommandé d’utiliser le CSS pour spécifier la mise en forme de la bordure au future.
height et width : Spécifier la hauteur et la largeur de l’élément en pixels.
scrolling : Spécifié quand le navigateur doit fournir une barre de défilement pour le cadre. Les valeurs possibles sont yes pour toujours afficher la barre, no pour jamais afficher le barre ou auto pour afficher la barre seulement quand l’espace fourni pour le cadre n’est pas suffisant pour afficher tout le contenu de la page intégrée.

Prenons les deux exemples suivants d’intégration de vidéo YouTube et d’une carte géographique Google Maps dans le document.

<iframe src="https://www.youtube.com/embed/mzPxo7Y6JyA" frameborder="no" allowfullscreen width="560" height="315"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3277.9357736381517!2d10.769966314953201!3d34.757210680419966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1301d2c1f3c2991f%3A0xab7f8817c80e9617!2sHigher+Institute+of+Technological+Studies+of+Sfax!5e0!3m2!1sen!2stn!4v1528826537239"
  width="100%" height="400px;" frameborder="0" allowfullscreen></iframe>

Intégrer des autres ressources

Contrairement à l’élément <iframe>, <object> et <embed> permettent d’intégrer d’autres types de contenu dans le document HTML grâce à des plugins propriétaires. Par exemple, on peut intégrer des PDFs, des Flash, des Applets Java, des vidéos, des images ou d’autres types. On va démontrer seulement l’élément <object> parce que l’élément <embed> est rarement utilisé et <object> est son successeur.

Les attributs principaux de <object> :

data : Spécifie l’URL de la ressource à intégrer dans le document.
type : Spécifie le type MIME de la ressource.

Prenons l’exemple d’intégration d’un fichier PDF.

<object data="rapport.pdf" type="application/pdf"></object>

Notons que l’utilisation de l’élément <object> et <embed> est rare à causes des multiples raisons :

Les plateformes propriétaires comme Java Applets et Flash ne sont plus populaires et elles sont entrain d’être obsolètes. Java Applets n’est plus supporté depuis Java SE 9. Les PDFs sont généralement référencés au lieu d’être intégrés dans le document.
Les nouveaux éléments de HTML fourniront une meilleure alternative comme les éléments <video>, <audio>, ou les nouvelles fonctionnalités de CSS3 et JavaScript (API Web) comme canvas et WebGL.
Ces plateformes et plugins propriétaires ne sont pas portables et ne sont pas accessibles par tous les utilisateurs comme les utilisateurs des smartphones.
Le manque d’accessibilité et d’intégration entre le contenu du document HTML et le contenu des ressources externes.

Remarque

Ils y a un grand nombre de vendeurs des services vidéos en ligne (YouTube, Vimeo, Dailymotion, …) et des services d’audio en ligne (Soundcloud, …) qui sont gratuits et payants. Ces services permettent d’héberger les vidéos/audio dans leurs serveurs sans limites de tailles ou de bandwidths. Ces services permettent d’intégrer leurs lecteurs vidéos/audio dans vos pages Web facilement avec un énorme nombre de fonctionnalités. Ils sont la solution la plus préférée pour ajouter des contenus multimédias aux sites Web.

Le code d’intégration est fourni par ces services. Par exemple, YouTube fournit le code d’intégration dans le dialogue du partage de vidéo. Le code suivant est le code d’intégration d’un vidéo YouTube :

<iframe src="https://www.youtube.com/embed/mzPxo7Y6JyA" frameborder="no" allowfullscreen width="560" height="315"></iframe>

Complément HTML5

Vérificateur lexico-graphique, syntaxique et sémantique

Il existe en ligne des outils (linter) qui permettent de vérifier lexiquement, syntaxiquement et sémantiquement un document HTML/CSS tels que W3C Markup Validation Service, Validator.nu, Tidy, etc.

CSS

Introduction CSS

Le langage CSS (Feuille de style en cascade, Cascading Style Sheets en anglais) est un langage de feuille de style qui sert à appliquer des styles sur différents éléments dans un document HTML. Il est un langage complémentaire à HTML qui permet de séparer la présentation d’un élément (CSS) de son contenu (HTML).

Les versions du langage CSS

CSS1, apparu en 1996, définit essentiellement les propriétés de rendu typographique du texte. La spécification CSS 2, publiée en 1998, étend considérablement les possibilités théoriques de CSS, avec environ 70 propriétés supplémentaires. Suivie par une version révisée, CSS 2.1.

Dés la spécification CSS 3, le langage CSS a été développé sous la forme de modules indépendants, dans le but que des modules “prêts” puissent être implémentés rapidement par les navigateurs. Cet objectif a été atteint, et de nombreux modules sont actuellement bien supportés par les navigateurs et utilisés au quotidien (p.ex. WebFonts, Media Queries, Flexbox, Backgrounds & Borders), alors que d’autres sont encore en développement. En plus au lieu des versions du standard, il y aura des documents des modules stables dans chaque 3 ans (2015, 2018, …).

Évolultion du CSS et ses modules. Par Mozilla Developer Network

L’année 2010, qui marque une large adoption du standard HTML5, représente une avancée importante pour le CSS 3. C’est en 2010 que le terme “Responsive Web Design” faisant son apparition, sous la plume d’Ethan Marcotte.

Principes de base

Le langage CSS permet de définir des règles, qui sont exprimées sous forme de couples propriété: valeur.

Les propriétés sont libellées à l’aide de mots-outils anglais tels que width (largeur), font-size (taille de la police de caractères) ou background-color (couleur de fond). Ces propriétés sont spécifiées dans le standard CSS.

Les valeurs sont exprimées à l’aide d’unités (pixels, pourcents…), ou de mots-clés propres au CSS. Par exemple, une couleur peut être exprimée à l’aide des mots clés (“black”, “blue”, etc), de valeurs hexadécimales (p.ex. #FF0000) ou des fonctions (p.ex. rgb(255, 255, 255)).

Les couples propriété-valeur constituent le “bloc de déclaration” d’une règle CSS. S’il y en a plusieurs, on les sépare avec des points-virgule. Ces déclarations seront appliquées à des parties du document identifiées par un sélecteur.

Chaque règle CSS comporte un sélecteur, et un bloc de déclaration.

Exemple de règle CSS :

h1 {
    color: red;
    text-transform: uppercase;
}

Dans cet exemple, nous avons :

le sélecteur : h1
le bloc de déclaration, qui contient deux déclarations : color: red; et text-transform: uppercase;
la première déclaration définit une propriété : color
avec la valeur : red
la seconde déclaration définit la propriété text-transform
avec la valeur : uppercase

Résultat : dans cette règle, on applique un style à tous les éléments h1 du document : la couleur du texte sera rouge (red), et tous les caractères seront affichés en majuscules (uppercase).

Pour tester notre exemple CSS, on va utiliser la balise <style> qui permet de définir notre feuille de styles directement dans notre document HTML. On va placer cette balise dans l’en-tête de notre document. Le code complet de notre exemple sera :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Démo CSS</title>
  <style>
    h1 {
        color: red;
        text-transform: uppercase;
    }
  </style>
</head>

<body>
  <h1>Titre n°1</h1>
  <h2>Titre n°2</h2>
  <p>Un paragraphe....</p>
</body>

</html>

On peut aussi séparer notre code CSS de notre code HTML pour permettre la réutilisation du code CSS entre de multiples pages Web, faciliter la maintenance du code et améliorer la lisibilité. Le code CSS sera écrit dans un fichier séparé nommé avec une extension .css. Pour appliquer le CSS de ce fichier aux éléments de notre document HTML, on déclare un élément <link> à l’intérieur de l’élément <head> comme suit :

<link href="ma-feuille.css" rel="stylesheet" type="text/css" />

Les attributs utilisés de la balise <link> sont :

href définit l’URL de notre fichier CSS.
rel définit la relation entre le document HTML et ce fichier. Il doit toujours être “stylesheet” pour le fichier CSS.
type définit le type MIME du fichier. Il doit toujours être “text/css” pour le fichier CSS.

En appliquant les changements nécessaires pour séparer notre code CSS de notre document HTML de l’exemple précédent, le résultat sera :

h1 {
    color: red;
    text-transform: uppercase;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Démo CSS</title>
  <link href="css/demo1.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Titre n°1</h1>
  <h2>Titre n°2</h2>
  <p>Un paragraphe....</p>
</body>

</html>

Autre solution mais pas recommandée est d’écrire la mise en page des éléments directement dans l’attribut style de l’élément. Cette méthode ne permet pas la réutilisation des mises en page entre les éléments du même document HTML ce qui en résulte est beaucoup de duplication du code, difficulté de maintenance et un code peu lisible. C’est pourquoi cette méthode est à éviter. Le code de l’exemple précédent sera :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Démo CSS</title>
</head>

<body>
  <h1 style="color: red; text-transform: uppercase">Titre n°1</h1>
  <h2>Titre n°2</h2>
  <p>Un paragraphe....</p>
</body>

</html>

Pour commenter en CSS on utilise des commentaires de style de langage C /* */. Prenons par exemple le code précédent.

/* Un commentaire simple*/

/* Un commentaire
 * multi-ligne
 */

h1 {
    /* un commentaire dans le bloc */
    color: red;
    /* text-transform: lowercase; */
    text-transform: uppercase;
}

Pour améliorer la lisibilité du code, on utilise l’indentation qui peut être d’une seule tabulation ou de deux ou quatre espaces. Une fois une indentation choisie, il faut suivre la même indentation pour le reste du code. Une autre règle à suivre est de retourner à la ligne après chaque déclaration.

Les sélecteurs CSS

Le sélecteur définit à quel élément de la page un style CSS sera appliqué. Par exemple :

h1 { color: Tomato }

La couleur Tomato sera appliquée à tous les éléments h1 de la page.

Il est possible de grouper plusieurs sélecteurs, en les séparant par des virgules. Exemple :

h1 { color: Tomato }
h2 { color: Tomato }
h3 { color: Tomato }

Ces trois règles peuvent être groupées comme ceci :

h1, h2, h3 { color: Tomato }

Sélecteurs de base

E: sélectionner tout élément de type E. Pour sélectionner tous les éléments de type paragraphe.

p {
    color: blue;
}

.c: Séléctionner tout élément ayant la classe “c”. L’utilisation des classes permet la réutilisation des styles entre multiples élements. Un élément peut avoir plus q’une seule classe. Pour séléctionner l’élement de classe “note” du code HTML suivant :

<p class="note">Faire attention!</p>

.note {
    color: yellow;
}

#myid: Sélectionner tout élément avec un ID égal à l’identificateur “myid”. Contrairement à la classe, l’identificateur est unique à un seul élément dans le document HTML.

Sélecteurs imbriqués

E.warning: Sélectionner tout élément E ayant la classe “warning”.
E#myid: Sélectionner tout élément E avec un ID égal à “myid”.
E F: Sélectionner tout un élément F qui est contenu dans tout élément E.
*: Sélectionner tous les éléments du document
E > F: Sélectionner tout élément de type F qui est le fils de tout élément de type E.
E + F: Sélectionner tout élément de type F qui est l’élément suivant direct de tout élément de type E.

Remarque : Il existe d’autres sélécteurs en CSS3 que vous pouvez consulter dont le site MDN web docs

Les unités CSS

Il existe diverses unités de mesure disponibles en CSS. Elles peuvent être classées en trois catégories :

Unités absolues: mm (millimètres), cm (centimètres), in (pouces), pt (point), pc (pica)
Unités relatives: %, em, ex, rem, ch, vh, vw
Unités dépendantes de l’interface: px

Les unités absolues correspondent à ce que l’on connaît de la mise en page “papier”. Elles sont à éviter sur le Web, sauf pour les styles d’impression (p.ex. pour spécifier les marges des pages). Comme l’indiquent les inventeurs du CSS, Håkon Wium Lie et Bert Bos (dans Cascading Style Sheets : Designing for the Web) :

Utilisez les unités ems pour créer des feuilles de styles s’adaptant à différentes échelles.
Utilisez les ems pour définir les tailles de fonte.
Utilisez des unités relatives pour définir la longueur des éléments de mise en page.
N’utilisez les longueurs absolues que si les caractéristiques physiques du medium de sortie sont connues.

Unités relatives

Les pourcentages (%) : Définit une mesure en % par rapport à la taille de l’élément parent. Il est utile pour créer des mises en page flexibles, et pour définir des tailles de fonte.
em : Unité typographique ancienne, correspondant historiquement à la largeur de la lettre “m”. Par défaut, 1em est équivalent à 16px.
rem : Unité relative, qui fonctionne comme le em, mais la taille est relative à la taille de fonte à la racine du document (attribuée à l’élément html).

Les pixels

Les pixels (px) : ils ont été pendant longtemps l’unité la plus utilisée en Webdesign, autant pour définir des mises en page que pour les tailles de fontes. On préfère actuellement utiliser des em ou des pourcentages.

Les couleurs CSS

Dans le langage CSS, les couleurs peuvent être exprimées en différentes notations :

par leur nom
par un code hexadecimal
Rouge, Vert, Bleu
RGBA et HSL

color: yellow;
color: #FFFF00;
color: #FF0;
color: rgb(255, 255, 0); /*Red, Green, Blue*/
color: hsl(60, 100%, 50%); /*Hue, Saturation, Luminosity*/

La couleur jaune peut être définie indifféremment par les cinq variantes ci-dessus. Le résultat sera strictement identique.

Par leur nom

Il existe quelques 140 couleurs qui sont définies par des mots-clés : on y trouve des couleurs fondamentales comme black, blue, red, mais aussi des teintes plus originales comme aquamarine, hotpink, tomato, olive…

La liste complète peut être consultée :

Code héxadécimal

Le code hexadécimal (ou triplet hexadécimal) est une manière d’exprimer les couleurs du modèle RVB (en anglais: RGB). En RVB, la valeur du rouge (R), vert (V) et bleu (B) sont définis sur un intervalle allant de zéro à 255, ou de 00 à FF en notation hexadécimale.

Le nombre total de couleurs possibles est de 256 * 256 * 256, càd quelques 16’777’216 teintes.

Si les caractères sont dédoublés, la triplette peut être raccourcie à trois chiffres :

#0099cc est équivalent à #09c
#00ff00 équivaut à #0f0
#666666 équivaut à #666, etc.

Rouge, Vert, Bleu

Le CSS autorise également la définition d’une couleur en notation RVB (en anglais: RGB). Pour chacune des trois valeurs, on peut utiliser un nombre entier allant de 0 à 255, ou un pourcentage allant de 0% à 100%.

Exemple de deux couleurs identiques :

p { color: rgb(255,0,0) }
p { color: rgb(100%,0%,0%) }

La première valeur étant au maximum, cette couleur correspond au rouge le plus intense.

RGBA

RVB avec transparence (alpha), définie sur un intervalle allant de 0.0 à 1.0.

Exemple :

p { color: rgba(255,0,0,0.5) }

La dernière valeur (l’opacité) étant de 0.5, il en résulte un rouge semi-transparent.

Teinte, saturation, luminosité (HSL)

Une nouvelle manière de représenter les couleurs a été introduite avec le CSS3: c’est le modèle HSL (Hue-saturation-lightness), basé sur un cercle chromatique

H - Hue : la teinte (en anglais: Hue) correspond à une position (un angle) sur le cercle chromatique. Cet angle est mesuré en degrés, mais il est indiqué sans unité en CSS. Le point de départ du cercle (0 ou 360°) correspond au rouge. Les couleurs sont réparties sur ce cercle, le vert se trouvant au premier tiers (120°), le cyan à mi-parcours (180°) et le bleu aux deux tiers (240°).

La saturation et la luminosité sont exprimés en pourcentage.

S – saturation : 100% correspond à la saturation maximale, à 0% on se situe dans les niveaux de gris.
L - luminosité : 0% correspond au noir, 100% au blanc. À 50% on obtient la luminosité “normale”.

Quelques exemples :

`p { color: hsl(0, 100%, 50%) }`	rouge
`p { color: hsl(120, 100%, 25%) }`	vert foncé
`p { color: hsl(120, 100%, 50%) }`	vert standard
`p { color: hsl(120, 100%, 75%) }`	vert clair
`p { color: hsl(120, 100%, 90%) }`	vert très clair
`p { color: hsl(120, 50%, 75%) }`	vert désaturé

HSLA

Avec une quatrième valeur définissant l’opacité :

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

Définir la couleur du texte

Pour donner une couleur au texte en CSS, utiliser la propriété color :

p { color: #333; }

Définir la couleur de fond

Pour donner une couleur de fond à un élément, utiliser la propriété background-color :

p { background-color: #C0C0C0; }

Style de texte

Taille de texte

Pour changer la taille d’un texte, on utiliser la propriété font-size. Les valeurs acceptés par cette propriété peuvent être :

En pixels : détermine la hauteur en pixels de votre texte. Par exemple : 14px, 16px…

p {
    font-size: 14px;
}
h1 {
    font-size: 24px;
}

En pourcentage : spécifier la taille du texte relativement au taille normal. C’est à dire : 100% est le taille normale.

h2 {
    font-size: 160%
}
h3 {
    font-size: 140%;
}

En mot clés : Les mots sont : xx-small, x-small, small, medium, large, x-large, xx-large.

h1 {
    font-size: xx-large;
}

En em : spécifie la largeur de la lettre “M” avec la police utilisée.

dt {
    font-size: 1.2em;
}

En rem : rem est beaucoup plus facile à utiliser comme unité qu’em car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l’héritage d’un quelconque élément parent.

Polices

font-family définit en effet une liste de polices dans lesquelles votre texte peut apparaître. La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l’applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être serif, sans-serif ou monospace.

p {
    font-family: Helvetica, Arial, sans-serif;
}

h1 {
    font-family: "Times New Roman", Times, serif;
}

Epaisseur du texte

La propriété font-weight définit l’épaisseur des caractères, généralement à l’aide des valeurs normal ou bold. Voici un exemple :

strong {
    font-weight: bold;
}

Les valeurs peuvent être des nombres de 100, 200 jusqu’à 900 dont 400 est un font d’épaisseur normal, 200 est la plus fine et 900 est la plus épaisse. Ou des mots clés absolues (“normal” pour 400, “bold” pour 700). Ou des mots clés relatifs à l’élément parent (“lighter” pour plus fine, “bolder” pour plus épaisse). Quelques fontes ne supportent que les épaisseurs “normal” et “bold”.

Style de l’écriture: de la fonte

La propriété font-style détermine si le texte doit être affiché normalement, en italique ou en oblique (penché) respectivement grâce à “normal”, “italic”, et “oblique” :

i {
    font-style: italic;
}

Alignement du texte

La propriété text-align contrôle l’alignement du texte, en définissant l’alignement à gauche, à droite, ou centré ou justifié (“left”, “right”, “center”, ou “justify”) :

h1 {
    text-align: center;
}
.signature {
    text-align: right;
}

Majuscule

La propriété text-transform modifie la casse du texte (autrement dit, elle permet d’afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :

h1 {
    text-transform: uppercase;
}

Les valeurs possibles sont “capitalize”, “uppercase”, “lowercase” ou “none”.

Décoration

La propriété text-decoration permet de faire apparaitre une ligne en dessous (“underline”), au dessus (“overline”), ou à travers (“line-through”) de votre texte. La valeur par défaut “none” supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :

del {
    text-decoration: line-through;
}
a {
    text-decoration: underline solid blue;
}

Cette propriété accepte optionnellement le style et la couleur de la ligne. Les valeurs du style de la ligne sont le même que les valeurs du style de bordure.

Indentation

La propriété text-indent permet de gérer l’indentation du texte. Elle accepte des valeurs absolues (en px) et des valeurs relative (en % ou em). Une valeur négative permet de décaler le texte vers le gauche.

p {
    text-indent: 6em;
}

Espacement

La propriété line-height permet de gérer la distance entre les lignes. Elle accepte des valeurs absolues (en px) ou relatives (sans unité).

La propriété letter-spacing permet de gérer l’espace entre les lettres tantdis que la propriété word-spacing permet de gérer l’espace entre les mots dans un texte.

Style des boites “boxe”

Le modèle de boîte

Le modèle de mise en page du HTML / CSS repose sur un principe de “boîtes” (en anglais: box-model). Le calcul de la taille, des propriétés (couleur, arrière-plan, forme du cadre) et de la position des boîtes est le rôle du moteur de rendu. En CSS, chacune de ces boîtes est décrite à partir d’un modèle standard qui permet de décrire le contenu de l’espace occupé par un élément.

Chaque élément d’un document est matérialisé par une boîte qui peut être ajustée grâce à des propriétés CSS spécifiques. Ces propriétés peuvent être représentées ainsi :

Modèle de boite en CSS. Par Mozilla Developer Network

La boîte de contenu (content): La boîte de contenu à l’endroit où le contenu de l’élément est affiché. Ce contenu est le texte de l’élément ou les autres boîtes des éléments fils. La taille de la boîte de contenu est définie avec les propriétés CSS width (pour la largeur) et height (pour la hauteur).
La boîte de remplissage (padding): La boîte de remplissage représente la marge intérieur d’une boîte. Elle correspond à la distance entre la boîte de contenu et la bordure. Cette distance est définie grâce à la propriété padding. Cette propriété est en fait une propriété « raccourcie » pour désigner quatre valeurs : padding-top, padding-right, padding-bottom et padding-left (dans cet ordre).
La bordure (border): La bordure d’une boîte est une zone, visible ou non, qui représente la limite de la boîte. Par défaut, la taille de la bordure vaut 0, ce qui la rend invisible. La bordure est définie grâce à la propriété CSS border. Cette propriété est aussi une propriété raccourcie composée de border-width (l’épaisseur de la bordure), border-style (le style à appliquer pour la ligne de la bordure, généralement solid) et border-color (la couleur). Il est également possible de définir chaque côté séparément et il existe donc un ensemble de propriétés border-* pour chacun des côtés (top pour le haut, right pour la droite, bottom pour le bas et left pour la gauche).
La marge extérieure (margin): La marge (extérieure) représente la distance qui doit séparer deux boîtes. La marge similaire au remplissage mais se situe à l’extérieur de la bordure. La propriété raccourcie est margin et les propriétés individuelles sont margin-top, margin-right, margin-bottom et margin-left.

Prenons un exemple pour illustrer ces différentes quantités :

<p>Une paragraphe</p>
<p>Une autre paragraphe</p>

/* Pour tous les paragraphes */

p {
    /* Ils auront exactement une largeur de 100px */
    width: 100px;
    /* Leur hauteur est définie automatiquement
       en fonction de la taille du contenu */
    height: auto;
    /* La distance entre le contenu et la bordure
       est 20px à droite et à gauche et est
       10px en haut et en bas */
    padding: 10px 20px 10px 20px;
    /* On définit une bordure noire, large de 5px */
    border: 5px solid black;
    /* La distance minimale entre un paragraphe
       et une autre boîte au-dessus ou en-dessous
       sera de 20px */
    margin: 20px 0 20px 0;
}

Les types de boîte

Tout ce que nous avons vu jusqu’à présent s’applique aux boîtes qui sont des blocs. Cependant, il existe d’autres types de boîte en CSS qui se comportent différemment. Le type de boîte qui s’applique pour un élément est déterminé par la propriété display. CSS fournit de nombreuses valeurs pour cette propriété. Dans cet article, nous nous concentrerons avant tout sur les trois valeurs basiques que sont block, inline, et inline-block

Une boîte block (ou bloc): est définie comme une boîte qui va s’empiler sur d’autres boîtes (autrement dit, on crée une cassure de la ligne visuelle avant et après la boîte). Le modèle de boîte vu juste avant s’applique.
Une boîte inline (ou en ligne): est l’opposée d’une boîte bloc : elle flotte dans le texte du document (autrement dit, elle ne crée pas de cassure de ligne visuelle avant et après la boîte et le contenu de cette boîte passera à la ligne selon le contenu qui l’entoure). Les propriétés du modèle de boîte s’appliquent mais n’impactent pas les boîtes environnantes.
Une boîte inline-block (en bloc et en ligne): est quelque chose d’intermédiaire : le contenu flotte dans le document sans créer de cassure de ligne avant et après. Le contenu reste à l’intérieur de la boîte et la boîte ne suit pas les règles de saut à la ligne dicté par le contenu en dehors de la boîte. Enfin les propriétés du modèle de boîte s’appliquent à ces boîtes et cela impacte les boîtes environnantes.

Pour cacher un élément, on utilise la valeur “none” de la propriété display.

Prenons l’exemple suivant :

<!DOCTYPE html>
<html>

<head>
  <link href="css/display-types.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <span class="block">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span> Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>
</body>

</html>

Le fichier display-types.css contient :

p {
    padding: 1em;
    border: 1px solid black;
}

span {
    padding: 0.5em;
    border: 1px solid green;
    /* On rend la boîte visible, quel que soit son type */
    background-color: yellow;
}

.inline {
    display: inline;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

Le rendu du programme HTML est le suivant :

Bordure

La bordure supporte de multiples styles à travers la propriété border-style ou comme deuxième argument dans la propriété alias border.

La propriété border-radius permet de créer des bordures arrondies. Elle accepte une valeur en pixels qui va correspondre à la valeur du rayon de la bordure de tout ou de chaque coin.

Les bordures arrondis. Par Mozilla Developer Network

Prenons l’exemple suivant :

<!DOCTYPE html>
<html>

<head>
  <link href="css/border-radius.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p class="first">Une text avec bordure et un radius</p>
  <p class="second">Une text avec bordure et un radius</p>
  <p class="third">Une text avec bordure et un radius</p>
</body>

</html>

p {
    padding: 10px;
}

.first {
    border: 10px solid black;
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 10px 40px 40px 10px;
}

.second {
    border: dashed;
    border-width: 2px 4px;
    /* tous les coins */
    border-radius: 40px;
}

.third {
    border: dotted;
    border-width: 10px 4px;
    /* top-left-and-bottom-right | top-right-and-bottom-left */
    border-radius: 10px 40px;
}

Couleur et image de fond

Le fond d’un élément HTML est géré à travers les propriétés backgroud-* ou leurs propriété alias backgroud :

background-color : Gérer la couleur du fond. Il accepte les même valeurs acceptées par la propriété color. La valeur transparent permet de rendre le fond transparent.
```
.a {
  background-color: red;
}
.b {
  background-color: #f0d;
}
.c {
  background-color: rgba(255, 200, 0, 0.5);
}
```
background-image: Gérer l’image de fond. Elle accepte comme valeur l’URL de l’image passé à la fonction url(). La propriété peut accepter de multiples images séparées par virgule.
```
.a {
  background-image: url(images/mon-image.png);
}
```
On peut gérer l’image du fond avec les propriétés ci-dessous.
background-position : Positionner l’image relativement à son élément. La valeur accepte deux arguments pour exprimer la position verticalement et horizontalement. L’argument peut être exprimé en % ou en mot clés : “top”, “left”, “right”, “bottom”, “center” ou en pixels.
background-repeat : Gérer comment l’image sera répéter. Pour se répéter en axe vertical, on utilise la valeur “repeat-x”. Pour se répéter en axe horizontal, on utilise la valeur “repeat-y”. Pour se répéter dans les deux axes, on utilise la valeur “repeat” qui est la valeur par défaut. Pour ne pas se répéter, on utilise la valeur “no-repeat”.
background-size : Gérer la taille de l’image. La valeur peut être exprimée en % pour dimensionner l’image par rapport à la taille de l’élément auquel elle est appliquée, ou en pixels ou en utilisant les mots clés “cover” et “contain”.
background-attachment : Pour choisir de fixer l’image de fond ou de la faire défiler en même temps que l’utilisateur va descendre dans la page. Cette propriété accepte deux valeurs : “fixed” (pour fixer le fond) et “scroll” (valeur par défaut).

Prenons l’exemple suivant :

<!DOCTYPE html>
<html>

<head>
  <link href="css/background-image.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>Paragraphe</p>
  <p>Paragraphe</p>
  <p>Paragraphe</p>
  <p>Paragraphe</p>
  <p>Paragraphe</p>
  <p>Paragraphe</p>
</body>
</body>

body {
    background-color: yellow;
    background-image: url("../../assets/imgs/web101.png");
    background-repeat: repeat-x;
    background-size: auto 50%;
    background-attachment: fixed;
}

Mise en forme des tableaux

Bordure du tableau

Dans le chapitre précédent, on a discuté la construction des tableaux en HTML. On a utilisé l’attribut HTML border pour spécifier la largeur des bordures. Cette solution est obsolète depuis HTML5 en faveur de la solution CSS.

On va remplacer l’utilisation de l’attribut border par la propriété border du CSS.

<!DOCTYPE html>
<html>

<head>
  <link href="css/tableau-border-simple.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Salhi</td>
        <td>Ali</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rkik</td>
        <td>Nouha</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Chaaben</td>
        <td>Ahmed</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Le contenu du fichier tableau-border-simple.css est :

td,
th {
    border: 1px solid black;
}

On remarque que les bordures sont autour de chacune des cellules. On peut modifier l’espacement entre les cellules et les bordures en utilisant la propriété border-spacing qui accepte une ou deux valeurs en pixel pour spécifier l’espacement horizontalement et verticalement.

table {
    border-spacing: 20px 5px;
}

td,
th {
    border: 1px solid black;
}

On peut coller ces bordures entre elles afin d’obtenir le même rendu du chapitre précédent en appliquant la propriété border-collapse à l’élément <table>.

La propriété border-collapse accepte comme valeur deux valeurs : “collapse” pour coller les bordures en une seule et “separate” pour afficher les bordures distinctement qui est la valeur par défaut.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
}

Couleur des cellules

On peut changer les couleurs des cellules du tableau.

On va changer les couleurs et les marges ‘margin’ internes des lignes impaires du tableau précèdent (1, 2, …) en utilisant le sélecteur pseudo :nth-child(an+b). L’argument de ce sélecteur est une formule pour spécifier l’ensemble des éléments à sélectionner. Pour sélectionner les éléments impaires, la formule doit être 2n-1 ou bien le mot clé alias odd. Pour sélectionner les éléments paires, la formule doit être 2n ou le mot clé alias even.

Les cellules du tableau comme le reste des autres éléments supporte le pseudo classe :hover qui sera appliqué quand la souris est au dessus de l’élément.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

Supposons que l’age de Nouha et Ahmed ne sont pas saisis. La bordure et le fond de ces deux cellules seront rendus. On peut contrôler cette fonctionnalité en utilisant la propriété empty-cells. Elle accepte comme valeur deux mots clés: “show” pour rendre les bordures et le fond des cellules vide ou “hide” pour ne pas les rendre. Cette propriété ne fonctionne pas si les bordures sont collées avec la propriété border-collapse.

table {
    /* border-collapse: collapse; */
    empty-cells: hide;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

Mise en Forme de d’en-tête et du pied

L’en-tête et le pied du tableau ont des mises en forme prédéfinies mais qui peuvent se différencier selon les navigateurs. On va définir notre propre mise en forme pour le tableau de l’exemple précédent qui sera le même entre tous les navigateurs.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

thead {
    background-color: tomato;
    color: white;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

Les légendes “captions”

La propriété caption-side permet de gérer la position de la légende du tableau. Elle prend deux valeurs :

“top” : La légende est affichée en haut.
“bottom” : La légende est affichée en bas.

Les autres valeurs (comme “left”, “right”, …) ont étés absolètes depuis CSS2 en faveur de la propriété text-align.

Prenons comme exemple la structure HTML suivante, la légende même définie à l’ouverture de l’élément <table>, elle sera positionnée en bas en utilisant la propriété caption-side :

<!DOCTYPE html>
<html>

<head>
  <link href="css/tableau-caption-side.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table>
    <caption>Liste des étudiants</caption>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Salhi</td>
        <td>Ali</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rkik</td>
        <td>Nouha</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Chaaben</td>
        <td>Ahmed</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

thead {
    background-color: tomato;
}

table caption {
    caption-side: bottom;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.8em;
}

Mise en forme des formulaires

La formulaire est un élément important de l’interaction avec l’utilisateur. Une mise en forme claire et attractive est trés nécessaire pour assurer une meilleure expérience utilisateur. Dans ce cours, on va étudier un scénario d’un formulaire simple et les possibilité de l’améliorer.

Au cours de cet paragraphe, on supposera que le formulaire suivant est pour la saisie de l’identité de l’utilisateur et quelques informations d’un produit.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Rapport</title>
</head>

<body>
  <form>
    <fieldset id="sec-identite">
      <legend>Identité</legend>
      <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" required />
      </div>
      <div>
        <label for="email">Email :</label>
        <input type="email" id="email" placeholder="me@exemple.com" required />
      </div>
    </fieldset>
    <fieldset id="sec-produit">
      <legend>Information Produit</legend>
      <div>
        <label>Genre :</label>
        <ul>
          <li>
            <label>
              <input type="radio" name="genre" value="metal" />
              Métal
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="genre" value="bois" />
              Bois
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="genre" value="plastique" />
              Plastique
            </label>
          </li>
        </ul>
        <div>
          <label for="description">Description :</label>
          <textarea id="textareac"></textarea>
        </div>
    </fieldset>
    <button>Envoyez</button>
  </form>
</body>

</html>

Mise en forme de fieldset

On commencera par la mise en forme de <fieldset> et la légende.

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

Mise en page du formulaire

Ensuite, on va mettre en page notre formulaire :

Harmoniser les lignes grâce à la propriété width et display.
Aérer nos formulaires en utilisant les propriétés padding et margin.
Mettre en forme les étiquettes en utilisant text-align et font-weight.
Mettre en forme la liste des boutons radios en utilisant list-style.
Mettre 5 lignes visible dans le champ de texte multi-ligne <textarea> en utilisant height avec l’unité rem et déactiver la possibilité de changer les dimensions du champ par souris en utilisant la propriété resize.
Fixer le problème d’alignement vertical de la liste des choix et de champ de texte multi-ligne en utilisant la propriété vertical-align.

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

Bouton d’envoi

Comme bonus, on va changer la mise en forme du bouton d’envoi.

Le bouton sera aligné à droite en utilisant la propriété float. L’apparence du bouton sera changée en utilisant les propriétés du fond, de la bordure et du texte.

On va utiliser le pseudo classe :hover pour changer le couleur du fond progressivement en utilisant la propriété transition.

Pour ajouter une ombre autour du bouton, on utilise la propriété box-shadow qui accepte une liste de définitions d’ombres séparées par des virgules, chacune contient les coordonnées de décalage de l’ombre en axe x et axe y, le rayon de flou (optionnel), le rayon d’étalement (optionnel) et finalement la couleur (optionnelle).

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

button {
    float: right;
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    transition: 1s;
}

button:hover {
    background-color: #007095;
}

Validation de contenu

CSS3 fournit des ensembles de pseudo classes reliées aux états de validation des éléments du formulaire.

:required : Permet de sélectionner les éléments qui sont mis obligatoires.
:valid : Permet de sélectionner les éléments qui sont valides.
:invalid : Permet de sélectionner les éléments qui ne sont pas valides.

legend {
    font-size: large;
    font-weight: bold;
    color: tomato;
}

fieldset {
    border: 1px dashed gray;
    padding: 10px;
    margin: 10px 0;
    border-radius: 15px;
}

fieldset>div {
    width: 100%;
    padding: 5px;
}

div>label {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: small;
}

label+input,
label+textarea {
    display: inline-block;
    width: 60%;
    /*
    border: 1px solid #DDD;
    line-height: 1.8em;
    */
}

ul {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    vertical-align: baseline;
    resize: none;
    height: 5rem;
}

button {
    float: right;
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    transition: 1s;
}

button:hover {
    background-color: #007095;
}

input[type=email],
input[type=text],
textarea {
    border: 1px solid #333;
    font-size: 90%;
}

/* This is our style for the invalid fields */

input:invalid {
    border-color: #900;
    background-color: #FDD;
}

input:focus:invalid {
    outline: none;
}

CSS Avancé

Effets Graphiques

Le CSS3 permet de modifier l’apparence d’une image à l’aide des fonctions de filtrage de la propriété filter. Cette propriété admet un ensemble de fonctions dont les principales sont :

blur() permet d’ajouter un flou sur l’image. Exemple:
```
filter: blur(50%);
```

brightness() permet de rendre l’image plus claire ou plus sombre.

filter: brightness(50%);
filter: brightness(1);
filter: brightness(0);
filter: brightness(1.75);

opacity() permet de rendre l’image transparente. Exemple :
```
filter: opacity(50%);
```

Effets de transition

Effets d’animation

Référencement

Le référencement est l’ensemble des techniques qui permettent d’inscrire un site dans les moteurs de recherche ou dans les annuaires. Le référencement est souvent associé avec le positionnement.

Il existe deux types de référencements :

Le référencement naturel consiste à optimiser les différentes pages de son site Web afin d’apparaître dans les « top » positions des résultats de moteurs de recherche.
Les liens sponsorisés ou positionnement publicitaire consiste à payer (aux enchères, donc très coûteux) les moteurs de recherche pour obtenir un positionnement dans les espaces réservés à cet effet.

Terminologie

L’annuaire: il fonctionne telle une encyclopédie : les sites y sont classés par thème et par ordre alphabétique.
Le moteur de recherche: c’est un système automatique qui parcourt l’Internet et ajoute les sites et les pages qu’il rencontre à sa base.
Le positionnement: c’est le fait qu’un site donné soit en haut des résultats de recherche. Tout site peut être référencé (dans la base des outils de recherche) mais mal positionné (n’est pas présent dans les premiers résultats d’une recherche sur un mot spécifique)

Importance du référencement Web

Le nombre des utilisateurs du Web est des milliards d’utilisateurs dont la plupart se basent sur les moteurs de recherche pour trouver et accéder à l’information.

Donc, le référencement Web est une étape incontournable pour augmenter le nombre de visiteur. Il permet de faire apparaître un site Web suite à des requêtes ce qui assure qu’un site donné soit mieux placé que ses concurrents.

Un site Internet sans référencement dans les moteurs de recherche c’est l’équivalent d’un véhicule sans roue. En effet, un site internet n’est qu’un support de communication comme les autres, s’il n’est pas mis en avant (dans les dix premiers), il restera introuvable et donc sans lecteur. Il faut aussi savoir qu’un référencement ne se fait pas en une seule fois. Il faut surveiller la position de son site régulièrement.

Les techniques de référencement naturelles

Il existe quelques techniques de conception de site permettant de donner plus d’efficacité au référencement des pages d’un site :

un contenu original et attractif,
un titre bien choisi,
une URL adaptée,
un corps de texte lisible par les moteurs,
des balises <meta> décrivant précisément le contenu de la page,
des liens hypertextes bien pensés,
des attributs alt pour décrire le contenu des images.

Le contenu de la page Web

Les moteurs de recherche et les annuaires cherchent avant tout à fournir un service de qualité à leurs utilisateurs en leur donnant les résultats les plus pertinents en fonction de leur recherche ainsi il est indispensable de s’attacher à créer un contenu consistant et original.

Un contenu original ne signifie pas un contenu qui n’est proposé par aucun autre site, cela serait une mission impossible. En revanche, il est possible de traiter un sujet et de lui ajouter une valeur et ceci en approfondissant certains points, en l’organisant d’une manière originale et/ou en mettant en relation différentes informations.

D’autre part, toujours dans l’objectif de fournir le meilleur contenu aux visiteurs, les moteurs de recherche et les annuaires accordent de l’importance à la mise à jour des informations. Le fait de mettre à jour les pages du site permet donc d’augmenter l’indice accordé par le moteur au site.

Le titre de la page

Il faut veiller à ce que les titres des pages Web soient pertinents et contiennent des mots intéressants pour le référencement et qu’ils soient différents sur chaque page. Les titres des pages Web sont utilisés par les moteurs de recherche pour deux raisons :

– L’indexation des pages – L’affichage de votre page dans les résultats du moteur de recherche

L’insertion d’un titre se fait comme suit :

<tilte>le titre de la page</title>

Le titre doit décrire le plus précisément possible le contenu de la page Web et sa longueur totale recommandée ne doit pas dépasser 60 de caractères soit 6 ou 7 mots au maximum. Le titre est d’autant plus important qu’il s’agit de l’information qui s’affichera dans les favoris de l’internaute, ainsi que dans son historique.

L’URL de la page

Certains moteurs de recherche accordent une importance capitale aux mots-clés présents dans l’URL, notamment les mots-clés présents dans le nom de domaine. Il est donc conseillé de mettre un nom de fichier adapté, contenant un ou deux mots-clés, pour chacun des fichiers du site plutôt que des noms du genre “page1.html”, “page2.html”, etc.

Le corps de la page

Afin de valoriser au maximum le contenu de chaque page il est nécessaire que celui-ci soit transparent (par opposition aux contenus d’un site développé par exemple avec flash), c’est-à-dire qu’il comporte un maximum de texte indexable par les moteurs.

Les cadres (frames) sont fortement déconseillés car ils empêchent parfois l’indexation du site dans de bonnes conditions.

L’utilisation des titres et des sous titres sont très important pour le référencement. Il est intéressant aussi d’utiliser une barre de maillage ou bien un menu qui permet de naviguer entre toutes les rubriques principales du site : l’internaute peut ainsi naviguer facilement et savoir dans quel page il se trouve et cela augmente aussi le maillage des pages du site ce qui est très apprécié par les moteurs de recherche.

Les balises `<meta>`

Les méta données sont des informations situées au sein d’un document afin de le décrire. Les métadonnées sont ainsi utilisées par les moteurs de recherche lors du référencement de la page Web. Grâce à ces balises non affichées, il est ainsi possible de renseigner des informations relatives à la page où au site afin de mieux en décrire le contenu, en particulier des informations sur le ou les auteur(s) du document, sa limite de validité, la langue utilisée, etc.

On appelle ainsi «méta tags» (en français «méta-balises») des balises spéciales situées dans l’en-tête du document HTML (c’est-à-dire la balise <head>, située avant la balise <body>), afin de fournir des informations permettant aux moteurs de recherche d’indexer la page Web.

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>ISET Sfax</title>
    <meta name="keywords" content="ISET Sfax, INSTITUT SUPERIEUR ETUDES
                TECHNOLOGIQUES, TUNISIE, Sfax, STUDIES, TUNISIA">
    <meta name="description" content="Le site Web de l'institut superieur des
                                      etudes technologiques de Sfax">
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Les différents types de balises méta

On distingue cinq types de méta tags :

Les métas name, permettant de décrire la page HTML :

<meta name="nom du tag" content="attribut" />

Le méta charset, permettant de définir le jeu de caractères qui devrait être utilisé pour le document.

<meta charset="utf-8" />

Les métas http-equiv, permettant d’envoyer des informations supplémentaires au navigateur via le protocole HTTP. Depuis HTML5, 3 HTTP en-têtes étaient standardisés pour être utilisés définir dans ces balises méta (“Content-Security-Policy”, “default-style”, “refresh”) :

<meta http-equiv="nom du tag" content="attribut" />

Les métas itemprop, permettant de définir des métadonnées supplémentaires qui ne sont pas destinées aux navigateurs Web. Ils sont par exemple utilisées pour définir les informations sémantiques pour le protocole Schema.org qui est utilisé par les moteurs de recherches comme Google Search pour explorer les sites Web.

<meta itemprop="nom du propriété" content="valeur" />

Les métas property, permettant aussi de définir des métadonnées supplémentaires qui ne sont pas destinés aux navigateurs Web. Ils sont par exemple utilisées par définir les informations sémantiques pour le protocole Open Graph Protocol qui est utilisé par le site social Facebook pour explorer les pages Web

<meta property="nom du propriété" content="valeur" />

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Un démo des meta données en HTML" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body>
  </body>
</html>

Il est possible de renseigner plusieurs métas les uns après les autres dans l’en-tête de la page.

Exemples de balises méta `name`

author

Elle permet de présenter des informations sur l’auteur de la page

<meta name="author" content="Sawssen Hariz Abid">

copyright

Elle permet de référencer des informations de droits d’auteur

<meta name="copyright" content="Sawssen Hariz Abid 2017-2018, All Rights Reserved." />

description

Elle permet de décrire le contenu d’une page Web par un court texte son contenu apparait dans les pages de résultats de certains outils de recherche. Voici quelques conseils pour créer la balise méta description :

Elle ne doit pas faire plus de 250 caractères
Il faut créer un résumé avec des phrases et éviter les fautes d’orthographes
Et pour la page d’accueil il faut faire une balise description décrivant le site dans son ensemble

<meta name="description" content="Le site Web de l'institut superieur des
                                      etudes technologiques de Sfax">

generator

Elle permet de décrire le nom de logiciel utilisé pour générer la page Web si la création de la page était automatisée.

keywords

Elle permet de décrire le contenu d’une page Web par une liste de mots clés. Voici quelques conseils pour créer la balise meta keywords :

Pour une bonne efficacité on recommande de ne mettre que 5 ou 6 mots par pages séparés par une virgule.
Un mot clé peut être composé de plusieurs mots. Il est recommandé d’utiliser des termes simples et précis (par exemple au lieu de choisir le mot clé « ISET de Sfax » on choisit « ISET Sfax»)

<meta name="keywords" content="ISET Sfax, INSTITUT SUPERIEUR ETUDES
    TECHNOLOGIQUES, TUNISIE, Sfax, STUDIES, TUNISIA">

robots

Elle permet de spécifier le comportement du moteur de recherche à la rencontre de la page (indexation, suivi de liens…). Voici un tableau présentant les différentes valeurs de l’attribut content du robots :

Index	Le “robots” indexera la page.
Noindex	Le “robots” n’indexera pas la page.
Follow	Les liens seront indexés et suivis.
Nofollow	Les liens ne seront pas indexés, ni suivis.
All	Les liens ne seront pas indexés, ni suivis.
None	Le “robots” passe mais n’indexe pas la page ni les liens

<meta name="robots" content="index, follow">

Liens hypertextes

Afin de donner le maximum de visibilité à chacune des pages d’un site, il est conseillé d’établir des liens internes entre ces pages pour permettre aux robots indexeurs (appelés crawlers) de parcourir la totalité de l’arborescence du site. Ainsi, il peut être intéressant de créer une page présentant l’architecture du site et contenant des pointeurs vers chacune des pages qui le constitue.

D’autre part, il est important d’avoir des liens externes pointant vers le site Web car cela augmente d’une part le trafic et d’autre part la visibilité de ce site. Certains moteurs de recherches prennent en compte le nombre et la qualité des liens pointant vers un site pour caractériser son niveau de pertinence (c’est le cas de Google avec son indice appelé PageRank).

L’Attribut `alt` de l’image

Les images du site sont opaques pour les moteurs de recherche, c’est-à-dire qu’ils ne sont pas capables d’en indexer le contenu, il est donc conseillé de mettre un attribut alt sur chacune des images, permettant d’en décrire le contenu.

Voici un exemple de balise <img> avec l’attribut alt :

<img src="images/logo.png" alt="logo de l'ISET Sfax">

Le fichier `robots.txt`

Le mot robot ou encore spider désigne un programme circulant sur le Web dédié au traitement de documents Web en vue de leur indexation et intégration dans le moteur de recherche. Chaque moteur de recherche est caractérisé par un robot.

Présentation de `robots.txt`

Sur un site Web, on essaie de faire en sorte que ces pages soient indexées au mieux par les robots des moteurs de recherche. Mais il peut également arriver que certaines de ces pages soient confidentielles, (ou en travaux) ou en tout cas ils ne doivent pas être diffusés largement sur les moteurs de recherche. Il faut alors empêcher les robots de les prendre en compte.

Cela peut se faire à l’aide d’un fichier texte, appelé robots.txt, présent sur la racine du site. Ce fichier va donner des indications au spider du moteur qui va vouloir explorer le site : ce qu’il peut faire ou ne doit pas faire sur le site.

Dès que le spider d’un moteur arrive sur un site (par exemple http://monsite.com/), il va rechercher le document présent à l’adresse http://monsite.com/robots.txt, avant d’effectuer la moindre indexation du document. Si ce fichier existe, il le lit et suit les indications inscrites. S’il ne le trouve pas, il commence son travail de lecture et d’enregistrement de la page qu’il est venu visiter ainsi que de celles qui peuvent y être liées, considérant que rien ne lui est interdit.

Structure du fichier `robots.txt`

Il ne doit exister qu’un seul fichier robots.txt sur un site, et il doit se trouver au niveau de la racine du site. Le nom du fichier (robots.txt) doit toujours être créé en minuscules. Voici un exemple de structure d’un fichier robots.txt :

User-agent: *
Disallow: /cgi-bin/
Disallow: /settings/
Disallow: /profile/edit.html
Disallow: /reset-password.html

Dans cet exemple :

User-agent: * signifie que l’accès est accordé à tous les agents (tous les spiders), quels qu’ils soient.
Le robot n’ira pas explorer les répertoires /cgi-bin/ et /settings/ du serveur ni les fichiers /profile/edit.html et /reset-password.html.
Le répertoire /settings/, par exemple, correspond à l’adresse http://monsite.com/settings/ . Chaque répertoire à exclure de l’aspiration du spider doit faire l’objet d’une ligne Disallow: spécifique. La commande Disallow: permet d’indiquer que “tout ce qui commence par” l’expression indiquée ne doit pas être indexé.
Disallow: /profile ne permettra l’indexation ni de http://monsite.com/profile/index.html, ni de http://monsite.com/profile.html
Disallow: /profile/ n’indexera pas http://monsite.com/profile/index.html, mais ne s’appliquera pas à l’adresse http://monsite.com/profile.html.

Voici quelques commandes très classiques et importantes du fichier robots.txt :

le fichier robots.txt ne doit pas contenir de lignes vierges.
L’étoile (*) n’est acceptée que dans le champ User-agent.
Elle ne peut pas servir de joker comme par exemple : Disallow: /entravaux/*
Il n’existe pas de champ correspondant à la permission, de type Allow:
Les deux champs de description (User-agent et Disallow) peuvent être indifféremment saisis en minuscules ou en majuscules
Les lignes qui commencent par un signe “#” représentent des commentaires.
Disallow: / Permet d’exclure toutes les pages du serveur (aucune aspiration possible).
Disallow: Permet de n’exclure aucune page du serveur (aucune contrainte).
Un fichier robots.txt vide ou inexistant aura une conséquence identique.
Disallow: /profile/index.html : interdiction de visiter ou d’indexer la page index.html du répertoire profile.
Disallow: /download/*.zip : interdiction de visiter ou d’indexer les fichiers à extension .zip du répertoire download.
User-Agent: googlebot permet d’identifier un robot particulier (ici, celui de Google).

User-agent: googlebot
Disallow:
User-agent: *
Disallow: /
# Permet au spider de google de tout aspirer, mais refuse les autres robots.

`sitemap.xml` et `robots.txt`

Afin d’aider les moteurs de recherche (Google, Yahoo,…) à indexer le site Web, on précise dans le fichier robots.txt l’arborescente du site décrite dans un fichier sitemap.xml. Le fichier sitemap.xml est un document XML permettant notamment de déclarer les URL d’un site Web dans l’objectif d’une indexation par les robots des moteurs de recherche.

On peut ajouter par exemple dans le fichier robots.txt l’instruction suivante :

sitemap: http://monsite.com/sitemap.xml

Les logiciels de mesure d’audience

Les logiciels de mesure d’audience peuvent fournir des informations précieuses pour analyser et suivre les effets d’un référencement (nombre de visites, profil des visiteurs, mots-clés …). En voici quelques uns :

Google Analytics

Google Analytics n’est pas un logiciel mais un service Internet qui permet de suivre avec précisions l’évolution du trafic d’un site Web. Son principal avantage réside dans le fait qu’il ne nécessite aucune installation coté serveur. Il suffit seulement d’insérer un petit code sur chacune des pages de son site.

Les statistiques proposés sont facilement exploitables et certaines vous permettent de mesurer l’impact de votre référencement : analyse des sites affluents (sites, moteurs de recherche), identification des mots-clés,…

Matomo (Piwik)

Logiciel très répandu chez les hébergeurs de sites Web qui permet de visualiser et de mesurer la fréquentation de son site Web. On trouve aussi des statistiques (sous formes d’histogrammes et de tableaux) concernant les référents et moteurs de recherche qui ont permis d’atteindre un site donné.

Remarque :

Il existe plusieurs exemples de logiciel d’aide au référencement tels que : Submitic, The SkyFox Promotion, Yooda seeUrank, GenerMTag, GSA Auto SoftSubmit, AdaUrl,…

Mais, il est déconseillé d’utiliser ce type de logiciels car certains moteurs de recherche rejetteront les sites qui sont référencés à l’aide des logiciels de référencement automatique

Annexe

Bibliographie

Sites en ligne

Mozilla Developer Network : C’est le ressource numéro 1 dans le monde pour les documentations professionnels des technologies du Web.
W3Schools : Site des tutoriels et des références en technologies du Web.
Developpez.com : Club des développeurs et IT pro. Il contient une grande bibliothèque des tutoriels et documentations en plusieurs technologies tel que les technologies du Web.
W3C : Organisme de définition des standards du Web.
WHATWG : Organisme de définition des standards du Web.
Can I use : Matrice d’état du support des standards des langages HTML, CSS et JavaScript par les navigateurs principaux (Firefox, Chrome, Opera, Safari, IE, Edge, …)

Livres

Beginning HTML5 and CSS3 : par Richard Clark, Oli Studholme, Christopher Murphy and Divya Mani
HTML5 & CSS3: The Complete Manual 2014, par Imagine Publishing Ltd.

Outils de développement

À Propos

Ce cours est écrit par Sawssen Hariz pour être une référence pour les étudiants.

Il est inspiré d’un grand nombre de cours et de guides en lignes. Je cite principalement :

Mozilla Developer Network : C’est la ressource principale de documentation professionnelle des technologies du Web. Les informations de ce cours y sont basées principalement. Quelques contenus et photos étaient pris depuis MDN.
Cours-Web.ch : J’ai considéré ce site comme référence dans la partie introductive.

La mise en page de notre site est basée sur la mise en page du site de cours Game Programming.