30-771-01 Conception de sites Web

1
30-771-01 Conception de sites Web

• Préparé par
• Martin Dozois, MSc. Sandrine Prom Tep, M.Sc.
• À partir du cours de Yan Bodain, M.A.
• Jean-Yves Fiset, ing., Ph. D.

2
Cours 5
Sujets du cours 5

• Éditeurs HTML
• Notions HTML
• Hypertexte et Hyperliens
• Lien dans un document
• Lien vers un autre document
• Adresse relative vs Adresse absolue
• Lien vers une image

3
1- Éditeurs HTML

• Éditeurs gratuits
• TextPad (simple, petit, efficace)
• FirstPage (beaucoup de fonctionnalités mais
  discontinué)
• 350 autres éditeurs populaires (site CNET)
• Éditeurs commerciaux
• HoTMetaL (peu utilisé, lourd et complexe à
  utiliser)
• GoLive (version 5 de Adobe)
• Dreamweaver (le plus courant de Macromedia avec
  bonne intégration dobjets notamment en Flash MX)
• WebExpert (québécois en français!)
• FrontPage (très répandu de Microsoft car avec la
  suite Office avant mais code très sale)
• Homesite (Macromedia, ftp intégré pour mise à
  jour automatique, intégration avec Cold Fusion
  .cfm pour interfaçage avec BD comme du asp, php
  pour du HTML dynamique avec fonctions et code qui
  sexécute directement sur le serveur différent de
  DHTML)
• Hot dog, Coffe cup, voir download.com (évite
  enregistrements vs sites fabricants)

4
Éditeurs texte vs Wysiwyg

• Éditeurs texte
• - découle de la famille des environnement des
  programmeurs
• - métaphores logicielles denvironnement de
  développement avec zones décrans multicadres
  qui ressemblent à des Delphi Bordland pour Pascal
• - nécessité absolue de connaître le code HTML et
  sa syntaxe
• - mais beaucoup de fonctionnalités intégrées
  pour automatiser lécriture du code (ex. pour
  insertion de routines, dentités caractères,
  etc.)
• - Notepad (base sans fonctionnalités), Textpad,
  Webexpert, Homesite, etc.
• Éditeurs WYSIWYG
• - découle de la branche infographie et grand
  public
• - métaphore de fonctionnement à laide de
  palette doutils comme Adobe Photoshop et
  Illustrator par exemple
• - faire du HTML sans avoir besoin de connaître
  le code en entrant les éléments de contenu comme
  dans un éditeur de traitement de texte
  sophistiqué comme Word
• - prévisualisation parallèle possible du code et
  du rendu
• - mais produit du code  sale  car ajoute
  automatiquement des balises inutiles par
  autoformatage

5
1- Éditeurs HTML
TextPad
Ouvre le navigateur pour visualiser la page
Liste des pages du site
Insertion de routines par ex. pour ouvrir une
table, insère le code avec les attributs de base
dont les valeurs sont à remplir ex  valign  
Gestion des éléments Courants

• Pourquoi apprendre le code sil existe des
  éditeurs spécialisés?
• Peut-on utiliser Word sans savoir écrire et
  parler français (une langue)?
• Faut connaître les possibilités fonctionnalités
  qui existent et optimisation du code

6
1- Éditeurs HTML
1stPage (beaucoup de fonctionnalités)
On remarque encore la division de lécran de
travail en plusieurs panneaux/cadres
7
1- Éditeurs HTML
WebExpert (correction sophistiquée du HTML!)
Menu contient  évaluer le document 
Menu contient  optimiser code 
Menus traditionnels
Automatise nombre de rangées, colonnes, etc.
Barre doutils
Balise spécifique
Propriétés/Attributs et valeurs
Onglets avec racourcis objets, focntions, etc
Particularité propre à IE
Convention Norme W3C
Nom de la page
Ex. pour spécifier les états comme  on mouse
over  pour interactivité
Entités caractères
8
1- Éditeurs HTML
Dreamweaver 4 (Macromédia)
Zone du code
Prévisualisation wysiwyg
Palettes doutils
9
1- Éditeurs HTML

• Sites pour comparer les éditeurs HTML
• AllHtml.com
• http//www.allhtml.com/telechargement/categorie
  3.php
• ZdNet (guide dachat)
• http//produits.zdnet.fr/test/112/1/1301.html

10
2- Notions HTML Hypertexte et hyperliens

• L'hypertexte principe même du WWW
• il permet de se promener par le biais de liens
  symboliques d'un document à l'autre, sur
  n'importe quel serveur de la planète relié à
  l'Internet.
• Dans un document HTML, on peut indiquer qu'un
  élément (texte ou image) constitue un hyperlien
  avec la balise ltAgt, qui nécessite qu'on la
  referme pour indiquer la fin du lien lt/Agt
• Liens internes et liens externes
• à lintérieur dun document (aussi appelé une
  ancre dans une page HTML) ou
• vers un autre document (ex. autre fichier html)

11
2- Notions de HTML Lien dans un document

• -Attribut NAME pour indiquer des points d'ancrage
  à
• l'intérieur d'un document, vers lesquels des
• attributs HREF pourront pointer.
• 1-choisir un élément du document qui servira de
  point
• d'ancrage auquel on attribue une étiquette
• ltA NAMEetiquettegtélément dancragelt/Agt
• 2-bâtir un hyperlien qui pointera directement
  sur cette zone en appelant l'étiquette pour un
  hyperlien situé dans le même doc
• ltA HREF etiquettegtNom_du_lienlt/Agt
• ou
• en appelant un autre document et létiquette
  pour un hyperlien situé dans un autre document
• ltA HREF URL_documentetiquette
  gtNom_du_lienlt/Agt

12
2- Notions de HTML Lien vers un autre document

• Pour pointer vers un autre document via un
  hyperlien
• attribut HREF ajouté à la balise ltAgt.
• Sites HTTP Un pointeur menant à un document
  situé sur un autre serveur WWW (dont le URL
  commence donc par http) se bâtit de la manière
  suivante
• ltA HREFhttp//URL_complet_documentgtNom du
  lienlt/Agt
• NB Il est aussi possible de créer des
  hyperliens qui pointent vers des sites ftp,
  telnet ou des adresses courriel
• ltA HREFftp//ftp.uqam.cagtSite FTP de
  lUQAMlt/Agt
• ltA HREF mailtoabc_at_xyz.comgtNous écrirelt/Agt
• Si le document se situe dans le même dossier ou
  sur le même serveur que le document HTML en
  construction, on peut se contenter d'indiquer le
  URL relatif, c'est-à-dire d'indiquer le chemin de
  sous-dossiers à parcourir pour parvenir au
  document appelé

13
2- Notions HTML adresses relatives

• Les adresses absolues (ou URL complet) sont de
  type http//www.hec.ca
• Les adresses relatives n'indiquent que le chemin
  du ou des sous-dossier(s) à parcourir pour
  parvenir au document appelé. Elles simplifient la
  gestion du site en limitant le nombre
  dintervention lors dun changement de serveur
  dhébergement du site.
• Exemple de répertoires de site avec fichiers
• Combien a-t-on de niveaux ici?

racine
14
2- Notions HTML

• Lien relatif vers une page de même niveau.

15
2- Notions HTML

• Lien relatif vers une page de niveau inférieur.

16
2- Notions HTML

• Lien relatif vers une page de niveau supérieur.

17
2- Notions HTML

• Lien relatif complexe répertoires supérieurs.

18
2- Notions HTML

• Lien relatif vers une image de niveau inférieur.

19
2- Notions HTML

• Lien relatif complexe répertoires inférieurs.

20
2- Notions HTML Lien vers une image

• La balise servant à intégrer des images dans un
  document HTML est ltIMGgt il n'existe pas
  d'annotation de fermeture lt/IMGgt.
• Attribut SRC obligatoire indique le URL (Uniform
  Resource Locator ou adresse WWW) menant au
  document.
• ltIMG SRC"URL_de_l'image"gt
• (URL relatif tel que SRC"images/dejeuner.gif"
  ou URL complet tel que SRC"http//www.uqam.ca/ima
  ges/dejeuner.gif")
• Autres attributs de limage ALT et ALIGN
• ALT Pour assurer la compréhension des documents
  par les utilisateurs de fureteurs qui ne peuvent
  afficher les images, il est conseillé de proposer
  un texte alternatif avec l'attribut ALT. ltIMG
  SRC"images/dejeuner.gif" ALT"Déjeuner"gt
• ALIGN Pour aligner l'image
• Les paramètres "top" , "bottom ", "middle",
  "Left", "Right",
• Une image peut servir d'hyperlien.
• Ouvrir la balise ltAgt avant le ltIMGgt et la
  refermer (lt/Agt).

21
Exercice Reproduisez les pages suivantes en
respectant l'arborescence des fichiers.