Contenu:

Introduction

HTML est le language de description des pages web. Un fichier HTML est un fichier texte à la norme ASCII qui contient des balises, ou "tags" à la norme HTML 4.
En général il vaut mieux utiliser les balises simples, bien qu'il existe des dizaines de balises spéciales, mais celles-ci ne donnent pas toujours le résultat attendu lorsqu'on affiche la page dans un browser.
Le World Wide Web Consortium (W3C www.w3c.org) est l'organe officiel de développement du HTML. Ils éditent un guide HTML pour débutant et un guide HTML avancé, tous deux sont d'excellentes références.

Structure des balises

La structure d'une balise HTML est la suivante:

<balise option1="valeur1" option2="valeur2">contenu</balise>

Remarques:

Structure d'un document HTML

Un document HTML est un fichier text avec l'extension ".html". On peut éditer ce fichier avec TextEdit, BBedit ou n'importe quel éditeur de texte, mais il vaut mieux éviter d'utiliser des traitement de texte comme Word.

La structure générale est la suivante:

<html>
<head>
en-tête du document (auteur, titre, résumé,mots-clés,...)
</head>
<body>
corps du document (ce qui est visible)
</body>
</html>

Remarques:

Liste des balises les plus importantes

Cette liste n'est de loin pas complète, mais avec ces quelques tags, et en connaissant bien les options et les feuilles de styles en cascades, on peut déjà construire un site complet.

Balise Options Description
<html></html>   format de document
<head></head>   en-tête
<meta></meta> name, content, ... en-tête
<body></body>  ... corps de document
<h1></h1>   titre 1
<h2></h2>   titre 2
<h3></h3>   titre 3
<p></p>  ... paragraphe
<ul></ul>   liste
<li></li>   élément de liste
<a></a> href lien
<table></table> height, width, border tableau
<tr></tr> width, align, valign, rowspan ligne de tableau
<td></td> height, width, colspan élément de tableau
<img> src, height, width, border image
<br>   saut à la ligne
<hr> width ligne horizontale
<b></b>  ... texte en gras
<i></i>  ... texte en italique
<div></div>  ... boîte flottante

Exemples d'utilisation des balises

Code HTML Effet
<h1>Bonjour</h1>

Bonjour
<h2>Salut</h2>

Salut
<h3>A bientôt</h3>

A bientôt
<ul>
<li>Carottes</li>
<li>Choux</li>
</ul>
  • Carottes
  • Choux
<table border="1">
<tr><td>Carottes</td></tr>
<tr><td>Choux</td></tr>
<tr><td>Tomates</td></tr>
</table>
Carottes
Choux
Tomates
<img src="pictures/Nuages.jpg" height="100" width="150" border="0">
Salut,<br>
<b>comment</b>
<hr>
<i>vas-tu</i>
?		 Salut,
comment vas-tu ?

Le système des références

Pour créer des liens ou afficher des images, il faut un système de références à des fichiers. Le système de références dans internet est lié au système de fichiers UNIX.
Il est possible de faire des références absolues et des références relatives. Les références absolues donnent l'adresse complète d'un fichier dans l'arborescence internet, par exemple l'adresse absolue de ce fichier est

http://gybuwebfac.free.fr/html.html

et l'adresse de la photo de nuages ci-dessus est

http://gybuwebfac.free.fr/pictures/nuages.jpg

pour ce second exemple, le fichier est nuages.jpg, dans le dossier pictures, lui-même sur le serveur gybuwebfac.free.fr.

Une référence relative ne donne pas l'adresse complète mais seulement l'adresse par rapport au fichier courant. Pour remonter d'un niveau de dossier, on utilisera "../". Par exemple, l'adresse relative de html.html par rapport à nuages.jpg est ../html.html, alors que l'adresse relative de nuages.jpg par rapport à html.html est pictures/nuages.jpg.

Liste des symboles spéciaux

(tiré de Dave Raggett's Introduction to HTML)

Symbole Code Exemple
Copyright sign &copy; Copyright © 1999 W3C
Registered trademark &reg; MagiCo ®
Trademark &#8482; Webfarer™

Symbole Code Exemple
Less than &lt; <
Greater than &gt; >
Ampersand &amp; &
nonbreaking space &nbsp;  
em dash &#8212; —
quotation mark &quot; "

Symbole Code 1 Code 2   Symbole Code 1 Code 2
  &nbsp; &#160; Ð &ETH; &#208;
¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
€ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; Õ &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
– &shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
&para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
Å &Aring; &#197; õ &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

En règle générale, on utilisera BBEdit pour éditer le code.

Faire un document HTML contenant des images, avec des titres et légende pour chacune. Pour utiliser des images libres, téléchargez le paquet de photos sur votre disque, ou utilisez vos propres images.

Exemple de résultat...

Faire un tableau avec les écoles où vous avez étudié. Avec les colonnes suivantes: nom de l'école, ville, année d'étude, section, remarques spéciales, lien vers le site de l'école. Utilisez un moteur de recherche (Google, Yahoo, ...) pour retrouvez ces liens.

Exemple de résultat...

Reproduire l'organisation de dossiers et fichiers selon la figure ci-dessous. Créer les fichiers html, avec seulement un titre et un lien.

f1.html lien vers f4.html
f2.html lien vers f3.html
f5.html lien vers f1.html


© Copyright 2004 - Vincent Stadelmann