Le titre

Le choix du titre
Ceci étant posé, toute page devrait avoir un titre, graphique, texte ou les deux, de préférence identique à celui du document, celui-ci peut être mis à gauche, au centre, ou à droite de l'écran, ce sont les seules possibilités de description de position actuelles du langage html (sans utiliser des solutions plus complexes avec des tables ou des frames par exemple), et cela devrait suffire pour le moment compte tenu de l'AVERTISSEMENT NO 3 et de votre inexpérience actuelle.

Contentez-vous pour le moment de faire déjà une ou deux pages simples et ne vous inquiétez pas, nous verrons plus tard comment les compliquer pour obtenir un résultat plus sophistiqué à la hauteur de votre génie créateur.


Avec du texte uniquement
On utilisera les marqueurs <H1> à <H6>, le chiffre déterminant la taille. La plus grande taille est donnée par H1, la taille normale (celle du texte "normal") par H3, et la plus petite par H6. Il faut encore savoir que rien d'autre ne peut figurer sur une ligne de titre et qu'un assez grand espace vertical est inséré de part et d'autre de celui-ci. Le rendu d'un titre dépend de toutes façons du navigateur utilisé. Voici un petit échantillon visuel pour le vôtre:

H1

H2

H3

H4

H5
H6
H6
H5

H4

H3

H2

H1

Ces marqueurs possèdent une option ALIGN="" avec RIGHT (droite), CENTER (centre) et LEFT (gauche), entre les guillemets.

Exemple: <H2 ALIGN="LEFT">Bienvenue sur ma page Web</H2>, donne:

Bienvenue sur ma page Web

Explications supplémentaires: on a choisi ici un titre de taille 2 (<H2>) aligné à gauche (ALIGN="LEFT"), d'une banalité écoeurante "Bienvenue sur ma page Web", et on indique la fin du titre avec le marqueur de fin identique à celui de début, mais précédé de "/" (pas besoin de mettre l'option avec le marqueur de fin: </H2 ALIGN="LEFT"> ou encore plus faux </H2 /ALIGN="LEFT">, vu que le titre se termine avec toutes ses options et c'est valable aussi pour tous les autres marqueurs). De plus, ALIGN="LEFT" est la valeur par défaut, <H2> aurait largement suffi dans ce cas précis.

NB: la taille en pixels et la fonte des caractères H1 à H6 dépend de la configuration de chaque navigateur, voir AVERTISSEMENT NO 3, pas la peine de mesurer la taille du titre chez vous pour aligner pile avec une éventuelle image...


Avec une image seulement (qu'elle soit superbe, ou aussi moche qu'ici)
Exemple: <CENTER><IMG SRC="pic/titre.gif" ALT="Bienvenue !"></CENTER>, donne:

Image centrée avec inscription: bienvenue sur ma page web

Achtung ! "Kolossal" finesse:

  • L'option ALT="xxx" du marqueur <IMG SRC=""> permet de décrire l'image pour les navigateurs non graphiques (et ceux à synthèse vocale des non-voyants) ou pour les gens qui ne veulent pas charger les images (chargement de la page plus rapide), ce texte s'affiche également dans une bulle quand on laisse le pointeur sur l'image.
  • Le marqueur <IMG SRC=""> ne permet pas de situer l'image horizontalement dans le document, il a fallu utiliser ici les marqueurs <CENTER> et </CENTER> pour la centrer, par contre il est possible de définir la façon dont l'image se place verticalement par rapport à du texte ou à une autre image comme nous le verrons plus loin.
  • Autre possibilité pour placer horizontalement quelque chose (en HTML 4.0 uniquement), l'utilisation du marqueur <DIV>, par exemple:
    <DIV ALIGN="RIGHT"><IMG SRC="pic1.gif"></DIV> placera l'image à droite de la page, les valeurs de l'option ALIGN sont les même que pour le titre texte ci-dessus, et en l'absence de positionnement, l'image ou les images se placeront dans le sens de la lecture (de gauche à droite pour la France et de Paris à Marseille dans le sens vertical).

NB: Les objets (images, textes, liens, etc...) se collent ensemble sur une même "ligne" horizontale tant qu'il reste de la place sur la "ligne".

Avec plusieurs images et du texte (les images sont volontairement tartes)
Exemple: <H2 ALIGN="CENTER"><IMG SRC="pic/titre1.gif" ALT="Logo1">Bienvenue
sur ma page Web<IMG SRC="pic/titre2.gif" ALT="Logo2"></H2>

Logo1 (boite de coke vide avec paille)Bienvenue sur ma page WebLogo2 (tête de beauf souriante)

Autres astuces: peut importe qu'une ligne trop longue soit coupée comme celle-ci (entre "Bienvenue" et "sur" dans l'exemple) car sans indication contraire tout est reformaté pour tenir dans toute la largeur disponible (de celui qui regarde), de même que plusieurs espaces sont totalement ignorés, mais il faut veiller à ne pas couper un nom de fichier ou un lien vers une autre page.

Si le texte est trop près du bord des images on peut y remédier en ajoutant un espace de part et d'autre du titre (il est inutile d'en mettre plus, seul un espace est respecté en absence de marqueur contraire), ou en ajoutant un espace (horizontal ou vertical) à une image avec les paramètres HSPACE="n" ou VSPACE="n" (n étant la valeur en pixels).

Pas la peine d'essayer d'aligner avec du texte (AVERTISSEMENT NO 3), par contre pour aligner des images avec d'autres images, pas de problème.

Par défaut tout est disposé verticalement sur cette ligne par rapport à la base des objets, on peut contrôler aussi l'alignement vertical grâce aux valeurs TOP (haut), MIDDLE (centre) et BOTTOM (bas) de l'option ALIGN (ne pas confondre avec l'alignement horizontal du texte).

Exemple par le centre: ...<IMG ALIGN="MIDDLE" SRC="pic/titre1.gif">Bienvenue<IMG ALIGN="MIDDLE" SRC="pic/titre2.gif">...

Toujours le même Logo1 Bienvenue sur ma page Web Encore l'image de la tête à claques

Mais si l'on à bien réussi à expliquer au navigateur qu'il devait utiliser le centre des images pour l'alignement, il n'existe en revanche pas d'option de ce genre pour le texte et c'est la base du texte qui est centrée sur le milieu des images, ce qui fait qu'avec un gros texte et des petites images le résultat n'est pas terrible (l'option TOP aligne le haut de l'image avec le haut du texte).

Pour les petits malins qui pensent qu'il suffit de rajouter un bord transparent à l'image ou changer la taille des caractères voir l' AVERTISSEMENT NO 3. Nous verrons plus loin comment éviter ce problème à l'aide de techniques plus complexes.


Quoi ? C'est tout ce que l'on peut faire ?
La beauté d'une page ne dépend pas que de la présentation, un superbe titre utilise tout simplement les mêmes techniques que ci-dessus, mais avec des graphismes 3D et des couleurs dignes de ce nom, et là, comme vous l'avez sûrement déjà remarqué, ce n'est pas vraiment mon domaine même si j'ai fait exprès de ne pas attirer constamment votre oeil avec des titres d'enfer.

Vous ne me croyez pas ? Comparez les deux exemples ci-dessous:

Ignoble cadre moche à vomir
Superbe cadre avec relief, wc et eau chaude


Ils utilisent pourtant tous les deux le même marqueur HTML, seul le contenu du fichier est différent...

Contrôle de la taille des images
Enfin une petite note concernant la taille des images.

Bien qu'il soit possible d'avoir des images de taille quelconque et de forcer un navigateur à les afficher avec une taille différente de leur taille réelle avec l'option appropriée, il vaut mieux éviter cela pour les raisons suivantes:

  • Le navigateur va perdre du temps à recalculer les images avant de les afficher.
  • Trop agrandir une petite image va la rendre "pixellisée" (pleine d'escaliers).
  • Envoyer des images trop grosses fera perdre inutilement du temps de transmission.

Un seul cas de figure permet un gain de temps: si une même image existe dans un document à des échelles différentes, par exemple en image de fond et en logo, pas la peine d'avoir deux images différentes en taille à transmettre, une seule transmission de la plus grosse suffira, et l'autre sera relue dans le cache et réduite.


Exemples de changement de taille
<IMG HEIGHT="50%" WIDTH="50%" SRC="pic/titre1.gif"> ou en pixels:
<IMG HEIGHT="40" WIDTH="300" SRC="pic/titre1.gif">
Mais attention au rapport hauteur/largeur, avec cette méthode, il faut calculer la taille d'un des cotés pour le respecter.

Accélération de la vitesse d'affichage de la page
A noter que le fait d'indiquer la taille réelle d'une image en pixels avec HEIGHT= (hauteur) et WIDTH= (largeur), permet selon les options de l'utilisateur, d'accélérer fortement le chargement de la page web, car le navigateur peut alors réserver la place nécessaire à l'image dans la page tout en affichant le texte. Commencer la lecture pendant que les images finissent de se charger est bien plus agréable que d'attendre bêtement devant une page vide.

Essayez donc autant que possible d'indiquer la taille réelle de vos images pour accélérer le chargement des pages.


A vous de jouer
Une retouche intensive de votre première page web avec ajout d'un titre conforme à vos ambitions s'impose, revenez plus tard.

RetourInfo Suite
Dernière mise à jour de cette page: 01/12/2001, visiteurs: depuis le 6 avril 2002