Tutorial HTML
Premières notions
Remarques préliminaires
- HTML : Hyper Text Markup Language.
- Les noms de fichiers doivent porter une extension ".htm" ou ".html". Exemple : mapage.htm
- Etre très attentif à la casse (i.e. la distinction majuscule/minuscule) pour les noms de fichiers. Une cause fréquente de l'erreur "404" (page non trouvée) sur internet est la simple différence de casse entre le nom indiqué dans un lien, et le nom réel du fichier. Tester les pages avec un système sensible à la casse comme UNIX/GNU-Linux résoud le problème…
- Pour créer/modifier ("éditer") un fichier html, utiliser un éditeur de texte simple (Notepad, Bloc-note, Wordpad, Vi…) ou mieux, un éditeur évolué (comme Jext, Emacs, Vim ou Notetab). Eviter les "traitements de texte" (Word…).
- Une page destinée à Internet doit être testée avec plusieurs navigateurs, et pas seulement Microsoft Internet Explorer ; utiliser au moins Netscape Navigator. Très recommandés : OPERA, et Amaya, le navigateur du W3C. Afficher les pages avec plusieurs résolutions d'écran (800x600 et 1024x768 au moins).
La plus simple page html
<html> <head> <title>la plus simple page</title> </head> <body> Bonjour ! </body> </html>
Remarques générales :
Dans ce document, on a deux informations : le titre ("la plus simple page"), purement informatif, et "bonjour !", qui apparaîtra sur l'écran. Les autres éléments sont des BALISES (ou "TAGS"). Noter le "/" qui différencie les balises d'ouverture et de fermeture (cf <html> et </html>, par exemple).
On remarque la séparation en deux grandes parties : l'entête ("HEAD") et le corps ("BODY").
Les tabulations ne sont là que pour la clarté du listing, on aurait le même résultat avec :
<html><head><title>la plus simple page</title> </head><body>Bonjour !</body></html>
Une page web avec des liens, images et commentaires
Le html serait peu intéressant sans la possibilité d'appeler d'autres pages ou fichiers : ce sont les liens hypertextes.
Les liens permettet aussi de se déplacer dans une même page, ce qui est utile et souvent utilisé dans les longues pages de documentation technique du Web.
Des images peuvent être insérées dans le corps ("body"). Les fichiers sont en général de type jpg/jpeg, ou png. Le format gif, étant propriété d'Unisys, doit être évité.
Les commentaires sont entre les balises "<!---" et "--->". Il s'agit de texte non utilisé mais utile à la compréhension.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--- La premiere ligne ci-dessus, pas indispensable aux navigareurs
mais nécessaire si on veut respecter strictement les normes du W3C --->
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<!--- La ligne ci-dessus, également facultative mais recommandée --->
<!--- TITLE : le titre sera utilisé par le navigateur --->
<TITLE>Tutorial html 02</TITLE>
<!--- les tags META facultatifs mais utiles --->
<META name="description" content="HTML explique par etapes">
<!--- keyword = mots clef, très utile pour être indexé
automatiquement par les moteurs de recherche --->
<META name="keywords" content="html,tutorial,commentaires,lien">
<META name="generator" content="vi">
<META name="author" content="Dominique Guebey">
<META name="created" content="20020217;434444">
</HEAD>
<!-- entre les balises "body" et "/body" : ce qui sera affiché --->
<BODY>
Bonjour. Il est possible d'afficher le fichier source d'une page html
pendant l'affichage par le navigateur : par exemple en appuyant sur le
bouton droit de la souris et en choissant "source de la page" (Netscape
Navigator) ou "Afficher la source" (Internet Explorer).
<!--- br : saut a la ligne --->
<br>
<!--- img : image ; src indique le fichier utilisé (source)
width est la largeur en pixels --->
<img src="html00.jpg" width=120 alt="Photo Patrick Somelet">
<br>
Voici une autre image, avec indication de marges
verticales (vspace) et horizontales (hspaces)
<img src="html00.jpg" hspace=50 vspace=40
alt="Photo Patrick Somelet">
<br>
<!--- un lien vers une autre page --->
<a href="html01.htm">Texte où figurera le lien
(ici renvoi à la "plus simple page")</a>
<br>
<!--- un lien vers internet --->
<A href="http://www.w3.org">The World Wide Web Consortium.</A>
<br>
<!--- un lien pour envoyer un e-mail --->
<A href="mailto:serviceinformatique@bigfoot.com">Cliquer ici pour
envoyer un email à serviceinformatique@bigfoot.com</A>
<br>
<!--- un lien vers une autre page ; une image a la place du texte --->
<!--- (#lienbis : fera afficher à partir d'un point précis de la page ;
voir plus bas "Complément sur les liens") --->
<A href="html00.htm#lienbis">
<!--- Ligne ci-dessous : le fichier image utilisé se trouve quatre
niveaux de répertoire au-dessus. --->
<IMG src="../../../images/previous.png" alt="retour" border=0>
<!--- "retour" apparaîtra à l'écran si le navigateur
n'affiche pas les images, ou ne trouve pas celle qui est indiquée --->
</A>
<br>
</BODY>
</HTML>
Illustration : Cliquez sur ce lien pour afficher la page résultante
Complément sur les liens : déplacement dans une page :
<a name="debut">position "début" de la page.</a> <a href="#debut">Cliquer sur ce lien pour aller à "debut"</a> <a href="#fin">Cliquer sur ce lien pour aller à "fin"</a> <a name="fin">position "fin" de la page.</a>
Quelques éléments de présentation
<b>Balise b : texte en gras</b> donne : Balise b : texte en gras
<i>Balise i : texte en italique</i> donne : Balise i : texte en italique
<b><i>Balises b+i : texte en gras et en italique</i></u></b> donne : Balises b+i : texte en graset en italique
<big>Balise big : taille des caractères augmentée</big> donne :
Balise big : taille des caractères augmentée
<big><big>Encore plus gros.</big></big> donne : Encore plus gros.
<small>Balise small : taille des caractères diminuée</small> donne : Balise small : taille des caractères diminuée
<div align="center">Centrage</div> donne :
Les titres (balises h1 à h6) centrés par DIV
<div align="center">
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
</div>
Affichage :
Titre de niveau 4Titre de niveau 5Titre de niveau 6 |
Les listes
<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ul>
Une autre liste, numérotée :
<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ol>
Affichage :
|
Listes de descriptions
<dl> : description list ; <dt> : description title ; <dd> : description data. ; les "data" sont affichées avec un retrait.
Exemple :
<dl>
<dt>Cobol</dt>
<dd>Un langage ancien,
orienté gestion</dd>
<dt>RPG</dt>
<dd>Un langage répandu
sur mini IBM (AS400, eServers…)</dd>
<dt>Java</dt>
<dd>Un langage visant la
portabilité maximale</dd>
</dl>
Affichage :
|