Langage HTML - Fondamentaux et ateliers

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

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.

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.

1.Rappel des fondamentaux
2.Codage des tableaux (suite)
3.Introduction des feuilles de style
* Travail en binôme.

Frédéric Simonet
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
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>
► <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
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>

Frédéric Simonet
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

Frédéric Simonet
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>

Frédéric Simonet
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.

Frédéric Simonet
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

Frédéric Simonet
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

Frédéric Simonet
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
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>

Frédéric Simonet
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>

Frédéric Simonet
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>

Frédéric Simonet
Tél. : 06 62 63 94 49
Ex. 202.1 Box Model : éléments parents
Attribut style ; propriétés border et margin-top

É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 ;
Bloc 3 : Mentions Légales
</div>

Frédéric Simonet
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
width : 50% ;
Bloc 2.1 : MENU
</div>

Élément fils dédié au contenu
<div
width : 50% ;
Bloc 2.2 : CONTENU
</div>

Frédéric Simonet
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
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 ;
[é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>

Frédéric Simonet
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 {
3.width : 800px ;
4.border-collapse : collapse ;
5.}

Troisième tableau
1.table#tableau_3 {
3.width : 600px ;
4.table-layout : fixed ;
5.empty-cells : hide ;
6.}

Frédéric Simonet
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 {
3.width : 960px ;
4.}

Deuxième tableau
1.table#tableau_2 {
3.width : 960px ;
4.border-spacing : 10px ;
5.}

Troisième tableau
1.table#tableau_3 {
3.width : 960px ;
5.}
6.table#tableau_3 td {padding : 20px ;}

Frédéric Simonet
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 {
3.width : 960px ;
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;}

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;}

Frédéric Simonet
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
Tél. : 06 62 63 94 49
Annexe : IHM*
Fondamentaux des interfaces
* Interfaces homme-machine.

Langage HTML - Fondamentaux et ateliers

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Langage HTML - Fondamentaux et ateliers

Similar a Langage HTML - Fondamentaux et ateliers (20)

Último

Último (20)

Langage HTML - Fondamentaux et ateliers