Upload
frederic
View
294
Download
2
Embed Size (px)
DESCRIPTION
Support de cours
Citation preview
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
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
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.
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.
Programme session 3*
1. Rappel des fondamentaux
2. Codage des tableaux (suite)
3. Introduction des feuilles de style
* Travail en binôme.
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
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.
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.
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.
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.
Typologie des éléments
Éléments de structure
Éléments de bloc
Éléments de ligne
É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.
Principaux éléments de bloc
h1, h2, h3, p
table, form
ul, ol et li (élément fils de ul et ol)
div
É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.
Principaux éléments de ligne
a, strong, em, abbr
sub, sup
img
input, select, textarea
span
É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é.
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
Codage des balises
► Élément e (élément générique)
► Balise de regroupement :
balise d’ouverture <e>
+ contenu
+ balise de fermeture </e>
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>
Cas des balises autofermantes
► <meta /> éq. à <meta></meta>
► <img /> éq. à <img></img>
► <br /> éq. à <br></br>
Codage relation parent/enfant
1. <e1>
2. <e1.1>
3. [élément(s) fils ou texte]
4. </e1.1>
5. </e1>
table parent de tr parent de td
1. <table>
2. <tr>
3. <td>[…]</td>
4. </tr>
5. </table>
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>
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 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>
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 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 à afficher
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
É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 à afficher
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
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
Lien à coder
<a
href="http://validator.w3.org/"
title="Nouvelle fenêtre"
target="_blank">
Valider le script
</a>
Page à afficher
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
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
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 à afficher
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
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 à afficher
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
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 à afficher
Page à afficher
Frédéric Simonet
Formateur Entreprise 2.0
Email : [email protected]
Tél. : 06 62 63 94 49
Annexe
Feuilles de style CSS
Feuille de style [identifiant].css
Ensemble de règles
Règle = sélecteur + bloc de déclaration(s)
Déclaration = propriété + valeur(s)
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
Sélecteur de type
h1 { color : purple ; }
Bloc de déclaration(s)
Propriété Valeur
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.
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].
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
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>
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 à afficher
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
Positionnement outline des règles
1. <head>
2. <style type="text/css">
3. [règles à appliquer]
4. </style>
5. </head>
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 ;}
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>
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 ;}
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 à afficher
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
Externalisation des règles
1. <head>
2. <link
3. href="./css/styles.css"
4. rel="stylesheet"
5. type="text/css" />
6. </head>
Page à afficher
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
Box Model
Éléments parents
Élément 1 : div
Élément 2 : div
Élément 3 : div
Premier élément
<div
style="border : 2px solid gray ;
width : 800px ;
height : 150px ;">
Bloc 1 : HEADER
</div>
Deuxième élément
<div
style="border : 2px solid green ;
width : 800px ;
height : 450px ;
margin-top : 5px ;">
Bloc 2 : MENU et CONTENU
</div>
Troisième élément
<div
style="border : 2px solid red ;
width : 800px ;
height : 50px ;
margin-top : 5px ;">
Bloc 3 : Mentions Légales
</div>
Page à afficher
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
Élément fils dédié au menu
<div
style="border : 2px solid gray ;
width : 50% ;
margin-top : 5px ;">
Bloc 2.1 : MENU
</div>
Élément fils dédié au contenu
<div
style="border : 2px solid gray ;
width : 50% ;
margin-top : 5px ;">
Bloc 2.2 : CONTENU
</div>
Page à afficher
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
Premier élément parent
<div
style="border : 2px solid gray ;
width : 800px ;
height : 150px ;
padding : 5px 0 0 5px ;">
Bloc 1 : HEADER
</div>
Deuxième élément parent
<div
style="border : 2px solid green ;
width : 805px ;
height : 450px ;
margin-top : 5px ;">
[éléments fils]
</div>
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>
É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>
É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 à afficher
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
Width, Border, Spacing*
* http://dev.w3.org/csswg/css3-tables/
Width, Border, Padding*
* http://dev.w3.org/csswg/css3-tables/
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960 px ;
4. }
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 800px ;
4. border-collapse : collapse ;
5. }
Troisième tableau
1. table#tableau_3 {
2. background : yellow ;
3. width : 600px ;
4. table-layout : fixed ;
5. empty-cells : hide ;
6. }
Page à afficher
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
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960px ;
4. }
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. }
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 à afficher
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
Premier tableau
1. table#tableau_1 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. table-layout : fixed ;
6. }
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;}
Deuxième tableau
1. table#tableau_2 {
2. background : yellow ;
3. width : 960px ;
4. border-spacing : 10px ;
5. }
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 à afficher
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
Accessibilité
Polices et texte courant
Liens
Images
Formulaires
Navigation
Contrastes de Couleur
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
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
Gestion des liens
<!–Usage des mots-clés–>
<a href="actualites.html" >
En savoir + sur les actualités
</a>
Gestion des liens
<!–Usage de l’attribut title–>
<a href="actualites.html"
title="nouvelle fenêtre" >
En savoir + sur les actualités
</a>
Gestion des liens
<!–Attribut title et SEO–>
<a href="actualites.html"
title="actualités
(nouvelle fenêtre)" >
En savoir + sur les actualités </a>
Gestion des images
<!–Image de présentation–>
<img
src="tigre.png"
alt="tigre" />
Retenir
l’attention
“Larger online images
hold the eye longer
than smaller images”
Source : Eyetrack III
At least 210 x 230
Taux de Rebond
Gestion des images
<!–Image de décoration–>
<img
src="spacer.png"
alt="" />
Gestion des images
<!– Image porteuse d’information–>
<img
src="fleche_droite.png"
alt="page suivante" />
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">
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.
Support de référence