Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données :...

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

Site de développement MSDN de Microsoft

http://msdn.microsoft.com/library/

Intérêt pour le développement sous JS, PHP, XML/XSL, …

HTML JS

Dreamweaver :

C’est à vous de fixer les valeurs des attributs propriétés ! Rôle de l’attribut ?

Structure d’un document HTML

Document HTML

En-tête

Corps dudocument

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 content:Le contenu des valeurs de name

Valeurs de name:Description Keywords

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

AaIi1Eléments de liste

(Liste Item)

Ordered List

Valeur initiale (1, 2, 3 …)

Unordered List

disccirclesquare

1 attribut type

Les Listes

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>

Destination

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 !).

_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 d’un style

htmlpage1.html

page2.html

fond.gif

page3.html

Arborescence du site: Répertoire & Contenu

Page courante affichée par le navigateurlevel0/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 ChimieCatalogue 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 />

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 d’un 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.

leftrighttoptexttopmiddleabsmiddlebaselinebottomabsbottom

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.

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°3: 25 kOCompression N°2: 35 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".

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 <map> (carte des coordonnées) et <area> (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

Principe de définition du système de coordonnées :

puzzle.jpg 305 x 297 pixels

Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données :...

Documents

Transcript of Syntaxe de la balise HTML Rigueur décriture du XML XHTML Langage de représentation des données :...