Produire des documents pour le web
Informations générales
L'objectif de ce cours est de donner aux étudiant·e·s les connaissances et les méthodes informatiques spécifiques à la réalisation de pages web simples (statiques et non interactives), en particulier les langages HTML5 et CSS. Une attention particulière sera donnée à l'ergonomie, l'accessibilité, et l'utilisation des standards du web tels qu'ils sont définis par le W3C.
Cette unité comprend 4h de TP (2×2h) par semaine pendant 6 semaines.
Enseignants
- Jean-Marc Lecarpentier
- Antoine Widlocher
Contrôle des connaissances
Le contrôle des connaissances se fera uniquement en contrôle continu par l'évaluation du code de certains exercices faits en TP.
Séance 1
mercredi 16 janvier
mercredi 16 janvier
Web et HTML
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
Travaux pratiques
Séance 2
vendredi 18 et mercredi 23 janvier
vendredi 18 et mercredi 23 janvier
Séance 3
vendredi 25 janvier
vendredi 25 janvier
Pages web et mise en forme
Notes de cours
- 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
Travaux pratiques
Séance 4
mercredi 30 janvier
mercredi 30 janvier
Mise en page CSS
Notes de cours
- Modèle de boîte CSS3
- Visual formatting model de HTML/CSS
- Propriétés de base des boîtes
- Quelques propriétés CSS3
- Alignement de contenu
Travaux pratiques
Séance 5
vendredi 1, mercredi 6, vendredi 8 et mercredi 13 février
vendredi 1, mercredi 6, vendredi 8 et mercredi 13 février
Mise en page CSS
Notes de cours
- Bases de la mise en page avec CSS
- Propriété
display - Positionnement absolu et relatif
- Mise en page classique et moderne
- Propriété
- Images sur le web (HTML/CSS)
- Formats d’image pour le web
- L’élément
imget quelques-uns de ses attributs - Propriétés de base des backgrounds en CSS
- Remplacement d’images
Travaux pratiques
Séance 6
vendredi 15 février
vendredi 15 février
Séance 7
mercredi 27 février
mercredi 27 février
CSS avancées
Notes de cours
- Précisions sur les sélecteurs et bonnes pratiques CSS
- Utiliser divers sélecteurs ensemble
- Utiliser identifiants et classes
- Spécificité des sélecteurs
- Structuration des fichiers CSS
- Sélecteurs avancés
- Sélecteurs de descendance et d’adjacence
- Pseudo-classes
- Pseudo-éléments
Travaux pratiques
Séance 8
vendredi 1 mars
vendredi 1 mars
Design adaptatif
Notes de cours
- Outils CSS de base pour le design adaptatif
- media queries
- viewport
- Propriétés utiles pour l’adaptatif
- Unités de distance dynamiques