Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 1

Introduction au HTML [1]

Qu'est-ce qu'une page web ?

Une page web est un document numérique qui permet d'afficher du texte, des images et des contenus média variés.

La structure du contenu de la page web est assurée par un document HTML.

Le rendu visuel de la page web est pris en charge par un navigateur web graphique, en fonction des informations de mise en forme inscrites dans la feuille de style, ou CSS.

HTML pour la structure

C'est le HTML qui permet d'élaborer la structure d'une page web.

HTML signifie Hypertext Markup Language, ou langage de balisage hypertexte en français.

Il s'agit d'un langage créé et utilisé pour écrire les pages web en recourant au principe du balisage.

Le balisage sert à donner un sens au contenu de la page web.

HTML n'est pas un langage de programmation à proprement parlé mais bien un langage de balisage, car il n'utilise pas de variables et ne permet pas de décrire une action à exécuter.

Que vous utilisiez un éditeur de texte simple (par exemple, TextEdit sur MacOS) ou un éditeur HTML dédié, un document HTML n'est rien de plus qu'un simple document texte.

CSS pour la mise en forme

CSS signifie Cascading Style Sheet ou, en français, feuille de style en cascade.

Au document HTML s'adjoint une feuille de style - ou CSS - qui contient les règles de style, c'est-à-dire les informations de mise en forme.

Ce sont les règles de style qui permettent de positionner les éléments de contenu de la page. Autrement dit, pour un même contenu, la mise en forme peut varier du tout au tout, comme le montre le site des Jardins Zen .

Nous y reviendrons bientôt.

Voyons d'abord les bases du langage HTML.

Balises HTML

Le langage HTML:

  • sert à structurer le contenu d'une page web;
  • sert à donner du sens au contenu d'une page web;
  • repose sur l'utilisation de balises.

Voici comment est écrit un paragraphe en langage HTML :

<p>HTML repose sur l'utilisation de balises.</p>

Les régles d'écriture des balises

Les balises sont délimitées par des chevrons ouvrant (<) et fermant (>).

Les balises fonctionnent par paires (mais il y a des exceptions), soit une balise ouvrante (<p>) et une balise fermante (</p>).

Ces paires délimitent la portion de texte à laquelle elles s'appliquent.

Parfois, une balise est refermée immédiatement et ne forme pas de paire: c'est une balise dite «vide». Elle délimite alors un point et non une zone du document. Par exemple, la balise <br> , qui commande un changement de ligne, ou la balise <img>, qui commande l'affichage d'une image, sont des balises vides.

Le nom des balises s'écrit tout en minuscules. Par exemple, <strong>...</strong> est la façon correcte d'écrire cette balise.

Le langage HTML est permissif quant à la syntaxe utilisée. En conséquence, il existe plusieurs façons valides de rédiger une balise. Par exemple, on peut aussi bien écrire <p> ...</p> ou <P>...</P>, ou encore <br>, <br /> ou <BR>. Chacune de ces formes est valide. Cependant, les bonnes pratiques en matière d'intégration commandent avant tout l'uniformité dans la rédaction du code. C'est pourquoi les conventions d'écriture énumérées ici, bien qu'elles ne soient pas les seules valides, seront néanmoins imposées dans le cadre des travaux réalisés durant la session.

Les éléments

Un élément est l'ensemble composé :

  • d'une balise ouvrante,
  • d'un contenu et
  • de la balise fermante correspondante.

Voici un exemple de balisage faisant intervenir l'élément <strong> qui permet de souligner l'importance d'une partie du texte :

« HTML est un langage de balisage et non pas un langage de programmation. »

Voici comment on écrit la phrase précédente en HTML:

<p>HTML est un <strong>langage de balisage</strong> et non pas un langage de programmation.</p>

Expérimentez le balisage dans l'encadré suivant : il suffit d'insérez le curseur de la souris dans le code HTML (à gauche) pour le modifier et d'en constater le résultat à l'affichage (à droite). Vous pouvez aussi cliquer sur «Edit on Codepen» afin d'ouvrir une nouvelle fenêtre pour travailler plus librement.

See the Pen c01-html01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Dans cet exemple, nous distinguons :

  • l'élément : <strong>langage de balisage</strong>
  • le contenu de l'élément : langage de balisage
  • la balise ouvrante : <strong>
  • la balise fermante : </strong>

Le contenu « langage de balisage » sera renforcé par rapport au reste du texte à l'aide d'une police plus grasse par le moteur de rendu des navigateurs graphiques.

Voyons maintenant comment on peut caractériser une balise par un attribut.

Les attributs

Plusieurs balises peuvent être personnalisées par des attributs.

Les attributs sont caractérisés par une valeur.

Les règles d'écriture

La valeur des attributs est insérée à l'intérieur d'apostrophes doubles: " ".

La valeur des attributs peut être écrite de différentes manières, selon la nature de l'attribut:

  • plusieurs attributs ont des valeurs prescrites qui doivent être choisies à partir d'une liste de valeurs déterminées par les organismes régulant le web;
  • les attributs globaux comme class et id qui sont utilisés par la programmation ou par les CSS doivent avoir des valeurs écrites sans caractères spéciaux ni espaces; la composition de ces valeurs est libre et est déterminée par les auteurs du code;
  • certains attributs comme alt ou title peuvent contenir des espaces et des caractères spéciaux, et les attributs qui appellent des adresses URL (href, src, etc.) peuvent contenir tous les caractères servant à composer ces adresses.

Exemple 1

<section lang="fr"> ... </section>

Cet exemple présente :

  1. un élément section délimité par les balises HTML,
  2. un attribut lang qui personnalise cet élément ;
  3. une valeur fr qui caractérise cet attribut.

Les différentes valeurs qu'un attribut lang peut prendre sont prescrites; dans ce cas, cet attribut sert à indiquer la langue principale utilisée dans la page html et ses valeurs peuvent prendre les valeurs suivantes: fr pour français, en pour anglais ou encore es pour espagnol, par exemple.

Exemple 2

<small class="copyright">© 2022 Sylvain Lamoureux</small>

Cet exemple présente un élément délimité par les balises small, caractérisé par un attribut class prenant la valeur copyright.

La valeur d'un attribut class ou id ne peut avoir ni espaces ni caractères spéciaux, ni débuter par un chiffre.

Exemple 3

<img src="http://images.lpcdn.ca/924x615/201608/19/1248009-equipe-soccer-feminine-canadienne-merite.jpg" alt="L'équipe canadienne féminine de soccer célèbre sa victoire contre le Brésil.">

Cet exemple présente un élément img caractérisée par un attribut src prenant la valeur "http..." et par un attribut alt prenant la valeur "L'équipe...".

Travail formatif 1

Dans le code HTML de l'exemple suivant, remplacez l'adresse de l'image par l'adresse d'une image de votre choix de votre choix que vous trouverez sur un site web :

See the Pen c01- html02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Notez qu'un attribut tel que alt peut avoir des valeurs comprenant des espaces, des chiffres et des caractères spéciaux.

Observez bien l'exemple précédent: l'élément img contient deux attributs, soit src et alt. Un élément peut donc inclure plusieurs attributs lorsque nécessaire, chacun de ces attributs étant séparé par une espace.

L'imbrication des éléments

Les éléments peuvent être imbriqués.

Toute page Web comporte des imbrications d'éléments.

Les règles d'écriture

Les balises des éléments imbriqués ne doivent pas se chevaucher.

Par exemple, le titre de cette page contient l'imbrication suivante :

<h1>Les bases du <abbr title="HyperText Markup Language">HTML</abbr>: l'imbrication des éléments</h1>

Dans cet exemple:

  • l'élément abbr est imbriqué à l'intérieur de l'élément h1;
  • l'élément abbr doit donc absolument se refermer avant que l'élément h1 ne se referme.

C'est comme si un élément HTML était une boîte qui peut contenir une autre boîte ou être contenu dans une autre boîte.

Une autre façon de visualiser le HTML est justement de l'afficher sous forme de boîtes imbriquées. Ce type d'affichage s'appelle le « modèle du document »:

Le modèle de document de l'exemple cité plus haut.
Modèle du document

L'imbrication est omniprésente dans les pages Web

L'imbrication des balises est présente dans toute page Web.

En fait, elle est incontournable dans la structure de base de la moindre page Web.

Qu'elle est la structure minimale d'une page Web?

Travail formatif 2

Créez un dossier à l'endroit qui vous convient sur votre ordinateur et nommez-le en indiquant votre groupe, votre nom de famille, l'initiale de votre prénom et l'identication du travail, comme ceci: gr1_tremblayp_tp1 (en substituant tremblayp pour votre nom de famille et l'initiale de votre prénom).

Ouvrez le logiciel Brackets situé dans le dossier Applications de votre ordinateur :

  • À partir du menu Fichier, choisissez Ouvrir un dossier ;
  • Rendez-vous au dossier que vous venez de créer et sélectionnez-le pour l'ouvrir dans Brackets ;
  • À Partir du menu Fichier, choisissez Nouveau afin de créez un nouveau fichier HTML et nommez-le index.html ; ce fichier sera inséré automatiquement dans le dossier précédemment créé ;
  • Assurez-vous que le fichier index.html est sélectionné dans la colonne de gauche de Brackets ;
  • Inscrivez du texte dans la section vierge, à droite.
  • Visualisez le résultat dans le navigateur Chrome, pour cela, il suffit de retrouver le fichier index.html sur votre ordinateur et de l'ouvrir en double-cliquant dessus;
  • Suivez les directives du professeur pour la suite.

Jetez un coup d'oeil au code source de la page que vous lisez présentement ; vous constaterez qu'il présente plusieurs niveaux d'imbrication.

Vous pouvez aussi faire la commande clavier ⌥⌘U (Google Chrome) pour faire afficher le code source de n'importe quelle page HTML.

La structure des éléments

Les éléments ne se comportent pas tous de la même façon dans le flux du contenu. Deux grands types d'éléments se distinguent à cet égard.

Deux grands types d'éléments

Les éléments HTML se distinguent en deux grands types:

  1. les éléments de type bloc;
  2. les éléments de type en ligne (ou «au fil du texte»).

Les éléments de type bloc délimitent des blocs entiers comme des titres, des paragraphes, des listes, des citations, etc.

Les éléments de type en ligne sont prévus pour enrichir localement des portions de texte : hyperliens, renforcement, etc.).

Il en découle des spécificités d'affichage.

Exemple

Des éléments de type bloc écrits côte à côte dans le code HTML seront tout de même placés par défaut l'un sous l'autre par le navigateur graphique.

Par exemple, les deux éléments <p> écrits comme suit en HTML :

<p>Premier paragraphe</p><p>Deuxième paragraphe</p>

s'affichent comme ceci par le navigateur graphique:

Premier paragraphe

Deuxième paragraphe

Les éléments en ligne s'appliquent généralement à des portions de texte, tel que des groupes de mots dans une phrase. Par exemple : le renforcement d'une partie de texte avec la balise strong ou encore le balisage d'un acronyme ou d'une abbréviation avec abbr. La plupart des éléments en ligne ont des particularités d'affichage dans les navigateurs graphiques: par exemple, strong est affiché en gras, em est affiché en italique et code est affiché avec une police mono-espace. Mais d'autres éléments en ligne ne montrent aucune particularité à l'affichage.

Contenus autorisés selon les types de balises

  • Un élément de type bloc peut contenir un ou plusieurs éléments de type bloc;
  • Un élément de type bloc peut contenir un ou plusieurs éléments en ligne;
  • Par contre, certains éléments de type bloc, comme les éléments paragraphe (p) et titre (h1, h2,...) ne peuvent inclurent que des éléments en ligne;
  • Un élément en ligne peut parfois renfermer d'autres éléments en ligne, et peut aussi dans certains cas renfermer un élément de type bloc.

La distinction bloc vs en ligne est fondamentale lors de l'étape de la mise en forme du document à l'aide de CSS. Nous y reviendrons.

Quelques balises pour commencer

Tableau 1.1 Quelques balises en ligne
Élément Description
<a> Désigne un lien hypertexte. S'accompagne de l'attribut href qui contient la cible du lien.
Essayez-le!
<b> Identifie du texte stylistiquement particulier, mais sans emphase particulière: la liste de mots clés d'un résumé d'article, le nom d'un produit, etc. Peut être utilisé aussi pour le nom d'une personne dans une suite de noms de personnalités connues par exemple. À utiliser en dernier recours, quand aucun autre élément plus signifiant peut être utilisé.
Essayez-le!
<cite> Indique le titre d'une oeuvre (et non pas l'auteur).
Essayez-le!
<em> Indique du texte à prononcer avec une certaine emphase.
Essayez-le!
<i> Indique des expressions idiomatiques de langue étrangère, du jargon technique, des noms latins de plantes ou d'animaux (généralement affiché en italique dans le navigateur). S'accompagne parfois d'un attribut class pour plus de précision ou encore l'attribut lang pour désigner la langue d'origine de l'expression. À utiliser en dernier recours, quand aucun autre élément plus signifiant peut être utilisé.
Essayez-le!
<img>

Inclut une image dans le document.

S'accompagne de l'attribut src qui indique l'adresse de l'image. S'accompagne obligatoirement de l'attribut alt (texte alternatif pour mal-voyants, pour navigateurs graphiques en mode texte, pour navigateurs audio ou encore lorsque l'image ne s'affiche pas).
Essayez-le!

<q> Délimite une citation courte. Parfois affiché avec des apostrophes doubles dans le navigateur.
Essayez-le!
<small> Indique un cours texte de référence (les « petits caractères »). La source d'un texte, le copyright, la licence d'utilisation, etc. Ne peut être utiliser pour un texte long, comportant plusieurs paragraphes comme le contrat d'utilisation d'un logiciel.
Essayez-le!
<span> Conteneur en ligne neutre, utilisé pour regrouper des éléments au fil du texte.
Essayez-le!
<strong> Indique un texte important. L'importance relative d'un contenu peut être signalée par l'imbrication d'éléments strong.
Essayez-le!
Tableau 1.2 Quelques balises de type bloc
Balise Commentaires
<blockquote> Introduit des citations longues. Lorsque la citation comporte plusieurs paragraphes, il est préférable d'insérer des éléments p à l'intérieur d'un blockquoteplutôt qu'une succession d'éléments blockquote.
Essayez-le!
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

HTML prévoit six niveaux de titres, placés en hiérarchie à partir du titre principal, <h1>.
Essayez-le!

<ol>, <ul>, <li>

Les balises <ol> et <ul> désignent respectivement des listes ordonnées et des listes à puces simples. Elles contiennent exclusivement les éléments d'objet de liste (<li>).
Essayez-le!

<p>

Désigne un paragraphe de texte. Tout comme les titres, cet élément bloc ne peut contenir d'autres éléments blocs.
Essayez-le!

Activité d'évaluation

Contrôle de lecture 1

Le contrôle de lecture 1 aura lieu à la semaine 4.

Il concerne le contenu des pages Web des cours 1 à 3.

Questions de révision du cours 1

  1. Expliquez en quelques mots à quoi sert HTML.
  2. À partir du balisage suivant: <strong>Vive l'intégration!<⁄strong>, identifiez:
    • l'élément complet
    • le contenu de l'élément
    • la balise ouvrante
    • la balise fermante
  3. En supposant que l'adresse d'une image est "images/ours.jpg", donnez un exemple complet de l'utilisation de l'élément <img...> en utilisant cette adresse. Vous devez inclure les attributs obligatoires.

TP1 - Introduction au langage HTML

Le TP1 est une introduction à l'utilisation du langage HTML pour structurer une page web.

Document à remettre

  1. Un dossier nommé : grx_nominitialeprenom_tp1
  2. Ce dossier contient un document html nommé : index.html

Exemple

Nomenclature du dossier de remise

Échéancier

Remettez le travail sur LÉA, dans l'espace prévu à cette fin, au plus tard le vendredi suivant le cours, 9h du matin.

Grille d'évaluation (pondération: 1% de la session)

  1. La syntaxe du code HTML respecte les normes énoncées dans le cours: /1
  2. Les éléments HTML demandés sont présents: /1
  3. Le document remis comporte une extension de fichier « .html »: /1
  4. Le nom du fichier remis respecte les exigences de l'énoncé: /1
  5. Les images s'affichent, les liens hypertextes sont fonctionnels: /1

Total: /5

Travail à faire

Dans le cadre du TP1, vous devez composer la structure d'une page HTML à l'aide de l'éditeur de code Brackets.

Votre travail doit être validé à l'aide du navigateur Chrome (c'est-à-dire que l'affichage doit être satisfaisant sur Chrome).

Exemple de code attendu pour le tp1
Code du tp1
Affichage dans Chrome du code ci-dessus
Affichage dans Chrome de l'exemple du tp1

Spécifications pour le tp1

I. Préparez le travail :

  • Ouvrez l'éditeur de code Brackets.
  • Dans le menu Fichier, choisissez Ouvrir un dossier;
  • Ouvrez le dossier précédemment créé dans le travail formatif (gr1_..._tp1) si ce n'est déjà fait ;
  • Dans Brackets, identifiez le fichier index.html dans la colonne de gauche et cliquez dessus une fois pour l'activer dans la fenêtre d'édition.
  • Écrivez-y le code demandé en suivant les étapes décrites ci-dessous.

II. Réalisez le travail

1. Votre document HTML doit comprendre obligatoirement les balises suivantes:

  • Les balises de base de la page web :
    • html
    • head
    • meta (voir le meta de l'exemple et reproduisez son contenu tel quel)
    • title (personnalisez le contenu de title de manière pertinente)
    • body
  • Les éléments de type bloc :
    • h1, h2, h3 (trois niveaux de titres)
    • p (paragraphes)
    • blockquote (citation longue)
    • ul (liste simple en guise de table des matières de la page)
    • li (éléments de la liste; au moins trois éléments doivent être présents)
  • Au moins deux des éléments de type en ligne suivants:
    • i (signale un mot ou expression d'origine étrangère entre autres)
    • b (balise les mots dont la stylistique est particulière; peut aussi désigner un nom de personne)
    • em (signale sur un mot ou une expression qui doit être prononcé de manière particulière, sur lequel une emphase est mise)
    • strong (signale un mot ou une expression importante)
  • Au moins une image avec ses deux attributs obligatoires:
    • <img src="http..." alt="Description de l'image" />
  • Au moins un lien:
    • a href="http..." (lien fonctionnel vers une autre page web réelle)

2. Votre page doit s'inspirer librement de la structure de l'exemple fourni.

3. Votre document HTML doit présenter une indentation et des changements de ligne pour que sa lecture soit claire (inspirez-vous de l'exemple).

4. Le contenu - y compris l'image ou les images - doit provenir d'une rubrique de votre choix parmi les rubriques du site Wikipédia, version française.

Pour ce qui est de l'image, vous pouvez obtenir l'adresse de l'image de cette façon:

  • cliquez d'abord sur l'image dans la page de la rubrique Wikipédia choisie;
  • cela vous amène dans la page de l'image;
  • cliquez ensuite avec le bouton droit de la souris sur cette image puis validez l'option Copier l'URL de l'image ou Copier l'adresse de l'image pour l'enregistrer dans la mémoire vive.
    Voici comment enregistrer dans la mémoire vive l'adresse d'une image sur le Web.
  • collez ensuite cette adresse (+V) dans votre document texte en tant que valeur de l'attribut src de l'élément img que vous insérez dans votre document HTML.

5. Les éléments de contenu, comme la liste et l'image, peuvent changer de place dans la page et n'ont pas à être identiques à l'exemple présenté.

6. La page html doit obligatoirement comprendre le paragraphe de pied de page décrit dans l'exemple (© 2019...), incluant :

  • un copyright (le sigle © est obtenu par les touches alt+G)
  • votre nom
  • un lien vers la rubrique de Wikipédia où votre contenu a été prélevé (comprenant la balise a href="http..." présentant l'adresse complète de la rubrique)