page 1 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés Conception de sites Web Préparé par: Martin Dozois, M.Sc. & Sandrine Prom Tep, M.Sc.

page 2 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. Cours 6 1.Notions HTML -Metatags et référencement -Listes 2.Traitement des images 3.Exercice Sujets du cours 6

page 3 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions HTML: Metatags et référencement Titre, mots clés et description 5 à 10 mots clés, max. 100 caractères – Du particulier au général e.g. Truffes – Desserts – Recettes – Chez le Chef pâtissier <meta name="keywords" content="mots clés, phrases clés. En minuscules, max. 100 mots, 1000 caractères, en ordre d'importance">

page 4 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions HTML: Metatags et référencement keywords Beaucoup de moteurs ne lisent que les 5 premiers mots. On place idéalement des mots clés sur toutes les pages du site en les adaptant aux contenus des pages. Ne pas répéter les mêmes mots clés dans la liste. L'ordre des mots clés est important : les premiers ont un poids plus fort pour les moteurs de recherche que les derniers. Utilisez des mots clés qui se retrouvent aussi dans les contenus de la page. Prévoir les déclinaisons de certains mots: singuliers, pluriels, masculins, féminins. Mais ne pas dépasser 5 variantes, et espacer ces mots dans la liste. Pairer les mots susceptibles d'être cherchés conjointement (ex.: pommes, tarte) Toujours écrire les mots en minuscules. description La règle générale est qu'elle est une prolongation logique du titre de la page, sous la forme d'une phrase naturelle. La description est le texte qui s'affiche généralement sur la page de résultats d'un moteur de recherche. Sauf Google qui se servira du premier texte affichable sur la page.

page 5 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions HTML: Metatags et référencement Pour optimiser le référencement: Utilisez des headings ( ) plutôt que des images pour vos titres de sections et de paragraphes Soigner le contenu du premier paragraphe de votre page afin qu’il contienne des mots clés judicieux Utilisez le caractère gras pour mettre en valeur certains mots clés Choisissez bien les mots de vos hyperliens Utilisez l’attribut ALT sur les images pertinentes Nommez les fichiers et répertoires avec des mots clés complets, séparés de tirets (e.g. pantalons-hommes-1.html au lieu de ph1.html) Choisissez un nom de domaine, si possible, qui contient des mots clés (séparés de tirets).

page 6 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions de HTML: Listes Les listes servent à afficher une structure hiérarchique dans un document. Les listes peuvent être soit ordonnées (numérotées), soit non-ordonnées (où des points servent de points d'ancrage). Liste ordonnées Les listes ordonnées (représentées par l'annotation ) permettent d'afficher des chiffres devant les différents éléments (représentés par l'annotation ) de la liste. On peut changer l'affichage des numéros en utilisant l'attribut TYPE dans le. Il est ainsi possible d'afficher des lettres minuscules ( ), des chiffres romains ( ) et des chiffres romains en minuscules ( ). 1.Lait 2.Fruits 1. Oranges 2. Pommes 3.Pain

page 7 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions de HTML: Listes Lait Fruits Oranges Pommes Pain 1.Lait 2.Fruits 1. Oranges 2. Pommes 3.Pain

page 8 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions de HTML: Listes Liste non-ordonnées Les listes non-ordonnées ( ) affichent plutôt des points d'ancrage (des points remplis, vides et des carrés, selon le niveau hiérarchique) devant les éléments qu'elles comportent. Lait Fruits o Oranges o Pommes Pain La liste non-ordonnée permet aussi le recours à un attribut TYPE dans le, qui permet de choisir l'apparence du point d'ancrage plutôt que d'utiliser celui qui apparaît par défaut. Les choix possibles: les points remplis ( ) les points vides ( ) les carrés ( )

page 9 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 1- Notions de HTML: Listes Lait Fruits Oranges Pommes Pain Lait Fruits o Oranges o Pommes Pain

page 10 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 2- Traitement des images Deux formats d’images pour le Web:.gif et.jpg.gif: Image possédant une palette constituée de 2 à 256 couleurs. Format utilisé pour les images représentant du texte (e.g. titres) ou des éléments de design d’un nombre limité de couleurs..jpg: Image possédant une palette de millions de couleurs. Format utilisé pour des images photographiques ou des images ayant beaucoup de dégradés de couleurs. Le format.jpg peut être compressé (ce qui diminue la taille du fichier, mais aussi la qualité de l’image). Un format d’image émergeant pour remplacer le.gif:.png (Portable Network Graphics). Format non-propriétaire recommandé par le W3C possédant plusieurs qualités (meilleure compression, qualité de l’image). N’est par contre pas encore supporté par tout les navigateurs.

page 11 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 2- Traitement des images Résolution Comme la diffusion des images se fait sur le Web, la résolution doit en être une de 72 dpi (dots per inch, points au pouce carré), qui constitue une qualité «écran». La résolution d’une image destinée à l’impression est généralement de 300 dpi. Le poids et la qualité d’une telle image sont alors inutilement élevés pour une diffusion à l’écran. Dans un logiciel de graphisme (e.g. Adobe Photoshop), on indique la résolution des images dans la boîte de dialogue où est aussi déterminée la dimension de l'image (menu déroulant «Image», item «Image size»).

page 12 M. Dozois, M.Sc., S. Prom Tep, M.Sc. HEC Montréal, Tous droits réservés. 3- Exercice Mots clés: recette fondateur biscuit John Smith biscuits recettes Description: John Smith, fondateur de Krispy Cookie, est un visionnaire aux idées novatrices dans le domaine de l'alimentation.