View
230
Download
0
Category
Preview:
Citation preview
DAWDéveloppement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
Conception de page web statique
1. HTML5
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..
Editeur du code HTML
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.
Notions de réseaux
Balises et éléments
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>
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
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
Eléments bloc et en line
HTML 5
Développement d’applications Web L2 – Info
Plan du chapitre
1 Les balises simples
2 Les balises avancées
hmafoud.wordpress.com
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
Titres, paragraphes et séparateurs
Balises strong em et markstrong
em mark
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
Les liens
Les liens
Les liens
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
Les tableaux
Balise <table>
• 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
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
Corps, entête et pied du tableau
En tête du tableau
Corps du tableau
Pied du tableau
Tableaux irréguliers
Fusion des colonnes attribut: colspan
Tableaux irréguliersFusion des lignes attribut: rowspan
Les images
Notions de réseaux
Les images
33
Rendu dans le navigateur
Les images
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
Recommended