Langage HTML - Fondamentaux et ateliers

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

mailto:[email protected]

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>

Page à afficher

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

Page à afficher

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>

Page à afficher

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


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



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



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


colspan="[nombre de colonnes à couvrir]"

rowspan="[nombre de lignes à couvrir]"

td : élément de ligne

Page à afficher

Page à afficher

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>

Page à afficher

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>

Page à afficher

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>

Page à afficher

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


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 ;


Bloc 3 : Mentions Légales

</div>

Page à afficher

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>

Page à afficher

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>

Page à afficher

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



3. width : 800px ;

4. border-collapse : collapse ;

5. }

Troisième tableau



3. width : 600px ;

4. table-layout : fixed ;

5. empty-cells : hide ;

6. }

Page à afficher

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



3. width : 960px ;

4. }

Deuxième tableau



3. width : 960px ;

4. border-spacing : 10px ;

5. }

Troisième tableau



3. width : 960px ;


5. }

6. table#tableau_3 td {padding : 20px ;}

Page à afficher

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



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

Deuxième tableau



3. width : 960px ;


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



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

http://poynterextra.org/eyetrack2004/main.htm



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.


Support de référence

http://www.slideshare.net/smoofles/interface-design-basics-2182094

Education

Langage HTML - Fondamentaux et ateliers