|
IntersTICe IntersTICe
Configurations La recherche documentaire : Pour participer à la
mise à jour de ce site, communiquer vos informations à
IntersTICe IntersTICe |
Professeur
Philippe Rossignol
Email : info@phiros.com
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 signifie HyperText Transport Protocol. 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.
