Scribd
Importer
29 vues25 pages

Chapitre 1 HTML5

Le document présente une introduction au HTML5, en expliquant son historique, sa structure générale, les balises HTML, les attributs et les commentaires. Il souligne les nouveautés d'HTML5, notamment l'introduction de nouveaux éléments et APIs pour enrichir les fonctionnalités des pages web. Enfin, une bibliographie et une webographie sont fournies pour approfondir le sujet.

Transféré par

nickyzouhaire45
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
29 vues25 pages

Chapitre 1 HTML5

Le document présente une introduction au HTML5, en expliquant son historique, sa structure générale, les balises HTML, les attributs et les commentaires. Il souligne les nouveautés d'HTML5, notamment l'introduction de nouveaux éléments et APIs pour enrichir les fonctionnalités des pages web. Enfin, une bibliographie et une webographie sont fournies pour approfondir le sujet.

Transféré par

nickyzouhaire45
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Introduction

Les balises HTML


Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Chapitre I: Introduction HTML5

Professeure Manal ZETTAM

Ecole Nationale des Sciences Appliquées de Safi

Université Cadi Ayyad - Marrakech

Année Universitaire : 2024-2025

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 1 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Plan

1 Introduction

2 Les balises HTML

3 Structure générale d’un document HTML

4 Les attributs

5 Les commentaires

6 Bibliographie & Webographie

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 2 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

Définition
HTML(HyperText Markup Language) est un langage de balisage
(dit aussi langage de marquage) qui permet de structurer le
contenu des pages web dans différents éléments.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 3 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction


Les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) créé en 1986
pour structurer des contenus très divers.

Le langage SGML est trop complexe pour être appliqué tel


X quel au Web.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 4 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

HTML historique
Tim Berners-Lee a inventée HTML en 1992.
HTML a été conçu à l’origine comme un outil de structuration
des contenus textuels.
HTML n’a pas été conçu pas pour créer des présentations
diversifiées.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 5 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

HTML historique
Netscape et Microsoft ont détourné HTML de sa première
vocation avec l’ajout d’éléments de design.
CSS (Cascading Styles Sheets) apparut en 1996 a facilité
l’utilisation de HTML pour le design.
En 1998, HTML4 a été introduit avec l’emploi systématique
de CSS 2.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 6 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

HTML historique
La création de XML (eXtensible Markup Language) en 1998
et son succès dans de multiples domaines d’application ont
conduit le W3C (World Wide Web Consortium) à créer le
langage XHTML.
Le langage XHTML est une reformulation de HTML en tant
qu’application XML.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 7 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>Exemple HTML 4</title>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>vel egestas erat tempor mollis
<li>Praesent fermentum, orci ac hendrerit bibendum.
<EM Class="important">libr</Em> dictum varius est.</li>
</li>
</ul>

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 8 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Exemple XHTML 1.0</title></head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>vel egestas erat tempor mollis
<li>Praesent fermentum, orci ac hendrerit bibendum.
<EM Class="important">libr</Em> dictum varius est.</li>
</li></ul> </body></html>

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 9 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

HTML vs XHTML
La syntaxe HTML est permissive.
La syntaxe XHTML n’est pas permissive.
XHTML impose un ensemble de régles d’écriture définies par
https:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 10 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

HTML 5 & XHTML 5


HTML 5 (HyperText Markup Language 5) a vu le jour début
2004 après une année de travail.
HTML 5 est la dernière révision majeure du HTML (selon
W3C).
La reformulation de HTML5 en application XML est notée
XHTML5.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 11 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

Les nouveautés HTML 5


HTML 5 inaugure de nouveaux éléments pour de nouveaux
usages.
HTML 5 inaugure de nouvels APIs (Application Programming
Interfaces) pour étendre les possibilités dynamiques du
langage.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 12 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

Les nouveaux éléments


Les premiers permettent d’ajouter une valeur sémantique aux
blocs génériques précédemment définis par les éléments div et
span. C’est le cas notamment de article, aside, footer, header,
section et nav.
Les suivants apportent de nouvelles fonctionnalités aux pages
web ; c’est le cas,notamment, de audio et video.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 13 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

Les nouvels APIs


le stockage de données côté client ;
l’élément canvas (dessin 2D et 3D) ;
les microformats ;
la lecture de médias (audio, vidéo), ;
le glisser-déposer (drag’n drop) ;

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 14 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Introduction

Les nouvels APIs


la communication bidirectionnelle (sockets, push,
interdocuments),
la géolocalisation ;
la gestion des applications web hors-ligne ;
la lecture et l’écriture de fichiers locaux ;
la gestion de l’historique du navigateur ;

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 15 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Les balises HTML

Les balises HTML structurent le contenu d’un document, en


délimitant les blocs.
Les blocs contiennent des paragraphes, des titres, différents
types de médias(images, sons, vidéos), des contrôles de
formulaires ou encore des liens hypertextes.
Les balises se distinguent du contenu en utilisant les
caractères <, > et /.
Les balises ont une présentation et une signification définie
par le langage HTML.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 16 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Les balises

Il existe trois types de balises :


balise d’ouverture : <nom balise>,
balise de fermeture : </nom balise>,
balise vide : <nom balise/>.

Exemple
<p>Ceci est un paragraphe.</p>

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 17 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Structure générale d’un document HTML

Le document HTML possède par défaut une tête et un


corps.

La tête (élément head) définit les propriétés globales du


document (titre, apparence, méta-informations).

Le corps (élément body) renferme des balises de contenu.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 18 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Structure générale d’un document HTML


Modèle de document HTML 5 simple:

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

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 19 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Structure générale d’un document HTML

Un document HTML 5 minimaliste:

<!doctype html>
<title>Titre du document</title>

La spécification autorise l’omission des balises html, head,


meta et body.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 20 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Les attributs

Les attributs modifient les propriétés des balises HTML.

Un élément peut comporter zéro ou plusieurs attribut(s),


choisi(s) dans un ensemble spécifique à cet élément ou un
ensemble commun à tous les éléments HTML.

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 21 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Les attributs

Exemple d’attributs facultatifs:

<p id="introduction" class="roman">


</p>

Exemple d’attribut nécessaires:

<img src="photographie.jpg" />

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 22 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Les commentaires

Un commentaire est défini comme suit:

<!-- ceci est un commentaire -->

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 23 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Bibliographie & Webographie

Réalisez votre site web avec HTML 5 et CSS 3 Ed. 3


(Eyrolles), Nebra, Mathieu (2023) .
HTML 5 : Une référence pour le développeur web Ed. 3
(Eyrolles),Rimelé, Rodolphe (2017).
XHTML et CSS : Cours et exercices (EYROLLES), Jean
Engels (2006).

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 24 / 25


Introduction
Les balises HTML
Structure générale d’un document HTML
Les attributs
Les commentaires
Bibliographie & Webographie

Bibliographie & Webographie

https://www.w3.org/TR/2009/WD-html5-20090825/
introduction.html
https://fr.wikipedia.org/wiki/Extensible_
Hypertext_Markup_Language
https://www.irif.fr/~carton/Enseignement/XML/
Cours/Annexes/presentation.html
https://developer.mozilla.org/fr/docs/Learn/HTML

Professeure Manal ZETTAM Chapitre I: Introduction HTML5 25 / 25

Vous aimerez peut-être aussi