Langage HTML - Fondamentaux et ateliers
description
Transcript of Langage HTML - Fondamentaux et ateliers
![Page 1: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/1.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Langage HTML
Fondamentaux et ateliers — 12 heures
Année 2013/2014
Pôle universitaire Léonard de Vinci
ILV : MBA MCI Full/Part Time
![Page 2: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/2.jpg)
Programme général
1. Fondamentaux du langage HTML
2. Atelier sur éléments de structure
3. Atelier sur lien hypertexte
4. Atelier sur intégration des photos
5. Atelier sur tableaux
![Page 3: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/3.jpg)
Programme session 1*
1. Notions d’élément et d’attribut
2. Typologie des éléments
3. Codage des balises (et de leurs attributs)
4. DOCTYPE et encodage (UTF-8)
* Atelier collaboratif sur poste formateur.
![Page 4: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/4.jpg)
Programme session 2*
1. Rappel des fondamentaux
2. Codage des éléments de structure
3. Codage des liens et intégration de photo
4. Codage des tableaux
* Travail en binôme.
![Page 5: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/5.jpg)
Programme session 3*
1. Rappel des fondamentaux
2. Codage des tableaux (suite)
3. Introduction des feuilles de style
* Travail en binôme.
![Page 6: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/6.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
(X)HTML Terminologie du langage
Élément-balise et attribut
![Page 7: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/7.jpg)
Bases du langage (X)HTML*
Le langage donne lieu à des scripts qui
contiennent des éléments.
Les éléments sont liés entre eux par une
relation de type parent/enfant. Chacun des
éléments fait appel à des attributs.
* Hypertext markup language.
![Page 8: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/8.jpg)
Bases du langage (X)HTML*
La liste de tous les types d’élément
disponibles, avec leurs attributs respectifs,
est définie dans un document appelé DTD*.
La DTD du langage HTML est elle-même
codée dans un [méta-]langage appelé
SGML ; le [méta-]langage associé au
XHTML est le XML.
* Document type definition.
![Page 9: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/9.jpg)
Nom des fichiers
Le nom des fichiers est composé d’un
identifiant, suivi d’un point, lui-même suivi de
l’extension html (ex. : contact.html).
L’identifiant est le plus souvent composé de
caractères alphanumériques [a-z0-9] ; les
caractères spéciaux [-_$.+!*'(),] sont
tolérés*.
* Le trait d’union est très utilisé ; les autres caractères, quasiment pas.
![Page 10: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/10.jpg)
Script vs page
Script : la notion de script désigne le code
HTML. Celui-ci est dupliqué puis transféré
vers la machine de l’utilisateur.
Page : l’interprétation des scripts (et du
code qu’ils contiennent) par le navigateur
donne lieu à une page.
![Page 11: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/11.jpg)
Typologie des éléments
Éléments de structure
Éléments de bloc
Éléments de ligne
![Page 12: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/12.jpg)
Éléments de bloc vs ligne
Éléments de bloc : le navigateur positionne
deux éléments de bloc voisins l’un au
dessus de l’autre.
Éléments de ligne : le navigateur
positionne deux éléments de ligne voisins
l’un à côté de l’autre.
![Page 13: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/13.jpg)
Principaux éléments de bloc
h1, h2, h3, p
table, form
ul, ol et li (élément fils de ul et ol)
div
![Page 14: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/14.jpg)
Élément div
Cet élément sert à définir les différents blocs
qui structurent les pages d’un site Web
(layout).
Il fait nécessairement appel à la feuille de
style du site ; celle-ci déterminant les
propriétés des blocs considérés.
![Page 15: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/15.jpg)
Principaux éléments de ligne
a, strong, em, abbr
sub, sup
img
input, select, textarea
span
![Page 16: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/16.jpg)
Élément span
Cet élément sert à personnaliser la
présentation de segments spécifiques
contenus dans le texte courant.
Il fait nécessairement appel à la feuille de
style du site ; celle-ci déterminant les
propriétés du segment considéré.
![Page 17: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/17.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
(X)HTML Règles de codage
Balises, relation parent/enfant et attributs
![Page 18: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/18.jpg)
Codage des balises
► Élément e (élément générique)
► Balise de regroupement :
balise d’ouverture <e>
+ contenu
+ balise de fermeture </e>
![Page 19: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/19.jpg)
Codage de quelques balises
► <h1>Titre de niveau 1</h1>
► <h2>Titre de niveau 2</h2>
► <h3>Titre de niveau 3</h3>
► <p>Paragraphe</p>
► <label>Libellé d’un formulaire</label>
![Page 20: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/20.jpg)
Cas des balises autofermantes
► <meta /> éq. à <meta></meta>
► <img /> éq. à <img></img>
► <br /> éq. à <br></br>
![Page 21: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/21.jpg)
Codage relation parent/enfant
1. <e1>
2. <e1.1>
3. [élément(s) fils ou texte]
4. </e1.1>
5. </e1>
![Page 22: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/22.jpg)
table parent de tr parent de td
1. <table>
2. <tr>
3. <td>[…]</td>
4. </tr>
5. </table>
![Page 23: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/23.jpg)
Codage des attributs
► Élément e
► e fait appel aux attributs a1 et a2
► a1 et a2 prennent comme valeur v1 et v2
—
Code : <e a1="v1" a2="v2">[…]</e>
![Page 24: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/24.jpg)
Codage de quelques attributs
► <a href="http://www.yws.fr">yws.fr</a>
► <table border="1">[…]</table>
► <img src="tigre.png" />
► <h1 class="titre_1">Titre de niveau 1</h1>
►<p id="note_de_bas_de_page">Texte</p>
![Page 25: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/25.jpg)
Page HTML type
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8" />
5. <title>Ma page personnelle</title>
6. </head>
7. <body>
8. <h1>Ma page personnelle</h1>
9. <p>Voici mes compositeurs préférés :</p>
10. <ul>
11. <li>Elvis Costello</li>
12. <li>Johannes Brahms</li>
13. <li>Georges Brassens</li>
14. </ul>
15. </body>
16. </html>
![Page 26: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/26.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 101.1 Structure des pages
Éléments html, head, meta, title et body
![Page 27: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/27.jpg)
Page HTML type
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8" />
5. <title>Éléments structurants</title>
6. </head>
7.
8. <body>
9. Éléments structurants : html, head et body.
10. </body>
11. </html>
![Page 28: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/28.jpg)
Page à afficher
![Page 29: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/29.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 101.2 Structure du contenu
Éléments h[1,2,3 ou 4], p, ul/ol, li et em
![Page 30: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/30.jpg)
Éléments à coder
Éléments h1, h2, h3 et h4
Élément p
Éléments ul et ol
Élément li
Élément em
![Page 31: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/31.jpg)
Page à afficher
![Page 32: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/32.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 101.3 Hyperliens
Élément a ; attributs href, title et target
![Page 33: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/33.jpg)
Liens : élément et attributs
Élément a
Attributs et valeurs associées
href="[identifiant de la page ou de l’ancre]"
title="[titre de la page ou nom de l’ancre]"
target="_blank"
a : élément de ligne
![Page 34: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/34.jpg)
Lien à coder
<a
href="http://validator.w3.org/"
title="Nouvelle fenêtre"
target="_blank">
Valider le script
</a>
![Page 35: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/35.jpg)
Page à afficher
![Page 36: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/36.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 101.4 Images
Élément img ; attributs src et alt
![Page 37: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/37.jpg)
Images : élément et attributs
Élément autofermant img
Attributs et valeurs associées
src="[identifiant de l’image]"
alt="[descriptif de l’image]"
img : élément de ligne
![Page 38: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/38.jpg)
src="./images/tigre.jpg"
1. Le point qui précède le slash (« / »)
représente le chemin d’accès au script
qui contient l’image à intégrer.
2. Le serveur se positionne sous le
répertoire images.
3. Le serveur identifie l’image tigre.jpg ; il la
duplique puis transfert la copie au client.
![Page 39: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/39.jpg)
Page à afficher
![Page 40: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/40.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 102.1 Structure des tableaux
Éléments table, t[head ou body], tr, th et td
![Page 41: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/41.jpg)
Tableaux : éléments et attributs
Élément table ; attribut border
Élément fils de table : caption
Éléments fils de table : thead et tbody
Élément fils de t[head ou body] : tr
Éléments fils de tr : th et td
table : élément de bloc
![Page 42: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/42.jpg)
Page à afficher
![Page 43: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/43.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 102.2/3 Extension des cellules
Élément table ; attributs [col ou row]span
![Page 44: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/44.jpg)
Extension des cellules
Élément td
Attributs et valeurs associées
colspan="[nombre de colonnes à couvrir]"
rowspan="[nombre de lignes à couvrir]"
td : élément de ligne
![Page 45: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/45.jpg)
Page à afficher
![Page 46: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/46.jpg)
Page à afficher
![Page 47: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/47.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Annexe
Feuilles de style CSS
![Page 48: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/48.jpg)
Feuille de style [identifiant].css
Ensemble de règles
Règle = sélecteur + bloc de déclaration(s)
Déclaration = propriété + valeur(s)
![Page 49: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/49.jpg)
Quatre types de sélecteur
Sélecteur de type [d’élément]
Sélecteur Id (identifiant)
Sélecteur de classe
Sélecteur de pseudo-classe
![Page 50: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/50.jpg)
Sélecteur de type
h1 { color : purple ; }
Bloc de déclaration(s)
Propriété Valeur
![Page 51: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/51.jpg)
Intégration* des feuilles de style
< link
rel = "stylesheet"
href = "[identifiant de la feuille de style]"
type = "text/css" />
* L’élément link est un enfant de l’élément head.
![Page 52: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/52.jpg)
CSS : Cascading Style Sheet
Les règles appliquées à un élément sont
appliquées par défaut à tous les enfants de
ce même élément.
Cependant, les règles appliquées aux
enfants peuvent faire l’objet d’une
spécialisation [surcharge].
![Page 53: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/53.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 201.1 Tech. d’intégration I – Typogr.
Attribut style ; propriétés font-[…] et color
![Page 54: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/54.jpg)
Intégration inline des déclarations
► Élément e
► e fait appel à l’attribut style
► style fait appel aux déclarations d1 et d2
—
Code : <e style="d1 ; d2">[…]</e>
![Page 55: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/55.jpg)
Exemples
► <p style="font-size : 16px ;">[…]</p>
► <p style="font-style : italic ;">[…]</p>
► <p style="font-variant : small-caps ;">[…]</p>
► <p style="font-weight : bold ;">[…]</p>
![Page 56: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/56.jpg)
Page à afficher
![Page 57: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/57.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 201.2 Tech. d’intégration II – Typogr.
Élément style ; propriétés font-[…] et color
![Page 58: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/58.jpg)
Positionnement outline des règles
1. <head>
2. <style type="text/css">
3. [règles à appliquer]
4. </style>
5. </head>
![Page 59: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/59.jpg)
Définition outline des règles (I)
► Classe c
► c fait appel aux propriétés p1 et p2
► p1 et p2 prennent comme valeur v1 et v2
—
Code : .c {p1 : v1 ; p2 : v2 ;}
![Page 60: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/60.jpg)
Intégration outline des règles
► Élément e
► e fait appel à l’attribut class
► class prend comme valeur c
—
Code : <e class="c">[…]</e>
![Page 61: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/61.jpg)
Définition outline des règles (II)
► Identifiant i
► i fait appel aux propriétés p1 et p2
► p1 et p2 prennent comme valeur v1 et v2
—
Code : #i {p1 : v1 ; p2 : v2 ;}
![Page 62: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/62.jpg)
Intégration outline des règles
► Élément e
► e fait appel à l’attribut id
► id prend comme valeur i
—
Code : <e id="i">[…]</e>
![Page 63: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/63.jpg)
Page à afficher
![Page 64: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/64.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 201.3 Tech. d’intégration III – Typogr.
Feuille styles.css ; propriétés font-[…] et color
![Page 65: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/65.jpg)
Externalisation des règles
1. <head>
2. <link
3. href="./css/styles.css"
4. rel="stylesheet"
5. type="text/css" />
6. </head>
![Page 66: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/66.jpg)
Page à afficher
![Page 67: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/67.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 202.1 Box Model : éléments parents
Attribut style ; propriétés border et margin-top
![Page 68: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/68.jpg)
Box Model
![Page 69: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/69.jpg)
Éléments parents
Élément 1 : div
Élément 2 : div
Élément 3 : div
![Page 70: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/70.jpg)
Premier élément
<div
style="border : 2px solid gray ;
width : 800px ;
height : 150px ;">
Bloc 1 : HEADER
</div>
![Page 71: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/71.jpg)
Deuxième élément
<div
style="border : 2px solid green ;
width : 800px ;
height : 450px ;
margin-top : 5px ;">
Bloc 2 : MENU et CONTENU
</div>
![Page 72: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/72.jpg)
Troisième élément
<div
style="border : 2px solid red ;
width : 800px ;
height : 50px ;
margin-top : 5px ;">
Bloc 3 : Mentions Légales
</div>
![Page 73: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/73.jpg)
Page à afficher
![Page 74: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/74.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 202.2 Box Model : éléments fils
Attribut style ; propriété width
![Page 75: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/75.jpg)
Élément fils dédié au menu
<div
style="border : 2px solid gray ;
width : 50% ;
margin-top : 5px ;">
Bloc 2.1 : MENU
</div>
![Page 76: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/76.jpg)
Élément fils dédié au contenu
<div
style="border : 2px solid gray ;
width : 50% ;
margin-top : 5px ;">
Bloc 2.2 : CONTENU
</div>
![Page 77: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/77.jpg)
Page à afficher
![Page 78: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/78.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 202.3 Box Model : éléments fils
Attribut style ; propriétés padding et float
![Page 79: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/79.jpg)
Premier élément parent
<div
style="border : 2px solid gray ;
width : 800px ;
height : 150px ;
padding : 5px 0 0 5px ;">
Bloc 1 : HEADER
</div>
![Page 80: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/80.jpg)
Deuxième élément parent
<div
style="border : 2px solid green ;
width : 805px ;
height : 450px ;
margin-top : 5px ;">
[éléments fils]
</div>
![Page 81: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/81.jpg)
Troisième élément parent
<div
style="border : 2px solid red ;
width : 800px; height:50px ;
margin-top : 5px ;
padding : 5px 0 0 5px ;">
Bloc 3 : Mentions Légales
</div>
![Page 82: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/82.jpg)
Élément fils dédié au menu
<div
style="float : left ;
border : 2px solid gray ;
width : 150px ; height : 430px ;
margin : 5px 0 0 5px ; padding : 5px 0 0 5px ;">
Bloc 2.1 : MENU
</div>
![Page 83: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/83.jpg)
Élément fils dédié au contenu
<div
style="float : left ;
border : 2px solid gray ;
width: [largeur à calculer] ; height: 430px ;
margin : 5px 0 0 5px ; padding : 5px 0 0 5px ;">
Bloc 2.2 : CONTENU
</div>
![Page 84: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/84.jpg)
Page à afficher
![Page 85: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/85.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 203.1 Table Model : élément table
Propriétés de l’élément table
![Page 86: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/86.jpg)
Width, Border, Spacing*
* http://dev.w3.org/csswg/css3-tables/
![Page 87: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/87.jpg)
Width, Border, Padding*
* http://dev.w3.org/csswg/css3-tables/
![Page 88: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/88.jpg)
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960 px ;
4. }
![Page 89: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/89.jpg)
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 800px ;
4. border-collapse : collapse ;
5. }
![Page 90: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/90.jpg)
Troisième tableau
1. table#tableau_3 {
2. background : yellow ;
3. width : 600px ;
4. table-layout : fixed ;
5. empty-cells : hide ;
6. }
![Page 91: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/91.jpg)
Page à afficher
![Page 92: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/92.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 203.2 Table Model : élément table
Attr. border ; propr. border-spacing et padding
![Page 93: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/93.jpg)
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960px ;
4. }
![Page 94: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/94.jpg)
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. }
![Page 95: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/95.jpg)
Troisième tableau
1. table#tableau_3 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 40px ;
5. }
6. table#tableau_3 td {padding : 20px ;}
![Page 96: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/96.jpg)
Page à afficher
![Page 97: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/97.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Ex. 203.3 Table Model : élément td
Propriétés border et vertical-align
![Page 98: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/98.jpg)
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. table-layout : fixed ;
6. }
![Page 99: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/99.jpg)
Cellules du premier tableau
1. table#tableau_1 tr:nth-child(1) td:nth-child(2) {border : double 3px black;}
2. table#tableau_1 tr:nth-child(1) td:nth-child(3) {border : solid 3px black;}
3. table#tableau_1 tr:nth-child(2) td:nth-child(1) {border : dashed 3px black;}
4. table#tableau_1 tr:nth-child(2) td:nth-child(2) {border : dotted 3px black;}
5. table#tableau_1 tr:nth-child(2) td:nth-child(3) {border : ridge 3px black;}
6. table#tableau_1 tr:nth-child(3) td:nth-child(1) {border : outset 3px black;}
7. table#tableau_1 tr:nth-child(3) td:nth-child(2) {border : groove 3px black;}
8. table#tableau_1 tr:nth-child(3) td:nth-child(3) {border : inset 3px black;}
![Page 100: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/100.jpg)
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. }
![Page 101: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/101.jpg)
Cellules du deuxième tableau
1. table#tableau_2 td {border: solid 1px black;}
2. table#tableau_2 tr:nth-child(1) td:nth-child(1) {vertical-align : top;}
3. table#tableau_2 tr:nth-child(2) td:nth-child(2) {vertical-align : middle;}
4. table#tableau_2 tr:nth-child(3) td:nth-child(3) {vertical-align : bottom;}
![Page 102: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/102.jpg)
Page à afficher
![Page 103: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/103.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Annexe : accessibilité
Texte, images, liens et formulaires
![Page 104: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/104.jpg)
Accessibilité
Polices et texte courant
Liens
Images
Formulaires
Navigation
Contrastes de Couleur
![Page 105: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/105.jpg)
serif Cambria Constantia Times New
RomanTimes Georgia
sans-serif Andale Mono Arial Arial
Black Calibri Candara Century Gothic
Corbel Helvetica Impact Trebuchet MS
Verdana
cursive Comic Sans MS
monospace Consolas Courier New
Courier
![Page 106: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/106.jpg)
Texte courant
11 px < font-size (corps) < 16 px
Pas de justification du texte
55-65 caractères par ligne*
Interlignage : 1,5 x font-size
Marge entre paragraphes : interlignage
* Largeur de justification = corps x 30
![Page 107: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/107.jpg)
![Page 108: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/108.jpg)
![Page 109: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/109.jpg)
![Page 110: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/110.jpg)
![Page 111: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/111.jpg)
Gestion des liens
<!–Usage des mots-clés–>
<a href="actualites.html" >
En savoir + sur les actualités
</a>
![Page 112: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/112.jpg)
Gestion des liens
<!–Usage de l’attribut title–>
<a href="actualites.html"
title="nouvelle fenêtre" >
En savoir + sur les actualités
</a>
![Page 113: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/113.jpg)
Gestion des liens
<!–Attribut title et SEO–>
<a href="actualites.html"
title="actualités
(nouvelle fenêtre)" >
En savoir + sur les actualités </a>
![Page 114: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/114.jpg)
Gestion des images
<!–Image de présentation–>
<img
src="tigre.png"
alt="tigre" />
![Page 115: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/115.jpg)
Retenir
l’attention
“Larger online images
hold the eye longer
than smaller images”
Source : Eyetrack III
At least 210 x 230
Taux de Rebond
![Page 116: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/116.jpg)
Gestion des images
<!–Image de décoration–>
<img
src="spacer.png"
alt="" />
![Page 117: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/117.jpg)
Gestion des images
<!– Image porteuse d’information–>
<img
src="fleche_droite.png"
alt="page suivante" />
![Page 118: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/118.jpg)
Gestion des formulaires
Aligner à droite les libellés
Indiquer le format des champs
jj-mm-aaaa
Expliciter les boutons
<input type="submit"
value="OK"
value="Recherche de vol">
![Page 119: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/119.jpg)
![Page 120: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/120.jpg)
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Annexe : IHM*
Fondamentaux des interfaces
* Interfaces homme-machine.
![Page 121: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/121.jpg)
![Page 122: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/122.jpg)
![Page 123: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/123.jpg)
![Page 124: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/124.jpg)
![Page 125: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/125.jpg)
![Page 126: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/126.jpg)
![Page 127: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/127.jpg)
![Page 128: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/128.jpg)
![Page 129: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/129.jpg)
![Page 130: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/130.jpg)
![Page 131: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/131.jpg)
![Page 132: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/132.jpg)
![Page 133: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/133.jpg)
![Page 134: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/134.jpg)
![Page 135: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/135.jpg)
![Page 136: Langage HTML - Fondamentaux et ateliers](https://reader036.fdocument.pub/reader036/viewer/2022081515/559b18cf1a28ab69028b4569/html5/thumbnails/136.jpg)