Besoin d'aide ?
Mon blog de recettes de cuisine
Cette initiation à la construction de pages WEB est faite uniquement côté client pour bien comprendre le mécanisme des langages HTML et Css. Le côté serveur nécessite un environnement applicatif spécifique.
L’application Visual Studio Code en version libre est utilisée pour lire ces fichiers. Il est possible d’utiliser NotePad++
Quelques touches de raccourcis utiles à connaitre avec Visual Studio Code :
– Crtl + S > Enregistrer le fichier
– Alt + Maj + F > Indenter les lignes de code
– Maj + Touche TAB > Agir sur la tabulation de la ligne
Des manipulations pratiques :
– Supprimer toutes les lignes vides du fichier : rechercher l’expression régulière ^\n et la remplacer par RIEN
– Ajouter un commentaire explicatif
Css > /*—- BLABLA—/
Html > <!—- BLABLA—>
Atelier 1 – La page Html
Le langage HTML HyperText Markup Language est un langage à BALISES. Il permet d’écrire du texte sur une page Web et de structurer la page (Head, Header, Body, etc.).
Résultat attendu
Structuration des fichiers
Atelier 2 – La page Html avec du Css, les liens et les images
Le CSS Cascading Style Sheets est un langage qui permet de créer des feuilles style en cascade. Ce langage est utilisé pour créer des sites Web. L’un des atouts est de créer des mises en forme hors du fichier Html tout en le liant. Ceci est très pratique pour uniformiser d’un coup un ensemble de pages, de boutons, de titres, etc.
Résultat attendu
Structuration des fichiers
Atelier 3 – Les tableaux, le favicon, les boutons et le Css renforcé
Le favicôn est l’icône symbolisant le site web dans l’onglet de la page du navigateur. En général, l’image du logo est utilisée. La balise <table> est utilisée pour présenter des données sous forme de tableau. Cette présentation va très souvent au-delà puisqu’elle permet aussi de structurer très facilement des informations sans recourir au Css.
Les boutons servent à lier les pages entre elles ou à réaliser des actions (imprimer, réinitialiser, etc.). Il est parfois intéressant visuellement de recourir au bouton plutôt que d’utiliser un lien hypertexte dans un paragraphe. Le bouton met en avant l’information.
Résultat attendu
Structuration des fichiers & conseils
Atelier 4 – Le menu de navigation & la gestion du fichier index
La page index d’un site Web contient en général toutes les informations de la page d’accueil. Ce fichier, positionné dans le répertoire racine du site, correspond à la page de démarrage du site. Nous y trouvons aussi le script/TAG de suivi du trafic du site.
La navigation entre les pages d’un site se fait à l’aide d’un menu. Le positionnement des menus dépend de l’ergonomie du site (Menu principal, Menu de la barre latérale, etc.).
Ne pas oublier = pas plus le 3 clics consécutifs pour garder l’internaute
Résultat attendu
Structuration des fichiers
Atelier 5 – Le formulaire de contact & la fonction “reset”
Il s’agit d’une initiation à la construction d’un formulaire étant donné que la partie “serveur” n’est pas traitée. Ceci signifie que le formulaire est utilisable côté CLIENT mais les données saisies et envoyées par l’internaute ne sont pas enregistrées dans la base de données côté SERVEUR.
Il existe des fonctions simples pouvant être intégrées au HTML évitant ainsi de recourir au Javascript pour exécuter la commande (print, reset, etc.).
Atelier 6 – La gestion d’un tableau complexe & des liens
La manipulation de la balise <table> permet d’aligner très simplement les données dans la page sans utiliser le Css.
Atelier 7 – Un exemple d’utilisation du JavaScript
L’atelier 7 propose d’afficher les quantités d’ingrédients en fonction du nombre du convives. La réalisation de cette action ne peut se faire qu’en associant un langage de programmation au fichier HTML. Nous utiliserons le langage de programmation de SCRIPT : JavaScript. L’un des langages les plus utilisés par les développeurs de site web.