lesson

1.1 Table des matières

Bienvenue au premier TP.

Cliquez sur "début du TP" pour commencer.

Il est vivement recommandé de faire ce TP en ayant le cours sous les yeux. Si vous n'avez pas la version papier, vous pouvez ouvrir la version PDF dans une autre fenêtre (ou onglet) de votre navigateur.

début du TP

2. premières pages HTML et balises

2.1 premières pages HTML et balises

Dans les exercices suivants vous allez créer vos premières page web en utilisant des balises simples.

Voici les pages de cours correspondant:

2.2 Première page en html

Première page en html

Nous allons commencer par une page web très très simple.
Ouvrez un éditeur de texte et enregistrez un fichier essai1.html contenant le html suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un essai</title>
</head>
<body>
<h1>Première page</h1>
<p>Et voila! Une page en html.</p>
</body>
</html>

Pour visualiser ce fichier html nous devons l'ouvrir dans un navigateur.
Ouvrez une nouvelle fenêtre ou un nouveau onglet de votre navigateur.

URL file: //

On peut dire à un navigateur de chercher directement un fichier (sans passez par un serveur web) en utilisant une URL de type:
file://chemin_absolu_du fichier
Par exemple:
file:///home/usager/dupond/intro-web/tp1/essai1.html

Remarquez les 3 '/' (deux pour le protocole "file://" et une pour indiquer que c'est un chemin absolu débutant à la racine.)

Visualisation et modification

visualisez le fichier essai1.html
modifiez un peu le texte du fichier
enregistrez
pour visualiser les changements, vous devez dire au navigateur de "rafraîchir" (on dit aussi "actualiser", "reload", "refresh") la page. Vous pouvez appuyer sur le bouton : . On peut aussi appuyer sur la touche F5. Essayez les deux possibilités.

2.3 Révision des balises simples

Révision des balises simples

Pour pouvoir écrire du html il faut absolument connaître quelques balises. Essayez de vous souvenir des balises vues en cours. Sinon regardez dans votre cours ou cherchez sur le web.

une image : img
un retour chariot (fin de ligne) : br
un paragraphe : p
un titre très important : h1
un titre moins important : h2
un lien vers une autre page web : a
non, il y a une erreur
oui
ligne horizontale : hr
du texte mis en valeur : strong

2.4 Validation

Validation

Quand on écrit du html, on peut se tromper. Le navigateur réussit souvent à afficher quelque chose d'acceptable, même s'il y a une erreur dans le html. C'est pratique, mais alors on ne se rend souvent pas compte des erreurs. D'autres personnes, utilisant d'autre navigateurs auront peut-être des problèmes en affichant votre html.

Pour éviter ce genre de problème il est très important de valider le html qu'on écrit.

On peut, par exemple, utiliser http://htmlhelp.com/tools/validator/

Visitez le lien (Entrez directement le code html) sur cette page.
Copiez-collez votre html de l'exercice précédent dans le formulaire et appuyez sur "Check" pour valider.

Maintenant, copiez le html suivant et validez.

Ce html comporte un erreur que vous indique le validateur.
Validez cette page puis descendez tout en bas de la page de résultat de validation. Le validateur vous dit ou se trouve le problème.
Essayez de comprendre le problème.
À quel numéro de ligne se trouve le problème?

2.5 Correction

corrigez le html de la question précédente et vérifiez que votre html corrigé est accepté par le validateur.

2.6 Validateur integré

Validateur intégré dans Firefox

Comme vous l'avez peut-être remarqué, c'est un peu long de faire un copier coller dans le validateur à chaque changement dans le html.

Nous allons utiliser une extension de firefox qui s'appelle "HTML Validator".

Cliquez sur le lien suivant pour l'installer (vous devrez ensuite redémarrer votre navigateur).
http://htmlvalidator.sourceforge.net/mozilla/tidy_firefox_linux_0861.xpi

Au redémarrage hrml validator vous demande le type de validation souhaitée, choisissez la plus complète ("les deux", à droite).

Ensuite visitez votre fichier essai1.html
En bas à droite (flèche sur le dessin) vous pouvez avoir soit une icône verte (votre html est valide) soit une icône rouge (votre html n'est pas valide).

En cliquant sur l'icone rouge, une fenêtre apparait avec trois parties (1,2,3). Dans la partie (1) est affiché votre code html. Fans la partie (2) sont affichés les erreurs. En sélectionnant une erreur dans (2) vous verrez le détail dans (3).

Modifiez votre fichier pour qu'il contienne des erreurs et réessayez.

Vous devez prendre le réflexe de valider systématiquement le html que vous écrivez, à chaque fois que vous y faites une modification.

2.7 Essai balises simples

Essai de balises simples

Reprenez le fichier essai1.html et faites des essais avec les balises suivantes:
h1, h2, h3, strong, hr et br
Après chaque modification, pensez à valider (en particulier lorsque vous utiliserez hr et br) et a visualiser dans le navigateur.

2.8 Balises avec attributs

Balises avec attributs

Pour l'instant nous avons uniquement utilisé des balises simples, sans attributs, ayant la forme suivante:
<nombalise>contenu</nombalise>
ou bien
<nombalise/> pour les éléments sans contenu.

Comme nous l'avons vu en cours, les balises peuvent avoir des attributs apportant des informations supplémentaires:

<nombalise nomattribut="valeur-attribut">contenu</nombalise>

Par exemple, pour afficher une image, nous devons (obligatoirement) spécifier le chemin du fichier image et aussi un texte "alt" à afficher si l'image ne peut pas être affiché.

<img src="photo.jpg" alt="photo de vacances"/>

Attention! On ne peut pas mettre du texte ou des images directement dans <body>. Le texte et les images doivent obligatoirement se trouver dans un paragraphe, un titre, ou quelques autres éléments.

Nous allons ajouter une image dans essai1.html

allez sur http://images.google.fr , recherchez une image (un pingouin, par exemple)
enregistrez l'image et déplacez-là dans le même répertoire que essai1.html. Pour enregistrer une image que vous trouvez sur le web, cliquez sur l'image avec le bouton droit et sélectionnez "Enregistrer l'image sous..."
rajoutez une balise img dans essai1.html faisant référence à l'image
validez et vérifiez que l'image s'affiche bien

Attention! Ce n'est pas parce qu'une image est accessible sur le web qu'il est autorisé de la recopier et de la réutiliser. Il faut forcément l'accord du créateur de l'image (une licence d'utilisation).

2.9 liens

Liens

Pour créer un lien d'une page html vers une autre page html on utilise la balise "a".
<a href="url">texte du lien</a>

L'URL peut prendre plusieurs formes. Dans les exemples suivants on suppose que le lien se trouve dans un fichier essai1.html

Les formes d'URL les plus courantes sont:

1. chemin relatif vers un fichier, par exemple:

<a href="toto.html">la page de toto</a> : le fichier toto.html est dans le même répertoire que essai1.html
<a href="documents/toto.html">la page de toto</a> : le fichier toto.html est dans un sous répertoire "documents" du répertoire courant (celui ou se trouve essai1.html)

2. une URL complète

<a href="http://unsite.org/toto.html">la page de toto</a> : le fichier toto.html est sur le serveur unsite.org

3. un chemin absolu

<a href="/blogs/toto.html">la page de toto</a> : le fichier toto.html est dans le répertoire "blogs" qui se trouve à la racine du serveur web. (la racine du serveur web n'est pas la même que la racine du système de fichiers. Nous verrons ces concepts plus tard).

Exercice

Créez un nouveau fichier appelé essai2.html et ajoutez un lien dans essai1.html vers essai2.html
Créez un répertoire appelé "docs" et céez un fichier essai3.html dans docs. Ajoutez un lien dans essai1.html vers docs.
Créez un lien dans essai1.html vers le site debian.fr

Vérifiez à chaque fois que les liens marchent et que votre html est valide.

2.10 Trouver les erreurs dans le html

On suppose que les lignes ci-dessous sont situés dans le bon contexte (par exemple, on suppose que l'image se trouve dans un paragraphe, que le titre ne se trouve pas dans un paragraphe, etc.).

Indiquez les lignes qui sont correctes (sans erreurs)

<p>bla bla <br> bla bla </p>
<h1>abcde</h1>
<p>bonjour ceci est <strong>important</strong></p>
<a href=toto.html>lien</a>
<h2>ceci est un titre</h3>

2.11 Correction de l'exercice précèdent

Correction de l'exercice précèdent:

<p>bla bla <br> bla bla </p> : balise non fermée <br/>
<a href=toto.html>lien</a> : il manque les guillemets <a href="toto.html">
<h2>ceci est un titre</h3> : la balise ouvrante h2 ne correspond pas a la balise fermante h3

3. html : decouverte d'autres elements et doc sur le web

3.1 html : decouverte d'autres elements et doc sur le web

Dans les exercices suivants nous allons découvrir d'autres éléments html (listes, tables) et apprendre à utiliser la documentation de référence.

3.2 Ressources et doc sur le web

Ressources et documentation sur le web

Vous trouverez énormément d'information et de conseils sur le web. Mais attention! De nombreuses sources sont périmés ou bien ne sont pas fiables. Ceci est particulièrement vrai pour le html et la programmation web. Donc, comme toujours ... gardez un esprit critique.

Les références

Le HTML et le XHTML sont définis par des normes (spécifications) officielles publiées par un organisme appelé le W3C.

Le XHTML que nous utilisons est défini à partir du HTML 4.01.
Pour connaître les differents éléments HTML (représentation des balises) existants il faut regarder la norme HTML 4.01:
http://www.w3.org/TR/html4/

Attention! Vous devez traduire les exemples du HTML 4.01 en XHTML :
- balises en minuscules
- les balises doivent être fermées
- des guillemets doivent être utilisés pour les attributs
- ...

Une traduction en français de la norme se trouve ici:
http://www.la-grange.net/w3c/html4.01/cover.html

parcourez rapidement ce document pour en comprendre la structure.
Dans les exercices suivants vous allez rechercher des informations dans ce document.

3.3 recherche d'elements

[ ]*? *
[ ]*? * : Presque ... prenez l'habitude de traduire en minuscules.

3.4 recherche d'element -li

Quel est le nom d'un élément d'une liste?

[ ]*? *

3.5 essai ul/li/ol

Dans un fichier html (par exemple essai1.html) créez une liste non-ordonnée.
Vérifiez qu'elle s'affiche correctement et -très important- qu'elle est acceptée par le validateur.

N'oubliez pas de fermer chaque élément de la liste.

Ensuite modifiez votre html pour utiliser des listes ordonnées (cherchez dans la spécification du html : http://www.la-grange.net/w3c/html4.01/cover.html).

3.6 recherche d'element - pre

Dans la spécification du html 4.01 :
http://www.w3.org/TR/html4/
http://www.la-grange.net/w3c/html4.01/cover.html

cherchez le nom de la balise permettant de créer un bloc de texte préformaté.

Habituellement, l'affichage du html ne tient pas compte des fins de ligne ni des espaces multiples. Dans un bloc préformaté, ces espaces et fins de lignes sont affichés.

Ceci peut-etre très pratique, pour debugger par exemple.

[ ]*? *

3.7 essai d'element - pre

Dans un fichier html (par exemple essai1.html) créez du texte préformaté (créez du texte avec plusieurs lignes et des espaces multiples).
Vérifiez qu'elle s'affiche correctement et -très important- qu'elle est acceptée par le validateur.

N'oubliez pas la balise fermante.

3.8 Tables - premier exemple

Tables - premier exemple

Copiez l'exemple ci-dessus dans un fichier table.html
Regardez l'affichage et essayez de comprendre.
Parcourez la spécification du html pour vous aider.

oui
non
cellule ordinaire : td
cellule d une entête de colonne : th
une ligne de la table : tr
l élément définissant l ensemble de la table : table

4. arbres et révisions client-serveur

4.1 arbres et révisions client-serveur

Dans les exercices suivants nous allons explorer la structure en arbre (arborescence) d'un document html.

4.2 tree1

Arbres d'éléments

Comme nous l'avons vu en cours, les balises dans un fichier html forment un arbre d'éléments html. Nous allons essayer de reconstruire l'arbre du document html suivant.

Copiez ce html dans un fichier arbre.html et affichez le. Lisez-le attentivement pour bien comprendre comment il fonctionne. Vous remarquerez que faute de fichier image c'est le texte de l'attribut "alt" qui s'affiche.

Maintenant, prenez une feuille de papier et un stylo puis dessinez de vous même l'arbre des éléments. On ne représentera pas les éléments texte (contenant du texte pur, sans balises).

Après avoir dessiné l'arbre, vous pourrez facilement répondre aux questions ci-dessous.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Un essai</title>
</head>
<body>
<h1>Un exemple d'<a href="important.html">html</a></h1>
<h2>premier paragraphe</h2>
<p>Ceci est un texte avec des <a href="liens.html">liens <strong>en gras</strong></a> et des images: <img src="photo.jpg" alt="portrait"/>. Il y a une image sur laquelle on peut cliquer pour suivre un lien <a href="liens.html"><img src="image.png" alt="image lien"/></a></p>
<h2>une liste</h2>
<ul>
<li>le html c'est sympa</li>
<li>je m'amuse beaucoup en TP d'<a href="intro.html">intro web</a></li>
<li>c'est bientôt la pause?</li>
</ul>
<h2>dernier paragraphe</h2>
<p>Et voila</p>
</body>
</html>

oui
non
1 : html
2 : head
3 : body
4 : title
5 : h1
6 : h2
7 : p
8 : a
9 : a
10 : img
11 : a
12 : strong

4.3 tree2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Un essai</title>
</head>
<body>
<h1>Un exemple d'<a href="important.html">html</a></h1>
<h2>premier paragraphe</h2>
<p>Ceci est un texte avec des <a href="liens.html">liens <strong>en gras</strong></a> et des images: <img src="photo.jpg" alt="portrait"/>. Il y a une image sur laquelle on peut cliquer pour suivre un lien <a href="liens.html"><img src="image.png" alt="image lien"/></a></p>
<h2>une liste</h2>
<ul>
<li>le html c'est sympa</li>
<li>je m'amuse beaucoup en TP d'<a href="intro.html">intro web</a></li>
<li>c'est bientôt la pause?</li>
</ul>
<h2>dernier paragraphe</h2>
<p>Et voila</p>
</body>
</html>

oui
non
1 : img
2 : h2
3 : ul
4 : h2
5 : p
6 : li
7 : li
8 : li
9 : a

4.4 client serveur très simple

Completez ce schèma

(interaction très simplifiée pour un fichier html simple)

oui
non
A : client
B : serveur
C : logiciel serveur web
1 : saisie d'une URL ou click sur un lien
2 : connexion du client sur le serveur et demande d'un fichier html
3 : le serveur web cherche le fichier html
4 : envoi du fichier html
5 : affichage du html

5. mise en page, style et css

5.1 mise en page, style et css

Dans les exercices suivants nous allons créer notre première feuille de style.

5.2 Premier pas avec les styles

Premier pas avec les feuilles de style

Commençons avec un exemple simple. Créez les fichier essai2.html et style.css suivants, puis visualisez le fichier html dans votre navigateur.

Ensuite, effacez le contenu de style.css et modifiant uniquement style.css faites en sorte que:

le titre principal s'affiche en blanc (white) sur fond gris (gray)
les titres de niveau 2 (h2) soient encadrés avec une bordure rouge épaisse de 3 pixels.
les titres de niveau 2 (h2) soient affichés avec une marge à gauche de la taille de 2 lettres "M"
les paragraphes soient affichés avec une marge à gauche de la taille de 4 lettres "M"
la largeur (width) des titres h2 est la moitié de la page (50%)

(on n'utilisera PAS les sélecteurs "id" ni "class", et bien sur, on ne touchera pas au html, mais uniquement au CSS)

à chaque étape pensez à valider votre CSS

essai2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Un essai avec des styles</h1>
<h2>Titre de la 1ere section</h2>
<p>bla bla bla bla bla</p>
<h2>Titre de la 2eme section</h2>
<p>bli bli bli bli bli</p>
<h2>Titre de la 3eme section</h2>
<p>Qu'est qu'on s'amuse!</p>
<h2>Titre de la 4eme section</h2>
<p>abc def ghi jkl mno</p>
</body>
</html>

style.css:

h1
{
color : green;
}

h2
{
color : red;
}

5.3 correctop, style.css

correction de la question précédente:

h1
{
color : white;
background-color: gray;
}

h2
{
color : red;
border: 3px solid red;
margin-left: 2em;
width: 50%;
}
p
{
margin-left: 4em;
}

5.4 courleurs avec gimp

5.5 couleurs RVB

Couleurs RVB

Les couleurs dans une feuille de style sont souvent données à l'aide de 6 chiffres hexadécimal. Soit deux pour chacune des 3 composantes, Rouge, Vert et Bleu (RVB) ou Red, Green, Blue (RGB) en anglais.

Le mélange de ces couleurs (de lumière) se fait par "synthèse additive" ce qui est très différent de ce que vous faites si vous mélangez de la peinture:

Nous allons utiliser un logiciel de dessin (gimp) pour expérimenter avec ces mélanges de couleurs.
Lancez le logiciel gimp (par le menu ou sur la ligne de commande : gimp).

cliquez sur 1 pour ouvrir le sélectionneur de couleurs
changez les couleurs en regardant les valeurs RVB dans 2
remarquez les valeurs en hexadécimal affichez dans 3
- prenez le temps d'expérimenter avec de nombreuses couleurs pour bien sentir comment se font les mélanges
essayez ensuite d'autres manières de choisir vos couleurs avec les différents onglets dans 4
Répondez au questions ci-dessous

oui
non
mélange de rouge de vert et de bleu (à parts égales), en utilisant les valeurs maximum pour chacun. : blanc
mélange de rouge de vert et de bleu (à parts égales), en utilisant la moitié valeurs maximum pour chacun (R V et B) (128 ou 80 en hexa) : gris
mélange de rouge (valeur max) et de vert (valeur max). : jaune
mélange de rouge (valeur max) et de vert (moitié valeur max). : orange
uniquement du bleu (moitié valeur max) : bleu sombre
mélange de rouge (moitié valeur max) et un petit peu de vert. : marron
mélange de rouge (valeur max), de vert (un peu en dessous de la valeur max) et de bleu (même valeur que le vert) : rose

5.6 ids et classes

Attributs id et class

Créez un fichier xhtml complet et ajoutez le html ci-dessous.

Nous voulons changer la présentation du nom du gagnant du jeu.
En utilisant l'attribut "id" avec la valeur "leGagnant", faites en sorte que "Toto" soit encadré en rouge.

Nous voulons diviser les joueurs en deux équipes : villetaneuse et epinay. En utilisant l'attribut class faites que les joueurs de villetaneuse apparaissent en vert et ceux d'epinay en bleu.

Remarquez, que le gagnant aura deux attributs : l'id "leGagnant" et la classe "villetaneuse" (par exemple).

Validez à la fois votre html et votre feuille de style.

Vous devez obtenir un résultat qui ressemble à ça:

5.7 correction: id, class

Correction

html:

CSS

.epinay
{
color: blue;
}
.villetaneuse
{
color: green;
}
#leGagnant
{
border: 1px solid red;
}
li
{
width: 5em;
}

Parties

1. Table des matières