Fiche : Le Web

Theme 2 du programme SNT

Notions essentielles

  • HTML (HyperText Markup Language) : Langage de balisage qui structure le contenu d'une page web. Utilise des balises <tag> pour definir les elements.
  • CSS (Cascading Style Sheets) : Langage de style qui met en forme les pages HTML (couleurs, polices, disposition).
  • URL (Uniform Resource Locator) : Adresse complete d'une ressource web. Format : protocole://domaine/chemin
  • Lien hypertexte : Element cliquable qui permet de naviguer entre pages. Cree avec la balise <a href="url">.
  • HTTP/HTTPS : Protocoles de communication entre navigateur et serveur web. HTTPS = version securisee avec chiffrement.
  • Navigateur : Logiciel client qui interprete le HTML/CSS et affiche les pages web (Chrome, Firefox, Safari...).
  • Moteur de recherche : Service qui indexe le web et permet de trouver des pages (Google, Bing, DuckDuckGo...).

Vocabulaire cle

Balise HTML
Element de code entre < et > qui definit le type de contenu (titre, paragraphe, image...).
Attribut
Information supplementaire dans une balise (src pour images, href pour liens).
Selecteur CSS
Element qui cible les balises a styliser (balise, .classe, #id).
Propriete CSS
Caracteristique a modifier (color, font-size, background...).
Formulaire
Element HTML permettant a l'utilisateur d'envoyer des donnees (<form>, <input>).
Cookie
Petit fichier stocke par le navigateur pour memoriser des informations (session, preferences).
Indexation
Processus par lequel un moteur de recherche analyse et repertorie les pages web.
PageRank
Algorithme de Google qui classe les pages selon leur popularite (nombre de liens entrants).

Structure HTML de base

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Titre principal</h1>
  <p>Un paragraphe de texte.</p>
  <a href="https://exemple.com">Un lien</a>
  <img src="image.jpg" alt="Description">
</body>
</html>

Balises de structure

  • <html> : racine du document
  • <head> : metadonnees
  • <body> : contenu visible

Balises de contenu

  • <h1> a <h6> : titres
  • <p> : paragraphe
  • <a> : lien / <img> : image

Pieges a eviter

  • 1.
    Oublier de fermer les balises : Chaque <balise> doit avoir sa </balise> (sauf balises auto-fermantes comme <img>).
  • 2.
    Confondre HTML et CSS : HTML = structure/contenu, CSS = apparence/style. Ne pas mettre de style dans le HTML !
  • 3.
    URL relative vs absolue : /page.html (relative au site) vs https://site.com/page.html (absolue complete).
  • 4.
    Oublier l'attribut alt : Les images doivent avoir un texte alternatif pour l'accessibilite.
  • 5.
    Moteur de recherche ≠ Navigateur : Google est un moteur de recherche, Chrome est un navigateur !

A retenir pour le Bac

Structure d'une URL

https://www.exemple.com:443/page?q=test#section
  • https:// = protocole
  • www.exemple.com = domaine
  • :443 = port (optionnel)
  • /page = chemin
  • ?q=test = parametres
  • #section = ancre

Dates cles

  • 1989 : Invention du Web (Tim Berners-Lee, CERN)
  • 1991 : Premier site web
  • 1994 : Creation du W3C
  • 1995 : JavaScript
  • 2014 : HTML5 standard
Pixel