Travaux pratiques sur le langage HTML

Exercices sur le langage HTML : utilisation des différentes balises, tableaux, doctype, html5, formulaires, images réactives, etc.

[ 1 ] Premières pages

L'objectif est de se familiariser avec toutes les balises HTML vues en cours.

Pour cela, des fichiers purement textuels vous sont proposés, à vous de les structurer, de les mettre en forme et de concevoir une navigation entre eux.

Compléter le fichier choisi pour que son contenu textuel soit maintenant le corps du document html, l'en-tête doit elle contenir au minimum le titre de la page.
Définir les différentes couleurs du document à l'aide des attributs de la balise BODY. Il est possible d'utiliser des sites aidant à des choix de couleurs harmonieux.
Faire apparaître le titre de la page dans le corps du document.
Habiller le texte de la page en utilisant les différentes possibilités vues pendant le cours sur HTML : entités pour les caractères spéciaux (comme par exemple les lettres majuscules accentuées), balises typographiques, balises de titres, balises de listes, etc.
Ajouter des liens vers l'extérieur du site, des liens entre les pages et des liens internes (ancres) à chaque page.
Intégrer des images (les choisir sur un site d'images libres de droit) et faire porter un lien par l'une de ces images.
Construire un tableau dans le document si le contenu de celui-ci s'y prête, sinon en suivant l'exercice ci-dessous sur les tableaux.

[ 2 ] Doctype etc.

Entêtes (codage des caractères, métadonnées, DOCTYPE) et validations automatiques

Notons que dans l'exercice précédent nous avons visé des documents HTML 4.01 (infractions autorisées aux règles XML) et transitional (utilisation permise des balises de mise en forme).

Enregistrer les différentes pages en UTF8 et préciser ce choix dans les entêtes.
Ajouter des métadonnées : mots-clefs, description et auteur.
Ajouter également un élément link pour préciser la relation entre deux documents.
Ajouter un DOCTYPE HTML 4.01 transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Valider vos pages HTML auprès du W3C vis-à vis de ce DOCTYPE.
Faire une copie de votre page principale et modifier le DOCTYPE au profit d'un XHTML (respect des règles XML) transitional (on autorise les balises de mise en forme).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Corriger les erreurs jusqu'à obtenir à nouveau la validation du W3C.

XHTML : HTML ou XML ?

Reprendre votre document XHTML valide.
Lui ajouter une ligne <?xml version="1.0" ?> et l'enregistrer avec une extension .xml.
Provoquer une erreur de syntaxe XML et observer le résultat dans un navigateur.

[ 3 ] HTML5 et microdata

Débuter une page HTML5 avec une entête comprenant les déclarations de DOCTYPE, d'encodage et de feuille de style.
Ajouter une structure à ce document en utilisant les nouvelles balises sémantiques de HTML5.
Observer sur le site schema.org les différents vocabulaires proposés, puis ajouter à votre page les microdata nécessaires pour décrire une personne avec une adresse et une évaluation (d'un film, d'un restaurant, peu importe).
Valider votre page HTML5 auprès du W3C.
Utiliser l'outil de test de Google pour observer l'extraction de vos métadonnées et un rendu possible.

[ 4 ] Tableaux HTML

Tableau simple

Utiliser un tableau pour mettre en forme les statistiques suivantes correspondant aux outils de recherche utilisés sur le web en janvier 2004 : Google (62.9%), Yahoo (11.5%), Wanadoo (9.4%), MSN (4.3%), Aol (4.3%), Free (2.2%), Lycos (1.1%), Altavista (0.8%), Tiscali (0.8%) et Club Internet (0.6%).

[ 5 ] Images réactives

Rendre réactive une image

Récupérer une image quelconque, par exemple l'une de celles-ci :
Sauver cette image dans le répertoire de travail et l'inclure dans un document HTML.
Obtenir la taille de l'image en l'ouvrant seule dans le navigateur (les dimensions de l'image apparaissent alors dans le bandeau du navigateur).
Définir des zones réactives et associer celles-ci à des adresses quelconques en utilisant les balises et attributs vus en cours.
Vérifier le bon fonctionnement de cette image réactive.

[ 6 ] Formulaires

Les questions

Dans cet exercice, le but est de construire et de mettre en page un formulaire en HTML.

Choisir un thème et définir quelques questions sur ce thème. Il ne s'agit pas ici de proposer des questions pertinentes mais simplement d'utiliser tous les types d'entrée connus de HTML : textes (en ligne ou en région), boutons (à choix unique ou multiple) et listes.
Écrire dans une nouvelle page le code HTML correspondant à ce questionnaire.
Mettre en forme le formulaire en utilisant CSS.
Lier le questionnaire à un programme de traitement des réponses.

Les réponses

Il s'agit maintenant de mettre en forme le résultat d'un tel questionnaire.

Sélectionner dans le sondage, les questions de type bouton et de celles de type liste. Imaginer le nombre de réponses obtenues pour chacune des possibilités de réponse à ces questions.
Récupérer l'image suivante représentant une petite barre.
Utiliser cette image pour présenter les résultats du sondage (cette barre mise bout à bout plusieurs fois peut permettre de traduire le nombre de personnes ayant donné la même réponse).

site de Fabien Torre