Quelques notions d'HTML

Une page HTML, c'est un simple fichier texte lu par votre navigateur.
Pour en créer une, il suffit
- d'ouvrir NotePad
- d'inscrire quelques lignes de code, par exemple :


<HTML>
<BODY>
Bonjour
</BODY>
</HTML> - puis d'enregistrer avec l'extension ".html" ou ".htm".
 
Le fichier peut alors être ouvert directement par le navigateur (Internet Explorer ou Netscape). On n'y lira que "Bonjour".
La balise <HTML>, fermée par </HTML> ouvre et ferme la feuille HTML.
La balise <BODY> délimite le corps du texte.
 
On ajoute généralement des balises <HEAD> et </HEAD>, qui délimitent une zone d'entête, où on peut notament insérer quelques lignes de code (JavaScript par exemple).
 
Quelques autres balises utiles : <BR> permet de passer à la ligne
<P> débute un paragraphe (fermé par </P>)
<A> définit une "ancre" que l'on peut nommer (pour y faire référence) : Par exemple  <A NAME="zaza">bonjour</A>   accroche sur le mot "bonjour" une ancre nommée "zaza", à laquelle on pourra faire référence. <A HREF="toto.html">bonsoir</A>   accroche au mot "bonsoir" un lien hypertexte pointant vers le fichier "toto.html".
<A HREF="#zaza">aller vers bonjour</A>   crée un lien hypertexte pointant sur l'ancre "zaza".
<FONT COLOR="red" SIZE=3>, suivi de </FONT>   permet de modifier la couleur et la taille de la police du texte compris entre les deux balises.
<B>,<I>, et <U> (associés à </B>, </I> et </U> permettent d'écrire en gras, italique ou souligné.
<DIR>, suivi de </DIR>   délimite un paragraphe en retrait.
<IMG SRC="image.gif"> permet d'insérer une image (de préférence au format .gif ou .jpg.
<SCRIPT>, suivi de </SCRIPT>   délimite un script. généralement placé dans la zone d'entête (pour étudier quelques rudiments de JavaScript, cliquer ici).
<TABLE>, suivi de </TABLE>   définit un tableau.
Les lignes sont indiquées par <TR> et </TR> et les cellules de chaque ligne par <TD> et </TD> :
Le code suivant : <TABLE BORDER>
<TR>
<TD>bonjour</TD><TD>salut</TD>
</TR>
<TR>
<TD>23</TD><TD>45</TD>
</TR>
</TABLE>
se traduit par :
bonjoursalut
2345
Dans chaque cellule, on peut aligner horizontalement à droite (align="right"), gauche (align="left"), au centre (align="center") ou justifier (align="justify"), et aligner verticalement en haut (valign="top"), au milieu (valign="middle") ou en bas (valign="bottom"). Par exemple <TD align="center" valign="bottom">.
Pour définir la largeur des cellules, on utilise WIDTH.
Pour éviter que les textes longs aillent à la ligne, on peut utiliser <TD NOWRAP>,
pour fixer la largeur des cellules (en coupant éventuellement le texte), on utilise <TABLE STYLE="table-layout:fixed" WIDTH=...>

On peut insérer des images de fond dans les cellules du tableau à l'aide de <TD BACKGROUND="imagetruc.gif"> :

bonjour
 		salut

23
45454546454

La balise <BGSOUND SRC="applaud.wav"> va lancer le fichier son applaud.wav à l'ouverture de la page html le contenant (loop="infinite" permet de jouer en boucle).
( cliquez ici pour ouvrir une page contenant du son).

META HTTP-EQUIV="Refresh"   inséré dans la zone "head" de la feuille, permet de raffraichir la page ou de la rediriger vers une autre page : <HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="0; URL=accueil.html">
</HEAD> va renvoyer le navigateur, dès l'ouverture (CONTENT="0...) vers la page "accueil.html".
<META HTTP-EQUIV="Pragma" content="no-cache"> empêche la mise en cache de la page.
Les formulaires :
La balise <FORM> définit un formulaire de saisie : par exemple <FORM ACTION="zaza.asp" METHOD="GET">
nom : <INPUT TYPE="text" NAME="nom"><BR>
<INPUT TYPE="Submit" NAME="envoi" VALUE="Envoi"> ...se traduira par :
nom :

<FORM ACTION="zaza.asp" METHOD="POST">
nom : <BR><SELECT NAME="nom" SIZE="4" MULTIPLE>
<OPTION VALUE="Zaza">Zaza
<OPTION VALUE="Nathalie">Nathalie
<OPTION VALUE="Amelie">Amelie
<OPTION VALUE="Sophie">Sophie
<OPTION VALUE="Isabelle" SELECTED>Isabelle
</SELECT><BR>
<INPUT TYPE="Submit" NAME="envoi" VALUE="Envoi">
</FORM> ...se traduira par : nom :

Voir les paragraphes sur JavaScript et sur l'ASP pour le traitement des données transmises par un formulaire.


Les frames :
Les cadres (frames) permettent de diviser une fenêtre en plusieurs sous-fenêtres.
Très utiles notamment pour maintenir visibles des entêtes et des menus, ils présentent l'inconvénient de ne pas être reconnus par les navigateurs les plus anciens, et d'être mal exploités par certains moteurs de recherche. En outre, l'ouverture d'une page d'un site isolée de ses frames ne permet pas à l'utilisateur de naviguer dans les autres parties du site.
La syntaxe est la suivante :
<FRAMESET> détermine un groupe de frames, <FRAME> définit chacun des frames.
ATTENTION, <FRAMESET> définit une fenêtre et ne se place pas à l'intérieur de balises <BODY>, mais les remplace. <FRAMESET ROWS=30%,70%">
<FRAME SRC="titre.html" NAME="frame_titre">
<FRAME SRC="accueil_xl.html" NAME="frame_texte">
</FRAMESET"> va donner une fenêtre séparée horizontalement en deux parties, l'une contenant la page titre.html et l'autre la page accueil_xl.html.
On peut également créer des sous-frames, par exemple : <FRAMESET ROWS="20%,80%">
<FRAME SRC="titre.html" NAME="frame_titre">
    <FRAMESET COLS="30%,70%">
    <FRAME SRC="menu_xl.html" NAME="frame_menu">
    <FRAME SRC="accueil_xl.html" NAME="frame_texte">
    </FRAMESET">
</FRAMESET"> (cliquer pour voir les frames).
Une autre forme de cadre intéressante, mais hélas pas non plus reconnue par tous les navigateurs, est le cadre flottant IFRAME qui permet d'afficher une fenêtre de n'importe quelle taille au milieu d'une page Web : <IFRAME SRC="macro_orgagif.html" HEIGHT="100" WIDTH="150" SCROLLING="NO" NAME="zaza">
</IFRAME> va donner :


On peut aussi utiliser des styles (incompatibles avec certains navigateurs anciens) pour améliorer notablement la présentation des pages HTML (cliquer ici).


Enfin, il faut noter que, aussi bien dans Word que dans Excel, on peut aisément enregistrer un document ou un tableau au format html grâce à la commande "Fichier / enregistrer au format html".
Si la commande n'est pas disponible sous Excel, cocher "Assistant Internet" dans Outils / Macros complémentaires.