Technologies web 1

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
  • Les éléments de structuration d’HTML5

Travaux pratiques

• TP 1 : Premières pages, validation
• TP 2 : Structuration

Modifier le style des pages : CSS

Notes de cours

• Introduction à CSS
  • Propriétés de style
  • Règles CSS
  • Intérêt des feuilles de style
  • Cascade
• 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

• TP 3 : Introduction à CSS
• TP 4 : Modèle de boîte, propriétés et sélecteurs

Sélecteurs ; URL ; images

Notes de cours

• Sélecteurs CSS simples
  • Combinaison de sélecteurs
  • Classes et identifiants
  • Éléments HTML génériques
• URL, chemins, requêtes
  • Contenu d’une URL
  • Chemins dans un système de fichiers
  • Traduction du chemin d’une requête HTTP par un serveur
  • URLs des ressources de la page
  • URL relatives et résolution
• Images sur le web (HTML/CSS)
  • Formats d’image pour le web
  • L’élément img et quelques-uns de ses attributs
  • Propriétés de base des backgrounds en CSS
  • Remplacement d’images

Travaux pratiques

• TP 5 : Images de fond et sélecteurs simples
• TP 6 : Principes de la mise en page avec les grilles CSS

Mise en page CSS et polices sur le web

Notes de cours

• Bases de la mise en page avec CSS
  • Propriété display
  • Positionnement absolu et relatif
  • Flottants
  • Mise en page classique et moderne
• Utilisation de polices sur le web
  • Polices du système et font stack
  • Utiliser n’importe quelle police avec @font-face

Travaux pratiques

• TP 7 : Outils classiques de mise en page « locale » — Polices web
• TP 8 : Reproduction d’un modèle avec mise en page

Bonnes pratiques CSS

Présentation du sujet du DM

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
  • tutoriel sur la factorisation du CSS
  • Structuration des fichiers CSS
• Largeur adaptable avec max-width

Travaux pratiques

• TP 9 : Liaison des pages d’un site
• TP 10 : Infos sur le DM — Construction d’une page

Sélecteurs avancés

Notes de cours

• Sélecteurs avancés
  • Sélecteurs de descendance et d’adjacence
  • Pseudo-classes
  • Pseudo-éléments

Travaux pratiques

• TP 11 : Sélecteurs CSS avancés
• TP 12 : Travail sur le DM

Interactivité en CSS — Audio & vidéo

Notes de cours

• Bases de l’interactivité en CSS
• Topo sur les menus déroulants
• Pseudo-classe :target et lightbox en CSS

Travaux pratiques

• TP 13 : Interactivité en CSS — Audio & vidéo
• TP 14 : Interactivité : menu déroulant

Design adaptatif — Transitions et transformations CSS

NB : Cette séance est étalée sur deux semaines à cause du 11 novembre férié. Il n’y a qu’un seul TP par semaine.

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
• Transitions, transformations, animations
  • Animer les transitions entre valeurs d’une propriété
  • Transformations
  • Un mot sur les animations non transitionnelles

Travaux pratiques

• TP 15 : Transitions/transformations CSS
• TP 16 : Manipulation des outils pour le design adaptatif

Formulaires HTML

Notes de cours

• Formulaires HTML
  • Fonctionnement général des formulaires HTML
  • Paramètres d’URL et méthode POST
  • Détails sur des widgets particuliers (boutons radio, select…)
  • Style et validation côté client

Travaux pratiques

• TP 17 : Découverte des formulaires HTML
• TP 18 : Variables CSS — Reproduction d’une vraie page responsive

Compléments

Pas de CM cette semaine !

Travaux pratiques

• TP 19 : Suite du TP précédent
• TP 20 : Travail sur le DM

Remise du DM-projet

Contrôle terminal