CONCEPTION D UN SITE WEB

Transcription

1 1 Définir ses objectifs CONCEPTION D UN SITE WEB Quelque soit la vocation de votre site, il est primordial de mener une réflexion pour déterminer les attentes de vos visiteurs. En fonction du public ciblé, il est important de définir ses objectifs. Site statique ou site dynamique? Le choix est avant tout technologique, mais il engage la vie et la durée de vie d'un site. Si aujourd'hui la plupart des nouveaux sites professionnels qui se créent sont dynamiques, l'alternative statique reste néanmoins présente. Un aspect important lors de la conception d'un site est de déterminer quelles sont les parties qui devront être mises à jour au fil du temps. De même, toute partie du site qui sollicitera une interaction avec le visiteur fera l'objet d'un traitement particulier. Il s'agit des pages dynamiques Qu est-ce qu un site statique? On entend par site statique, non pas un site sans mouvements ou sans animations, mais un site visible telle qu'il a été conçu. Le site Web est constitué de pages HTML prédéfinies, créées une fois pour toutes à l'aide d'un éditeur HTML. Le contenu des pages est fixe. Ces pages peuvent présenter toute forme de contenu, textes, animations flash, images, musique, vidéo etc... mais elles sont toujours présentées de la même façon. o Avantages Pas de contraintes particulières concernant l hébergement, les sites statiques représentent la forme élémentaire du Net à laquelle les hébergeurs sont habitués. Coût de revient peu élevé. Il suffit d avoir un nom de domaine et un hébergement. o Inconvénients Les mises à jour demandent un minimum de compétences techniques (connaissance du langage HTML et des éditeurs). Peut tout à fait convenir pour la création d un site comportant peu de pages mais pas pour un site volumineux dont la mise à jour est fréquente car celle-ci sera lourde à gérer. Qu est-ce qu un site dynamique? Les pages dynamiques permettent de présenter les informations de différentes manières selon l'interaction avec le visiteur. Les pages sont alors construites "à la volée" grâce à une programmation conçue par le webmaster. Le contenu est issu d'une base de données en fonction de critères établis par l'internaute puis mis en page en temps réel. C'est le cas par exemple d'un site d'e-commerce: présentation des articles par thèmes, couleurs, prix etc... C'est également le cas des blogs et des forums où les visiteurs peuvent participer au contenu du site.

2 2 o Avantages Les mises à jour sont facilitées, tant sur le fond que sur la forme, grâce aux outils d'administration. La formule est beaucoup plus adaptée en cas de mises à jour très fréquentes. Les fonctionnalités sont plus avancées grâce à l'utilisation de bases de données (moteur de recherche, interactivité, personnalisation...). o Inconvénients La mise en place demande plus de compétences techniques en fonction du CMS choisi. Le coût de développement initial est en général plus élevé, sauf si le site est particulièrement volumineux. Mais ce surcoût est amorti en raison des économies réalisées sur la mise à jour. En revanche, une refonte plus globale que des simples mises à jour sera souvent plus coûteuse : elle nécessite de reparamétrer l'outil de gestion de contenus. Quels sont les avantages et les inconvénients des deux méthodes? L'utilisation des pages dynamiques est plus souple pour l'évolution du site mais nécessite plus de temps de travail pour la programmation. En opposition, les pages statiques sont plus "figées" mais plus simples à réaliser. Site statique avec le langage HTML Qu est-ce que le HTML? HTML (HyperText Markup Language) est un langage de description simple utilisé pour créer des documents hypertexte pour le Web. A l aide mots-clés logiques et même compréhensibles, tout programme de lecture adapté sait quand le texte doit par exemple être affiché en gras. HTML ne permet pas de définir de façon stricte l'apparence d'une page mais avec la version reposant sur l'ascii (texte seul), il est lisible avec toutes les plates formes (Unix, Windows, Mac). De plus, la présentation est très dépendante du browser utilisé. Comme tout langage, il est en constante évolution. HTML est simple mais demande de la rigueur et de l attention dans l écriture des documents afin que ceux-ci s affichent correctement quelque soit le contexte ou le browser utilisé. Qu est-ce que l'hypertexte? C est un système qui relie par des liens activables des éléments d'information. On rencontre maintenant des documents hypertexte dans divers environnements : sur les CD-ROM où ils sont réalisés avec des logiciels comme Director ou Acrobat dans la documentation en ligne sur les ordinateurs (réalisée avec Framemaker par exemple) dans la présentation assistée par ordinateur (PowerPoint, ) sur l'internet ou à l'aide du langage HTML on peut fabriquer de tels documents.

3 3 La rapidité (un simple clic souris) de déplacement à l'intérieur du document et la facilité de retour en arrière (mémoire) permettent une conception nouvelle de la documentation : les pages sont courtes (tenant sur un écran d'ordinateur), allant à l'essentiel, et on expliquera aussi souvent que nécessaire un mot ou un concept en lui attribuant un lien vers une autre partie du document ou vers un autre document. La première partie du document ressemblera donc plus à une table des matières où chacun des titres de chapitre sera un lien vers le chapitre lui-même. Le protocole HTTP Le cadre d'exécution du Web et de son langage HTML est celui d'un modèle client-serveur véhiculé sur un réseau informatique comme le réseau Internet. Il est basé sur un cycle requête/réponse. On utilise le terme «client» pour parler de la machine sur laquelle s exécute le navigateur et de «serveur» pour la machine qui renvoie les documents voulus o Le client : Logiciel de consultation s'exécutant sur tous les types de plate-forme (Macintosh, Unix, PC). Il dialogue avec un serveur selon un protocole spécifique : HTTP (HyperText Transfert Protocol), qui va lui fournir l'information structurée en code HTML. C'est ce client qui a en charge l'exécution de ce code (on dit aussi langage source) et qui produira l'affichage du document. o Le Serveur : Ce logiciel est en permanence à l'écoute des requêtes que vont formuler les clients, la machine qui l'accueille doit être toujours disponible et présente sur le

4 4 réseau. La puissance de ce type d'ordinateur permet d'accepter simultanément un grand nombre de requêtes. o Le dialogue client-serveur : La connexion entre le client et le serveur d une présentation Web n est pas maintenue en permanence, ceci pour éviter une surcharge trop importante des réseaux. Chaque fichier d une présentation fait l objet d une requête du client transmise au serveur. Prenons l exemple d une page d accueil comportant, outre son propre fichier, trois images, c est quatre requêtes qui seront ainsi envoyées au serveur. Le visiteur peut donc percevoir des «interruptions» dans l affichage de sa page, plus ou moins importantes selon la charge du serveur, du réseau internet et de la taille des fichiers à télécharger. o Les cookies : Lorsque le navigateur désire afficher une page, il envoie une commande au serveur, commande qui est récupérée par le serveur, lequel renvoie la page toujours suivant le protocole HTTP. Lorsque le navigateur veut afficher une page il accomplit les tâches suivantes : - Il ouvre une connexion réseau (en pratique il ouvre une socket) - Il envoie la commande GET pour obtenir la page - Il récupère les données que lui envoie le serveur - Il ferme la connexion. Ainsi à chaque page qu il veut afficher, il est obligé d effectuer cette même séquence. Cela à pour conséquence que s il veut afficher une page 2 à la suite d une page 1, le serveur n a aucune chance de savoir que c est le même navigateur qui veut faire cette opération. A chaque fois, on repart de zéro. Prenons un exemple : vous utilisez une messagerie web type Yahoo. La page 1 est constituée par la page de login (avec le login et le mot de passe à rentrer), la page 2 par la liste des messages. D après ce qui a été dit précédemment lorsque le serveur devra afficher la liste des messages, il ne saura pas que c est l utilisateur untel qui a entré ses coordonnées sur la page 1, et ne pourra donc pas afficher les dits messages. Le HTTP est incapable de gérer la notion de session. Une session est l intervalle de temps qui sépare une connexion d une déconnexion. Lors d une session, le navigateur (donc l utilisateur) est reconnu par le serveur de manière unique. Ainsi dans le cas de la messagerie web, si untel se connecte, il ouvre une session : quand il parcourt les pages suivantes, il est reconnu comme étant untel, et le serveur peut lui afficher les messages qui lui sont associés, ses paramètres, bref ses données en général. D une manière générale, tous les sites qui demandent une identification au démarrage doivent gérer la notion de session. Le HTTP est dit stateless (sans état), car le serveur ne garde pas la mémoire des états précédents et est incapable d associer une série d opérations à un navigateur particulier, et donc à un utilisateur donné. Il faut donc ajouter quelque chose au http et c est le cookie.

5 5 Un cookie est un petit fichier au format Txt enregistré sur le micro-ordinateur d'un internaute à l'occasion de sa visite sur un site Web. En principe, ce fichier est utilisé pour permettre de reconnaître l'internaute (en réalité son ordinateur) à l'occasion de la consultation d'autres pages web ou d'une nouvelle visite sur le site. Les cookies sont parfois utilisés par les éditeurs de solutions de mesure de trafic de type site-centric pour connaître le nombre de machines différentes qui ont visité le site sur une période donnée. Ils permettent aussi d'éviter à l'internaute d'avoir à s'identifier chaque fois qu'il visite un site pour accéder à des services qui nécessitent une inscription préalable. Les cookies font partie des spécifications du protocole HTTP. Le protocole HTTP permet d'échanger des messages entre le serveur et le client à l'aide de requêtes HTTP et de réponses HTTP. Les requêtes et réponses HTTP contiennent des en-têtes permettant d'envoyer des informations particulières de façon bilatérale. Un de ces en-têtes est réservé à l'écriture de fichiers sur le disque: les cookies. Lorsqu'un client se connecte à un site (donc au serveur), les cookies pour le domaine et le chemin spécifié sont automatiquement envoyés dans les en-têtes de la requête HTTP. Le protocole d adressage des documents : l URL Interconnecter des documents sur toute la planète demande un moyen unique de les identifier sur le réseau Internet. L'adresse d'un document, ou URL (Uniform Resource Locator), est composée des éléments suivants : le protocole d'échange entre le client et le serveur l'adresse Internet du serveur qui diffuse les documents. Cette adresse est unique sur tout le réseau. l'arborescence des répertoires (le chemin) qui conduit au document. le nom du document avec l'extension HTML ou HTM ex : Adresse du serveur/ répertoire/ sous-répertoire / nom du fichier Lorsqu'il n'y a pas de nom de ficher précisé, on arrivera sur le fichier par défaut du serveur, appelé Home-page, qui a pour nom «index.htm» ou html. Comment écrire du langage HTML? Les outils à notre disposition pour créer ses pages Web sont multiples et plusieurs démarches sont ainsi possibles, démarche que l on choisira en fonction de ses moyens et du temps imparti. On peut écrire du code HTML avec : o Les éditeurs de texte : On peut écrire du langage xhtml au moyen d un simple éditeur de texte ASCII, comme le Notepad de Windows ou Simple Text sous Mac. Ceci nécessitera bien sûr pour le concepteur de connaître l ensemble des commandes HTML et techniques associées et d écrire manuellement la totalité de son document sans

6 6 aucune assistance. Méthode ardue mais aussi la plus souple car elle est sous le contrôle complet de son concepteur. o Les éditeurs de balises HTML : Le concepteur se contente de sélectionner dans un menu la balise souhaitée puis de compléter dans le texte via une boite de dialogue la donnée à mettre en forme. L éditeur se charge de placer automatiquement la ou les balises nécessaires. L interface est simplement une page de codes, avec à la demande l affichage de la page dans un navigateur externe. Il est à noter que pour une bonne utilisation il est tout de même nécessaire de connaître les balises HTML. Exemples : Homesite, Webexpert. o Les éditeurs HTML WYSIWYG: Le concepteur conçoit sa page de manière interactive et essentiellement graphique à l aide d une série d outils permettant l insertion de textes, de graphiques, de tableaux, de liens.les balises HTML sont générées automatiquement par l éditeur. Exemples : Golive, Dreamweaver, Kompozer, Bluegriffon.. o Les convertisseurs HTML : Le concepteur utilise dans ce cas son traitement de texte habituel pour la mise en page de son document. Grâce à un utilitaire de conversion, son document peut être converti au format HTML lors de l enregistrement du fichier. Il est à noter que cette possibilité est à éviter, le code HTML ainsi généré n étant pas standard mais plutôt propriétaire (Word par exemple), l affichage dans les navigateurs risque de n être pas correct. o Les outils de génération dynamique HTML : Les outils de génération dynamique HTML appelé CMS (Content Management System) comme Drupal ou Jimdo sont des Systèmes de Publication pour l Internet. Il s agit d un ensemble de fichiers, installés sur votre compte Web, qui vous permettent de bénéficier d un certain nombre d automatismes : gérer un site à plusieurs, mettre en page vos articles sans avoir à taper de HTML, modifier très facilement la structure de votre site... Avec le même logiciel qui sert à visiter un site (Microsoft Explorer, Mozilla, Opera...), ces outils permettent de fabriquer et de tenir un site à jour, grâce à une interface très simple d utilisation. Intérêt : ils sont distribués sous licence libre. Inconvénient : leur mise en place nécessite un minimum de connaissance en programmation.

7 7 Comment fonctionne le langage HTML? Le langage HTML permet de décrire la structure d'un document disponible sur le Web. Cela est obtenu en encadrant chacune des différentes structures du texte par une paire de balises, une au début et une autre à la fin. Ces balises seront bien sûr invisibles au moment de l'affichage du document. o Les balises Dans HTML, les balises sont délimitées par les signes < et >. Un texte balisé aura donc cette apparence : <balise>texte affecté par la balise</balise> La fermeture de la balise est toujours obligatoire. o Les attributs de balise Certaines balises peuvent admettre des attributs, chacun pouvant avoir une valeur. Le premier attribut est séparé de la balise par un espace, ainsi que les attributs entre eux. Si l'attribut doit prendre une valeur elle est spécifiée après le signe=suivant l'attribut. Ex : <p align="center > Structuration du document HTML Tous les documents commenceront par la balise <HTML> et se termineront par la balise </HTML>. <HEAD> désigne le titre du document généralement inclus dans une zone de prologue ou d'en-tête. <TITLE> texte qui apparaît dans la zone titre du browser, ce titre ne doit pas être négligé car outre un caractère informatif, c'est ce texte qui sera stocké dans le fichier BookMark que gère le browser. Tout le reste du document va résider entre <BODY> et </BODY>. Des extensions permettent de compléter l'utilisation de cette balise. Voici la structure minimale que doit posséder tout le document HTML. L'indentation n'est pas obligatoire mais fortement conseillée afin de faciliter la maintenance et la lecture du code source. Les browsers, éxécutant le code HTML, ne tiennent pas compte des retours à la ligne. <HTML> <HEAD> <TITLE>Bienvenue</TITLE> </HEAD> <BODY> document </BODY> </HTML>

8 8 L enregistrement d un fichier HTML Les URL ne peuvent pas contenir n'importe quel caractères. Sont admis : les lettres (a à z et A à Z, sans accent ni cédille, ni ligature, etc.), les chiffres (0 à 9), le tiret (-), le point (.) et le souligné (_). Les caractères non admis, sont remplacés, normalement par le client, soit en plus (+) pour l'espace soit en un code consistant en un signe pourcent (%) suivi du code hexadécimal à deux chiffres du signe remplacé (ex.: %E9 pour é). En général la casse (majuscule/minuscule) compte, contrairement à ce qui est en usage sous Windows ou MacOS. Ainsi musee.html et Musee.HTML peuvent désigner des fichiers différents. De plus certains serveurs, notamment ceux sous Linux, sont dit «key sensitive» et ne supportent que les minuscules. Les noms doivent donc être standardisés et toujours en minuscules. Il est recommandé de choisir un nom compréhensible et facilement repérable. Les balises HTML o Les balises d entête Ces commandes se mettent dans le couple de balises <HEAD> </HEAD> Elles donnent des informations générales sur toute la page. La balise META <META> donne à votre document des informations concernant les relations de la page avec le monde extérieur et non sa présentation et qui seront lues par le serveur. Ces informations sont généralement votre nom (NAME) le nom de l'auteur (AUTHOR), le contenu (CONTENT), une directive HTTP-EQUIV qui prend souvent la valeur Expires, Keywords, La directive Expires est utilisée par la plupart des navigateurs pour donner une date à partir de laquelle la page ne doit plus être conservée dans le cache de votre logiciel mais bien rechargée sur le serveur à chaque passage de la page. La directive META sert également à donner la liste des mots-clés du document par l'emploi du mot réservé Keywords. Ex d un site sur le vin : 1. <META name="author" content=" 2. <META name="description" content="le site de référence des vins français" 3. <META http-equiv="expires" content="monday, 01-janv-05 16:26:32 GMT"> 4. <META name="keywords" content="vin, vins, touraine, bordeaux, val de loire, bourgogne, château, wine, french wine"> La balise TITLE

9 9 La balise <TITLE> permet d affecter un titre à votre page. Celui-ci sera généralement affiché dans la barre de titre du navigateur. Si des caractères accentués figurent dans ce titre, ils devront être codés à l aide d entités de caractères. Ex : <TITLE>Frenchwine Les vins de bordeaux</title> Les balises de division Le formatage d'une page commence généralement par le choix et l'usage d'en-têtes prédéterminés qui s'échelonnent entre H1 et H6 (niveaux). La commande H1 est la plus grosse disponible et la H6 est la plus petite. Les commandes Hx comprennent un choix de taille, le caractère gras et un retour de paragraphe. <H1>Titre de niveau 1</H1> <H2>Titre de niveau 2 </H2> Les balises H1 à H6 peuvent comporter un attribut align=left/center/right permettant l'alignement du texte à gauche, au centre ou à droite. <BR />Les browsers traitent le texte au kilomètre dans la largeur de leur fenêtre et ignorent le découpage en ligne tel qu'il existe dans le fichier source. C'est à l'auteur de provoquer le passage à la ligne. <P>provoque le passage au paragraphe suivant avec un espace. Il peut avoir comme attribut align=center/left/right/justify On utilise le caractère pour forcer une suite de caractères espacés (espace insécable) ou une ligne vide. Les polices de caractères <FONT>permet d'intervenir sur un groupe de caractères et a comme attribut : size=n, permet de spécifier 7 tailles de polices (la valeur par défaut est 3) color="#rrggbb" permet de donner une couleur aux caractères. Face="Police1, police2" permet d'intervenir sur le choix de la police. Ex : <FONT SIZE=2 face="arial, Helvetica" color="#ff0000">texte affecté par balise</font> Les balises de mise en forme Ces commandes permettent de mettre des parties de texte dans un format donné. Sans attribut, le texte apparaît normalement. On préfère ne pas utiliser le souligné qui est directement associé à la notion de lien. <strong> affiche en gras </strong> <em> affiche en italique </em> <U> affiche en souligné</u> <TT>affichage type machine à écrire</tt>

10 10 <SUB> indice< /SUB> <SUP>exposant< /SUP> Exemple de combinaison : <strong><em>gras et italique</em></strong> Les balises de mise en page Ces balises permettent de faire une action ponctuelle là où elles apparaissent, sans effet sur la suite du document. <HR> est une balise de division graphique qui provoque un trait sur toute la longueur. Elle peut avoir les attributs suivants : size=n donne une épaisseur exprimée en pixels width=n donne la longueur du trait (en pixels ou en pourcentage) align=left/center/right gère l'alignement du trait noshade le trait n'a pas d'ombre ex : <HR WIDTH=50% size=2 align=center noshade> <BR> est une marque de fin de ligne sans saut de paragraphe. Le couple de balises : <DIV align="left/center/right"> </DIV> permet de justifier plusieurs objets dans une page HTML à droite, au centre ou à gauche. Les balises de définition Ces commandes permettent de donner des listes de plusieurs types. o Listes ordonnées Permet de donner une liste précédée d'un numéro s'incrémentant automatiquement. <OL> <LI>Texte 1 <LI> Texte 2 </ol> La balise peut prendre les arguments suivants : <OL type=a/a/i/i/1 start=nb> o Listes non ordonnées Permet de donner une liste précédée d'une puce <UL> <LI>texte 1 <LI>texte 2 </UL> Elle a comme attribut :

11 11 <UL type=disc/circle/square> Les listes peuvent être emboitées en niveaux. <UL type=circle> <LI>Niveau 1 <UL type=square> <LI>Niveau 2 <LI>Niveau 2 </UL> <LI>Niveau1 </UL> Les indentations de paragraphes L emploi d une balise <UL> vide (sans éléments LI) permet une indentation sur le côté gauche. En imbriquant plusieurs éléments <UL> on peut augmenter l importance du retrait. Fond de page, couleur du texte Les pages HTML utilisent les fonds d'écran et des textures de toutes sortes. Vous pouvez assigner les attributs suivants à la balise <BODY> Background="nom du fichier " Bgcolor=couleur, pour définir la couleur du fond Text=couleur, pour définir la couleur du texte Link=couleur, pour définir la couleur des URL non visités Vlink=couleur pour définir la couleur des URL visités Alink=couleur, pour définir la couleur des URL lorsque l'on clique dessus. La représentation des couleurs Il existe deux moyens de spécifier les couleurs : soit par un nom conventionnel de couleur (red, blue, yellow.) soit par une valeur RGB (#FFFFFF, #F080FF ). Cette dernière est représentée par un mélange des trois composantes rouge, verte et bleue. Les valeurs attribuées à ces composantes sont comprises entre 0 et 255 et sont notées en hexadecimal (entre 0x00 et 0xFF). Le rouge pur sera par exemple représenté par 0XFF0000 (seule la couleur rouge a une valeur différente de 0)., et le noir par 0X (les trois composantes sont absentes). On peut ainsi représenter environ 16 millions de couleurs. Dans la pratique du web, on en utilise que 216 qui réalise un meilleur compromis entre l encombrement des fichiers d images et les possibilités d affichage de la plupart des écrans couleur.

12 12 L insertion des images Les images sont au format GIF, PNG ou JPEG et sont intégrées dans le document par la balise <IMG>. Cette balise sera toujours complétée par l'attribut SRC qui permet de donner l'adresse du fichier graphique. <IMG SRC="nom du fichier"> o Associer un texte à une image On déclare un texte dit "de rechange" avec l'attribut alt et cela offre deux avantages : - Si le visiteur désactive le chargement des images, il pourra quand même deviner le sens de l'image - Vous pouvez par ce biais fournir une légende à une image lorsque le pointeur de la souris passe au-dessus de cette image o Précisez la taille de l'image au navigateur En précisant la taille de l'image au navigateur, celui-ci charge plus rapidement votre page. En effet, il n'a pas à la recalculer et, si jamais le visiteur a désactivé le chargement des images, la mise en page ne sera pas perturbée. Ces dimensions correspondent à la taille en pixels de l'image. Width=valeur height=valeur o Ajouter une bordure à l'image Avec l'attribut border vous pouvez entourer l'image d'une bordure. L'attribut border prend une valeur de 1 à x qui exprime la largeur de cette bordure entourant l'image. L attribut Border donne l épaisseur de trait de marque d URL autour de l image. Si l on veut le désactiver, il faut mettre la valeur Border=0. o Les formats d images Le GIF Le GIF 89a (Graphical Interexchange Format) est un format dédié à l'affichage écran. Il a des caractéristiques très spécifiques : 72 dpi en 256 couleurs maximum. Il inclut une compression et comprend 3 options :

13 13 - Le GIF entrelacé L'image est enregistrée en deux parties qui s'afficheront l'une après l'autre. Cela permet à l'utilisateur de voir rapidement une première partie de l'image. - le GIF transparent : Il consiste à choisir une couleur parmi les 256. Celle-ci sera considérée comme une couleur transparente et ne s'affichera pas. Une Image avec cette couleur transparente permet de faire un habillage dans la page. - Le GIF animé Il s'agit d"une succession d'images fixes qui crééent une animation. Les images encapsulées vont s'afficher les unes après les autres. Il est possible de régler le temps d'affichage entre chaque image ainsi que de créer un affichage en boucle. Le JPEG Il s'agit d'un format de compression utilisé pour les images. Lorsque l'image s'affiche sur l'écran de l'utilisateur, il y a décompression de l'image. Le PNG Il s agit d un format de compression comprenant le 8 bits et le 24 bits, sans perte de qualité. N est cependant pas reconnu dans les anciennes versions de navigateurs. L insertion d un lien hypertexte Une zone active, obtenue avec la balise <a> peut correspondre à un caractère, un mot, un groupe de mots, une image, une portion d'image. Principe : associer à cette zone active l'url du document qui se substitue au document affiché. Cette adresse peut être un document différent, mais aussi un endroit précis dans le document. Ses attributs principaux sont : href : Permet d'indiquer la source du document (relative ou absolue) - target : Permet de définir la source d'un cadre comme document (dans la cas d'une frame) - title : Permet de spécifier une description du lien (identique à l'attribut ALT pour une image et uniquement avec Internet Explorer) Les différentes ressources pointées par un lien peuvent être : un fichier HTML une image, un film une adresse

14 14 Il existe quatre types de liens : Les liens internes Ceux-ci portent sur des liens pointant vers une autre page de votre site. La syntaxe sera alors la suivante : <a href= nom.htm >Cliquez ici </a> Les liens externes On parle de lien externe dès lors que l on veut pointer sur un site extérieur. <a href= >Cliquez ici </a> On peut également utiliser les liens externes pour proposer le téléchargement d un fichier (.exe ou.zip) <a href= fichier.zip >Téléchargez le fichier en cliquant ici</a> Les liens vers une boite mail Vous pouvez créer un lien pour que la messagerie paramètrée par défaut du visiteur se lance automatiquement. <a href= mailto :nom@provider.com >cliquez ici</a> Les ancres Les ancres permettent de se déplacer à l'intérieur d'un fichier HTML, sans que le visiteur soit obligé de faire "scroller" la fenêtre. Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre. Pour cela deux étapes sont nécessaires : Définir la cible d'un lien (l'ancre) et associer ce même lien à cette ancre. Définir la cible : <A NAME="nom_signet"> désigne une zone non cliquable sans attributs visuels</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 (le nom ne doit pas contenir ni d'espaces, ni d'accents, ni de caractères spéciaux). Pointer vers la cible : HREF ancre de départ vers un lien externe <A HREF="#nom_signet">cliquez ici</a> Une ancre peut également se situer dans une page et le lien vers cette ancre dans une autre page. HREF ancre de départ vers un lien spécifique d'un lien interne <A HREF="nom.htm"#signet>cliquez ici</a>