Syntaxe de la balise HTML Le navigateur sait comment afficher une balise Langage de représentation des données : Le navigateur affiche une balise HTML Explication Syntaxe balise + attribut valeur entre guillemets Rigueur : écriture en minuscule balise ouvrante et fermante Rigueur d’écriture du XML XHTML
Site de développement MSDN de Microsoft http://msdn.microsoft.com/library/ URL Video d’accès à la librairie HTML et DHTML Exemple d’information <p> et différents onglette propriétés attributs, Style méthodes , événements
Intérêt pour le développement sous JS, PHP, XML/XSL, … Dreamweaver : C’est à vous de fixer les valeurs des attributs propriétés ! Rôle de l’attribut ? HTML JS
Structure d’un document HTML En-tête Corps du document Fin du document HTML L’en-tête est toujours totalement téléchargée, avant que … le corps du document ne commence à s’afficher !
En-tête du document html : <head> Titre du document La barre de titre du navigateur affichera ce titre, Ce titre apparaîtra également dans les « favoris", et l'historique des pages visitées. Le titre est également analysé par les moteurs de recherche. Balise <meta> Les META sont vus par les moteurs de recherche, 2 types: une description et des mots clés. Les mots clés sont séparés par une virgule. Valeurs de name: Description Keywords Valeurs de content: Le contenu des valeurs de name +
Exemple : http://www.omnis.edu Navigateur MIE Code Source
Corps du document HTML : <body> Attributs de Marges (attention MIE spécifique, Netscape spécifique) 4 attributs topmargin, bottommargin, leftmargin et rightmargin, ou marginwidth et marginheight
Mise en forme du texte (1) Paragraphe Un nouveau Paragraphe impose un retour ligne suivante et un saut de ligne ! + Application d’un style Sub-division Une Sub-division div peut contenir tout code HTML (tableau, image etc…). Le bloc div entraîne un retour à la ligne suivante. Cet objet peut être assimilé à un "calque". Les calques peuvent être positionnés de manière absolue dans la fenêtre du navigateur, ils peuvent se superposer, bouger, le contenu peut être modifié dynamiquement …. Ces objets permettent une mise en page et un design "à la carte". Un chapitre leurs est consacré. Probablement l'objet le plus puissant de l'HTML. Span Cet objet n'a d'autres fonctions que d'appliquer un STYLE à du texte.
Mise en forme du texte (2) Balises les plus courantes : Retour ligne suivante Texte pré-formaté Ligne de titre Gras Italique Souligné Indice / exposant
Mise en forme de texte (3) Les Listes 2 attributs type et start Ordered List Valeur initiale (1, 2, 3 …) A a I i 1 (TYPE=A) - lettres en capital : A, B, C ... (TYPE=a) - lettres minuscules : a, b, c ... (TYPE=I) - Chiffres romains : I, II, III ... (TYPE=i) - Chiffres romains minuscules : i, ii, iii ... (TYPE=1) - nombres (par défaut) : 1, 2, 3 ... Eléments de liste (Liste Item) Unordered List 1 attribut type disc circle square
L'information doit contenir sur une page écran. Les Recommandations "Texte et Mise en page" Il s'agit de capter l'attention de l'internaute, et non de la perdre sans qu'il n'accède à l'information. Eviter les longues pages écrans où la barre d'ascenseur est nécessaire. Eventuellement, l'information doit être organisée en paragraphe, afin que les touches 'Page suivante' et 'Page précédente' pointent chaque fois sur un nouveau paragraphe. Attention à ne pas avoir une barre d’ascenseur horizontale, très désagréable à utiliser!. D'une manière générale, ne pas dépasser une taille et demi celle de l'écran. Eviter le superflu, les textes soulignés, barrés, clignotant, couleurs multiples, trop de texte qui défile etc… et gadget en tout genre. La police de caractères choisie sera-t-elle disponible dans l'environnement de l'internaute? Préférer alors des polices courantes (Times, Arial, Courier…) L'information doit contenir sur une page écran. Habillage sobre du texte
Liens Hypertextes : <a> Apparition d'un bandeau lorsqu'on pointe le lien avec la souris Destination Cible _blank ouverture dans une nouvelle fenêtre du navigateur. _self ouverture dans la fenêtre en cours. Cas particulier des Frames: nom_frame ouverture dans un frame nommé nom_frame. _parent ouverture dans le frame "parent", celui qui contient le frame en cours. _top ouverture au-dessus de tous les frames. Annulation des frames. http://... Lien vers site www, adresse URL. ftp://... Lien vers un serveur ftp. news://... Lien vers un serveur de news. telnet://… Ouverture d'une session telnet. mailto:… Envoi d'un e-mail (pas de // ici !). + Application d’un style
Page courante affichée par le navigateur Arborescence du site: Répertoire & Contenu page0.html page1.html page2.html fond.gif page3.html Page courante affichée par le navigateur level0/page0.html Liens HREF vers :
Les Recommandations "Liens" Le lien est la base du document multimédia et de la navigation. Il facilite la connexion vers d'autres contenus, ou vers un marqueurs dans une page web. Intégration du lien: il doit se confondre dans le texte, et non rendre compte du "mécanisme du lien"! Ex.: Choisir sa formation depuis la table des matières du catalogue. Cliquez ici pour consulter le catalogue. Le texte du lien ne doit être ni trop long, ni trop court. Il doit être suffisamment explicite et représentatif de la destination du lien, sans avoir à relire le contexte. Mais le contexte doit malgré tout aider à comprendre le but du lien. Dans le cas d'une liste, choisir pour lien les mots distincts Ex.: Catalogue Chimie Catalogue Chimie Catalogue Physique Catalogue Physique Catalogue Informatique Catalogue Informatique Un must! Parfaite adéquation entre lien, page HTML et son titre. Ne pas bouleverser les habitudes de l'internaute! Trouver le compromis avec la "charte graphique"! Ecrire le texte indépendamment des liens. Choisir le ou les mots représentatifs du lien. Relation entre texte du lien, nom de la page HTML connectée et titre de cette nouvelle page. Choix des couleurs.
Insertion d’Images : <img /> Nom générique pour une gestion de l'image via Javascript. Apparition d'un bandeau lorsqu'on pointe l'image avec la souris. Pour les navigateurs n'affichant pas d'image, le texte est affiché. Affichage d'une bordure, de couleur bleue si l'image est un lien. Taille de l'image. Permet de réserver l'espace pour afficher le texte avant que l'image ne soit chargée. L'adresse de l'image(même commentaires que pour HREF). Valeur des attributs width et height en Pixel, ex.: width="300" height="200" Valeur en Pixel. Pas de bordure si border="0« , dans le cas d’un lien sur image! Valeurs de src: "image/fichier.jpg" (URL Relative), "http://www.url.fr/fichier.jpg" (URL Absolue).
left right top texttop middle absmiddle baseline bottom absbottom Alignement de l'image dans son conteneur (ex. une cellule d'un tableau). L'alignement se fait par rapport à la ligne de texte. Espace réservé autour de l'image, H pour horizontal, V pour vertical. Valeur des attributs hspace et vspace en Pixel, ex.: hspace ="10" vspace ="5"
Les Recommandations "Graphiques" L'image est un moyen de communication. Elle peut fluidifier une présentation, aider à la compréhension, ou au contraire rendre un message muet! Limage est essentielle pour aider à la navigation et à l'organisation de la page. Doser les gadgets à la mode, la quantité de texte. Choix des couleurs. Images à fond transparent pour une meilleure intégration dans la page, ou en filigrane. Choisir l'image représentative de l'information, éviter le superflu! L'image source provient généralement d'une photo, d'un support papier (plaquette commerciale, catalogue) et nécessite donc des retouches, détourage, modification de la balance chromatique etc… Utilisation d'une image gif entre-lacée (chargement par paquet), pré-chargement d'une image faible résolution, prévenir en cas de lien vers une image volumineuse. Limiter la taille d'une image à 30kO.Utiliser des logiciels de réduction de taille de l'image. Ex. 10 images à 30kO = 300kO de chargement! Préférer une petite image, chargée 1 seule fois, mais utilisée plusieurs fois dans la page web (ex. liste à puce). Attention: page à géométrie variable! Seul le coin gauche haut est fixe. La charte graphique doit imposer le sens de lecture de la page, gérer l'occupation de l'espace et distribuer l'information. Une "barre horizontale" graphique peut être utile pour sub-diviser la page (faible encombrement). Une image de fond, aux dimensions de la fenêtre du navigateur mais de poids réduit, contrôlera le design de la page. Attention aux choix des couleurs, à l'adéquation entre les couleurs de fond et de texte. Etude des graphiques. Travail sur Image, poids de l'image. Organisation graphique de la page: "la charte graphique"
Optimisation de la taille d'une image (compression jpeg). Image scannée: 110 kO Compression N°1: 63 kO Compression N°2: 35 kO Compression N°3: 25 kO
Définition de la charte graphique par une image de fond (site BIC). Ajouter une barre de navigation Compléter par le texte
Insertion d’une Image cliquable : <img> et l’attribut usemap L'attribut usemap permet de faire référence à "la carte des coordonnées". Les régions actives sont définies par les balises <map> (carte des coordonnées) et <area> (surface de chaque région). ref_coord est un nom générique pour identifier "la carte des coordonnées". Attributs shape et coords pour la définition de chaque région. L'attribut HREF affecte une URL à une région. En l'absence de lien: NOHREF Attribut alt pour afficher une description du lien sous forme d'un bandeau, et name pour une gestion via Java Script.
Principe de définition du système de coordonnées : puzzle.jpg 305 x 297 pixels