WEB Design | Notes de Cours | Don Carlos RAYMOND

Note de Cours
Formateur : DonProgram.
Web Design
Code : 02 Durée : 25h Module : structure d’un site
web avec Html

Introduction
HTML : Le langage du Web

HTML (HyperText Markup Language) est le langage de balisage qui structure

le contenu des pages web. Il forme la base du Document Object Model (DOM)
et permet la navigation via des hyperliens.

Les trois piliers du développement web :

 HTML : Structure et contenu de la page

 CSS : Apparence et style visuel

 JavaScript : Comportement et interactivité

HTML5: La version moderne.

HTML5 offre des fonctionnalités avancées qui ont remplacé les anciens
plugins (Flash, Silverlight). Cette version permet de créer des interfaces
utilisateur sophistiquées en combinaison avec CSS et JavaScript.

Pourquoi bien structurer son HTML ?

Un code HTML bien balisé selon les standards modernes facilite :

 La manipulation par les scripts JavaScript

 L'accessibilité pour les technologies d'assistance

 L'analyse automatique du contenu

HTML reste le point d'entrée : le navigateur charge d'abord la page HTML,

puis les ressources CSS et JavaScript associées.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Mise en situation - Défi professionnel : Vous êtes développeur

web freelance. Le chef de projet Yummy nouilles vous fournit le cahier
des charges et la maquette web. Il souhaite reproduire la maquette en
site web fonctionnels

Votre mission : Développer le code de balisage du site web dans le

langage html
1. Mise en contexte : Ce module enseigne le développement HTML
en quatre étapes : analyser la maquette, structurer l'architecture
HTML, rédiger le code de balisage, puis valider et optimiser pour
créer le site Yummy nouilles.

Code : 1
Durée : 6h
Compétences : Manipuler les éléments de la structure Html.
- Présentation du web.

Le Web : Une toile mondiale

Originaire du mot anglais « Web », qui se traduit littéralement par
« toile », le concept du Web a pris naissance dans un cadre technologique
et numérique spécifique. Sir Tim Berners-Lee, un scientifique britannique, a
inventé le World Wide Web (WWW) en 1989. Cette appellation, « World
Wide Web », exprime l’idée d’une toile qui s’étend à l’échelle mondiale,
englobant la planète entière.

Ainsi, le Web est, en réalité, une immense constellation de documents et

d’autres ressources web, reliés entre eux par des hyperliens. Ces éléments
sont interconnectés et accessibles au public via le réseau Internet. En
somme, le Web est comparable à un vaste océan d’informations dans

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

lequel nous pouvons plonger à tout moment pour explorer, apprendre et

interagir.

Le Web vs Internet: Clarification

Lorsque l’on parle de technologie et de communication numérique, deux

termes souvent utilisés – et parfois confondus – sont « Internet » et « Web ».
Pourtant, leurs origines, leurs fonctions et leurs caractéristiques diffèrent
grandement.

Historiquement parlant, Internet a vu le jour bien avant le Web. L’idée

d’Internet a germé dans les années 1960 sous l’égide de la DARPA
(Defense Advanced Research Projects Agency), une agence du
ministère de la Défense des États-Unis. Leur projet, appelé ARPANET, a été
le précurseur d’Internet et visait à connecter entre eux différents ordinateurs
pour permettre un échange rapide d’informations. De ce projet est né
Internet, un gigantesque réseau d’ordinateurs interconnectés à l’échelle
mondiale.

Le Web, en revanche, est une création plus récente ainsi que nous l’avons
vu précédemment. Il a été conceptualisé et mis en œuvre par Sir Tim
Berners-Lee en 1989, soit presque 30 ans après les premiers pas
d’ARPANET. Le Web est, en essence, un service parmi tant d’autres qui
fonctionne sur Internet. C’est une collection de pages et de documents reliés
par des hyperliens, accessible via des navigateurs.

Outre le Web, Internet englobe une multitude d’autres services, comme les
e-mails, qui permettent des communications directes et personnelles entre
individus. Les transferts de fichiers via FTP (File Transfer
Protocol) facilitent, eux, l’échange de grands volumes de données. Enfin, la
VoIP (Voice over Internet Protocol), dont Skype est un exemple

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

emblématique, offre la possibilité de passer des appels vocaux et vidéo en

utilisant la connexion Internet.

Skype

Les composants du Web

Le World Wide Web, couramment appelé « Web », est une merveille
technologique complexe, façonnée par divers éléments interdépendants. Ces
composants, bien que souvent invisibles à l’utilisateur moyen, sont les piliers
qui soutiennent l’architecture du Web. Plongeons dans une exploration
détaillée de ces constituants essentiels:

 URL (Uniform Resource Locators) : Les coordonnées

numériques. Au cœur de chaque exploration sur le Web se
trouve une URL. Comparable à une adresse postale dans le
monde réel, une URL guide votre navigateur vers la destination
souhaitée sur le Web. Chaque fois que vous tapez quelque chose
comme « [Link] » dans la barre d’adresse de votre
navigateur, vous utilisez en réalité une URL pour diriger votre
demande vers un serveur spécifique qui héberge ce contenu ;
 Navigateurs : Les fenêtres sur le monde numérique. Les
navigateurs, comme Google Chrome, Mozilla Firefox ou Safari,
sont des outils inestimables qui transforment les codes
complexes en informations visuellement digestes pour les
utilisateurs. Ces logiciels décodent les données des serveurs web
et les présentent sous forme de pages web interactives, avec des
textes, des images, des vidéos et d’autres médias ;
 Sites Web : Les destinations de notre voyage numérique.
Chaque site web est une collection organisée de pages web qui
fonctionnent de manière synchrone pour offrir une expérience
utilisateur unique. Ces pages sont stockées sur des serveurs, qui
sont des ordinateurs puissants conçus pour traiter et répondre
aux demandes des utilisateurs du monde entier. Ainsi, lorsque
vous visitez un site web, votre navigateur demande en fait à un
serveur d’afficher le contenu associé à cette URL ;
 Hyperliens : Les portails vers de nouvelles découvertes.
Les hyperliens sont peut-être l’un des éléments les plus
révolutionnaires du Web. Ces liens, généralement soulignés ou
colorés différemment, permettent aux utilisateurs de sauter
d’une page ou d’un sujet à un autre avec un simple clic. Ils
tissent une immense toile de contenu interconnecté, d’où le
terme « toile » pour décrire le Web. Grâce aux hyperliens, le Web
est devenu un espace dynamique, interconnecté et en constante
évolution.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

En combinant tous ces éléments, le Web offre une plateforme d’information

et d’interaction sans précédent, redéfinissant sans cesse notre façon de
communiquer, d’apprendre et de partager à l’ère numérique.

Le Web : Un système dynamique

Si le Web était une entité vivante, il serait comparé à un organisme en

constante évolution, répondant et s’adaptant à chaque stimulus. La nature
intrinsèquement dynamique du Web le distingue des médias conventionnels
et le place au cœur de la révolution numérique.

Alors que les journaux, les magazines et les livres offrent un contenu fixe,
figé dès l’instant de leur impression, le Web, lui, vit et respire. Sa capacité
à évoluer en temps réel permet aux informations de s’actualiser
instantanément, reflétant les changements, les découvertes et les
tendances émergentes du moment. Imaginez un quotidien dont les titres
changent en fonction des dernières nouvelles ou un manuel scolaire qui se
met à jour automatiquement avec les dernières recherches : c’est la
puissance du Web.

Mais qu’est-ce qui rend tout cela possible ? La réponse réside dans un trio de
technologies fondamentales :

 HTML (HyperText Markup Language) : C’est le squelette de toute

page web. Il donne la structure, organise le contenu en sections,
paragraphes, titres et bien plus. Grâce au HTML, les informations sont
agencées de manière cohérente et structurée ;
 CSS (Cascading Style Sheets) : Si le HTML est le squelette, le CSS
est la peau et les vêtements. Il définit le design, la couleur, la
typographie et le positionnement des éléments. C’est le CSS qui donne
à une page web son apparence unique et sa touche esthétique ;
 JavaScript : C’est le système nerveux. Il anime la page, lui permettant
de réagir aux actions des utilisateurs, de mettre à jour du contenu sans
recharger la page, ou encore d’intégrer des éléments interactifs.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

JavaScript transforme une page web statique en une application web

dynamique.

Le code HTML : Un indispensable pour le Web

Quel futur pour le Web ?

Lorsque nous jetons un regard sur l’horizon numérique, il est évident que le
Web, tel que nous le connaissons aujourd’hui, n’est que la pointe de l’iceberg
de ce qui nous attend à l’avenir. L’évolution incessante de la technologie
suggère un futur où le Web transcendera nos écrans et s’intégrera de
manière encore plus profonde dans nos vies quotidiennes.

 Réalité Virtuelle (RV) : Les premiers pas de la RV ont été fascinants,

mais nous sommes encore loin d’exploiter tout son potentiel. Imaginez
un Web où, plutôt que de naviguer passivement sur des pages, vous
pourriez vous immerger dans des environnements virtuels. Que ce soit
pour visiter un musée étranger, assister à un cours à l’autre bout du
monde ou simplement explorer des mondes fantastiques, la RV
pourrait révolutionner notre façon d’interagir avec le contenu en ligne ;

 Réalité Augmentée (RA) : Alors que la RV nous immerge dans des

mondes entièrement numériques, la RA superpose des éléments
numériques à notre réalité physique. Les applications du Web
pourraient, à l’avenir, fusionner avec le monde réel, enrichissant notre
environnement avec des informations pertinentes, des tutoriels ou
même des jeux interactifs ;

 Intelligence Artificielle (IA) : Avec les progrès rapides de l’IA, le

Web devient plus intelligent et adaptatif. Imaginez un assistant
personnel basé sur le Web qui comprend vos préférences, anticipe vos
besoins et vous offre des informations et des recommandations
personnalisées. De la curation de contenu à la modération
automatisée, l’IA promet de rendre le Web plus fluide et pertinent pour
chaque utilisateur.

Dans ce contexte futuriste, le Web ne sera plus seulement un outil ou

une plateforme : il deviendra une extension de notre réalité, transformant
profondément la façon dont nous percevons le monde, interagissons avec les
informations et communiquons entre nous. Alors que nous nous tenons à la
croisée des chemins entre tradition et innovation dans la technologie, une

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

chose est certaine : le futur du Web est lumineux, plein de promesses et

d’opportunités sans précédent.

- Identification des outils, technologies de

développement et présentation d’éditeurs de texte
(IDE).

Les navigateurs : Pourquoi le navigateur est-il important ? Le navigateur

est le programme qui nous montre les sites web. Son travail consiste à
interpréter le code HTML et CSS pour afficher un résultat visuel à l’écran. Si
votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera
les titres en rouge. Le rôle de ce dernier est donc essentiel ! Un navigateur
est un programme extrêmement complexe. En effet, comprendre le code
HTML et CSS n’est pas une mince affaire. Le principal problème, vous vous
en rendrez vite compte, c’est que les différents navigateurs n’affichent pas le
même site exactement de la même façon ! Il faudra vous y faire et prendre
l’habitude de vérifier régulièrement que votre site fonctionne correctement
sur la plupart d’entre eux

HTML et CSS : deux langages pour créer un site web. Pour créer un site, on
doit donner des instructions à l’ordinateur. Il ne suffit pas sim plement de
taper le texte qui devra figurer à l’écran (comme on le ferait dans un trai
tement de texte) ; il faut aussi indiquer où placer ce texte, insérer des
images, créer des liens entre les pages, etc.
Les rôles de HTML et CSS. Pour expliquer à l’ordinateur ce que vous voulez
faire, il va falloir utiliser un langage qu’il comprend. Et c’est là que les choses
se corsent, parce qu’il va falloir apprendre deux langages !

Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ?

Vous devez vous dire que manipuler deux langages va être deux fois plus
complexe et deux fois plus long à apprendre… mais ce n’est pas le cas ! Au
contraire, c’est pour faciliter les choses. Nous aurons affaire à deux langages
qui se complètent, car ils ont des rôles différents
Vous pouvez très bien créer un site web uniquement en HTML, mais il ne sera
pas très beau : l’information apparaîtra « brute ». C’est pour cela que le
langage CSS vient toujours le compléter.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Pour vous donner une idée, la figure suivante montre ce que donne la même
page sans puis avec les CSS. Le HTML définit le contenu. Le CSS permet, lui,
d’arranger le contenu et de définir la présentation : couleurs, image de fond,
marges, taille du texte…

Comme vous vous en doutez, le CSS a besoin d’une page HTML pour
fonctionner. C’est pour cela que nous allons d’abord apprendre les bases du
HTML, avant de nous occuper de la décoration en CSS. Vos premières pages
ne seront donc pas les plus esthétiques, mais qu’importe ! Cela ne durera
pas longtemps.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Les éditeurs de texte (IDE) : Ce sont des programmes dédiés à l’écriture

de code. On peut en général les utiliser pour de multiples langages, pas
seulement HTML et CSS. Ils sont de puissants alliés pour les créateurs de
sites web. Vous l’aurez compris, je vais vous inviter à utiliser un éditeur de
texte dans ce cours. De nombreux éditeurs de texte fonctionnent, que vous
soyez sous Windows, Mac OS X ou Linux (ils sont disponibles partout). Je vais
vous en proposer plusieurs pour que vous ayez le choix, même si ma
préférence va à VSCODE.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

- Manipulation des balises du squelette de la page HTML.

Présentation du HTML
HTML (HyperText Markup Language) est le langage de balisage standard
permettant de décrire la structure des documents affichés sur le Web. Le
langage HTML est constitué d'une série d'éléments et d'attributs qui sont
utilisés pour baliser tous les composants d'un document et le structurer de
manière pertinente.
Les éléments HTML fournissent la sémantique et la mise en forme des
documents, y compris la création de paragraphes, de listes et de tableaux,
ainsi que l'intégration d'images et de contrôles de formulaire. Chaque
élément peut être associé à plusieurs attributs. De nombreux éléments
peuvent comporter du contenu, y compris d'autres éléments et du texte.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

D'autres éléments sont vides, la balise et les attributs définissant leur

fonction.

Éléments
Le code HTML est constitué d'une série d'éléments que vous utilisez pour
entourer ou encapsuler différentes parties du contenu afin de le faire
apparaître ou agir d'une certaine manière. Les éléments HTML sont délimités
par des balises, écrites entre chevrons (< et >).
Le titre de la page est un titre de niveau 1, pour lequel nous utilisons la
balise <h1>.
Le titre réel, « Atelier de machine learning », correspond au contenu de
notre élément. Le contenu est placé entre les balises d'ouverture et de
fermeture. La balise d'ouverture, la balise de fermeture et le contenu
constituent l'élément dans son intégralité.

La balise de fermeture est la même que la balise d'ouverture, précédée

d'une barre oblique.
Structure du document
Les documents HTML incluent une déclaration de type de document et
l'élément racine <html>. L'en-tête et le corps du document sont imbriqués
dans l'élément <html>. Si l'en-tête du document n'est pas visible pour les
visiteurs voyants, il est essentiel que votre site fonctionne.
Il contient toutes les méta-informations, y compris les informations relatives
aux moteurs de recherche et aux résultats de réseaux sociaux, les icônes de
l'onglet du navigateur et le raccourci de l'écran d'accueil mobile, ainsi que le
comportement et la présentation de votre contenu.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Dans cette section, vous allez découvrir les composants qui, bien qu'ils ne
soient pas visibles, sont présents sur presque toutes les pages Web.
Ajouter à chaque document HTML
Plusieurs fonctionnalités doivent être considérées comme essentielles pour
chaque page Web. Les navigateurs afficheront quand même le contenu si
ces éléments sont manquants, même si ces éléments sont inclus.
Définitivement.

<!DOCTYPE html>

La première chose dans tout document HTML est le préambule. Pour le

HTML, tout ce dont vous avez besoin est !DOCTYPE html>. Il peut ressembler
à un élément HTML, mais ce n'est pas le cas. Il s'agit d'un type particulier de
nœud appelé « doctype ». Le doctype indique au navigateur d'utiliser le
mode standard. Si cette valeur est omise, les navigateurs utilisent un autre
mode d'affichage : le mode quirks. Inclure le doctype permet d'éviter le
mode quirks.

<Html>

L'élément <html> est l'élément racine d'un document HTML. Il s'agit du

parent de <head> et <body>, qui contient tout le contenu du document
HTML à l'exception du doctype. S'il est omis, il est implicite, mais il est
important de l'inclure, car il s'agit de l'élément sur lequel la langue du
contenu du document est déclarée.

Langue du contenu

L'attribut de langue lang ajouté à la balise <html> définit la langue

principale du document. La valeur de l'attribut lang est un code de langue
ISO à deux ou trois lettres suivies de la région. La région est facultative, mais
recommandée, car une langue peut varier considérablement d'une région à
l'autre. Par exemple, le français est très différent au Canada (fr-CA) et au
Burkina Faso (fr-BF).

<head>

Imbriqués entre les balises d'ouverture et de fermeture <html>, nous

trouvons les deux enfants, <head> et <body> :

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

</body>
</html>

L'en-tête <head>, ou en-tête de métadonnées de document, contient toutes

les métadonnées d'un site ou d'une application. Le corps inclut le contenu
visible. Le reste de cette section se concentre sur les composants imbriqués
dans les <head></head> d'ouverture et de fermeture.

Composants requis dans <head>

Les métadonnées du document, y compris le titre du document, le jeu de

caractères, les paramètres de fenêtre d'affichage, la description, l'URL de
base, les liens vers les feuilles de style et les icônes, se trouvent dans
l'élément <head>. Même si vous n'avez pas besoin de toutes ces
fonctionnalités, incluez toujours les paramètres de jeu de caractères, de titre
et de fenêtre d'affichage.

Codage des caractères

Le tout premier élément de <head> doit être la déclaration d'encodage des

caractères charset. Elle précède le titre pour garantir que le navigateur peut
afficher les caractères de ce titre et tous les caractères du reste du
document.

Pour définir l'encodage des caractères sur UTF-8, incluez :

<meta charset="utf-8" />

En déclarant UTF-8 (non sensible à la casse), vous pouvez même inclure des
emojis dans votre titre (mais ne le faites pas).

Titre du document

Votre page d'accueil et toutes les pages supplémentaires doivent avoir

chacune un titre unique. Le contenu du titre du document, c'est-à-dire le
texte situé entre les balises d'ouverture et de fermeture <title>, est affiché
dans l'onglet du navigateur, dans la liste des fenêtres ouvertes, dans
l'historique, dans les résultats de recherche et, sauf s'il est redéfini à l'aide
de balises <meta>.

<title>Yummy Nouilles</title>

Métadonnées de la fenêtre d'affichage

La balise Meta viewport doit également être considérée comme essentielle.

Elle favorise la réactivité du site en permettant au contenu de s'afficher
correctement par défaut, quelle que soit la largeur de la fenêtre d'affichage.
Elle est vivement recommandée, car elle permet de contrôler la taille et

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

l'échelle de la fenêtre d'affichage, et elle évite que le contenu du site ne soit

réduit pour s'adapter à un site de 960 pixels sur un écran de 320 pixels.

<meta name="viewport" content="width=device-width" />

La Structure final du document HTML

< !DOCTYPE html>

<html Lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>

</body>
</html>

NB : Il suffit de taper ! et d’appuyer sur enter pour générer cette structure

dans VS code.

Commentaires HTML

Notez que le script est placé entre des chevrons, des tirets et un
claquement. C'est ainsi que vous commentez du code HTML. Nous laissons le
script en commentaire jusqu'à ce que nous ayons le contenu réel sur la
page. Aucun élément compris entre <!-- et --> ne sera visible ni analysé. Les
commentaires HTML peuvent être placés n'importe où sur la page, y compris
dans l'en-tête ou dans le corps de la page, à l'exception des scripts ou des
blocs de style, où vous devez utiliser respectivement des commentaires
JavaScript et CSS.

En-têtes et sections

Dans cette section, vous découvrirez la structure du document : En

choisissant les bons éléments pour la tâche lorsque vous codez, vous n'aurez
pas à refactoriser ni mettre en commentaire votre code HTML.

Site <header>

Créons un en-tête de site. afin de découvrir les avantages de la section HTML

et des éléments de titre.

<header>
<h1>Yummy</h1>
<nav>

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</nav>
</header>

Ce code utilise deux points de repère sémantiques : <header> et <nav>.

Il s'agit de l'en-tête principal. L'élément <header> n'est pas toujours un point de

repère. La sémantique utilisée varie selon l'endroit où il est imbriqué.
Lorsque <header> est de niveau supérieur, il s'agit du site banner.

Lorsqu'un élément <header> est imbriqué dans <main>, <article> ou <section>,

il l'identifie simplement comme en-tête de cette section et n'est pas un point de
repère.

L'élément <nav> identifie le contenu comme mode de navigation. Comme

ce <nav> est imbriqué dans l'en-tête du site, il s'agit de la navigation principale sur
le site. S'il était imbriqué dans un élément <article> ou <section>, il s'agirait d'une
navigation interne pour cette section uniquement.

Site <footer>

Codons le pied de page du site.

<footer>
<p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved. </p>
</footer>

Comme pour <header>, le pied de page est un point de repère ou non, selon
l'endroit où il est imbriqué. Le pied de page du site constitue un point de repère et
doit contenir les informations de pied de page que vous souhaitez afficher sur
chaque page, comme une déclaration de droits d'auteur, des coordonnées et des
liens vers vos règles en matière de confidentialité et de cookies.

Structure du document

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Ce module commence par <header> et <footer>, car ils ne sont parfois uniques
que des éléments de repère, ou "sections", qui ne sont parfois pas utilisés.
Abordons le « temps complet » de section en discutant des mises en page les plus
courantes :

Une mise en page comprenant un en-tête, deux barres latérales et un pied de

page est appelée mise en page Saint-Grail. Il existe plusieurs façons de baliser ce
contenu, y compris:

<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>

Si vous créez un blog, vous disposez peut-être d'une série d'articles dans <main>:

<body>
<header>Header</header>
<nav>Nav</nav>
<main>
<article>First post</article>
<article>Second post</article>
</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>

Lorsqu'ils utilisent des éléments sémantiques, les navigateurs peuvent créer des
arborescences d'accessibilité pertinentes, ce qui permet aux utilisateurs de

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

lecteurs d'écran de naviguer plus facilement. Ici, un banner et un contentinfo sont

fournis via un site <header> et <footer>. Les nouveaux éléments ajoutés ici
incluent <main>, <aside> et <article>. ainsi que <h1> et <nav> que vous avez
utilisés précédemment, et <section>, que vous n'avez pas encore utilisés.

<main>

Il n'y a qu'un seul élément de point de repère <main>. L'élément <main> identifie
le contenu principal du document. Il ne doit y avoir qu'un seul <main> par page.

<aside>

L'<aside> est destiné aux contenus indirectement ou indirectement liés au

contenu principal du document. Par exemple, cet article concerne le langage
HTML. la partie relative aux mêmes informations peut être contenue dans un
élément <aside>. Comme dans la plupart des cas, l'élément <aside> sera
probablement présenté dans une barre latérale ou une zone
d'accroche. <aside> est également un point de repère, avec le rôle
implicite complementary.

<article>

Intégrés dans <main>, nous avons ajouté deux éléments <article>. Cela n'était
pas nécessaire dans le premier exemple, lorsque le contenu principal n'était
composé que d'un mot ou, dans le monde réel, d'une seule section de contenu.
Toutefois, si vous écrivez un blog, comme dans notre deuxième exemple, chaque
article doit se trouver dans un élément <article> imbriqué dans <main>.

Un élément <article> représente une section de contenu complète ou autonome

qui est, en principe, réutilisable de manière indépendante. Pensez à un article
comme à un article dans un journal.

<section>

L'élément <section> permet d'englober des sections autonomes génériques d'un

document lorsqu'il n'y a pas d'élément sémantique plus spécifique à utiliser. Les
sections doivent avoir un titre, à quelques exceptions près.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Titres : <h1>-<h6>

Il y a six éléments de titre de section : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Chacun représente l'un des six niveaux de titres de section, <h1> correspondant
au niveau le plus élevé ou le plus important, et <h6> au niveau le plus bas.

Lorsqu'un en-tête est imbriqué dans une bannière de document <header>, il s'agit
du titre de l'application ou du site. Lorsqu'elle est imbriquée dans <main>, qu'elle
soit ou non imbriquée dans une <header> de <main>, il s'agit de l'en-tête de cette
page, et non de l'ensemble du site. Lorsqu'il est imbriqué dans une <article> ou
une <section>, il s'agit de l'en-tête de cette sous-section de la page.

Il est recommandé d'utiliser les niveaux de titre comme dans un éditeur de texte:
en commençant par <h1> comme en-tête principal, avec <h2> comme en-tête
pour les sous-sections et <h3> si ces sous-sections comportent des sections.
évitez de sauter des niveaux de titre.

Attributs
Nous avons brièvement abordé les attributs dans Présentation du HTML. Il est
maintenant temps de les examiner plus en détail.

Les attributs sont ce qui fait la puissance du HTML. Les attributs sont des noms et
des paires nom/valeur séparés par des espaces qui apparaissent dans la balise
d'ouverture. Ils fournissent des informations sur l'élément et sa fonctionnalité.

Les attributs définissent le comportement, les liens et les fonctionnalités des

éléments. Certains attributs sont globaux, ce qui signifie qu'ils peuvent apparaître
dans la balise d'ouverture de n'importe quel élément. D'autres attributs

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

s'appliquent à plusieurs éléments, mais pas à tous. D'autres encore sont

spécifiques à un élément et ne concernent qu'un seul élément. En HTML, tous les
attributs, à l'exception des attributs booléens et, dans une certaine mesure, des
attributs énumérés, nécessitent une valeur.

Bien que le HTML ne soit pas sensible à la casse, certaines valeurs d'attribut le
sont. Les valeurs qui font partie de la spécification HTML ne sont pas sensibles à la
casse. Les valeurs de chaîne définies, telles que les noms de classe et d'ID, sont
sensibles à la casse. Si la valeur d'un attribut est sensible à la casse en HTML, elle
l'est également lorsqu'elle est utilisée dans un sélecteur d'attributs en CSS et en
JavaScript. Dans le cas contraire, elle ne l'est pas.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

Attributs booléens

Si un attribut booléen est présent, il est toujours défini sur "true". Les attributs
booléens
incluent autofocus, inert, checked, disabled, required, reversed, allowfullscreen, defa
ult, loop, autoplay, controls, muted, readonly, multiple, et selected. Si un ou
plusieurs de ces attributs sont présents, l'élément est désactivé, obligatoire, en
lecture seule, etc. S'ils ne sont pas présents, il ne l'est pas.

id

L'attribut global id permet de définir un identifiant unique pour un élément. Il

remplit de nombreuses fonctions, y compris :

 Cible de l'identifiant de fragment d'un lien.

 Identifier un élément pour le script.

 Associer un élément de formulaire à son libellé.

 Fournir un libellé ou une description pour les technologies d'assistance.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

 Cibler les styles avec une spécificité élevée ou en tant que sélecteurs
d'attributs dans CSS.

L'ID doit être unique au document. La mise en page ne sera probablement pas
affectée si un id est utilisé plusieurs fois, mais il est possible que votre code
JavaScript, vos liens et vos interactions avec les éléments ne fonctionnent pas
comme prévu.

class

L'attribut class offre une autre façon de cibler des éléments avec CSS (et
JavaScript), mais n'a aucune autre utilité dans HTML (bien que les frameworks et
les bibliothèques de composants puissent les utiliser). L'attribut de classe prend
pour valeur une liste de classes sensibles à la casse pour l'élément, séparées par
des espaces.

style

L'attribut style permet d'appliquer des styles intégrés, c'est-à-dire des styles
appliqués à l'élément unique sur lequel l'attribut est défini. L'attribut style prend
comme valeur des paires de valeurs de propriété CSS. La syntaxe de la valeur est la
même que celle du contenu d'un bloc de style CSS : les propriétés sont suivies d'un
deux-points, comme en CSS, et les points-virgules terminent chaque déclaration,
après la valeur

Organiser son texte

Les paragraphes

La plupart du temps, lorsqu’on écrit du texte dans une page web, on le fait à
l’intérieur

de paragraphes. Le langage HTML propose justement la balise <p> pour

délimiter ces

derniers.

<p>Bonjour et bienvenue sur mon site !</p>

•<p> signifie « Début du paragraphe ».

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

•</p> signifie « Fin du paragraphe ».

Sauter une ligne En HTML, si vous appuyez sur la touche Entrée, cela ne
crée pas une nouvelle ligne comme vous en avez l’habitude. Comme vous
devez vous en douter, il y a pourtant bien un moyen d’imposer des sauts de
ligne en HTML. En fait, si vous voulez écrire un deuxième paragraphe, il vous
suffit d’utiliser une deuxième balise. Votre code HTML devrait donc être
rempli de balises de paragraphe.

Oui, mais si je veux seulement aller à la ligne dans un paragraphe et

non pas sauter

une ligne ?Eh bien, il existe une balise « aller à la ligne » : <br /> (comme
break). C’est une balise orpheline. Vous devez obligatoirement la mettre à
l’intérieur d’un paragraphe.

Listes
HTML nous offre plusieurs façons de baliser les listes. Il existe des listes ordonnées
(<ol>), des listes non ordonnées (<ul>).

Dans les menus et les listes non ordonnées, les éléments de liste sont
généralement affichés à l'aide de puces. Dans les listes ordonnées, ils sont
généralement précédées d'un compteur croissant, tel qu'un chiffre ou une lettre.
L'ordre des puces et de la numérotation peut être contrôlé ou inversé avec HTML
ou CSS, ou les deux.

Listes à puces

L'élément <ul> est l'élément parent des listes d'éléments non ordonnés. Les seuls
enfants d'un élément <ul> sont un ou plusieurs éléments de liste <li>.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Créons une liste de machines. Nous utilisons une liste non ordonnée, car l'ordre
n'a pas d'importance (ne le leur dites pas).

Par défaut, chaque élément de liste non ordonnée est précédé d'une puce. La liste
non ordonnée ne comporte aucun attribut spécifique à un élément. Vous devez
terminer vos listes par un </ul>.

Listes ordonnées

L'élément <ol> est l'élément parent des listes ordonnées d'éléments. Les seuls
enfants d'un <ol> sont un ou plusieurs éléments <li>, ou éléments de liste. Dans
ce cas, les "puces" sont des nombres de différents types. Le type peut être défini
en CSS avec la propriété list-style-type ou avec l'attribut type.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

<ol> comporte trois attributs spécifiques à l'élément : type, reversed et start.

L'attribut énuméré type définit le type de numérotation. Il existe cinq valeurs

valides pour type, la valeur par défaut étant 1 pour les nombres. Vous pouvez
également utiliser a, A, i ou I pour les lettres minuscules et majuscules ou les
chiffres romains. La propriété list-style-type fournit beaucoup plus de valeurs.

Ensemble des propriétés listes-styles-types ::

 decimal
 cjk-decimal
 decimal-leading-zero
 lower-roman
 upper-roman

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

 lower-greek
 lower-alpha, lower-latin
 upper-alpha, upper-latin
 arabic-indic
 armenian
 bengali
 cambodian
 cjk-earthly-branch
 cjk-heavenly-stem
 cjk-ideographic
 devanagari
 ethiopic-numeric
 georgian
 gujarati
 gurmukhi
 hebrew
 hiragana
 hiragana-iroha
 japanese-formal
 japanese-informal
 kannada
 katakana
 katakana-iroha
 khmer
 korean-hangul-formal
 korean-hanja-formal
 korean-hanja-informal
 lao
 lower-armenian
 malayalam
 mongolian
 myanmar
 oriya
 persian
 simp-chinese-formal
 simp-chinese-informal
 tamil
 telugu
 thai
 tibetan
 trad-chinese-formal
 trad-chinese-informal
 upper-armenian
 disclosure-open
 disclosure-closed
 ethiopic-halehame-ti-er

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

 ethiopic-halehame-ti-et
 hangul
 hangul-consonant
 urdu

Liens
Dans l'introduction de la section des attributs, vous avez vu un exemple montrant
comment les attributs sont ajoutés à la balise d'ouverture. L'exemple utilise la
balise <a>, mais ni l'élément, ni les attributs spécifiques introduits dans cet
exemple n'ont été abordés:

La balise d'ancrage <a> et l'attribut href créent un lien hypertexte. Les liens sont la
colonne vertébrale d'Internet. La première page Web contenait 25 liens, dont le
texte suivant : "Tout ce qui existe en ligne à propos de W3 est lié directement ou
indirectement à ce document". Il est probable que tout ce qui se trouve en ligne
concernant W3 est également lié directement ou indirectement dans ce
document !

Depuis la publication de cette première explication en août 1991, la puissance du

Web et la balise <a> se sont considérablement développées depuis que Tim
Berners-Lee a publié cette première explication. Les liens représentent une
connexion entre deux ressources, dont une est le document actuel.

Attribut href

Bien qu'il ne soit pas obligatoire, l'attribut href se trouve dans presque toutes les
balises <a>. L'adresse du lien hypertexte permet de transformer l'élément <a> en

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

lien. L'attribut href permet de créer des liens hypertextes vers des emplacements
de la page active, d'autres pages d'un site ou d'autres sites. Il peut également être
codé pour télécharger des fichiers ou pour envoyer un e-mail à une adresse
spécifique, y compris un objet et le corps de l'e-mail suggéré.

<a href="[Link] Learning Workshop</a>

<a href="#teachers">Our teachers</a>
<a href="[Link] teachers</a>
<a href="[Link] Hal</a>
<a href="[Link] Hal</a>

L'attribut href peut commencer par mailto : ou tel : pour envoyer un e-mail ou
passer des appels. La gestion du lien varie selon l'appareil. le système
d'exploitation et les applications installées.

Images
Les images décoratives, telles que les dégradés d'arrière-plan sur les boutons ou
les images d'arrière-plan sur les sections de contenu ou la page entière, sont des
éléments de présentation et doivent être appliquées avec CSS. Lorsqu'une image
ajoute du contexte à un document, il s'agit d'un contenu qui doit être intégré avec
HTML.

La méthode principale pour inclure des images est la balise <img> avec
l'attribut src faisant référence à une ressource d'image et l'attribut alt décrivant
l'image.

<img src="images/[Link]" alt="Eve">

Chaque image de premier plan doit au minimum inclure les attributs src et alt.

Le fichier src correspond au chemin d'accès et au nom de fichier de l'image

intégrée. L'attribut src permet de fournir l'URL de l'image. Le navigateur récupère
ensuite le composant et l'affiche sur la page. Cet attribut est obligatoire
pour <img>. Sans cela, rien ne peut être affiché.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

L'attribut alt fournit un texte alternatif pour l'image, en fournissant une

description de l'image pour ceux qui ne peuvent pas voir l'écran (pensez aux
moteurs de recherche et aux technologies d'assistance, et même à Alexa, Siri et
l'Assistant Google), et peut être affiché par le navigateur si l'image ne se charge
pas. En plus des utilisateurs disposant d'un réseau lent ou d'une bande passante
limitée, le texte alt est extrêmement utile dans les e-mails HTML, car de nombreux
utilisateurs bloquent les images dans leurs applications de messagerie.

<img src="path/filename" alt="descriptive text" />

Rédiger des descriptions d'images alt efficaces

Les attributs alt doivent être courts et concis. Ils doivent fournir toutes les
informations pertinentes transmises par l'image, tout en omettant les
informations redondantes par rapport à d'autres contenus du document ou qui ne
sont pas utiles. Le ton du texte doit refléter celui du site.

Audio et vidéo
Comme vous l'avez appris dans le module Images, le langage HTML permet
d'intégrer des éléments multimédias dans une page Web. Dans cette section, nous
examinons les fichiers audio et vidéo, y compris comment les intégrer, les
commandes utilisateur, comment fournir un espace réservé d'image statique pour
vos vidéos et les bonnes pratiques, y compris comment rendre les fichiers audio et
vidéo accessibles.

<audio> et <video>

Les éléments <video> et <audio> peuvent être utilisés pour intégrer des lecteurs
multimédias directement avec l'attribut src ou comme élément conteneur pour
une série d'éléments <source>, chacun fournissant une suggestion de fichier src.
Bien que <video> puisse être utilisé pour intégrer un fichier audio,
l'élément <audio> est préférable pour intégrer des fichiers audios.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Les balises d'ouverture <video> et <audio> peuvent contenir plusieurs autres

attributs, y compris controls, autoplay, loop, mute, preload et les attributs globaux.
L'élément <video> accepte également les attributs height, width et poster.

<video src="videos/[Link]" poster="images/[Link]" controls>

<p>Watch <a href="[Link] on Youtube</a></p>
</video>

Cet exemple <video> comporte une seule source avec l'attribut src qui renvoie à la
source vidéo. L'attribut poster fournit une image à afficher pendant le chargement
de la vidéo. Enfin, l'attribut controls fournit des commandes vidéo à l'utilisateur.

Le contenu de remplacement est inclus entre les balises d'ouverture et de

fermeture. Si l'user-agent n'est pas compatible avec <video> (ou <audio>), ce
contenu s'affiche. La balise de fermeture </video> est obligatoire, même si aucun
contenu n'est inséré entre les deux (mais il devrait toujours y avoir un contenu de
remplacement, n'est-ce pas ?).

Si aucun attribut src n'est inclus dans les balises d'ouverture <video> ou <audio>,
incluez un ou plusieurs éléments <source>, chacun avec un attribut src vers un
fichier multimédia. L'exemple suivant inclut trois options de fichier multimédia, un
contenu de remplacement et des sous-titres en anglais et en français entre les
balises d'ouverture et de fermeture.

Tables
Les tableaux HTML permettent d'afficher des données tabulaires avec des lignes et
des colonnes. La décision d'utiliser une <table> doit être basée sur le contenu que
vous présentez et les besoins de vos utilisateurs par rapport à ce contenu. Si les
données sont présentées, comparées, triées, calculées ou croisées, <table> est
probablement le bon choix.

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

Éléments du tableau, dans l'ordre

La balise <table> encapsule le contenu de la table, y compris tous ses éléments.

Dans <table>, vous trouverez les en-têtes de tableau (<thead>), les corps de
tableau (<tbody>) et, éventuellement, les pieds de tableau (<tfoot>). Chacun d'eux
est composé de lignes de tableau (<tr>). Les lignes contiennent des cellules d'en-
tête de tableau (<th>) et de données de tableau (<td>), qui contiennent à leur
tour toutes les données. Dans le DOM, avant tout cela, vous pouvez trouver deux
fonctionnalités supplémentaires: le libellé du tableau (<caption>) et les groupes de
colonnes (<colgroup>). Selon que <colgroup> possède ou non un attribut span, il
peut contenir des éléments de colonne de tableau imbriqués (<col>).

Les enfants de la table sont, dans l'ordre:

1. Élément <caption>

2. Éléments <colgroup>

3. Éléments <thead>

4. Éléments <tbody>

5. Éléments <tfoot>

Nous allons examiner les enfants des éléments <table>, qui sont tous facultatifs,
mais recommandés, puis nous intéresserons aux lignes, aux cellules d'en-tête de
tableau et aux cellules de données de tableau. Le <colgroup> sera abordé en
dernier.

Légende du tableau

Étant un élément natif et sémantique, <caption> est la méthode privilégiée pour

nommer une table. L'élément <caption> doit être le premier élément imbriqué

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

dans l'élément <table>. Son inclusion permet à tous les utilisateurs de connaître
immédiatement l'objectif du tableau sans avoir à lire le texte environnant.

Sectionnement des données

Le contenu des tableaux se compose de trois sections maximum: zéro ou plusieurs

en-têtes de tableau (<thead>), corps de tableau (<tbody>) et pieds de tableau
(<tfoot>). Tous sont facultatifs, et vous pouvez en utiliser autant que vous le
souhaitez.

Voici ce que nous avons jusqu'à présent:

<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>

L'élément <tfoot> était initialement spécifié pour se trouver juste

après <thead> et avant <tbody> pour des raisons d'accessibilité. C'est pourquoi
vous pouvez rencontrer cet ordre de source non intuitif dans les anciens
codebases.

Contenu du tableau
Les tableaux peuvent être divisés en en-têtes, corps et pieds de page, mais aucun
de ces éléments n'a vraiment d'utilité si les tableaux ne contiennent pas de lignes,
de cellules et de contenu. Chaque ligne de la table, <tr>, contient une ou plusieurs
cellules. Si une cellule est une cellule d'en-tête, utilisez <th>. Sinon, utilisez <td>.

Les feuilles de style de l'User-Agent affichent généralement le contenu dans une

cellule d'en-tête de tableau <th> en mode centré et en gras. Ces styles par défaut,
ainsi que tous les styles, sont mieux contrôlés avec CSS plutôt qu'avec les attributs
obsolètes qui étaient auparavant disponibles sur des cellules, des lignes et même
des <table> individuelles.

<table>
<caption>MLW Alumni</caption>
<thead>
<tr>

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

<th>Name</th>
<th>Destiny</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hal Gibrah</th>
<td>Calculator</td>
<td>2020</td>
</tr>
<tr>
<th>Cathy Terr</th>
<td>Waste disposal</td>
<td>2018</td>
</tr>
<tr>
<th>Lou Minious</th>
<td>Lightbulb</td>
<td>1956</td>
</tr>
</tbody>
</table>

Dans cet exemple, nous avons une légende, un en-tête de tableau et un corps de tableau. L'en-
tête comporte une ligne contenant trois cellules d'en-tête <th>, ce qui crée trois colonnes. Le

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

corps contient trois lignes de données: la première cellule est une cellule d'en-tête pour la
ligne. Nous utilisons donc <th> au lieu de <td>.

Fusion des cellules

Comme dans MS Excel, Google Sheets et Numbers, vous pouvez joindre plusieurs
cellules en une seule. Pour ce faire, utilisez du code HTML.
L'attribut colspan permet de fusionner deux cellules ou plus adjacentes sur une
même ligne. L'attribut rowspan permet de fusionner des cellules sur plusieurs
lignes. Il est placé sur la cellule de la ligne supérieure.

<table>
<caption>MLW Alumni</caption>
<thead>
<tr>
<th rowspan="2" id="name" scope="col">Name</th>
<th colspan="2" id="path">Career path</th>
<th rowspan="2" id="year">Year</th>
</tr>
<tr>
<th id="past" scope="col">Past</th>
<th id="future" scope="col">Destiny</th>
</tr>
</thead>
<tbody>
<tr>
<th id="hal" scope="row">Hal Gibrah</th>
<td headers="hal path past">Calculator</td>
<td headers="hal path future">Mars rover</td>
<td>2020</td>
</tr>
<tr>
<th id="cathy" scope="row">Cathy Terr</th>
<td headers="cathy path past">Waste disposal</td>
<td headers="cathy path future">Automated teller</td>
<td>2018</td>
</tr>
<tr>
<th id="lou" scope="row">Lou Minious</th>
<td headers="lou path past">Lightbulb</td>
<td headers="lou path future">Smart bulb</td>
<td>1956</td>
</tr>
</tbody>

Don Carlos RAYMOND | Formateur

 WEB Design | Notes de Cours | Don Carlos RAYMOND

</table>

Don Carlos RAYMOND | Formateur