// HTML, Javascript XHTML & CSS

Transcription

1 design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com

2 // sommaire HTML 01. Introduction au langage HTML 02. Introduction aux principes généraux du webdesign et première maquette 03. HTML, les bases 04. La balise <BODY> 05. Texte / alignement, formatage, listes 06. Liens 07. Images & Map 08. Tableaux 09. Frames & I-Frames 10. Formulaires 11. Récapitulatif des balises les plus courantes JAVASCRIPT 13. Introduction au Javascript 14. Menus dynamiques 15. Popup 16. Full screen 17. Restriction d accès au contenu XHTML 18. Introduction au XHTML CSS 19. Introduction et principe de base 20. Sélecteurs 21. Propriétés 22. Cascades et conflits d héritage 23. Positionnement 24. Feuille de style pour l impression 25. Trucs & astuces LEXIQUE GENERAL // page. 03 // page. 06 // page. 11 // page. 15 // page. 16 // page. 24 // page. 27 // page. 32 // page. 36 // page. 40 // page. 46 // page. 47 // page. 50 // page. 54 // page. 57 // page. 58 // page. 59 // page. 64 // page. 68 // page. 72 // page. 81 // page. 82 // page. 91 // page. 92 // page. 97 2

3 01. Introduction au langage HTML I. HISTORIQUE II. qui utilise le html? III. apprendre le html 3

4 01. Introduction au HTML Le HTML ou HyperTexte Markup Language est le langage de publication utilisé sur le World Wide Web. Très facile à maîtriser, il s agit tout simplement d un langage à balises («tags" au format ASCII), délimitées entre crochets et affinées dans leur formes par des attributs ; ces instructions placées dans un simple fichier texte au format.html (ou.htm) sont ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran I. HISTORIQUE C est Tim Berners-Lee qui a écrit et développé ce langage pour répondre aux besoins du système d échange d informations qu il venait d inventer : le World Wide Web. Pour expliciter physiquement ces échanges entre machine, un protocole spécifique a été mis en place, c est le HTTP (Hyper Text Transfert Protocol) ; moyen simple et efficace d accéder sur un réseau à des documents liés entre eux par des hyperliens. Ecrits en HTML, les documents s enchaînent les uns les autres par un simple clic de souris et sont transportés jusqu au lecteur grâce au protocole HTTP. Un leger point historique / HTML 1.0 Le language HTML voit le jour au au CERN (Centre d études et de recherches nucléaires) situé près de Genève. Il y a peu de balises : on peut cependant insérer des images, créer des liens hypertextes, mais tout cela en noir, sur un fond gris, et sans interface graphique! 1995 / HTML 2.0 Cette norme voit apparaître des possibilités de mise en page avec des tableaux / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insérées. Listes, Cartes cliquables, Frames / HTML 4.0 Outre de nouvelles commandes (I-Frames), un nouveau principe révolutionnaire de mise en page séparant le fond et la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet) / XHTML Mise à jour majeure du langage qui devient XHTML. C est l avènement du Web / HTML 5.0 (?) La mise en place d une nouvelle standardisation du langage XHTML est prévue pour la nouvelle décennie à venir. Que nous réserve t elle?! II. qui utilise le html? Avant d arriver au stade de produit fini permettant la consultation par l internaute des informations qu il contient, la vie d un site Internet se construit en suivant plusieurs étapes dont la construction HTML n est qu un des jalons. Dans le process moderne de la construction d un produit de communication interactive, ce sont les intégrateurs, situés juste après les infographistes et juste avant les developpeurs (ingénieurs informaticiens responsables de l implémentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML. Ils y incluent textes, images, documents flash, sons et vidéos en fonction des recommandations graphiques des studios créatifs et c est à eux tout particulièrement que l on demande une excellente connaissance du code. 4

5 01. Introduction au HTML III. apprendre le html Si vous n avez jamais consulté le code source d une page HTML, connectez-vous sur une page avec votre navigateur favori et consultez son fichier «source" (Affichage/Source, ou «Afficher la source" avec le clic droit de la souris lorsque le pointeur est sur la page). De par sa structure des plus élémentaire ainsi que par sa simplicité physique, apprendre le HTML pour integrer un ensemble de pages web et les rendre cohérentes entre elles ne nécessite aucune compétence en terme de langage de programmation. On peut écrire du HTML avec un éditeur de texte de base (Notepad, ou Simple Text), ou en utilisant un traitement de texte à condition d enregistrer le fichier au format «texte seulement", avec l extension.html. On peut également utiliser des éditeurs à interface d intégration accompagnée de type Dreamweaver, mais il est toutefois recommandé de bien connaître la base du langage pour les utiliser correctement afin d en optimiser les flux de production. A l arrivée, la phase la plus délicate de la construction d un produit de communication interactive ne réside pas dans son intégration mais plus dans la compréhension et l application des process et méthodes qui vont rendre sa création plus fonctionnelle, fluide et efficace. Ce que nous allons voir ensemble... 5

6 02. Introduction auw principes généraux du webdesign & première maquette I. GENERALITES II. III. IV. un peu d ordre et de méthode le contenu l architecture 1. Arborescence 2. Liens 3. Modularité V. la forme 1. Zoning 2. Format technique 3. Format visuel 6

7 02. Introduction au webdesign I. GENERALITES Avant de se lancer dans l habillage graphique ou même l intégration d un produit, il convient de réfléchir à sa finalité et d en définir le contenu, l architecture, et la forme générale... Pour ce faire des outils sont à votre disposition : le brief créatif, le benchmark de referencement sectoriel, une bonne connaissance de la typologie, des contraintes d intégration et de l architecture de l information des sites internet (cf. Methodologie des metiers du design interactif). Ajoutez à l ensemble un gout prononcé pour la culture design et ses publications, votre curiosité naturelle, une bibliothèque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un peu de talent... mais n oubliez jamais qu au début tout commence toujours par une page blanche et un stylo pour esquisser vos premières recherches. II. un peu d ordre et de méthode Avant même d envisager toute activité productive, prenez le temps d adopter une logique de traitement et d ordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous permettra de gagner un temps précieux lors du développement de projets futurs. Bien qu en la matière il n existe aucune règle pré-établie, il vous est conseillé d adopter la nomenclature suivante : # production # année # n de dossier_nom du client # admin tous documents de travail fournis ou crées (brief, benchmark, charte graphique etc...) # logos docs.jpg basse définition en racine # eps docs illustrator # psd docs photoshop # maquette docs.jpg en racine # psd docs photoshop # print docs.jpg basse définition en racine # indd docs indesign # eps docs illustrator # pdf docs exportés au format pré-print # psd docs photoshop # sources # images docs images (.jpg,.tiff,.png, etc...) # flash docs.fla et.swf # textes docs redactionnels (.txt,.doc, etc...) # web docs.html finaux # arborescence variable (cf. IV. l architecture) Quitte à optimiser votre process de developpement, vous pouvez même créer un répertoire «_dossier type" contenant les dossiers pré-crées que vous n aurez plus qu a dupliquer er renommer à la création de tout nouveau projet 7

8 02. Introduction au webdesign III. le contenu La définition du contenu de tout produit de communication interactive est certainement un des points les plus important à dégager en amont du projet. C est sa définition exhaustive qui vous permettra de calibrer correctement le contenu de chaque rubrique et donc de le valoriser de façon la plus efficace possible. Il n est en effet rien de plus désagréable à consulter qu une page au contenu mal calibré, soit parce que trop «vide" soit parce que trop «riche" en information. Une bonne définition des contenus donnera à vos visiteurs l envie de revenir sur votre produit, c est donc une phase de construction à ne surtout pas négliger. Maîtrisez le sujet abordé : Même si vous n êtes pas familier du produit traité, prenez le temps de vous renseigner sur ce dernier, vous serez pâr la suite plus à l aise lorsqu il s agira d architecturer l info. Dégagez les principales rubriques : Soyez à même de proposer un rubriquage le plus cohérent possible par rapport au produit à traiter ; ce faisant en devancant la demande du client vous eviterez l ecueil d une arborescence mal équilibrée. Préparez vos sources : Réunissez et contrôlez textes, paragraphes, orthographe, images, contenus interactifs... plus vous aurez une vision complète de la quantité de contenu à integrer, plus votre produit sera cohérent et efficace. IV. l architecture Sous peine de courir très vite à la catastrophe (dans le cas de produits à la profondeur conséquente et/ou évolutive) et de perdre un temps précieux lors de la phase d intégration, dégagez au plus tôt l architecture physique (arborescence) de votre site. 1. Préparez l arborescence de votre site. Dans le dossier «web". Il s agit en fait de la création/localisation physique des dossiers qui vont accueillir vos pages. A l instar de votre dossier de travail une bonne nomenclature de dénomination de toute arborescence est essentielle à l accompagnement d un travail propre et clair. # web index.html fichier html de la page d accueil style.css feuille de style du produit javascript.js moteurs javascript du produit # images dossier des images communes à TOUTES les pages du site (fonds, navigation, etc...) # nom de rubrique_01 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT # nom de rubrique_02 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT # etc... dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT NB : En raison des standards referentiels (google et autres moteurs de recherche), votre première page (page d accueil, homepage,...), doit se nommer index.html. Il est de plus préférable que les noms de vos pages é dossiers ne dépassent pas 8 caractères. 8

9 02. Introduction au webdesign 2. Spécifiez les liens vers vos différentes pages. Pour bien visualiser la navigation entre les pages de votre produit, rien ne vaut un bon croquis qui vous permettra de formaliser correctement cette dernière lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie des metiers du design interactif / 08. Architecture de l information). 3. Modularité du produit. En fonction de sa profondeur et/ou de la commande client, pensez à architecturer votre produit pour qu il puisse, au cas échéant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas être trop «rigide" graphiquement parlant. V. la forme 1. Zoning Afin de faciliter l intégration du code avec un éditeur html, n hésitez pas à réaliser un gabarit structurant de votre future maquette faisant apparaitre le «zoning" de votre produit ; ceci également dans le but d affecter aux éléments des côtes en pixels pour une mise en page soignée. Dessinez un premier croquis de votre produit Spécifiez les côtes en pixels 2. Format technique Le developpement d un produit de communication interactive, de par la finalité de son support de diffusion (écran) ne s envisage pas de la même manière qu un produit imprimé. Voiçi un rappel des différences principales à prendre en considération lors de la création de la maquette : (cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive) 9

10 02. Introduction au webdesign 3. Format visuel A contrario de l édition de documents destinés à l imprimerie (dans un format fixe donc), l un des paramètres les plus importants à prendre en compte lors de la construction d un produit de communication interactive est la modularité du support final. En effet, dans l univers de la création interactive vous allez vous heurter à la modularité de... La multiplicité des plateformes MAC / PC La multiplicité des système d exploitation MAC OS X / WINDOWS XP, Vista, Seven / LINUX La multiplicité navigateurs OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8 La diversité des définitions d écrans 1024x768 / 1152x864 / 1280x1024 / 1600x pour ne citer que les paramètres les plus importants à considerer. Nous aurions pû aussi citer la puissance des connexions proposées par les fournisseurs d accès ou bien encore la qualité d affichage des couleurs à l écran et la puissance des machines. Il est donc essentiel lors de la création d une interface de penser à tout ces paramètres pour éviter de vous confronter à un conflit (voir une impossibilité) d intégration d élément lors de la découpe de ce dernier. Pour eviter les migraines, et dans le cadre de la construction d un produit classique à diffusion d information verticale (ceci excluant de facto les formats et expérimentation plus exotiques) il est conseillé de travailler à partir d un gabarit au format max de 1600x1200 pixels incluant une «zone utile" centrée de 1000 pixels de large

11 03. HTML, les bases I. introduction II. III. IV. LE squelette d une page 1. L en tête / HEAD 2. Le corps / BODY les balises 1. Généralités 2. Balises BLOC vs. INLINE les attributs V. quelques regles simples pour débuter 11

12 03. HTML, les bases I. introduction Comme nous l avons vu dans le premier chapitre, le HTML est un langage de description qui pour formater et mettre en page ses contenus utilise des balises (tags) délimitées entre crochets et affinées dans leur formes par des attributs. A l aide de ces attributs et des valeurs insérées, vous allez définir la forme de votre texte (gras, italique, polices...), inclure des images, des animations, de la vidéo, du son, et des liens vers d autres pages... qui seront ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran II. LE squelette d une page Une page HTML est divisée en deux parties : l en-tête (HEAD) et le corps (BODY) de la page... <html> <head> <title> Le titre de la page</title> </head> <body> <font face="arial" size="1">texte</font> </body> </html> 1. L en tête / HEAD Invisible à l écran, cette partie regroupe toutes les informations nécessaires à un bon affichage de votre page par les différents navigateurs Internet. Dans cette partie vont se joindre : La balise <title> : Pour le titre de la page <title>titre de la page</title> Les balises <meta> : Aussi appellées «meta-balises". Principalement utilisées pour l indexation et le référencement des sites par les moteurs de recherche, ces dernières sont devenues facultatives, voire obsolètes. Les seules balises absolument nécessaires à une page sont TITLE et DESCRIPTION. <meta title="nom du site"> <meta description="description du site"> Le character set : HTML etant optimisé pour une utilisation en langue anglaise (langage n utilisant pas d accent), il vous est plus que fortement conseillé d appliquer une méta balise de définition d alphabet prenant en compte ces derniers sous peine d être condamné à les signigfier physiquement dans le code <meta http-equiv="content-type" content="text/html; charset=iso "> L appel des feuilles de style : <style type="text/css">...</style> pour un style interne à la page et appliqué à une balise de type inline <link rel="stylesheet" type="text/css" href="monstyle.css"> pour une feuille de style externe à la page L appel des javascript : Utilisé pour les parties dynamiques de votre page <script src="javascript.js" type="text/javascript" charset="iso "></script> 2. Le corps / BODY C est la partie où, toujours grâce à l utilisation des balises, vous intégrerez les différents éléments de votre page visibles à l écran : texte, hyperliens, images, animations, vidéo, son... 12

13 03. HTML, les bases III. les balises 1. Généralités Les balises sont des séquences de caractères interprétées par les navigateurs Web. Lorsque l on regarde le contenu d une page HTML, on repère assez facilement les balises HTML, ce sont les portions de texte semblables à celle-ci : <B>ceci est du gras</b> Une balise est facilement identifiable, elle est constituée d un mot (ou plusieurs dans certain cas) encadrée par les signes inférieur < et supérieur >. La plupart des balises doivent être fermées. La majorité des balises servent à la mise en page (texte en gras, tableaux...), mais toutes ne sont pas dédiées à la mise en page des documents, en effet, le HTML permet par exemple de donner des informations sur le document lui même (informations qui ne seront pas affichées), d appeler des fichiers externes comme des images, des animations Flash, des sons... Etant donné que c est un langage de description, il n est pas sensible à la casse, en effet on peut aussi bien écrire : <B>mot en gras</b> que <b>mot en gras</b> 2. Balises BLOC vs. INLINE Bien que la définition de cette notion soit un peu prématurée à ce stade (nous y reviendrons lorsque nous aborderons l utilisation des CSS), il s agit d une notion essentielle à prendre en considération. Dans l immédiat gardez en memoire qu il y a deux type de balises : les balises de type BLOC : dont le développement vertical est généralement dédié aux définitions structurelles des contenus de votre page (listes, tableaux, etc...) <TABLE> <TR> </TR> </TABLE> <TD> </TD> les balises de type INLINE : dont le développement horizontal est généralement dédié aux définitions d apparence des contenus de votre page (images, textes, etc...) <FONT SIZE="1" COLOR="black"><I><B>texte</B></I></FONT> 13

14 03. HTML, les bases IV. les attributs Ce sont les spécifications particulières de chaque balise (dont nous verrons la liste afférente à chacune lorsque abordé). Ils permettent de modifier l effet de la balise ou précisent son action. Les attributs figurent après le nom des balises dans les < > ; ils sont séparés par des espaces et leur valeur est indiquée entre guillemets. <font face="arial" size="1" >texte</font> Dans cet exemple concernant une ligne de texte, cette dernière a reçu une balise de définition de police de caractère font qui elle-même a reçu un attribut de famille face et de taille size V. quelques regles simples pour débuter Pratiquement toutes les balises vont par paire (balises d ouverture et de fermeture) par exemple : <b> et </b> Ecrivez vos balises en minuscules, cela peut faciliter le transfert de votre code vers le XHTML Essayer d aérer votre code au maximum en utilisant la tabulation de votre clavier à chaque implementation descendante de code (cf. exemple de squelette de page au début de ce dossier) 14

15 04. La balise <BODY> Structure fondatrice des éléments qui seront visibles sur votre page, la balise <BODY> est à même de recevoir un certain nombre d attributs dont certains sont incontournables balise attribut valeurs effet <body> topmargin pixel définit les marges haute et basse de la page (pour I.E) leftmargin pixel définit les marges gauche et droite de la page (pour I.E) marginwidth marginheight bgcolor background style bgproperties scroll text link alink vlink pixel pixel hexadecimale url relatif url absolu background-repeat: no-repeat; background-repeat: x; background-repeat: y; fixed yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale définit les marges haute et basse de la page définit les marges gauche et droite de la page définit la couleur du fond définit la source relative de l image de fond définit la source absolue de l image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l axe X (css intégrée) définit la répétition du bkg sur l axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page <BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/ bkg.jpg" style="background-repeat:no-repeat;" bgproperties="fixed" link="#ff0000" alink="#33ff00" vlink="#ff9900" > 15

16 05. Le texte I. Les styles II. III. IV. Les accents Les en têtes Les paragraphes V. Alignement / FERRAGE VI. VII. Les lignes horizontales Les listes 1. Les listes non numérotées 2. Les listes numérotées 16

17 05. Le texte Au sein d une page HTML le texte s implémente dans le <body> de cette dernière. Ce dernier se doit d être bien entendu lui aussi codé. Voici les codes de mise en page de texte les plus courant I. Les styles gras <b> ou <strong> <strong>texte</strong> italique <I> ou <em> <em>texte</em> souligné <u> <u>texte</u> exposant <sup> 11<sup>e</sup> siècle indice <sub> H<sub>2</sup>O Bien entendu, les styles peuvent se cumuler pour une même portion de texte. Dans ce cas, l ordre de définition des balises de style importe peu. gras & italique <em> et <strong> <em><strong>texte<strong></em> ou <strong><em>texte</em><strong> II. Les accents Même si l utilisation judicieuse d un character set Européen (gérant les les accents) placé en meta balise dans votre header est censé vous eviter ce genre de désagrément... il faut savoir que dans l absolu les accents se codent! il se peut donc que vous ayez besoin de coder un accent au format ascii ou d utiliser un caractère spécial. Pour ce faire, le principe est le suivant commencez par & puis la lettre à accentuer puis le codage de l accent et terminez par un point virgule. Ainsi pour é : vous écrirez é Ci-dessous un tableau récapitulatif des principaux codes : é é espace forcé è è à à ô ô â â ï ï ü ü œ œ ç ç ««õ õ "» Pour une liste plus exhaustive des charactères spéciaux : 17

18 05. Le texte III. Les en têtes Utilisés pour le titrage, ils changent la taille des caractères et génèrent un retour à la ligne automatique. h1 h2 h3 h4 h5 h6 <h1>titre</h1> <h2>titre</h2> <h3>titre</h3> <h4>titre</h4> <h5>titre</h5> <h6>titre</h6> IV. Les paragraphes Un document lu, c est avant tout un document aéré : il faut donc diviser le contenu de votre texte en plusieurs paragraphes. En terme de gestion du texte, les retours à la ligne dans le code, de même que les sauts de ligne et les tabulations ne sont pas pris en compte. Il faudra donc les signifier par des balises spécifiques dédiés. Lorsque vous développez vos pages, il existe deux balises qui permettent d obtenir, soit un saut de ligne, soit le commencement d un nouveau paragraphe. La balise <p> exprime le début d un paragraphe et génère un double espace. La balise de fermeture </p> est facultative La balise <br> effectue un retour à la ligne et génère un simple espace. <br> est une balise orpheline et donc ne se ferme pas.. V. Alignement / Ferrage Pour ferrer un ou plusieurs bloc de texte, on appliquera l attribut align soit aux en-têtes, soit au paragraphe. En l absence de l une ou l autre de ces balises il est toujours possible de ferrer un texte en utilisant la balise universelle <div>... balise attribut valeurs effet <Hx> <p> <div> align left right center justify aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte ferrage avec en-tête : <h1 align="center">titre</h1> ferrage avec paragraphe : <p align="left">texte</p> ferrage avec balise universelle : <div align="justify">texte</div> NB : Par défaut, comme toujours, l alignement du texte se fait sur la gauche. 18

19 05. Le texte VI. Les lignes horizontales Utiliser des lignes ou des filets horizontaux est très pratique pour séparer les différentes parties de votre document. Cette méthode s obtient avec la balise <hr> et ne nécessite pas de balise de fermeture. Elle possède plusieurs attributs : balise attribut valeurs effet <hr> align left aligne la ligne horizontale à gauche right aligne la ligne horizontale à droite center aligne la ligne horizontale au centre width size color noshade pixel, % de 1 à 10 hexadecimale sans définit la largeur de la ligne définit l épaisseur de la ligne définit la couleur de la ligne (uniquement I.E) s il est présent, l effet d ombre 3D est annulé <hr width="200" align="left" color="#ff0000" noshade> VII. LISTES La liste est une balise de type bloc relativement facile à mettre en place en html. On en distingue deux type. Toutefois, nous verrons par ailleurs que ce formatage sera géré de façon plus complète avec les CSS 1. Les listes non numérotées <ul> Avec <ul> pour «unordered list" les élements apparaissant entre les balises <li> 2. Les listes numérotées <ol> Avec <ol> pour «ordered list" les élements apparaissant entre les balises <li> balise attribut valeurs effet <ul> type disc puce circle cercle square carré <ol> sans type sans I A a chiffres arabes par défaut chiffres rommains lettres alphabétiques majuscules lettres alphabétiques minuscules <ul type="disc"> <li>premier</li> <li>deuxième</li> </ul> <ol type="a"> <li>premier</li> <li>deuxième</li> </ol> 19

20 06. Les liens I. GENERALITES II. III. IV. DENOMINATIFS DES FICHIERS ET DOSSIERS LIENS RELATIFS LIENS ABSOLUS V. liens internes à la page VI. CAS particulier, l attribut «MAIlto" 20

21 06. Les liens I. GENERALITES A l intérieur de votre document, la balise <a> permet d établir un lien hypertexte (l essence même du Web) vers un autre document ou encore vers l extérieur (vers un autre site web). Tout ce qui se trouve entre la balise <a> et </a> sera considéré un lien et apparaîtra par défaut souligné à l écran. balise attribut valeurs effet <a> href url relatif définit la source relative du document url absolu définit la source absolue du document target title name style _self _blank _parent _top variable à définir variable à définir variable à définir appelle la page cible dans le cadre d appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET) définit une description du lien (identique à l attribut ALT pour une image) définit une identité au lien définit une feuille de style <a href="fichier.html" title="nomdufichier" target="_blank">texte</a> II. DENOMINATIFS DES FICHIERS ET DOSSIERS Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que c est un des premiers endroits que les moteurs de recherche vont analyser pour trouver les mots-clés, il est judicieux de choisir des noms de dossiers en rapport avec le contenu de vos pages. Par exemple une page portfolio, aura plus de chances d être trouvée si l url est portfolio/index.htm que 02/index.htm Les accents, les espaces et les caractères de ponctuation sont INTERDITS dans les noms de dossiers et de fichiers, il est néanmoins possible d inclure des tirets et des tirets bas (underscore). Il est recommandé de n utiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent sensibles à la casse. index.htm" N EST PAS la même chose que INDEX.htm" 21

22 06. Les liens III. LIENS RELATIFS Lorsqu on crée des liens il faut indiquer le chemin du fichier. Si on se trouve dans le même répertoire, il suffit d indiquer le nom de la page. <a href="ficher.html">texte</a> Si le fichier se trouve dans un autre dossier, il faut indiquer le chemin d accès au fichier. En cas d arborescence descendante <a href="dossier/fichier.html">texte</a> En cas d arborescence montante <a href="../index.html">texte</a> Ici../ permet de remonter d un niveau dans l arborescence. En cas d arborescence à 2 niveaux <a href="../../index.html">texte</a> Pour aller d un fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il faut monter l arborescence pour redescendre. <a href="../dossier/fichier.html">texte</a> Ici../ permet de sortir du dossier en cours, puis il faut redescendre dans l arborescence et indiquer dans quel dossier on veut aller. IV. LIENS ABSOLUS Généralement lorsque l on cherche à placer un lien vers un site externe à celui qui est en cours de développement, il faut indiquer ce dernier dans sa version complète et conforme au protocole HTTP (ou autre). Le principe de création des liens absolus est le même que pour les liens relatifs. <a href=" V. liens internes à la page Les liens internes permettent de se déplacer à l intérieur d un même fichier html sans que le visiteur soit obligé de faire «scroller" la fenêtre du navigateur. L utilisateur va donc cliquer sur un lien et il sera amené vers la destination du lien interne. Pour cela deux étapes sont nécessaires : Définir la cible de destination du lien grace à l attribut name <a name="haut">texte</a> et associer ce même nom de destination au lien précédé d un diese. <a href="#haut">lien vers le haut de la page</a> Il n est pas nécessaire, dans ce cas précis, de mettre un texte ou une image, entre les balises d ouverture et de fermeture, mais le nom ne doit pas contenir d espaces, ni d accents, ni de caractères spéciaux. 22

23 06. Les liens VI. cas particulier, l attribut «MAIlto" Cas particulier parmis les attributs de la balise <a>. Il s agit d un lien de messagerie qui fait apparaître le client de messagerie du navigateur (Outlook Express pour IE par exemple). <a href="mailto:nom@url.com">contact</a> Pour prédéfinir l objet du mail vous pouvez rajouter?subject= au corps de l attibut... <a href="mailto:nom@url.com?subject=l objet de votre mail">contact</a> 23

Montrer encore