page 1 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés 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.

page 2 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Cours 5 1.Éditeurs HTML 2.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

page 3 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML Éditeurs gratuits: TextPadTextPad (simple, petit, efficace) FirstPageFirstPage (beaucoup de fonctionnalités mais discontinué) 350 autres éditeurs populaires (site CNET)éditeurs populaires Éditeurs commerciaux: HoTMetaL HoTMetaL (peu utilisé, lourd et complexe à utiliser) GoLive GoLive (version 5 de Adobe) Dreamweaver Dreamweaver (le plus courant de Macromedia avec bonne intégration dobjets notamment en Flash MX) WebExpertWebExpert (québécois en français!) FrontPageFrontPage (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)

page 4 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. É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

page 5 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML TextPad 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 Ouvre le navigateur pour visualiser la page Liste des pages du site Gestion des éléments Courants 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=

page 6 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML 1stPage (beaucoup de fonctionnalités) On remarque encore la division de lécran de travail en plusieurs panneaux/ cadres

page 7 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML WebExpert (correction sophistiquée du HTML!) Menu contient « optimiser code » Menu contient « évaluer le document » Menus traditionnels Barre doutils Balise spécifique Propriétés/Attri buts et valeurs Particularité propre à IE Convention Norme 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

page 8 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML Dreamweaver 4 (Macromédia) Zone du code Prévisualisation wysiwyg Palettes doutils

page 9 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 1- Éditeurs HTML Sites pour comparer les éditeurs HTML : AllHtml.com ZdNet (guide dachat)

page 10 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 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, qui nécessite qu'on la referme pour indiquer la fin du lien: 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)

page 11 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 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 élément dancrage 2-bâtir un hyperlien qui pointera directement sur cette zone: en appelant l'étiquette pour un hyperlien situé dans le même doc: Nom_du_lien ou en appelant un autre document et létiquette pour un hyperlien situé dans un autre document: Nom_du_lien

page 12 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions de HTML: Lien vers un autre document Pour pointer vers un autre document via un hyperlien –attribut HREF ajouté à la balise. –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: Nom du lien NB: Il est aussi possible de créer des hyperliens qui pointent vers des sites ftp, telnet ou des adresses courriel… Site FTP de lUQAM Nous écrire –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é

page 13 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML : adresses relatives Les adresses absolues (ou URL complet) sont de type 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? index.html page1.html page2.html rep fille1.html img hec.gif img logo.gif racine

page 14 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif vers une page de même niveau. index.html page1.html page2.html rep fille1.html img hec.gif img logo.gif page 2

page 15 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif vers une page de niveau inférieur. index.html page1.html page2.html rep fille1.html img hec.gif img logo.gif fille 1

page 16 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif vers une page de niveau supérieur. index.html page1.html page2.html rep fille1.html img hec.gif img logo.gif page 2

page 17 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif complexe: répertoires supérieurs. index.html page1.html page2.html rep1 fille1.html rep2 petiteFille1.html index

page 18 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif vers une image de niveau inférieur. index.html page1.html page2.html rep fille1.html img hec.gif img logo.gif

page 19 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML Lien relatif complexe: répertoires inférieurs. index.html page1.html page2.html rep1 fille1.html rep2 petiteFille1.html img logo.gif

page 20 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. 2- Notions HTML: Lien vers une image –La balise servant à intégrer des images dans un document HTML est ; il n'existe pas d'annotation de fermeture. –Attribut SRC obligatoire: indique le URL (Uniform Resource Locator ou adresse WWW) menant au document. (URL relatif tel que SRC="images/dejeuner.gif" ou URL complet tel que SRC=" –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. ALIGN: Pour aligner l'image Les paramètres "top", "bottom ", "middle", "Left", "Right", –Une image peut servir d'hyperlien. Ouvrir la balise avant le et la refermer ( ).

page 21 M. Dozois, M.Sc., S. Prom Tep, M.Sc. et Jean-Yves Fiset, ing. HEC Montréal, Tous droits réservés. Exercice: Reproduisez les pages suivantes en respectant l'arborescence des fichiers. index.html firme.html contacts.html produits.html produit_A.html produit_B.html hec.gif pages img