CentraleSupélec — Département informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
TD HTML&CSS

L'objectif de cette série de 3 TDs est de construire une petite application web. Le premier TD (celui que vous lisez en ce moment) se concentre sur l'aspect HTML et CSS. Le deuxième traite de Javascript sur le navigateur, tandis que le dernier s'intéresse à NodeJS.

Donc, sur cette feuille de TD, on va faire un petit site statique qui va servir de base à l'application.

Avant toute chose

Resources:

Remarques

N'hésitez pas à discuter ! Si je vous demande de me rendre quelque chose d'individuel, cela ne signifie pas qu'il vous est interdit d'échanger des idées...

Un site internet statique

Un fichier HTML se concentre uniquement sur le fond, sur la structure. Nous nous occuperons de la mise en forme ensuite. Ainsi le titre général et les différentes rubriques devraient être représentées par des balises <section>, <h1>, <h2> etc. Les listes devraient être introduites par <ul>, <ol>, etc. Un squelette de page web est donné en annexe.

Outre le tuto, vous trouverez la liste des éléments HTML5 sur le site w3schools. Et dans le menu de gauche vous avez la liste de tous les tags HTML en général.

À noter

  • On accède au code source d'une page internet à l'aide de clic droit > code source, ou encore Ctrl+U.
  • Pour ouvrir une page en local (c'est à dire sur le disque dur, pas sur internet), utilisez Ctrl+O, ou Fichier > Ouvrir.
  • Sur Firefox, la barre de menu est par défaut cachée: utilisez Alt pour la faire apparaître.

Mise en route

Clonez le projet vide qui se trouve ici.

À faire

Ici nous allons commencer une application web pour afficher la météo. Si vous ne ferez probablement pas fortune avec, elle nous permettra néanmoins de manipuler quelques aspects du web et leurs technologies associées.

On souhaite dans un premier temps fabriquer un site statique utilisant du HTML et du CSS. Le site sera retravaillé aux cours des TDs qui suivront. On veut pour ce site 3 pages:

  1. La page principale du site, celle qui contient effectivement les infos météo:
    • le nom d'une ville
    • des infos météo variées :
      • température
      • couverture nuageuse
      • vitesse du vent
      • visibilité
    • Utilisez des balises appropriées!
    • Voir en annexe pour un exemple de contenu
  2. Une page de configuration, permettant de sélectionner les infos affichés. Cette page auxiliaire permettra à terme de configurer ce qui est affiché sur la page principale.
    • Cela sera fait à l'aide d'un formulaire avec des checkboxes et des "radio button". Ces éléments peuvent eux-mêmes être mis dans d'autres balises, par exemple des descriptions, des listes, des paragraphes...
    • On veut pouvoir
      • Changer le style de la page (sombre ou clair)
      • Sélectionner quels éléments parmi "température", "couverture nuageuse" et "visibilité" serons affichés/cachés. La page de configuration doit par exemple permettre de ne montrer QUE la température, ou la températoire et la vitesse du vent, mais pas plus...
    • Évidemment, ici, comme le site est statique le formulaire ne fera rien. L'objectif est pour le moment de réfléchir à comment le présenter. À terme, ces informations seront stockées et le navigateur n'affichera que celle qui ont été sélectionnées.
  3. Une page de contact avec les infos humaines, juridiques et techniques associées au site. Évidemment, c'est un mock-up donc mettez n'importe quoi pour remplir ("CentraleSupélec Inc", "Les Métérologues Associés", etc).

La liaison entre les pages se fera au choix: par onglet, par lien sur le coté, etc. Dans tous les cas l'encodage en HTML se fera avec une liste et des balises de liens. La présentation graphique sera réalisée en CSS.

Important

  • On veut des pages web ACCESSIBLE, qui utilisent les balises à bon escient.
  • PAS DE TABLEAUX POUR LES INFOS ! Mais plutôt des balises de descriptions <dl>...</dl>.
  • Le site devra avoir une certaine cohérence dans sa présentation. Donc en particulier, si vous avez décider de placer les liens vers les autres pages du site en haut, il faudra faire de même partout.
  • Vérifiez la conformité des pages aux standards à l'aide du validateur HTML du W3C. Corrigez-la tant qu'elle n'est pas valide.

Mise en forme grâce aux feuilles de styles CSS

Les feuilles de style CSS permettent de spécifier finement l'apparence des pages web HTML. Nous allons utiliser les CSS pour donner un aspect sympathique à votre site. Nous ne nous intéressons plus du tout au contenu ici, juste à l'apparence.

Comme pour HTML, en plus du tuto vous pouvez consulter le site w3schools qui est assez complet sur les tags CSS: ils sont classés par type de balises, et vous avez la version CSS 2 et les nouveautés introduites dans la version 3. Mais bien sûr tout autre référence que vous trouverez en ligne sera très bien.

Au préalable

À faire

  • Créez une feuille de style CSS pour mettre en forme votre site.
    • Il est conseillé de commencer par une feuille très simple, que vous améliorerez ensuite.
    • Pour des raisons de cohérence visuelle, utilisez la même feuille de style pour toutes les pages du site.
    • Par contre, si vous avez besoin de quelque de spécifique pour une page en particulier, n'hésitez pas à adjoindre une deuxième feuille qui modifiera au cas par cas le comportement par défaut.
    • Par exemple pour le CSS du formulaire qui contient les options, utilisez une feuille de style séparée
    • On veut DEUX feuilles de style: une avec un fond plutôt "clair", et une avec un fond plutôt "sombre".
  • Liez les pages webs à leurs feuilles de style, de façon à ce que le style s'applique.

Smartphone et Desktop

  • Adaptez le CSS pour prendre en compte à la fois
    • un navigateur sur un ordinateur
    • un navigateur sur un smartphone
  • En particulier
    • ajustez les marges pour la version smartphone: une présentation compacte est en général préférable
    • utilisez @media pour gérer les grands écrans, les smartphones en version portrait et en version landscape
    • sur une application pour smartphone, les liens de navigation se trouvent souvent en cliquant sur un sur un bouton... On peut le réaliser
      • soit à la main, avec du javascript (on y reviendra !)
      • soit préprogrammé pour vous, avec une librairie (par exemple bootstrap)

Annexe

Exemples d'infos à placer

  • Nom : Gif-sur-Yvette
  • température : 12 degrés
  • couverture nuageuse : gris foncé
  • vitesse du vent : 40 km/h avec pointes à 80 km/h
  • visibilité : 5 mètres