La présentation qui suit ne se substitue pas à un vrai cours
d'HTML. Vous n'y trouverez que des explications rapides sur les
mots-clés, les instructions, ...
Elle est supposée vous familiariser avec HTML. Elle s'applique
surtout pour des débutants.
Pour une étude plus conséquente sur ce langage, un logiciel
sera bientôt disponible dans la rubrique Logithèque
de la page principale.
Toutefois, en ce qui concerne des propositions de création de
pages Web ou demande d'explications succintes, vous pouvez
m'envoyer un e-Mail
Les navigateurs sont des logiciels traduisant le langage HTML en document physique. Ils sont utilisés aussi pour 'naviguer' (vous auriez pu le deviner vous-même) sur le Web. Avec les nouvelles versions, il est possible de créer, envoyer et recevoir des messages de vos amis internautes. Autrement dit, ce sont des outils indispensables pour "surfer" sur le Web.
Plusieurs éditeurs sont présents sur le marché, mais les plus répandus sont :
Remarque : les éditeurs proposent des versions
Shareware de leur navigateurs. Bien sûr, ce sont des versions
anciennes, mais l'intérêt est ... leur gratuité ! Vous aurez
accès aux sharewares de Netscape (il est conseillé de
télécharger la version Netscape Gold), en
cliquant sur l'icône suivante :
L'ancètre d'Internet a été développé en tout premier lieu par l'armée américaine. En effet, l'objectif était de sécuriser les moyens de communication en organisant le système en réseau, écartant le risque de destruction d'un central unique avec toutes les conséquences imaginables. Ce réseau, divisionné en "noeuds", est capable de subsister, même en cas de perte d'un ou plusieurs noeuds.
Petit à petit, Internet s'est démocratisé et aujourd'hui est accessible à tous. Développé essentiellement en Amérique du Nord, il trouve un intérêt certain chez les Européens, qui rattrapent leur retard...
En ce qui concerne son organisation, Internet est on ne peut plus flou... En effet, étant structuré par de nombreux réseaux autonomes, Internet n'est régit par aucune organisation centrale. Cependant, il existe des organisations internationales collaborant entre elles afin de fiabiliser et moderniser la communication inter-réseaux. On peut citer, en exemple, l'IAB (Internet Activities Board).
Présentation d'HTML
HTML (HyperText Markup Language)
est un langage universel. Il peut être écrit à partir du
simple Bloc-Notes de Windows95.
En effet, tout document HTML est enregistré en ASCII. Par
conséquent, aucun caractère codé n'est requis pour programmer
en HTML. Ce type de document est écrit avec du texte standard,
ce qui rend la programmation facile et accessible à tous.
Ceci dit, un document HTML a une structure de base, à laquelle il faut obligatoirement se soumettre. Les tags inscrits en lettres majuscules constituent le corps de votre document.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML
3.0//EN//">
<HTML>
<HEAD>
<TITLE>
Titre de votre page
</TITLE>
</HEAD>
<BODY>
Informations de votre page (utilisation des Tags
)
</BODY>
</HTML>
| <B>texte</B> | le mot "texte" apparaît en gras |
| <I>texte</I> | le mot "texte" apparaît en italique |
| <U>texte</U> | le mot "texte" apparaît en souligné |
| <S>texte</S> | le mot "texte" apparaît |
| <BIG>texte</BIG> | le mot "texte" apparaît en plus grand |
| <SMALL>texte</SMALL> | le mot "texte" apparaît en plus petit |
| <SUB>texte</SUB> | le mot "texte" apparaît en indice |
| <SUP>texte</SUP> | le mot "texte" apparaît en exposant |
| <H1>texte</H1> | le mot "texte" apparaît en taille maximale |
| <H6>texte</H6> | le mot "texte" apparaît en taille minimale |
| <EM>texte</EM> | le mot "texte" est mis en valeur |
| <CODE>texte</CODE> | le mot "texte" apparaît en police "machine à écrire" |
| <PRE>texte</PRE> | le mot "texte" est préformaté |
| <DIV ALIGN=CENTER>texte</DIV> | le mot "texte" est centré |
| <DIV ALIGN=LEFT>texte</DIV> | le mot "texte" est aligné à gauche |
| <DIV ALIGN=RIGHT>texte</DIV> | le mot "texte" est aligné à droite |
| <BASEFONT SIZE=1> | ce tag modifie la taille (de 1 à 7) du texte standard |
| <BR> | ce tag génère un saut de ligne |
| <NOBR> | ce tag désactive les sauts de ligne |
| <HR> | ce tag trace une ligne horizontale de séparation |
| <BODY BACKGROUND=fichier_image> | ce tag applique une image d'arrière-plan à votre page Web |
| <FONT COLOR=BLUE>texte</FONT> | le mot "texte" est écrit en bleu |
| <BLINK>texte</BLINK> | le mot "texte" |
| <P>texte</P> | ce tag définit le mot "texte" en paragraphe |
| <LH>titre</LH> | ce tag définit un titre de liste |
| <OL>texte<LI>liste</OL> | ces tags affichent une liste numérotée |
| <UL>texte<LI>liste</UL> | ces tags affichent une liste non numérotée |
| <MENU>liste</MENU> | ce tag introduit une liste de sélection |
| <DIR>liste</DIR> | ce tag introduit une liste de dossiers |
| <DL><DT>titre<DD>explication</DD></DT></DL> | ces tags introduisent une liste de définition |
| <TABLE>options&texte</TABLE> | ce tag crée un tableau |
| <CAPTION>titre</CAPTION> | ce tag définit le titre d'un tableau |
| <TR>option&texte</TR> | ce tag définit une ligne d'un tableau |
| <TD>texte</TD> | ce tag définit le contenu d'une cellule d'un tableau |
| <TH>texte</TH> | ce tag définit le contenu écrit en gras d'une cellule d'un tableau |
| <IMG SRC="image.gif ou jpg"> | ce tag insère une image |
| <FRAMESET>instructions</FRAMESET> | ce tag crée le fractionnement d'une fenêtre en plus petites |
| <FRAME>instructions</FRAME> | ce tag définit le contenu d'un Frame |
Les hyperliens locaux sont des références à divers parties d'un document HTML. En cliquant dessus, la partie du document relative à l'hyperlien sélectionné est affichée à l'écran.
Concrètement, un tel lien est susceptible d'être utilisé pour une table des matières. En cliquant sur une section, celle-ci est immédiatement affichée. Il suffit de définir le point de départ du lien et sa cible. Les deux points sont définis par l'instruction : <A>...</A>.
Exemple :
Toutefois, vous remarquerez que les points de départ ont un style différent... Lorsque vous déplacer la souris dessus, normalement, le pointeur se transforme en une main.
Utiliser les hyperliens relatifs est conseillé pour des documents d'une grande ampleur. Dans ce cas, il est intéressant de les fractionner en plusieurs autres documents de façon à améliorer l'ergonomie générale.
Pour ce faire, il faut déclarer, dans le document actif, une adresse ayant pour cible un autre document. La déclaration est sensiblement identique à celle utilisée par les hyperliens locaux.
Exemple :
Si vous souhaitez référencer un paragraphe cible dans le document cible, alors il faut utiliser le symbole '#' déjà usité dans les hyperliens locaux.
Exemple :
Les hyperliens absolus ont la particularité d'activer un site Internet à partir d'un autre site. Ils contiennent donc une adresse URL (Uniform Resource Locator) faisant référence à une autre page Web. La déclaration est principalement identique à celle des hyperliens déjà étudiés ci-dessus.
Exemple : <A HREF="http://www.mygale.org/09/thmaes">Page maison de Thierry</A>
Hyperliens vers e-Mail, FTP, Newsgroups
En général, un hyperlien
e-Mail est utilisé pour envoyer du courrier à l'auteur de
la page que vous consultez. De même, que pour vos propres pages,
il est conseillé de toujours laisser la possibilité à un
visiteur de vous écrire. Cela rend votre page plus
professionnelle.
La déclaration se fait grâce à l'instruction : mailto:mon_compte@serveur. L'exemple suivant vous permet de m'envoyer un courrier.
Exemple : <A HREF="mailto:thierry.maes@hol.fr">e-Mail à Thierry</A>
Un hyperlien
FTP transmet des informations d'une machine (serveur)
à une autre machine locale (client). Entre autres, un FTP
est utilisé pour les téléchargements de votre ordinateur sur
un serveur publiant vos pages. L'instruction est : ftp://...
Exemple : <A HREF="ftp://visiteur@ftp.serveur/répertoire/nom_compte>Télécharger</A>
Les Newsgroups sont
des groupes de discussion dans lequel tout utilisateur peut
communiquer avec d'autres internautes. Il est possible de
déclarer des hyperliens vers des Newsgroups dans vos propres
pages HTML. L'instruction est : news:...
Exemple : <A HREF="news:comp.infos.www.discuss.html>Newsgroups</A>
Une liste numérotée représente une série d'étapes dont la première occurence est souvent à 1. Le tag <OL>...</OL> est utilisé pour les déclarations de listes numérotées. OL signifie Ordered List. Mais pour être effective, <OL> doit obligatoirement contenir le tag <LI> (List Item) qui génère les numéros.
Exemple : Création de la liste numérotée suivante : 1. Manger 2. Faire du sport
...
<OL>
<LI>Manger
<LI>Faire du sport
</OL>
...
Vous avez aussi la possibilité d'afficher des symboles au lieu de numéros. Ce type de liste est appelée liste non numérotée. Le tag requis est <UL>...</UL>. Avec ce tag, <LI> peut s'écrire avec des options afin d'afficher un certain type de symbole. L'instruction <LI TYPE=SQUARE> affiche un carré plein. Pour afficher un cercle vide, utiliser l'option CIRCLE. Sans options <LI> affiche par défaut un cercle plein.
Une liste de sélection est une liste dans laquelle l'utilisateur peut faire un choix. En général, la déclaration d'une liste de sélection se fait gràce au tag <MENU>...</MENU>. A l'intérieur du tag, vous saisirez exactement les mêmes instructions que pour les listes numérotées et non numérotées.
Exemple : Création de la liste numérotée suivante : 1. Manger 2. Faire du sport
...
<MENU>
<OL>
<LI>Manger
<LI>Faire du sport
</OL>
</MENU>
...
Les listes de dossiers sont identiques aux listes de sélection. La seule différence réside dans le nombre de caractères permis. En effet, les entrées dans les listes de dossiers ne peuvent pas dépasser 24 caractères. Par contre, avec les navigateurs futurs, il sera possible d'afficher ces listes sur plusieurs colonnes.Pour la déclaration, nous utiliserons le tag <DIR>...</DIR>.
Exemple : Création de la liste numérotée suivante : ¤ Manger ¤ Faire du sport
...
<DIR>
<OL>
<LI>Manger
<LI>Faire du sport
</OL>
</DIR>
...
Une liste de définition se présente de la même fàçon qu'un lexique, à savoir un sujet et son explication décalée à droite. Un liste de définition est obligatoirement introduite par le tag <DL>lexique complet</DL>. Dans ce lexique complet, le sujet est défini par le tag <DT>sujet</DT> et l'explication par <DD>explication</DD>.
Exemple :
...
<DL>
<DT>
Titre
</DT>
<DD>
Explication et texte
</DD>
</DL>
...
Avec la version 3.0 du langage HTML, il existe au total plusieurs tags de tableaux, ce qui permet d'en créer différents styles.
Le début d'un tableau est défini par le tag <TABLE> et la fin par </TABLE>. Vous pouvez éventuellement lui attribuer un titre grâce au tag <CAPTION>...</CAPTION>. Le tag <TR>...</TR> génère une ligne dans un tableau et les caractéristiques de chaque cellule sont définies par le tag <TD>...</TD>. Le tag <TH>...</TH> diffère du tag <TD> dans le sens ou il affiche le contenu de la cellule en gras. Il existe divers attributs ou options que vous pouvez asocier à ces tags :
<TABLE>
<CAPTION>
<TR> ou <TH>
<TD>
Il existe 2 types importants de format d'images.
Le tag requis pour insérer des images est <IMG>.
Exemple : <IMG SRC="logo.gif">
Le multifenêtrage permet de fractionner votre page Web en plusieurs fenêtres. Ces fenêtres sont communément appelées "cadres" ou "Frames" en anglais. Ces Frames sont déclarés grâce aux tags <FRAMESET>...</FRAMESET> et <FRAME>...</FRAME>. <FRAMESET> est le tag de déclaration globale d'une page. <FRAME> est un sous-ensemble de <FRAMESET>. En fait <FRAME> définit le contenu d'un cadre.
<FRAMESET>
<FRAME>