02 - Introduction à HTML

Page HTML 5

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Cours ift1144</title>
  </head>
  <body>
    <h1>Ma première page Web</h1>

    <p>Salut tout le monde!</p>
  </body>
</html>

premiere premiere

Nouveautés:

  • Indépendant de la plateforme

  • Nouvel élément canvas pour dessiner

  • Video et audio intégrés (plus besoin de “plugin”)

  • Support de CSS3

  • Support pour “local storage et SQL”

  • Plus de fonctionnalités avec les formulaires

  • Marqueurs pour application

  • Éléments sémantiques

  • Meilleur support des erreurs

  • Réduction de l’utilisation de plugin

  • Etc

Améliorations

  • Éléments modifiés

  • Éléments retirés (depracted and removed)

  • Etc

Notions de bases

Les balises sont des mots réservés permettant de préciser un élément structurel d’une page Web. Les balises se retrouvent entre chevrons <>, par exemple <html>.

  • Conteneurs: des balises utilisées pour délimiter une structure dans une page Web. Ces balises peuvent être composées d’un début et d’une fin <> et </>. Par exemple, <html> et </html>. Utiles pour identifier le début et la fin de cette structure ou élément.

  • Marqueurs: des balises utilisées à un endroit ponctuel d’un document et qui se terminent aussitôt. Elles ne servent pas à encadrer ou délimiter un élément ou une structure. Par exemple pour insérer une image ou une ligne horizontale sur la page Web.

  • Les marqueurs n’existent pas en xhtml, ainsi toutes les balises doivent être fermées et deviennent des conteneurs. Ces balises deviennent des conteneurs vides et pour des raisons de compacité du code elles sont fermées dans la balise ouvrante comme ceci: <meta />. En HTML 5, il n’est souvent pas obligatoire de fermer les balises.

  • Lettres minuscules (même si maj. permises en html).

Entités de caractère (pas de < ni de > dans nos documents)

  • < devient &lt;

  • > devient &gt;

  • & devient &amp;

Présentation du code HTML

<html>
  <body>
    <p>Ici on met le texte de la page</p>
    <p>Ici on         met le texte de la page</p>
		<p>Ici on 
                                met le                   texte de                 
                                        la page</p>
  </body>
</html>

Note: utilisation des espaces, retour, majuscules et minuscules.

Les instructions de la section <body>

Chaque instruction (balise) utilise ses propres propriétés prédéfinies.

  • Par exemple, taille des caractères, police, couleur, alignement, changement de ligne, etc…

  • Par exemple, les paragraphes ont des propriétés différentes des entêtes de section.

Nous allons, dans un premier temps, nous intéresser aux deux principaux types d’affichage (display) dans une page Web:

  • Les balises de type block se retrouvent sur des lignes différentes. C’est-à-dire qu’on change de ligne avant et après. Comme par exemple pour un paragraphe.

  • Les balises de type inline se retrouvent à la suite des éléments précédents, sur la même ligne. Par exemple, les paragraphes sont de type block, afin de pouvoir insérer des images dans un paragraphe, les images sont de type inline.

Pour structurer le document HTML, nous disposons d’un ensemble de balises et d’attributs :

  • Paragraphes (balise <p>);

  • Titres (balises <h1>, <h2> …);

  • Sections (balise <div>);

  • Listes (balises <ol> et <ul>);

  • Images (balise <img>);

  • Texte et mise en page …

  • Les attributs…

  • Tableaux (balise <table>);

Les paragraphes <p> </p>

Texte inséré à l’intérieur de l’élément (conteneur <p>) est formaté et affiché par le navigateur.

Les espaces et les fins de ligne sont remplacés par un seul espace. Par exemple, les deux paragraphes suivants produisent le même résultat:

See the Pen exemple1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Note: une ligne vide est insérée avant et après un paragraphe : il s’agit d’un élément de type block.

Il faut faire attention aux éléments block dans un élément block…

Les titres

Permettent de définir des titres de section dans nos documents html.

Les titres utilisent les balises <h1>, <h2>, … et ainsi de suite jusqu’à <h6>. Le <h1> est le premier niveau de titre et utilise une taille de caractères supérieures aux autres.

Exemples:

See the Pen 1945-2-2 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Note: une ligne vide est insérée avant et après un titre : il s’agit d’un élément de type block.

Il ne sera pas possible d’avoir un élément de type block inséré à l’intérieur d’un autre de type block. Les paragraphes ne peuvent pas être insérés dans les titres et vice versa.

Les <h1> devraient être utilisés en titre d’une section uniquement.

Éviter les « block » dans les « block ». <h1><p>t</p></h1>

Plusieurs éléments consécutifs (conteneurs):

See the Pen 1945-2-3 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Attention au chevauchement

En aucun cas les balises ne peuvent se chevaucher. L’exemple ci-dessous est INTERDIT :

<h1>Titre <p> de niveau</h1></p>

Les attributs

Les éléments HTML utilisent des attributs afin de définir des particularités propres à chaque balise.

Format: <balise attribut="valeur">

Par exemple, pour définir que le paragraphe utilise la classe nommée abstrait on écrit: <p class="abstrait">

Lorsque nous avons plusieurs attributs, on les énumère en insérant un espace entre chacun l’ordre n’a pas d’importance, comme par exemple: <p class="abstrait" id="ici">

Les attributs standards reconnus par les éléments html sont:

  • class: pour spécifier la classe (CSS) d’un élément.

  • id: pour identifier de façon unique un élément.

  • style: pour spécifier une mise en page (CSS).

  • title: pour définir un “tool tip”.

Codification des carctères

Comment inscrire le caractère < (plus petit) pour ne pas le confondre avec le début d’une balise? Ou encore pour le caractère >?

Comment inscrire les caractères © ou ÷?

Comment inscrire les caractères accentués?

Chaque caractère utilisé dans un ordinateur utilise un code interne, un peu comme le code morse où un A vaut: . –.

Pour l’ordinateur qui utilise la codification ASCII le caractère A vaut 65, le B vaut 66 et ainsi de suite. Les ordinateurs et surtout les systèmes d’exploitations récents utilisent à peu près tous la même codification interne pour les lettres les plus courantes. Par contre, comme il existe plusieurs codifications différentes, les lettres les moins usuelles ne sont pas codées de la même façon. Ainsi à part les lettres minuscules et majuscules qui restent assez standards les autres caractères sont encodés de façons différentes.

Les codifications les plus utilisées:

Quelle codification choisir pour nos pages Web?

Cela va dépendre de l’ordinateur utilisé pour créer la page, mais surtout du système d’exploitation utilisé.

  • Linux utilise utf-8

  • Mac OS-X utilise utf-8

  • Windows utilise ?? En fait cela dépend de la version de Windows utilisée…

  • Par défaut, Windows XP utilise iso-8859-1, Windows Vista utilise utf-8 alors que Windows 7 utilise ANSI. Par chance l’éditeur de base de Windows 7 (notepad ou blocnote) permet de sélectionner l’encodage au moment de l’enregistrement du document.

Il faut alors identifier dans la page Web l’encodage qui a été utilisé lors de la création du document.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  ...
  </body
</html>

Entité de caractères

L’entité de caractères offre une façon d’inscrire certains caractères qui causeraient un conflit avec le langage ou encore un caractère moins usuel sans utiliser d’encodage spécifique.

Conflits potentiels:

  • < devient &lt;

  • > devient &gt;

  • & devient &amp;

  • " devient &quot;

  • ' devient &apos;

Pour les autres nous utilisons:

  • &mnémonique; par exemple &eacute; (pour é) ou &egrave; (pour è)

  • ou encore &#XXX; où les XXX représentent un chiffre désignant le caractère en question en format unicode. Par exemple, le © devient: &#169;

Que se passerait-il si nous utilisions directement des é et de è dans nos pages Web?

Indice: comment est inscrit le caractère au moment de l’enregistrement? Comment sera interprété le caractère au moment de la lecture de la page Web??

Lecture:

http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

http://www.joelonsoftware.com/articles/Unicode.html

http://www.tony-franks.co.uk/UTF-8.htm

Les commentaires

Permet d’insérer du texte dans la page Web qui sera ignoré (et ainsi ne sera pas affiché) par le logiciel de navigation.

L’insertion d’un commentaire se fait en insérant la balise <!-- au début et se termine par --> exemple: <!-- Ceci est un commentaire -->.

Le commentaire permet d’expliquer nos codes afin d’aider le concepteur plus tard lorsqu’il aura à modifier sa page Web.

Il est possible de mettre des codes en commentaires afin que le logiciel de navigation les ignore.

Par exemple:

See the Pen 1945-2-4 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Éléments de mise en page

<em>tx</em> ou <i>tx</i>: en italique.

<strong>tx</strong> ou <b>tx</b>: en gras.

Il est préférable d’utiliser l’élément sémantique.

Utilisation de <em> ou <i>? <strong> ou <b>?

Combinaisons de gras et italique: <strong><em>texte</em></strong>.

<del>barré</del>

<ins>inséré</ins>

<sup>exposant</sup>

<sub>indice</sub>

&nbsp; pour mettre un espace insécable.

Certains éléments ne devraient plus être utilisés (deprecated) :

  • <u>tx</u>: souligner du texte peut porter à confusion avec les liens.

  • <big>tx</big>: pour augmenter la taille du texte, on utilisera CSS.

  • <small>tx</small>: pour diminuer la taille, on utilisera CSS.

Voir sur le site de W3School pour plus d’information sur le formatage.

<blockquote>tx</blockquote>: parag. en retrait. Citation longue.

<br>: pour changer de ligne à l’intérieur d’un paragraphe

Effets ordinateurs: (essayez-les dans plusieurs navigateurs)

  • <var>tx</var>

  • <kbd>tx</kbd>

  • <code>tx</code>

  • <samp>tx</samp>

Citations et définitions:

  • <cite>tx</cite>: mettre un texte en format citation.

  • <dfn>tx</dfn>: mettre un texte en format définition.

  • <address>tx</address>: mettre des informations de contact.

  • <bdo>tx</bdo>: définir la direction du texte.

  • <abbr>tx</abbr>

Exemple

<h1>Titre de section de niveau 1</h1>
<h2>Titre de section de niveau 2</h2>
...
<h6>Titre de section de niveau 6</h6>
<em>italique</em> <i>italique</i>
<b>gras</b> <strong>gras</strong>
<p>
  Ceci est un paragraphe. Un espace est automatiquement
  créé avant et après le paragraphe.
</p>
<blockquote>
  Paragraphe avec marge de gauche en retrait. 
  Ceci est un saut de ligne.<br />
  Il permet de changer de ligne sans débuter un nouveau
  paragraphe.
  Notez que le marqueur <br /> n’a pas de fermeture.
</blockquote>

Autres éléments

<hr> : ligne horizontale.

  • width=n, n% (largeur en pixels ou en %) utiliser CSS

  • size=n (épaisseur de la ligne en pixels) utiliser CSS

  • noshade (ligne pleine) utiliser CSS

  • align= left, right, center (alignement de la ligne) utiliser CSS

Exemple (en attendant CSS):

<hr width="50%" align="center" />

<div>section</div> pour définir des sections et regrouper des éléments de type « block ».

<pre>texte</pre>

Attention

À manipule avec précaution: annule l’interprétation du logiciel de navigation sur son contenu…

Cette liste n’est pas exhaustive…

Listes à puces

Listes non numérotées

See the Pen 1945-2-5 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

<ul> : Unordered list

<li> : List item

Attributs de <ul> et <li>

  • type=square, circle, disc. Pour changer cet aspect, on préfèrera utiliser CSS.

Attention: certains logiciels de création de pages Web omettent les </li> mais ce n’est pas une bonne idée…

Listes numérotées

See the Pen 1945-2-6 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

<ol> : Ordered list

<li> : List item

Attributs de <ol> et <li> (on préfèrera utiliser CSS)

En attendant de voir les CSS les attributs suivants sont déconseillés:

  • type=1, i, I, a, A

  • value=n

  • start=n

Liste de glossaire

See the Pen 1945-2-7 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

<dt> : Definition Term

<dd> : Definition Description

Imbrication de listes

See the Pen 1945-2-8 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Attention: l’utilisation de CSS que nous verrons au prochain chapitre nous permettra de définir le type de numérotation des listes.

Images

formats:

  • GIF (Graphics Interchange Format)

    • 256 couleurs,

    • Compression sans perte,

    • Animation (affichage de plusieurs images en succession),

    • Transparence (pour voir à travers l’image),

    • Entrelacement (pour afficher l’image progressivement),

    • Idéal pour illustration ou dessin.

  • JPEG (JPG) (Joint Photographic Experts Group)

    • 16,7 millions de couleurs,

    • compression avec perte,

    • Idéal pour photographie ou paysage.

  • PNG (Portable Network Graphics)

    • Libre de droits, pour remplacer le format GIF,

    • Combinaison des avantages des deux précédents

    • Millions de couleurs, compression sans perte, transparence (IE à partir de 7), pas d’animation

<img src="fichier" alt="descr" attributs>

Attributs optionnels (améliore le chargement des images):

  • height=n

  • width=n

Autres attributs (en CSS):

  • align=left, right, top, middle, bottom, … (autres moins standards)

  • border=n

  • hspace=n

  • vspace=n

Images transparentes

Grandes images (vit. de chargement)

Vignettes (avec taille du fichier)

Images animées (GIF)

Images dans une liste

Exemple:

<img src="logo.gif" alt="Logo de l'Université">

Les couleurs

Synthèse additive des couleurs: c’est l’opération consistant à combiner la lumière de plusieurs sources lumineuses colorées afin d’obtenir une nouvelle couleur. On parle du système RGB (ou RVB en français) (par exemple écrans et capteurs vidéos)

Synthèse soustractive des couleurs: combine l’effet d’absortion de plusieurs matières colorées afin d’obtenir une couleur de surface. On parle du système CMY (ou CMJ – cyan, magenta et jaune) (par exemple pour les imprimantes)

En peinture on parle de mélange de matières colorées afin de produire de nouvelles couleurs.

Noms: plusieurs noms sont reconnus par les navigateurs, mais seulement 16 sont standards (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow et plein d’autres).

Triplet RGB:

Permet de spécifier un nombre en hexadécimal de 0 à 255 (00 à FF) pour préciser l’intensité de chacune des trois couleurs utilisées par l’ordinateur (rouge, vert et bleu) (R=red, G=green, B=blue).

La valeur 00 représente l’absence de cette couleur et la valeur FF la luminosité maximale. Toutes les valeurs entre les deux permettent de définir des luminosités et des teintes différentes.

Le triplet RGB prend la forme #RRGGBB

Exemple : color="#800000"

Validation des documents

En programmation standard nous disposons de compilateur pour valider la syntaxe d’un document. Que fait-on pour les pages Web? Nous pouvons tester nos pages sur plusieurs navigateurs ou encore les valider en utilisant des validateurs (ou encore faire les deux).

Pour valider les pages html : http://validator.w3.org/Validation

  • par URI; il faut alors que la page soit sur Internet

  • par “File Upload”; le fichier est lu sur le disque local

  • par “Direct Input”. copier/coller de la page Web

Balises déconseillées

Ces balises sont mentionnées pour vous aider à comprendre les pages Web qui les utilise (deprecated et remplacée par CSS).

Ne plus utiliser ces balises dans vos pages Web. Utilisez plutôt les CSS (que nous verrons bientôt).

  • <center>t</center>

  • <big>t</big> et <small>t</small>

  • <basefont>

  • <u>, <s> et <strike>

  • <font>texte</font>

Les attributs de mises en forme des documents sont également déconseillés, par exemple: align, color, bgcolor, width (certains contextes), name (certains contextes), etc.

Références

La norme officielle de HTML

Mozilla Developper

W3School

Exercices

  1. Écrire une page HTML 5 standard qui contient un <h1>, un 7lt;h2> et un 7lt;p>. N’oubliez pas le DOCTYPE et l’encodage des caractères.

  2. Valider cette page sur le W3C par “direct input” en utilisant copier/coller.

  3. Valider cette page sur le W3C par “file upload”.

  4. Ajouter une liste ordonnée sur votre page HTML.

  5. Ajouter quelques éléments de mise en page.

  6. Ajouter le logo de l’Université de Montréal sur votre page Web.

  7. Publier votre page sur votre site Web de la DESI.

  8. Valider cette dernière page sur le W3C par URI.