30-771-01 Conception de sites Web

1
30-771-01 Conception de sites Web
Préparé par Martin Dozois, M.Sc. Sandrine
Prom Tep, M.Sc.
2
Cours 6
Sujets du cours 6

• Notions HTML
• Metatags et référencement
• Listes
• Traitement des images
• Exercice

3
1- Notions HTML Metatags et référencement

• Titre, mots clés et description
• ltheadgt
• lttitlegt5 à 10 mots clés, max. 100 caractères Du
  particulier au général
• e.g. Truffes Desserts Recettes Chez le
  Chef pâtissierlt/titlegt
• ltmeta name"keywords" content"mots clés, phrases
  clés. En
• minuscules, max. 100 mots, 1000 caractères, en
  ordre d'importance"gt
• ltmeta name"description" content"Texte de 75 à
  250 caractères"gt
• lt/headgt

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

5
1- Notions HTML Metatags et référencement

• Pour optimiser le référencement
• Utilisez des headings (lth1gt) plutôt que des
  images pour vos titres de sections et de
  paragraphes
• Soigner le contenu du premier paragraphe de votre
  page afin quil 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 lattribut 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).

6
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

• Lait
• Fruits
• 1. Oranges
• 2. Pommes
• 3. Pain

• Les listes ordonnées (représentées par
  l'annotation
• ltolgt) permettent d'afficher des chiffres devant
  les
• différents éléments (représentés par l'annotation
  ltligt)
• de la liste.
• On peut changer l'affichage des numéros en
  utilisant
• l'attribut TYPE dans le ltolgt. Il est ainsi
  possible
• d'afficher des lettres minuscules (ltol typeagt),
  des
• chiffres romains (ltol typeIgt) et des chiffres
• romains en minuscules (ltol typeigt).

7
1- Notions de HTML Listes

• ltolgt
• ltligtLaitlt/ligt
• ltligtFruitslt/ligt
• ltolgt
• ltligtOrangeslt/ligt
• ltligtPommeslt/ligt
• lt/olgt
• ltligtPainlt/ligt
• lt/olgt

• Lait
• Fruits
• 1. Oranges
• 2. Pommes
• 3. Pain

8
1- Notions de HTML Listes

• Liste non-ordonnées
• Les listes non-ordonnées (ltulgt) 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.

La liste non-ordonnée permet aussi le recours à
un attribut TYPE dans le ltulgt, 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 (ltul
typecirclegt) les points vides (ltul
typediscgt) les carrés (ltul typesquaregt)

• Lait
• Fruits
• Oranges
• Pommes
• Pain

9
1- Notions de HTML Listes

• ltulgt
• ltligtLaitlt/ligt
• ltligtFruitslt/ligt
• ltulgt
• ltligtOrangeslt/ligt
• ltligtPommeslt/ligt
• lt/ulgt
• ltligtPainlt/ligt
• lt/ulgt

• Lait
• Fruits
• Oranges
• Pommes
• Pain

10
2- Traitement des images

• Deux formats dimages 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 dun 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 limage).
• Un format dimage é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 limage). Nest par contre pas encore
  supporté par tout les navigateurs.

11
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 dune image
  destinée à limpression est généralement de 300
  dpi. Le poids et la qualité dune 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).

12
3- Exercice
Mots clés recettefondateurbiscuitJohn Smith
biscuitsrecettes Description John Smith,
fondateur de Krispy Cookie, est un visionnaire
aux idées novatrices dans le domaine de
l'alimentation.