|
|
Présentation typographique
Premier exemple N°1 de base que je vous propose :
A-
Nous allons maintenant examiner l'opération consistant à border
son image avec du texte. Pour commencer j'ai choisi de vous présenter
cet exemple et vous allez en découvrir les tags correspondants.
B- Vous devez comme toujours à l'aide
de ces tags donner des instructions au navigateur pour qu'il réalise
correctement ce placement, et notez que ce moyen d'encadrer une image s'il
offre une visualisation très agréable ne doit pas être
utilisé sans discernement. Etant donné qu'il peut "écraser"
la présentation générale du contenu de votre site veillez
à structurer vos pages en conséquence.
Si le langage HTML ne permet pas encore d'exécuter des mises en page
comme à l'aide d'un logiciel de PAO (Programmation assistée
par ordinateur) du type Pagemaker ou Power Point parmi d'autres, il tend à
s'en rapprocher et déjà des éditeurs de programmation
HTML ont intégré la fonction "justify" qui permet enfin d'aligner
nos fins de ligne.
Exemple N°2 avec l'image à droite, mais le texte est "justifié". (même texte, faites pas attention)
A-
Nous allons maintenant examiner l'opération consistant à
border son image avec du texte. Pour commencer j'ai choisi de vous présenter
cet exemple et vous allez en découvrir les tags correspondants.B- Vous devez comme toujours à l'aide de ces tags donner des instructions au navigateur pour qu'il réalise correctement ce placement, et notez que ce moyen d'encadrer une image s'il offre une visualisation très agréable ne doit pas être utilisé sans discernement. Etant donné qu'il peut "écraser" la présentation générale du contenu de votre site veillez à structurer vos pages en conséquence.
Si le langage HTML ne permet pas encore d'exécuter des mises en page comme à l'aide d'un logiciel de PAO (Programmation assistée par ordinateur) du type Pagemaker ou Power Point parmi d'autres, il tend à s'en rapprocher et déjà des éditeurs de programmation HTML ont intégré la fonction "justify" qui permet enfin d'aligner nos fins de ligne.
Ci-dessus, le schéma avec les attributs, dont détail :
- l'image est la tour Eiffel, avec le logotype : alt="test"
- width et height sont les attributs permettant de définir la dimension de l'image afin d'accélérer la navigation, et correspondent à des pixels : widht=33 et height=67
- border est l'attribut qui entoure le cadre d'une épaisseur variable (toujours exprimée en pixels) si l'image sert de support à un lien. Si Border=0 aucun cadre n'apparaît ce qui ne permet pas de savoir qu'il existe ce lien. Mais les surfeurs sont maintenant entraînés !
- hspace est l'attribut, toujours en pixels, qui
fixe l'espacement entre le bord latéral de l'image et le texte. (point
B du premier schéma)
A noter que vous allez retrouver un espacement identique entre le
coté latéral gauche de l'image et le bord de votre
page, ici symbolisé par un trait bleu marine.
- vspace est l'attribut qui en pixels, va fixer l'espacement entre la partie supérieure de l'image et le texte qui commence au point A du premier schéma.
- align=left sert à choisir le coté
de la page où allez afficher l'image. Dans l'exemple N°1
c'est left (gauche) qui a été retenu.
Je vous laisse le soin de remplacer left (gauche) par right (droite) et vous
constatez l'effet désastreux obtenu.
Par contre avec du texte "justifié" ce qui est maintenant possible voyez exemple N°2.
<DIV STYLE="text-align: justify ; "> entre <HEAD> et </HEAD>
( placé pour un exercice : retour sur la page images de Claris Home Page..cliquez... ici )
Voici maintenant condensé l'ensemble des tags (IMG) et attributs qui permettent d'obtenir la présentation réalisée en-tête de cette page :
<IMG SRC="images/v102.gif" < ALT="tour" WIDTH=33 HEIGHT=67 ALIGN=left hspace=40 vspace=10>
Image comme lien hypertexte
Vous pouvez aussi vous servir d'une image comme lien hypertexte, soit vers un site externe (sera vu ultérieurement) soit vers un endroit précis de votre site soit sur cette même page ou une autre (revoir si besoin la page monsite 3 paragraphe 2.
Ne pas confondre avec une "imagemaps" qui est une image à zones sensibles.
Votre image sera alors entourée d'un cadre bleu pour signifier qu'elle est cliquable, et voici ce que vous obtenez ("test" est l'ancre d'arrivée) :
<A HREF="pageperso2.htm#test">
<IMG SRC="images/v141.gif" ALT="test" WIDTH=42
HEIGHT=40 ALIGN=middle>
cliquez sur moi pour tester ce lien.
Vous pouvez aussi dans certains cas ne pas souhaiter conserver ce cadre bleu, comme pour les flèches vertes de mes pages, qui sont suffisamment explicites sans ça. Ajoutez simplement : border=0
<A HREF="monsite2.htm#test">
<IMG SRC="images/v167.gif" ALT="test" WIDTH=42 HEIGHT=40 BORDER=0
ALIGN=middle>
moi je suis le neveu éloigné d'un papa Setter ?
Vos pages sont déjà bien avancées, mais avant de procéder aux essais initiaux en local et dans la foulée de monter sur le Web pour voir, il faut mettre un peu de couleur, ce qui s'appelle un fond d'écran opération qui fait l'objet du paragraphe suivant.
|
|
