Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.
Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.
Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.
Utiliser la plateforme Netboard
Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.
➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessous — un prof d’anglais explique à d’autres profs comment utiliser Netboard.
Netboard peut donc servir à :
regrouper et partager des collections de liens (veille informationelle)
organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
regrouper en mode collaboratif des documents sur une thématique
rassembler et partager une documentation sur un sujet précis
maquetter un site Web en testant la répartition des contenus sous différents onglets
etc.
En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.
Utiliser Google Sites
Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.
Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.
Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.
➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.
À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.
Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide. ➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.
Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).
Utiliser des éditeurs gratuits
Parmi les outils disponibles en ligne je vous propose de tester les outils suivants (très facile à prendre en main :
Ces éditeurs gratuits repérés en ligne ne disposent pas de fonction d’exportation des contenus en .html (c’est assez frustrant…). Cela limite beaucoup l’usage effectif de ce type d’outil !
Utiliser d’autres éditeurs WYSIWYG
Les éditeurs WYSIWYG grand public ne permettent pas de manipuler confortablement le code source et d’enrichir ainsi une page Web. Pour effectuer cela convenablement, il est nécessaire d’utiliser des éditeurs WYSIWYG plus élaborés comme BlueGriffon ou Dreamweaver. Leur prise en main est plus laborieuse et leur prix beaucoup plus élevé !
Utiliser un éditeur Markdown
Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.
Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :
La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :
Je me contenterai de les mentionner, sans entrer dans les détails car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3). La préparation au titre pro Designer Web permet de compléter utilement ces compétences.
Utiliser des frameworks CSS
Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.
Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.
Utiliser des CMS sans base de données
Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.
Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.
Dans ce cours vous allez découvrir comment fonctionne le Web et réaliser plusieurs activités en lien avec ce sujet. De nombreux liens vers des ressources externes vous seront proposés, vous pourrez les explorer tranquillement, le moment venu.
Utiliser une analogie pour comprendre le Web
Pour commencer, je vous invite à lire les trois premières partie de l’article intitulé “Le fonctionnement du Web”, sur le site developer.mozilla.org :
L’idée à laquelle je vous invite à être attentif est celle ci :
“Faisons un parallèle entre le Web et une rue. D’un côté de la rue, il y a une maison qui correspond au client. De l’autre côté, un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.”
➜ Faites un dessin commenté (façon sketchnoting) en vous inspirant de l’analogie développée dans la deuxième partie de l’article mentionné ci-dessus.
Votre dessin commenté sera partagé pour en contrôler l’exactitude (mais non la qualité graphique) 😉
Créer une infographie
Pour fixer davantage dans la réalité les concepts abordés à l’étape précédente, je vous propose de réaliser vous même une infographie en utilisant des éléments graphiques mis à votre disposition (cliquez sur l’image ci-dessous).
Si vous ne parvenez pas à faire glisser les éléments de la zone de droite vers la zone de gauche, rafraîchissez la page (ctrl/cmd-R).
➜ Voici les consignes à respecter pour positionner les différents éléments constitutifs d’un large réseau informatique.
➜ Pour connecter les éléments du réseau entre eux, je vous invite à utiliser (en présentiel, sur Mac) l’application Aperçu. En effet, cette application dispose d’une fonctionnalité permettant de simuler un cable de liaison entre 2 box. Il vous faudra pour cela effectuer une capture d’écran de votre “réseau”.
Vous pourrez légender votre infographie en utilisant Aperçu ou l’application Skitch, disponible sur votre poste de travail en présentiel.
Avant de passer au chapitre suivant, je vous invite à terminer la lecture de l’article publié sur developer.mozilla.org. Vous allez en effet avoir besoin de quelques informations supplémentaires pour bien comprendre les vidéos proposées plus bas.
Visionner quelques vidéos
La première vidéo que je vous propose de visionner survole le sujet mais sans oublier aucun point essentiel.
Vidéo de 3 minutes et 4 secondes
La seconde vidéo offre un panorama complet de ce qui se passe lorsque vous regardez une vidéo en ligne. Pour éclairer leur propos, les auteurs abordent tous les points avec lesquels vous vous êtes déjà familiarisés (plus quelques autres dont je vous ai peut-être déjà parlé…).
Faire un peu d’histoire
L’histoire du Web est pleines d’anecdotes amusantes ou dramatiques. Elle commence beaucoup plus tôt qu’on se l’imagine et connait des rebondissements inattendus. Voici quelques ressources disponibles pour parfaire votre culture Web.
Nous avons utilisé StackEdit (➞ voir ce cours) pour rédiger un texte tenant compte des contraintes du référencement naturel (➞ voir ce TD). Voyons maintenant comment donner une forme attrayante à notre travail. Nous allons intégrer le texte structuré dans un gabarit de site responsive.
Les gabarits responsives
Vous trouverez sans aucun doute des centaines de gabarits responsives sur Internet. Il est très probable qu’ils soient stylisés en faisant appel au framework Bootstrap. Or, à ce stade de votre formation, vous ne maîtrisez pas encore cette boîte à outil !
Il existe pourtant quelques gabarits HTML5-CSS3 utilisables par des débutants. Je me suis inspiré de quelques uns d’entre eux pour bâtir plusieurs gabarits de site one page (ils sont présentés sans index récapitulatif). Je vous propose de les télécharger et de les examiner d’un peu plus près.
Vous constaterez qu’ils n’utilisent pas de code JavaScript. Ils ont tous été optimisés pour l’affichage sur mobiles. Certains gabarits s’adaptent mieux que d’autres aux petits écrans. Les versions “bis” sont un peu plus complexes que les version sur lesquelles elles se basent.
➜ Utiliser les fonctions d’affichage “responsive” de votre navigateur pour tester le rendu de chaque gabarit pour différentes largeurs de fenêtre du navigateur.
Affichez le code source, examinez-le avec attention. Dans la fenêtre affichant le code source, cliquez sur le lien menant à la feuille de style. Parcourez-là pour repérer l’articulation entre la feuille de style CSS et le fichier HTML. Notez que les feuilles de style sont partiellement commentées.
Les feuilles de syles CSS listent des instructions qui s’appliquent aux éléments HTML. Pour mieux comprendre les procédés utilisés dans les feuilles de style des gabarits, je vous invite à visionner cette vidéo qui explique comment fonctionnent les feuilles de style externes.
Préparer le travail de personnalisation
Collecter ou créer des images
Choisissez le gabarit qui vous semble le mieux convenir à votre texte et à votre propos. Vous allez avoir besoin d’images pour remplacer celles que j’ai utilisées. N’hésitez pas à explorer les possibilités offertes par le site pexels.com pour trouver des images libres de droit.
Vous pouvez créer des illustrations thématiques adaptées à votre sujet en utilisant les services de Vector Creator. Vous pouvez aussi composer vos propres “photos” en faisant des montages grâce à Photo Creator.
Choisissez vos photos avec soin. Je vous recommande de veiller à l’unité des couleurs et du style sur l’ensemble de la page Web. Ne vous contentez pas de regrouper des photos sur le seul critère de leur rapport avec le sujet traité.
➜ Si vous ne trouvez pas assez de photos dans les mêmes teintes colorées, retouchez-les en utilisant Photoshop ou une application en ligne comme Pixlr-x.
Compresser les images
Rassemblez les images collectées dans un dossier de collecte que vous nommerez explicitement. Les images collectées dans les banques d’images sont généralement de grandes dimensions (plus de 5000 pixels de large) et peuvent peser plusieurs Mo.
L’image de bandeau dont vous avez besoin na pas besoin de dépasser 2000 pixels de large. Il est donc nécessaire que vous réduisiez la taille de vos images et par conséquent leur poids. Compressez vos images en jpg à 70% (7 sur une échelle de 1 à 10), elle ne pèseront plus que quelques centaines de Ko…
Placez dans le dossier “img” les seules images que vous envisagez de publier. Si vous placez davantage d’images dans ce dossier, le temps de faire votre choix, retirez ensuite celles que vous n’avez pas utilisées.
Sur le Web, on voyage léger !
Préparer un nuancier étagé
Vous allez modifier les couleurs utilisées dans les gabarits fournis. Vous allez donc devoir utiliser des couleurs dont le degré de luminosité autorise la superposition d’une couleur sur l’autre. Pensez au confort oculaire de vos futurs lecteur !
Le moment venu, vous aurez sans doute besoin de changer la police de caractères utilisée pour le titrage dans les gabarits. Les polices de Google Fonts sont une aubaine pour les créateurs débutants !
Pour vous aider dans votre choix, je vous invite à vous rendre sur fontpair.co. Et si vous ne trouvez pas votre bonheur, vous pouvez toujours utiliser un des outils proposés sur la page Typography resources.
Intégrer le texte rédigé dans le gabarit
La personnalisation d’un gabarit nécessite souvent une intégration du texte titre par titre et paragraphe par paragraphe. Faute de quoi certaines parties du code implémentées dans le gabarit risquent de disparaître.
La démarche n’est pas la même que celle qui consiste à construire un site à partir de zéro (from scratch). Elle est aussi très différente de la méthode qui consiste à changer de feuille de style externe pour modifier l’apparence d’une page HTML.
L’avantage d’utiliser un éditeur markdown lors de la rédaction est de bénéficier à l’export d’un contenu proprement balisé. Cela facilite l’intégration des différentes parties du texte dans la structure du gabarit.
Remarques sur les balises <br>
Soyez vigilants sur la structuration du texte. Il se peut que le texte exporté depuis StackEdit comporte de nombreuses balises <br>. C’est souvent le résultat d’une erreur de saisie lors de la rédaction dans l’éditeur Markdown. Corrigez ce défaut lors de l’intégration et constituez des paragraphes courts, de taille homogène.
➜ Dans StackEdit, en Markdown, il faut sauter 2 lignes pour faire un saut de paragraphe. Un simple saut de ligne génère un saut de ligne dans le paragraphe (un <br>).
Conseils pratiques
Travaillez sur le bureau
Dans le cadre des salles du GRETA, sur le Pôle Plurimédia du lycée La Fayette, vous pouvez être tentés de modifier directement des fichiers placés sur votre session individuelle.
➜ Je vous recommande plutôt de copier le dossier du gabarit que vous avez l’intention de modifier sur le bureau de votre poste de travail.
Quand vous aurez terminé, vous sauvegarderez alors votre travail sur votre session (… et sur votre clé USB ou votre disque dur personnel).
Personnaliser le gabarit
Vous pouvez modifier la feuille de style CSS pour personnaliser le gabarit utilisé. Il est ainsi possible de modifier les couleurs, la police de titrage et bien d’autres choses.
Soyez très prudents concernant des modifications touchant à la disposition des éléments dans la page (menu, têtière, contenu principal, etc.). Gardez à l’esprit que toute modification envisagée sur grand écran doit être répercutée sur petits écrans.
Des “media queries” se trouvent en fin de feuille de style. Elles permettent de spécifier précisément, à l’aide de nouvelles instructions CSS, comment doivent s’afficher les éléments HTML quand la fenêtre de navigation fait telle ou telle largeur. Toute la “responsivité” (capacité d’adaptation) du gabarit repose sur ces requêtes médias.
Recommandations
Ne vous lancez pas dans de grandes modifications du modèle choisi. Soignez plutôt vos images, vos couleurs et vos typos.
Pour neutraliser une instruction CSS utilisez la mise en commentaires plutôt que l’effacement de l’instruction. Cela facilitera le retour à la version originale. Les balises de mise en commentaire CSS sont /* et */.
➜ Si une tentative de modification de la feuille de style échoue, revenez à la version originale. Ne laissez pas des instructions inopérantes dans le code.
Modifications premières
Voici une série de modification faciles à mettre en œuvre. Une fois que vous les aurez faites, votre site devrait déjà avoir un look satisfaisant.
Nous verrons plus tard, en utilisant notamment la feuille de style w3.css, comment optimiser la présentation d’une page en insérant des diaporamas, des grilles de photos, des colonnes suplémentaires, etc.
Pour le moment, vous pouvez mettre en œuvre les modifications indiquées ci-dessous.
Choisir des mots “strong” (importants)
Cette modification concerne la structuration et la stylisation du texte en même temps. En effet, les lecteurs devraient pouvoir parcourir votre texte en lisant les seuls titres et les seuls mots en gras.
Les moteurs de recherche lisent votre texte de cette façon. Ils en déduisent la cohérence de votre propos en analysant le champ sémantique des mots importants et des titres.
➜ C’est à vous d’indiquer aux moteurs de recherche et à vos lecteurs quels sont les mots importants. Pour cela, utilisez les balises <strong> et </strong> pour baliser chaque mot ou expression importante.
Quand on veut afficher en gras des mots qui ne sont pas importants , on utilise les balises <b> et </b>.
Changer l’image de fond du header
Sur les gabarits que je vous propose, l’image de la têtière est insérée dans le header via la feuille de style. Repérez dans la feuille de style les instructions de ce type, rattachées au header :
Changez le nom de l’image utilisée par celui de l’image de votre choix. Utilisez une image de 2000 pixels de large et de la hauteur de votre choix.
➜ Pour optimiser le positionnement de l’image dans l’espace disponible, rajouter l’instruction CSS suivante :
background-position: center;
Suivant l’image que vous avez utilisée et son contexte d’affichage, vous pouvez donner à background-position les valeurs top, bottom, left ou right. Vous modifierez ainsi la manière dont l’image se positionne dans le cadre disponible.
Changer les couleurs utilisées
Pour changer les couleurs du gabarit, il faut repérer dans la feuille de style tous les endroits où un nom de couleur a été utilisé. Les formes de codage de la couleur utilisées dans les gabarits proposés sont la forme hexadécimale (#FFF, #FF00DD, #80F80F, etc.) et les formes rgb ou rgba (rgb(255, 255,255), rgba(255, 255, 0, 0.5), etc.).
➜ Vous trouverez rapidement les codes de couleurs insérés dans la feuille de style en utilisant la fonction “Rechercher” (cmd-F sur MacOs). Recherchez “#” ou ”rgb”, vous trouverez immédiatement les couleurs codées avec ces intitulés.
On peut aussi rechercher l’occurence “color” (… toujours en utilisant la fonction “Rechercher” dans Brackets). Le nom de la couleur choisie n’est pas très loin des expression comprenant cette occurence !
➜ Pensez à utiliser des couleurs aux valeurs étagées et ne multipliez pas le nombre des couleurs utilisées. Veillez au contraste entre le texte et le fond pour garantir à vos lecteurs une lisibilité optimale.
Accordez vos couleurs avec l’image de têtière utilisée. Votre site gagnera en unité et en harmonie.
Modifier la variable d’une couleur moyenne
Les feuilles de style CSS des gabarits dont le numéro de version se termine par la lettre c sont paramétrées de telle sorte que les couleurs puissent être modifiées en une seule fois.
Pour cela, des variables de couleur sont définies en tête de feuille de style (exemple ci-dessous).
/* Déclaration des variables des couleurs appliquées sur la page */ :root { --dark-color: #000; --dark-grey: #333; --medium-color: #307d9a; --light-color: #fff; --light-grey: #ddd; }
Il s’agit de gris (clair et foncé), du noir, du blanc et d’une couleur moyenne choisie pour répondre à la norme d’accessibilité AA sur le noir et sur le blanc.
➜ Pour modifier la couleur moyenne dans tout le gabarit, il suffit de changer la valeur de --medium-color.
Changer la police de titrage
Les polices de titrages sont appelées depuis les serveurs de Google Fonts par la méthode @import, au tout début de la feuille de style.
Si vous n’avez jamais utilisé Google Fonts, je vous invite à regarder cette vidéo pour en apprendre davantage (durée : 16 min).
Ajouter des onglets au menu
En fonction de la structuration du contenu rédactionnel, vous pouvez être amenés à ajouter des onglets au menu du gabarit. Choisissez des intitulés courts en reprenant un terme du titre de la partie vers laquelle renvoie l’onglet.
Modifications non recommandées
Modifier l’alignement du texte
Le Web, avec la diversité des écrans de consultation des sites, supporte mal la justification des textes. Privilégiez l’alignement du texte à gauche et quand cela se justifie, utilisez l’alignement centré.
Habiller les photos avec le texte
Pour la même raison que celle évoquée plus haut, évitez d’habiller vos images avec du texte. Pour vous convaincre, examinez la manière dont votre texte se positionne à proximité de l’image sur les largeurs de fenêtre légèrement plus grandes que la largeur de l’image.
Un gabarit de site multipage
Seulement pour les apprenants de la formation Designer Web.
J’ai combiné plusieurs feuilles de style trouvées sur le Web pour composer un gabarit de site multipage. Les explications concernant sa mise en œuvre sont affichées dans le gabarit !
Concernant la mise en œuvre de Luxbar (la feuille de style utilisée dans ce gabarit pour l’insertion du menu…), vous trouverez des précisions sur la page intitulée Insertion d’un menu avec Luxbar.
Pour finaliser la production d’un site simple créé à partir de la rédaction structurée d’un article, je vous propose maintenant d’insérer en tête de page un menu fixe.
Chacun dispose désormais d’un dossier de site dans lequel se trouvent :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Pour insérer un menu fixe, nous allons utiliser l’application Web Luxbar. Celle-ci génère le code HTML dont nous avons besoin.
Préparation
Le code proposé par l’appli Luxbar est opérationnel dans la mesure ou la feuille de style correspondante est disponible dans le dossier du site.
➜ Il est donc nécessaire de télécharger la feuille de style “luxbar.css” puis de la placer dans le dossier “css” du site.
Il s’agit maintenant d’utiliser l’application Luxbar pour générer le code HTML du menu.
Inutile de télécharger l’appli Web (comme cela vous est proposé en début de page. Tous les réglages s’effectuent directement sur la page de l’application. Il suffit de cocher les options souhaitées. Quoiqu’il en soit, tout est modifiable dans le code ultérieurement.
Choix du nombre d’onglets
➜ Le nombre d’onglets dépend à priori du nombre de sous-titre h2, auquel il faut ajouter un onglet “Accueil”, pour revenir en haut de page quand on en a besoin.
Choix de la position du menu et de sa couleur
➜ Je vous invite à choisir la position “Fixed”. En effet, elle se révèle la plus intuitive et la plus pratique sur tous les écrans.
Sur la capture d’écran, j’ai coché “Fixed Bottom” pour des raisons pratiques de positionnement des commentaires 😉
Choix des modalités d’affichage dans la barre de navigation
➜ Choisissez ici les options qui vous conviennent le mieux.
L’option d’animation du hamburger concerne l’icône des 3 traits superposés qui s’affiche pour accéder au menu quand l’écran ou la fenêtre de navigation est de petite taille.
Paramétrer le code HTML du menu
Une fois les options choisies, l’application Luxbar vous propose de copier dans votre code source une série de lignes HTML (un bouton “Copy” apparait au survol du code).
➜ Copiez le code HTML proposé et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. Choisissez la balise <nav> à la place de la balise <header>.
Établir les liens avec la page dans le code du menu
Sur la capture d’écran précédente, j’indique que des changements doivent être effectués dans le code HTML du menu Luxbar. En effet, il s’agit d’établir un lien entre chaque onglet et l’endroit de la page vers lequel l’onglet est sensé pointer.
Pour installer proprement un menu Luxbar avec les styles que je vous ai proposé, il est nécessaire de procéder à des améliorations dans le code HTML et dans les CSS.
➜ Téléchargez les CSS adaptées et placez-les dans le dossier “css”. Ensuite, appelez celle qui vous convient via la balise <link>, dans le head de votre site.
➜ Mettez en place les bandeaux qui vont permettre aux titres <h2> de s’afficher sous la barre de menu. Positionnez ensuite les différents id (ancres de navigation) dans les <div class= »bandeau »> (voir l’exemple donné dans la capture d’écran précédente).
Pour que les feuilles de style adaptées au menu Luxbar puissent s’appliquer correctement à votre page HTML, il est nécessaire de créer de créer 2 boîtes (divisions) importantes :
une boite <main></main>
une boîte <footer></footer>
La boîte <main></main> englobera les contenus principaux (h1 – p – h2 – p – p – etc.). Dans notre cas, elle sera chapeautée par la boîte <nav></nav> contenant le menu et elle sera suivie de la boîte <footer></footer> contenant des informations annexes sur le site et ses contenus.
Je vous propose de télécharger un exemple de réalisation similaire pour voir quels sont précisément les attendus à ce stade des opérations 😉
Dans ce cours, après avoir pris le temps de soigner la structuration d’un texte intégré dans une page HTML, nous allons appliquer à la page un style graphique (un look, un habillage, une apparence soignée…).
Préparatifs
➜ Pour réaliser l’exercice, nous allons établir un lien entre une feuille de style CSS et la page HTML que nous avons élaborée lors du cours précédent. Téléchargez les pages HTML sur lesquelles vous avez travaillées lors de la séance précédente.
La démarche que nous suivons vous amènera, pas à pas, à la mise en ligne d’une page Web optimisée pour la consultation en ligne sur tous les écrans. Le diaporama ci-dessous détaille la démarche complète.
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
Le fichier HTML présenté sur la 5e diapositive est mis à votre disposition avec les fichiers HTML sans CSS à télécharger précédemment.
Compléter et faire valider son code
Nous devons nous assurer que le code que nous avons produit est conforme aux exigences du Web. Pour vérifier cela, nous utiliserons des extensions de Brackets, installées préalablement par nos soins. Il s’agit de :
Beautify
HTML Skeleton
Nu Markup Checker
Leur installation et leur prise en main sont présentées sur cette fiche de cours : Utiliser les extensions de Brackets. Il n’est pas nécessaire d’installer pour le moment l’extension “Open in browser” mentionnée en dernier sur la fiche.
Je rappelle qu’un cours assez bref, intitulé Personnaliser Brackets, est disponible sur ce site.
➜ Je vous demande donc d’installer les 3 extensions mentionnées et d’en tester l’usage. Concernant HTML Skeleton, prenez bien la précaution d’ouvrir une nouvelle page avant de faire des tests !
➜ Je vous propose ensuite de nous retrouver en classe audio sur Zoom, pour faire un point sur l’usage de ces extensions. Je vous montrerai en partage d’écran ou sur de courtes vidéos comment utiliser ces extensions pour optimiser le code de vos pages HTML.
Nous verrons notamment :
Comment indenter rapidement le code source avec “Beautify”
Comment insérer la balise meta viewport avec “HTML Skeleton”
Comment repérer d’éventuels erreurs de codage avec “Nu Markup Checker”
Appliquer un style graphique déjà codé
Pour réaliser la suite du cours, vous avez besoin de télécharger un dossier intitulé « css », dans lequel se trouvent 4 feuilles de style déjà prêtes :
➜ Pensez à décompresser l’archive en .zip pour accéder aux feuilles de styles. Ne modifiez surtout pas le nom du dossier “css” et placez ce dossier dans un dossier nommé comme votre fichier HTML (“django” ou “bilbo” ou “rancoon” etc.) dans lequel se trouvera donc, l’un à côté de l’autre, le fichier “nom-de-fichier.html”et le dossier “css”.
Pour appliquer ces styles à votre page il va être nécessaire de placer dans le <head> une instruction HTML qui va permettre au navigateur de savoir
que telle feuille de style doit être appliquée aux éléments HTML
où trouver cette feuille de style (dans le dossier “css”)
➜ Après avoir placé fichier HTML et dossier CSS dans un même dossier, vous allez donc intégrer la ligne de code ci-dessous, soit en la recopiant, soit en effectuant un copier-coller, soit en utilisant HTML Skeleton puis en complétant la ligne insérée.
Voici la ligne à insérer dans le <head>, sous le <title>, dans sa forme définitive (avec l’url de la feuille de style nommée « simple.css ») :
<link rel="stylesheet" href="css/simple.css">
➜ Le navigateur est averti par le code qu’il va devoir prendre en compte une ressource externe (<link>). Il est averti que cette ressource est une feuille de style (« stylesheet » = feuille de style, en anglais…) et le code lui indique où se trouve la feuille de style et comment elle se nomme (il n’est pas question qu’il tienne compte des feuilles de style voisines…).
➜ Voyez comment le navigateur affiche désormais votre page HTML…
Cela n’a plus rien à voir avec du texte en Times, noir sur fond blanc, collé à gauche de la fenêtre de navigation ! 😀
➜ Changez maintenant le nom de la feuille de style en le remplaçant par celui d’une des 3 autres feuilles placées dans le dossier « css ». Observez les changements.
Vous comprenez maintenant pourquoi il est si important de bien structurer son texte dès le départ. En effet, il est possible de proposer des variantes de présentation, sans toucher au texte. Il suffit de changer ou modifier la feuille de style. Il y a la structure HTML d’un côté et la présentation CSS de l’autre. Ces deux types d’instructions sont pris en compte simultanément par le navigateur.
Le gros avantage de ce procédé est de pouvoir utiliser une même feuille de style pour des textes différents ou des styles différents pour un même texte… en modifiant une simple ligne de code ! 😉
Intégrer une des images collectées
Nous avons vu (à la fin du cours précédent) comment collecter et intégrer une image. Le moment est venu de placer les instructions HTML adéquates dans votre code source, pour que l’image de votre choix soit affichée dans le corps de la page. Je vous montre donc le code à placer à l’endroit qui vous semble le mieux adapté pour illustrer votre texte.
➜ Placez le dossier « img » dans lequel vous avez placé vos images (cours précédent) dans le dossier qui contient déjà le fichier .html et de dossier « css ». Intégrez le code indiqué plus bas en indiquant le nom de l’image de votre choix à la place de « nom-image.jpg ».
<img src="img/nom-image.jpg" alt="Description du sujet de l'image à des personnes malvoyantes">
➜ Ce code indique au navigateur qu’il doit afficher une image (<img>). Il indique également au navigateur l’endroit où se trouve l’image (ici, dans le dossier « img » situé à la racine — à coté — du fichier HTML). Le texte alternatif est complété afin de remplir pleinement son rôle (voir la fin du cours précédent).
Observez alors le résultat dans la fenêtre de votre navigateur. Testez l’affichage en version mobile ou responsive (touche F12 dans Chrome…).
➜ Changez de feuille de style (en modifiant le nom de la feuille appelée dans le <head>… Observez les changement de présentation dans votre navigateur !
Parvenus à ce stade, je vous invite à partager vos productions en commençant par renommer votre page HTML. Nommez-la “index.html”. Celle-ci sera la page d’accueil de votre futur site “one-page”. Ce site sera donc constitué du dossier contenant :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Compressez le dossier complet du futur site avant de le partager sur l’espace Slack de la formation.
Personnaliser les feuilles de style CSS
Pour vous faciliter la tâche, je vous ai préparé des feuilles de style prêtes à l’usage. Il se peut qu’elles ne vous satisfassent pas tout à fait et que vous ayez envie de les modifier. C’est tout à fait envisageable.
Pour faire cela, il va falloir apprendre à parler CSS. Comme pour le HTML, au début on y comprend pas grand chose et petit à petit on apprend à discerner les endroits où il est possible d’effectuer des modifications sans tout détruire.
Évidemment, vous allez parfois casser des feuilles de style… Ce n’est pas grave ! Cela ne va pas endommager votre navigateur ou votre éditeur de code, encore moins votre navigateur. Vous reviendrez en arrière, vous repartirez de votre point de départ et vous serez plus vigilants 😉
Changer les couleurs du site
Maintenant que nous disposons d’un dossier complet avec index, css et dossier d’images, nous ne parlerons plus de page HTML mais de site Web. Certes, le dossier du site n’est pas encore hébergé sur un serveur mais il s’agit bien d’un produit de communication destiné à la consultation avec un navigateur !
Les couleurs utilisées dans les feuilles de styles que je vous ai transmises ne vous plaisent pas forcément… Elles ont cependant été choisies pour fonctionner de manière optimale les unes avec les autres.
Nous allons envisager de modifier les couleurs utilisées dans la feuille de style nommée “dark-one.css”. Pour cela nous allons commencer par la dupliquer et par la renommer “dark-two.css”
En ouvrant le dossier de votre site dans Brackets et en ouvrant la feuille de style “dark-two.css”, vous remarquerez que j’ai indiqué en commentaire, en tête de fichier, les références des 3 couleurs utilisées dans la feuille de style “dark-one.css”. En survolant avec votre curseur le nom des couleurs, un aperçu de la couleur s’affiche dans un petit cadre.
Si vous cliquez sur le nom de la couleur et que vous tapez “cmd-E”, une fenêtre de paramétrage des couleurs s’ouvre dans Brackets et facilite grandement les changements à effectuer.
Vous constaterez que les 3 couleurs utilisées sont des variantes de teintes semblables ou analogues : une variante sombre, une variante moyenne et une variante claire. Pour modifier le nuancier, je vous propose de changer la teinte moyenne puis, à partir de cette teinte moyenne, de créer les variantes sombres et claires (une vidéo à ce sujet est disponible sur Slack).
➜ Commencez par faire vos changements dans une duplication de la ligne de commentaires. Vous utiliserez ensuite la fonction “rechercher-remplacer” pour changer les mentions des couleurs dans toute la feuille de style.
➜ Observez les changements de couleurs opérés. La couleur sombre est toujours la couleur de fond. La couleur claire est utilisée pour le texte. La mouleur moyenne met en valeur les titres,le chapô, les filets et les bordures du cadre de l’image.
En apprendre un peu plus sur les CSS
Voici quelques sites que je vous recommande pour débuter avec les CSS.
https://marksheet.io/ (à consulter avec Chrome pour demander la traduction automatique en français)
Dans ce cours nous allons apprendre à organiser les contenus d’une page HTML pour préparer leur stylisation. Pour cela nous allons utiliser deux structures rédactionnelles basées les 2 plans indiqués ci-dessous.
h1 – p – h2 – p – p – h2 – p – p – h2 – p – ul – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p – h2 – p – ul – p
Nous allons utiliser des séparateurs pour isoler certains contenus et intégrer dans la page une citation, une liste de liens et des mots importants, afin d’enrichir le contenu de l’article. Nous verrons pour terminer comment intégrer une image.
Auparavant, nous allons détailler deux points importants :
les 4 composants de toute rédaction
les similitudes entre design “print” et design “hosted”
Les 4 composants de toute rédaction
Faisons le point sur le rôle central de la rédaction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.
La rédaction Web (et toute rédaction, en général) est la combinaison de 4 composants : une structure cohérente, un vocabulaire précis, une syntaxe pertinente et une juste orthographe.
Sur MapsOfMind, pour ramener la carte à une vue d’ensemble après avoir zoomé sur un des sujets : rafraîchir simplement la page . 😉
Lors de la création d’une page HTML simple, la structure rédactionnelle est mise en place en même temps que les balises de titrage (heading), de paragraphes et de listes. La structure de base sur laquelle vous avez travaillé jusqu’à maintenant était celle-ci :
h1 – p – h2 – p – p – h2 – p – p
Concernant le choix du vocabulaire, de la syntaxe et de l’orthographe, vous avez collecté sur le Web des textes que je vous ai invité à simplifier (ou à étayer…) pour coller davantage à la structure ci-dessus.
➜ Je vous recommande cependant de relire vos textes simplifiés et, si nécessaire, de modifier la syntaxe (l’ordre des mots ou des phrases). ➜Ajustez également le vocabulaire pour que les idées à transmettre soit clairement communiquées… ➜ Pour terminer, faites relire vos textes à des personnes compétentes si vous avez du mal à orthographier correctement vos textes.
Similitudes en design “printed” et “hosted”
Avant de vous demander de travailler sur la structuration du texte intégré dans votre page HTML, je voudrais revenir sur les opérations communes à la communication sur papier et la communication sur fenêtre de navigation. Je vais insister sur 3 points :
La structuration quelque soit le format
la stylisation pour montrer l’important
la coloration pour favoriser la lecture
Structurer quel que soit le format
Je mets en relation de similitude la communication imprimée (printed) et la communication hébergée (hosted). La première a pour support de lecture un support analogique de dimensions fixes (le plus souvent une feuille de papier). La seconde a pour support de lecture un support numérique de dimensions variables (la fenêtre d’un navigateur, affichée en plein écran ou non).
La page imprimée est structurée dans un format donné, une fois pour toutes, mais la page hébergée est structurée, une fois pour toutes, pour plusieurs dimensions d’affichage. 😉
Cela nous oblige, en design graphique (quel que soit le mode de publication), à concentrer nos efforts sur la structuration des informations. Nous devons veiller à ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de présentation au public.
S = DHO (Structuration = découpage à chaud = Découpage + Hiérarchisation + Ordonnancement)
La nécessité de structurer les contenus ou blocs d’informations, à l’échelle de la page entière ou des différentes parties de la page n’est pas le seul point commun entre le design pour l’imprimé et le design pour l’hébergé.
Styliser pour montrer l’important
La stylisation est la modification des formes et des couleurs du contenu d’une page pour rendre la communication plus efficace (et non principalement plus belle…). il s’agit de mettre en évidence ce qui est le plus important.
En design graphique, cela se traduit très rapidement par le choix d’un nuancier de couleurs et d’une combinaison typographique, tous deux fonctionnels. Cependant, les concepteurs des navigateurs n’ont pas jugé utile d’aller plus loin que la mise en place de styles graphiques très simples (styles par défaut des navigateurs). Ils laissent aux designers graphiques le soin d’assurer toute la stylisation supplémentaire voulue, en fonction des contextes des projets de publication.
Les styles par défaut des navigateurs
Les navigateurs disposent de styles graphiques par défaut. Ces styles, très simples, permettent de visualiser les choix structurels effectués.
Les deux couleurs utilisées sont le noir et le blanc. Noir pour les textes et blanc pour l’arrière plan. La famille typographique utilisée par défaut est le Times, utilisée en 4 fontes (Regular, Bold, Italic et Bold italic).
Les titres de niveau 1 sont présentés avec une force de corps plus importante que les titres de niveau 2. Il en est de même pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. Tous les titres sont en caractères gras (Bold) et tous les paragraphes sont affichés en caractères normaux (Regular)
Notez qu’en design pour le Web, la graisse d’un caractère est indiquée par un nombre allant de 100 à 900. Un caractère normal (Regular) a une graisse de 400, un caractère gras (Bold) a une graisse de 700.
➜ UTILISER L’EXTENSION WHATFONT
Pour analyser les polices de caractères d’une page Web, je vous recommande l’utilisation de l’extension Whatfont. Même s’il est possible d’inspecter les polices de caractères avec les outils de développement de Chrome (Afficher > Options pour les développeurs > Outils de développement), l’extension WhatFont offre quelques avantages (voir ci-dessous)
Désactiver les CSS dans Chrome
➜ Ayant finalisé la rédaction de vos textes intégrés dans une page HTML, pouvez-vous percevoir la structuration de vos contenus rédactionnels (titres, sous-titres, paragraphes), en l’absence de toute stylisation CSS ?
Pour désactiver l’affichage des styles d’une page Web, dans le navigateur Chrome (recommandé dans le cadre de ce cours), je vous recommande l’installation de l’extension Web Developper.
En cliquant sur “Disable All Styles”, vous désactivez les CSS de la page consultées. En cliquant également sur “Disable Browser Default Styles”, vous désactivez les feuilles de styles par défaut appliquées par le navigateur.
Évaluer la perception de la structure sans stylisation
Le résultat est un affichage des contenus sous leur forme la moins sophistiquée qui soit. Dans ce cas, pouvez-vous affirmer que le plan rédactionnel est visible et que le message transmis est clairement compréhensible ? Si c’est le cas, c’est que la structuration (DHO) est bonne !
Vous constaterez visuellement qu’il est plus facile de percevoir la structure d’un texte lorsque ce texte est présenté (ou affiché) sur une petite largeur que sur une grande largeur.
Pour vous en rendre compte, quand vous êtes dans Chrome, appuyez sur la touche F12 de votre clavier (ou menu Afficher > Options pour les développeurs > Outils de développement) puis sur le bouton de simulation d’affichage sur mobile (Toggle device toolbar). Veillez à ce que le réglage de votre fenêtre de simulation soit réglée sur “Responsive” et actionnez la poignée de réglage de la largeur de l’affichage.
Coloriser pour favoriser la lecture
Nous avons vu quelle était l’importance du contraste de valeurs en design graphique, en particulier dans la communication imprimée. Voir pour rappel le cours intitulé Les couleurs en design graphique.
Dans la communication hébergée, la question du contraste des couleurs est centrale ! Il existe même des normes d’accessibilité très contraignantes imposant des ratios de contraste très élevés. La norme AAA, par exemple, permet difficilement d’utiliser plus de 2 couleurs pouvant être appliquées à des textes de taille inférieure à 14 pt (19 px environ) sur un fond donné.
Une couleur, en design imprimé ou en design hébergé, doit toujours être envisagée appliquée à une forme disposée sur un fond. Une couleur considérée isolément n’a aucune fonctionnalité en communication visuelle !
La couleur noire utilisée par défaut par les navigateurs pour afficher les textes codés en HTML ne présente de lisibilité maximale que sur fond blanc.
Que penseriez-vous d’un navigateur qui afficherait les textes de cette manière ? Pourtant le texte est bien noir !
Compléter la structure de la page HTML
Ce qui a été produit
Lors des activités proposées à la fin du cours précédent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis à votre disposition. Ces gabarits présentaient 2 structures rédactionnelles schématisées ainsi :
h1 – p – h2 – p – p – h2 – p – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p
Je vous ai laissé libres de choisir la structure qui vous semblait la mieux correspondre à vos besoins en matière de rédaction. La seconde structure nécessite en effet la mise en place d’un texte plus long (et demande donc plus de travail) !
J’ai insisté sur le découpage des textes collectés pour qu’il corresponde à ces plans. Je vous ai demandé de bien équilibrer la longueur de vos paragraphes (en simplifiant le texte si nécessaire).
Je vous ai également demandé de bien aérer la présentation de votre code source pour faciliter la vision de votre structure dans votre éditeur de code (et aussi dans Slack, quand vous publiez votre fichier html en pièce jointe).
➜ Avant d’aller plus loin, veillez à ce que vos titres permettent immédiatement de comprendre de quoi il est question. Il s’agit de faire en sorte que le message essentiel du texte soit perceptible au premier coup d’œil, à la lecture des titres et des sous-titres.
Le premier paragraphe est un paragraphe d’introduction nommé chapô. Il résume tout ce dont il va être question dans le suite du texte. Sa lecture doit donner envie de lire l’article, en informant déjà très clairement l’internaute sur l’essentiel !
Ce que nous allons ajouter
1 – Ajouter des filets séparateurs
Comme vous avez pu le voir sur la précédente image, quand tous les styles sont désactivés, les séparateurs revêtent une importance particulière. Dans l’exemple qui nous intéresse, ils permettent de mettre en valeur le chapô.
➜ Je vous invite donc à placer un filet séparateur avant et après le premier paragraphe qui suit le titre de niveau 1. Cela se code à l’aide de la balise autofermante <hr> (à ne pas confondre avec <br>).
Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une épaisseur ou une longueur différente.
➜ Vous allez également ajouter un filet séparateur à la fin de votre texte avant d’insérer un nouveau paragraphe d’une seule ligne de texte mentionnant votre nom dans une phrase comme celle-ci “Exercice réalisé par Prénom Nom”.
Cela va me permettre de ne pas trop me mélanger les pinceaux en prenant connaissance de vos publications 😉
2 – Ajouter une citation
➜ À l’endroit que vous jugerez le plus approprié, je souhaiterais que vous intégriez une citation. Inutile d’ajouter les guillemets, ceux-ci seront affichés (ou non…) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non…) avec l’application des styles.
Il est intéressant de savoir comment les navigateurs gèrent l’affichage de ce type de contenu (généralement en décalant la citation par rapport à l’alignement à gauche des paragraphes de texte courant)
Une citation s’intègre dans le code source entre les balises <blockquote> et </blocquote>.
3 – Ajouter une liste de liens
Votre texte traite d’un sujet dont il a sûrement été question dans d’autres articles en ligne, sur d’autres sites ou même, dans des livres publiés chez tel ou tel éditeur. Communiquez ces références à vos lecteurs.
➜ Commencez par élargir le champ de votre recherche et faites une sélections des meilleurs articles et des meilleurs références en ligne concernant le sujet de votre texte. Vous intègrerez les liens menant aux sites sélectionnés dans une liste non ordonnée que vous allez créer, dans un chapitre intitulé “En savoir plus”. Ce chapitre et la liste de liens seront placés entre le dernier chapitre de votre texte actuel et le dernier séparateur mis en place précédemment.
Une liste non ordonnée est aussi nommée “liste à puces” du fait que les navigateurs affichent chaque item d’une telle liste précédé d’une puce.
La création d’une liste non ordonnée se code entre les balises <ul> et </ul>, chaque item de liste (chaque lien dans notre cas…) étant positionné entre les balises <li> et </li>.
Une liste ordonnée serait codée entre les balises <ol> et </ol>.
Comment coder un lien hypertexte ?
Un lien hypertexte est codé entre les balises <a> et </a>. Le texte placé entre ces balises est nommé “intitulé du lien”. Les navigateurs affichent les intitulés de lien en bleu et soulignent cet intitulé. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.
Pour rendre le lien efficace, il est nécessaire d’encoder l’adresse URL de la page cible dans la balise d’ouverture. On insère donc cette adresse de la manière suivante :
Dans cette ligne de code, https://domaine-site-cible.xxx est l’URL fictive du site cible et le code qui suit est une instruction spéciale. Elle ordonne au navigateur d’ouvrir la page Web ciblée dans une nouvelle fenêtre ou un nouvel onglet. Cette dernière instruction permet à l’internaute de ne pas perdre la page où il se trouvait avant de cliquer sur l’intitulé du lien, au cas où il rebondirait de lien en lien bien loin de votre page. 😉
➜ Examinez ci-dessous un exemple de liste de liens encodés en HTML, précédée d’un paragraphe d’introduction et du titre de niveau 2 “En savoir plus”.
Vous repèrerez également sur cette capture d’écran le codage d’une citation, entre balises <blockquote> et </blockquote>. Dans cette citation, les mentions oranges ( ) sont le codage de caractères insécables. Vous constaterez aussi que le Prénom et le Nom écrits dans la dernière ligne sont placés entre les balises <strong> et </strong>, ce qui les affiche par défaut en gras dans une fenêtre de navigateur.
4 – Mettre en valeur les mots importants
Votre article commence à prendre tournure ! Il est cependant entendu que dans le cadre de ce cours, je ne vous parle pas de référencement naturel ni d’expressions ou de mots clés pouvant optimiser le référencement de votre article par les moteurs de recherche. Cela vous obligerait à remanier bien davantage vos textes. Si le sujet vous intéresse, vous pouvez toujours vous référer aux cours Rédaction Web et Référencement Naturel.
Il existe cependant une technique simple pour optimiser le contenu d’une page Web en vue d’une meilleure indexation sur les pages de résultats des moteurs de recherche. Il s’agit tout simplement de mettre en valeur les mots importants du texte, tous axés sur le sujet principal de l’article. Pour cela il convient de les encoder entres les balises <strong> et </strong>.
➜ Mettez entre balises <strong> et </strong> les expressions ou mots importants de votre texte.
Le navigateur, comme nous venons de le voir, affiche en gras les mots “forts”. L’affichage en gras attire l’attention sur ces mots (comme pourrait aussi le faire un affichage en italique…). Mais c’est la rôle sémantique de la balise <strong> qui importe le plus ! La balise <strong> permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.
➜ Je vous propose un test imparable pour savoir si vous avez mis en évidence les bonnes expressions ou les bons mots. Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras. Si vous parvenez à saisir le message essentiel de votre article, alors vous avez fait du bon travail… Sinon, vous devinerez sans peine ce qu’il faut améliorer 😉
L’alternative <b>
Il existe une autre balise permettant d’afficher un texte en gras, sans pour autant que ces mots en gras soient jugés “forts” ou importants. Il s’agir de la balise <b>, qui n’a pas de fonction sémantique particulière.
➜ Je vous invite, pour tester l’usage de la balise <b>, de mettre entre <b> et </b> tout le premier paragraphe, le fameux chapô (ou chapeau, selon les orthographes…).
Si des mots ont été placés entre <strong> et </strong> dans le chapô, ils ne seront pas affichés “deux fois plus gras”. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.
Fin de la structuration et préparation de la stylisation
Si vous examinez maintenant votre texte dans la fenêtre de votre navigateur, même en désactivant les styles par défaut du navigateur, vous devriez vous rendre compte des avancées réalisées.
Votre texte est prêt à être stylisé ! Je ne vous ai pas fait intégrer d’image pour le moment. L’affichage des images sans application de style CSS détruirait l’ordonnancement visuel sur lequel nous avons travaillé jusqu’à maintenant, en particulier si ces images sont de grande taille.
Nous aurons l’occasion d’insérer plus tard une illustration dans notre page Web. Je vais vous montrer dès maintenant comment nous procèderons.
Collecter des illustrations
La première étape consiste à se mettre en quête d’une illustration pertinente pour votre article. J’utilise ici le terme “illustration” pour désigner une image servant à “illustrer” un texte. Il peut s’agir d’une photographie, d’un dessin, d’une infographie, d’un pictogramme, etc.
Pas question de choisir une image qui ne soit pas libre de droits ! Vous irez donc faire des recherches thématiques sur le site pexels.com (qui effectue ses sélections sur plusieurs sites d’images en même temps). Vous pourrez aussi choisir une illustration dessinée sur la banque d’images Ouch.
Si vous êtes inspirés, vous pourrez prendre en main de formidables outils de de photomontage et d’assemblage de dessins tels que Photo Creator et Vector Creator. Vous produirez alors sans difficulté des illustrations personnalisées correspondant parfaitement à nos sujets… et cela sans débourser un centime ni même devoir vous inscrire sur une plateforme Web.
Si vous souhaitez illustrer votre texte avec des icônes, vous en trouverez un grand nombre sur icones8.fr ou flaticon.com. Vous n’avez que l’embarras du choix (gratuit et payant…) !
➜ Collectez ou produisez des images susceptibles d’illustrer votre texte avec pertinence. Partez du principe que pour une image publiée il faut en collecter 4, afin de faire le meilleur choix possible ! Placez le fruit de votre collecte dans un dossier que vous nommerez « img ».
Il n’est pas défendu d’utiliser Photoshop ou Illustrator. Souvenez-vous cependant que les images matricielles destinées à la publication en ligne sont en RVB et que leur formats d’enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (pas de PSD, de TIF ou TIFF !). Pour les images vectorielles, leur format d’enregistrement est uniquement le SVG (pas de AI ou d’EPS !)
Intégrer une image
L’intégration d’une image s’effectue en paramétrant correctement la balise autofermante <img>. Il est nécessaire d’une part de préciser dans la balise <img> quelle est la source de l’image (indiquer au navigateur où se trouve l’image à afficher). D’autre part, il est obligatoire de formuler un texte alternatif (toujours dans la balise <img>).
Le texte alternatif sert à trois choses :
décrire l’image aux moteurs de recherche
offrir une alternative d’affichage si le navigateur ne parvient pas à afficher l’image
permettre aux robots lecteurs utilisés par les personnes malvoyantes de leur décrire l’image
Ce rouage essentiel du référencement des images est donc un exercice supplémentaire de rédaction. Vous en saurez davantage en consultant le dernier chapitre du cours RWRN.
➜ Examinez ci-dessous le code d’intégration de l’image “woman-typing-writing-1800×1200.jpg”. Dans quel dossier est-elle placée ? Où se trouve ce dossier ?
Vous noterez que l’image est nommée sans utilisation de lettre majuscule ni de chiffre en début d’intitulé, sans utilisation de point ailleurs que devant l’extension, sans lettre accentuée ni espace.
Par ailleurs, les dimensions de l’image, en pixels, sont indiquées en fin d’intitulé de l’image. Cela s’avère très utile en design pour le Web, vous le découvrirez très vite 😉
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 codeBrackets. 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.
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”…
➜ 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 decodecademy.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.fr, c’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !
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é).
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’indicationde 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’indicationde 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.
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…
Gérer le consentement
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
