|
IntersTICe IntersTICe
Configurations La recherche documentaire : Pour participer à la
mise à jour de ce site, communiquer vos informations à
IntersTICe IntersTICe |
Professeur
Philippe Rossignol
Courriel :
HTML HyperText Markup Language
HTML est un langage de description
de pages permettant de contrôler par l'intermédiaire d'éléments
appelés balises (tags), l'apparence qu'elles auront sur l'écran
d'un utilisateur de serveurs Web. Ce langage est interprété
par le logiciel client (Mosaic, Netscape, Internet Explorer ...) installé
sur le poste de consultation.
HTML est une DTD (Document Type Definition) de SGML.
HTML a deux forces : sa simplicité et sa compacité. Le nombre
de balises (tags) est peu important, leur signification est facile à
comprendre. Ainsi son apprentissage est rapide. Les balises sont compactes
et les fichiers HTML sont guère plus gros que les fichiers ASCII
correspondants, ce qui est important pour le transfert par réseau
(les images ajoutées au texte changent évidement cet aspect
du problème).
Mais cette simplicité a pour conséquence un manque de précision,
en particulier les clients peuvent interpréter de manière
variée certaines balises, avec comme résultat des écrans
différents.
Car HTML subit de nombreuses évolutions. La plupart des clients
supportent la spécification HTML 2 (RFC 1590) définitivement
admise par les comités de normalisation. La normalisation en cours
correspond à HTML 4, validé l'été 97. Les
éditeurs commerciaux, NetScape et Microsoft, implémentent
leurs propres extensions à HTML.
L'intention à l'origine de ce langage était de créer
un moyen universel de stocker et afficher de l'information avec l'idée
que le contenu est plus important que la forme.
Cependant les nouvelles spécifications permettent de créer
des effets esthétiques qui s'éloignent des idées
de base mais sont particulièrement appréciés des
serveurs commerciaux.
1- Introduction
1a- Le protocole
http
HTTP "HyperText Transport Protocol" ou "HyperText Transfer
Protocol" signifie protocole de transfert hypertexte.
Il gère le dialogue entre le client et le serveur :
On donne un URL pour afficher un document.
Le client se connecte au serveur et lui demande le document. Le serveur
le cherche sur son disque dur et l'envoie au client. Il peut s'agir d'un
texte, d'une image , d'un son ou d'un document HTML.
Dans ce dernier cas, le client interprète les marqueurs HTML pour
l'afficher.
1b- Définition d'un URL (Uniform Resource Locator) :
Chaque page d'information, fichier ... est localisée par une adresse
en trois parties :
protocole://adresse_du_serveur:port/chemin_d'accès/nom_du_fichier
le protocole indique le type du serveur :
| Protocole | Service | Port | Exemple |
| http | serveur Web | 80 | http://www.microsoft.com/ |
| gopher | serveur Gopher | 70 | gopher://gopher.creaf.com/ |
| ftp | transfert de fichiers | 21 | ftp:// ftpperso.free.fr |
| telnet | travail sur un serveur distant | 23 | telnet://dialog.com |
| wais | Interrogation de bases WAIS | ||
| news | accès aux News | 119 | news://news.uni-stuttgart.de |
| mailto | messagerie | 110 | mailto:interstice@phiros.com |
1c- Règles
d'écriture
Les balises sont écrites indifféremment en minuscules ou
majuscules. Mais pour les URL, il faut tenir compte de la casse.
Les balises sont encadrées par < et >. Elles ont une marque
de début et une de fin en général.
Pour insérer un commentaire dans un document, utilisez les balises
suivantes :
<!-- Commentaire -->
Chaque document
HTML commence par la balise <html> et se termine par </html>.
On peut considérer 2 parties principales dans un document HTML
:
l'entête délimitée par <head> et </head>
le corps délimité par <body> et </body>
Ce qui donne :
<html>
<head>
<!-- Auteur : Phiros-- Date : 15/01/2002 -->
<title>Voici le titre du document</title>
</head>
<body>
...
Voici le corps du document.
Il est plus ou moins long
...
</body>
</html>
On peut indiquer le chemin d'accès aux fichiers par
<base href='URL'> </base>
Un fichier écrit en HTML doit avoir l'extension .html (sous Unix)
ou .htm (sous PC).
________________________________________________________________
Les
différentes balises peuvent être classifiées selon
deux aspects :
le premier concerne la structuration des documents pour l'édition
électronique
le second concerne la mise en valeur de l'information à l'écran
2- La structuration
des documents
2a- Les niveaux de titre
Il existe 6 niveaux <hn>... </hn> avec n allant de 1 (le plus
gros) à 6.
2b- Eléments de formatage de texte
Certaines balises n'ont pas de marque de fin.
Fin de paragraphe <p> Saut à la ligne <br>
Gras <b> </b> Italique <i> </i>
Insertion d'une ligne horizontale <hr>
Inclure une citation <CITE> </CITE>
Inclure une adresse <ADDRESS> </ADDRESS>
Liste
Liste de description <dl> </dl> Elément de la liste
<dt>
Liste non numérotée <ul> </ul> Elément
de la liste <li>
Liste ordonnée, numérotée <ol> </ol>
Elément de la liste <li>
2c- Le formatage des caractères
les caractères spéciaux
Les caractères suivants font partie du langage HTML et sont donc
interprétés : < > & ''
Pour les utiliser normalement on les remplace par : < >
& "
Les caractères
accentués
Un document HTML est écrit en code ASCII sur 7 bits ce qui pose
problème aux langues non anglaises. Le jeu de caractères
dit Alphabet Latin No 1 ou "ISO-8859-1" inclut les caractères
des langues européennes et en particulier les caractères
accentués du français.
à à ù ù
é é è è
ç ç î
î ô ô ê
ê
reg ® Registered TradeMark - copy © Copyright - trade
™ TradeMark
<blink> </blink> fait clignoter le texte encadré.
<pre> </pre> respecte le formatage du texte, utile pour des
tableaux.
<b> </b> mise en gras
<i> </i> mise en italique
2d- Les liens ou ancres
Un lien permet de transformer un mot, un groupe de mots, une images ou
un icône en un bouton hypertexte qui pointe vers un paragraphe,
une page une image, un son ... du même document ou d'un autre document
situé sur la même machine ou une machine distante.
- Lien dans un même document pour organiser une table des matières
par exemple
<A HREF="#biblio">Vers la bibliographie</A> établit
un lien vers le repère
...
<A NAME="biblio">Bibliographie</A>
- Lien vers un autre document
<A HREF="annexes.html">Lisez les annexes</A>
- Lien vers un autre serveur
<A HREF="http://interstice.free.fr">Visitez Interstice</A>
2e- Les images
HTML permet d'insérer des images dans un texte. Elles peuvent servir
d'ancres.
<IMG SRC="URL"> pour insérer une image distante
<IMG SRC="nom_fichier"> pour insérer une image
locale
On peut positionner le texte p.r. à l'image : TOP, MIDDLE, BOTTOM,
LEFT, RIGHT
<IMG ALIGN=LEFT SRC="nom_fichier">
2f- Les tableaux
Les balises sont les suivantes :
Définir un tableau <TABLE> </TABLE>
Définir une rangée Table Row <TR> </TR>
Définir un titre de colonne Table Header <TH> </TH>
Définir une colonne Table Data <TD> </TD>
Donner un titre <CAPTION> titre </CAPTION>
exemple :
<TABLE BORDER=5>
<TR>
<TH>Mois</TH><TH>Crédit</TH><TH>Débit</TH>
</TR>
<TR>
<TD>Janvier</TD><TD>15240,00</TD><TD>2565,00</TD>
</TR>
<TR>
<TD>Février</TD><TD>12250,00</TD><TD>1565,50</TD>
</TR>
</TABLE>
2g- Les formulaires
Un formulaire permet de définir un écran de saisie.
<FORM> </FORM>
<INPUT ...> ... </INPUT>
<FORM ACTION=' ..' METHODE=mot_clé'>
<SUBMIT>
<RESET>
exemple :
<H3>Questionnaire</H3>
<P>SVP remplissez ce questionnaire:
<FORM METHOD="POST" ACTION="mailto:interstice@phiros.com">
<P>Nom : <INPUT NAME="nom" size="48">
<P>Masculin <INPUT NAME="genre" TYPE=RADIO VALUE="male">
<P>Feminin <INPUT NAME="genre" TYPE=RADIO VALUE="female">
<P>Nombre d'enfants: <INPUT NAME="famille" TYPE=text>
<P>Ville de résidence:
<UL>
<LI>Paris <INPUT NAME="ville" TYPE=checkbox VALUE="Paris">
<LI>Toulouse <INPUT NAME="ville" TYPE=checkbox VALUE="Toulouse">
<LI>Autre <TEXTAREA NAME="autre" cols=48 rows=4></textarea>
</UL>
Prénom: <INPUT NAME="prenom" SIZE="42">
<P>Merci d'avoir rempli ce questionnaire.
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
ACTION est un
programme ou un fichier résultat.
METHOD est soit POST, soit GET.
SUBMIT permet à l'utilisateur de soumettre la requête.
RESET remet les champs à vide.
2h- Compléments
L'attribut BACKGROUND permet :
soit de colorer le fond d'écran <body bgcolor='#FF0011'>
soit d'incorporer une image en transparence <body background='URL'>
Le résultat n'est pas toujours heureux et peut rendre sur certains
écrans le texte difficile à lire.
3- Faciliter
le travail des robots
Les logiciels robots des moteurs de recherche (Google, Yahoo, AltaVista,
Lycos, InfoSeek...) visitent régulièrement les serveurs
pour les indexer. Pour améliorer le vocabulaire et fournir une
courte description du site, on peut insérer dans l'entête
du document HTML les lignes suivantes :
<META NAME="description" CONTENT="résumé"
>
<META NAME="keywords" CONTENT="motclé1 motclé2
motclé3 ..." >
<META NAME="author" CONTENT="DUPONT">
L'exemple du
journal "Lumiere" à http://www.lumiere.com/ montre comment
feinter les robots :
<html>
<head><title>Lumiere Magazine</title>
<META name="description" content="New York and Paris
based Lumiere is an upscale fashion and style magazine published exclusively
on the Internet.">
<META name="keywords" content="fashion, fashion, fashion,
fashion, fashion, fashion, fashion, beauty, beauty, beauty, beauty, beauty,
beauty, beauty, style, style, style, style, style, style, style, shopping,
shopping, shopping, shopping, shopping, shopping, shopping, magazines,
magazines, magazines, magazines, magazines, magazines, magazines, modeling,
modeling, modeling, modeling, modeling, modeling, modeling">
</head>
- les moteurs de recherche, quand ils récupèrent les pages
HTML, vérifient dans l'en-tête la présence de données
dites META.
- comme il n'y a pas de jugement de valeur sur les pages, le classement
obtenu en sortie sur les moteurs de recherche est calculé par un
algorithme qui considère :
* que les termes présents dans les champs META ont un poids plus
important que les mots présents dans le texte lui-même (l'équivalent
chiffré de l'importance d'un mot pour décrire une page,
ou un document)
* que le poids d'un mot est inversement proportionnel à sa fréquence
dans l'ensemble des mots connus par le moteur de recherche. En clair,
un mot fréquent apporte peu d'éclairage sur le contenu réel
de la page. C'est en poussant à l'extrême ce raisonnement
que l'on définit les "mots-vides".
* enfin que le poids spécifique du mot dans un document est le
produit de cette mesure inverse (très faible) par le nombre de
fois que ce mot apparaît dans le document.
Voici pourquoi il faut tabler sur quelques mots qui serviront d'accès,
puis les répéter là où ils auront le plus
d'influence sur la sélection par les moteurs de recherche.
