Fiche de révision : Développement d’interface web

📋 Plan du Cours

1. Évolution et fonctionnement du Web
2. HTML, CSS et navigateurs
3. Structure fondamentale du HTML
4. Éléments HTML courants
5. Structuration et formulaires HTML
6. Accessibilité et conformité Web
7. Fondamentaux du CSS
8. Positionnement et responsive design
9. Bases du JavaScript et du DOM
10. jQuery et stockage local
11. tout les balise sont impotent a retenir pour le contrôle

📖 1. Évolution et fonctionnement du Web

★ À maîtriser

• Dans les années 1960 et 1970, ARPANET constitue le précurseur de l’Internet.

• Dans les années 1980, Tim Berners-Lee propose un système de gestion de l’information qui deviendra le World Wide Web.

• Un navigateur Web, comme Firefox, Chrome ou Edge, interprète le code HTML, CSS et JavaScript, tandis qu’un serveur Web peut utiliser Apache2 ou Nginx.

Compléments

• Les technologies citées sont:
  • Web 2.0
  • smartphones
  • intelligence artificielle
  • Internet des objets
  • logiciels SaaS

💡 Astuce mémo

ARPANET → Web → Web 2.0

📖 2. HTML, CSS et navigateurs

🔑 Notions clés & Définitions

• HTML : langage de balisage créé avec le Web en 1991, qui encadre le contenu au moyen de balises sans être un langage de programmation
• CSS : langage créé en 1996 qui décrit la présentation des documents HTML ou XML

📝 Points essentiels

• Le CSS les mot nouveau

HTML structure, CSS présente

📖 3. Structure fondamentale du HTML

🔑 Notions clés & Définitions

• Imbrication HTML : consiste à placer des éléments à l’intérieur d’autres éléments

📝 Points essentiels

• 🔄 La structure fondamentale contient successivement:
  1. la déclaration DOCTYPE
  2. l’élément html
  3. l’élément head
  4. l’élément body

💡 Astuce mémo

DOCTYPE → html → head → body

📖 4. Éléments HTML courants

🔑 Notions clés & Définitions

• Hyperlien HTML : La balise a avec l’attribut href crée un hyperlien en transformant l’élément qu’elle enveloppe en lien.

★ À maîtriser

• Les balises h1 à h6 représentent des titres classés de la plus grande importance à la moindre, tandis que p représente un paragraphe.

• La balise img insère une image avec l’attribut src pour son chemin et l’attribut alt pour sa description.

Compléments

• Les balises ul et ol créent respectivement une liste non ordonnée et une liste ordonnée, dont les éléments sont définis avec li.

• Les balises de tableau a ne pa oublier pour le contrôle sont :

  • table pour le tableau
  • tr pour une ligne
  • td pour une cellule
  • th pour une cellule d’en-tête

📖 5. Structuration et formulaires HTML

🔑 Notions clés & Définitions

• Formulaire HTML : Un formulaire HTML est défini par la balise form et sert à collecter des données utilisateur.

★ À maîtriser

• Les balises sémantiques structurent:
  • l’en-tête avec header
  • la navigation avec nav
  • le contenu principal avec main
  • les contenus autonomes avec article
  • les sections avec section
  • le contenu tangentiel avec aside
  • le pied de page avec footer

📌 La balise div est un conteneur générique de niveau bloc qui commence sur une nouvelle ligne, tandis que span est un conteneur en ligne qui ne provoque pas de saut de ligne.

Compléments

• Les principaux champs sont:
  • texte
  • mot de passe
  • radio
  • case à cocher
  • bouton
  • soumission
  • réinitialisation
  • liste déroulante
  • zone de texte

💡 Astuce mémo

div en bloc, span en ligne

📖 6. Accessibilité et conformité Web

★ À maîtriser

• Les WCAG sont les directives pratiques et techniques qui décrivent comment rendre le contenu Web accessible; leurs versions citées sont WCAG 2.0 en 2008, WCAG 2.1 en 2018 et WCAG 2.2 proposée pour 2024.

• Les principes POUR sont:

  • Perceptible
  • Opérable
  • Compréhensible
  • Robuste

• Les niveaux de conformité sont:

  • A : obligatoire pour le contenu de base
  • AA : recommandé pour les organisations
  • AAA : accessibilité maximale

Compléments

📐 Formule — Le contraste entre une couleur claire et une couleur sombre se calcule par $Contraste = \\frac{L\_{clair}+0.05}{L\_{sombre}+0.05}$.

💡 Astuce mémo

POUR : Perceptible, Opérable, Compréhensible, Robuste

📖 7. Fondamentaux du CSS

🔑 Notions clés & Définitions

• Règle CSS : se compose d’un sélecteur et d’un bloc de déclaration contenant des paires propriété-valeur

★ À maîtriser

• Les sélecteurs principaux ciblent:
  • une balise avec un sélecteur d’élément
  • une classe avec un point
  • un identifiant avec un dièse

Compléments

• Les propriétés citées comprennent:

  • color
  • font-size
  • font-weight
  • text-align
  • margin
  • padding
  • border
  • width
  • height

• Les unités citées sont:

  • px : unité fixe
  • em : relatif au parent
  • rem : relatif à la racine
  • % : relatif à l’élément parent

📖 8. Positionnement et responsive design

🔑 Notions clés & Définitions

• Position sticky : se comporte comme relative jusqu’à un seuil de défilement, puis comme fixed dans son conteneur de défilement
• CSS Grid : CSS Grid sert à créer des mises en page en lignes et en colonnes au moyen de propriétés comme grid-template-columns, grid-template-rows, grid-column, grid-row et gap.
• Design responsive : Le design responsive vise à rendre une page visible et fonctionnelle sur différentes tailles d’écran, du bureau au téléphone mobile.

📝 Points essentiels

📌 La valeur static est la position par défaut dans le flux normal, tandis que relative conserve la place de l’élément tout en permettant un décalage visuel.

📌 La valeur absolute retire l’élément du flux et le positionne par rapport à l’ancêtre positionné le plus proche, tandis que fixed le positionne par rapport au viewport.

💡 Astuce mémo

static → relative → absolute → fixed → sticky

📖 9. Bases du JavaScript et du DOM

🔑 Notions clés & Définitions

• JavaScript : langage de programmation exécuté côté client dans le navigateur pour ajouter de l’interactivité aux pages Web
• DOM : représentation en arbre de la structure HTML ou XML d’une page, que JavaScript peut manipuler

★ À maîtriser

• JavaScript utilise notamment:

  • let, var et const pour les variables
  • les opérateurs arithmétiques
  • les opérateurs de comparaison
  • les opérateurs logiques

• Pour réagir à un clic, JavaScript sélectionne d’abord un élément avec document.getElementById, lui attache ensuite un écouteur avec addEventListener, puis exécute le traitement associé.

Compléments

• Le DOM permet de sélectionner des éléments avec getElementById, querySelector, querySelectorAll, getElementsByClassName ou getElementsByTagName, puis de modifier leur texte, HTML, style ou attributs.

💡 Astuce mémo

Événement → traitement JavaScript → modification de la page

📖 10. jQuery et stockage local

🔑 Notions clés & Définitions

• jQuery : bibliothèque JavaScript conçue pour simplifier la traversée et la manipulation du HTML, la gestion des événements, l’animation et Ajax
• localStorage : localStorage permet d’écrire, lire, supprimer une clé ou supprimer toutes les données locales avec setItem, getItem, removeItem et clear.

📝 Points essentiels

• jQuery utilise le sélecteur $ pour sélectionner des éléments, notamment avec $('p'), $('.class'), $('#id') et $('input[type="text"]').

• Les méthodes jQuery citées comprennent:

  • text, html et val
  • css
  • append, prepend, remove et empty
  • click, hover et on

📊 Tableaux de synthèse

Éléments de la pile Web