Un document Web et sa feuille de style

Nous allons faires quelques petits exercices qui permettront d'illuster ce que nous avons vu ensemble en cours.

N'oubliez pas de valider vos documents avec les outils en ligne mis à disposition par le W3C :

Texte

Exercice 1

Convertissez le document texte loremipsum.txt en HTML en prenant soin de hiérarchiser les titres. Le titre du document est donc un titre de niveau 1. Les titres de niveau 2 sont ceux précédés d'un numéro et les titres de niveaux 3 commencent par une *. Le titre du document est centré et en petites capitales. Les titres de niveau 2 sont soulignés. Les titres de niveau 3 sont en italiques. Vous pouvez essayer des effets overline, underline ou les deux en même temps et garder ce que vous trouverez joli.

Les retours à la ligne sont synonymes de nouveau paragraphe. La première ligne de chaque paragraphe doit être légèement décalée (je vous laisse fixer la valeur).

Exercice 2

Convertissez le document texte LeMonde.txt en HTML en utilisant des éléments de structuration et d'annotation (q, cite, time, ...).

Expérimentez les différentes propriétés CSS relatives au texte. Enfin, incorporez une police de caractères de votre choix dans votre feuille de style et observez les conséquences sur le chargement du document Web grâce aux outils de développement du navigateur. Voici quelques liens où trouver des polices :

Listes

Nous allons maintenant générer des listes imbriquées, numérotées ou non. À vous de jouer !

Exercice 3

Concevez le code HTML et CSS afin de reproduire fidèlement l'exemple ci-dessous. exemple de listes imbriquées

Liens

Exercice 4

Ajoutez des liens hypertextes dans le document issu de loremipsum.txt. Ajoutez un menu de navigation permettant d'accéder directement à tous les titres et sous-titres du fichier. Puis ajoutez un lien au niveau de chaque titre permettant de revenir au menu de navigation

Tables

Exercice 5

À l'aide des éléments HTML et des propriétés CSS liés aux tableaux, reproduisez l'exemple ci-dessous :

tableau

Exercice 6

À l'aide des éléments HTML et des propriétés CSS liés aux tableaux, convertissez le fichier julo_pollution_lumineuse.csv pour l'insérer dans une page Web.

Exercice 7

Créer une carte de zones cliquables (cercle, rectangle et polygone) autour des différents icones des réseaux sociaux l'image ci-desous et faire pointer les liens vers leur site respectif. exemple de listes imbriquées

Exercice 8

Reprenez l'exercice 1. Ajouter des sélecteurs CSS pour que :

Exercice 9

Concevoir un document HTML5 afin de reproduire le formulaire ci-dessous. Vous pouvez le compléter avec des zones de texte multi-lignes et des listes à choix multiples.

exemple de listes imbriquées

Exercice 10

Écrire un programme JavaScript qui remplit un tableau HTML avec les premières valeurs de la suite de Fibonacci. On demandera à l'utilisateur combien de valeurs il souhaite voir s'afficher. Ajoutez des éléments à votre feuille de style pour que l'affichage ressemble à ce qui suit :

Fibonacci

Exercice 11

Concevoir un programme JavaScript qui affiche l'heure au format HH:MM:SS. L'affichage de l'heure sera mis à jour toutes les secondes. Pour plus de détails, consulter la documentation de l'objet JavaScript Date et la documentation de la méthode window.setInterval.

Les événements

Dans un document Web bien construit, le fond est pris en charge par le code HTML, la forme par la feuille de style CSS et les comportements dynamiques par le JavaScript. L'utilisateur interagit avec une page par l'entremise d'événements.

En général, les événements sont reliés à l'interface utilisateur du navigateur via un élément particulier du document, comme par exemple les déplacements de souris, les actions sur des boutons ou des touches du clavier, les réponses à des formulaires... D'autres événements sont activés en réponse à une action spécifique du navigateur (chargement d'un document par exemple).

Le DOM fournit des méthodes pour capturer les événements et lancer une action en réponse. Il définit également un objet event, dont les propriétés permettent d'accéder à des informations spécifiques (par exemple, quelle touche du clavier a été activée...). Il y a deux manières d'appeler un événements.

Par l'attribut d'un élément HTML

On peut accéder aux événements par un simple appel à un attribut HTML décrivant la nature de l'événement :

Voici un exemple qui permet d'ouvrir une fenêtre de dialogue lors du click sur la boîte du div :

Exemple de contenu avec un événement click.

L'utilisation des gestionnaires d'événements par l'intermédiaire des attributs HTML est en général à éviter, car elle va à l'encontre de la sépararation du comportement et de la structure.

Exercice 12

Reproduire un élément qui aurait cette allure :

Cliquez ici !

Et à l'aide de l'attribut onclick, appeler une fonction javascript qui fera changer les couleurs de fond et de police de l'élément.

Pour ajouter un gestionnaire d'événement à un élément, il suffit de définir une fonction comme propriété de l'objet JavaScript correspondant. Par exemple, si on reprend l'exemple précédent, on a :

Exemple de contenu avec un événement click.

Exercice 13

Reproduire un élément qui aurait cette allure :

Quelques éléments de formulaires

Par "listener" d'événements

Le modèle d'événement DOM niveau 2 définit deux méthodes, addEventListener et removeEventListener, qui permettent d'attacher ou de détacher un gestionnaire d'événement d'un nœud :

void addEventListener (in DOMString type, in EventListener listener, in boolean useCapture);
void removeEventListener (in DOMString type, in EventListener listener, in boolean useCapture);
       

Exercice 14

L'objectif est de réaliser un programme qui affiche un calendrier du mois d'une année donnée.

Calendrier
  1. Écrire une fonction isLeapYear(year) qui retourne true si l'année est bissextile et false sinon.
    Indication : une année est bissextile si elle est multiple de 4 et pas de 100, ou multiple de 400.
  2. Écrire une fonction numberOfDaysInMonth(month, year) qui retourne le nombre de jours dans le mois month de l'année year.
  3. Écrire une fonction calendar(month, year) qui retourne une chaîne de caractères contenant le code HTML d'un tableau.
    • Une entête pour les 7 jours de la semaine
    • Un corps pour les numéros des jours du mois
  4. Écrire une fonction updateCalendar(month, year) qui affiche le calendrier. L'appel de la fonction sera associé à l'événement onChange de chacun des éléments de type select.