introduction Olivier Gerbé Copyright 2008, Olivier Gerbé Le langage HTML
Un document HTML est défini comme un ensemble
d’éléments. Exemples d’éléments: – Paragraphe, image, tableau, liste, formulaire, etc… Pour identifier un élément: – on utilise une balise (Tag en anglais) qui se définit comme un marqueur de début de l’élément et un marqueur de fin de l’élément. • Balise de début: <balise> • Balise de fin : </balise> – Note: IL N’Y A PAS D’ESPACE entre le signe < et balise 2 Les balises
De façon générale, un élément a une balise de début et
une balise de fin. Il y a des exceptions: • Ligne horizontale • Image • Retour à la ligne • Meta, Link, Base, …
3 Éléments de niveau « bloc » et de « caractère »
Élément de niveau bloc (block level element):
– Il a comme caractéristique de terminer automatiquement le paragraphe qui précède et de faire un retour de paragraphe. – Exemples: tableau, formulaire liste, paragraphe Élément de niveau caractère: – Il inclut le texte lui-même, les polices, le gras, l’italique, le souligné, l’hyperlien, l’image.
4 Le caractère « espace blanc non sécable» Espace blanc : – L’espace blanc est considéré comme un séparateur de 2 mots. – Pour ajouter un espace blanc, utiliser le code spécial suivant:
– Exemple: ajoute 2 espaces blancs
– À noter le point virgule qui est obligatoire
5 Structure formelle d’un document HTML
Tout document commence avec l’élément HTML qui
contient un élément HEAD et un élément BODY. L’élément HEAD contient de l’information sur le document lui-même et spécifie les liens généraux vers d’autres documents. L’élément BODY contient les éléments de texte d’images, de liens hypertextes, de tableaux, etc…
6 Structure formelle d’un document HTML (suite) <html> <head> <title>Le titre du document</title> …autres éléments de la section HEAD </head> <body> Les éléments du BODY du document </body> </html>
7 Le standard HTML 4
Pour se conformer au standard HTML 4, tout document
HTML doit contenir au début du document la déclaration suivante: <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">
8 L’encodage des caractères
Il est conseiller de spécifier comment l’encodage des
caractères a été fait. Exemple: <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
9 Le document HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="content-type« content="text/html;charset=UTF-8" /> <title>Le titre du document</title> </head>
<body>
</body> </html>
10 La syntaxe des attributs des balises
Les balises peuvent avoir des attributs pour spécifier
certaines caractéristiques de présentation ou de mise en page. – <balise attribut="valeur"> Une balise peut contenir plusieurs attributs: – <balise attribut="valeur" attribut="valeur">
11 Les balises
Balises de structure Balises de niveau paragraphe Balises d'hyperlien Balises de niveau texte Balises de liste Balises d'images Balises de tableaux
12 Balises de structure
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">
14 Balises de titre dans le document: H1 à H6 (Header) <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Les balises <h1> à <h6> acceptent l'attribut align = "left" | "center" | "right" . Exemple : <h2 align="right">Titre 2 aligné à droite.</h2>
15 Balises de niveau paragraphes
<P> … </P> balise de paragraphe – ALIGN=LEFT/RIGHT/CENTER/JUSTIFY
16 Balises de niveau phrase
EM ADDRESS STRONG INS, DEL DFN BLOCKQUOTE, Q CODE PRE SAMP SUB, SUP KBD TT VAR VAR CITE ABBR ACRONYM
17 Les liens hypertextes
Un des aspects les plus importants de la programmation
HTML est la capacité de faire des liens entre des documents qui sont conservés sur un même ordinateur ou sur tout autre ordinateur accessible via Internet.
Pour bien utiliser le concept d’hypertexte, il faut maîtriser
le concept de fichiers/répertoires d’ordinateurs.
18 Les liens hypertextes (suite)
L’adresse d’un fichier (page Web) sur un ordinateur relié à
l’Internet fait intervenir l’adresse internet de l’ordinateur. Cette adresse est appelée une URL (Uniform Resource Locator). – Exemple: http://www.hec.ca/index.html À noter que les URL utilisent la convention UNIX pour indiquer le chemin d’accès à un fichier et nommer les fichiers: – La règle est d’utiliser la barre oblique ( / ) pour séparer les niveaux de répertoires. – Les espaces blancs ne sont pas acceptés dans les noms de fichiers. – NE PAS utiliser de lettres accentuées dans les noms de fichiers ou de répertoire – La plupart des serveurs Web font la différence entre les lettres minuscules et majuscules.
19 Syntaxe de balise d’hyperlien
<A HREF= "valeur">le libellé du lien</A>
La balise <A> … </A> est l’élément d’ancrage utilisée pour définir un hyperlien. HREF est l’attribut de l’élément d’ancrage. valeur : détermine la destination du lien; le libellé du lien : les mots qui composent le lien hypertexte visible à l’écran. Exemple: <a href="http://www.hec.ca" >HEC Montréal</a>
20 Les types d’hyperliens
Il y a 2 types de lien: absolu ou relatif.
On peut faire
– Un lien à un document sur un autre ordinateur;
– Un lien à un document sur le même ordinateur;
– Un lien à l’intérieur du même document;
21 Balises d’hyperlien (suite)
Lien à un document sur un autre ordinateur;
– Lien absolu:
– La valeur de l’attribut href est l’adresse internet du
document; – Exemple: <a href="http://www.hec.ca/meublo/index.html" >Le cas Meublo</A>
22 Balises d’hyperlien (suite)
Lien à un document sur le même ordinateur
– Lien relatif: • Cas 1: • le document de lien (la page Web) est dans le même dossier (courant) que la page Web qui est à l’écran (courante). • Alors on indique le nom du fichier comme « valeur » de l’attribut HREF; • Exemple: <a href="chap1.htm">chapitre 1</a>
23 Balises d’hyperlien (suite)
Lien à un document sur le même ordinateur
– Lien relatif: • Cas 2: • le document de lien (la page Web que l’on veut atteindre) est dans un sous-répertoire du répertoire (courant) où est située la page Web qui est à l’écran (courante). • Alors, la valeur de l’attribut HREF doit faire apparaître le chemin d’accès au répertoire visé.
Ce qui signifie: remonter au répertoire « parent », puis aller au répertoire
« livre », puis au répertoire « chapitre » et choisir le fichier chap1.htm
Note: « .. » signifie "aller au répertoire parent"
« / » signifie "aller au répertoire dont le nom suit" ou "aller au document dont le nom suit, dans le répertoire courant"»
25 Balises d’hyperlien (suite)
Lien à l’intérieur du même document:
– Ce type de lien est utile dans le cas où le document est très long. Avant de créer le lien, il faut donner un nom à la section du document que l’on veut atteindre. • Se placer immédiatement devant le mot ou les mots qu’on veut identifier par un nom; • On utilise l’attribut « name » de l’élément <a>… </a> • <a name="valeur">lieu à atteindre</a> • Où valeur est le nom donné à la chaîne de caractères (lieu ) à atteindre par l’hyperlien • Exemple: <a name="oiseaux">Les oiseaux du Québec</a> Exemple de lien: <a href="animaux.htm#oiseaux">informations sur les oiseaux</a> À noter le signe « # » utilisé pour le lien à l’intérieur du document.
26 Balises d’hyperlien (suite)
Autre façon de créer un lien hypertexte à un point
spécifique dans un document: Il s’agit de l’attribut « ID » – <id ="nom" > – Cet attribut assigne un nom à un point précis dans le document. Ce nom doit être unique dans le document. – Exemples: <id="monparagraphe"> Ceci est le début de ce texte <id= "autreplace"> Détails de la pièce
Lien hypertexte: <A HREF= "#autreplace">Pour plus de détails</A>
27 Balises d’hyperlien (suite)
Lien vers une adresse E-mail (Pour envoyer un message)
On utilise la balise <A> avec l'attribut href : <a href="mailto:E-mail de la persone"> Contacter moi</a> Exemple: <a href="mailto:olivier.gerbe@hec.ca">Contacter moi</a> – Résultat : Contacter moi
On peut aussi contraindre l'objet du message : <a href="mailto:E-mail de la personne?subject=sujet_du_message" >Contacter moi</a> Exemple : <a href="mailto:olivier.gerbe@hec.ca?subject=4-720-00">Contacter moi</a> – Résultat : Contacter moi
28 Couleurs des liens
Par défaut un lien non visité est en bleu et un lien visité est en violet. La couleur de l’état d’un lien est identifiée par l’attribut « link »de <body> i.e. <body link=" couleur">
– Lien non visité :
<body link="blue"> les liens hypertextes avant le clic sont en bleu. – Lien activé : <body alink="yellow"> le lien hypertexte est en jaune pendant le clic. – Lien visité : <body vlink="red"> les lien hypertextes visités sont en rouge.
29 Balises de niveau paragraphes (suite) <br> ou <br/> Saut de ligne <hr> ou <hr/> Ligne horizontale – ALIGN=LEFT/RIGHT/CENTER – NOSHADE – SIZE=2 – WIDTH=50%
30 Balises de liste
Liste à puces Liste numérotée Liste de définitions
Note: Les listes peuvent être imbriquées
31 Liste à puces
UL Unordered (bulleted or simple) list
<UL> <LI> premier élément <LI> deuxième élément </UL> Ce qui donne: • premier élément • deuxième élément
32 Liste numérotée
OL ordered (numbered) list
<OL> <LI>pomme <LI>orange <LI>raisin </OL> Ce qui donne: 1. pomme 2. orange 3. raisin 33 Liste de définitions
DL definition list DT definition term DD definition itself <DL> <DT>Orange</DT> <DD>Fruit comestible de l'oranger, de forme sphérique à ovale, d'un jaune <DL> mêlé de rouge, et dont la pulpe est <DT> … </DT> juteuse et sucrée.</DD> </DL> <DD> … </DD> </DL>
![Structurez Vos Données Avec XML (Ludovic Roland [Roland, Ludovic , ]) (Z-lib.org)](https://imgv2-2-f.scribdassets.com/img/document/589726474/149x198/59c42ac1fd/1661693537?v=1)
![BAYANG_LIBRAIRIE[1]](https://imgv2-1-f.scribdassets.com/img/document/470491148/149x198/a0714fafa5/1595800806?v=1)
