Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Langage HTML - Fondamentaux et ateliers
1. Frédéric Simonet
Formateur Entreprise 2.0
Email : frederic.simonet@yourwebsite.fr
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
2. 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
3. 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.
4. 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.
5. Programme session 3*
1.Rappel des fondamentaux
2.Codage des tableaux (suite)
3.Introduction des feuilles de style
* Travail en binôme.
7. 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.
8. 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.
9. 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.
10. 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.
12. É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.
13. Principaux éléments de bloc h1, h2, h3, p table, form ul, ol et li (élément fils de ul et ol) div
14. É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.
15. Principaux éléments de ligne a, strong, em, abbr sub, sup img input, select, textarea span
16. É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é.
18. Codage des balises
► Élément e (élément générique)
► Balise de regroupement :
balise d’ouverture <e>
+ contenu
+ balise de fermeture </e>
19. 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>
20. Cas des balises autofermantes
► <meta /> éq. à <meta></meta>
► <img /> éq. à <img></img>
► <br /> éq. à <br></br>
22. table parent de tr parent de td
1.<table>
2. <tr>
3. <td>[…]</td>
4. </tr>
5.</table>
23. 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>
24. 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>
32. Frédéric Simonet
Formateur Entreprise 2.0
Email : frederic.simonet@yourwebsite.fr
Tél. : 06 62 63 94 49
Ex. 101.3 Hyperliens
Élément a ; attributs href, title et target
33. 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
34. Lien à coder
<a
href="http://validator.w3.org/"
title="Nouvelle fenêtre"
target="_blank">
Valider le script
</a>
37. 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
38. 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.
40. Frédéric Simonet
Formateur Entreprise 2.0
Email : frederic.simonet@yourwebsite.fr
Tél. : 06 62 63 94 49
Ex. 102.1 Structure des tableaux
Éléments table, t[head ou body], tr, th et td
41. 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
44. 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
48. Feuille de style [identifiant].css Ensemble de règles Règle = sélecteur + bloc de déclaration(s) Déclaration = propriété + valeur(s)
49. 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
50. Sélecteur de type h1 { color : purple ; } Bloc de déclaration(s)
Propriété
Valeur
51. 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.
52. 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].
53. Frédéric Simonet
Formateur Entreprise 2.0
Email : frederic.simonet@yourwebsite.fr
Tél. : 06 62 63 94 49
Ex. 201.1 Tech. d’intégration I – Typogr.
Attribut style ; propriétés font-[…] et color
54. 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>
57. Frédéric Simonet
Formateur Entreprise 2.0
Email : frederic.simonet@yourwebsite.fr
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
58. Positionnement outline des règles
1.<head>
2. <style type="text/css">
3. [règles à appliquer]
4. </style>
5.</head>
59. 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 ;}
60. 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>
61. 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 ;}
62. 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>
104. Accessibilité Polices et texte courant Liens Images Formulaires Navigation Contrastes de Couleur
105. 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
106. 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
107.
108.
109.
110.
111. Gestion des liens
<!–Usage des mots-clés–>
<a href="actualites.html" >
En savoir + sur les actualités
</a>
112. Gestion des liens
<!–Usage de l’attribut title–>
<a href="actualites.html"
title="nouvelle fenêtre" >
En savoir + sur les actualités
</a>
113. Gestion des liens
<!–Attribut title et SEO–>
<a href="actualites.html"
title="actualités
(nouvelle fenêtre)" >
En savoir + sur les actualités </a>
114. Gestion des images
<!–Image de présentation–>
<img
src="tigre.png"
alt="tigre" />
115. Retenir l’attention “Larger online images hold the eye longer than smaller images” Source : Eyetrack III
At least 210 x 230
Taux de Rebond
116. Gestion des images
<!–Image de décoration–>
<img
src="spacer.png"
alt="" />
118. 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">