17 octobre 2012 grégory petit
TRANSCRIPT
![Page 1: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/1.jpg)
Introduction au HTML
17 octobre 2012Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
![Page 2: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/2.jpg)
La semaine dernière…Pourquoi fait-on des sites Web?
Entête des pages Web
Organisation des fichiers d’un site Web
La structure des pages Web
![Page 3: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/3.jpg)
Et donc on fait quoi aujourd’hui?
L’élément HTML
Passage en revue des éléments Web essentiels
![Page 4: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/4.jpg)
L’élément HTML
![Page 5: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/5.jpg)
L’élément HTMLUn élément Web :
Correspond à un élément visible dans la page Web
A une syntaxe particulière
Appartient à une des deux familles de type d’affichage
![Page 6: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/6.jpg)
Syntaxe
<a href="index.html" class="accueil">Accueil</a>
Balise d’ouverture
Contenu Balise de fermeture
![Page 7: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/7.jpg)
Balise d’ouverture
<a href="index.html" class="accueil">Accueil</a>
Tag Attribut Nom de l’attribut
Valeur de l’attribut
![Page 8: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/8.jpg)
ContenuIl peut être vide
Il peut contenir du texte
Il peut contenir d’autres éléments HTML
![Page 9: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/9.jpg)
Balise de fermetureCertains éléments n’ont pas de balise de
fermeture
Ex :<br/>
<image src="images/image1.png" />
Comme vous le voyez, on rajoute un ‘/’ à la fin de la balise d’ouverture pour dire que l’élément se ferme
![Page 10: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/10.jpg)
Type d’affichageIl y a 2 catégories d’éléments HTML qu’on pourrait distinguer par leur type d’affichage :
Les « block » : peu importe la catégorie des éléments qui le précèdent, ils seront placés au-dessus et en dessous de l’élément « block »
Les « inline » : si deux éléments « inline » se suivent, ils se placeront l’un à coté de l’autre horizontalement
![Page 11: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/11.jpg)
Les différents élément HTML
![Page 12: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/12.jpg)
On va les regarder en fonction des catégories définies par Dreamweaver.
On ne pas tous les voir!
Les éléments HTML
![Page 13: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/13.jpg)
Attributs communs à certains éléments
Largeur (witdh) et longueur (height)Peut être en pixel ou en pourcentageLe pourcentage est calculé en fonction de
l’élément parent
Identifiant (id) unique d’un élément (voir feuilles de styles)
Classe (class) de l’élément (voir feuille de style)Un élément peut avoir plusieurs classes séparées
par un espace
![Page 14: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/14.jpg)
On a déjà vu
Les liens <a> (inline)
Les divisions <div> (block)
Les images <img> (inline)
![Page 15: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/15.jpg)
Hyperlien <a> (inline)Texte qui apparaitra
Lien
Remplir ce champ si vous voulez que le lien s’ouvre dans une autre page
<a href="index.html">Accueil</a>
![Page 16: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/16.jpg)
Hyperlien <a> (inline)Autres attributs
Titre : information complémentaire apparaissant quand on affiche le lien.
Access Key : raccourci clavier pour activer le lien.
Tab-Index : Modifier l’ordre naturel de tabulation.
![Page 17: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/17.jpg)
Lien courriel <a> (inline)Texte qui apparaitra
Adresse courriel
<a href="mailto:[email protected]">Le prof</a>
![Page 18: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/18.jpg)
Ancre <a>Une ancre permet de créer une référence
dans une même page.
Pour qu’un lien pointe vers une ancre, il faut que son attribut lien (href) soit le nom de l’ancre qui a été définie.
Un ancre n’a pas de contenu et est invisible dans la page.
![Page 19: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/19.jpg)
Ancre <a>
Ancre : <a name= "pied-de-page" id= "pied-de-page"></a>Lien vers l’ancre : <a href= "#pied-de-page">Pied de page</a>
![Page 20: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/20.jpg)
Trait horizontal <hr/> (block)
avant<hr />après
![Page 21: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/21.jpg)
Tableau <table> (block)
Incluant les entêtes
Espace à l’intérieur des cellulesEspace à l’extérieur des cellules
Légende et résumépour l’accessibilité(résumé n’est pas visible dans la page)
![Page 22: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/22.jpg)
Tableau <table> (block)Les données et entêtes sont ensuite remplies
dans l’interface
Vous pouvez modifier les tailles des lignes et colonnes par la suite dans l’interface
![Page 23: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/23.jpg)
Tableau <table> (block)
<tr> Ligne
<th> Entête
<td> Donnée
![Page 24: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/24.jpg)
Tags de formatage de texteSélectionner le texte puis :
![Page 25: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/25.jpg)
Tags de formatage de texteBold <b> et Strong <strong> font la même
chose dans Dreamweaver. Ces éléments sont « inline ».
Italic <i> et Empasis <em> font la même chose dans Dreamweaver. Ces éléments sont « inline ».
Il faut éviter d’utiliser ces balises car le formatage de texte est normalement géré dans les feuilles de styles.
Mais il faut quand même les connaître.
![Page 26: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/26.jpg)
Citation <blockquote> (block)
Permet d’ajouter un format de citation.
Le texte est par défaut décalé sur la droite.
![Page 27: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/27.jpg)
Texte pré-formaté <pre> (block)Le texte garde le format exact du code source
: les tabulations, espaces et retour chariot sont conservés.
![Page 28: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/28.jpg)
Caractères spéciauxLes caractères
spéciaux commencent par ‘&’ et finissent par ‘;’ sauf le retour chariot qui a une balise spécifique : </br>
![Page 29: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/29.jpg)
Paragraphe <p> (block)Générés automatiquement quand on écrit du
texte dans l’interface graphique de Dreamweaver.
Pratique quand on veut sortir d’un élément spécifique
![Page 30: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/30.jpg)
Span <span> (inline)On ne peut pas l’ajouter tel quel avec l’interface
de Dreamweaver.
On doit l’ajouter directement dans le code source.
Même chose que l’élément « Paragraphe » mais en inline.
Pratique pour formater du texte spécifique à l’intérieur d’un paragraphe.
On y reviendra avec les feuilles de style.
![Page 31: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/31.jpg)
Entêtes <h1>, <h2> … <h6> (block)
Le chiffre derrière le ‘h’ correspond au degré d’entête
![Page 32: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/32.jpg)
Listes <ol> et <ul> (block)Listes à puces <ul>
Liste numérotées <ol>
Élément d’une liste <li>
Une fois une liste commencée, les éléments se rajoute à chaque entrée de l’usager
![Page 33: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/33.jpg)
Listes <ol> et <ul> (block)
![Page 34: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/34.jpg)
Listes de définition <dl> (block)Listes de définition <dl>
Terme à définir <dt>
Description de la définition <dd>
Une fois une liste de définitions commencée, les éléments se rajoute à chaque entrée de l’usager en alternant les <dt> et les <dd>
![Page 35: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/35.jpg)
Listes de définition <dl> (block)
![Page 36: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/36.jpg)
Acronymes <acronym> et abréviations <abbr> (inline)
<abbr title="Supercalifragilistiexpialidocious" lang="en">Supercal...</abbr><acronym title="Mort de rire" lang="fr">MDR</acronym>
![Page 37: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/37.jpg)
Atelier
![Page 38: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/38.jpg)
Vous allez me faire un truc qui ressemble à ça :
![Page 39: 17 octobre 2012 Grégory Petit](https://reader036.vdocuments.mx/reader036/viewer/2022062511/551d9da2497959293b8d2af8/html5/thumbnails/39.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/