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)

É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

input, select, textarea

É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>

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

href="http://validator.w3.org/"

title="Nouvelle fenêtre"

target="_blank">

Valider le script

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

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

style="border : 2px solid gray ;

width : 800px ;

height : 150px ;">

Bloc 1 : HEADER

</div>

Deuxième élément

style="border : 2px solid green ;

width : 800px ;

height : 450px ;

margin-top : 5px ;">

Bloc 2 : MENU et CONTENU

</div>

Troisième élément

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

width : 50% ;

Bloc 2.1 : MENU

</div>

Élément fils dédié au contenu

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

width : 800px ;

height : 150px ;

padding : 5px 0 0 5px ;">

Bloc 1 : HEADER

</div>

Deuxième élément parent

style="border : 2px solid green ;

width : 805px ;

height : 450px ;

[éléments fils]

</div>

Troisième élément parent

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

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

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 ;

Deuxième tableau

3. width : 800px ;

4. border-collapse : collapse ;

Troisième tableau

3. width : 600px ;

4. table-layout : fixed ;

5. empty-cells : hide ;

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 ;

Deuxième tableau

3. width : 960px ;

4. border-spacing : 10px ;

Troisième tableau

3. width : 960px ;

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 ;

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 ;

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

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–>

En savoir + sur les actualités

Gestion des liens

<!–Usage de l’attribut title–>

<a href="actualites.html"

title="nouvelle fenêtre" >

En savoir + sur les actualités

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–>

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–>

src="spacer.png"

alt="" />

Gestion des images

<!– Image porteuse d’information–>

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

Langage HTML - Fondamentaux et ateliers

Education

HTML et page Web - diaporamasite.math.free.fr/programmation/html/diaporama/diaporama_html.pdf · diaporama 16 juillet 2015 HTML et page Web. Buts du diaporama Donner les principes

Cours Complet HTML

HTML Salaru

- 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML

Drupal 7 - Fondamentaux et ateliers

HTML Guide Complet

Principes fondamentaux pour enseigner - cna-sat.org les... · Principes fondamentaux pour enseigner les Principes fondamentaux JEFF REED LES PRINCIPES FONDAMENTAUX GUIDE DE L’ANIMATEUR

html i drimwjuver.doc

HTML-CSS - lewebpedagogique.comlewebpedagogique.com/langemelanie/files/2014/05/Livre-HTML-CSS.pdf · HTML-CSS Claude Petitpierre, André Maurer, complété par Brice Canvel Automne

HTML JavaScript 3

Les balises HTML

Introduction html

Accélérateur PME Plaquette 20171120...5 séminaires d’1 journée à l’ESCP EUROPE (Matin : Revue des fondamentaux, Après-midi : Ateliers de travail et co-développement) avec

Cours Html

HTML & CSS - Thessa Innovation...HTML & CSS Synthèse des informations concernant HTML & CSS Rédigée par AGLIATA Anthony CSS & HTML Page 1 sur 22 HTML & CSS TABLE DES MATIERES Chapitre

documente html

exposé html

HTML : Mini tutoriel

1 HTML merci à Emmanuel Nauer. 2 3 4 HTML : Exemple à suivre Exemple de fichier HTML Exemple de fichier HTML Ceci est un exemple de fichier HTML Un

Le langage HTML - Freeoandreau.free.fr/supports/langageHTML.pdf · Le langage HTML Le HTML pour HyperTexte Markup Language ou Langage à balises HyperTextes est un langage conçu