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

Avant toute chose

Ce TD nous occupera toute la journée de lundi.

Resources:

Pour commencer

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. Vos pouvez le partager avec moi (CSappliWeb2022) pour que je puisse vous aider le cas échéant. Vous pouvez bien évidemment aussi le partager avec qui vous voulez...

À la fin de la journée, donnez-le moi sur Edunao

  • Soit en l'exportant en ".zip" et en le déposant directement
  • Soit simplement en me donnant le lien

À 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
    • une carte (positionnée où vous voulez -- à terme on mettra un pictogramme météo dessus)
    • des infos météo variées :
      • température
      • couverture nuageuse
      • vitesse du vent
      • visibilité
    • Des éphémérides :
      • Lever/coucher de la lune, du soleil
      • Durée du jour
      • Phases de la lune
    • Ces différents aspects seront séparés par des titres et sous-titres de sections appropriés.
    • 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 et de checkboxes. Ces checkboxes peuvent elles-mêmes être mises dans d'autres balises, par exemple des descriptions, des listes, des paragraphes...
    • Laissez libre cours à votre imagination: par exemple, vous pouvez en plus proposer de choisir la langue utilisée, les unités de vitesses et de degrés utilisées...
    • É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. Vous pouvez mettre votre photo, une courte bio, 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
    • Vous pouvez faire plusieurs feuilles de style et les activer séparément pour les essayer.
  • 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)

Rendu

  • Exportez le repl en zip et déposez-le sur Edunao
    • Ou donnez sur Edunao le lien vers votre Repl.it

Annexe

Exemples d'infos à placer

  • Nom : Gif-sur-Yvette
  • Carte : http://www.cartes-de-france.fr/carte/carte_de_france_relief.gif
  • température : 12 degrés
  • couverture nuageuse : gris foncé
  • vitesse du vent : 40 km/h avec pointes à 80 km/h
  • visibilité : 5 mètres
  • Lever/coucher de la lune : 5h00 - 13h00, du soleil : 10h00-16h00
  • Durée du jour : 6 heures