Je vous propose d’exercer votre mémoire en retrouvant les paires de cartes dont les intitulés sont associables. Par exemple “Serveur Web (ou serveur HTTP)” et “Navigateur Web (ou client HTTP)”.
Catégorie : FCS1-exos
Exos du niveau 1 de la formation FCS
Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-déposer (drag and drop).
Reconstituer une structure HTML simple
Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html/
➜ Il s’agit, en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p
L’introduction dont il est question est un simple paragraphe dont le contenu est affiché en gras.
Reconstituer une structure HTML plus complexe
Le second exercice développe la structure du premier exemple en ajoutant une feuille de style interne, un second titre h2 avec ses paragraphes puis un script d’animation.
Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html-css-js/
➜ Il s’agit cette fois, toujours en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p-h2-p-p intégrant les éléments ajoutés.
Cette série d’activités vous permet d’élaborer un site one page simple. Vous n’aurez pas à vous soucier de toutes les contraintes de la rédaction pour le Web. Il ne sera pas question de choix et de positionnement de mots clés. Il ne sera pas question d’optimisation des titres, de longueur des phrases, etc.
➜ Dans un premier temps il s’agit de produire ou collecter un texte en suivant une structure rédactionnelle simple.
➜ Dans un second temps, le texte produit est structuré en langage HTML. Il devient une page Web élémentaire, consultable à l’aide d’un navigateur.
➜ La page HTML est ensuite stylisée en faisant appel à des instructions CSS simples. La page prend ainsi des couleurs, la typographie est plus originale et le futur site commence à se montrer sous un jour satisfaisant.
➜ Enfin, à la dernière étape, un menu est intégré en tête de la page Web stylisée, pour faciliter la navigation dans le texte (… et donc dans le site). Une feuille de style particulière est utilisée pour cela.
Liste des activités
Voici les activités correspondantes à ces 4 étapes.
- Activités sur la structure HTML d’une page Web
- Structuration avant stylisation
- Stylisation après structuration
- Insertion d’un menu avec Luxbar
Réaliser l’ensemble des activités proposées ici nécessite plusieurs journées de travail persévérant. Le résultat de vos efforts vous permettra d’envisager la mise en ligne une page Web du type de celle présentée ci-dessous.
Bon courage à tous 😉
Vous trouverez ci-dessous plusieurs activités vous permettant de consolider vos connaissances sur la structure élémentaire d’une page Web.
1 – Collecter des images sur la structure HTML élémentaire
Avant de lancer un éditeur de code et de modifier le code source d’une page HTML, je vous propose d’aller faire un tour sur le Web et de collecter des images qui mettent en évidence la structure élémentaire dont il a été question jusqu’ici.
Allez dans Google Images et saisissez “html structure” ou “structure html” (non, vous n’obtiendrez pas les mêmes résultats…). Vous allez très vite constater que les structures présentées sont loin d’être élémentaires et qu’elles concernent souvent la structure des contenus placés dans le corps de la page (et non la structure élémentaire proprement dite).
Collectez seulement les images qui se rapportent à la structure élémentaire. Laissez les autres images de côté pour le moment (celles montrant des structures avec « header », « main », « section », « aside », et d’autres encore…).
Voici une des images que vous pouvez collecter :
Placez les images collectées dans un dossier nommé « images » ou « img », en ayant soin de renommer correctement chaque image (sans majuscule ni lettres accentuées ni espace). Les 3 formats d’images acceptés sont .jpg (ou .jpeg), .png et .gif.
Ce dossier pourra vous servir ultérieurement si vous envisagez d’intégrer les images collectées dans une page Web réalisée par vos soins (activité facultative).
Vous placerez alors, dans un dossier nommé “structure-html”, le dossier “images” ou “img” contenant les images collectées. Ensuite, au même niveau que le dossier contenant les images, vous placerez le fichier “index.html” dans lequel seront intégrées les images et les textes d’accompagnement.
2 – Recherche de vidéos sur la structureHTML élémentaire
Rien de tel que de savoir se documenter soi-même en sélectionnant de bon documents. Je vous invite à faire une recherche sur les vidéos traitant de la structure élémentaire d’une page HTML. Je vous mets sur la piste, un peu plus haut dans ce cours. 😉 Vous réviserez les bases de la structuration d’une page Web pendant que vous tenterez d’évaluer la pertinence et le niveau de difficulté du contenu de la vidéo. Priorité aux approches simples, claires, et non soporifiques !
Proposition : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées. Utilisez par exemple StackEdit pour structurer en Markdown le contenu de la page. Exportez ensuite votre contenu, stylisé, avec ou sans TOC.
3 – Compléter les dialogues d’un diaporama pédagogique
Si vous avez déjà eu l’occasion d’utiliser un éditeur de code comme Brackets/Phoenix, pour remplacer des textes aux endroits indiqués, vous êtes capables de réaliser cet exercice.
Pour remplacer ou compléter des textes (affichés en noir dans Brackets/Phoenix), il faut d’abord les repérer. Ils sont placés dans le <body> entre les balises <p> et </p> (balises de paragraphe). La balise <br> (autofermante), souvent utilisée, force le retour à la ligne (br = abréviation de « break »).
Il s’agit de finaliser le dialogue imaginaire entre le code source d’une page HTML, d’une part, et un navigateur (auquel le code source s’adresse), d’autre part.
Tout est prêt côté codage… vous pouvez télécharger le dossier du diaporama à cette adresse : http://graphizm.fr/fcil/dixit-code.zip/.
Pensez bien à décompresser le fichier .zip avant d’ouvrir le dossier « dixit-code » avec Brackets.
Je vous montre ci-dessous le diaporama intégrant quelques diapos complètes et les diapositives à compléter par vos soins. La modification des dialogues déjà en place est facultative.
Je vous donne le ton du dialogue et des expressions utilisables pour effectuer votre travail. Si ce ton ne vous convient pas vous pouvez modifier les textes que j’ai saisi à titre de démonstration dans les premières diapositives.
Attention : veillez à faire en sorte que ce soit bien le code source qui s’adresse au navigateur. Il s’agit de se mettre « dans la peau » du code source ! Quand le navigateur prend connaissance des instructions que lui transmet le code source, les instructions sont déjà rédigées (codées). En vérité, le navigateur n’a pas d’autre choix que de prendre en compte les instructions que le code lui transmet !
Voici un petit TP pour manipuler le code source d’un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site “Pangrammes” étudiée brièvement sur graphizm.fr/fcs/manipulation-code-source.
Le fonctionnement du site
Le type de site que vous allez manipuler est composée d’une seule page Web. En cliquant sur le bouton “EN SAVOIR PLUS”, on ouvre ce qui s’appelle une fenêtre modale. Il est possible de refermer cette fenêtre en cliquant sur la croix placée en haut à droite de la fenêtre modale. Vous avez certainement déjà rencontré ce type d’animation lors de vos navigations sur le Web.
Le modèle (ou template) de ce site a été téléchargé sur le site codyhouse.co, a une époque où de tels modules étaient téléchargeables librement. On y trouvait plein de gabarits à personnaliser.
Les consignes
Le modèle à personnaliser est visible à cette adresse : http://graphizm.fr/fcs/exercices-code-source/ma-couleur/.
➜ Pour réaliser l’exercice sans avoir à copier-coller le code de tous les fichiers qui composent le site « ma-couleur », je vous invite à télécharger le site complet sous la forme d’un fichier zippé.
➜ Avec l’éditeur de code de votre choix, ouvrez le dossier « ma-couleur » (Fichier > Ouvrir un dossier > sélectionner le dossier > Ouvrir). Éditez le fichier « index.html » et prenez vos repères en vous rappelant ce que vous avez vu précédemment sur graphizm.fr/fcs/manipulation-code-source.
Des consignes plus détaillées vous sont données dans le fichier « index.html », elles sont visibles en pied de page après avoir accédé au texte sur la couleur bleue.
Cliquez sur le signe (+) pour agrandir l’image.
Analysez attentivement le code présenté ci-dessous.
L’affirmation qui suit est-elle exacte ?