Bases du web : HTML et CSS

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Bases du web : HTML et CSS

Notes de cours

  • Le web, c’est quoi et comment ça marche ?
    • Rappels sur Internet
    • Le World Wide Web : définition et principes de base
    • Les constituants principaux du web : HTTP, URL, HTML
  • HTML : la base du web
    • Balisage et structure de documents
    • Les règles de HTML
    • Notions d’hypertexte
    • Notions d’accessibilité
    • Les éléments de structuration d’HTML5
  • Introduction à CSS
    • Propriétés de style
    • Règles CSS
    • Intérêt des feuilles de style
    • Cascade et héritage
    • Classes et identifiants
    • Groupes et combinaison de sélecteurs

Travail personnel

Objectifs

Cette première séance de TP est essentielle puisque l'on met en place l'environnement de travail que l'on utilisera tout au long des TP, et que l'on aborde les bases du développement web avec la création et la validation de pages HTML et CSS.

Réalisez avec attention la mise en place de votre environnement de travail : le temps passé sera largement gagné ensuite en temps de développement grâce aux fonctionnalités des outils proposés.

Outre cette mise en place, les exercices ont pour objectif de voir ou revoir les bases de HTML et de CSS, avec une difficulté graduelle, en particulier pour les premiers exercices. Le TP est très guidé au début, pour garantir que tout le monde comprenne les bases. Les exercices sont plus ou moins en auto-apprentissage ; l'utilisation des ressources du web pour apprendre de nouvelles techniques est en effet l'outil fondamental du développeur web !

Exercice 1 — Mise en place de l’environnement de travail : Hello world

Fonctionnement de l'espace personnel

Le département met à votre disposition un espace personnel sur le web. Son fonctionnement est expliqué sur cette page de la FAQ du département, de manière un peu technique. Ci-dessous, un résumé très incomplet, mais qui se veut plus accessible pour les non-initié·e·s.

Votre espace personnel se divise en deux parties :

  • une partie publique, à l'adresse https://NUMETU.users.info.unicaen.fr/, accessible par le monde entier : vous pouvez y héberger des pages personnelles.
  • une partie privée, à l'adresse https://dev-NUMETU.users.info.unicaen.fr/, accessible uniquement par etupass/persopass (sauf à l'intérieur de l'université). Cet espace est dédié au développement : il est recommandé d'y faire les TP.

Attention : tout ce qui est publié dans votre espace personnel l'est sous votre entière responsabilité.

Cet espace personnel est hébergé sur un serveur web. Pour y publier des pages, il faut les transférer sur le serveur. Pour cela, plusieurs solutions sont possibles : utiliser un client SFTP ou monter l'espace personnel sur votre machine. Ces deux possibilités sont détaillées dans la section « Connexion au serveur » de la FAQ : allez la lire.

Sur le serveur, votre espace est dans le répertoire /users/NUMETU/. Il contient quatre répertoires :

  • www-prod correspond à la partie publique de votre site,
  • www-dev correspond à la partie privée de votre site,
  • private est inaccessible depuis le web (on y met des fichiers contenant des mots de passe, par exemple),
  • tmp contient les fichiers temporaires (upload).

Pour information, votre espace personnel a une interface web d'administration, à l'adresse https://NUMETU.users.info.unicaen.fr/myadmin/. Pour finir, la FAQ contient pas mal d'autres informations, notamment techniques ; assurez-vous de l'avoir consultée avant de poser des questions.

Questions

  1. Accédez au répertoire www-prod de votre espace personnel. Il devrait contenir un fichier index.html.
  2. Ouvrez-le avec votre éditeur favori (si vous ne savez pas lequel choisir, prenez Geany, simple et relativement complet et léger).
  3. Effacez le contenu et écrivez n'importe quoi, par exemple Hello world. Enregistrez.
  4. Ouvrez Firefox (on n'utilisera que Firefox dans ce module) et rendez vous à l'URL https://NUMETU.users.info.unicaen.fr/. Vous devriez voir ce que vous avez écrit dans le fichier. Si ce n'est pas le cas, demander de l'aide.
  5. Essayer d'utiliser des balises HTML dans le fichier, comme h1, em, strong, p, etc. (liste de tous les éléments HTML5) et regarder le résultat.
  6. La page ainsi créée n'est pas valide. Complétez-la en ajoutant les éléments nécessaires (voir « page minimale » dans le cours).
  7. Vérifier que votre page est valide en utilisant le validateur du W3C ou son clone sur le serveur de l'université (qui supporte plus de charge). Modifiez-la jusqu'à ce qu'elle le soit.
  8. Dans Firefox, expérimenter le raccourci « Control-u » pour afficher le code source de la page. Essayer sur d'autres pages du web. Cette fonction est également accessible dans le menu contextuel (clic droit).

Dans la suite, pour tous les TP, on utilisera le répertoire www-dev : pas besoin de rendre publiques vos expérimentations !

  1. Ouvrez le répertoire www-dev (qui devrait être vide), et créez un fichier squelette.html qui contient un squelette de page HTML5 vierge. Faites attention à ce que l'encodage du fichier soit UTF-8 (vérifiez dans les préférences de votre éditeur). Ce squelette est à conserver à portée de main ou à intégrer à une fonction dans votre éditeur : par la suite, il est important de pouvoir créer une page web vierge très rapidement.
  2. Dans le navigateur, allez à l'URL https://dev-NUMETU.users.info.unicaen.fr/. Comme il n'y a pas de fichier index.html dans www-dev, le serveur web devrait vous afficher le contenu du répertoire.
  3. Vérifiez que votre page-squelette est bien valide, puis créez un répertoire pour ce TP, par exemple tp1.

Attention à bien organiser votre serveur web, et attention aussi à ne pas y mettre tous vos fichiers, mais seulement ceux qui ont des raisons d'y être !

Exercice 2 — Le web, Tim et Mosaic

Un corrigé de la partie HTML de cet exercice est disponible (archive).

On vous fournit une image d'une page web, avec les styles de base du navigateur.

Capture d'écran de la page
Capture d'écran de la page

Écrire en HTML5 valide le code permettant d'obtenir cette page. On utilisera les balises a, h1, h2, img, li, p et ul. Les images, le modèle et le texte peuvent être récupérés dans cette archive.

NB : l'apparence (polices, tailles, détails…) d'une page en pur HTML peut varier fortement suivant le navigateur et le système d'exploitation. L'image fournie représente le rendu de Firefox sur une machine Ubuntu du département.

Appliquer ensuite les styles suivants, en utilisant une balise <style> (pas un attribut !) :

  1. mettre les titres de section en bleu ;
  2. mettre le titre principal en italique ;
  3. mettre les liens en gras ;
  4. mettre des puces carrées à la place des puces rondes dans la liste ;
  5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

  1. augmenter la taille de la police du titre principal ;
  2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
  3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 3 — Utilisation de l’inspecteur de Firefox

Vous trouverez sur cette page quelques explications sur les réponses aux questions.

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

  1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Examiner l'élément » (ou Inspect Element). Une fenêtre apparaît, avec une partie HTML et une partie CSS.
  2. Décocher des propriétés CSS et observer l'effet.
  3. Modifier des propriétés CSS et observer l'effet.
  4. Cliquer sur la flèche en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
  5. Aller voir l'onglet « Calculé » au-dessus de la partie CSS, en particulier la section « modèle de boîte ».

Ce qui est particulièrement important, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs.

  1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »).
  2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
  3. Inspecter le footer : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 4 — Manipulation des balises HTML et reproduction d’un modèle

Inspiré d’un exercice d’Hervé Le Crosnier

Un corrigé de cet exercice est disponible (HTML seul ; avec CSS ; archive). Attention, le rendu n’est pas forcément exactement le même sous Chrome que sous Firefox.

On vous fournit deux images de la même page web : la première est est la version avec les styles de base du navigateur, tandis que pour la seconde on a appliqué une feuille de style. Les images de Marylin et Tom, les modèles et le texte sont disponibles dans cette archive.

Écrire en HTML5 valide, sans CSS, le code permettant d'obtenir le premier modèle. On s'efforcera d'utiliser des éléments ayant une sémantique correcte. Il peut être utile de jeter un œil à la 2e version pour repérer les parties qui auront besoin d’être stylées, mais attention : interdiction d'utiliser les éléments div et span, et les attributs id et class ! Ne pas hésiter à s'inspirer de la liste des éléments HTML.

Ajouter ensuite une feuille de style en essayant d'obtenir le second modèle, sans changer le corps du HTML. Attention, si le HTML a été fait correctement, la seule modification nécessaire est l'ajout de la feuille de style ! Il est toujours interdit d'utiliser les éléments div et span, et les attributs id et class ! Certains détails ne sont pas faciles à reproduire pour les débutant·e·s : ce n'est pas grave si vous n'y arrivez pas. Faites ce que vous pouvez.

NB : les images fournies montrent le rendu obtenu avec Firefox (ce sera toujours le cas dans ce cours). Il est possible que le résultat ne soit pas tout à fait le même sous Chrome. Il est donc recommandé d'utiliser Firefox pour faire les TP.

Exercice 5 — Structure de page et HTML5

Une proposition de correction de cet exercice est disponible (archive). Ce n’est qu’une possibilité, on aurait pu choisir une structuration différente. Les choix sont expliqués dans les commentaires du HTML. Note : le rendu n’a pas grand intérêt, c’est le code qui compte…

Utiliser le contenu de la page Wikipedia de Robert Cailliau (sans le menu générique de gauche, et jusqu'à la section « Awards » comprise) pour créer une page utilisant les éléments HTML5 de structuration (article, section, nav, aside, figure, etc.). Vous ne devez pas utiliser de div ou de span, il n'y en a pas besoin ! Vérifier ensuite avec le chargé de TP la pertinence du choix des balises.

Attention, le but n'est pas de reproduire la page — en particulier, on ne cherche pas spécialement à ce qu'elle soit ressemblante (impossible sans CSS de toute façon) !

Dans un deuxième temps, expérimenter l'ajout de styles sur la page afin d'obtenir une présentation agréable. Vous pouvez utiliser des identifiants et des classes.

Exercice 6 (optionnel) — Listes et menus

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).

Compléments optionnels pour les plus avancé·e·s

  • Réaliser le menu horizontal à l'aide d'éléments flottants (voir documentation sur les flottants et la propriété float).
  • Essayer d'ajouter des sous-menus déroulants au menu, en utilisant une méthode 100% CSS (c'est-à-dire sans JavaScript).
  • Réaliser une galerie photo uniquement en CSS. Un tutoriel et exemple.