2019 html5 [mode de compatibilit ]) -...
TRANSCRIPT
![Page 1: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/1.jpg)
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/
![Page 2: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/2.jpg)
Conception de page web statique
1. HTML5
Conception de page web statique
1. HTML5
![Page 3: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/4.jpg)
![Page 5: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/5.jpg)
![Page 6: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/6.jpg)
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 7: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/7.jpg)
![Page 8: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/8.jpg)
Présentation du cours > Web et HTML > CSS
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)
![Page 9: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/9.jpg)
Balises (Eléments) bloc et en ligneBalises (Eléments) bloc et en ligne
![Page 10: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/10.jpg)
HTML 5
Plan du chapitre
1 Les balises simples
2 Les balises avancées
hmafoud.wordpress.com
![Page 11: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/11.jpg)
Présentation du cours > Web et HTML > CSS
�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
![Page 12: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/12.jpg)
Balises strong em et markBalises strong em et mark
strong
em markem mark
![Page 13: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/13.jpg)
HTML 5
Plan du chapitre
1
Les balises simples
2 Les balises avancées
1
2
hmahfoud.wordpress.com
![Page 14: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/14.jpg)
Les liens
![Page 15: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/15.jpg)
Les liens
![Page 16: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/16.jpg)
Les liens
![Page 17: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/17.jpg)
Présentation du cours > Web et HTML > CSS
�É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>
![Page 18: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/18.jpg)
Les tableaux
![Page 19: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/19.jpg)
Les images
![Page 20: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/21.jpg)
Présentation du cours > Web et HTML > CSS
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 .
![Page 22: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/22.jpg)
<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
![Page 23: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/23.jpg)
• 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.
![Page 24: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/24.jpg)
• Balises structurantes
![Page 25: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/25.jpg)
• Balises structurantes
Notions de réseauxNotions de réseaux
![Page 26: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/26.jpg)
Notions de réseauxNotions de réseaux
![Page 27: 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](https://reader034.vdocument.in/reader034/viewer/2022042803/5f482b136b115a12a627e597/html5/thumbnails/27.jpg)