THÈME 3 : Le Web

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 :
   • Sélectionner une zone de la page Web pour afficher le code qui se cache derrière
   • Parcourer le code HTML de la page
   • Inspecter toutes les requêtes HTTP envoyé par le navigateur

Activité : créer votre page Web

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

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

• [VIDÉO] À quoi sert le HTML ?
• Consultez la documentation HTML : Apprendre le HTML
• Tutoriel : Comment bien utiliser les balises HTML5 ?
• Ajoutez des smileys en HTML !
• Vérifiez votre code HTML grâce au service de validation du W3C .
• Comment publier des images en toute légalité en 3 minutes de lecture
• Téléchargez des images libres de droits sur PixaBay

Le langage CSS : son style d'affichage

• [VIDÉO] À quoi servent les CSS ?
• Consultez la documentation CSS : Composer le HTML avec les CSS
• Tutoriel : Apprendre le CSS : les bases
• Pour les couleur, aidez-vous du nuancier hexadécimal (utilisable en CSS) : Cliquez sur l'image pour l'agrandir et voir les combinaisons de 6 chiffres hexadécimaux pour coder une couleur (exemples : 009966 pour le turquoise, FFFFFF pour le blanc)
• Regardez comment sont écritsdes beaux CSS libres !