mars 2013 Grégory Petit

Pourquoi fait-on des sites Web?

Alors pourquoi? Pour promouvoir quelque chose : Un produit Une entreprise Une personne Pour présenter des informations Pour le plaisir?

Pour communiquer avec le monde!

Noms de domaine Voir Votre produit, votre nom (accès intuitif) chocolats.miam-miam.ca Éviter dinclure le fournisseur daccès (Bell, Videotron, etc.) Les noms de domaines sont payant et réglementés. Généralement.com ou.ca

Noms de domaines.com - Destiné à être utilisé par les domaines commerciaux..org - Destiné à être utilisé par les organismes non-commerciaux..biz - Destiné aux entreprises..info - Destiné aux organismes fournissant de linformation..name - Limité aux noms des particuliers..net - Principalement utilisé par les entreprises et les organismes disposant dun réseau..edu - Limité aux établissements denseignement qui sont des collèges ou universités offrant un programme de quatre ans..mil - Limité au secteur militaire des États-Unis..gov - Limité au gouvernement des États-Unis..int - Limité aux organismes dont lexistence résulte dun traité international..museum - Limité aux musées..coop - Limité aux coopératives.

HTML

HyperText Markup Language Donc cest un langage! (langage informatique certes) Langage composé de balises Il génère de lhypertexte Hypertexte : texte qui contient des liens vers dautres textes (Ted Nelson, 1965)

HTML HTML permet de : De structurer sémantiquement et de mettre en page le contenu des pages Web, Dinclure des ressources multimédias dont des images, des formulaires de saisie, des vidéos, des applets, etc. Il est souvent utilisé avec dautres langage de programmation comme le PHP et le javascript qui permettent de rendre les pages Web plus dynamiques.

HTML Ça ressemble à ça :ça Ceci est un titre Bonjour HTML, cest bien!

Les éléments HTML Les éléments HTML correspondent au divers éléments composant une page Web. On va souvent parler déléments, de balises ou de tags HTML : cest plus ou moins la même chose. Un élément HTML est normalement composé de 2 balises: Balise douverture Balise de fermeture

Les éléments HTML 2 types de niveau pour les éléments HTML : Niveau bloc (block) : grandes structures qui peuvent contenir dautres blocs ou textes. Les titres, paragraphes, les listes ou les tableaux en font parti. Niveau texte (inline) : « petites » structure qui représentent ou décrivent des morceaux de textes ou de données. Ils ne contiennent normalement pas dautres éléments. Les hyperliens, les citations ou les images en font parti.

Les éléments HTML Alors en gros on a : des textes, des hyperliens, des titres, des listes, des tableaux, des images, des formulaires, des éléments de regroupements, et dautres trucs!

HTML Voyez lHTML comme un gros arbre mélangé avec des poupées russes. Poupées russes : Un éléments HTML peut contenir un plusieurs sous-éléments HTML Ex : un paragraphe peut contenir un autre paragraphe, un lien, une image, etc. Cest le fait quun élément HTML puisse contenir plusieurs éléments HTML qui fait penser à un arbre On a un éléments principal qui est le tronc, qui possède des branches, qui possèdent elle-même des branches, etc.

HTML Ceci est un titre Bonjour HTML, cest bien!

HTML Voici donc les 3 éléments racines dun document HTML … Délimite le document HTML. Cest aussi là où est défini le langage primaire du document. Cest le gros tronc! … Entête du document. Il contient toutes les métadonnées de la page Web (titre, mots-clés, styles, etc.) … Contenu de la page Web. Cest la grosse branche principale de larbre.

XHTML X : eXtended Pareil quHTML 4 sauf quil est moins permissible Le document doit obligatoirement être bien formé Chaque balise ouverte doit être fermée La syntaxe est sensible à la casse (majuscule/minuscule) Amené à disparaître avec la sortie de HTML 5 en fin 2014 Les documents créés par Dreamweaver sont en XHTML donc vous navez pas vraiment à vous en soucier.

HTML HTML, cest le contenu de votre page Web. Ce nest pas son formatage ou sa mise en page. Ils seront gérés avec du CSS.

Adobe Dreamweaver CS6

Pourquoi Dreamweaver? Pour créer une page Web : Vous devez écrire du code! Ça peut se faire avec une éditeur de texte tout bidon comme bloc-note ou textedit! Vous avez besoin dun fureteur Web pour tester vos pages Web. Vous navez pas besoin dêtre connecté à Internet!

Pourquoi Dreamweaver? Ou alors vous utilisez un logiciel qui génèrera ce code pour vous!

Mais attention! Il est quand même important de connaître à quoi correspond le code car : Vous naurez pas toujours un outil comme Dreamweaver sous la main, Les outils comme Dreamweaver ne sont pas parfaits, Dreamweaver utilise un vocabulaire spécifique se rapportant au code HTML, Le code source de chaque page du Web est accessible et libre de droit, donc vous pouvez toujours vous en inspirer. Mais pour cela, vous devez comprendre le code.

Dreamweaver Code source Aperçu du rendu De la page Propriétés de lélément sélectionné Boites à outils

Pratique

On va créer notre première page Web On va le faire ensemble sous forme de démo assistée

Entête des pages Web (Racine invisible de notre arbre)

Entête des pages Web Les entêtes de pages doivent contenir les éléments : Titre ( ) Description Mot-clé Il faut penser à ces données pour toutes les pages du site.

Titre de la Page Utilisez un titre pertinent, court et expressif. Nécrivez pas un paragraphe. Nécrivez pas une suite de mots descriptifs. Généralement, le nom du site suivi par le nom de la page. (ex : COM2580 Applications Web – Evaluation)

Description Assurez-vous de connaître parfaitement le contenu du site. Énoncez de manière claire et concise les fonctions ou services décrits dans votre site. Rédigez le texte comme sil sagissait dun texte publicitaire. Employez des mots susceptibles dattirer la clientèle. Incorporez le plus de mots-clés possibles. Assurez-vous dinclure les méta-références dans le code source. Employez entre 100 et 200 caractères.

Mots-Clés Prévoyez les mots-clés que votre clientèle cible utilisera pour chercher ce que vous offrez. Considérez les mots-clés comme un moyen dattirer lattention sur votre site. Choisissez le singulier ou le pluriel, de faire des phrases. Ne répétez pas les mots-clés plus de 3 fois car vous serez pénalisé. Ninscrivez pas des mots qui sont sans rapport avec le contenu de votre page. Nutilisez pas plus de 20 mots-clés.

Dans Dreamweaver Description et Mots-clé Titre

HTML Tutorial COM2571

Organisation des fichiers dun site Web

Création dun nouveau site avec Dreamweaver Dreamweaver permet de créer un nouveau site et son infrastructure. Il est aussi possible de gérer ses sites à distance avec Dreamweaver (voir cours Intégration Web)

Création dun nouveau site avec Dreamweaver

Organisation des fichiers Créer des répertoires pour : Les images Les styles Éventuellement pour larborescence du site si celui-ci est massif

Arborescence des fichiers

Concrètement ça donne quoi?

Il est important de laisser le chemin relatif au document.

Et pour les hyperliens?

Comme pour les images, il est important de laisser le chemin relatif au document. Menu1

Les structures de page Web

La division Lélément div permet de séparer sa page Web en plusieurs parties. Cest utile pour la mise en page. Cest utile aussi pour regrouper les éléments ensembles.

La division

Vous êtes obligés de remplir lattribut id. Plusieurs div peuvent avoir la même valeur pour lattribut id. Pour lattribut class, on verra ça plus tard avec les feuilles de style.

HTML Bienvenue!

Pratique

Nouveau site Créez un nouveau site Web avec Dreamweaver. Vous devez concevoir une page Web avec plusieurs divisions. Il doit y avoir au moins : Une division dentête où vous mettrez plusieurs liens pour faire une sorte de menu, Une division pour le contenu, Uns division pour le pied de page. La division dentête doit contenir des liens vers dautres pages que vous aurez créés.

Lélément HTML

Un élément Web : Correspond à un élément visible dans la page Web A une syntaxe particulière Appartient à une des deux familles de type daffichage

Syntaxe Accueil Balise douvertureContenuBalise de fermeture

Balise douverture Accueil TagAttributNom de lattributValeur de lattribut

Contenu Il peut être vide Il peut contenir du texte Il peut contenir dautres éléments HTML

Balise de fermeture Certains éléments nont pas de balise de fermeture Ex : Comme vous le voyez, on rajoute un / à la fin de la balise douverture pour dire que lélément se ferme

Type daffichage Il y a 2 catégories déléments HTML quon pourrait distinguer par leur type daffichage : Les « block » : peu importe la catégorie des éléments qui le précèdent, ils seront placés au-dessus et en dessous de lélément « block » Les « inline » : si deux éléments « inline » se suivent, ils se placeront lun à coté de lautre horizontalement

Les différents élément HTML

On va les regarder en fonction des catégories définies par Dreamweaver. On ne pas tous les voir! Les éléments HTML

Attributs communs à certains éléments Largeur (witdh) et longueur (height) Peut être en pixel ou en pourcentage Le pourcentage est calculé en fonction de lélément parent Identifiant (id) unique dun élément (voir feuilles de styles) Classe (class) de lélément (voir feuille de style) Un élément peut avoir plusieurs classes séparées par un espace

On a déjà vu Les liens (inline) Les divisions (block) Les images (inline)

Hyperlien (inline) Texte qui apparaitra Lien Remplir ce champ si vous voulez que le lien souvre dans une autre page Accueil

Hyperlien (inline) Autres attributs Titre : information complémentaire apparaissant quand on affiche le lien. Access Key : raccourci clavier pour activer le lien. Tab-Index : Modifier lordre naturel de tabulation.

Lien courriel (inline) Texte qui apparaitra Adresse courriel Le prof

Ancre Une ancre permet de créer une référence dans une même page. Pour quun lien pointe vers une ancre, il faut que son attribut lien (href) soit le nom de lancre qui a été définie. Un ancre na pas de contenu et est invisible dans la page.

Ancre Ancre : Lien vers lancre : Pied de page

Trait horizontal (block) avant après

Tableau (block) Incluant les entêtes Espace à lintérieur des cellules Espace à lextérieur des cellules Légende et résumé pour laccessibilité (résumé nest pas visible dans la page)

Tableau (block) Les données et entêtes sont ensuite remplies dans linterface Vous pouvez modifier les tailles des lignes et colonnes par la suite dans linterface

Tableau (block) Ligne Entête Donnée

Tags de formatage de texte Sélectionner le texte puis :

Tags de formatage de texte Bold et Strong font la même chose dans Dreamweaver. Ces éléments sont « inline ». Italic et Empasis font la même chose dans Dreamweaver. Ces éléments sont « inline ». Il faut éviter dutiliser ces balises car le formatage de texte est normalement géré dans les feuilles de styles. Mais il faut quand même les connaître.

Citation (block) Permet dajouter un format de citation. Le texte est par défaut décalé sur la droite.

Texte pré-formaté (block) Le texte garde le format exact du code source : les tabulations, espaces et retour chariot sont conservés.

Caractères spéciaux Les caractères spéciaux commencent par & et finissent par ; sauf le retour chariot qui a une balise spécifique :

Paragraphe (block) Générés automatiquement quand on écrit du texte dans linterface graphique de Dreamweaver. Pratique quand on veut sortir dun élément spécifique

Span (inline) On ne peut pas lajouter tel quel avec linterface de Dreamweaver. On doit lajouter directement dans le code source. Même chose que lélément « Paragraphe » mais en inline. Pratique pour formater du texte spécifique à lintérieur dun paragraphe. On y reviendra avec les feuilles de style.

Titres, … (block) Le chiffre derrière le h correspond au niveau du titre

Listes et (block) Listes à puces Liste numérotées Élément dune liste Une fois une liste commencée, les éléments se rajoute à chaque entrée de lusager

Listes et (block)

Listes de définition (block) Listes de définition Terme à définir Description de la définition Une fois une liste de définitions commencée, les éléments se rajoute à chaque entrée de lusager en alternant les et les

Listes de définition (block)

Acronymes et abréviations (inline) Supercal... MDR

Pratique

Vous allez me faire un truc qui ressemble à ça :

Des questions??? Passons à la suite