Programmation WEB Cours 1 - HTML5 v2.3

BTS SN IR
Programmation WEB
Cours 1 – Le langage HTML5

Une brève histoire du Web
2
Quelques dates clés (https://www.w3.org/History.html) :
Vous le savez, l’Internet tel que nous le

connaissons actuellement est une avancée
technologique qui n’est pas si âgée que cela.
En octobre 1990, Tim Berners-Lee travaille au

CERN (Centre Européen de Recherche Nucléaire)sur
l’hypertexte avec un éditeur et un navigateur
sur une station NeXT. Il donne le nom de World
Wide Web à ce programme.
1/8
C’est à la fin de l’année 1990 que sont faites
les démonstrations du premier éditeur hypertexte
et du premier navigateur.
Une brève histoire du Web
3
En décembre 1992 le premier serveur hors du CERN
est installé à l’université de Stanford aux
États-Unis. En 1993, le CERN rend libres les
protocoles web.
Le 1er octobre 1994, le Word Wide Web Consortium

(W3C) est créé au MIT (Massachusetts Institute of
Technology).
Le W3C (https://www.w3.org/) est chargé d’édicter les

normes, les spécifications des langages
1/8
permettant de concevoir des sites et des
applications web. Libre aux éditeurs de logiciels
de se conformer à ces spécifications.
C’est en avril 1995 que l’INRIA (Institut National de

Recherche en Informatique et Automatique) accueille le
W3C en Europe.
HTML - HyperText Markup Language
4
L’HTML ou dans sa dernière version HTML5, est le
langage de balisage conçu pour représenter les
pages web.
C’est un langage permettant d’écrire de

l’hypertexte, d’où son nom. HTML permet également
de structurer le contenu des pages, d’inclure des
ressources multimédias dont des images, des
formulaires de saisie et des programmes
informatiques.
1/8
Il est souvent utilisé conjointement avec le
langage de programmation JavaScript et des
feuilles de style en cascade (CSS). HTML est
inspiré du Standard Generalized Markup Language
(SGML). Il s'agit d'un format ouvert.
HTML - HyperText Markup Language
5
HTML n’est pas conçu pour spécifier l’apparence
visuelle des documents.
HTML est plutôt conçu pour donner du sens aux

différentes parties du contenu : titre, liste,
passage important, image, etc.
La version actuelle du HTML est la 5.2 (2017)
En HTML, les balises sont insensibles à la casse.
1/8
Généralement, les balises fonctionnent par paires.
Voici un exemple de balise HTML :

<p> Je suis un paragraphe </p>
Anatomie d'un élément HTML
6
Regardons notre élément paragraphe d'un peu plus près :
Les principales parties de notre élément sont :

1) La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p),
encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique
où l'élément commence ou commence à prendre effet — dans ce cas où
commence le paragraphe ;
1/8
2) La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle
comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin
de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise
de fermeture est une erreur fréquente chez les débutants, et peut amener
des résultats étranges ;
3) Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est
simplement du texte ;
4) L'élément : l'ensemble balise ouvrante, balise fermante et contenu
constituent l'élément.
Structure de base d’un document HTML
7
Un document HTML type ressemble à ça:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<h1>Hello world</h1>
</body>
1/8 </html>
Le rendu de ce document dans

un navigateur donnerait ceci :
Structure générale d‘une page web
8
La totalité d’une page web est insérée dans
l’élément <html>. Cet élément est qualifié
d’élément racine de la page.
Nous avons ensuite les deux parties de

contenu : l’en-tête et le corps.
L’en-tête, avec l’élément <head>, permet de

définir les propriétés globales des pages,
sachant que chaque page aura des propriétés
différentes.
1/8
Le corps de la page, élément <body>, permet

d’insérer tout le contenu de la page qui
pourra être affiché.
Document Object Model (DOM)
9
Document Object Model (DOM) signifie « modèle

d'objets de document ».
Le DOM représente
le document affiché
par une structure
en arbre,
comportant des
1/8 nœuds (branches et
feuilles).
Les principaux éditeurs HTML
10
●
Un éditeur HTML est un outil vous aidant à
modifier et à créer du code HTML.
●
Grâce à cet outil, il vous est possible de
modifier directement votre code source.
●
L’éditeur HTML est un outil indispensable au
développement d’un site internet.
●
De plus, ils permettent de vous donner une
1/8 compréhension plus claire du code source.
●
La plupart des développeurs Web
professionnels utilisent des éditeurs HTML
pour créer et gérer leurs sites.
11
Il existe deux grandes catégories d’éditeurs
HTML :
●
L’éditeur WYSIWYG: WYSIWYG veut dire “ce que
vous voyez, vous l’obtenez“. Ces éditeurs
fournissent une interface d’édition en
glisser-déposer.
●
L’éditeur HTML textuel: Cet éditeur est
idéal pour les développeurs Web
expérimentés. En effet, il vous montre le
1/8 code tel que vous l’avez écrit. Cependant,
il est préférable d’avoir de très bonnes
connaissances en codage afin de pouvoir
l’utiliser.
12
Logiciels :
●
VSCode :un éditeur de code multi-
plateforme, open source et gratuit,
supportant une dizaine de langages.
●
Atom
●
NotePad ++
●
SubimeText
1/8 Éditeurs en ligne :
●
https://jsfiddle.net/
●
https://www.w3schools.com/tryit/
●
https://codepen.io/
Les conteneurs
13
Un conteneur inclut un contenu de type très varié
tel que du texte,des images,des formulaires, des
liens,des tableaux…
Les conteneurs servent aussi à structurer vos

pages. Vous pourrez ainsi utiliser des conteneurs
pour insérer :
●
un en-tête de page,
●
une colonne latérale (une sidebar en anglais),
●
un pied de page,
●
une barre de navigation…
1/8
Chaque conteneur, en dehors des divisions
(<div> et <span>), sont dédiés à recevoir un
contenu spécifique.
C’est pour cela qu’ils sont qualifiés de

conteneurs sémantiques.
Les conteneurs génériques -L’élément <div>
14
L'élément HTML <div> (qui signifie division du
document) est un conteneur générique qui permet
d'organiser le contenu sans représenter rien de
particulier.
Il peut être utilisé afin de grouper d'autres

éléments pour leur appliquer un style (en utilisant
les attributs class ou id) ou parce qu'ils
partagent des attributs aux valeurs communes,tel
que lang.
1/8
Il doit uniquement être utilisé lorsqu'aucun autre
élément sémantique (par exemple <article> ou <nav>)
n'est approprié.
Elle est précédée et suivie d'un saut de ligne.

Les conteneurs génériques -L’élément <span>
15
L’élément <span> est souvent utilisé, par exemple,
pour avoir une division au sein d’un paragraphe de
texte.
Ceci est très pratique pour mettre en forme de

manière particulière du texte dans un texte formaté
d’une autre manière.
Voici un exemple précis : nous souhaitons mettre en

fond gris et avec une fine bordure une partie d’un
texte dans un paragraphe.
Voici le sélecteur CSS :

1/8
.fond-gris {
background-color: #eee;
padding: 0 5px;
border: 1px solid #333;
}
Les conteneurs génériques -L’élément <span>
16
Voici son application dans le code HTML :
<p>Donec ullamcorper nulla non metus auctor

fringilla. Morbi leo risus, <span class="fond-
gris">porta
ac consectetur ac vestibulum</span> at eros. Donec
sed odio...</p>
Voici l’affichage obtenu :
1/8
Les conteneurs sémantiques
17
Les éléments de section (section, article, nav,

aside, header, footer) segmentent des portions du
document ou de l'application web, qui possèdent une
valeur sémantique (un contenu avec un sens
particulier).
Contrairement à des éléments génériques comme span

ou div qui ont un rôle totalement neutre, et ne
servent qu'à regrouper d'autres éléments HTML pour
leur affecter un style CSS commun.
1/8
Les conteneurs sémantiques - Exemple
18
Voici un schéma basique d'un découpage d'une page
HTML5.
1/8
Liste des conteneurs sémantiques
19
Le tableau suivant récapitule les éléments de
section et leur usage le plus commun.
Nom Détails
<section> Section générique regroupant un même sujet, une même fonctionnalité,

de préférence avec un en-tête, ou bien section d'application web
<article> Section de contenu indépendante, pouvant être extraite individuellement

du document sans pénaliser sa compréhension
<nav> Section possédant des liens de navigation principaux (au sein du

document ou vers d'autres pages)
<aside> Section dont le contenu est un complément par rapport à ce qui

1/8 l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui
peut apporter des informations supplémentaires.
<header> Section d'introduction d'un article, d'une autre section ou du document
entier (en-tête de page).
<footer> Section de conclusion d'une section ou d'un article, voire du document

entier (pied de page).
Les conteneurs de texte - Les titres
20
Les éléments de titrage permettent d’insérer six
niveaux de titre hiérarchique aux pages. Les
éléments à utiliser sont <h1> à <h6>. Ces titres
ont une très forte valeur sémantique. Le niveau de
titre <h1> est le plus important dans la page et le
niveau <h6> est le moins important.
Le W3C conseille fortement de les utiliser dans

l’ordre descendant : vous devez d’abord utiliser un
titre de niveau 1, puis un titre de niveau 2 et
ainsi de suite. Il est déconseillé d’omettre un
1/8
niveau, comme passer de <h1> à <h3>, en omettant le
<h2>.
Dernier point, tous les titres <hx> s’affichent en

gras dans les navigateurs, avec la taille la plus
grande pour le <h1> et la plus petite pour le <h6>.
Les conteneurs de textes - Les titres
21
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<h1>Titre de niveau 1</h1>
1/8
</body>
</html>
Les conteneurs de textes - Les titres
22
1/8
Les conteneurs de textes - Les paragraphes
23
L’élément <p> permet d’insérer du texte courant
dans des paragraphes. Comme pour tous les écrits,
chaque paragraphe pourra contenir une idée, un
concept. Dans chaque paragraphe, vous pouvez
mettre en évidence un ou des mots avec des
éléments de mise en forme sémantique.

<!doctype html>
<html lang="fr">
<head>
1/8 <title>Ma page web</title>
</head>
<body>
<p>Morbi leo risus, porta ac consectetur...</p>
<p>Nullam quis risus eget urna mollis ornare...</p>
</body>
</html>
Les conteneurs de textes - Les paragraphes
24
1/8
Les conteneurs de textes - Les adresses
25
Il n’est pas rare d’avoir besoin d’insérer des
adresses en tout genre dans vos pages web.
Pour cela, vous devez utiliser l’élément <address>

qui est dédié à cet usage.
Vous pourrez y placer des adresses postales, des

adresses mail etc.
Dans cet élément, vous pouvez imbriquer les autres

conteneurs que vous souhaitez.
1/8
Les conteneurs de textes - Les adresses
26
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<p>Voici nos coordonnées :</p>
<address>

<p>Agence Be Web</br>

1/8
12 rue Tim Berners Lee<br>
44000 NANTES</p>
<p>Sur LinkedIn : <a href="https://linkedin.com/beweb/">
Be Web</a>.</p>
</address>
</body>
</html>
Les conteneurs de textes - Les listes
27
1. Les différents types de liste
Les listes permettent d’insérer des énumérations

sémantiques dans vos pages web. Vous avez trois types de
liste à votre disposition : les listes non ordonnées (plus
communément appelées listes à puces), les listes ordonnées
(listes numérotées) et les listes de définitions.
2. Les listes non ordonnées
Les listes non ordonnées (unordered list en anglais)

permettent de lister, d’énumérer des données qui
1/8
s’afficheront avec une puce devant chaque élément de la
liste. C’est l’élément <ul> qui est utilisé pour définir la
liste. Ensuite, chaque élément, chaque item de la liste,
sera placé dans un élément <li>.
Les conteneurs de textes - Les listes non
ordonnées
28
<!doctype html>
<html lang="fr">
<head>
</head>
<body>
<ul>
<li>Pommes</li>
<li>Poires</li>
<li>Ananas</li>
</ul>
1/8
</body>
</html>
Les conteneurs de textes - Les listes ordonnées
29
3. Les listes ordonnées
Les listes ordonnées (ordered list en anglais) permettent de lister, d’énumérer des
données qui s’afficheront avec chiffre devant chaque élément de la liste. C’est
l’élément <ol> qui est utilisé pour définir la liste. Ensuite, chaque élément,
chaque item de la liste, sera placé dans un élément <li>.
<!doctype html>
<html lang="fr">
<head>
</head>
1/8 <body>
<ol>
<li>Pommes</li>
<li>Poires</li>
<li>Ananas</li>
</ol>
</body>
</html>
Les conteneurs de textes - Les listes ordonnées
30
La liste <ol> possède plusieurs attributs :
start permet de définir la valeur du début de la numérotation.
reversed donne la possibilité d’inverser l’ordre des items de la liste.
type permet de changer le type de l’énumération. Vous pouvez utiliser comme

valeur 1 pour avoir des chiffres (valeur par défaut), a pour avoir des lettres en
minuscules, A pour avoir des lettres en majuscules et I pour avoir des chiffres
romains.
<!doctype html>
<html lang="fr">
<head>
1/8
</head>
<body>
<ol start="5" type="I">
<li>Pommes</li>
<li>Poires</li>
<li>Ananas</li>
</ol>
</body>
</html>
Les liens hypertextes
31
Ils permettent de lier des pages entre elles, d’un site à
l’autre, mais aussi au sein d’une même page de votre site.
Vous insérerez des liens vers des adresses de messagerie,

vers des réseaux sociaux et pour télécharger des fichiers
par exemple.
L’insertion d’un lien se fait avec l’élément <a> (a pour

anchor en anglais).
Cet élément possède plusieurs attributs :
●
href est indispensable, il permet d’indiquer l’URL à atteindre.
1/8 ●
hreflang peut spécifier la langue de la cible. Les valeurs
peuvent être par exemple en, it, es…
●
rel permet d’indiquer le type de relation du lien qui est
établi.
●
target donne le contexte d’ouverture du lien dans le navigateur.
Les liens hypertext
32
A minima, nous avons cette structure :
<a href="inscription.html">Inscrivez-vous</a>
Nous avons :
●
La balise d’ouverture <a>.
●
La référence du lien, href, est ici une page du même
site, inscription.html.
●
Le contenu du lien est Inscrivez-vous. Cela correspond
au texte sur lequel les visiteurs devront cliquer pour
1/8
activer le lien.
●
La balise de fermeture </a>.
Les liens vers des pages
33
Les liens peuvent cibler une page de votre site ou une page
d’un autre site.
Dans le premier cas, l’URL pourra être relative, dans le

second, l’URL devra être absolue.
La page ciblée se trouve :
●
dans le même dossier que la page contenant le lien :
<a href="inscription.html">Inscrivez-vous</a>.
●
dans un sous-dossier par rapport à la page contenant le
lien :
<a href="utilisateurs/inscription.html">Inscrivez-vous</a>.
1/8
●
dans un dossier parent par rapport à la page contenant le
lien :
<a href="../inscription.html">Inscrivez-vous</a>.
●
sur un autre site web :
<ahref="http://www.le-site.fr/voyages/venise.html">Venise</a>.
Les liens internes
34
Lorsque vous avez un long document, il peut être très utile pour les
visiteurs de créer des liens internes à la page, de sorte à pouvoir se
déplacer facilement et rapidement dans cette même page.
La première étape consiste à identifier, avec l’attribut id, les éléments

HTML qui devront être ciblés par les liens.
Imaginons un long document comportant trois parties : Introduction,

Résultats et Conclusion. Les titres de ces trois parties seront placés dans
un élément <h2>. Nous aurons donc cette structure :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
1/8
<body>
<h1>Rapport</h1>
<h2 id="introduction">Introduction</h2>
<p>Donec id elit non mi porta gravida...</p>
<h2 id="resultats">Résultats</h2>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
<h2 id="conclusion">Conclusion</h2>
<p>Integer posuere erat a ante venenatis...</p>
</body>
</html>
Les liens internes
35
La deuxième étape consiste à créer des liens vers les cibles
identifiées précédemment.
Pour cela, dans l’élément href, il faut indiquer la valeur de

l’identifiant qui doit être préfixée par le caractère dièse #.
Voici les liens internes :
<p><a href="#introduction">Introduction</a> | <a href="#resultats">

Résultats</a> | <a href="#Conclusion">Conclusion</a></p>
L’utilisateur peut
1/8
alors cliquer sur
l’un des liens de ce
sommaire et il sera
alors automatiquement
dirigé vers la cible.
Les liens internes
36
Pour vous déplacer facilement dans une page, vous pouvez
parfaitement insérer un lien qui permet de revenir en haut de la
page.
Il suffit dans un premier temps d’identifier le titre principal :

<h1 id="haut">Rapport</h1>.
Ensuite, placez un lien à la fin de chaque partie qui cible cet

identifiant : <p><a href="#haut">Haut de la page</a></p>.
1/8
Les autres types de liens
37
Les liens vers les messageries :

<p><a href="mailto:jean@dupond.org">Contactez-moi</a></p>
Lien vers Twitter : <a href="https://twitter.com/mon-

compte">.
Lien vers Facebook : <a href="https://facebook.com/mon-

compte">.
Les liens de téléchargement :

1/8 <p>Téléchargez le fichier <a href="programme.pdf">PDF du
programme</a>.</p>
Des liens en image :

<p><a href="aide.html"><img src="aide.png"></a></p>

Programmation WEB Cours 1 - HTML5 v2.3

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmation WEB Cours 1 - HTML5 v2.3

Transféré par

Droits d'auteur :

Formats disponibles

BTS SN IR

Cours 1 – Le langage HTML5

Vous le savez, l’Internet tel que nous le

En octobre 1990, Tim Berners-Lee travaille au

Le 1er octobre 1994, le Word Wide Web Consortium

Le W3C (https://www.w3.org/) est chargé d’édicter les

C’est en avril 1995 que l’INRIA (Institut National de

C’est un langage permettant d’écrire de

HTML est plutôt conçu pour donner du sens aux

La version actuelle du HTML est la 5.2 (2017)

En HTML, les balises sont insensibles à la casse.

Voici un exemple de balise HTML :

Regardons notre élément paragraphe d'un peu plus près :

Les principales parties de notre élément sont :

Le rendu de ce document dans

Nous avons ensuite les deux parties de

L’en-tête, avec l’élément <head>, permet de

Le corps de la page, élément <body>, permet

Document Object Model (DOM) signifie « modèle

1/8 Éditeurs en ligne :

Les conteneurs servent aussi à structurer vos

C’est pour cela qu’ils sont qualifiés de

Il peut être utilisé afin de grouper d'autres

Elle est précédée et suivie d'un saut de ligne.

Ceci est très pratique pour mettre en forme de

Voici un exemple précis : nous souhaitons mettre en

Voici le sélecteur CSS :

<p>Donec ullamcorper nulla non metus auctor

Voici l’affichage obtenu :

Les éléments de section (section, article, nav,

Contrairement à des éléments génériques comme span

<section> Section générique regroupant un même sujet, une même fonctionnalité,

<article> Section de contenu indépendante, pouvant être extraite individuellement

<nav> Section possédant des liens de navigation principaux (au sein du

<aside> Section dont le contenu est un complément par rapport à ce qui

<footer> Section de conclusion d'une section ou d'un article, voire du document

Le W3C conseille fortement de les utiliser dans

Dernier point, tous les titres <hx> s’affichent en

Voici un exemple simple :

Pour cela, vous devez utiliser l’élément <address>

Vous pourrez y placer des adresses postales, des

Dans cet élément, vous pouvez imbriquer les autres

Les listes permettent d’insérer des énumérations

2. Les listes non ordonnées

Les listes non ordonnées (unordered list en anglais)

Voici un exemple simple :

start permet de définir la valeur du début de la numérotation.

reversed donne la possibilité d’inverser l’ordre des items de la liste.

type permet de changer le type de l’énumération. Vous pouvez utiliser comme

Vous insérerez des liens vers des adresses de messagerie,

L’insertion d’un lien se fait avec l’élément <a> (a pour

Cet élément possède plusieurs attributs :

Dans le premier cas, l’URL pourra être relative, dans le

La page ciblée se trouve :

La première étape consiste à identifier, avec l’attribut id, les éléments

Imaginons un long document comportant trois parties : Introduction,

Pour cela, dans l’élément href, il faut indiquer la valeur de

Voici les liens internes :

<p><a href="#introduction">Introduction</a> | <a href="#resultats">

Voici l’affichage obtenu :

Il suffit dans un premier temps d’identifier le titre principal :

Ensuite, placez un lien à la fin de chaque partie qui cible cet

Voici l’affichage obtenu :

Les liens vers les messageries :