Exercices sur xhtml, IUT R&T, UNS

Exercices sur xhtml
TP 1 - xhtml, éléments de base
- ÉNONCÉ -

Objectif : démarrer avec xhtml, créer des exemples simples illustrant le balisage structurel, les liens hypertextes, les tableaux et les images.

Préambule

Pour savoir dans quel répertoire créer ses fichiers web, consulter la documentation : http://kheops.unice.fr/, rubrique "création de pages web".
Dans ce répertoire, créer un sous-répertoire technoWeb dans lequel on placera tous les fichiers créés. On pourra y accéder par l'adresse : http://kheops.unice.fr/~votre_login/technoWeb.

Le modèle de tous les fichiers xhtml qui seront créés sera :

<?xml version="1.0"?>
<!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">

<head>
        <title>Page xhtml pour la programmation web</title>
</head>
<body>
    
</body>
</html>

Dernier point : l'ensemble des documents créés devront être validés avec l'outil de validation du W3C.

Vous pouvez maintenant passer aux exercices proprement dits.

Structuration

Créer un document html dont le résultat est semblable à text.pdf.
Il faut utiliser les différentes balises vues en cours (notamment DFN, STRONG, PRE...) et s'appliquer pour l'accentuation.
Les liens dans le fichier text.pdf sont, dans l'ordre d'apparition, http://www.w3.org/ et http://www.w3.org/TR/html4/sgml/entities.html.
Valider cette page (validator.w3.org).

Liens internes

Ajouter au début du document fortoc.html une table des matières constituée de liens internes vers les différents paragraphes.
Un aperçu du résultat est visible dans ce fichier.
Valider cette page (validator.w3.org).

Tableaux

Considérer cet emploi du temps au format PDF à refaire au format xhtml. Pour créer des cellules couvrant plusieurs lignes ou colonnes, ne pas oublier d'utiliser les attributs rowspan et colspan.
Les plus lents pourront se contenter de concevoir seulement les deux premières lignes et la journée du mardi.

Valider cette page (validator.w3.org).

Frames On désire créer une page composée de 2 zones (frames). La zone de gauche contiendra la liste des liens vers des images se trouvant dans un répertoire. La zone de droite affichera l'image correspondante.

Créer le répertoire images et placer quelques images dedans.
Créer un fichier exoframe.html contenant les deux zones.
Pour la zone de gauche, créer un fichier toc.html comportant la liste des liens vers les images.

Pour valider cette page, il faudra utiliser une DTD adaptée aux frames :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Images cliquables / réactives

A partir d'une carte de France des départements, faire en sorte que l'on puisse cliquer sur les départements pour aller sur leur site web. Faire également en sorte que le nom du département apparaisse lorsque l'on immobilise la souris sur la zone correspondante. On se contentera de quelques départements comme :

06 - les alpes maritimes : http://www.cg06.fr/
25 - le doubs : http://www.doubs.fr/
38 - l'isère : http://www.cg38.fr/
59 - le nord : http://www.cg59.fr/

Pour trouver les coordonnées, il faudra utiliser un logiciel d'édition d'image (par exemple gimp). On trouvera la carte de france ici.
Pour cet exercice, il faut utiliser la DTD xhtml 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Comment ranger plus intelligemment ses exercices de TP

Dans le répertoire technoWeb, placer un fichier index.html (fichier lu par défaut) qui contiendra des liens vers chacun des TP : xhtml, css, php.
Toujours dans le répertoire technoWeb, créer un sous répertoire xhtml dans lequel on mettra ses exercices du premier TP.
Dans le fichier index.html de technoWeb, placer un lien hypertexte vers ce répertoire xhtml.
Dans le répertoire xhtml, créer un autre fichier index.html qui contiendra des liens vers les réponses aux questions précédentes ainsi qu'un lien de retour vers le répertoire technoWeb.

Exercices sur xhtml TP 1 - xhtml, éléments de base - ÉNONCÉ -

Exercices sur xhtml
TP 1 - xhtml, éléments de base
- ÉNONCÉ -