Page 1 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, 2004. Tous droits réservés. 30-771-01 Conception de sites Web Préparé

page 1M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing.HEC Montréal, 2004. Tous droits réservés.

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.


Cours 5

1. Éditeurs HTML2. Notions HTML

- Hypertexte et Hyperliens- Lien dans un document- Lien vers un autre document

- Adresse relative vs Adresse absolue- Lien vers une image

Sujets du cours 5


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 d’objets 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 s’exécute directement sur le serveur différent de DHTML)Hot dog, Coffe cup, …voir download.com (évite enregistrements vs sites fabricants)


Éditeurs texte vs Wysiwyg

• Éditeurs texte- découle de la famille des environnement des programmeurs- métaphores logicielles d’environnement 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, d’entité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 à l’aide de palette d’outils 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


1- Éditeurs HTML

TextPad

• Pourquoi apprendre le code s’il 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

Ouvre le navigateur pour visualiser la page

Liste des pages du site

Gestion des élémentsCourants

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=“ ”


1- Éditeurs HTML

1stPage (beaucoup de fonctionnalités)

On remarque encore la division de l’écran de travail en plusieurs panneaux/cadres


1- Éditeurs HTML

WebExpert (correction sophistiquée du HTML!)Menu contient « optimiser code »Menu contient « évaluer le document »

Menus traditionnels

Barre d’outils

Balise spécifique

Propriétés/Attributs et valeursParticularité propre à IE

ConventionNorme W3C

Ex. pour spécifier les états comme « on mouse over »pour interactivité

Automatise nombre de rangées, colonnes, etc.

Onglets avec racourcis objets, focntions, etc

Nom de la page

Entités caractères


1- Éditeurs HTML

Dreamweaver 4 (Macromédia)

Zone du code

Prévisualisation wysiwyg

Palettes d’outils


1- Éditeurs HTML

Sites pour comparer les éditeurs HTML :

•AllHtml.com http://www.allhtml.com/telechargement/categorie3.php

•ZdNet (guide d’achat)

http://produits.zdnet.fr/test/112/1/1301.html


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 <A>, qui nécessite qu'on la referme pour indiquer la fin du lien: </A>

• Liens internes et liens externes : – à l’intérieur d’un document (aussi appelé une ancre dans

une page HTML) ou – vers un autre document (ex. autre fichier html)


2- Notions de HTML: Lien dans un document

-Attribut NAME pour indiquer des points d'ancrage àl'intérieur d'un document, vers lesquels desattributs HREF pourront pointer.

1-choisir un élément du document qui servira de pointd'ancrage auquel on attribue une étiquette<A NAME=“etiquette”>élément d’ancrage</A>

2-bâtir un hyperlien qui pointera directement sur cette zone: en appelant l'étiquette pour un hyperlien situé dans le même doc:

<A HREF= “#etiquette”>Nom_du_lien</A> ou

en appelant un autre document et l’étiquette pour un hyperlien situé dans un autre document:

<A HREF= “URL_document#etiquette ”>Nom_du_lien</A>


2- Notions de HTML: Lien vers un autre document

Pour pointer vers un autre document via un hyperlien– attribut HREF ajouté à la balise <A>. – 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: <A HREF=“http://URL_complet_document’’>Nom du lien</A>NB: Il est aussi possible de créer des hyperliens qui pointent vers des sites ftp, telnet ou des adresses courriel… <A HREF=“ftp://ftp.uqam.ca’’>Site FTP de l’UQAM</A><A HREF= “mailto:[email protected]’’>Nous écrire</A>

– 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é


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 d’intervention lors d’un changement de serveur d’hébergement du site.

• Exemple de répertoires de site avec fichiers– Combien a-t-on de niveaux ici?

index.html

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

racine


2- Notions HTML

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

index.html

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

<a href="page2.html"> page 2 </a>


2- Notions HTML

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

index.html

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

<a href="rep/fille1.html" >fille 1</a>


2- Notions HTML

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

index.html

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

<a href="../page2.html" >page 2</a>


2- Notions HTML

• Lien relatif complexe: répertoires supérieurs.

index.html

page1.html

page2.html

rep1fille1.htmlrep2

petiteFille1.html

<a href="../../index.html">index</a>


2- Notions HTML

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

index.html

page1.html

page2.html

repfille1.htmlimg

hec.gif

imglogo.gif

<img src="img/logo.gif" >

<img src="rep/img/hec.gif" >


2- Notions HTML

• Lien relatif complexe: répertoires inférieurs.

index.html

page1.html

page2.html

rep1fille1.htmlrep2

petiteFille1.html

<img src="rep1/rep2/img/logo.gif" >

imglogo.gif


2- Notions HTML: Lien vers une image

– La balise servant à intégrer des images dans un document HTML est <IMG>; il n'existe pas d'annotation de fermeture </IMG>.

– Attribut SRC obligatoire: indique le URL (Uniform Resource Locator ou adresse WWW) menant au document.<IMG SRC="URL_de_l'image"> (URL relatif tel que SRC="images/dejeuner.gif" ou URL complet tel que SRC="http://www.uqam.ca/images/dejeuner.gif")

– Autres attributs de l’image: ALT et ALIGNALT: 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. <IMG SRC="images/dejeuner.gif" ALT="Déjeuner">ALIGN: Pour aligner l'imageLes paramètres "top" , "bottom ", "middle", "Left", "Right",

– Une image peut servir d'hyperlien. Ouvrir la balise <A> avant le <IMG> et la refermer (</A>).


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

index.html

firme.htmlcontacts.htmlproduits.htmlproduit_A.htmlproduit_B.html

hec.gif

pages

img

Documents

Page 1 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, 2004. Tous droits réservés. 30-771-01 Conception de sites Web Préparé