TCH056 - Programmation Web

<Chapitre 02> HTML

Anis Boubaker, Ph.D.
Prof. Enseignant en informatique

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Le "langage" HTML

HTML: (HyperText Markup Language)
Langage de balisage permettant la représentation du contenu de pages Web

Balise: Unité syntaxique permettant de délimiter du contenu


								1100, rue Notre-Dame Ouest 
										Montréal (Qc) H3C 1K3

Une balise est une instance d'un élément HTML tel que définit dans la norme (Ex.: address, p, div, etc.).

Principale préoccupation:
la sémantique

Le HTML permet de représenter et structurer le contenu affiché sur une page WEB
On s'intéresse à la sémantique de la page WEB et non à sa présentation, ni à son comportement
Avantages:
- Améliorer la maintenabilité de la page
- Améliorer l'accessibilité de la page
- Maximiser les performances de référencement

Le HTML Sémantique

Le HTML sémantique fût l'une des principales évolutions du HTML5.

Plusieurs balises sont apparues ayant de hautes précisions sémantiques, pour faciliter l'interprétation des documents par les moteurs de recherche et les lecteurs d'écran.


						Contenu fortement mis en emphase (strong) qui 
							s'affiche en gras par défaut
						

						Contenu en gras (bold), sans raison interprétable

Contenu fortement mis en emphase (strong) qui s'affiche en gras par défaut
Contenu en gras (bold), sans raison interprétable

Imbrications

Les balises sont imbriquées les unes dans les autres:


						
							Carvel est un 
							hameau 
							en Alberta

Carvel est un hameau en Alberta

Pas de chevauchement entre les balises!

Structure d'un document

                        
							<!doctype html>
							<html>
								<head>
									<!-- .... -->
								</head>	
								<body>
									<!-- .... -->
								</body>
							</html>

html: Balise qui encapsule l'intégralité du document
head: Entête, contient des métadonnées sur la page
body: Le corps du document, partie visible de la page

Structure d'un document

                        
							<!doctype html>
							<html>
								<head>
									<meta charset="utf-8">
									<!-- .... -->
								</head>	
								<body>
									<!-- .... -->
								</body>
							</html>

doctype: Définit le type (langage/formalisme) de document.
meta charset: Définit l'encodage du fichier (presque toujours utf-8)

Structure d'un document

                        
							<!doctype html>
							<html>
								<head>
									<meta charset="utf-8">
									<meta name="viewport" content="width=device-width...">
									<title>Carvel, Alberta</title>
									<link rel="stylesheet" href="ma_feuille_style.css">
								</head>	
								<body>
									<h1>Carvel</h1>
									<p>
										<em>Carvel</em> est un 
										<a href="https://fr.wikipedia.org/wiki/Hameau">
												hameau</a>en <strong>Alberta</strong>,
										dans le centre de la province.
									</p>
									<p>
										Sa population est estimée à environ 19 habitants 
										(recensement de 2019) et son indicatif régional est 
										le 780.
									</p>
								</body>
							</html>

Exercice

Copiez/coller le code de la diapositive précédente dans un document texte ouvert avec Notepad (ou Sublime, Notepad++, etc.)
Enregistrez le fichier sur votre disque dur, en lui donnant le nom "carvel.html"
Ouvrez votre explorateur de fichiers, naviguez vers le dossier contenant le fichier que vous avez enregistrer et double-cliquez dessus

Une Structure arborescente

Syntaxe d'un élément HTML


						<nom_element attribut1="..." attribut2="...">
								Contenu de l'élément
						</nom_element>

Exemple: élément "a" (anchor)


						<a class="lien_extermne" href="http://www.wikipedia.org" 
							target="_blank">Wikipedia</a>

Syntaxe d'un élément HTML

Tout élément doit avoir une balise ouvrante:


								<nom_element attribut1="..." attribut2="...">
										Contenu de l'élément
								</nom_element>

Certains éléments peuvent ne pas avoir de contenu:


								<script src="./js/monscript.js"></script>

Certains éléments n'ont ni contenu, ni balise fermante:


								Pour plus d'informations, voir le graphique ci-dessous: 
								<img src="./images/graphique.png" alt="Le logo">
								Tel que le montre le graphique, ...

Attributs d'un élément

Chaque éléments peut avoir des attributs qui décrivent l'élément.
Un attribut est une clé/valeur qui s'écrit:
Certains attributs sont universels: communs à tous les éléments (ex.: id, class, hidden, spellcheck, lang )
Certains attributs sont restreints à certains éléments spécifiques
- L'élément INPUT comporte 31 attributs spécifiques, en plus des attributs universels.

Exercice 0:

Complétez le code HTML dans l'éditeur afin de créer une page qui affiche un paragraphe de votre choix, surmonté d'un titre. Votre page doit se terminer avec un lien vers le site de l'ETS.

Instructions:

Le titre doit être un titre de niveau 1 (h1)
Le paragraphe doit être encapsulé dans une balise
Lorsque la page s'affiche, l'onglet doit afficher le titre de la page (balise d'en-tête "title")
Le lien vers le site de l'ÉTS doit s'ouvrir dans un nouvel onglet

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Classification des éléments HTML

Plusieurs façons de classer les éléments:

Selon le type syntaxique de l'élément
Selon la fonction de l'élément
Selon le modèle de contenu

La classification est généralement "Multicatégorielle" - L'intersection entre les catégories est non-vide.

Classification par type syntaxique

Six types (selon la section 13.1.2 de la norme)

Éléments sans contenu
br, hr, img, input, link, meta...
Éléments de texte brut
script, style
L'élément template
Éléments de texte brut échappables
textarea, title
Éléments étrangers
MathML, SVG
Tous les autres éléments

Classification selon le modèle de contenu

Classification selon le type de contenu de l'élément HTML
Utilisé par la norme pour déterminer les relations entre les éléments (ex.: quels peuvent être le parent et les enfants d'un élément donné?)
Les éléments sont subdivisés en 7 catégories:

Classification selon le modèle de contenu

Diagramme de Venn

Déplacez la souris sur une catégorie pour en afficher la liste des éléments. Source: Site du WHATWG

Catégories dans la norme

Classification par fonction

Treize (13) catégories (selon la section 4 de la norme)

Classification par fonction (1/2)

Document	html
Méta-données	head, title, link, ...
Sections	body, article, section, ...
Regroupement	p, ol, ul, div, ...
Sémantique textuels	a, strong, data, time, ...
Liens	a, area
Éditions	ins, del

Classification par fonction (2/2)

Intégration de contenu	img, iframe, embed, ...
Données tabulaires	table, col, tr, td, ...
Formulaires	form, input, label, ...
Éléments interactifs	a, button, summary, ...
Code/Scripts	script, noscript, template,...
Éléments personnalisés	a, strong, data, time, ...

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Principaux éléments HTML

La norme HTML5 comporte environ 110 éléments
Nous nous intéresserons, dans ce cours, au principaux éléments. D'autres éléments seront rencontrés dans les prochains cours.
Toujours se reporter à la documentation. Le site Mozilla Developer Network (MDN) est fortement conseillé.

Éléments de flux de base

Ces éléments font partie des éléments les plus utilisés dans un document HTML de base:

NOTE: Ces éléments proviennent de catégories différentes.

--! ... --	A	P
BR	H(1..6)	DIV
IMG	EM	STRONG

Liste des éléments de flux de contenu

Éléments de sectionnement sémantiques

Un élément sémantique a pour but de définir le sens et l'intention de son contenu.
Utile autant pour la personne qui développe, le navigateur, les moteurs de recherche, les lecteurs d'écran, etc.
Permettent de structurer "logiquement" la page, plutôt que d'utiliser des éléments génériques comme DIV.

Éléments de sectionnement sémantiques (liste)

ARTICLE	ASIDE	DETAILS	FIGURE
FIGCAPTION	HEADER	FOOTER	MAIN
MARK	NAV	SECTION	SUMMARY
TIME

Éléments de flux sémantiques

Visent à décrire la nature du texte qu'elles contiennent.

SUB	SUP	EM	STRONG
MARK	S	U	SMALL
Q	DFN	ABBR	CITE
CODE

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Les listes

Permettent de présenter du contenu structuré sous forme d'une liste ordonnée ou non-ordonnée.
Trois types de listes:
- Liste non-ordonnées (puces)
- Liste ordonnées (ordre numérique)
- Liste de descriptions
Les listes peuvent être imbriquées
Le comportement d'une liste (ex.: type de numérotation, numérotation à l'envers, etc. ) peut être modifié à l'aide d'attributs spécifiques aux éléments de liste.

Listes non-ordonnées

UL: Unordered List
LI: Line Item

Élément 1
Élément 2
Élément 3

Listes ordonnées

OL: Ordered List
LI: Line Item

Élément 1
Élément 2
Élément 3

Listes de menu

MENU: Comportement identique à UL, mais avec une charge sémantique.

Section 1

Section 2

Section 3

Listes de descriptions

DL: Description List
DT: Description Term
DD: Description Details

Terme 1: Définition 1
Terme 2: Définition 2

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Les tables

Permettent de présenter les données au format tabulaire (lignes et colonnes)
Un tableau est structuré en lignes, puis en colonnes

Mois	Jour	Données climatiques
Mois	Jour	Temp.	Hum.
Juin	1	22.5	45%
Juin	2	19	80%
Juin	2	19	80%
Juin	2	19	80%
Juin	2	19	80%

Les tables: éléments

Les éléments HTML suivants permettent de définir une table:

table	Délimite une table. Tous les éléments ci-dessous sont des sous-éléments de table
thead, tbody et tfoot	Structurent le contenu d'une table en en-tête, corps et pied de table. Les lignes et les cellules sont des sous-éléments de thead, tbody ou tfoot
colgroup et col	Regroupement d'en-têtes de colonnes (pas très utile)
tr	Encapsule une ligne du tableau
td et th	Encapsule le contenu d'une cellule d'entête (th) ou d'une cellule régulière (td) du tableau. Les attributes rowspan et colspan permettent de définir sur combien de lignes ou de colonnes (resp.) une cellule s'étend.
caption	Légende du tableau (affichable en haut ou en bas du tableau)

Tables: Exemple

Températures mensuelles
Jour	Temp.	Hum.
1	22.5	45%
2	19	80%
3	24	40%

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Les formulaires

Permettent de recueillir de l'information depuis une page Web.

Les formulaires: Structure

Un formulaire est encapsulé au sein d'un élément form

action: URL du script qui va traiter les informations soumises et retourner une réponse au navigateur.
method: Méthode du protocole HTTP utilisée pour transmettre les informations. Seulement les méthodes get et post sont supportées.

Les formulaires: Structure

Les "contrôles" (i.e. champs) peuvent être de plusieurs types, et décrits par un élément label

Les formulaires: Structure

Les "contrôles" (i.e. champs) peuvent être de plusieurs types, et décrits par un élément label

Les formulaires: Structure

Les contrôles peuvent être regroupés au sein d'un élément fieldset. Un fieldset peut comporter une légende à l'aide de l'élément legend

Les formulaires: Structure

Les contrôles peuvent être regroupés au sein d'un élément fieldset. Un fieldset peut comporter une légende à l'aide de l'élément legend

Les formulaires: Les contrôles

Un contrôle est un champs de saisie d'information.
L'information saisie peut-être de plusieurs natures (ex.: textuelle, choix, fichier)
L'élément input permet d'afficher la plupart des contrôles disponibles, dépendamment de la valeur de l'attribut type.
Autres éléments que input pour afficher un champs:
- textarea: Zone de texte multi-lignes
- select et option: Menu déroulant (Dropdown)
- button: Bouton (ex.: pour transmettre un formulaire)

Plan du chapitre

Définition et structure d'un document HTML
Classification des éléments HTML
Principaux éléments HTML
- Éléments de base
- Éléments sémantiques
- Listes
- Tables
- Formulaires
Validation et bonnes pratiques

Validation: Problème 1

Le HTML a évolué rapidement en "production"
Les navigateurs ont adopté une politique permissive: le document s'affiche même si ce dernier est mal-formé.
Problème: Chaque navigateur interprète un document erroné à sa façon

Outils de validation syntaxique

Le validateur syntaxique du W3C

Validation: Problème 2

Les normes HTML et CSS ont souvent été ambiguës
Les différents navigateur ont souvent interprété à leur manière la norme (même les éléments peu ambigus!)
Les navigateurs n'intègrent pas les nouveautés des normes au même rythme
Résultat: Même un document HTML conforme aux normes risque de se comporter différemment selon les navigateurs

Outils de vérification de support

Exemple: Le site caniuse.com

Outils de validation automatisés

Plusieurs outils disponibles généralement sous forme d'extensions de navigateur. Ex.:

Google LightHouse: Outils assez complet (standards, accessibilité, performance)
HTML Validator: Basé sur le validateur du W3C

Validation: Problème 3

Les différents comportements entre navigateurs ont longtemps été une source de complexité pour les professionnel(le)s du Web
Ces dernièr-e-s ont souvent adopté des stratégies de contournement, souvent aux dépens de la séparation des préoccupations
Résultat: Du code peu maintenable et du contenu non-accessible.

La séparation des préoccupations

HTML:
- Le contenu présenté autant à l'humain (via navigateur) qu'à une machine (moteurs de recherche, lecteurs d'écrans, etc.)
- Doit se conformer à la norme, même si le navigateur l'affiche correctement!
CSS:
- Le formatage du contenu, selon le média (écran, téléphone, tablette, etc.)
- Doit se conformer à la norme, même si le navigateur l'affiche correctement!
Javascript:
- La partie interactive de la page (réaction aux stimuli), destinée essentiellement à l'usager humaine
- Si ce n'est pas conforme, ça ne fonctionnera pas...

Éléments de base: !-- ... --

Ajoute un commentaire au code de la page qui ne sera pas interprété par le navigateur.

						
							
							Bienvenue sur ma page!

Bienvenue sur ma page!

Éléments de base: A

Crée un lien hypertexte vers une autre page web ou vers une section de la même page.

						
							Rendez-vous sur le 
							site de La Presse 
							pour obtenir les dernières nouvelles.

Rendez-vous sur le site de La Presse pour obtenir les dernières nouvelles.

Éléments de base: A (ancre)

Crée un lien hypertexte vers une autre page web ou vers une section de la même page.

						
							Les résultats de l'étude sont présentés dans la 
								conclusion ci-dessous.
							
							...
							Conclusion

Les résultats de l'étude sont présentés dans la conclusion ci-dessous.

...

TCH056 - Programmation Web

<Chapitre 02> HTML

Plan du chapitre

Le "langage" HTML

Principale préoccupation: la sémantique

Le HTML Sémantique

Imbrications

Structure d'un document

Structure d'un document

Structure d'un document

Exercice

Une Structure arborescente

Syntaxe d'un élément HTML

Exemple: élément "a" (anchor)

Syntaxe d'un élément HTML

Attributs d'un élément

Exercice 0:

Instructions:

Plan du chapitre

Classification des éléments HTML

Classification par type syntaxique

Classification selon le modèle de contenu

Classification selon le modèle de contenu

Diagramme de Venn

Catégories dans la norme

Catégories dans la norme

Classification par fonction

Classification par fonction (1/2)

Classification par fonction (2/2)

Plan du chapitre

Principaux éléments HTML

Éléments de flux de base

Éléments de sectionnement sémantiques

Éléments de sectionnement sémantiques (liste)

Éléments de flux sémantiques

Plan du chapitre

Les listes

Listes non-ordonnées

Listes ordonnées

Listes de menu

Listes de descriptions

Plan du chapitre

Les tables

Les tables: éléments

Tables: Exemple

Plan du chapitre

Les formulaires

Les formulaires: Structure

Les formulaires: Structure

Les formulaires: Structure

Les formulaires: Structure

Les formulaires: Structure

Les formulaires: Les contrôles

Plan du chapitre

Validation: Problème 1

Outils de validation syntaxique

Validation: Problème 2

Outils de vérification de support

Outils de validation automatisés

Validation: Problème 3

La séparation des préoccupations

Éléments de base: !-- ... --

Éléments de base: A

Éléments de base: A (ancre)

Conclusion

Conclusion

</Chapitre 02>

Principale préoccupation:
la sémantique