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

Avant toute chose

Ce TD nous occupera les deux premières séances.

Potassez les tutos HTML et CSS.

Le web sous un autre angle

Avant de vous lancer dans la création de pages web, il est bon de prendre un autre regard sur l'internet en utilisant un type de browser dont vous n'avez peut-être pas l'habitude : le browser texte. L'utiliser un peu vous donnera une idée sur ce que l'on entend par "page structurée".

  1. Installez le browser texte lynx:
  2. Une fois installé, lancez le programme.
    • Les commandes se font au clavier.
    • Le logiciel vous demande souvent confirmation pour les cookies (en bas) et ne fera rien si vous ne répondez pas. Dites "A" pour accepter toujours.
  3. Allez visiter vos sites préférés : retrouvez-vous vos petits ?
  4. Si vous voulez des idées:
    • Allez sur google et essayez de faire une recherche.
    • Allez sur une page de présentation de produit, par exemple la page de Coca-Cola France, et comparez avec la version "usuelle".
    • Allez sur le site de la fnac et essayer d'acheter un CD de Bob Marley.
    • Comment se comporte le site de CentraleSupélec ? Le site de l'école Centrale ? Celui de Supélec ?
    • Et ce tuto ?

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éneral.

À 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 dûr, 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.

Et enfin

  • Pour jouer avec HTML et CSS de façon rapide, vous pouvez utiliser JSbin.
  • Mais notez que vous aurez éventuellement besoin de visualiser votre fichier directement, donc à terme utiliser un éditeur de texte "usuel".

À 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
    • Un descriptif succinct de la ville (pour meubler)
    • une carte (positionnée où vous voulez)
    • 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 auxilliaire 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.
  • Ouvrez-là à l'aide du navigateur texte lynx : est-elle lisible ?

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

  1. 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éparemment pour les essayer.
  2. Liez les pages webs à leurs feuilles de style, de façon à ce que le style s'applique.
  3. Admirez le résultat dans votre navigateur.
  4. Vérifiez la conformité de votre feuille de style avec les normes en utilisant le validateur CSS du W3C.
  5. Maintenant, sans changer le corps de la page html, faites une autre feuille de style CSS pour un rendu complêtement différent.

Note

Vous pouvez incorporer plusieurs feuilles de styles CSS dans un même document. Cela vous permet de séparer par exemple les couleurs, les polices de caractères, la disposition et les marges...

Vous avez fini ?

Si c'est le cas, contrôlez avec moi et n'hésitez pas, passez au TD 2 sur javascript...

Annexe

squelette de page web HTML

<!DOCTYPE html>

<html>
   <head>
      <meta charset="utf-8" />
      <title>Titre du document</title>
   </head>

   <body>

   </body>
</html>

Exemples d'infos à placer

  • Nom : Gif-sur-Yvette
  • Descriptif : Gif-sur-Yvette (prononcé [ ʒif syʁ ivɛt̪] ) est une commune française située à vingt-quatre kilomètres au sud-ouest de Paris dans le département de l’Essonne en région Île-de-France. Elle est le chef-lieu du canton de Gif-sur-Yvette. Du village celte installé sur le plateau du Moulon au VIe siècle av. J.-C. à l’abbaye bénédictine fondée au XIIe siècle, Gif fut très tôt un site agricole et spirituel important du Hurepoix. Implantée dans une vallée de Chevreuse verdoyante et reliée dès le milieu du XIXe siècle à la capitale par le chemin de fer, la commune devint un lieu de villégiature pour les bourgeois et les artistes, tels Juliette Adam, Fernand Léger ou le duc de Windsor. La seconde moitié du XXe siècle vit l’évolution rapide de la commune avec l’implantation d’importants centres de recherche et de formation scientifique, au nombre desquels le CNRS ou Supélec, et le lotissement « à l’américaine » du plateau sud avec la création du nouveau quartier de Chevry, multipliant par trois sa population. Celle-ci devrait encore s'accroître dans les années à venir avec la réalisation d'une opération d'aménagement dans le quartier de Moulon, qui prévoit la construction de logements et de grandes écoles dans le cadre du projet de pôle technologique Paris-Saclay. Ses habitants sont appelés les Giffois.
  • 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 metres
  • Lever/coucher de la lune : 5h00 - 13h00, du soleil : 10h00-16h00
  • Durée du jour : 6 heures