View
3
Download
0
Category
Preview:
Citation preview
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 !
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)
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
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
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
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>
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
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 .
<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
Recommended