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 HTML
Dans 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>
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 HTML
Dans 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 HTML
Dans 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 HTML
Dans 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 HTML
Dans 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é.
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>
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 HTML
Dans le navigateur
<img src="plan_2e_lgroulx.jpg" alt="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.
<p><input name="bouton " type="submit" value="Bouton pour soumettre le formulaire" /></p>
</form>
É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.
Affichage : L'affichage peut varier selon le navigateur.
Exemple d'application
Code HTML
Dans 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 HTML
Dans le navigateur
Quel est votre adresse courriel? <input type="email" name="courriel" />
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 HTML
Dans 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 HTML
Dans 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 HTML
Dans 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).
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 HTML
Dans le navigateur
<p><em>Liste à puces</em></p>
<ul>
<li>Roses</li>
<li>Marguerites</li>
<li>Pivoines</li>
</ul>
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 HTML
Dans 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é.
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 HTML
Dans 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é…
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.
<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 HTML
Dans 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.
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 HTML
Dans 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>
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é.
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
É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 HTML
Dans 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 HTML
Dans 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)
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 HTML
Dans 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 HTML
Dans 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 HTML
Dans 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>
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, 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 HTML
Dans 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>
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, 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.
<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>
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, 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 HTML
Dans 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>
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, 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 HTML
Dans 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>
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, 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 HTML
Dans 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>