Internet 3

Contenu : HTML, public_html, composer de Mozilla.

Déroulement de la scéance

Blabla d'introduction sur le HTML, le WWW, W3C.
Remettre un coup sur la netiquette, "vous êtes responsable des infos qui sont dans votre page !!!!"
Structure et syntaxe d'un document HTML.
Faire écrire une page HTML à l'aide de Emacs, visualiser le résultat dans votre navigateur préféré.
a) Publication : copier la (ou les) page(s) HTML dans le répertoire public_html de votre compte.
b) Insister sur les problèmes de liens locaux !!! Attention au droit en lecture de votre répertoire public_html et de vos fichiers.
c) Visualiser votre page web via l'URL : www.enseirb.fr/~monlogin. Visualiser la page web du copain.
Montrer l'utilisation du Composer dans Mozilla, et oublier tout le reste sauf la validation...

Présentation de HTML

Le HTML ("HyperText Markup Language") est un système qui formalise l'écriture d'un document avec des balises de formatage indiquant la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Il permet, entre autre, la lecture de documents sur Internet à partir de machines différentes grâce au protocole HTTP, permettant d'accèder via le réseau à des documents repérés par une adresse unique, appelée URL.

Rappel : les paquets HTTP arrivent sur le port 80 et sont transmis au navigateur internet à partir duquel la page a été appelée.

On appelle World Wide Web (noté WWW) ou tout simplement Web (mot anglais signifiant toile) la "toile virtuelle" formée par les différents documents (appelés pour l'occasion pages web) liés entre-eux par des hyperliens. Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point central dans la navigation des visiteurs parmi les pages HTML à l'aide des liens hypertextes. Cet ensemble cohérent de pages web liées par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée site web.

Le Web est ainsi une énorme archive vivante composée d'une myriade de sites web proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vidéo, etc.

Les bases du HTML

Une page HTML se présente sous forme d'un simple fichier texte contenant des balises permettant de mettre en forme le texte, les images... Une balise est une commande (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>) par exemple "<H1>". Les balises HTML peuvent être uniques; la balise <br> représente par exemple un retour à la ligne. Les balises HTML peuvent également fonctionner par paire afin d'agir sur le texte qu'ils encadrent (la balise de fin est alors précédée d'un /). Ainsi les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent.

Remarque : Les balises ne sont pas sensibles à la casse, c'est-à-dire qu'on peut les écrire indifféremment en minuscules ou en majuscules. Toutefois, les standards evoluent, et le standard XHTML est plus strict: il exige des balises en minuscules. Il est donc preferable de prendre l'habitude de s'y conformer.

Un fichier HTML commence toujours par la balise <HTML> et finissant par la balise </HTML>. Elle contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page.

L'en-tête est délimité par les balises <HEAD> et </HEAD>
Le corps est délimité par les balises <BODY> et </BODY>.

Un exemple pour commencer !!!

Ouvrer un Emacs, et taper quelque chose comme çà.

<HTML>
    <HEAD>
        <TITLE> Le titre dans la barre du navigateur </TITLE>
       <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
         <META NAME="Author" CONTENT= "Aurélien Esnard">
         <META NAME="KeyWords" CONTENT=  "cours, HTML">
    </HEAD>
     <BODY>
        <H1> Le titre principal du document </H1>
        <H2> Un premier titre </H2>
        <P> Le premier paragraphe </P>
        <P> Le second paragraphe </P>
       <H2> Un deuxième titre </H2>
    </BODY>
</HTML>

Quelques balises et en route...

Les balises peuvent être réparties en 2 classes : celles qui modifient la structure de la page et celles qui modifient le style du texte. Les attributs servent à préciser le comportement d'une balise. Il s'utilise de la façon suivante :

<BALISES ATTRIBUT1="XXXXX" ATTRIBUT2="XXXX"> Texte </BALISE>

Les attributs suivants sont placés dans les balises de structure pour permettre une disposition plus précise des éléments HTML

les titres : <H1>, <H2>, <H3>, ..., <H6>
paragraphe : <P> mon paragraphe </P>
retour à la ligne : <BR>
ligne horizontale : <HR size=5 width=20% align=left>
texte préformaté : <PRE> mon texte </PRE>
liste numérotée : <OL> <LI> article 1 </LI> <LI> article 2 </LI> </OL>
liste à puce : même chose en replaçant OL par UL
lien hypertexte : <A href="http://www.commentcamarche.net"> Comment ça marche? </A>
les images : <IMG SRC="url/image.jpg" ALT="Texte remplaçant l'image">
mettre en gras : <B> en gras </B>
mettre en italique : <I>en italique </I>
Le tableau est encadré par les balises <TABLE> et </TABLE>. Le titre du tableau est encadrée par <CAPTION> </CAPTION> . Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau). Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau) . Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau)

Exemple de tableau :

<TABLE BORDER="1">         
  <CAPTION> Voici le titre du tableau </CAPTION>        
  <TR>       
    <TH> Titre A1 </TH> 
    <TH> Titre A2 </TH> 
    <TH> Titre A3 </TH> 
    <TH> Titre A4 </TH> 
  </TR>       
  <TR>       
    <TH> Titre B1 </TH> 
    <TD> Valeur B2 </TD> 
    <TD> Valeur B3 </TD> 
    <TD> Valeur B4 </TD> 
  </TR>       
</TABLE>

Pour plus de détail chercher sur Internet un site de référence W3C.

Liens hypertexte

Tout lien vers un autre document est appele lien hypertexte. Le comportement typique du navigateur, lorsque l'utilisateur clique sur un tel lien, est de charger le document auquel le lien fait reference.

La balise standard pour inserer un lien hypertexte est:

<a href="url-du-document">texte-a-afficher</a>

L'URL du document peut, grosso modo, etre soit locale (par exemple un chemin d'acces par rapport au fichier contenant le document; le separateur de repertoires est /, meme sur les systemes Windows ou c'est typiquement \ qui apparait), soit absolue et de la forme "http://machine.domaine/chemin/chemin/fichier.html".

L'adresse absolue de la page personnelle d'un utilisateur ENSEIRB dont le nom de login serait toto est:

http://www.enseirb.fr/~toto/

Validation d'un document HTML

La specification du langage HTML evolue avec le temps (il en existe plusieurs versions). Le site de reference a ce sujet est celui du World Wide Web Consortium. On y trouvera en particulier un validateur "en ligne" de documents HTML.

Le programme tidy permet egalement de "nettoyer" du code HTML plus ou moins mal fichu (par exemple celui produit par le module Composer de Mozilla). Il est disponible a l'ENSEIRB (/opt/jumble/bin/tidy).

Esnard Aurélien & Duchon Philippe