Introduction au HTML

1. Introduction au HTML 17 octobre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

2. 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

3. Et donc on fait quoi aujourd’hui? • L’élément HTML • Passage en revue des éléments Web essentiels

4. L’élément HTML

5. L’élément HTML Un é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

6. Syntaxe <a href="index.html" class="accueil">Accueil</a> Balise d’ouverture Contenu Balise de fermeture

7. Balise d’ouverture <a href="index.html" class="accueil">Accueil</a> Tag Attribut Nom de l’attribut Valeur de l’attribut

8. Contenu • Il peut être vide • Il peut contenir du texte • Il peut contenir d’autres éléments HTML

9. Balise de fermeture • Certains é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

10. Type d’affichage Il 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

11. Les différents élément HTML

12. Les éléments HTML • On va les regarder en fonction des catégories définies par Dreamweaver. • On ne pas tous les voir!

13. Attributs communs à certains éléments • Largeur (witdh) et longueur (height) • Peut être en pixel ou en pourcentage • Le 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

14. On a déjà vu • Les liens <a> (inline) • Les divisions <div> (block) • Les images <img> (inline)

15. 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>

16. 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.

17. Lien courriel <a> (inline) Texte qui apparaitra Adresse courriel <a href="mailto:gregory.petit@umontreal.ca">Le prof</a>

18. 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.

19. 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>

20. Trait horizontal <hr/> (block) avant <hr /> après

21. Tableau <table> (block) Incluant les entêtes Espace à l’intérieur des cellules Espace à l’extérieur des cellules Légende et résumé pour l’accessibilité (résumé n’est pas visible dans la page)

22. 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

23. Tableau <table> (block) <tr> Ligne <th> Entête <td> Donnée

24. Tags de formatage de texte • Sélectionner le texte puis :

25. Tags de formatage de texte • Bold <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.

26. Citation <blockquote> (block) • Permet d’ajouter un format de citation. • Le texte est par défaut décalé sur la droite.

27. Texte pré-formaté <pre> (block) • Le texte garde le format exact du code source : les tabulations, espaces et retour chariot sont conservés.

28. Caractères spéciaux • Les caractères spéciaux commencent par ‘&’ et finissent par ‘;’ sauf le retour chariot qui a une balise spécifique : </br>

29. 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

30. 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.

31. Entêtes <h1>, <h2> … <h6> (block) • Le chiffre derrière le ‘h’ correspond au degré d’entête

32. 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

33. Listes <ol> et <ul> (block)

34. 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>

35. Listes de définition <dl> (block)

36. Acronymes <acronym> et abréviations <abbr> (inline) <abbrtitle="Supercalifragilistiexpialidocious" lang="en">Supercal...</abbr> <acronymtitle="Mort de rire" lang="fr">MDR</acronym>

37. Atelier

38. Vous allez me faire un truc qui ressemble à ça :