site de Fabien Torre, université de Lille


Travaux pratiques sur le langage HTML

Exercices sur le langage HTML.

[ 1 ] Construction d'un mini-site HTML complet

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

Pour cela, vous allez développer vos propres pages HTML comportant au minimum quatre pages, par exemple : une page d'accueil, un curriculum vitæ, une page reprenant vos notes de cours et une page sur le sujet de votre choix. Ces pages doivent être liées par un mode de navigation à définir.

Vous utiliserez un éditeur de texte quelconque pour saisir le code HTML, un navigateur et son bouton Recharger pour visualiser le résultat à chaque étape : pensez à enregistrer votre fichier HTML à chaque fois pour que les modifications soient effectives.

Nous visons tout d'abord des documents HTML 4.01 (infractions autorisées aux règles XML) et transitional (on autorise les balises de mise en forme).

Structure générale

  1. Taper le code HTML d'une page ne contenant qu'un titre dans l'en-tête et quelques mots dans le corps.
  2. 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.

Contenu

  1. Faire apparaître le titre de la page dans le corps du document.
  2. Compléter le texte de la page en utilisant les différentes balises typographiques vues pendant le cours sur HTML.
  3. Ajouter un lien vers le site de l'université de Lille 3.
  4. Ajouter un lien pour que l'on puisse vous envoyer un mail depuis cette page.
  5. Ajouter quelques images, les choisir sur un site d'images libres de droit.
  6. Faire porter un lien par l'une de ces images.
  7. Créer une nouvelle page HTML pour y placer votre curriculum vitæ et ajouter un lien vers celui-ci depuis votre page principale.
  8. Cette nouvelle page devra contenir au minimum les sections suivantes : état civil, formation, expérience professionnelle, compétences et divers.
  9. Utiliser les différents types de listes et autres balises structurantes vues en cours pour remplir ces sections.
  10. Ajouter un tableau centré (en imaginant un contenu pertinent ou en suivant l'exercice ci-dessous sur les tableaux).
  11. Créer des liens internes (ancres) depuis le haut de la page vers chacune de ces sections.
  12. Utiliser les entités pour les caractères spéciaux (comme par exemple les lettres majuscules accentuées).

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

  1. Enregistrer les différentes pages en UTF8 et préciser ce choix dans les entêtes.
  2. Ajouter des métadonnées : mots-clefs, description et auteur.
  3. Ajouter également un élément link pour préciser la relation entre deux documents.
  4. 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.
  5. 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.

Attention, les questions suivantes nécessitent que les pages à tester soient effectivement en ligne sur le web... si vous avez des outils comparables qui lèvent cette contrainte, merci de me le faire savoir.

  1. Utiliser un vérifieur de liens.
  2. Tester automatiquent l'accessibilité de vos pages.
  3. Essayer un extracteur de métadonnées.
  4. Tester un extracteur d'adresses mail.

[ 2 ] Tableaux HTML

Tableau simple

  1. 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%).

Tableau complexe et mise en forme

  1. Définir des tableaux plus complexes, par exemple pour la section état civil de votre curriculum vitæ. Utiliser toutes les possibilités vues en cours : définir des cases d'en-tête et des cases de données, changer la couleur de fond des cases, étendre certaines cases sur plusieurs lignes ou plusieurs colonnes, ajuster la taille du tableau et les alignements des cases.
  2. Utiliser un tableau pour positionner un menu ou une photo à la gauche d'un texte.

[ 3 ] 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.
  • Discuter des différentes modes des navigateurs.

[ 4 ] HTML5 et microdata

  1. Débuter une page HTML5 avec une entête comprenant les déclarations de DOCTYPE, d'encodage et de feuille de style.
  2. Ajouter une structure à ce document en utilisant les nouvelles balises sémantiques de HTML5.
  3. 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).
  4. Valider votre page HTML5 auprès du W3C.
  5. Utiliser l'outil de test de Google pour observer l'extraction de vos métadonnées et un rendu possible.

[ 5 ] Images réactives

Rendre réactive une image

  1. Récupérer une image quelconque, par exemple l'une de celles-ci :
    trois figures géométriques carte de France figures bizarres pièce à trois portes circuit électronique
  2. Sauver cette image dans le répertoire de travail et l'inclure dans un document HTML.
  3. 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).
  4. Définir des zones réactives et associer celles-ci à des adresses quelconques en utilisant les balises et attributs vus en cours.
  5. 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.

  1. 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.
  2. Écrire dans une nouvelle page le code HTML correspondant à ce questionnaire.
  3. Mettre en forme le formulaire en utilisant un tableau HTML.
  4. 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.

  1. 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.
  2. Récupérer l'image suivante représentant une petite barre.
  3. 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).

[ 7 ] Réalisation SVG

[ 8 ] Réalisation MathML

  • Reprendre ce fichier vous montrant la syntaxe MathML et les commandes de base.
  • Réaliser des fichiers MathML montrant au mieux les possibilités de ce langage.
  • Rechercher sur le web les éléments MathML dont vous avez besoin, en particulier consulter la recommandation du W3C concernant ce format.
Fabien Torre Valid HTML5! Valid CSS!
Accueil > Enseignement > En pratique > Documents numériques > HTML
(contenu mis à jour )
site de Fabien Torre, université de Lille

Description

Survoler un lien de navigation pour lire sa description ici...