Le HTML ?
Formation Rénovation GSI ©PCo2005
Le HTML (HyperText Markup Language)
Origine
Une page Web (service le plus connu d'Internet) est constituée de texte, d'images, et de commandes HTML (souvent appelées
balises).
Ces balises sont interprétées par le navigateur (browser) qui reçoit la page HTML (un simple document texte en fait).
Chaque page est désignée par son URL (Uniform Ressource Locator) :
http://www.wanadoo.fr/accueil.htm
file:///C:/Program%20Files/EasyPHP1-7/www/promo.htm
> Langage de description de documents
Structure d'un document HTML
Un document est composé de plusieurs parties. En général, on trouve l'entête avec le titre et le corps. Un ensemble de deux
balises permet de délimiter chacune de ces parties (début et fin) :
<html>
<head>
<title>Ceci est notre première page Web !!!</title>
<!-- Auteur : un étudiant de BTS IG -->
</head>
<body bgcolor="#C0C0C0">
Le contenu du document est décrit dans la section BODY.
Attention, le passage à la ligne n'est qu'une illusion !!!
</body>
</html>
Remarques :
- Une balise de fin est indiquée par /.
- Les commentaires <!-- … --> sont ignorés par le navigateur.
- Une balise peut comporter des attributs qui permettent de paramétrer celle-ci (couleur de fond avec codes de couleurs RVB par
exemple).
Cependant, ce paramétrage se fera plutôt dans une feuille de style (*.css).
Les balises de base
Les titres
<h1>Titre niveau 1</h1>
- 6 niveaux sont disponibles de <h1> à <h6>
Les paragraphes
<p>Paragraphe</p>
- Entre les paragraphes, un grand saut de ligne est inséré
- Autres possibilités pour changer de ligne
- La balise <br> (break line) : permet de passer à la ligne suivante sans modifier l'alignement et le style courant.
- <div> … </div> (division) : joue un peu le même rôle que les paragraphes et possède les mêmes attributs
d'alignement. La différence est qu'aucun saut de ligne n'est généré avant et après une division.
- Enrichissement du texte <i>, <b> <u>
- Présentation : la balise <pre> permet de demander au navigateur de respecter le formatage du texte.
Les listes
<ul><li><ol>
- Une liste non ordonnée
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
- Changement de puce
<ul type="square">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
- Une liste ordonnée
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ol>
Les tableaux
Structure plus complexe, composée de plusieurs balises
<table><tr><td>
Les images
<img src="?.gif" width="351" height="239">
Les liens hypertextes
<a href="#<table>">La balise <table></a>
Catégories d'éditeurs
Tout public
FrontPage2000, Dreamweaver, NVu
Développeur
Bloc-notes (texte brut)
PHP Designer, Maguma (développement avec PHP)
Visual Studio (développement avec .aspnet)
Navigateurs
Internet Explorer, Netscape, Mozilla, Opera