La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données : Le navigateur sait comment afficher une balise.

Présentations similaires


Présentation au sujet: "Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données : Le navigateur sait comment afficher une balise."— Transcription de la présentation:

1 Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données : Le navigateur sait comment afficher une balise

2 Site de développement MSDN de Microsoft

3 Intérêt pour le développement sous JS, PHP, XML/XSL, … HTMLJS Dreamweaver : Cest à vous de fixer les valeurs des attributs propriétés ! Rôle de lattribut ?

4 Structure dun document HTML Document HTML En-tête Corps du document Fin du document HTML Len-tête est toujours totalement téléchargée, avant que … le corps du document ne commence à safficher !

5 En-tête du document html : 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 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 content: Le contenu des valeurs de name Valeurs de name: Description Keywords

6 Exemple : Navigateur MIE Code Source

7 Corps du document HTML : Attributs de Marges (attention MIE spécifique, Netscape spécifique) 4 attributs topmargin, bottommargin, leftmargin et rightmargin, ou marginwidth et marginheight

8 Mise en forme du texte (1) Paragraphe Un nouveau Paragraphe impose un retour ligne suivante et un saut de ligne ! + Application dun 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.

9 Mise en forme du texte (2) Balises les plus courantes : Retour ligne suivante Texte pré-formaté Ligne de titre Gras Italique Souligné Indice / exposant

10 Mise en forme de texte (3) 2 attributs type et start (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... AaIi1AaIi1 Eléments de liste (Liste Item) Ordered List Valeur initiale (1, 2, 3 …) Unordered List disc circle square 1 attribut type Les Listes

11 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 dascenseur 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

12 Liens Hypertextes : Destination 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 (pas de // ici !). _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. Cible Apparition d'un bandeau lorsqu'on pointe le lien avec la souris + Application dun style

13 page0.html page1.html page2.html fond.gif page3.html Arborescence du site:Répertoire & Contenu Page courante affichée par le navigateur level0/page0.html Liens HREF vers :

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

15 Insertion dImages : Valeur des attributs width et height en Pixel, ex.: width="300" height="200" L'adresse de l'image(même commentaires que pour HREF). Valeurs de src: "image/fichier.jpg" (URL Relative), "http://www.url.fr/fichier.jpg" (URL Absolue). Taille de l'image. Permet de réserver l'espace pour afficher le texte avant que l'image ne soit chargée. Affichage d'une bordure, de couleur bleue si l'image est un lien. Valeur en Pixel. Pas de bordure si border="0«, dans le cas dun lien sur image! Apparition d'un bandeau lorsqu'on pointe l'image avec la souris. Pour les navigateurs n'affichant pas d'image, le texte est affiché. Nom générique pour une gestion de l'image via Javascript.

16 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. Valeur des attributs hspace et vspace en Pixel, ex.: hspace ="10" vspace ="5" Espace réservé autour de l'image, H pour horizontal, V pour vertical.

17 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"

18 Optimisation de la taille d'une image (compression jpeg). Image scannée: 110 kOCompression N°1: 63 kO Compression N°3: 25 kOCompression N°2: 35 kO

19 Définition de la charte graphique par une image de fond (site BIC). Ajouter une barre de navigation Compléter par le texte

20 Insertion dune Image cliquable : et lattribut usemap L'attribut usemap permet de faire référence à "la carte des coordonnées". ref_coord est un nom générique pour identifier "la carte des coordonnées". Les régions actives sont définies par les balises (carte des coordonnées) et (surface de chaque région). Attributs shape et coords pour la définition de chaque région. Attribut alt pour afficher une description du lien sous forme d'un bandeau, et name pour une gestion via Java Script. L'attribut HREF affecte une URL à une région. En l'absence de lien: NOHREF

21 Principe de définition du système de coordonnées : puzzle.jpg 305 x 297 pixels


Télécharger ppt "Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données : Le navigateur sait comment afficher une balise."

Présentations similaires


Annonces Google