01.40 Cours HTML

Plan
ECOLE DES MINES ECOLE DES MINES

DE PARIS DE PARIS
Création de contenu
pour le WWW
Plan
Le langage HTML Documents disponibles sur le WWW . . . . 3
HyperText Markup Language
Documents HTML . . . . . . . . . . . . . 4
Christine Jouve, Fabien Moutarde Éléments essentiels . . . . . . . . . . . . . 11
Centre de Calcul Éléments plus sophistiqués . . . . . . . . . 20
Mai 1997 Appel de programmes . . . . . . . . . . . . 25

(Dernière mise à jour le 28 mai 1997)
Outils de création de documents HTML . . 29
Faire connaı̂tre ses pages . . . . . . . . . . 30
Références . . . . . . . . . . . . . . . . . . 32
Ecole Nationale Supérieure des Mines de Paris
C. Jouve, F. Moutarde ; Centre Calcul ENSMP ; Mai 1996 1 C. Jouve, F. Moutarde ; Centre Calcul ENSMP ; Mai 1996 2
Documents disponibles sur le WWW Documents HTML

DE PARIS DE PARIS
Documents HTML
Documents disponibles sur le WWW
– Sont des documents structurés
– Documents hypertextes écrits en HTML, – HTML ne décrit pas l’aspect d’un document mais
sa structure.
– Fichiers postscript, pdf, ...
– Chaque browser est libre d’interpréter cette
– Archives de logiciels, structure à sa guise.
– Fichiers son, vidéo, etc. – Sont des documents hypertextes
– ... – Ils contiennent des liens permettant d’accéder à
d’autres documents WWW.
Documents HTML Documents HTML
DE PARIS DE PARIS
Historique
Introduction au langage HTML
– Langage de balisage basé sur SGML (Standard HTML, versions expérimentales (1989)
Generalized Markup Language)
– Utilisé pour représenter des documents hypertextes HTML 2.0 (1994)

dans le cadre du World Wide Web
– Permet d’expliciter la structure d’un document

HTML +
hypertexte HTML avec extensions
– Permet aussi de préciser des directives de présentation propriètaires
HTML 3.0
– Un langage en évolution (norme HTML 3.2 -
Recommandation du W3C)
HTML 3.2 (1996)
– Nombreux outils pour écrire et visualiser des pages
HTML.

DE PARIS DE PARIS
Balisage
Chaque élément de structure est marqué par deux balises Attribut

(ou “tags”):
– une balise de début : <NomDeBalise> – La plupart des balises acceptent maintenant un certain
nombre d’attributs.
– une balise de fin : </NomDeBalise>
– Ces attributs permettent d’ajouter des compléments
Remarques : par rapport à la balise standard tels que :
– les balises peuvent s’écrire indifféremment en alignement, choix d’une couleur, choix d’une taille
majuscules ou minuscules. pour l’affichage, etc.
– Sauf exceptions, les balises peuvent être imbriquées. – Ces attributs doivent être ajoutés dans la balise de
début sous la forme :
– Certaines balises acceptent des arguments optionnels
(ou “attributs”).
Nom_Attribut="VALEUR"
Attention : bien que la présence de certaines balises de fin Exemple : <P ALIGN=CENTER>
ne soit pas obligatoire, il est souhaitable qu’à chaque balise
de début corresponde une (et une seule) balise de fin.
DE PARIS DE PARIS
Squelette d’un document HTML Pour les indexeurs
Un document HTML possède toujours : Certains indexeurs se servent des informations spécifiées
par des balises META dans l’en-tête d’un document
– un en-tête contenant des renseignements
HTML. Ces informations peuvent être :
d’identification du document (HEAD)
– un corps contenant le texte du document (BODY) – le nom de l’auteur du document,

8
>> <!DOCTYPE ... > – un descriptif du document,
>> <HTML><HEAD>
< – une liste de mots clés.
en-tête
>> <TITLE>titre</TITLE> <META NAME="Author"
>> <BASE HREF="un URL"> CONTENT="Auteur du document">
: </HEAD> <META NAME="Description"
8 CONTENT="Que raconte cette page
>< <BODY> ou que contient elle...">
corps
>: le texte “balisé” du document <META NAME="Keywords"
CONTENT="des, mots, cles, pour,
</BODY></HTML>
les, moteurs, de, recherche">
Éléments essentiels Éléments essentiels

DE PARIS DE PARIS
Niveaux de titre
Éléments essentiels Les balises H1, H2, ... H6 (Headings) permettent de

représenter des titres de différents niveaux.
– des titres
– des paragraphes
– des listes
– des liens vers d’autres documents
– des images
DE PARIS DE PARIS
Paragraphes
Paragraphes
Le retour à la ligne n’est pas – avec saut d’une ligne<P>

significatif avec HTML, – sans saut de ligne <BR>
de même que les espaces multiples
et les tabulations, – avec retrait <BLOCKQUOTE>
sauf spécifié explicitement.<P> – avec une présentation particulière :
Ceci est le second paragraphe.
– pour des informations sur l’auteur, etc.
Il ne contient qu’une "ligne" même si
<ADDRESS>
je l’ai entré sur plusieurs lignes et
avec plusieurs espaces.<P> – pour du texte préformaté <PRE>
Voici le troisième paragraphe...<P> – ...
Possibilités de formatage de texte :
– Italique, gras, ...
– Taille et couleur de font
– ...

DE PARIS DE PARIS
Listes
Liens hypertextes
Il y a 5 sortes de liste en HTML :
1. La liste ordonnée avec numérotation (<OL>) – Un document sur le WWW est accessible par son
URL (Universal Resource Locator).
2. La liste non ordonnée (<UL>)
– Un lien hypertexte lie deux documents ou deux
3. La liste descriptive (<DL>)
parties de documents en faisant référence à l’URL du
4. La liste de type répertoire (<DIR>) document pointé.
5. La liste de type menu (<MENU>) – En définissant un lien, on associe à une portion de

texte l’URL du document pointé.
Exemple :
– Ce pointeur est mis en évidence par le logiciel de
consultation (texte souligné, en couleur, etc).
DE PARIS DE PARIS
Pointer vers un endroit spécifique dans un document

Type de documents sur lesquels on peut pointer
Il est possible d’accéder à un endroit spécifique d’un
document HTML. Pour cela, il faut :
– Tout URL valide : soit d’une des formes suivantes : – Définir une étiquette dans le document à l’endroit où
on désire pointer.
cas d’une URL de la forme :
– Faire référence à cette étiquette par
<protocole>:<adresse> #Nom_Etiquette
après l’URL du document à pointer.
<A HREF="mailto:jouve@cc.ensmp.fr">
Ch. Jouve</A> Ainsi si une étiquette de nom par3 a été définie dans
<A HREF="news:mines.infosystems"> document.html, je pourrais pointer à cet endroit par la
newsgroup : mines.infosystems</A> référence :
<protocole>://<machine>/<fichier> http://www.site.fr/document.html#par3
http://www.site.fr/document.html
pointe au début du document ...
<A HREF="ftp://ftp.cma.fr/faq/">faq</A> ...
<A HREF="http://www.ensmp.fr">ENSMP</A> <A NAME="par3">Paragraphe 3 </A>

http://www.site.fr/document.fr#par3 ...
pointe sur le paragraphe 3 ...
Éléments essentiels Éléments plus sophistiqués

DE PARIS DE PARIS
Images
– Une image au format Bitmap (.XBM ou .XPM), Gif

Éléments plus sophistiqués
ou Jpeg peut être ”insérée” dans un document HTML.
– Cette image n’est pas véritablement incluse dans le

– les tableaux
document ; on fait référence à l’URL de l’image
dans le document HTML. – les images réactives
– Il est possible d’associer un message à l’image qui – les fichiers sons, vidéo
sera affiché dans le cas où le logiciel de consultation
– les cadres (frames)
ne sait pas afficher l’image.
– les formulaires et appels de scripts CGI
– L’image peut être alignée vers le haut, vers le bas ou
au milieu par rapport à la ligne courante. – les applets (applications JAVA)
Exemple :
<IMG ALIGN=TOP SRC="Images/charlie.gif"

ALT="Charlie Chaplin">
Éléments plus sophistiqués Éléments plus sophistiqués
DE PARIS DE PARIS
Tableaux
Images réactives (imagemaps)
Une image réactive ou cliquable est découpée en

plusieurs régions, chacune d’elles étant associée à un
lien particulier.
Définir une telle image nécessite :
Il est possible de définir des tableaux en utilisant la balise
TABLE. – de définir les différentes régions de l’image,
Un tableau est défini par les lignes (balise TR) le – et de leur associer les liens sur lesquels on veut
composant. renvoyer si on clique dans telle ou telle région.
Chaque élément d’une ligne est défini par les balises TD
(et TH pour la ligne de titre).
Pour ajouter un titre au tableau, il suffit d’encadrer ce titre
par la balise CAPTION.
Éléments plus sophistiqués Éléments plus sophistiqués

DE PARIS DE PARIS
Fichiers sons , vidéo Cadres

Non défini dans la Norme HTML 3.2
– Le World Wide Web supporte le multimédia mais pas – Une fenêtre peut être divisée en plusieurs zones
très bien. autonomes : les cadres (frames).
– Tout le monde n’a pas les outils nécessaires pour – Chaque zone porte un nom et est gérée
pouvoir en profiter sur sa machine. indépendamment des autres.
– Chaque plate-forme a son propre standard, en – Le corps du document n’est pas inclus entre les
particulier pour le son : balises <BODY> et </BODY> mais entre
.wav Windows <FRAMESET> et </FRAMESET>
.aiff Macintoch – Chaque cadre doit être défini dans un fichier annexe et
.au Machines Unix être indiqué dans le document par la balise FRAME.
pour la vidéo : .movie, .avi, .qt, .mov, .mpeg, .mpg, .mpe – Il est possible de définir ce que l’on souhaite afficher
dans le cas d’un client ne sachant pas traiter les cadres
Il est possible de pointer sur un fichier son ou vidéo (balises <NOFRAME> et </NOFRAME>).
comme on le fait pour tout autre lien.
Appel de programmes Appel de programmes
DE PARIS DE PARIS
Appel de programmes
Comment ça marche?
Accès à des bases de donnée
– Annuaire électronique, 1. capture des données par l’intermédiaire d’un

formulaire de recherche,
– Base de ressources documentaires,
2. envoi de ces données par le client au serveur,
– ...
3. exécution du programme avec les paramètres donnés,
– de plus en plus car de plus en plus d’interfaces
BD (Oracle, etc.) ! Web 4. renvoi des résultats au client pour affichage.
Formulaire d’inscription, Bon de commande, etc. ; Nécessité d’un mécanisme d’échanges de données
entre le serveur et le programme externe en vue de
– encore plus lors de la possibilité de payement construire un document à renvoyer au client :
électronique ...
; Common Gateway Interface (CGI)
...
Appel de programmes Appel de programmes

DE PARIS DE PARIS
Applets
Les formulaires
– Une applet = un programme téléchargé dans le
browser et exécuté localement.
– permet de capturer les paramètres à passer à un
programme via un serveur HTTP en remplissant les – Java est une machine virtuelle (définit l’ensemble des
champs de ce formulaire de recherche. actions autorisées ou interdites).
) Java est relativement sûr.
– est introduit par les balises <FORM> et </FORM>
entre lesquelles sont définis les différents champs de – Javascript ne tourne pas dans une machine virtuelle.
ce formulaire.
) Danger
– est défini par l’URL du script (attribut ACTION) et – On peut configurer les browsers pour ne pas exécuter
par la méthode (attribut METHOD) indiquant comment les applets d’un certain type. (Options . Network
transmettre les paramètres (GET par défaut ou POST) Preferences . Languages )
– ... Cf. le cours sur JAVA...
Outils de création de documents HTML Faire connaı̂tre ses pages
DE PARIS DE PARIS
Outils de création de documents HTML
Plusieurs outils existent pour créer des pages HTML.

Suivant que vous partez d’un document existant dans un Faire connaı̂tre ses pages
autre format ou de rien, vous pourrez utiliser des :
Il n’existe pas de processus d’enregistrement formel

éditeurs :
même si certains services proposent de vous enregistrer
– Netscape Gold auprès de différents services (parfois payant).
– AOLpress C’est le cas de :
– l’éditeur EMACS (qui comporte un mode HTML)
– submit-it (http://www.submit-it.com/)
– ... plus de nombreux outils commercialisés !
– le référenceur d’Acorus
convertisseurs :
(http://sam.acorus.fr/referenceur/index.htm)
– rtftohtml : RTF (Word) vers HTML
– ...
– latex2html : LaTeX vers HTML
– etc.
(voir http://www.w3.org/hypertext/WWW/Tools/Filters.html)
Faire connaı̂tre ses pages Références

DE PARIS DE PARIS
Sinon vous pouvez suivre les filières suivantes :
– s’enregistrer auprès des différents moteurs de

recherche (AltaVista, Yahoo, Lycos, InfoSeek, etc.)
qui proposent chacun un formulaire spécifique à cet
effet ; Références
– se faire connaı̂tre auprès de la liste des serveurs
français (http://www.urec.fr/France/annonce.cgi) Liste d’URLs utiles lors de l’écriture de pages HTML :
– poster un message dans les newsgroups : http://www/˜jouve/cours_HTML/biblio.shtml
– fr.comp.infosystemes.www.pages-perso
Documents de référence diffusés par le consortium W3 :
– fr.comp.infosystemes.www.announces
(http://www.frmug.org/cgi-bin/fciwa.cgi) http://www.w3.org
– comp.infosystems.announce
– si vos pages concernent un domaine bien particulier,

envoyer un message aux listes de discussion dans ce
domaine ;

01.40 Cours HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

01.40 Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Plan

ECOLE DES MINES ECOLE DES MINES

Mai 1997  Appel de programmes . . . . . . . . . . . . 25

Ecole Nationale Supérieure des Mines de Paris

Documents disponibles sur le WWW Documents HTML

– Utilisé pour représenter des documents hypertextes HTML 2.0 (1994)

– Permet d’expliciter la structure d’un document

Documents HTML Documents HTML

Chaque élément de structure est marqué par deux balises Attribut

Squelette d’un document HTML Pour les indexeurs

– un corps contenant le texte du document (BODY) – le nom de l’auteur du document,

Éléments essentiels Éléments essentiels

Éléments essentiels Les balises H1, H2, ... H6 (Headings) permettent de

– des liens vers d’autres documents

Le retour à la ligne n’est pas – avec saut d’une ligne<P>

Possibilités de formatage de texte :

– Italique, gras, ...

– Taille et couleur de font

Éléments essentiels Éléments essentiels

5. La liste de type menu (<MENU>) – En définissant un lien, on associe à une portion de

Pointer vers un endroit spécifique dans un document

<A HREF="http://www.ensmp.fr">ENSMP</A> <A NAME="par3">Paragraphe 3 </A>

Éléments essentiels Éléments plus sophistiqués

– Une image au format Bitmap (.XBM ou .XPM), Gif

– Cette image n’est pas véritablement incluse dans le

<IMG ALIGN=TOP SRC="Images/charlie.gif"

Images réactives (imagemaps)

Une image réactive ou cliquable est découpée en

Éléments plus sophistiqués Éléments plus sophistiqués

Fichiers sons , vidéo Cadres

– Annuaire électronique, 1. capture des données par l’intermédiaire d’un

Appel de programmes Appel de programmes

– ... Cf. le cours sur JAVA...

Outils de création de documents HTML

Plusieurs outils existent pour créer des pages HTML.

Il n’existe pas de processus d’enregistrement formel

Faire connaı̂tre ses pages Références

Sinon vous pouvez suivre les filières suivantes :

– s’enregistrer auprès des différents moteurs de

– si vos pages concernent un domaine bien particulier,

Vous aimerez peut-être aussi

Mai 1997 Appel de programmes . . . . . . . . . . . . 25