HTML et CSS

L'Hypertext Markup Language, abrégé HTML, est le format de données conçu pour structurer les pages Web. Il s'agit d'un langage de balisage qui permet d'écrire des documents hypertextuels liant les différentes ressources d'Internet avec des hyperliens, d'où son nom. Il permet également d'inclure des ressources multimédia, des formulaires de saisie et des éléments programmables tels que des applets.

Introduit en 1996, le langage CSS est, quant à lui, un langage informatique qui décrit la présentation formelle des documents HTML. L'un des objectifs majeurs de CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document HTML et de décrire toute sa présentation dans une feuille de style CSS séparée.

Table des matières

Ce chapitre a pour but de décrire les différentes étapes de réalisation d'un site web statique à l'aide des langages HTML et CSS. Les liens suivants permettent d'atteindre directement ses principales sections:

• Introduction
• Hébergement
• Liens et images
• Citations et listes
• Tableaux et formulaires
• Standards HTML
• Feuilles de style
• Modèle de boîte
• Positionnement

Objectifs

Au terme de ce chapitre, chaque élève devra être capable de :

• Langage HTML:
  
  • expliquer le fonctionnement d'un site Web en mettant en évidence le rôle du navigateur, du serveur Web, des URL, du protocole HTTP ainsi que des langages HTML et CSS dans la réalisation d'un site Web;
  • créer un site Web à l'aide d'un éditeur de texte et d'un navigateur;
  • parcourir et créer des répertoires sur un serveur distant à l'aide du protocole FTP;
  • héberger un site Web sur un serveur distant à l'aide du protocole FTP, directement en lignes de commande ou grâce à un logiciel client;
  • décrire le rôle des différentes parties d'une URL;
  • décrire la structure générale d'un fichier HTML;
  • expliquer et illustrer les concepts d'élément, de balise et d'attribut;
  • retrouver les attributs standards d'une balise ainsi que leurs valeurs respectives admises;
  • insérer un élément HTML composé de balises et d'attributs;
  • insérer des balises HTML imbriquées;
  • concevoir une page HTML comprenant des titres, des paragraphes, des citations, des liens hypertextes, des sauts de ligne, des images, des listes (dés)ordonnées, des formulaires et des tableaux;
  • expliquer, illustrer et créer les trois types de liens hypertextes;
  • expliquer le rôle d'une ancre de destination dans la création d'un signet;
  • déterminer le chemin relatif et absolu d'une ressource Web à partir d'un document de départ;
  • expliquer les caractéristiques principales des formats d'images JPEG, GIF et PNG;
  • expliquer le processus de récupération d'images d'un site par le navigateur;
  • distinguer un élément en ligne d'un élément de type bloc et illustrer cette différence à l'aide d'un exemple;
  • regrouper des éléments de type bloc ou en ligne à l'aide des balises <div> et <span>;
  • insérer un tableau contenant des cellules fusionnées par ligne ou par colonne ainsi qu'imbriquant un autre tableau;
  • expliquer le mode de fonctionnement de la transmission de données d'un formulaire à une application web;
  • distinguer les deux méthodes de transmission de données utilisées avec un formulaire et mettre en évidence une situation d'utilisation pour chacune d'elles;
  • donner une valeur par défaut à l'un des champs d'un formulaire;
  • mettre en page un formulaire à l'aide d'un tableau sous-jacent;
  • indiquer au navigateur le type de document de la page HTML créée;
  • indiquer le type d'encodage utilisé dans la page HTML;
  • vérifier la conformité d'un document HTML selon les règles du W3C à l'aide de l'outil de validation en ligne;
  • automatiser la construction du code HTML d'une page Web à l'aide d'un script Python récupérant des données depuis un fichier csv.
• Langage CSS:
  
  • exposer les avantages à séparer la structure et la présentation d'un document;
  • décrire la présentation stylistique d'un fichier HTML à l'aide de l'attribut style, d'une feuille de style interne décrite dans la balise <style> ou externe reliée par la balise <link>;
  • construire une règle de style CSS en identifiant le sélecteur, la déclaration, les propriétés et leurs valeurs respectives;
  • retrouver les propriétés d'une règle de style CSS ainsi que leurs valeurs respectives admises;
  • expliquer, illustrer et outrepasser l'héritage en cascade;
  • différencier les sélecteurs d'éléments, de classes, de pseudo-classes ou d'identifiants et expliquer leur champs d'application;
  • gérer les polices de caractères d'un document (choix, taille, graisse, soulignement de la police);
  • gérer la mise en forme d'un texte (alignement, soulignement, indentation, interligne,...)
  • distinguer les mesures d'unités relative et absolue;
  • appliquer une couleur à partir de son nom ou de code RGB, exprimé en décimal ou hexadécimal;
  • introduire et positionner une image d'arrière-fond;
  • mettre en forme des liens hypertextes en fonction de leur état;
  • mettre en forme un tableau (marges, bordures, espacement entre et à l'intérieur des cellules, couleur d'arrière-fond,...);
  • gérer la mise en forme d'une liste (non-)numérotée;
  • gérer la position, le contenu, la zone d'ajustement, l'encadrement et la marge d'une boîte;
  • expliquer ce qu'est le flux des éléments HTML et comment le navigateur le gère;
  • positionner un élément de manière flottante, absolue, fixe ou relative;
  • expliquer le positionnement d'un élément flottant par rapport au flux du document;
  • formater un document sur plusieurs colonnes;
  • mettre en page un document de manière fixe, adaptative et fluide.

Présentation

Ce chapitre est complétée d'une présentation faite en classe et accessible dans l'encadré ci-dessous:

Présentation du chapitre