Chapitre 4. 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
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.