L1 - UE Développement Web - Introduction à XHTML / CSS

Note : ce cours se veut une introduction à XHTML et CSS pour des étudiants de première année universitaire qui possèdent une base d'algorithmique et de programmation en langage Pascal.

Merci à André Rossi pour la relecture du cours permettant ainsi son amélioration et la correction de nombreuses petites fautes.

Le cours est organisé en trois parties :

1.1. Le WWW (World Wide Web)

Le World Wide Web (WWW), littéralement la « toile (d’araignée) mondiale », communément appelé le web, le Web, et parfois la toile, est un système hypertexte public fonctionnant sur internet qui permet de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d'araignée vient des hyperliens qui lient les pages web entre elles.

source : Wikipédia

1.1.1. WWW dis moi qui je suis

Les sites Web sont aujourd'hui devenus un moyen incontournable et essentiel pour la diffusion, le traitement et la recherche de l'information (Wikipédia, Yahoo, Google, Bing), la communication (Intel, Apple, AMD, Oracle, gouv.fr, elysee.fr, boursedeparis.fr, France Télécom, SFR, Free) et le commerce (SNCF, cdiscount, Amazon, ...).

La façon dont est conçue un site est importante et peut soit séduire l'utilisateur, soit le rebuter.

La façon dont vous concevez votre site peut également révéler certains aspects de votre personnalité.

1.1.2. notion de Client - Serveur

Le fonctionnement du web repose en grande partie sur un modèle client - serveur :

Dans le cas du développement web, le serveur héberge les pages web des utilisateurs. Le serveur doit être puissant car il doit traiter des centaines, voire des milliers de requêtes par seconde.

Le client accède aux pages web en spécifiant une URL (Uniform Resource Locator). Comme dans l'exemple suivant :

http://www.info.univ-angers.fr/pub/richer/index.html

on distingue :

En retour le serveur enverra le contenu du fichier qui sera affiché dans le navigateur, ou s'il ne trouve pas le fichier, génèrera une erreur dite 404 (Not Found).

network and web

1.1.3. sous Ubuntu

Pour mettre à disposition ses propres pages web, on peut :

Par exemple, sous Linux Ubuntu, le serveur Apache permet de publier ses pages web dans le répertoire /var/www

Par défaut le serveur crée une page index.html dans le répertoire /var/www et on peut y accèder en saisissant l'URL http://localhost dans un navigateur sur sa machine.

Généralement, on crée un sous-répertoire pub et on utilise des liens symboliques vers le répertoire public_html des utilisateurs :

ls -al /var/www/pub
lrwxrwxrwx 1 root root   25 mai   18  2012 richer -> /home/richer/public_html/

Dès lors, je peux accèder à mes propres pages par : http://localhost/pub/richer et stocker mes fichiers dans /home/richer/public_html/

1.1.4. LAMP ou WAMP ?

Il existe des solutions simples à installer pour mettre en place un serveur web sur sa machine :

Ces solutions contiennent :

1.2. XHTML

1.2.1. introduction

XHTML ou eXtensible HyperText Markup Language est un langage à balises issu de XML, qui dérive lui-même des concepts du SGML (Standard Generalized Markup Language) conçu à partir de 1969 par Charles Goldfarb travaillant à l'époque chez IBM. SGML est employé dans les industries de la documentation et de l'édition.

La compréhension du langage repose sur au moins deux points :

L'idée fondamentale du XHTML est l'utilisation de balises pour ajouter un contenu sémantique à un texte. Par exemple :

  1. <phrase>
  2.     <sujet>
  3.         <article genre="masculin" nombre="singulier"> le </article>
  4.         <nom type="animal, domestique"> chat </nom>
  5.     </sujet>
  6.     <verbe groupe="premier" personne="troisieme"
  7.         nombre="singulier" racine="manger"
  8.         temps="indicatif-présent"> mange </verbe>
  9.     <complement>
  10.         <article genre="feminin" nombre="singulier"> la </article>
  11.         <nom type="animal, rongeur"> souris </nom>
  12.     </complement>
  13. </phrase>
  14.  
  15.  

On retrouve la phrase initiale agrémentée d'informations complémentaires :

Le langage XHTML est l'application de ce principe à la description de pages web.

XHTML 1.0 (2001) est une évolution de HTML version 4.01 basée sur XML. La version XHTML 2.0 qui a été développée pendant près de 8 ans a été abandonnée en 2009 à la faveur de XHTML 5 (2012). XHTML 2.0 n'était pas rétro-compatible avec HTML 4.

Aujourd'hui on parle de manière équivalente de HTML 5 ou XHTML 5. XHTML est simplement plus restrictif dans sa syntaxe. On parle alors de (X)HTML.

Parmi les principaux éléments liés à XHTML 5, on note :

Les conventions sont les suivantes :

  • balises et attributs sont écrits en minuscule
  • une balise est toujours fermée : <p> ... </p>, sauf les balises auto-fermantes (cf. plus avant)
  • certaines balises qui ne peuvent être fermées comme break rule, passage à la ligne, s'écrivent <br />

1.2.2. extensions de fichiers

Les fichier (X)HTML prennent l'extension .html ou (parfois .htm), il existe d'autres extensions notamment lorsque l'on utilise des langages de script pour dynamiser les pages web :

1.2.3. structure du document

La structure d'une page web est la suivante :

En fonction de la version HTML / XHTML, on utilisera un préambule différent :

  1. HTML 4.01 Loose
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. HTML 4.01 Strict
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  7. "http://www.w3.org/TR/html4/strict.dtd">
  8.  
  9. HTML 4.01 Frameset
  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  11. "http://www.w3.org/TR/html4/frameset.dtd">
  12.  
  13. XHTML 1 Transitional
  14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  15. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16.  
  17. XHTML 1 Strict
  18. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  19. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  20.  
  21. XHTML 1 Frameset
  22. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  23. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  24.  
  25. HTML5 / XHTML5
  26. <!DOCTYPE html>
  27.  

On voit rapidement qu'il est plus facile d'utiliser XHTML 5.

1.2.4. une page simple en XHTML 5

Voici un exemple de page :

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="fr-FR">
  3. <!-- entete -->
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>XHTML 5</title>
  7. </head>
  8. <!-- contenu de la page -->
  9. <body>
  10.     <h1>Ma première page</h1>
  11.    
  12.     <p>Bonjour !</p>
  13.        
  14. </body>
  15. </html>
  16.  

1.2.5. emboîtements

Tous les éléments possèdent des règles définissant dans quel autre élément (parent) ils peuvent être placés, et quels autres éléments (enfants) ils peuvent contenir.

En outre certaines balises sont unitaires on dit également auto-fermantes, c'est-à-dire des éléments vides et ne doivent rien contenir du tout excepté des attributs. C'est le cas de <img /> ou <br /> :

<img src="..." alt="..." />
<br />

On ne peut pas avoir :

<img src="..." alt="..." >
   ....
</img >

1.2.6. les balises liées au texte

Voyons à présent les balises liées à la structuration du texte.

1.2.6.a  titres - headings

Ce sont les balises <h1> à <h6> qui permettent de structurer le texte (titre, section, sous-section, ...) >>.

1.2.6.b  le paragraphe

Les paragraphes sont introduits par la balise <p>.

A l'intérieur d'un paragraphe on peut utiliser des balises de mise en forme par défaut :

1.2.6.c  listes

On distingue trois types de listes :

voir un exemple.

1.2.7. les liens hypertextes

Les liens hypertextes sont introduits par la balise <a> qui entoure généralement du texte ou une image et qui contient l'attribut suivant :

Page appelante :
suivre ce <a href="http://www.info.univ-angers.fr/pub/richer/index.php">lien</a>
ou avec une ancre :
suivre ce <a href="http://www.info.univ-angers.fr/pub/richer#COURS">lien</a>

Page appelée avec élément doté d'un identifiant :
<h1 id="COURS">Cours <h1>

Par le passé (HTML 4) on utilisait l'attribut name avec la balise a pour réaliser une ancre.

<a name="COURS">Cours </a>

1.2.8. les images

Les images sont introduites par la balise <img /> qui est une balise unitaire et les attributs :

<img src="frenchflag.gif" alt="drapeau français" 
  title="Mon pays"  width="300" height="200" />

drapeau français

1.2.9. les tableaux

Les tableaux sont introduits grâce à la balise <table> ... </table> :

En XHTML 5, le format a été étendu avec des balises thead, tfoot, tbody, caption : >>

1.2.10. les formulaires

Les formulaires sont introduits grâce à la balise <form> ... </form>. Ils permettent de saisir différents types de champs qui seront envoyés au serveur.

Le formulaire possède trois attributs :

voir un exemple.

Différents types de champs peuvent être utilisés :

On peut également organiser les éléments du formulaire en les regroupant dans une balise <fieldset> ... </fieldset>

1.2.10.a  label des champs

La balise <label for="..." > texte </label> permet d'introduire le texte lié à un champ.

Utilisez l'attribut for afin qu'un clic sur le label "Entrez un texte" amène la souris dans la zone de saisie.

<label for="txt">Entrez un texte : </label>
<input type="text" value="Hello world" id="txt" />

1.2.10.b  les champs de texte

On utilise la balise unitaire <input ... /> et on définit les attributs suivants :

On notera qu'un champ hidden n'apparaît pas, il sert à contenir de l'information qui sera traitée par la suite.

1.2.10.c  les champs de texte sur plusieurs lignes

On utilise la balise <textarea> value </textarea> et on définit les attributs suivants :

La valeur du champ est placée à l'intérieur des balises.

Pour empêcher le redimensionnement d'un textarea on peut utiliser l'attribut style="resize: none;" :


1.2.10.d  les listes déroulantes

On utilise la balise <select> ... </select> et on définit les attributs suivants :

Les possibilités de choix sont décrites par des balises <option value="1"> texte </option>. On peut utiliser l'attribut selected qui permet de choisir l'option qui sera affichée par défaut.

On peut en outre faire de choix multiples (attribut multiple) ou grouper les options (balise <optgroup> ... </optgroup>).

1.2.10.e  les boutons radio (1 choix parmi plusieurs)

On utilise, comme pour le texte, la balise unitaire <input ... /> et on définit les attributs suivants :

1.2.10.f  les boutons checkbox

On utilise, comme pour le texte, la balise unitaire <input ... /> et on définit les attributs suivants :

1.2.10.g  les boutons

Il existe deux manières de les introduire :

<input type="submit" value="Envoyer" />
<input type="reset" value="RAZ" />

<button type="submit"> Envoyer </button>

1.2.11. empêcher la modification

On peut empêcher la modification d'un champ de deux manières différentes :

1.2.12. la balise div

Elle permet de structurer la page en différentes zones (éventuellement imbriquées) auxquelles on va appliquer un style (CSS) :

1.2.13. créer une page web

Il faut commencer à réfléchir au contenu du site et au public visé : recettes de cuisine, constructeur automobile, informations, ....

On élabore ensuite la structure de la page : Free CSS Templates

1.3. CSS

1.3.1. Introduction

Les CSS ou Cascading Style Sheets permettent de mettre en forme le contenu XHTML.

Un aperçu des possibilités du CSS nous est donné par le site CSS Zen Garden.

Les CSS permettent notamment de modifier :

La version actuelle des CSS est la version 3, liée à (X)HTML 5.

1.3.2. Notion de boîte (box)

Chaque élément de la page est défini par :

Voir w3schools.boxmodel

1.3.3. Emboîtements

On a vu que certaines balises (X)HTML peuvent contenir d'autres balises. En CSS cette notion est liée à l'affichage qui peut être de type block ou inline :

  • Les éléments de rendu CSS block se placent l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...
  • Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple la balise <strong>). Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales.

Source : alsacreations

On peut modifier le positionnement en utilisant la propriété display avec les valeurs block ou inline.

1.3.4. Grandeurs et unités

Les grandeurs sont définies en fonction de l'unité qui les suivent : w3schools.units

1.3.5. introduire du CSS dans une page web

Il existe quatre possibilités :

1.3.6. format

Le format d'une règle CSS est très simple :

selecteur {
 	propriete1 : valeur1;
 	propriete2 : valeur2;
 	...
}

Les propriétés CSS d'une balise sont héritées par ses descendants (d''où le terme Cascading = en cascade).

1.3.7. sélecteurs basiques

 sélecteur   description 
 h1   balise (X)HTML 
 h1, h2   les balises h1 et h2 
 p em   balise em à l'intérieur d'un paragraphe 
 .rouge   définition d'une classe (ex <p class="rouge"> ... <p>) 
 #menu   définition du style d'un identifiant (ex. <div id="menu">..<div>) 
 #menu > p   tout paragraphe descendant direct de menu 
 a:link   pseudo classe 
 p:first-child   premier paragraphe 
 h1+p+p   second paragraphe dans un enchaînement h1 suivi de deux paragraphes 
 input[type=text]   champ de formulaire de type text 
Exemple de sélecteurs

Par exemple div.menu p em:first-letter signifie la première lettre de la balise em à l'intérieur d'un paragraphe contenu dans un div de classe menu.

Voici un autre exemple : ici, toute balise em qui découle directement de #ce_paragraphe apparaitra en rouge et en majuscule.

#ce_paragraphe > em {
    color:red;
    text-transform:uppercase;
}

<p id="ce_paragraphe">Voici de <em>l'italique</em>. Puis une balise span est ouverte, <span>on remet de <em>l'italique</em>, et on referme la balise span</span>. Enfin, on remet de <em>l'italique</em>.</p>

Le résultat obtenu est que le premier et le troisième <em> apparaissent en rouge et en majuscule, alors que ce n'est pas le cas pour le second qui est à l'intérieur d'un span :

Voici de l'italique. Puis une balise span est ouverte, on remet de l'italique, et on referme la balise span. Enfin, on remet de l'italique.

1.3.8. changement de police de caractères

1.3.9. les couleurs

On utilise color pour la couleur de la police par exemple et background-color pour la couleur du fond.

A noter : background permet également de définir une image de fond.

1.3.10. alignement et transformation du texte

1.3.11. positionnement des éléments

Les éléments apparaissent dans l'ordre de la page, cependant on peut les positionner de différentes façons :

statique
c'est la positionnement par défaut, les éléments apparaissent les uns à la suite des autres (cf static)
fixed
on positionne l'élément par rapport aux dimensions de la fenêtre, l'élément ne bougera pas lorsque l'on utilise les barres de scrolling. Il faudra également fixer la largeur ou la hauteur de l'élément (cf fixed) : 
div#menu {
	position: fixed;
	top : 100px;
	right: 10px;
	width : 150px;
	height; 200px;
}
relative
l'élément est déplacé par rapport à la position qu'il devrait normalement occuper (cf relative) : 
div#menu {
	position: relative;
	top : 10px;
	left: -20px;
}
absolue
l'élément est positionné relativement à son parent qui possède une position autre que statique. Si aucun parent de ce type existe alors on positionne par rapport à la page. Les éléments en positionnement absolu sont retirés du flux normal d'affichage. 
div#menu {
	position: absolute;
	top : 100px;
	left: 100px;
}

On peut également utiliser la propriété float avec l'une des valeurs suivantes : none, left, right ou inherit (hérité du parent) pour modifier le positionnement des éléments de type box.

Pour mettre fin à la propriété float on utilise :

<div style="clear: both;"></div>

1.4. Validation XHTML et CSS

La possibilité est offerte de pouvoir tester si votre page est conforme aux standards en vigueur :