17 octobre 2012 Grégory Petit

Présentation au sujet: "17 octobre 2012 Grégory Petit"— Transcription de la présentation:

1 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 dun site Web La structure des pages Web

3 Et donc on fait quoi aujourdhui? Lélément HTML Passage en revue des éléments Web essentiels

4 Lélément HTML

5 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 daffichage

6 Syntaxe Accueil Balise douvertureContenuBalise de fermeture

7 Balise douverture Accueil TagAttributNom de lattributValeur de lattribut

8 Contenu Il peut être vide Il peut contenir du texte Il peut contenir dautres éléments HTML

9 Balise de fermeture Certains éléments nont pas de balise de fermeture Ex : Comme vous le voyez, on rajoute un / à la fin de la balise douverture pour dire que lélément se ferme

10 Type daffichage Il y a 2 catégories déléments HTML quon pourrait distinguer par leur type daffichage : 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 lun à coté de lautre horizontalement

11 Les différents élément HTML

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

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 dun é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 (inline) Les divisions (block) Les images (inline)

15 Hyperlien (inline) Texte qui apparaitra Lien Remplir ce champ si vous voulez que le lien souvre dans une autre page Accueil

16 Hyperlien (inline) Autres attributs Titre : information complémentaire apparaissant quand on affiche le lien. Access Key : raccourci clavier pour activer le lien. Tab-Index : Modifier lordre naturel de tabulation.

17 Lien courriel (inline) Texte qui apparaitra Adresse courriel Le prof

18 Ancre Une ancre permet de créer une référence dans une même page. Pour quun lien pointe vers une ancre, il faut que son attribut lien (href) soit le nom de lancre qui a été définie. Un ancre na pas de contenu et est invisible dans la page.

19 Ancre Ancre : Lien vers lancre : Pied de page

20 Trait horizontal (block) avant après

21 Tableau (block) Incluant les entêtes Espace à lintérieur des cellules Espace à lextérieur des cellules Légende et résumé pour laccessibilité (résumé nest pas visible dans la page)

22 Tableau (block) Les données et entêtes sont ensuite remplies dans linterface Vous pouvez modifier les tailles des lignes et colonnes par la suite dans linterface

23 Tableau (block) Ligne Entête Donnée

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

25 Tags de formatage de texte Bold et Strong font la même chose dans Dreamweaver. Ces éléments sont « inline ». Italic et Empasis font la même chose dans Dreamweaver. Ces éléments sont « inline ». Il faut éviter dutiliser 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 (block) Permet dajouter un format de citation. Le texte est par défaut décalé sur la droite.

27 Texte pré-formaté (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 :

29 Paragraphe (block) Générés automatiquement quand on écrit du texte dans linterface graphique de Dreamweaver. Pratique quand on veut sortir dun élément spécifique

30 Span (inline) On ne peut pas lajouter tel quel avec linterface de Dreamweaver. On doit lajouter directement dans le code source. Même chose que lélément « Paragraphe » mais en inline. Pratique pour formater du texte spécifique à lintérieur dun paragraphe. On y reviendra avec les feuilles de style.

31 Entêtes, … (block) Le chiffre derrière le h correspond au degré dentête

32 Listes et (block) Listes à puces Liste numérotées Élément dune liste Une fois une liste commencée, les éléments se rajoute à chaque entrée de lusager

33 Listes et (block)

34 Listes de définition (block) Listes de définition Terme à définir Description de la définition Une fois une liste de définitions commencée, les éléments se rajoute à chaque entrée de lusager en alternant les et les

35 Listes de définition (block)

36 Acronymes et abréviations (inline) Supercal... MDR

37 Atelier

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

39 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@umontreal.ca http://lrcm.com.umontreal.ca/greg/COM2580/