2019 html5 [Mode de compatibilit ]) - e-monsitesalimaouadfel.e-monsite.com/medias/files/2019-html5-1-.pdf · HTML5. HTML 5 –Introduction • HTML: est l’abréviation de HyperText

DAWDAWDéveloppement Applications

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e

DAWDAWpplications Web

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e-monsite.com/

Conception de page web statique

1. HTML5

Conception de page web statique

1. HTML5

HTML 5 – Introduction

• HTML: est l’abréviation de HyperText Markup Language,

français « langage hypertexte de balisagefrançais « langage hypertexte de balisage

• HTML 5: Est la dernière version du langage

• C’est le navigateur qui lit le fichier HTML et interprète les balises

pour faire l’affichage .

HyperText Markup Language, soit en

langage hypertexte de balisage ». langage hypertexte de balisage ».

: Est la dernière version du langage HTML.

qui lit le fichier HTML et interprète les balises

Présentation du cours > Web et HTML > CSS

Ordre d’imbrication des

<balise1> <balise1><balise1>

…

</balise1>

<balise2>

…

</balise2>

<balise2>

…

</balise2>

<balise1>

…

…

</balise1>

Correct

Une bonne indentation permet d’éviter la plupart des erreurs d’imbrication

V1.0.0

Ordre d’imbrication des balises

<balise1><balise1>

…

<balise2>

</balise1>

…

</balise2>

Incorrect

d’éviter la plupart des erreurs d’imbrication !


Page HTML5 minimale

DTD (document type definition) du document (version de

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Titre de la page</title>

<meta charset="utf-8"/>

</head>

<body>

<! - - I c i votre s i t e Web--> Partie visible

</body>

</html>

Page HTML

V1.0.0

minimale

) du document (version de HTML utilisée)

Partie visible de la page HTML

Encodage du fichier

Titre de la page

(visible dans le

navigateur)

Informations

générales sur la

page (invisible)

Balises (Eléments) bloc et en ligneBalises (Eléments) bloc et en ligne

HTML 5

Plan du chapitre

1 Les balises simples

2 Les balises avancées

hmafoud.wordpress.com


�Paragraphe : <p></p><p>Un simple paragraphe.</p>

�Retour de ligne : <br/>

Corps de texte

�Retour de ligne : <br/>Ce tex te cont ien t <br/>un re tour à l a l i g n e .

Celui là<br/>

aussi !

�Titres : <h1></h1> … <h6></h6><h1>Titre de l a page</h1>

<h2>Titre de 2e niveau</h2>

…

<h6>Titre de 6e niveau</h6>

Elles sont obsolètes, il ne faut pas les utiliser !

sera réalisée avec les CSS

V1.0.0

<h6></h6>

Elles sont obsolètes, il ne faut pas les utiliser ! ⇒ La mise en forme

Balises strong em et markBalises strong em et mark

strong

em markem mark

HTML 5

Plan du chapitre

1

Les balises simples

2 Les balises avancées

1

2

hmahfoud.wordpress.com

Les liens

Les liens

Les liens


�Élément de liste : <li></li>

�Liste ordonnée : <ol></ol>

Listes

�Liste ordonnée : <ol></ol><ol>

<li>Premier élément de la liste</li>

<li>Deuxième élément de la liste</li>

</ol>

� Liste non-ordonnée (puces) : <ul>

<li>Premier élément de la liste</li>

<li>Deuxième élément de la liste</li>

</ul>

V1.0.0

(puces) : <ul></ul>

Les tableaux

Les images

33

<figure> et <figcaption> fonctionnent de concert pour associer

une légende à une illustration ou un autre élément média.

� Rendu dans le

fonctionnent de concert pour associer

une légende à une illustration ou un autre élément média.

� Rendu dans le

navigateur

EXEMPLE


Multimédia�Lecteur audio : <audio></audio>

<audio controls>

<source src="audio.ogg" />

<source src="audio.mp3" />

<source src="audio.wav" />

I c i l ' a l t e r n a t i v e : un l i e n de téléchargement,

</audio></audio>

�Lecteur vidéo : <video></video><video controls>

<source src="video.ogv" />

<source src="video.mp4" />

I c i l ' a l t e r n a t i v e : un l i e n de téléchargement,

</video>

V1.0.0

<audio></audio>

téléchargement, un message, e t c .

<source/> :

ressource

multimédia

<video></video>

téléchargement, un message, e t c .

<iframe>Permet d’afficher un contenu HTML dans une autre page html.

Afficher le contenu d’un lien Afficher le contenu d’un lien

Permet d’afficher un contenu HTML dans une autre page html.

Afficher le contenu d’un lien lien

Sans bordure

Afficher le contenu d’un lien lienEXEMPLE

• details & summaryPour éviter que la page soit trop longue une partie du contenu n'est pas Pour éviter que la page soit trop longue une partie du contenu n'est pas

affichée lors du chargement de la page.

Pour éviter que la page soit trop longue une partie du contenu n'est pas Pour éviter que la page soit trop longue une partie du contenu n'est pas

affichée lors du chargement de la page.

• Balises structurantes

• Balises structurantes

Notions de réseauxNotions de réseaux

Notions de réseauxNotions de réseaux

Documents

2019 html5 [Mode de compatibilit ]) - e-monsitesalimaouadfel.e-monsite.com/medias/files/2019-html5-1-.pdf · HTML5. HTML 5 –Introduction • HTML: est l’abréviation de HyperText