17 octobre 2012 Grégory Petit

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

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

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 daffichage

Syntaxe Accueil Balise douvertureContenuBalise de fermeture

Balise douverture Accueil TagAttributNom de lattributValeur de lattribut

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

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

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

Les différents élément HTML

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

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

On a déjà vu Les liens (inline) Les divisions (block) Les images (inline)

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

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.

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

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.

Ancre Ancre : Lien vers lancre : Pied de page

Trait horizontal (block) avant après

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)

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

Tableau (block) Ligne Entête Donnée

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

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.

Citation (block) Permet dajouter un format de citation. Le texte est par défaut décalé sur la droite.

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

Caractères spéciaux Les caractères spéciaux commencent par & et finissent par ; sauf le retour chariot qui a une balise spécifique :

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

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.

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

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

Listes et (block)

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

Listes de définition (block)

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

Atelier

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

Des questions??? Merci de votre attention! A la semaine prochaine!