Catégories
FCS FCS1-exos

Coder sans coder

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

Cliquez sur l’image pour faire l’exercice

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 second 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.

Cliquez sur l’image pour faire le second exercice
Catégories
FCS FCS1-exos

Structuration et stylisation en 4 étapes

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.

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 comme cela est présenté dans le diaporama ci-dessous :

Appuyez sur la touche J pour voir les vignettes de toutes les diapos, sur la touche P pour imprimer le diaporama et sur la touche T pour visionner le diaporama normalement

Bon courage à tous 😉

Catégories
FCS1-exos

Activités sur la structure HTML d’une page Web

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 l’éditeur de code Brackets, 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 « body », le corps de la page.

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…).

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.

2 – Manipuler le code source avec l’éditeur de code Bracket

Pour prendre un peu d’aisance dans la manipulation du code source, je vous propose quelques activités avec l’éditeur de code Brackets. Cliquez sur le bouton ci-dessous pour accéder au cours.

Dans le cours propoé, vous allez étudier le code source du site “Pangrammes” et personnaliser un petit site nommé “Ma couleur préférée”.

3 – Compléter les dialogues d’un diaporama pédagogique

Si vous avez déjà eu l’occasion d’utiliser l’éditeur de code Brackets pour modifier des pages simples (voir ci-dessus), vous êtes capables de réaliser l’exercice qui suit.

Pour remplacer ou compléter des textes (affichés en noir dans Brackets), 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 : https://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 (la modification des dialogues déjà en place est facultative…) et les diapositives à compléter par vos soins. J’espère ainsi vous donner le ton du dialogue et des expressions utilisables pour effectuer votre travail.

Vous pouvez cependant choisir d’adopter un autre ton, mais il faudra alors adapter la rédaction des 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 !

Pour visualiser plusieurs micro-diapositives afin d’en choisir une et l’afficher en taille normale, appuyer sur la touche “O” puis cliquer sur la diapositive choisie. Utiliser les flèches du clavier pour naviguer parmi les micro-diapositives.

4 – Recherche de vidéos sur la structure HTML é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 !

Astuce : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées. Vous irez plus vite en utilisant Deskyo mais vous en apprendrez plus en créant vous-même votre page de liens 😉

Catégories
FCS FCS1-exos

Ma couleur préférée

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 ce site : https://codyhouse.co/library . On y trouve plein de gabarits à personnaliser. Quand vous serez plus aguerris, vous pourrez utiliser ces ressources pour les personnaliser selon vos besoins 😉

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 Brackets, 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 ». Vous pouvez les lire plus confortablement en activant l’aperçu en direct (le petit éclair en haut à droite de la fenêtre d’édition de Brackets).

Catégories
FCS FCS1-exos RWRN RWRN-exos

Identifier les éléments d’une structure HTML

Catégories
FCS FCS1-exos RWRN RWRN-exos

Titre de page Web

Cliquez sur le signe (+) pour agrandir l’image.
Analysez attentivement le code présenté ci-dessous.
L’affirmation qui suit est-elle exacte ?