Cours prise en main HTML - PDF

1
CONCEPTION D’UN SITE WEB
Définir ses objectifs
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
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
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
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
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 :
•
•
•
•
ex :
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
http://www.paris.fr/musees/musee_carnavalet/index.html
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
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
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
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="www.frenchwine.com">
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
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 &nbsp; 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
<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
<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 0X000000 (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
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
- 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 E-MAIL
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=’’http://www.yahoo.fr’’>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 e-mail pour que la messagerie paramètrée par défaut du visiteur
se lance automatiquement.
<a href=’’mailto :[email protected]’’>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>