Introduction au HTML
17 octobre 2012Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
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
Et donc on fait quoi aujourd’hui?
L’élément HTML
Passage en revue des éléments Web essentiels
L’élément HTML
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
Syntaxe
<a href="index.html" class="accueil">Accueil</a>
Balise d’ouverture
Contenu Balise de fermeture
Balise d’ouverture
<a href="index.html" class="accueil">Accueil</a>
Tag Attribut Nom de l’attribut
Valeur de l’attribut
ContenuIl peut être vide
Il peut contenir du texte
Il peut contenir d’autres éléments HTML
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
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
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 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
On a déjà vu
Les liens <a> (inline)
Les divisions <div> (block)
Les images <img> (inline)
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>
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.
Lien courriel <a> (inline)Texte qui apparaitra
Adresse courriel
<a href="mailto:[email protected]">Le prof</a>
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.
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>
Trait horizontal <hr/> (block)
avant<hr />après
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)
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
Tableau <table> (block)
<tr> Ligne
<th> Entête
<td> Donnée
Tags de formatage de texteSélectionner le texte puis :
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.
Citation <blockquote> (block)
Permet d’ajouter un format de citation.
Le texte est par défaut décalé sur la droite.
Texte pré-formaté <pre> (block)Le texte garde le format exact du code source
: les tabulations, espaces et retour chariot sont conservés.
Caractères spéciauxLes caractères
spéciaux commencent par ‘&’ et finissent par ‘;’ sauf le retour chariot qui a une balise spécifique : </br>
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
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.
Entêtes <h1>, <h2> … <h6> (block)
Le chiffre derrière le ‘h’ correspond au degré d’entête
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
Listes <ol> et <ul> (block)
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>
Listes de définition <dl> (block)
Acronymes <acronym> et abréviations <abbr> (inline)
<abbr title="Supercalifragilistiexpialidocious" lang="en">Supercal...</abbr><acronym title="Mort de rire" lang="fr">MDR</acronym>
Atelier
Vous allez me faire un truc qui ressemble à ça :
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/