Initiation au HTML

Première partie
Préambule
 Buts de cet exposé
– présentation sommaire de HTML
– Pour aller plus loin, manuels en lignes :
• sur le site TAL
– http://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html/index.htm
– balises HTML : http://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html
/balise.htm
• http://guidewebmaster.free.fr
• etc...

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 2

ED268 Langage et Langues

Savoir-Faire février 2002

HTML
Marie Calberg
Marie Calberg

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 4

Introduction
 Le HTML est la langue vivante du web
– avec sa grammaire, sa syntaxe et son vocabulaire
– langage à balises
 Relier des documents à l ’aide de liens
hypertexte (Tim Berners-Lee 1989)
– sur le réseau internet
– interfaces sur CD-ROM...

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 5

Le World-Wide-Web
 HTML & HTTP - un standard et un protocole
simples
– La simplicité explique en partie le succès du
WWW

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 6

 “Hypertext Mark-Up Language” (HTML)
• Langage de “structuration de documents”
• Description de contenus par des éléments de formatage
• Liens hypertextuels (références internes et externes)
• Variante (sous-classe) de SGML
 “Hypertext Transfer Protocol” (HTTP)
• Le serveur dit au browser de quel type de fichier il s’agit. Le browser tente de
représenter le contenu (il connaît au moins HTML, FTP, News, etc.) ou bien
il tente de trouver une application externe locale capable d’afficher le format
en question (Ex: Paint Shop Pro pour le format *.tif)
• Cliquer sur un URL implique (en très simplifié) (1) Ouvrir une connexion (2)
Chercher le fichier (ou bien exécuter et afficher le résultat) (3) Fermer la
connexion => “statelessness” (pas de connexions permanentes!)

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 7

 Historique
 Le langage HTML tire son origine du langage SGML
(Standard Generalized Markup Language). Il s'agit
d'un type particulier d'annotations destiné au WWW et
qui correspond à une collection de styles
reconnaissables par les navigateurs.
 Un navigateur (en anglais "browser") est donc un
logiciel qui interprète à l'écran les commandes HTML
contenues dans un document accessible sur le WWW.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 8

Un langage en évolution
 Le langage HTML est utilisé sur le WWW depuis
1990. La version actuellement en vigueur est
HTML 4.0
 Versions en vigueur
– HTML 2.O (rare)
– HTML 3.0 (assez souvent)
– HTML 3.2 (souvent)
– HTML 4.0 (dernière version)

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 9

Pages HTML
 Il faut d'abord spécifier qu'un document
contenant des annotations en HTML n'est rien
de plus qu'un fichier texte.
 Il peut donc être reconnu sans problèmes de
conversion d'un environnement à un autre. Une
page peut donc être lue et interprétée par
n'importe quel navigateur sur n'importe quelle
plateforme.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 10

 Stratégies de production HTML
– 1. directement rédiger un texte en utilisant des codes html.
– 2. utiliser un éditeur spécialisé éventuellement “Wysiwyg”
(dans la mesure où ce concept est approprié).
– 3. utiliser un traitement de texte comme Framemaker, Word
ou Wordperfect ou encore un langage de formatage comme
Latex et ensuite traduire le texte en html.
– 4. générer du html à partir d’une source arbitraire comme une
base de données à l’aide d’un logiciel. Ceci en temps réel ou
en mode batch.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 11

 Description d’un document html
– Le “html” (HyperText Markup Language) est un langage permettant de
mettre en forme du texte, des images, du sons, etc. (la liste s’allonge
presque tous les jours) destinés à être visualisés grâce à un navigateur
(les plus connus étant Microsoft Internet Explorer Netscape Navigator,
HotJava de Sun, on pourrait en citer d’autres comme Mosaïc de
SpyGlass, etc.).
– Ce langage de description de page utilise des marques - ou balises -
pour spécifier la façon dont un élément doit apparaître, pour afficher des
images ou définir des actions.
– Ces marques sont toujours placées entre les signes “<” et “>” et
agissent très souvent par paire : la première spécifie le début
d’application du style (ou de l’action), la seconde, qui comporte le signe
“/”, marque la fin d’application du style (ou de l’action).

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 12

 – Attention à ne pas oublier cette marque de fin, car le style ou l’action
défini est actif tant que le navigateur ne rencontre pas la marque de fin;
ainsi si vous utilisez une marque “mets un italique” au début de votre
document et que vous oubliez la marque “enlèves l’italique”, tout votre
document apparaîtra en italique .
– Remarque : les marques peuvent être saisies indifféremment en
majuscule ou minuscule, tous les éditeurs de documents html (dont
Microsoft Developer Studio, Netscape Navigator Gold, MetroWerks
CodeWarrior, BBEdit de BareBones Software, etc.), ainsi que les
navigateurs, reconnaissent les deux syntaxe, l’utilisation des minuscules
ou majuscules est donc un choix - une préférence - personnel

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 13

Créer un document HTML
 <HTML> "première ligne du document"
 <head> "ouverture de la zone d'entête"
 <title> "titre de la page suivi de </title>"
 </head> "fermeture de la zone d'entête."
 <body> "ouverture du corps du document"
 "Mettre le texte et les images ici"
 </body> "fin du corps du document"
 </HTML> "fin du document HTML"

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 14

 Au sujet de la commande <title>, il est possible
d'obtenir une animation sympathique (mais
inutile) à l'ouverture du document HTML en
insérant plusieurs commandes <title>
consécutives. Le navigateur lira successivement
chaque ligne et réaffichera le nouveau titre à
chaque raffraichissement.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 15

Formatage du texte
 Entêtes (Headers)
• Le formatage d'une page commence généralement par le
choix et l'usage d'entêtes prédéterminées qui
s'échelonnent de H1 à H6 (niveaux). La commande H1
est la plus grosse disponible et la H6 est la plus petite.
• Les commandes Hx comprennent un choix de taille, le
caractère gras et un retour de paragraphe.
• <Hi> suivi de l'entête et de </Hi>
• Il n'y a pas de niveau inférieur à H6

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 16

 Autres commandes
– <center> suivi de « Quelquechose de centré » suivi
de </center> donne:

Quelquechose de centré
– <P> donne un changement de paragraphe
– <br> donne un simple changement de ligne
• Notez ici que les commandes <P> et <BR> n'ont pas à
être fermées. Vous pouvez utiliser plusieurs commandes
<BR> ou <P> répétitivement pour augmenter
l'espacement.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 17

 – <b></b>donne un texte en gras: texte en gras
– <strong></strong>donne un texte en gras
également: texte en gras
– <EM></EM> donne un texte en italique: texte en
italique
– <I></I> donne également un texte en italique: texte
en italique
– <CITE></CITE>donne aussi un texte en italique:
texte en italique
– <TT></TT>donne un texte formaté avec une fonte à
espacement constant (teletype): texte formaté avec
une police à espacement constant
ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 18
 Texte préformaté
– Les annotations <pre></pre> obligent le navigateur à
afficher un texte préformaté. Le navigateur respecte
alors les fins de ligne (retours de chariot).

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 19

 Augmentation ou réduction de la taille des
caractères
– <FONT SIZE="+2"></FONT SIZE="+2"> donne un
accroissement de la grosseur affichée du texte de 2
unités:
– <FONT SIZE="+4 »></FONT SIZE="+4"> donne un
accroissement de la grosseur affichée du texte de 4
unités:
– <FONT SIZE="-2"></FONT SIZE="-2"> donne une
réduction de la grosseur affichée du texte de 2
unités:.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 20

 – La commande
<BLOCKQUOTE></BLOCKQUOTE> permet
d'emprisonner un paragraphe telle une citation en
alinéa
– La commande <STRIKE></STRIKE> permet de
rayer un texte
– La commande <SUB></SUB> permet d'utiliser les
indices dans des formules comme dans l'exemple
qui suit: H 2 O.
– La commande <SUP></SUP> permet d'utiliser les
exposants dans des formules

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 21

 Caractères spéciaux dans HTML
– Certains caractères ont une signification spécifique
dans HTML. Pour les utiliser comme tels dans une
page, il faut utiliser les commandes alternatives pour
les afficher correctement à l'écran. Ces commandes
sont:
• &lt; pour: <
• &gt; pour: >
• &amp; pour: &
• &quot; pour: "

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 22

 À PROPOS DES ACCENTS...
– L'utilisation des caractères accentués sur le WWW
pose un certain nombre de problèmes car il y a
plusieurs façons de traiter les caractères
diacritiques.
– On peut en effet utiliser une des deux méthodes
suivantes:
• Les caractères référencés (entity references en anglais)
• Les caractères ISO Latin-1 (ISO-8859-1)

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 23

 Les caractères référencés
– Avec cette méthode, on utilise seulement le jeu de
caractères ASCII standard.
– Ce dernier ne contient que 127 caractères (non-
accentués) et n'utilise que sept bits sur les huit que
contient Un octet (l'unité fondamentale permettant de
représenter un caractère latin sur les ordinateurs).

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 24

 – Si le travail de composition d'un document HTML
doit être effectué sur des plateformes utilisant des
encodages différents, la seule façon d'assurer
l'intégrité du document lorsque celui-ci est échangé
consiste à utiliser les caractères référencés. Cette
situation est appelée à évoluer car l'interopérabilité
entre les systèmes devient de plus en plus
important.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 25

 Images
• Les navigateurs HTML reconnaissent généralement deux
formats d'images; les images GIF et les images JPEG.
Ces deux formats d'images sont comprimés.
– L'insertion d'une image est possible en tapant la commande
suivante: <img src="images/serviette50.gif">
– Le segment IMG SRC indique qu'il s'agit de la source d'une
image, le premier terme entre les guillemets indique le nom du
dossier où se trouve la ou les images, le deuxième terme indique
le nom du fichier contenant l'image et le format de celle-ci. Une
image en format GIF se termine par .GIF alors qu'une image en
format JPEG se termine par .JPEG ou .JPG . La taille de l'image
est déterminée par le fichier lui-même. On peut placer par
exemple une grande image occupant l'ensemble de l'écran:

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 26

 Les liens
• Pour insérer un pointeur (lien hypertexte-hypermédia), il
faut indiquer une référence (appelée URL pour Uniform
Ressource Locator) et un élément, texte ou image, visible
à l'écran sur lequel on doit cliquer pour y accéder. Voici
un exemple de code pour obtenir un pointeur: <A
HREF="dossier/menu_du_jour.HTML">Menu du jour</A>.
• Le pointeur apparaît alors en couleur contrastée et
souligné dans le navigateur
• Les pointeurs peuvent diriger le navigateur vers des sites
HTTP, FTP, TELNET, TN3270, GOPHER ou USENET.
On peut aussi entrer directement sur un fichier sur le
système local ou sur un réseau local.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 27

 • Pour créer un pointeur, il s'agit tout simplement de définir
le type de document dans la commande A HREF comme
dans les exemples qui suivent:
• Site HTTP (WWW)
– Le code:<A HREF="http://WWW.fsaa.ulaval.ca">Serveur WWW
de la FSAA</A>donne accès à un serveur WWW, notamment à
celui de la Faculté des sciences de l'agriculture et de
l'alimentation de l'Université Laval.
• Site FTP
– Le code:<A HREF="ftp://ftp.apple.com/pub">Site FTP de la
compagnie Apple</A>donne accès à un dossier public sur un
serveur FTP de la compagnie Apple inc.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 28

 • Fichier sur le système hôte
– Le code:<A HREF="fichier.HTML">fichier</A> donne tout
simplement accès à un fichier HTML situé au même niveau
hiérarchique que le fichier actuellement ouvert sur le serveur.
– Pour obtenir un document situé ailleurs sur le même serveur, il
faut spécifier le sentier à suivre. Dans ce cas, on indique le
chemin complet avec le code qui suit: <A
HREF="http://www.grr.ulaval.ca/grrwww/glossairehtml.html">Glos
saire</A>.
• La commande A NAME
– La commande A NAME enregistre un point d'accès à l'intérieur
d'un document HTML. On peut ensuite référer directement à ce
point précis avec une commande A HREF. La commande peut se
taper directement comme ceci: <a name="Gopher">, ce qui
indique au navigateur où se trouve la section visée. Pour se
rendre à cet endroit, il faut taper la référence comme ceci: <a
href="manuel8.html#Gopher">Gopher</a>.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 29

 Tableaux
• Commandes de base
– Les commandes de base pour créer des tableaux en
HTML sont les suivantes:
· <TABLE></TABLE> Cette commande est la
commande principale pour ouvrir une zone de
tableaux.
· <TR></TR> Commande pour définir une rangée. Il
faut utiliser une séquence <TR></TR> pour chacune
des rangées requises, à l'intérieur de la zone
<TABLE></TABLE> comme dans l'exemple ci-
dessous:
· <TD></TD> Commande pour spécifier les données
pour chaque rangée comme dans l'exemple ci-dessus.
Le code pour produire ce tableau s'écrira donc:

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 30

Pour aller plus loin
 La suite sur le site TAL…et dans les
manuels en ligne
 On consultera aussi l ’aide en ligne de
l ’outil présenté infra...

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 31

Un outil pour l ’édition HTML
 Au laboC :
– 1st Page 2000 Version 2.0 « Free »
 http://www.evrsoft.com/1stpage/
– 1st Page 2000 is an extensive web editor that allows you to build and
enhance Web sites. 1st Page contains HTML enhancing tools that bring
your existing Web documents to the next level. Thousands of
professional web builders are using 1st Page to enhance and build their
websites! From beginners to experienced web builders 1st Page suits
everyone thanks to its QuickModeSwitchTM feature. Unlike most
WYSIWYG editors 1st Page 2000 won't add unwanted junk code. It's a
flexible environment that simply aids, creates, enhances and
accelerates web development. Thousands of web builders worldwide are
taking the move to switch over to 1st Page 2000 to create and manage
their web sites.

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 32

Explorer
Barre des menus

Fichiers
ouverts
Editeur HTML

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 33

 Un premier essai : écriture du
code HTML

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 34

 Visualisation de l ’essai

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 35

Conception d ’un site
 6 étapes
– Spécifier Objectifs généraux de conception
– Conception structure du site
– Conception navigation dans le site
– Conception du contenu des pages
– Conception de la présentation de la page
d ’accueil
– Conception de la présentation des autres
pages

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 36

Conception : objectifs généraux
 Objectifs du site = QUOI
 Objectif de conception = COMMENT
– Critères ergonomiques
– Critères d ’évaluation quantifiables
– Exemples et application
• « L’utilisateur doit toujours percevoir ce qu ’il y a à
explorer »
• « L ’utilisateur doit toujours savoir où il se trouve »

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 37

Conception : structure (1)
 Définir la structure et organisation
générale des informations à
représenter.
– Principe récursif partant de la page
d ’accueil :
• Identifier toutes les pages accessibles depuis
une page
• Identifier les liens entre pages identifiées et
de même niveau

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 38

 – Résultat : graphe de structure
• Décrire les liens entre pages
• Faire apparaître des groupes de pages
– Mettre en place une « site map »
– Analyse des tâches fondamentales = aide
au choix du type de structure (linéaire si
contraintes, non-linéaire sinon)
– Analyse du contenu = aide au
rassemblement des pages, des unités
d ’information dans une même page, la
quantité d ’info par page
– Evaluer les parcours de navigation
ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 39
Conception : navigation (1)
 Fournir une description des moyens
offerts pour se déplacer dans la
structure du site
• Très important car équivalent aux processus de
manip. des objets réels
• Définit la navigation possible et autorisée dans
le site

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 40

 Principe
– Pour chaque bouton, lien, forme cliquable,
lister les effets perçus par l ’utilisateur
– Déterminer le sens à donner (back, top,
front, …) et le type à utiliser (bouton,
hypertext, menu, …)
 3 formes de navigation
• Globale : navigation présente sur chaque page
• Parallèle : navigation entre pages sœurs
• Locale : navigation à l ’intérieur d ’une page

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 41

Conception : navigation (2)
 Caractérisation de la navigation
• Hiérarchisée = arborescence sous forme d ’arbre
– Navigation globale et parallèle
• Linéaire = contraignante
– Navig Globale réduite à un lien vers la Home Page
– Navig parallèle réduite à suivant et précédent
• Linéaire avec des choix
– Pb signification du back (en fin …)
• Hiérarchique et linéaire combinée
– Linéarité pour succession de chapitres,
– Hiérarchisation pour les sous-chapitres
• Toile d ’araignée = liberté absolue, pas de structure

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 42

Conception : contenu
 Définir la nature des informations et leur
arrangement
 Outils
• StoryBoard
• Analogie aux journaux : titre + description brève
• Analogie aux brochures : tables des matières +
liens sur la page

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 43

 Remarques
• Lecture fatiguante = nb caractères limités (2500
pour un article important OnLine)
• Vérifier compatibilité avec l ’impression (format
A4)
– S ’assurer de la clarté du message pour
l ’utilisateur visé (vocabulaire, abréviations
-lexique?-, …)

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 44

Conception : page d ’accueil
– A faire avant celle des autres pages
• Soucis de cohérence interne
• Explique et couvre complètement le contenu
du site
– Doit ...
• Respecter les requis non fonctionnels
• Tenir compte des spécifications techniques
(liens sur plugins)
• Etre évaluée sur écran !
• C ’est une étape capitale qui requiert le
collaboration de tous les membres de l ’équipe
ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 45
Conception : autres pages
 Outil
• Générateur d ’interface WYSIWYG
(Page Mill, GoLive, Netscape Composer)
– Peu souple, peu puissant
– Idéal pour mettre en forme la structure globale
• Editeur de texte + HTML
 Remarques
• Veiller aux critères d ’ergonomie généraux
(couleurs, fontes, …) et propres à l ’entreprise
• Respecter le cahier des charges défini

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 46

 Bon travail…

ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg 47