Initiation aux langages HTML-CSS

Cette formation en 1 seul module de 16 heures est incluse dans la formation “Initiation au codage Web”. Elle est complétée par les formations “Initiation aux frameworks CSS” et “Initiation à CSS Grid et à Flexbox par la BD numérique”.

Présentation

Prérequis :

• Maîtriser la gestion de fichiers et dossiers sur un poste informatique
• Savoir installer un logiciel sur un poste informatique
• Disposer d'un périphérique de sauvegarde (clé USB ou disque dur externe) ou d'un espace de sauvegarde dans le Cloud (DropBox, pCloud ou autre)
• S'intéresser à la publication en ligne de contenus rédactionnels ou picturaux

Durée : 4 demi-journées (16h)

Objectifs :

• Éditer une page HTML à partir de l'éditeur markdown StackEdit
• Personnaliser cette page en utilisant une feuille de style CSS sans classe

Les pages Web réalisées en formation seront mises en ligne, en utilisant le client FTP Filezilla, sur les serveurs d'un hébergeur offrant un compte gratuit.

Outils utilisés :

• Un navigateur Web (Chrome)
• Un éditeur de code (Brackets ou Phoenix)
• Un éditeur Markdown (StackEdit)
• Un logiciel client FTP (Filezilla)

Programme

L'ordre dans lequel le programme des séquences est abordé peut varier légèrement d'une session à l'autre.

Séquence 1 : Identifier les principaux composants du Web et identifier les langages d’édition d'une page Web

Identifier les principaux composants du Web et d'Internet

• Identifier les composants de base permettant à Internet et au Web de fonctionner et le rôle des composants identifiés.
• Matérialiser le fonctionnement du Web à l'aide d'éléments colorés connectés et d'étiquettes identifiant les composants de base du réseau.

Identifier les langages d’édition d'une page Web et leurs caractéristiques

• Identifier les langages utilisés pour éditer une page Web et le rôle dévolu à chacun.
• Identifier l'imbrication des éléments de code dans les langages utilisés pour éditer des pages Web.

Séquence 2 : Éditer une page HTML avec Stackedit et modifier une page HTML avec un éditeur de code

Éditer une page HTML avec Stackedit et le langage Markdown

• Utiliser l'application en ligne Stackedit pour éditer des pages d'information en langage Markdown.
• Exporter les pages éditées en HTML, en utilisant les différentes options d'exportation de Stackedit.

Modifier une page HTML avec un éditeur de code

• Examiner le code source de la page exportée dans un navigateur et un éditeur de code (distinguer le code du langage naturel).
• Identifier la structure élémentaire d'une page HTML et les principaux éléments HTML utilisés pour hiérarchiser le texte à publier.

Séquence 3 : Styliser une page Web avec une feuille de style CSS sans classe

Changer la stylisation en changeant de feuille de style

• Identifier le lien entre une page HTML et une feuille de style CSS externe et repérer le code HTML utilisé pour relier les 2 documents.
• Modifier la stylisation d'une page HTML en associant cette page HTML à une autre feuille de style CSS externe.

Utiliser des feuilles de style CSS sans classe

• Identifier le rôle respectif des attributs “id” et ”class” dans le code HTML et la manière dont ces attributs sont exploités dans une feuille de style CSS.
• Utiliser des feuilles de style sans classe pour styliser des pages HTML simples.

Séquence 4 : Mettre en ligne un site Web en utilisant Filezilla et les services gratuit d'un hébergeur

Préparer la mise en ligne d'un site Web simple

• Constituer un dossier de site Web en rassemblant ses composants de manière à préserver le fonctionnement du site après sa mise en ligne.
• Créer un compte gratuit chez l'hébergeur Alwaysdata.

Utiliser le logiciel client FTP Filezilla

• Paramétrer le logiciel client Filezilla pour transférer un dossier de site Web sur les serveurs d'Alwaysdata.
• Effectuer le transfert du dossier de site Web constitué début de séance.