Catégories
FCS FCS1-cours RWRN RWRN-cours

Identifier la structure HTML d’une page Web

Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de code Brackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.

La structure élémentaire d’une page Web

Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.

Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active. Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>.

Le titre de la page est placé dans la tête du code source (à ne pas confondre avec la têtière qui se trouve généralement en tête de page affichée dans le navigateur…). La tête de code source est délimitée par les balises <head> et </head>.

Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.

Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source »… après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.

Je vous montre un gabarit de ce type, disponible sur le site w3schools.com. N’hésitez pas à demander la traduction automatique de ce site. Il y a dans le menu du site de w3schools (un site norvégien) une icône en forme de planète qui permet d’activer la traduction automatique du site dans la langue de son choix.

Capture d'écran d'une structure HTML assez simple collectée sur le site w3schools.com

Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut.

En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec Brackets et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.


J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…

Présentation de la BD en ligne consacrée à la section "head" et la la section "body" dans le code source d'une page HTML.

➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com

En savoir plus à ce sujet (en bonus…)

Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Plus dans le sujet tu meurs… mais vous verrez que les choses se compliquent assez vite.

Le site w3schools.com, que nous venons de mentionner plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton « Try it Yourself » ou « Essayez vous-même« ).

Pour les plus intéressés, je recommande vivement de s’inscrire aux cours gratuits de codecademy.com. Le cours de HTML est très bien conçu.

Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet. Ma préférence va vers le site apprendre-a-coder.com, même si on n’est pas sur YouTube… et que la rigueur n’est pas toujours au rendez-vous.

Vous ne serez pas perdu, car l’auteur utilise Brackets (mais sans les extensions qui vont bien, nous y reviendrons). Il y existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder). Pour les plus exigeants, allez plutôt voir du côté de grafikart.frc’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !

Test de connaissance (facultatif)

Un petit test de connaissance est disponible sur ce site. Vérifiez vos connaissances fraîchement acquises en allant sur Identifier les éléments de la structure HTML

Activités

Plusieurs activités vous sont proposées pour consolider vos acquis sur la page intitulée Activités sur la structure HTML d’une page Web

Catégories
FCS FCS1-cours

Personnaliser Brackets

Pour éditer le code source d’une page Web, je vous recommande l’utilisation d’un éditeur de code nommé Brackets.

Il est téléchargeable gratuitement et sans limitation sur le site brackets.io. Brackets fonctionne sous Windows, MacOs et Linux. Ceux d’entre vous qui utilisent un PC prêté par le GRETA disposent de Brackets parmi les programmes installés sur le portable.

Si vous avez l’habitude d’utiliser un autre éditeur de code, vous pouvez l’utiliser sans que cela gêne votre apprentissage. Vous trouverez une liste des principaux éditeurs de code sur de nombreux sites dont le BlogDuWebdesign.

Je vous propose, avant d’aller plus loin avec Brackets, de personnaliser cet éditeur de code. En lui ajoutant qualques extensions, Brackets va se révéler très pratique pour commencer à manipuler le code source d’une page HTML, une feuille de style CSS et plus tard un script JS.

Pour savoir comment ajouter des fonctionnalités à Brackets, consultez la fiche extensions-brackets.

Infos sur Brackets

  • Premiers pas avec Brackets, texte affiché à l’ouverture de l’éditeur, mis en ligne sur graphizm.fr
  • Bienvenue chez Brackets, un article à traduire en français avec Chrome, sur github.com
  • L’aide de Brackets, à traduire automatiquement si nécessaire, toujours sur github.com
  • Découvrir les usages de Brackets en vidéo avec grafikart.fr (très complet)
  • La même vidéo est intégrée dans un article de jenseign.com, un site consacré à l’apprentissage du HTML-CSS (niveau avancé).

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
FCIL FCIL-cours FCS FCS1-cours

Contenu d’un dossier de page Web

Dans ce cours vous allez apprendre à identifier les composantes d’un site Web statique.

Identifier le fichier index.html

Tous les sites Web ont une page d’accueil. Cette page est généralement nommée index.html. On désigne généralement un fichier enregistré au format HTML sous le nom de page HTML ou page Web.

Une page Web est donc un document enregistré au format HTML dans lequel des informations de plusieurs types sont codées. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants :

  • la ou les feuille(s) de style associées
  • la ou les images insérée(s)
  • le ou les script(s) utilisé(s)

La ou Les feuilles de style se rapportent au codage de l’apparence d’un site. Le ou les scripts se rapportent au codage de l’animation des composants d’un site.

Chacun de ces fichier n’est pas obligatoirement associé à une page Web mais la plupart des pages publiées en intègrent un ou plusieurs (notamment les 2 premiers).

Repérer le contenu d’un dossier de site

Pour organiser l’édition et la publication des pages Web, on place de préférence ces fichiers dans des dossiers nommés de façon explicite. On utilise le plus souvent les dossiers suivants :

  • un dossier nommé css (ou styles) pour y placer les feuilles de style au format .css
  • un dossier nommé img (ou images) pour y placer les images aux formats .jpg, .png ou .gif
  • un dossier nommé js (ou scripts) pour y placer les scripts au format .js

Tous ces dossiers sont ensuite placés dans un dossier qu’on nomme communément dossier du site (pour le désigner entre designers et développeurs). Ce dossier porte toutefois un nom (informatiquement) et ce nom est utilisé dans l’URL du site en question.

Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.

Par exemple, le documents que vous allez ouvrir dans un instant est accessible à cette adresse : http://graphizm.fr/contenu-dossier-page-web/

  • Quel est le nom du dossier dans lequel ce document se trouve placé ?
  • Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document ?

➜ Manipulez le document ci-dessous pour découvrir plus de détails au sujet du contenu d’un site Web.

Si d’autres ressources doivent être associées à une page Web, il est possible de créer d’autres dossiers pour les classer convenablement. Il est ainsi possible d’utiliser un dossier fonts ou fontes pour y placer des polices de caractères.

Affichez le code source du document ci-dessus et répondez aux questions suivantes :

  • Quel est le nom du dossier dans lequel se trouve le fichier intitulé style.css ?
  • Quel est le numéro de la ligne où se trouve l’indication de la réponse à la question précédente ?
  • Quel est le nom du dossier dans lequel se trouve le fichier intitulé index.js ?
  • Quel est le numéro de la ligne où se trouve l’indication de la réponse à la question précédente ?

Le type de page Web dont il est question ici est nommée page Web “statique” et le site qu’elle présente est nommé ”site statique”.

Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s’agit d’une page HTML dont le contenu ne varie pas en fonction de la demande de l’utilisateur. On oppose les pages statiques aux pages dynamiques.

Faites une recherche sur le Web en utilisant la requête suivante : page web statique vs page web dynamique. Cela vous amènera très probablement à éclaircir plusieurs autres concepts en rapport avec la publication Web.


Manipuler le code source

Pour examiner le contenu d’un dossier de site Web, téléchargez le fichier pangrammes.zip, décompressez-le et examinez son contenu.

Des précisions vous sont apportées sur le contenu du fichier index.html sur graphizm.fr/fcs/manipulation-code-source


En savoir plus

  • Gérer les fichiers d’un site Web sur developer.mozilla.org
  • Comment organiser ses fichiers sur apprendre-html-et-css.com . Les nombreuses fautes d’orthographe présentes sur les pages de ce site nous montrent l’importance d’une relecture des textes avant publication…

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 ?