32
DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/

DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

  • Upload
    dodan

  • View
    230

  • Download
    0

Embed Size (px)

Citation preview

Page 1: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

DAWDéveloppement Applications Web

Ouadfel Salima

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

Page 2: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Conception de page web statique

1. HTML5

Page 3: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

HTML 5 – Introduction

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

français « langage hypertexte de balisage ».

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

Page 4: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Editeur du code HTML

Page 5: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Validation et compatibilité entre navigateurs du code HTML

• À la différence de langages de programmation, un non-respect de la syntaxe de HTML n'empêchera pas l'affichage sur le navigateur.

• Plus généralement, le navigateur affichera quelque chose (de non spécifié) ou n'affichera rien, mais n'affichera jamais d'erreur.

Page 6: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0
Page 7: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Notions de réseaux

Balises et éléments

Page 8: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

Ordre d’imbrication des balises

<balise1>

</balise1>

<balise2>

</balise2>

<balise1>

<balise2>

</balise1>

</balise2>

Correct Incorrect

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

17/4

<balise2>

</balise2>

<balise1>

</balise1>

Page 9: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Titre de la page</title>

<meta charset="utf-8"/>

</head>

<body>

<!-- Ici votre site Web -->

</body>

</html>

19/4

Page HTML5 minimale

Page 10: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

<!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-->

</body>

</html>

Page HTML5 minimaleDTD (document type definition) du document (version de HTML utilisée)

Page HTML

Informations

générales sur la

page (invisible)

Partie visible de la page HTML

Encodage du fichier

Titre de la page

(visible dans le

navigateur)

20/4

Page 11: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Eléments bloc et en line

Page 12: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

HTML 5

Développement d’applications Web L2 – Info

Plan du chapitre

1 Les balises simples

2 Les balises avancées

hmafoud.wordpress.com

Page 13: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

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

Retour de ligne : <br/>Ce tex te cont ient <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>

Force (gras) : <strong></strong><strong>Attention !</strong>

Emphase (italique) : <em></em><em>copyright</em>

Corps de texte

25/4

Page 14: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Titres, paragraphes et séparateurs

Page 15: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Balises strong em et markstrong

em mark

Page 16: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

HTML 5

Développement d’applications Web L2 – Info

Plan du chapitre

1

Les balises simples

2 Les balises avancées

hmahfoud.wordpress.com

1

2

Page 17: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Les liens

Page 18: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Les liens

Page 19: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Les liens

Page 20: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

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

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></ul><ul>

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

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

</ul>

Liste de termes : <dl></dl><dl>

<dt>Terme 1</dt>

<dd>Définition du terme 1</dd>

<dt>Terme 2</dt>

<dd>Définition du terme 2</dd>

</dl>

Listes

27/4

Page 21: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Les tableaux

Page 22: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Balise <table>

Page 23: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

• Le Titre est une cellule de donnée (table data) spécial.

• Il est crée avec la balise th

.

Titre des lignes et/ou des colonnes du tableau

Page 24: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

sont crées avec les éléments :

• <tbody> : regroupe un ensemble de lignes du tableau

• <thead>:représente l’en-tête du tableau.

• <tfoot>:représente le pied du tableau.

Corps, entête et pied du tableau

Corps du tableau

Page 25: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Corps, entête et pied du tableau

En tête du tableau

Corps du tableau

Pied du tableau

Page 26: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0
Page 27: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Tableaux irréguliers

Fusion des colonnes attribut: colspan

Page 28: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Tableaux irréguliersFusion des lignes attribut: rowspan

Page 29: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Les images

Page 30: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Notions de réseaux

Les images

Page 31: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

33

Rendu dans le navigateur

Les images

Page 32: DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-html5.pdf · Page HTML5 minimale. Présentation du cours > Web et HTML > CSS V1.0.0

Présentation du cours > Web et HTML > CSS V1.0.0

<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, un message, e t c .

</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, un message, e t c .

</video>

MultimédiaLecteur audio : <audio></audio>

<source/> :

ressource

multimédia