Une page web comment c'est fait ?
Les pages que l'on consulte sur Internet sont en fait de simples documents texte que le navigateur traduit graphiquement (les images sont d'autres documents stock�s � c�t� du texte).
Pour �tre compris par le navigateur, le texte est en fait parsem� de balises. Par exemple
Ceci est du <B>texte en gras<B>.
donnera dans le navigateur :
Ceci est du texte en gras.
La balise X s'ouvre donc par <X> et se ferme par </X> (cependant certaines balises, comme IMG, ne se ferment pas).
Et chaque balise a un impact sur la mise en forme du texte : la balise B permet de mettre du texte en gras.
L'ensemble des balises forme le langage HTML (HyperText Markup Language).
Pour faire une page web, il suffit donc de prendre un �diteur de texte (par exemple, notepad sous windows) et d'y taper des balises et du contenu. On enregistre ensuite le fichier sous l'appellation machin.html et on peut le visualiser avec n'importe quel navigateur.
Structure d'un document HTML
Tout le texte d'une page web doit �tre � l'int�rieur d'une balise HTML. Ainsi, un document html commence par <HTML> et finit par </HTML>.
Ensuite, � l'int�rieur de cette balise, on distingue l'en-t�te, qui contient des informations n'apparaissant pas directement, et le corps, qui renferme le contenu proprement dit.
L'en-t�te s'�crit dans une balise HEAD, le corps dans une balise BODY.
Les balises les plus utilis�es
Les balises de l'en-t�te
Les balises apparaissant dans l'en-t�te permettent de pr�ciser le titre de la page (qui appara�tra dans la barre de titre de la fen�tre du navigateur, et dans les bookmarks), mais aussi des mots-cl�s pour faciliter la tache des moteurs de recherche, ou encore la table de caract�res utilis�s (europ�en, russe, japonais, ...).
Nous nous limiterons au titre dans le cadre de cette formation, qui se place dans une balise TITLE.
Au d�but, les en-t�tes seront donc aussi simples que
<HEAD> <TITLE>Ceci est le titre de la page !</TITLE> </HEAD>
Les balises du corps
Dans le corps on peut distinguer les balises au niveau bloc (paragraphe normal, titre de section, ...) des balises au niveau texte (couleur, gras, ...).
Les balises au niveau bloc
La balise P permet de faire un paragraphe normal.
Par exemple celui ci-dessus est obtenu par
<P>La balise P permet de faire un paragraphe normal.</P>
La balise H1 permet de faire un gros titre de section, H2 un titre un peu plus petit, et ainsi de suite jusqu'� H6.
La balise UL (Unordered List) permet de faire une liste, dont chaque �l�ment est dans une balise LI (List Item). Un exemple valant mieux qu'un long discours, voici le html :
<UL> <LI>1er �l�ment</LI> <LI>2�me �l�ment</LI> </UL>et le r�sultat :
- 1er �l�ment
- 2�me �l�ment
La balise TABLE permet de fabriquer un tableau. � l'int�rieur, chaque ligne du tableau est dans une balise TR et chaque case ensuite dans une balise TD. Encore une fois, un petit exemple clarifiera les choses :
<TABLE border="2"> <TR><TD>Col. 1</TD><TD>Col.2</TD><TD>Col.3</TD></TR> <TR align="center"><TD>a</TD><TD>b</TD><TD>c</TD></TR> </TABLE>
| Col. 1 | Col.2 | Col.3 |
| a | b | c |
On introduit de plus ici les attributs de balise : par exemple border pour TABLE et align pour TR ; ils s'�crivent avant le > de la balise ouvrante et permettent d'apporter des pr�cisions sur la mise en forme.
Enfin la balise HR trace un trait horizontal :
Les balises au niveau texte
Nous avons d�j� vu la balise B qui permet de mettre du texte en gras.
De m�me citons I qui permet de faire de l'italique (on pourra lui pr�f�rer EM qui fait de l'italique quand elle est dans du texte droit, et du texte droit quand elle est dans de l'italique), et U qui donne du texte soulign�.
Enfin on peut modifier la taille, la couleur du texte ou encore la police (jeu de caract�res utilis�) gr�ce � la balise FONT et � ses attributs :
<FONT size="+2" color="red" face="arial">Du gros texte, rouge et sans empattement.</FONT>Du gros texte, rouge et sans empattement.
(L'effet du size="+2" n'est pas visible � cause des feuilles de style utilis�es ici, mais sur une page normale il n'y aura aucun probl�me).
Il existe aussi une balise qui ne se ferme pas, et permet de passer � la ligne sans cr�er un nouveau paragraphe.
C'est BR.
La balise IMG ne se ferme pas non plus ; elle permet d'ins�rer une image. Le fichier image est sp�cifi� par l'attribut src. Il faut aussi sp�cifier l'attribut alt : c'est le texte qui sera affich� en attendant que l'image soit charg�e.
<IMG src="machin.gif" alt="Photo d'un machin">
Enfin, l'une des notions clefs sur Internet est celle d'hyperlien : du texte sur lequel on clique pour sauter � une autre page.
Un hyperlien se place dans une balise A, et la destination est pr�cis�e par l'attribut href :
Voici un lien vers le moteur de recherche <A href="http://www.google.com">Google</A>.Voici un lien vers le moteur de recherche Google.
Comment montrer ses pages au monde entier
Au CTI
On met ses pages html dans un r�pertoire nomm� public_html, et on donne les permissions en lecture aux pages, et en ex�cution aux r�pertoires.
Au serveur des �l�ves
Cela permet d'�conomiser l'espace disponible sur son compte au CTI, et d'avoir acc�s � des extension (PHP, CGI, ...).
S'adresser au serveur des �l�ves (http://campus.ecp.fr) pour plus de pr�cisions.
Quelques r�gles � respecter
- ne pas faire de pages trop grosses (�viter les images �normes) ;
- ne pas oublier l'attribut
altpour les images ; - ne pas �crire en gris sur fond jaune ;
- tester sa page en l'ouvrant avec diff�rents navigateurs (au moins Internet Explorer et Netscape Navigator).
Pour plus d'infos...
- regarder le source des pages sur Internet ;
- lire la norme HTML, disponible sur le site du W3C (http://www.w3c.org).