Et le reste...

Trop compliqué ?
Houlà ! tout ça pour un simple titre, quelle horreur, le reste doit être encore plus compliqué !

Meuh non, le plus gros a été expliqué ci-dessus, à part les cartes, les tables, les frames, les formulaires, les listes et quelques bricoles, il ne reste plus que des choses assez simples à connaître (en HTML pur), comme passer à la ligne suivante volontairement, changer de paragraphe, changer la taille, la couleur ou l'aspect des mots et des lettres, faire de beaux traits horizontaux, mettre des images, créer des liens, etc... (la routine habituelle quoi).

De plus, vous n'êtes pas obligé de tout savoir et de tout utiliser, et si vous ne comprenez pas quelque chose, il y a deux raisons possibles:

  1. Mes explications sont confuses.
  2. Votre cas est GRAVE.

Si votre cas est grave, pas la peine de m'en informer, je n'ai malheureusement pas de solution à ce problème, par contre, si mes explications sont insuffisantes ou embrouillées, dites-le moi, afin que je les corrige (et dites moi surtout où, sinon je vous range dans les cas graves).


Retour sur image
Un mot encore concernant les images, il peut y en avoir de trois types:
  1. Opaques (normales donc, et bêtement carrées ou rectangulaires).
  2. Transparentes (habituellement le bord de l'image, mais on peut faire le contraire).
  3. Les images animées, elles peuvent être également des 2 types ci-dessus (ne pas confondre avec les animations complètes, genre quicktime, fli/flc, avi, mpeg, shockwave, flash ou autres).

Seules les images au format GIF ou PNG peuvent être transparentes (ce qui permet de créer des formes spéciales) ou animées mais le format GIF est limité à 256 couleurs, pour avoir des images de qualité il faut utiliser soit le format PNG, soit le JPEG sans perte (régler la qualité à 100% ou la compression à 0 %, dans le programme de dessin ou de traitement d'image). Autre possibilité interressante des images GIF/PNG/JPEG, il existe un mode entrelacé permettant l'affichage de l'image au fur et à mesure de sa réception (l'image devient de plus en plus nette).

Il vaut mieux éviter d'autres formats d'images plus exotiques, style BMP ou PICT, que tout le monde ne peut pas forcément lire et qui possèdent en plus d'autres inconvénients...

Bien sûr il n'y a pas que le texte et les images, il y a aussi la musique, les sons, les vidéos (sonores ou non), les scripts (CGI-BIN), la 3D (VRML), le postscript et dérivé (PDF), les formats privés et semi-privés à la mords-moi-le-neutron (souvent (in)utiles qu'une seule fois) qui nécessitent de nombreux et encombrants "plugs-in", et même la programmation avec le langage java ou javascript, plus récent encore, les layers (couches), sans parler de tout ce qui n'existe pas encore et qui va voir le jour...

Un peu de patience et continuons d'abord notre page en HTML.


Séparateur horizontal
Un petit trait horizontal en dessous de votre superbe titre, ça vous dirait ?

Il y a deux possibilités intelligentes:

<HR>Sur toute la largeur
<CENTER><HR WIDTH="50%"></CENTER>Sur une partie (50%) mais centrée
<CENTER><HR WIDTH="250"></CENTER>Sur une partie (250 pixels) mais centrée

Vous avez trouvé l'erreur ?

Selon l'AVERTISSEMENT NO 3, 250 pixels va donner des choses différentes en fonction de la configuration de chaque utilisateur, tandis que 50% de la largeur c'est toujours la moitié de la fenêtre (mais pas forcément celle de la taille du texte ou de l'image en dessus ou en dessous, il faut toujours bien réfléchir à ce que l'on veut obtenir à chaque fois, et dans tous les cas de figure).

Encore pire (mais qui a heureusement tendance à disparaître): <HR WIDTH="640"> laissera un bord droit vide et moche sur grand écran (pourquoi diable ne pas le laisser continuer, celui qui est en 640x480 ne verra de toutes façons pas plus loin).

Vous vous demandez peut-être la raison de ces remarques ? Et bien voici la réponse, une belle page web doit avoir une belle mise en page, et il n'est pas trop tôt pour prendre de bonnes habitudes et éviter les horreurs que l'on peut voir un peu partout.

Notez qu'il n'y a pas de marqueur </HR> pour une raison évidente, le trait horizontal est un séparateur, et même s'il n'occupe pas toute la largeur de la fenêtre, on ne peut rien mettre d'autre sur la même "ligne", comme pour un titre avec <Hx>.

Les options ALIGN="" et SIZE="" peuvent être également utilisées (alignement gauche/centre/droite et épaisseur du trait).

Note pour les non-voyants, ce trait est en général rendu comme une image en relief d'un trait et possède une certaine épaisseur, changer cette épaisseur ne contribue qu'à rendre ce trait moche à faire peur, en mettre plusieurs les uns sous les autres, qu'à faire vomir.

NB: pour l'équilibre on peut aussi tirer une ligne en dessus du titre...


Attention au texte !
Du texte maintenant ?

Ben il n'y a qu'à l'écrire, en ISO-LATIN1 de préférence pour que les accents soient correctement visibles par tout le monde, sinon c'est plutôt illisible sur des machines ou dans des langues différentes de la vôtre (oui ça existe).

NB: ISO-LATIN1 n'est pas une fonte, c'est une correspondance entre les codes ascii et les caractères affichés, ce qui démontre encore les mauvais choix (si besoin était) des solutions sur compatibles PC, (sur Mac dans ce cas précis ce n'est pas mieux, sur unix/linux/amiga (par exemple), pas de problème).

Si vous z'avez pas cette possibilité il y a plusieurs solutions, ne pas mettre d'accents, utiliser les codes "&code;" (par exemple "&agrave;" pour "à") ou utiliser "&#nnn;" où nnn est le code ascii du caractère accentué (en ISO-LATIN1 bien sûr), cette dernière solution est pour masochistes avertis seulement, à moins que votre éditeur puisse enregistrer des macros instructions.

Si vous n'aimez pas vous casser la tête et que votre éditeur/traitement de texte vous le permet, tapez les accents "normaux" de votre machine et avant de sauver le texte faites faire un remplacement des accents par une macro préalablement définie, ou utilisez un programme de conversion sur le fichier html, ou encore pour les gogos ou les condannés à perpetuité sous windows, essayez de sauver en format html (je crois que word le fait depuis la version 8) et supprimez ensuite les marqueurs superflus (c'est pas ça qui manque...) avec notepad ou wordpad en mode texte pour récupérer votre prose en iso-latin1.

Comme déjà expliqué, il suffit de taper le texte au kilomètre, c'est le navigateur qui se charge de le mettre en page.

Si vous êtes têtu, tapez le texte comme vous le voulez et relisez-le, vous verrez bien ! Si vous êtes curieux ou têtu et flemmard changez tout simplement la taille horizontale de cette fenêtre et observez ce qui se passe avec le texte affiché dans cette page.


Reste du document
Quoi ? Des enjolivures ? De la couleur ? Une autre fonte ? Petit gourmand va ! On verra ça plus tard...

Contrôle des lignes
Deux bricoles indispensables pour aérer le texte:
  • On peut forcer la fin d'une ligne avec le marqueur <BR>, comme <HR> il n'a pas de marqueur de fin, non plus, puisque c'est une fin en soi.
  • On peut forcer un nouveau paragraphe avec le marqueur <P> et même changer l'alignement du paragraphe avec les options d'alignement (mais uniquement en HTML 4.0):

Exemple: <P ALIGN="RIGHT"> (ou LEFT/CENTER/JUSTIFY droite/gauche/centre/aligné).

Au travail !
Le moment est venu de remplir votre première page avec du "vrai" texte iso-latin1 (ou sans accents), grâce à tout ce que vous avez appris ici ou ailleurs.

RetourInfo Suite

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