Revenir sur la page d'accueil

THÈME 3 : Le Web

Cours

Dans le manuel pages 54 à 75

Le résumé en vidéo : [VIDÉO] Site Internet ou site Web ?

L'histoire du Web

[VIDÉO] Découvrons l'histoire du Web

Les séances de cours

SÉANCE 1 -- Comment fonctionne le Web ?

Le fonctionnement du web(Image DELAGRAVE)

Votre mission : Inspecter ce que fait le navigateur :

  1. Ouvrir le navigateur Firefox et charger cette page https://itsforeveryone.org/lycee/snt/3_web/index.html#seance1
  2. Au clavier taper Ctrl + Maj + I (appuyer sur les 3 touches en même temps)
  3. Une fênetre s'ouvre en bas du navigateur, vous permettant d'inspecter tous les éléments Web de la page : Copie écran
    • Sélecteur Sélectionner une zone de la page Web pour afficher le code qui se cache derrière
    • Inspecteur Parcourer le code HTML de la page
    • Réseau Inspecter toutes les requêtes HTTP envoyé par le navigateur

Compétences travaillées

SÉANCE 2 -- Comment est écrite une page Web ?

HTML et CSS(Image DELAGRAVE)

Activité : créer votre page Web

Grille d'évaluation et conseils de rédaction :

grille_page_web.pdf

Consignes pas à pas pour commencer :

  1. Télécharger l'exemple de page Web : exemple.zip
  2. Décompresser le fichier précédemment téléchargé dans votre répertoire personnel U:Eleves/votreprénom.votrenom/
  3. Ouvrir le fichier exemple.html avec le logiciel Notepad++ (Dans le navigateur de fichiers, clic-droit sur le fichier exemple.html, sélectionner "Edit with Notepad++"
  4. Ouvrir le fichier stylePerso.css avec le logiciel Notepad++
  5. Pour diviser la fenêtre Notepad ++ en 2 sous-fenêtres, faites un clic droit sur l'onglet du fichier stylePerso.css et cliquez sur «Déplacer vers une autre vue»
  6. Corriger l'erreur ligne 7 du fichier exemple.html pour lier le bon nom de fichier CSS dans le code HTML.
  7. Ouvrir le fichier exemple.html avec votre navigateur pour visualiser comment il s'affiche
  8. Modifier le fichier HTML pour modifier le contenu de votre page Web, et pensez à l'enregistrer !
  9. Modifier le fichiers CSS pour modifier le style graphique de votre page Web, et pensez à l'enregistrer !
  10. Pour visualiser les changements, actualiser la page exemple.html de votre navigateur :
    • Firefox : Ctrl + F5 ou Maj + Ctrl + R
    • Chrome : Ctrl + F5 ou Maj + F5 ou Maj + Ctrl + R
    • Safari : Pas de raccourci 🙁 Allez dans Safari > Vider le cache
    • Edge : Ctrl + F5
    • Internet Explorer : Ctrl + F5 ou Alt + X
  11. Répéter les 3 dernières opérations jusqu'à avoir la page Web que vous souhaitez.

Des ressources pour vous aider à écrire votre page Web :

Le langage HTML : la structure de la page et son texte
Les balises HTML
Le langage CSS : son style d'affichage
Déclaration CSS

Quand vous avez fini :
Voici un exemple de design web à ne pas suivre ! 😱
JEU EN LIGNE : remplissez ce formulaire de l'enfer le plus rapidement possible (vous êtes chronométré !).
Ce site, fait par des designeurs web professionnels rassemblent des tas de mauvaises pratiques en terme d'interface et d'expérience utilisateur. Le site le plus mal designé du web !
ALLEZ-Y : https://userinyerface.com (La prof a mis 7min30 pour remplir sérieusement ce formulaire.)

Compétences travaillées

SÉANCE 3 -- Comment les moteurs de recherche fonctionnent-ils ?

Les moteurs de recherche(Image DELAGRAVE)

Compétences travaillées

SÉANCE 4 -- Quels sont les risques du Web et comment s'en prémunir ?

Compétences travaillées

Il existe des outils pour vérifier automatiquement que les codes HTML et CSS d'une page web sont bien écrits : Valid HTML 5 CSS Valide !