Chapitre 5. Le Web
Un exemple de page Web
Cliquer sur ce lien pour accéder à un exemple de page Web basique.
Je crée ma première page Web
Accès direct à la Playlist sur peertube.monlycee.net
Remarque. L’accès à chaque vidéo individuellement ci-dessous est pour l’instant insdisponible en raison d’un problème d’accès lié à Monlycée.net : les vidéos hébergées sur peertube.monlycee.net ne peuvent plus être intégrées à une page Web depuis cette année. Une demande a été envoyée à Monlycee.net pour résoudre la situation. Pas de réponse pour l’instant.
Partie 1. Préparer son environnement de travail
Il est possible que vous ayez déjà réalisé certaines des étapes ci-dessous. Si c’est le cas passez à la suite. En classe, veuillez couper le son de votre appareil avant de lire les vidéos. Vous pouvez éventuellement utiliser des écouteurs après avoir demandé l’autorisation de l’enseignant.
Étape 1. Connecter OneDrive
Étape 2. Créer son dossier pour les SNT
Étape 3. Créer son dossier pour le Web et sa première page Web
Étape 4. Afficher les extensions de fichier
Étape 5. (Facultatif) Masquer automatiquement la barre des tâches
Étape 6. Paramétrer Visual Studio Code
Étape supplémentaire facultative ci-dessous. Cette vidéo montre comment changer l’échelle d’affichage. Cette vidéo est destiné en particulier aux enseignant-e-s afin d’obtenir un affichage visible pour les élèves aux derniers rangs.
Étape 7. Initialiser et visualiser la page Web
Partie 2. Rédiger le contenu de sa page Web
Les étapes suivantes supposent que la première partie ait déjà été réalisée. La première étape ci-dessous est à faire si vous aviez fermé l’environnement de travail en fin de partie 1. Pour rappel, en classe, veuillez couper le son de votre appareil avant de lire les vidéos. Vous pouvez éventuellement utiliser des écouteurs après avoir demandé l’autorisation de l’enseignant.
Étape 1. Réouvrir l’environnement de travail
Étape 2. Ajouter un paragraphe, un titre et une liste non-ordonnée
Étape 3. Ajouter une liste ordonnée, un lien hypertexte
Étape 4. Ajouter une image
Étape 5. Ajouter un tableau
Étape 6. Intégrer une vidéo
Partie 3. Modifier le style de la page avec CSS
Les étapes suivantes supposent que les deux premières parties aient déjà été réalisées. La première étape ci-dessous est à faire si vous aviez fermé l’environnement de travail en fin de partie 2. Pour rappel, en classe, veuillez couper le son de votre appareil avant de lire les vidéos. Vous pouvez éventuellement utiliser des écouteurs après avoir demandé l’autorisation de l’enseignant.
Étape 1. Réouvrir son environnement de travail
Étape 2. Création du fichier CSS et association au fichier HTML
Étape 3. Mise en forme du texte
Étape 4. Le modèle en boîte
Étape 5. Mise en forme des images
Étape 6. Mise en forme des tableaux
Étape 7. Largeur du texte et motif d’arrière plan
Exercice sur le langage CSS
Le but de cet exercice est de modifier la mise en forme d’une scène de théatre afin qu’elle apparaisse sous la forme d’une discussion WhatsApp. La scène de théâtre choisie est la scène d’ouverture du Mariage de Figaro écrit par Beaumarchais en 1778. Le fichier HTML vous est fourni ainsi qu’une ébauche de feuille de style CSS. À vous de la compléter.
Prérequis. Préparer son environnment de travail
Commencer par regarder les vidéos explicatives puis utiliser le lien de téléchargement suivant ensuite.
Étape 1. Paramétrer son navigateur pour le téléchargement
Étape 2. Télécharger et décompresser le dossier de travail
Étape 3. Ouvrir l’environnement de travail
Consignes
Le dossier sms contient deux fichiers :
-
un fichier HTML
index.htmlqui contient la scène d’ouverture du Mariage de Figaro de Beaumarchais. Cette scène contient 3 contenus textuels distincts :- les répliques respectives de deux personnages (Figaro et Suzanne) qui sont sur le point de se marier ;
- des didasqualies : ce sont des indications sur les décors et la mise en scène.
-
un fichier CSS à compléter. Le but est decompléter ce fichier pour que la scène de théâtre soit formatée à la manière d’une discussion Whatsapp sur le modèle de l’image ci-dessous (image issue d’un article sur un scandal de revente de billets pendant la coupe du monde de football 2018):
