Initiation au HTML

1
Initiation au HTML

• Première partie

2
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/htm
  l/index.htm
• balises HTML http//www.cavi.univ-paris3.fr/ilpg
  a/ilpga/tal/html/balise.htm
• http//guidewebmaster.free.fr
• etc...

3
ED268 Langage et Langues

• Savoir-Faire février 2002
• HTML
• Marie Calberg

4
Marie Calberg
5
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...

6
Le World-Wide-Web

• HTML HTTP - un standard et un protocole
  simples
• La simplicité explique en partie le succès du WWW

7

• 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 sagit. 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 dafficher 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 gt statelessness (pas de
  connexions permanentes!)

8
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.

9
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)

10
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.

11

• 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 dune source
  arbitraire comme une base de données à laide
  dun logiciel. Ceci en temps réel ou en mode
  batch.

12

• Description dun document html
• Le html (HyperText Markup Language) est un
  langage permettant de mettre en forme du texte,
  des images, du sons, etc. (la liste sallonge
  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
  dautres 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 lt et gt et agissent très souvent par
  paire la première spécifie le début
  dapplication du style (ou de laction), la
  seconde, qui comporte le signe /, marque la fin
  dapplication du style (ou de laction).

13

• Attention à ne pas oublier cette marque de fin,
  car le style ou laction 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 litalique, 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, lutilisation des
  minuscules ou majuscules est donc un choix - une
  préférence - personnel

14
Créer un document HTML

• ltHTMLgt "première ligne du document"
• ltheadgt "ouverture de la zone d'entête"
• lttitlegt "titre de la page suivi de lt/titlegt"
• lt/headgt "fermeture de la zone d'entête."
• ltbodygt "ouverture du corps du document"
• "Mettre le texte et les images ici"
• lt/bodygt "fin du corps du document"
• lt/HTMLgt "fin du document HTML"

15

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

16
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.
• ltHigt suivi de l'entête et de lt/Higt
• Il n'y a pas de niveau inférieur à H6

17

• Autres commandes
• ltcentergt suivi de  Quelquechose de centré 
  suivi de lt/centergt donne
• Quelquechose de centré
• ltPgt donne un changement de paragraphe
• ltbrgt donne un simple changement de ligne
• Notez ici que les commandes ltPgt et ltBRgt n'ont pas
  à être fermées. Vous pouvez utiliser plusieurs
  commandes ltBRgt ou ltPgt répétitivement pour
  augmenter l'espacement.

18

• ltbgtlt/bgtdonne un texte en gras texte en gras
• ltstronggtlt/stronggtdonne un texte en gras
  également texte en gras
• ltEMgtlt/EMgt donne un texte en italique texte en
  italique
• ltIgtlt/Igt donne également un texte en italique
  texte en italique
• ltCITEgtlt/CITEgtdonne aussi un texte en italique
  texte en italique
• ltTTgtlt/TTgtdonne un texte formaté avec une fonte à
  espacement constant (teletype) texte formaté
  avec une police à espacement constant

19

• Texte préformaté
• Les annotations ltpregtlt/pregt obligent le
  navigateur à afficher un texte préformaté. Le
  navigateur respecte alors les fins de ligne
  (retours de chariot).

20

• Augmentation ou réduction de la taille des
  caractères
• ltFONT SIZE"2"gtlt/FONT SIZE"2"gt donne un
  accroissement de la grosseur affichée du texte de
  2 unités
• ltFONT SIZE"4 gtlt/FONT SIZE"4"gt donne un
  accroissement de la grosseur affichée du texte de
  4 unités
• ltFONT SIZE"-2"gtlt/FONT SIZE"-2"gt donne une
  réduction de la grosseur affichée du texte de 2
  unités.

21

• La commande ltBLOCKQUOTEgtlt/BLOCKQUOTEgt permet
  d'emprisonner un paragraphe telle une citation en
  alinéa
• La commande ltSTRIKEgtlt/STRIKEgt permet de rayer un
  texte
• La commande ltSUBgtlt/SUBgt permet d'utiliser les
  indices dans des formules comme dans l'exemple
  qui suit H 2 O.
• La commande ltSUPgtlt/SUPgt permet d'utiliser les
  exposants dans des formules

22

• 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 lt
• gt pour gt
• amp pour
• quot pour "

23

• À 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)

24

• 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).

25

• 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.

26

• 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 ltimg src"images/serviette50.gi
  f"gt
• 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

27

• Les liens
• Pour insérer un pointeur (lien hypertexte-hyperméd
  ia), 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 ltA
  HREF"dossier/menu_du_jour.HTML"gtMenu du
  jourlt/Agt.
• 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.

28

• 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 codeltA HREF"http//WWW.fsaa.ulaval.ca"gtServeu
  r WWW de la FSAAlt/Agtdonne 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 codeltA HREF"ftp//ftp.apple.com/pub"gtSite
  FTP de la compagnie Applelt/Agtdonne accès à un
  dossier public sur un serveur FTP de la compagnie
  Apple inc.

29

• Fichier sur le système hôte
• Le codeltA HREF"fichier.HTML"gtfichierlt/Agt 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 ltA HREF"http//www.grr.ula
  val.ca/grrwww/glossairehtml.html"gtGlossairelt/Agt.
• 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 lta name"Gopher"gt, 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 lta
  href"manuel8.htmlGopher"gtGopherlt/agt.

30

• Tableaux
• Commandes de base
• Les commandes de base pour créer des tableaux en
  HTML sont les suivantes
• ltTABLEgtlt/TABLEgt Cette commande est la commande
  principale pour ouvrir une zone de tableaux.
• ltTRgtlt/TRgt Commande pour définir une rangée. Il
  faut utiliser une séquence ltTRgtlt/TRgt pour chacune
  des rangées requises, à l'intérieur de la zone
  ltTABLEgtlt/TABLEgt comme dans l'exemple ci-dessous
• ltTDgtlt/TDgt 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

31
Pour aller plus loin

• La suite sur le site TALet dans les manuels en
  ligne
• On consultera aussi l aide en ligne de l outil
  présenté infra...

32
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.

33
Explorer
Barre des menus
Fichiers ouverts
Editeur HTML
34
Un premier essai écriture du code HTML
35
Visualisation de l essai
36
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

37
Conception objectifs généraux

• Objectifs du site QUOI
• Objectif de conception COMMENT
• Critères ergonomiques
• Critères d évaluation quantifiables
• Exemples et application
•  Lutilisateur doit toujours percevoir ce qu il
  y a à explorer 
•  L utilisateur doit toujours savoir où il se
  trouve 

38
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

39

• 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

40
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

41

• 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

42
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

43
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

44

• 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?-, )

45
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

46
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

47

• Bon travail