Fabrication « à la main » d'une page HTML
On commence par un exercice rébarbatif
mais indispensable avant de passer à PHP :
la fabrication « à la main »
d'une page HTML bien formée
contenant :
- un gros titre (apparaissant en haut de page ET
dans la barre supérieure de la fenêtre
du navigateur),
- un fond orange (ou rose ... au choix),
- un tableau (centré sur la page)
de 3 lignes et 2 colonnes mettant
en correspondance un objet (1ère colonne)
et sa description (2ème colonne),
- un lien en bas de page vers la page d'accueil
de l'incontournable site web de l'INRP.
N.B. : Ceux qui auraient des trous de mémoire
trouveront plus bas un rappel des principales balises HTML ...
Sauvegardez votre page HTML dans C:\Program Files\EasyPHP\www\
sous le nom "page.html"
et la visualiser en ouvrant votre navigateur sur
http://127.0.0.1/page.html
ou sur http://localhost/page.html
ou sur http://nom_de_ma_machine/page.html
si vous connaissez le nom de votre machine.
Vous pouvez aussi y accéder par :
clic droit sur l'applet EasyPhp (en bas à droite)
+ Web local.
Il vous suffit ensuite de compléter l'URL
(celle qui apparaît dans la boîte "Adresse"
de votre navigateur) en lui rajoutant le nom de votre fichier.
N.B. : Une fois que votre page est en ligne, n'importe
qui peut venir la regarder (à condition qu'il
connaisse le nom ou l'adresse IP de votre machine).
Les principales balises du langage HTML
Balises <HTML> et <BODY> :
Toute page HTML bien formée doit contenir
au moins les balises (ouvrantes ET fermantes)
<HTML> et
<BODY>.
Voici une page HTML vide :
<HTML>
<BODY>
</BODY>
</HTML>
|
Balises <HEAD> et <TITLE> :
La balise <TITLE>
permet de faire apparaître un titre
dans la barre de fenêtre du navigateur
(la barre bleue en haut de la fenêtre sous Windows).
Elle doit obligatoirement être à
l'intérieur d'une balise
<HEAD>
qui doit être elle-même
placée juste avant la balise
<BODY>.
<HTML>
<HEAD>
<TITLE>
Titre apparaissant dans la barre de fenêtre du navigateur
</TITLE>
</HEAD>
<BODY>
Texte apparaissant dans la page.
</BODY>
</HTML>
|
Balises <H1>, <H2>, <P>
et <BR> :
<HTML>
<HEAD>
<TITLE>Du blabla sur fond bleu</TITLE>
</HEAD>
<BODY BGCOLOR="#99AACC">
<H1>Du blabla sur fond bleu</H1>
<H2>Titre de la 1ère section
(un peu moins gros que le titre ci-dessus)</H2>
<P>
Bla bla bla bla bla bla bla bla
bla bla bla bla. Bla bla bla.
<BR>
Bla bla bla bla bla bla.
</P>
<H2>Titre de la 2ème section</H2>
...
</BODY>
</HTML>
|
N.B. : L'attribut BGCOLOR="#99AACC"
de la balise <BODY>
permets de choisir comme couleur de fond de page
la couleur de code RVB #99AACC
(99, AA
et CC
sont les niveaux de rouge, de vert et de bleu,
chaque niveau étant une valeur comprise
entre 0 et 255 représentée sous
forme hexadécimale).
Exemples de codes RVB : le noir = #000000,
le blanc = #FFFFFF,
le rouge = #FF0000,
le bleu = #0000FF,
le jaune = #FFFF00, etc ...
Balises <B> et <I> (gras et italiques) :
<HTML>
<BODY>
Exemple d'utilisation de <B>la balise <B></B>.<BR>
Exemple d'utilisation de <I>la balise <I></I>.<BR>
</BODY>
</HTML>
|
Balise <A> (lien hyper-texte) :
Avec une URL absolue :
<HTML>
<BODY>
Voici un
<A HREF="http://ftp.inrp.fr/">
lien vers la page d'accueil du serveur FTP de l'INRP</A>.
</BODY>
</HTML>
|
Avec une URL relative :
<HTML>
<BODY>
Voici un
<A HREF="html-ex4.html">lien vers une page HTML</A>
située dans le même répertoire.
</BODY>
</HTML>
|
Balises <TABLE>, <TR> et <TD>
(pour la fabrication d'un tableau) :
Un tableau se construit à l'aide des balises
<TABLE>,
<TR> (table row)
et <TD> (table data).
Exemple de tableau à 2 lignes et 3 colonnes :
<HTML>
<BODY>
<TABLE BORDER="4" CELLSPACING="6">
<TR>
<TD>gauche 1</TD>
<TD>milieu 1</TD>
<TD>droite 1</TD>
</TR>
<TR>
<TD>gauche 2</TD>
<TD>milieu 2</TD>
<TD>droite 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
N.B. : Les attributs BORDER="4"
et CELLSPACING="6"
de la balise <TABLE>
règlent respectivement la grosseur du cadre du tableau
et l'espacement entre les cellules (les cases).
