HTML : Francis Gagné

Faire votre propre page personnelle

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Principale base
Voici la principale base pour faire une telle page :
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Cette balise permet d'afficher les accents sans problème et permettre de ne pas utiliser les caractères spéciaux.
<TITLE>Titre du fichier qui apparaît en haut de votre navigateur. </TITLE>
Ex.: HTML : * Page d'aide pour débutant.... ou HTML : Francis Gagné
<META NAME="robots" content="noindex">
Cette balise qui semblerait standard pour empêcher que la page ayant cela, ne soit pas indexé dans les moteurs de recherche.
<META NAME="Keywords" CONTENT="winzip, html, ...">
Mots clés pour moteur de recherche
<META NAME="Description" CONTENT="Explication de Winzip, ... ">
Ce qui sera vu dans les moteurs de recherche
<META content=revealTrans(Duration=1.0,transition=1) http-equiv=Page-Enter>
Si vous désirez mettre de l'effet pour les utilisateurs d'Internet Explorer (uniquement) qui entre dans la page.
<META HTTP-EQUIV="Refresh" CONTENT="7; URL=fichier.htm">
* Si vous voulez que votre page se rafraîchisse.
</HEAD>
<BODY>
Ici les données de votre page personnelle (TEXTE, IMAGE, etc.)
</BODY>
</HTML>
Pour vous donner une idée c'est quoi, faite dans votre navigateur Affichage (Netscape ; Source du document) (Explorer ; Source) de la barre de menu.

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Corps de la page
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
BGCOLOR = fond sans image
BACKGROUND = fond avec image Ex.: BACKGROUND="fond.jpg"
TEXT = Texte normalement écrit
LINK = Lien non visité
VLINK = Lien Visité

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Image
Image normale :

<IMG SRC="sourit.gif" BORDER=0 WIDTH=39 HEIGHT=37 ALT="Sourire">
ALT="Sourire" signifie que si l'image n'est pas tout a fait charger et bien sourrire apparaîtra

Attention à l'utilisation de ALT :
- Internet Explorer 3.0 lit jusqu'à 79 caractères et pas plus.
- Internet Explorer 4.0 mets le commentaire ALT avec 66 caractères sur chaque ligne pour former un rectangle ou un carré.
- Netscape 4.0 lit en une seule ligne dont une personne en 640 x 480 lira les 139 caractères
- Netscape 4.0 lit en une seule ligne dont une personne en 800 x 600 lira les 171 caractères

ALIGN= MIDDLE (image centrée par rapport au texte) ou TOP (image en bas par rapport au texte)
Image en coordonnée :
<MAP NAME="Coordonne">
<AREA SHAPE=RECT COORDS="x1,y1,x2,y2" HREF="special.htm">
<AREA SHAPE=CIRCLE COORDS="x,y,r" HREF="index.htm">
<AREA SHAPE=POLY COORDS="xa,ya,xb,yb,xc,yc,xa,ya" HREF="index.htm">
</MAP>
<IMG SRC="fond.jpg" BORDER=2 WIDTH=246 HEIGHT=129 USEMAP="#Coordonne">
Rectangle : x1,y1 est le coin supérieur gauche et x2,y2 est le coin inférieur droit pour le lien.
Cercle : x,y est le point au centre du lien dont r est le rayon en pixel.
Poly : permet de faire un triangle dont le dernier x,y doit être le même que le premier pour fermer le triangle ou lien polyforme.
Pour les coordonnée en pixel vous pouvez vous servir de Paintbrush ou Paint (Win95) pour voir les coordonnées des points. Soyez patient pour faire ce genre d'image cartésien.
P.S.: Si vous n'avez pas d'utilitaire de dessin pour définir la taille, vous pouvez utiliser votre navigateur (Netscape) pour le savoir (en ouvrant un fichier en tout format au lieu de HTML). Ex.: En cliquant sur le visage vous verrez en haut de votre navigateur les dimensions de l'image 39x37 pixel. Normalement, c'est la largeur qui est donnée et ensuite la hauteur
Sites d'utilitaire de dessin plein de programmes ou Graphics Workshop

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Texte <CENTER>Centré le texte</CENTER>Centré 2 fois Retour de chariot ou (Return en terme de dactylographie) = 
Gras Gras
Italique Italique
Souligné Souligné
<STRIKE>Barré</STRIKE>~~Barré~~
Mettre le texte en _indice
Mettre le texte en^exposant
<H3>

En-tête (1 le plus large et 6 le plus petit)

</H3>
<BLINK>Clignoté le texte</BLINK> Clignote (Netscape)

<PRE>Ceci tien compte 
des espaces et des           retours de       chariot</PRE>

Modifier la grosseur de l'écriture d'un point à un autre La valeur est entre -7 et 7 
Couleur hexadécimale Ex.:FF2400 
Caractères spéciaux pour les navigateurs qui ne sont pas au point
Voici des exemples de puce

Test

<OL> * Pour avoir les avoir en lettre (a,A) ou en chiffre romain (i,I) remplacer par <OL TYPE=a,A,i,I>
<LI>Test
</OL>

Autre puce

<UL TYPE=CIRCLE> vous pouvez mettre à la place DISC et SQUARE
<LI>Autre puce
</UL>

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Lien
<A HREF="mailto:nom_d'usager@fournisseur">Vous pouvez insérer un dessin à la place du texte</A>

Pour mettre un sujet par défaut Ajouter ?subject=Salut Francis après votre E-mail
Ouvrir une nouvelle fenêtre vers un lien
<A HREF="comment.htm" TARGET="_blank">Nouvelle fenêtre</A>
Pour afficher dans la barre de statut
<A HREF="index.htm"onMouseOver="window.status='Barre de statut'; return true">Pour afficher dans la barre de statut</A>
Lien sur la même page dont vous retourner au début de cette page.
Ex.: Comme cette commande
<A NAME=debut> en-dessous de <Body> et pour aller directe c'est <A HREF="index.htm#debut">Début</A>

Base de la page, Corps de la page, Image, Les formatages de texte, Lien, Spécialisé

Spécialisé votre page

Sélection de lien (boîte)
Insertion de son
Formulaire pour commentaire
Tableau
Cadre

N.B.: Si vous travailler en traitement de texte (Bloc-notes - Démarrer, Programmes, Accessoires), enregistrer le fichier comme type : Tout format (*.*) nom du fichier à 8 caractères.extension (htm ou html) pour ne pas avoir de problème. Exemple : index.html
Vous pouvez également utiliser Netscape Composer de Netscape

Retour vers ressources