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:gregory.petit@umontreal.ca">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!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/