Fiche de révision : Web, HTML, CSS et Python

📋 Plan du Cours

1. Internet et fonctionnement du Web
2. Navigateurs et repères historiques
3. Requêtes, serveurs et protocoles
4. URL et localisation des pages
5. HTML et liens hypertextes
6. CSS et mise en forme
7. Affectations et saisies en Python

📅 Repères chronologiques

1. 1965Ted Nelson introduit le terme d’« hypertexte », sans travailler au CERN.
2. 1989Tim Berners-Lee invente le Web au CERN.
3. 1993Mosaic, l’un des premiers navigateurs Web, est mis à la disposition du public.
4. 1995Des technologies pour développer des sites Web interactifs avec JavaScript et dynamiques avec PHP sont mises à disposition.
5. 2001Le Document Object Model standardise les pages Web avec un modèle commun à tous les navigateurs.

📖 1. Internet et fonctionnement du Web

★ À maîtriser

📌 Internet est l’infrastructure matérielle, c’est-à-dire le réseau informatique utilisé par le Web et par d’autres applications.

• Le Web, ou World Wide Web, est la principale application d’Internet et permet de naviguer entre des pages grâce à des liens et à un navigateur.

Compléments

• Internet est aussi utilisé par le courrier électronique avec SMTP et par le transfert de fichiers avec FTP.

• Internet permet notamment :

  • le partage de fichiers
  • la messagerie
  • la téléphonie
  • le Web

💡 Astuce mémo

Internet transporte ; le Web relie des pages

📖 2. Navigateurs et repères historiques

★ À maîtriser

• Une page Web est affichée par un navigateur et peut contenir du texte, des images, des vidéos et des animations.

Compléments

• Des exemples de navigateurs sont :
  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Safari
  • Opera

📖 3. Requêtes, serveurs et protocoles

🔑 Notions clés & Définitions

• Serveur Web : Stocke les pages Web, les traite et les livre aux clients.
• HTTP : Désigne la relation client-serveur utilisée pour demander et transmettre des pages Web.
• HTTPS : Permet la confidentialité et l’intégrité des données envoyées par l’utilisateur grâce au chiffrement.

📝 Points essentiels

• Pour obtenir une page hébergée, l’utilisateur effectue une requête et le navigateur demande au serveur de lui envoyer cette page.

📖 4. URL et localisation des pages

🔑 Notions clés & Définitions

• URL : Adresse unique qui permet de localiser une page Web.
• Moteur de recherche : Site Web qui permet de retrouver des informations sur le Web, comme Google, Yahoo ou Bing.

📝 Points essentiels

• Une page Web peut être retrouvée de trois façons :

  • en saisissant son URL dans la barre d’adresse du navigateur
  • en utilisant un moteur de recherche
  • en suivant un lien hypertexte

• Dans l’adresse https://eduscol.education.fr/pid34303/les-sites-disciplinaires-eduscol.html, le nom de domaine est eduscol.education.fr et le chemin comprend /pid34303/les-sites-disciplinaires-eduscol.html.

📖 5. HTML et liens hypertextes

🔑 Notions clés & Définitions

• Lien hypertexte : Permet de naviguer d’une page Web à une autre.

★ À maîtriser

📌 La balise <a> crée un lien hypertexte et son attribut href indique l’adresse de la page visée.

Compléments

📌 Les balises de lien <a> se placent dans le corps de la page, entre <body> et </body>.

📌 Un lien vers page.html dans le même dossier utilise une adresse relative, tandis qu’un lien vers Eduscol utilise l’adresse du site cible.

• Les balises <h1>, <h2> et <h3> définissent des titres de niveaux d’importance décroissants, et <br/> provoque un retour à la ligne sans balise fermante.

• La structure HTML rappelée comprend <!doctype html>, puis les éléments <html>, <head> avec <title>, et <body>.

📖 6. CSS et mise en forme

🔑 Notions clés & Définitions

• CSS : Sert à styliser les contenus des pages Web en leur appliquant des styles.
• Sélecteur CSS : Cible le contenu HTML auquel un style doit être appliqué.

★ À maîtriser

• Dans une feuille CSS intégrée, le sélecteur est suivi d’un bloc de déclarations entre accolades, chaque déclaration associant une propriété à une valeur au moyen de deux-points.

Compléments

📌 Une feuille de style intégrée se place dans une balise <style> située dans l’élément <head> du fichier HTML.

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

  • color
  • background-color
  • font-style
  • font-size
  • font-weight
  • text-decoration

• Les valeurs possibles de font-weight sont :

  • bold
  • bolder
  • lighter
  • normal, valeur par défaut

• Les valeurs possibles de font-style sont :

  • italic
  • oblique
  • normal, valeur par défaut

📖 7. Affectations et saisies en Python

🔑 Notions clés & Définitions

• Python : Langage de programmation généraliste de haut niveau, adapté à l’apprentissage grâce à des constructions syntaxiques simples et lisibles.

★ À maîtriser

• En Python, le symbole = affecte une valeur à une variable, par exemple a = 2 signifie que la variable a prend la valeur 2.

• Une variable à laquelle on affecte un nombre entier comme 2 est de type int, tandis qu’une variable à laquelle on affecte un nombre décimal comme 2,5 est de type float.

• L’instruction var = input("texte affiché") demande une chaîne de caractères et l’affecte à var.

Compléments

📌 L’instruction var = int(input("texte affiché")) demande une valeur entière et l’affecte à var.

📌 L’instruction var = float(input("texte affiché")) demande une valeur décimale et l’affecte à var.

• Le programme de calcul proposé demande un entier, prend son triple, élève le résultat au carré puis ajoute 9.

📊 Tableaux de synthèse

Internet et Web