Ensemble des éléments HTML du glossaire

Contenu structuré

Élément : <a>

Définition : Lien hypertextuel

Syntaxe : Attribut obligatoire href : utilisé afin de spécifier l'adresse URL (relative ou absolue) de la source à laquelle on réfère.

Attribut facultatif target : permet d'indiquer où s'ouvrira le lien (par exemple _blank oblige l'ouverture du lien dans une nouvelle fenêtre)

Affichage : Le contenu entre la balise d’ouverture et la balise de fermeture sera l'objet « cliquable » (texte ou image) qui permettra d'atteindre le document ou la partie de document auquel on réfère. S’il s’agit de texte, il sera souligné et en bleu. Le texte devient violet lorsque le lien a déjà été visité.

Note : Il est possible de faire des liens internes dans une page Web en introduisant un attribut id dans la balise d'ouverture où on veut que le lien mène et en pointant la valeur de cet attribut id dans l'attribut href d'un élément a (à noter qu'il faut faire précéder du caractère dièse # la valeur de l'attribut).

Exemple d'application
Code HTMLDans le navigateur
<p><a href="http://www.umontreal.ca">Site de l'Université de Montréal (lien externe)</a></p>

<p>Lien vers le <a href="#element3">troisième élément</a> de la liste à puce ci-dessous</p>

<ul>
<li>Ceci est le premier élément de la liste</li>
<li>Maintenant au tour du deuxième élément</li>
<li id="element3">Et finalement le fameux troisième élément que l'on pointe dans le lien interne!</li>
</ul>

Site de l'Université de Montréal (lien externe)

Lien vers le troisième élément de la liste à puce ci-dessous

  • Ceci est le premier élément de la liste
  • Maintenant au tour du deuxième élément
  • Et finalement le fameux troisième élément que l'on pointe dans le lien interne!

Élément : <address>

Définition : Bloc d’adresse (l’adresse n’a pas besoin de respecter une forme spécifique)

Affichage : Généralement rendu en italique et aligné à gauche

Exemple d'application
Code HTMLDans le navigateur
<address>John Smith, Montréal</address>
John Smith, Montréal

Élément : <blockquote>

Définition : Citation provenant d’une autre source (utilisé pour citations longues)

Syntaxe : ne peut pas contenir directement du texte (on peut par exemple mettre le texte dans l’élément <p>)

Affichage : Le texte est affiché avec une légère indentation par rapport aux paragraphes

Exemple d'application
Code HTMLDans le navigateur
<p>Citation du jour :</p>
<blockquote><p>Halloween n'a rien de drôle. Ce festival sarcastique reflète plutôt une soif de revanche des enfants sur le monde adulte. [Jean Baudrillard] </p></blockquote>

Citation du jour :

Halloween n'a rien de drôle. Ce festival sarcastique reflète plutôt une soif de revanche des enfants sur le monde adulte. [Jean Baudrillard]

Élément : <br />

Définition : Retour à la ligne (line break)

Syntaxe : Élément vide

Affichage : Force un retour de chariot

Exemple d'application
Code HTMLDans le navigateur
<p>J'adore les tapirs<br />Je déteste les rats<br />Ce sont vraiment les pires<br />Ils n’ont point d’apparat!</p>

J'adore les tapirs
Je déteste les rats
Ce sont vraiment les pires
Ils n’ont point d’apparat!

Élément : <cite>

Définition : Titre d’un document cité en référence ou citation courte

Affichage : Généralement affiché en italique par les navigateurs

Exemple d'application
Code HTMLDans le navigateur
<p><cite>Le nom de la rose</cite> de Umberto Eco est mon livre préféré.</p>

Le nom de la rose de Umberto Eco est mon livre préféré.

Élément : <dd>

Définition : Définition du terme (DD=Definition)

Note : imbriquée dans une liste <dl>

Exemple d'application
Code HTMLDans le navigateur
<dl>
    <dt>SGML</dt>
    <dd>Standard Generalized Markup Language</dd>
    <dt>XML</dt>
    <dd>Extensible Markup Language</dd>
</dl>
SGML
Standard Generalized Markup Language
XML
Extensible Markup Language

Élément : <dl>

Définition : Liste de définitions (DL = Definition List)

Affichage : Les items ne sont pas introduits par une puce ou un numéro. Par défaut, les définitions (dd) apparaissent en retrait par rapport au terme défini (dt).

Note : Contient une séquence d'éléments <dt> et <dd>

Exemple d'application
Code HTMLDans le navigateur
<dl>
    <dt>SGML</dt>
    <dd>Standard Generalized Markup Language</dd>
    <dt>XML</dt>
    <dd>Extensible Markup Language</dd>
</dl>
SGML
Standard Generalized Markup Language
XML
Extensible Markup Language

Élément : <dt>

Définition : Terme défini (DT = Defined Term)

Note : imbriquée dans une liste <dl>

Exemple d'application
Code HTMLDans le navigateur
<dl>
    <dt>SGML</dt>
    <dd>Standard Generalized Markup Language</dd>
    <dt>XML</dt>
    <dd>Extensible Markup Language</dd>
</dl>
SGML
Standard Generalized Markup Language
XML
Extensible Markup Language

Élément : <em>

Définition : Texte mis en évidence (EM = Emphasize)

Affichage : Généralement affiché en italique par les navigateurs

Exemple d'application
Code HTMLDans le navigateur
<p>Une partie de ce paragraphe est mis <em>en emphase légère</em>.</p>

Une partie de ce paragraphe est mis en emphase légère.

Élément : <hr />

Définition : Ligne horizontale (horizontal rule)

Syntaxe : Élément vide

Affichage : Insert une ligne horizontale qui traverse tout l’écran

Exemple d'application
Code HTMLDans le navigateur
<p>premier paragraphe.</p>
<hr />
<p>deuxième paragraphe</p>

premier paragraphe.


deuxième paragraphe

Élément : <img />

Définition : Image insérée dans le texte

Syntaxe : Élément vide possédant des attributs obligatoires et utiles : (1) src : adresse URL (absolue ou relative) de l'image, et (2) alt : texte à afficher à la place de l'image si l'utilisateur préfère ne pas avoir d'images ou s'il utilise un navigateur textuel

Affichage : L’alignement de l’image dépend de l’alignement du paragraphe ou de la cellule du tableau dans lequel elle est insérée

Exemple d'application
Code HTMLDans le navigateur
<img src="plan_2e_lgroulx.jpg" alt="accès au bureau C2072"/> accès au bureau C2072

Élément : <input />

Définition : Contrôle de formulaire

Syntaxe : Possède plusieurs attributs dont l'attribut type, pour indiquer le type de contrôle (par exemple, un bouton pour soumettre le formulaire (type="submit"), une liste de choix avec choix unique (type="radio"), une liste de choix avec plusieurs choix (type="checkbox"), et une boîte de saisie de texte court (type="text"). L'attribut name permet de nommer le contrôle, tandis que l'attribut value indique la valeur enregistrée pour ce contrôle.

Note : Voir les entrées de la forme <input type=...> dans le glossaire pour des précisions sur les principaux types de contrôles.

Exemple d'application
Code HTMLDans le navigateur
<form method="post" action="traitement.php" id="formulaire">

<p><strong>1. Question à choix multiples avec 2 choix</strong></p>

<p>
<input type="radio" id="choix1" name="q1" value="Choix 1" /><label for="choix1">Choix 1</label><br />
<input type="radio" id="choix2" name="q1" value="Choix 2" /><label for="choix2">Choix 2</label>
</p>

<p><strong>2. Question à réponses multiples avec 2 choix</strong></p>

<p>
<input type="checkbox" id="q2_1" name="q2_1" value="X" /><label for="q2_1">Choix 1</label><br />
<input type="checkbox" id="q2_2" name="q2_2" value="X" /><label for="q2_2">Choix 2</label>
</p>

<p><strong>3. Question ouverte avec réponse courte</strong></p>

<p><input type="text" name="q3" /></p>

<p><strong>4. Question à réponses multiples avec une question ouverte courte.</strong></p>

<p>
<input type="checkbox" id="q5_1" name="q5_1" value="X" /><label for="q5_1">Choix 1</label><br />
<input type="checkbox" id="q5_2" name="q5_2" value="X" /><label for="q5_2">Choix 2</label> S.V.P. précisez : <input type="text" name="q5_2a" />
</p>

<p><input name="bouton " type="submit" value="Bouton pour soumettre le formulaire" /></p>

</form>

1. Question à choix multiples avec 2 choix


2. Question à réponses multiples avec 2 choix


3. Question ouverte avec réponse courte

4. Question à réponses multiples avec une question ouverte courte.


S.V.P. précisez :

Élément : <input type=checkbox />

Définition : Liste de choix avec plusieurs choix possibles

Syntaxe : Forme générique :
<p>
<input type="checkbox" id="nom_question_1" name="nom_question_1" value="valeur si coché" /><label for="nom_question_1">Réponse 1</label><br />
<input type="checkbox" id="nom_question_2" name="nom_question_2" value="valeur si coché" /><label for="nom_question_2">Réponse 2</label><br />
<input type="checkbox" id="nom_question_3" name="nom_question_3" value="valeur si coché" /><label for="nom_question_1">Réponse 3</label>
</p>

Chacun des choix de la liste fait l'objet d'une balise <input>. Comme chacune des valeurs (attribut value) peut être choisie et donc, sauvegardée, chacune des balises input possède un nom différent pour pouvoir les enregistrer séparément.

Affichage : Chacun des choix de la liste est précédé par une case à cocher.

Exemple d'application
Code HTMLDans le navigateur
<p><strong>Quel(s) niveau(x) universitaire(s) avez-vous complété(s)?</strong></p>

<p>
<input type="checkbox" name="baccalauréat" id="bacc" value="X" /><label for="bacc">Baccalauréat</label><br />
<input type="checkbox" name="maîtrise" id="mait" value="X" /><label for="mait">Maîtrise</label><br />
<input type="checkbox" name="doctorat " id="doct" value="X" /><label for="doct">Doctorat</label>
</p>

Quel(s) niveau(x) universitaire(s) avez-vous complété(s)?



Élément : <input type=date />

Définition : Boîte de saisie pour une date.

Syntaxe : Forme générique :

<input type="date" name="question1" value="" />

Affichage : L'affichage peut varier selon le navigateur.

Exemple d'application
Code HTMLDans le navigateur
Quelle est votre date de naissance? <input type="date" name="naissance" /> Quelle est votre date de naissance?

Élément : <input type=email />

Définition : Boîte pour la saisie d'une adresse de courriel.

Syntaxe : Forme générique :

<input type="email" name="question1" value="" />

Note : Il est possible d'utiliser les attributs maxlength et size pour respectivement contrôler la longueur maximale permise pour l'adresse et la longueur de la boîte affichée.

Exemple d'application
Code HTMLDans le navigateur
Quel est votre adresse courriel? <input type="email" name="courriel" /> Quel est votre adresse courriel?

Élément : <input type=hidden />

Définition : Champ de formulaire caché.

Syntaxe : <input type="hidden" id="annee" value="1985" />

Note : Permet, entre autres, de faire passer certaines valeurs d'une page à l'autre, valeurs ne nécessitant pas de saisie de la part de l'utilisateur.

Exemple d'application
Code HTMLDans le navigateur
Le voyez-vous?
<input type="hidden" id="annee" value="1985" />
Le voyez-vous?

Élément : <input type=number />

Définition : Bopite pour la saisie d'un nombre

Syntaxe : Forme générique :

<input type="number" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : min et max pour indiquer la valeur minimale et la valeur maximale permises.

Exemple d'application
Code HTMLDans le navigateur
Quel est votre âge? <input type="number" name="age" min="18" /> Quel est votre âge?

Élément : <input type=radio />

Définition : Liste de choix avec choix unique

Syntaxe : Forme générique :

<p>
<input type="radio" id="choix1" name="nom_question" value="valeur1" /><label for="choix1">Choix 1</label><br />
<input type="radio" id="choix2" name="nom_question" value="valeur2" /><label id="choix2">Choix 2</label>
</p>

Chaque choix de la liste fait l'objet d'une balise <input>. Les différents éléments d'une même liste sont liés du fait que chacune des balises <input> des choix possède le même nom (valeur de l'attribut name). Ce qui sera enregistré dans la base de données est ce qui est indiqué pour l'attribut value du choix qui sera coché.

Affichage : Chaque choix sera précédé d'un bouton radio rond.

Exemple d'application
Code HTMLDans le navigateur
<p><strong>À quel groupe d'âge appartenez-vous?</strong></p>

<p>
<input type="radio" name="age" id="groupe1" value="18-30 ans" /><label for="groupe1">18-30 ans</label><br />
<input type="radio" name="age" id="groupe2" value="31-50 ans" /><label for="groupe2">31-50 ans</label><br />
<input type="radio" name="age" id="groupe3" value="51 ans ou plus" /><label for="groupe3">51 ans ou plus</label>
</p>

À quel groupe d'âge appartenez-vous?



Élément : <input type=submit />

Définition : Bouton pour la soumission d'un formulaire

Syntaxe : L'attribut name permet de nommer le bouton, tout comme l'attribut id. L'attribut value permet de préciser le texte que l'on veut voir affiché sur le bouton.

Note : L'action qui sera exécutée une fois le bouton cliqué sera l'action indiquée dans la balise d'ouverture <form>.

Exemple d'application
Code HTMLDans le navigateur
<input name="nouveau" type="submit" value="Enregistrer la nouvelle fiche" />

Élément : <input type=text />

Définition : Boîte pour la saisie d'une réponse courte (une ligne)

Syntaxe : Forme générique :

<input type="text" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : maxlength et size. L'attribut maxlength permet d'indiquer le nombre maximal de caractères permis et peut servir à empêcher la saisie de chaîne de caractères dépassant le nombre permis pour un champ. L'attribut size permet de préciser la longueur de la boîte affichée à l'écran.

De plus, l'attribut pattern, aussi facultatif, peut être utiliser pour valider la forme de ce qui est saisi. Par exemple, pour un champ où l'on saisit un code postal canadien, qui aura ainsi toujours la forme A0A 0A0 : pattern="[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" (voir https://www.w3schools.com/js/js_regexp.asp pour des informations sur l'utilisation des expressions régulières (pattern))

Exemple d'application
Code HTMLDans le navigateur
Quel est votre code postal (format A0A 0A0)? <input type="text" name="code_postal" maxlength="7" size="10" pattern="[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" /> Quel est votre code postal (format A0A 0A0)?

Élément : <label>

Définition : Étiquette d'une balise input

Syntaxe : Les balises ouvrante et fermante encadrent l'élément textuel d'une balise <input> qui est affiché dans le navigateur. L'attribut for permet de lier l'étiquette à la balise <input> en lui donnant la même valeur que l'attribut id de cette balise.

Affichage : Aucun rendu visuel particulier outre le fait que le contrôle sera coché si l'utilisateur clique avec sa souris sur l'étiquette textuelle (ce qui est une valeur ajoutée d'un point de vue ergonomique).

Exemple d'application
Code HTMLDans le navigateur
<input type="checkbox" id="homme" name="genre" value="h" /><label for="homme">Homme</label>

Élément : <li>

Définition : Item de liste (LI = List item)

Affichage : Items affichés en retrait par rapport au texte et précédés d’une puce lorsqu’imbriqués dans une liste <ul>, ou d'une numérotation si imbriqués dans une liste <ol>

Exemple d'application
Code HTMLDans le navigateur
<p><em>Liste à puces</em></p>
<ul>
    <li>Roses</li>
    <li>Marguerites</li>
    <li>Pivoines</li>
</ul>

<p><em>Liste numérotée</em></p>
<ol>
    <li>Roses</li>
    <li>Marguerites</li>
    <li>Pivoines</li>
</ol>

Liste à puces

  • Roses
  • Marguerites
  • Pivoines

Liste numérotée

  1. Roses
  2. Marguerites
  3. Pivoines

Élément : <ol>

Définition : Liste numérotée (OL = Ordered list)

Note : Contient un ou des éléments <li>

Exemple d'application
Code HTMLDans le navigateur
<ol>
    <li>Roses</li>
    <li>Marguerites</li>
    <li>Pivoines</li>
</ol>
  1. Roses
  2. Marguerites
  3. Pivoines

Élément : <optgroup>

Définition : Regroupement d'éléments dans une liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<optgroup label="Premier groupe">
<option value="valeur1">Élément 1</option>
<option value="valeur2">Élément 2</option>
</optgroup>
<optgroup label="Deuxième groupe">
<option value="valeur3">Élément 3</option>
<option value="valeur4">Élément 4</option>
</optgroup>
</select>

Chaque bloc d'éléments de la liste que l'on veut regrouper sera encadré par la balise <optgroup>. Cette balise possède un attribut label qui permet d'identifier le groupe.

Affichage : Les étiquettes des groupes seront indiquées en gras et en italique et les éléments appartenant à un groupe seront présentés sous son étiquette avec une indentation pour représenter la hiérarchie.

Exemple d'application
Code HTMLDans le navigateur
<select>
<optgroup label="Premier cycle">
<option value="arv">Certificat en archivistique</option>
<option value="gin">Certificat en gestion de l'information numérique</option>
</optgroup>
<optgroup label="Cycle supérieur">
<option value="msi">Maîtrise en sciences de l'information</option>
<option value="phd">Doctorat en sciences de l'information</option>
</optgroup>
</select>

Élément : <option>

Définition : Élément d'une liste déroulante

Syntaxe : Se retrouve à l'intérieur d'une balise <select>. Chaque item de la liste fait l'objet d'une balise <option>. Ses balises ouvrante et fermante encadrent la valeur qui sera affichée dans la liste. L'attribut value permet de définir la valeur qui sera sauvegardée si un item est sélectionné.

Exemple d'application
Code HTMLDans le navigateur
<select name="creme_glacee" multiple="multiple">
<option value="chocolat">Chocolat</option>
<option value="vanille">Vanille</option>
<option value="fraise">Fraise</option>
</select>

Élément : <p>

Définition : Paragraphe

Affichage : Aligné à gauche avec espacement avant et après l'élément

Exemple d'application
Code HTMLDans le navigateur
<p>Ceci est le texte de mon premier paragraphe. Il comprend une ou plusieurs phrases.</p>

<p>Voici un deuxième paragraphe!</p>

Ceci est le texte de mon premier paragraphe. Il comprend une ou plusieurs phrases.

Voici un deuxième paragraphe!

Élément : <select>

Définition : Liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<option value="valeur1">Premier élément</option>
<option value="valeur2">Deuxième élément</option>
</select>

Les balises ouvrante et fermante encadrent la liste des éléments, chaque élément étant constitué d'une balise <option>.

Affichage : Affiche une liste déroulante.

Note : L'attribut multiple peut être ajouté pour préciser s'il est possible de faire plus d'un choix dans la liste.

Exemple d'application
Code HTMLDans le navigateur
<select name="creme_glacee" multiple="multiple">
<option value="chocolat">Chocolat</option>
<option value="vanille">Vanille</option>
<option value="fraise">Fraise</option>
</select>

Élément : <strong>

Définition : Texte important (sert à marquer la force du texte; emphase forte)

Note : Généralement affiché en gras par les navigateurs

Exemple d'application
Code HTMLDans le navigateur
<p>Le terme "balise" est utilisé en français pour le terme anglais <strong>tag</strong>.</p>

Le terme "balise" est utilisé en français pour le terme anglais tag.

Élément : <table>

Définition : Élément de plus haut niveau pour définir un tableau

Syntaxe : Contient des éléments <tr> (TR=Table Row) qui définissent les lignes du table qui, eux-mêmes, contiennent des éléments <td> (TD=Table Data) pour définir les cellules (colonnes). En sus des éléments <tr> et <td>, on peut y retrouver un élément <caption> pour indiquer le titre du tableau ainsi que, des éléments <th> remplaçant des éléments <td> pour désigner les entêtes des colonnes/lignes.

L'attribut border (facultatif) permet d'ajouter une bordure pour délimiter les cellules (valeur = largeur de la bordure en pixels)

Note : Il est possible d'imbriquer un tableau à l'intérieur d'un tableau en plaçant un élément <table> (et ses enfants) à l'intérieur d'un élément <td>. Le résultat est un tableau entièrement imbriqué dans une seule cellule d’un autre tableau. Ça devient vite compliqué…

Exemple d'application
Code HTMLDans le navigateur
<table>
    <caption>Tableau simple</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>

<table>
    <caption>Tableau complexe : cellules fusionnées</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td colspan="2">Ligne 2, colonnes 1 et 2 fusionnées</td>
    </tr>
</table>

<table border="5">
    <caption>Tableau complexe : imbrication d'un tableau</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>
            <table>
                <caption>Tableau imbriqué</caption>
                <tr>
                    <th>Titre Colonne 1</th>
                    <th>Titre Colonne 2</th>
                </tr>
                <tr>
                    <td>Ligne 1, colonne 1</td>
                    <td>Ligne 1, colonne 2</td>
                </tr>
                <tr>
                    <td>Ligne 2, colonne 1</td>
                    <td>Ligne 2, colonne 2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Tableau simple
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2
Tableau complexe : cellules fusionnées
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonnes 1 et 2 fusionnées
Tableau complexe : imbrication d'un tableau
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1
Tableau imbriqué
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2

Élément : <td>

Définition : Dans un tableau, à l'intérieur d'une ligne, désigne les cellules où sont saisies les données (TD=Table Data)

Syntaxe : À l'intérieur d'un élément <tr> lui-même dans un élément <table>. Les attributs colspan et rowspan peuvent être utilisés pour fusionner des lignes ou des colonnes.

Exemple d'application
Code HTMLDans le navigateur
<table>
    <caption>Titre du tableau</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>

<table>
    <caption>Exemple de tableau avec lignes et colonnes fusionnées</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
        <th>Titre Colonne 3</th>
    </tr>
    <tr>
        <td colspan="2">Ligne 1, colonnes 1 et 2</td>
        <td rowspan="2">Lignes 1 et 2, colonne 3</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>
Titre du tableau
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2
Exemple de tableau avec lignes et colonnes fusionnées
Titre Colonne 1 Titre Colonne 2 Titre Colonne 3
Ligne 1, colonnes 1 et 2 Lignes 1 et 2, colonne 3
Ligne 2, colonne 1 Ligne 2, colonne 2

Élément : <textarea>

Définition : Boîte de saisie de texte long

Syntaxe : Les balises ouvrante et fermante encadrent ce que l'on veut afficher dans la boîte (on peut ne rien mettre). Cette balise possède plusieurs attributs dont l'attribut cols pour indiquer la largeur de la boîte et l'attribut rows pour le nombre de lignes affichées. L'attribut maxlength permet d'indiquer, au besoin, le nombre maximum de caractères permis.

Exemple d'application
Code HTMLDans le navigateur
<textarea cols="20" rows="5">Indiquez ici vos préférences</textarea>

Élément : <th>

Définition : Dans un tableau, à l'intérieur d'une ligne, désigne les entêtes d'une colonne ou d'une ligne.

Syntaxe : Dans un élément <tr> lui-même à l'intérieur d'un élément <table>. Les attributs colspan et rowspan peuvent être utilisés pour fusionner des lignes ou des colonnes.

Affichage : Habituellement dans un visuel distinct du visuel des éléments <td> pour distinguer les entêtes des données.

Exemple d'application
Code HTMLDans le navigateur
<table>
    <caption>Titre du tableau</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>

<table>
    <caption>Exemple de tableau avec lignes et colonnes fusionnées</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
        <th>Titre Colonne 3</th>
    </tr>
    <tr>
        <td colspan="2">Ligne 1, colonnes 1 et 2</td>
        <td rowspan="2">Lignes 1 et 2, colonne 3</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>
Titre du tableau
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2
Exemple de tableau avec lignes et colonnes fusionnées
Titre Colonne 1 Titre Colonne 2 Titre Colonne 3
Ligne 1, colonnes 1 et 2 Lignes 1 et 2, colonne 3
Ligne 2, colonne 1 Ligne 2, colonne 2

Élément : <tr>

Définition : Dans un tableau, désigne les lignes du tableau (TR=Table Row).

Syntaxe : insérée dans un élément <table> et contenant un ou des éléments <th> ou <td>

Exemple d'application
Code HTMLDans le navigateur
<table>
    <caption>Titre du tableau</caption>
    <tr>
        <th>Titre Colonne 1</th>
        <th>Titre Colonne 2</th>
    </tr>
    <tr>
        <td>Ligne 1, colonne 1</td>
        <td>Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, colonne 1</td>
        <td>Ligne 2, colonne 2</td>
    </tr>
</table>
Titre du tableau
Titre Colonne 1 Titre Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2

Élément : <ul>

Définition : Liste non numérotée ou liste à puces (UL = Unordered List)

Note : Contient un ou des éléments <li>

Exemple d'application
Code HTMLDans le navigateur
<ul>
    <li>Roses</li>
    <li>Marguerites</li>
    <li>Pivoines</li>
</ul>
  • Roses
  • Marguerites
  • Pivoines

Élément charpente

Élément : <body>

Définition : Élément de haut niveau qui encadre l'ensemble des éléments représentant le corps de la page Web

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>
<html lang="fr-ca">
    <head>
        <meta charset="utf-8" />
        <title>Glossaire d'éléments HTML</title>
        <meta name="author" content="EBSI" />
        <meta name="description" content="Glossaire des éléments HTML de base" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    <body>
        <header>
            <h1>Ensemble des éléments du glossaire </h1>
        </header>
        <section>
            <article>
                <h2>Élément : <a> (niveau Niveau texte)</h2>
                <p><em>Définition</em> : Lien hypertextuel</p>
                <p><em>Syntaxe</em> : Attribut obligatoire href : utilisé afin de spécifier l'adresse URL (relative ou absolue) de la source à laquelle on réfère.</p>            
                <p><em>Affichage</em> : Le contenu entre la balise d'ouverture et la balise de fermeture sera l'objet "cliquable" (texte ou image) qui permettra d'atteindre le document ou la partie de document auquel on réfère. S'il s'agit de texte, il sera souligné et en bleu. Le texte devient violet lorsque le lien a déjà été visité.</p>
                <table border="1">
                    <caption>Exemple d'application</caption>
                    <tr>
                        <th style="width:50%;">Code HTML</th>
                        <th>Dans le navigateur</th>
                    </tr>
                    <tr>
                        <td><a href="http://www.umontreal.ca">Site de l'Université de Montréal</a></td>
                        <td><a href="http://www.umontreal.ca">Site de l'Université de Montréal</a></td>
                    </tr>
                </table>
            </article>
            <article>
                <h2>Élément : <address> (niveau Niveau bloc)</h2>
                <p><em>Définition</em> : Bloc d’adresse (l’adresse n’a pas besoin de respecter une forme spécifique)</p>                        
                <p><em>Affichage</em> : Généralement rendu en italique et aligné à gauche</p>
                <table border="1">
                    <caption>Exemple d'application</caption>
                    <tr>
                        <th style="width:50%;">Code HTML</th>
                        <th>Dans le navigateur</th></tr>
                    <tr>
                        <td><address>John Smith, Montréal</address></td>
                        <td><address>John Smith, Montréal</address></td>
                    </tr>
                </table>
            </article>
        </section>
        <footer>
            Glossaire généré le 06 novembre 2013, 17:03
        </footer>
    </body>
</html>
Glossaire d'éléments HTML

Ensemble des éléments du glossaire

Élément : (niveau Niveau texte)

Définition : Lien hypertextuel

Syntaxe : Attribut obligatoire href : utilisé afin de spécifier l'adresse URL (relative ou absolue) de la source à laquelle on réfère.

Affichage : Le contenu entre la balise d'ouverture et la balise de fermeture sera l'objet "cliquable" (texte ou image) qui permettra d'atteindre le document ou la partie de document auquel on réfère. S'il s'agit de texte, il sera souligné et en bleu. Le texte devient violet lorsque le lien a déjà été visité.

Exemple d'application
Code HTML Dans le navigateur
Site de l'Université de Montréal Site de l'Université de Montréal

Élément :
(niveau Niveau bloc)

Définition : Bloc d’adresse (l’adresse n’a pas besoin de respecter une forme spécifique)

Affichage : Généralement rendu en italique et aligné à gauche

Exemple d'application
Code HTML Dans le navigateur
John Smith, Montréal
John Smith, Montréal
Glossaire généré le 06 novembre 2013, 17:03

Élément : <head>

Définition : Élément encadrant les éléments d'en-tête du document (titre, métadonnées, etc.)

Exemple d'application
Code HTMLDans le navigateur
<head>
    <title>Site Web de John Smith et Bill Brown</title>
        <meta name="author" content="John Smith" />
    <meta name="author" content="Bill Brown" />
    <meta name="description" content="Site Web professionnel de John Smith et Bill Brown, consultants en information." />
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
Site Web de John Smith et Bill Brown

Élément : <html>

Définition : Élément qui chapeaute tout le document

Note : L'attribut lang, facultatif, permet d'identifier la langue du document.

Exemple d'application
Code HTMLDans le navigateur
<html lang="fr-ca">

Métadonnées

Élément : <link />

Définition : Lien dans l'entête de la page vers une ressource extérieure (une feuille de styles, un script java, etc.)

Syntaxe : Élément vide possédant des attributs indiquant le type de relation (rel), le type de fichier lié (type) et l'emplacement du fichier (href)

Note : Indique au navigateur (par le biais de ses attributs) un lien vers un autre fichier (par exemple, une feuille de styles)

Exemple d'application
Code HTMLDans le navigateur
<link rel="stylesheet" type="text/css" href="styles.css" />

Élément : <meta />

Définition : Métadonnée de la page Web.

Syntaxe : Élément vide ayant, entre autres, comme attribut, l'attribut name, qui indique le type de métadonnée telle qu'author, description, et keywords, et l'attribut content, qui précise la valeur de l'attribut.

Affichage : Les informations incluses dans ces éléments sont ignorées par les navigateurs lors de la restitution (e.g. affichage) mais utilisées par certains outils de recherche

Exemple d'application
Code HTMLDans le navigateur
<meta name="author" content="John Smith" />

Élément : <title>

Définition : Titre du document

Affichage : Apparaît uniquement dans la barre supérieure du navigateur ou de l'onglet où s'affiche la page.

Exemple d'application
Code HTMLDans le navigateur
<title>EBSI – Sites Web des cours</title> EBSI – Sites Web des cours

Regroupement structurel

Élément : <article>

Définition : Section de contenu d'un document qui peut être extraite et distribuée de façon indépendante (par syndication de contenu par exemple).

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>

<html lang="fr-ca">

    <head>
        <!--L'élément HEAD contient entre autres le titre, les métadonnées ainsi que le ou les liens vers les feuilles de styles -->
        <title>Tout (ou presque!) sur l'Halloween</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Halloween Master" />
        <meta name="description" content="Site présentant des ressources sur l'Halloween." />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    
    <body>
        <header>
            <nav><a href="index.php?cours=sci6052">Retour à la page d'accueil</a></nav>
            <h1>Origines de l'Halloween</h1>
        </header>
        
        <section>
            <h1>D'où vient l'Halloween?</h1>
            <p>La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :</p>
            
            <ul>
                <li><a href="#sahmain">Il y a plus de 2000 ans, le Sahmain</a></li>
                <li><a href="#toussaint">La veille de la Toussaint : All Hallow's Eve</a></li>
                <li><a href="#maintenant">Halloween en 2009</a></li>
            </ul>
            <article>
            <h2 id = "sahmain">Il y a plus de 2000 ans, le Sahmain</h2>
            
            <p>Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.</p>
            </article>
            <article>
            <h2 id = "toussaint">La veille de la Toussaint : All Hallow's Eve</h2>
            
            <p>La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.</p>
            </article>
            <article>
            <h2 id = "maintenant">Halloween en 2013</h2>
            
            <p>L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines. </p>
            </article>                             
        </section>
        
        <footer>
            <p>Dernière mise-à-jour : 9 novembre 2013</p>
            <p>© Halloween Master</p>
            <address>2 rang de la Citrouille</address>
            <p>Pour toute question ou commentaire : <a href="mailto:halloweenmaster@pumpkin.com">
            halloweenmaster at pumpkin.com</a></p>
        </footer>
    </body>

</html>
Tout (ou presque!) sur l'Halloween

Origines de l'Halloween

D'où vient l'Halloween?

La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :

Il y a plus de 2000 ans, le Sahmain

Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.

La veille de la Toussaint : All Hallow's Eve

La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.

Halloween en 2013

L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines.

Élément : <footer>

Définition : Section de conclusion d'une page Web ou d'une des sections qui composent cette page.

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>

<html lang="fr-ca">

    <head>
        <!--L'élément HEAD contient entre autres le titre, les métadonnées ainsi que le ou les liens vers les feuilles de styles -->
        <title>Tout (ou presque!) sur l'Halloween</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Halloween Master" />
        <meta name="description" content="Site présentant des ressources sur l'Halloween." />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    
    <body>
        <header>
            <nav><a href="index.php?cours=sci6052">Retour à la page d'accueil</a></nav>
            <h1>Origines de l'Halloween</h1>
        </header>
        
        <section>
            <h1>D'où vient l'Halloween?</h1>
            <p>La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :</p>
            
            <ul>
                <li><a href="#sahmain">Il y a plus de 2000 ans, le Sahmain</a></li>
                <li><a href="#toussaint">La veille de la Toussaint : All Hallow's Eve</a></li>
                <li><a href="#maintenant">Halloween en 2009</a></li>
            </ul>
            
            <h2 id = "sahmain">Il y a plus de 2000 ans, le Sahmain</h2>
            
            <p>Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.</p>
            
            <h2 id = "toussaint">La veille de la Toussaint : All Hallow's Eve</h2>
            
            <p>La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.</p>
            
            <h2 id = "maintenant">Halloween en 2013</h2>
            
            <p>L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines. </p>
                                         
        </section>
        
        <footer>
            <p>Dernière mise-à-jour : 9 novembre 2013</p>
            <p>© Halloween Master</p>
            <address>2 rang de la Citrouille</address>
            <p>Pour toute question ou commentaire : <a href="mailto:halloweenmaster@pumpkin.com">
            halloweenmaster at pumpkin.com</a></p>
        </footer>
    </body>

</html>
Tout (ou presque!) sur l'Halloween

Origines de l'Halloween

D'où vient l'Halloween?

La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :

Il y a plus de 2000 ans, le Sahmain

Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.

La veille de la Toussaint : All Hallow's Eve

La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.

Halloween en 2013

L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines.

Élément : <form>

Définition : Formulaire

Syntaxe : La balise ouvrante et fermante encadre l'ensemble des éléments composant le formulaire. On retrouve, parmi les attributs de cette balise, l'attribut name, qui permet de nommer le formulaire (ce qui peut aussi se faire avec l'attribut id), l'attribut action, pour indiquer ce qui se passe une fois un formulaire soumis (URL), et l'attribut method, pour préciser la méthode utilisée pour envoyer des données.

On retrouve deux méthodes, soit "get" ou "post". Avec la méthode "get", les valeurs transmises sont inscrites directement dans l'URL. Par exemple, l'URL http://cours.ebsi.umontreal.ca/planscours/diffusion/index.php?cours=sci6306 comprend la valeur du champ "cours", ici "sci6306". Cette méthode est utilisée entre autres lorsque l'on veut simplement afficher des données. Si l'on veut transmettre des valeurs pour modifier une base de données, on privilégie la méthode "post" qui ne les rend pas visibles dans l'URL.

Exemple d'application
Code HTMLDans le navigateur
<form method="post" action="traitement.php" id="formulaire">

<p><strong>1. Question à choix multiples avec 2 choix</strong></p>

<p>
<input type="radio" id="choix1" name="q1" value="Choix 1" /><label for="choix1">Choix 1</label><br />
<input type="radio" id="choix2" name="q1" value="Choix 2" /><label for="choix2">Choix 2</label>
</p>

<p><strong>2. Question à réponses multiples avec 2 choix</strong></p>

<p>
<input type="checkbox" id="q2_1" name="q2_1" value="X" /><label for="q2_1">Choix 1</label><br />
<input type="checkbox" id="q2_2" name="q2_2" value="X" /><label for="q2_2">Choix 2</label>
</p>

<p><strong>3. Question ouverte avec réponse courte</strong></p>

<p><input type="text" name="q3" /></p>

<p><strong>4. Question à réponses multiples avec une question ouverte courte.</strong></p>

<p>
<input type="checkbox" id="q5_1" name="q5_1" value="X" /><label for="q5_1">Choix 1</label><br />
<input type="checkbox" id="q5_2" name="q5_2" value="X" /><label for="q5_2">Choix 2</label> S.V.P. précisez : <input type="text" name="q5_2a" />
</p>

<p><input name="bouton " type="submit" value="Bouton pour soumettre le formulaire" /></p>

</form>

1. Question à choix multiples avec 2 choix


2. Question à réponses multiples avec 2 choix


3. Question ouverte avec réponse courte

4. Question à réponses multiples avec une question ouverte courte.


S.V.P. précisez :

Élément : <header>

Définition : Section d'introduction d'une page Web ou d'une des sections qui composent cette page.

Note : http://www.w3.org/TR/html5/sections.html#the-header-element

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>

<html lang="fr-ca">

    <head>
        <!--L'élément HEAD contient entre autres le titre, les métadonnées ainsi que le ou les liens vers les feuilles de styles -->
        <title>Tout (ou presque!) sur l'Halloween</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Halloween Master" />
        <meta name="description" content="Site présentant des ressources sur l'Halloween." />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    
    <body>
        <header>
            <nav><a href="index.php?cours=sci6052">Retour à la page d'accueil</a></nav>
            <h1>Origines de l'Halloween</h1>
        </header>
        
        <section>
            <h1>D'où vient l'Halloween?</h1>
            <p>La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :</p>
            
            <ul>
                <li><a href="#sahmain">Il y a plus de 2000 ans, le Sahmain</a></li>
                <li><a href="#toussaint">La veille de la Toussaint : All Hallow's Eve</a></li>
                <li><a href="#maintenant">Halloween en 2009</a></li>
            </ul>
            
            <h2 id = "sahmain">Il y a plus de 2000 ans, le Sahmain</h2>
            
            <p>Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.</p>
            
            <h2 id = "toussaint">La veille de la Toussaint : All Hallow's Eve</h2>
            
            <p>La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.</p>
            
            <h2 id = "maintenant">Halloween en 2013</h2>
            
            <p>L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines. </p>
                                         
        </section>
        
        <footer>
            <p>Dernière mise-à-jour : 9 novembre 2013</p>
            <p>© Halloween Master</p>
            <address>2 rang de la Citrouille</address>
            <p>Pour toute question ou commentaire : <a href="mailto:halloweenmaster@pumpkin.com">
            halloweenmaster at pumpkin.com</a></p>
        </footer>
    </body>

</html>
Tout (ou presque!) sur l'Halloween

Origines de l'Halloween

D'où vient l'Halloween?

La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :

Il y a plus de 2000 ans, le Sahmain

Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.

La veille de la Toussaint : All Hallow's Eve

La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.

Halloween en 2013

L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines.

Élément : <nav>

Définition : Éléments de navigation d'une page Web

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>

<html lang="fr-ca">

    <head>
        <!--L'élément HEAD contient entre autres le titre, les métadonnées ainsi que le ou les liens vers les feuilles de styles -->
        <title>Tout (ou presque!) sur l'Halloween</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Halloween Master" />
        <meta name="description" content="Site présentant des ressources sur l'Halloween." />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    
    <body>
        <header>
            <nav><a href="index.php?cours=sci6052">Retour à la page d'accueil</a></nav>
            <h1>Origines de l'Halloween</h1>
        </header>
        
        <section>
            <h1>D'où vient l'Halloween?</h1>
            <p>La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :</p>
            
            <ul>
                <li><a href="#sahmain">Il y a plus de 2000 ans, le Sahmain</a></li>
                <li><a href="#toussaint">La veille de la Toussaint : All Hallow's Eve</a></li>
                <li><a href="#maintenant">Halloween en 2009</a></li>
            </ul>
            
            <h2 id = "sahmain">Il y a plus de 2000 ans, le Sahmain</h2>
            
            <p>Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.</p>
            
            <h2 id = "toussaint">La veille de la Toussaint : All Hallow's Eve</h2>
            
            <p>La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.</p>
            
            <h2 id = "maintenant">Halloween en 2013</h2>
            
            <p>L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines. </p>
                                         
        </section>
        
        <footer>
            <p>Dernière mise-à-jour : 9 novembre 2013</p>
            <p>© Halloween Master</p>
            <address>2 rang de la Citrouille</address>
            <p>Pour toute question ou commentaire : <a href="mailto:halloweenmaster@pumpkin.com">
            halloweenmaster at pumpkin.com</a></p>
        </footer>
    </body>

</html>
Tout (ou presque!) sur l'Halloween

Origines de l'Halloween

D'où vient l'Halloween?

La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :

Il y a plus de 2000 ans, le Sahmain

Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.

La veille de la Toussaint : All Hallow's Eve

La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.

Halloween en 2013

L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines.

Élément : <section>

Définition : Regroupe des éléments de contenu portant sur une même thématique.

Exemple d'application
Code HTMLDans le navigateur
<!DOCTYPE html>

<html lang="fr-ca">

    <head>
        <!--L'élément HEAD contient entre autres le titre, les métadonnées ainsi que le ou les liens vers les feuilles de styles -->
        <title>Tout (ou presque!) sur l'Halloween</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Halloween Master" />
        <meta name="description" content="Site présentant des ressources sur l'Halloween." />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    
    <body>
        <header>
            <nav><a href="index.php?cours=sci6052">Retour à la page d'accueil</a></nav>
            <h1>Origines de l'Halloween</h1>
        </header>
        
        <section>
            <h1>D'où vient l'Halloween?</h1>
            <p>La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :</p>
            
            <ul>
                <li><a href="#sahmain">Il y a plus de 2000 ans, le Sahmain</a></li>
                <li><a href="#toussaint">La veille de la Toussaint : All Hallow's Eve</a></li>
                <li><a href="#maintenant">Halloween en 2009</a></li>
            </ul>
            
            <h2 id = "sahmain">Il y a plus de 2000 ans, le Sahmain</h2>
            
            <p>Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.</p>
            
            <h2 id = "toussaint">La veille de la Toussaint : All Hallow's Eve</h2>
            
            <p>La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.</p>
            
            <h2 id = "maintenant">Halloween en 2013</h2>
            
            <p>L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines. </p>
                                         
        </section>
        
        <footer>
            <p>Dernière mise-à-jour : 9 novembre 2013</p>
            <p>© Halloween Master</p>
            <address>2 rang de la Citrouille</address>
            <p>Pour toute question ou commentaire : <a href="mailto:halloweenmaster@pumpkin.com">
            halloweenmaster at pumpkin.com</a></p>
        </footer>
    </body>

</html>
Tout (ou presque!) sur l'Halloween

Origines de l'Halloween

D'où vient l'Halloween?

La fête d'Halloween remonte à plus de 2000 ans. Elle n'était cependant pas sous la forme que nous connaissons actuellement, qui elle est plus récente. Les différentes sections ci-dessous présentent chronologiquement les différents jalons de l'origine d'Halloween jusqu'à nos jours :

Il y a plus de 2000 ans, le Sahmain

Il y a plus de 2000 ans, les Celtes fêtaient le changement de saison par le Sahmain. Les similarités avec la fête d'Halloween telle que nous la connaissons sont minimes. Il n'y était pas question de déguisement et de cueillette de bonbons! C'est principalement le moment de l'année que ces deux fêtes ont en commun.

La veille de la Toussaint : All Hallow's Eve

La Toussaint est une fête catholique qui se tient le 1er novembre et qui vient fêter tous les saints catholiques. Elle précède la fête des morts qui se tient le 2 novembre.

Halloween en 2013

L'Halloween telle que nous la fêtons en 2013 est une coutume nord-américaine qui consiste à se déguiser et à aller quémander des bonbons aux portes voisines.

Titrage

Élément : <h1>

Définition : Entêtes hiérarchiques de section (titre et sous-titres)

Syntaxe : <h1>titre</h1>

Affichage : Le rendu visuel permet de rendre compte de la hiérarchie. <h1>, par exemple, s’affiche généralement avec une police plus grande que les autres <hn> avec un alignement à gauche

Note : Jusqu'à six niveaux de titres de section existent (h1 à h6). Les chiffres réfèrent à une organisation hiérarchique : h1 est le titre le plus important et ne doit apparaître qu’une seule fois dans une "boite" (par exemple, dans un élément <article>, h2 à h6 sont des sous-titres de plus bas niveau et chacun peut apparaître plus d’une fois).

Exemple d'application
Code HTMLDans le navigateur
<h1>Les documents structurés</h1>
<h2>SGML</h2>
<p>Texte sur le SGML</p>
<h3>HTML</h3>
<p>Texte sur le HTML</p>    
<h2>XML</h2>
<p>Texte sur le XML</p>

Les documents structurés

SGML

Texte sur le SGML

HTML

Texte sur le HTML

XML

Texte sur le XML