Page gardée seulement pour archives. Les informations contenues dans cette pages ne sont plus pertinentes aujourd'hui.

Introduction

L'Hypertext Markup Language sert à décrire des documents contenant du texte, des images, des liens et d'autres éléments à l'aide de balises. Les documents HTML sont normalement tous reliés ensemble à l'aide des liens pour créer des ensembles, soit des sites, intranet ou des interfaces de CD-ROM multimédia.

Règles des balises

Toutes les instructions sont exprimées dans les balises (ou tags)
Une balise est délimitée par les symboles < et >.
- Exemple : <FORM>, <TABLE>, <FONT>.
Presque toutes les balises doivent être ouvertes et fermées
- Exemple : <TABLE></TABLE>
- ou s'il n'y a pas de balise de fermeture : <balise />
Les balises ne doivent pas se chevaucher
- Incorrect → <b><i>bonjour</b></i> * Correct →<b><i>bonjour</i></b>
Dans les balises les majuscules sont équivalentes aux minuscules

Structure générale

Un document HTML est généralement divisé en deux parties. L'entête qui est entre les balises <HEAD></HEAD> et le corps qui est entre les balises <BODY></BODY>.

<HTML>
  <HEAD>
    <TITLE>Titre de la page</TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Les commentaires

Les commentaires est tout ce qui est ignoré par le navigateur. Sert à documenter, débogguer, etc.

<!-- ceci est un commentaire -->

Les balises de base

Niveaux de titres

Il existe six niveaux de titres : <H1> à <H6>.

Paragraphes

La balise <P> débute un nouveau paragraphe
La balise <BR> fait une nouvelle ligne

Lignes horizontales

On peut insérer des lignes qui délimites des sections à l'aide d'une ligne horizontale.

<HR>

Alignement de plusieurs éléments

La balise <DIV> permet de définir l'alignement de plusieurs éléments (titres, textes, images, etc).
L'alignement s'appplique pour tout ce qui se trouve entre <DIV> et </DIV>.
Elle possède l'attribut ALIGN qui peut prendre les valeurs suivantes :
- LEFT, RIGHT, CENTER, JUSTIFY
- Exemple : <DIV ALIGN=“CENTER”></DIV>

Mise en forme

<B>
<I>
<TT>
<U>
<STRIKE>
<BIG>
<SMALL>
<SUB>
<SUP>

Les polices de caractères

Il faut utiliser la balise <FONT>.

Les liens

On utilise la balise <a>. Il existe plusieurs types de liens :

liens internes à une page
liens internes à un site
liens externes

Lien externe

Fait référence à un site se trouvant sur un autre site. Exemple :

<a href="http://www.google.com/" >Lien du site externe</a>

Lien interne au site

Fait référence à un document se trouvant sur le site dans lequel on se trouve. Exemple :

<a href="../autrerep/document.html">Autre document du site</a>

Il faut utiliser des URL relatifs :

./ → Pour accéder au répertoire courant
../ → Pour accéder au répertoire parent

Il faut absolument éviter les URL absolus comme dans l'exemple suivant :

<a href="C:\site\autrerep\document.html">Autre document du site</a>

Lien interne à une page

Fait référence à un emplacement se trouvant dans la page courante. On utilise les ancres (ou signets).

Définition de 'ancre :

<a name="hautdepage"></a>

Lien vers l'ancre :

<a href="#hautdepage">Aller en haut de page</a>

Lien vers l'ancre à partir d'une autre page :

<a href="autrepage.html#hautdepage">Aller à un endroit précis</a>

Lien de courriel

Permet d'envoyer du corrier électronique.

<a href="mailto:personne@domaine.ca">Écrire à personne</a>

Images

On utilise la balise <IMG>. La balise <IMG> a de nombreux attributs :

NAME → Nom du composant image
SRC → nom du fichier
WIDTH et HEIGHT → taille de l'image
ALT → Texte qui apparaît si l'image est désactivée
BORDER → épaisseur en pixels de la bordure
VSPACE et HSPACE → espaces vertical et horizontal autour de l'image
LOWSRC → image N&B chargée avant l'image principale

Exemple :

<img src="images/logo.gif" name="logo" width="200" height="100" border="0" alt="image du logo" />

Images réactives

Une seule et même image peut avoir différentes zones qui mèneront alors à différentes ressources.

<img border="0" width="170" height="72" src="h-menu.gif" useMap="#menumap" />
<map name="menumap">
  <area SHAPE="RECT" COORDS="20,4,84,25"  HREF="http://www.microsoft.com">
  <area SHAPE="RECT" COORDS="20,26,84,48" HREF="http://wwww.nestcape.com">
  <area SHAPE="RECT" COORDS="20,49,84,71" HREF="http://www.multimania.com">
</map>

Entête

L'entête du document HTML se trouve entre les balises <head> et </head>, qui eux-mêmes sont avant le corps du document (<body>).

Meta tags

<META HTTP-EQUIV=“EXPIRES” CONTENT=“Mon, 22 Jul 2002 11:12:01 GMT”>

Lien CSS

Pour un lien externe à un fichier CSS :

<link rel="stylesheet" type="text/css" href="style1.css">

Éléments plus avancés

Caractères spéciaux

Punctuation	HTML Entity	ISO Latin-1 code	name or meaning
–	–	–	en dash
—	—	—	em dash
¡	¡	¡	inverted exclamation
¿	¿	¿	inverted question mark
'		'	apostrophe
“	"	"	quotation mark
‘	‘		left single quote
’	’		right single quote
“	“		left double quote
”	”		right double quote
„	&bdquo;		double low-9 quote
« »	« »	« »	guillemets (European-style quotation marks)
(espace)			non-breaking space
Symboles	HTML Entity	ISO Latin-1 code	name or meaning
&	&	&	ampersand
¢	¢	¢	cent
©	©	©	copyright
÷	÷	÷	divide
>	>	>	greater than
<	<	<	less than
µ	µ	µ	micron
·	·	·	middle dot
¶	¶	¶	pilcrow (paragraph sign)
±	±	±	plus/minus
€	€	€	Euro
£	£	£	British Pound Sterling
®	®	®	registered
§	§	§	section
¥	¥	¥	Japanese Yen
Diacritics
á Á	á Á	á Á	lower-case “a” with acute accent upper-case “A” with acute accent
à À	à À	à À	lower-case “a” with grave accent upper-case “A” with grave accent
â Â	â Â	â Â	lower-case “a” with circumflex upper-case “A” with circumflex
å Å	å Å	å Å	lower-case “a” with ring upper-case “A” with ring
ã Ã	ã Ã	ã Ã	lower-case “a” with tilde upper-case “A” with tilde
ä Ä	ä Ä	ä Ä	lower-case “a” with diaeresis/umlaut upper-case “A” with diaeresis/umlaut
æ Æ	æ Æ	æ Æ	lower-case “ae” ligature upper-case “AE” ligature
ç Ç	ç Ç	ç Ç	lower-case “c” with cedilla upper-case “C” with cedilla
é É	é É	é É	lower-case “e” with acute accent upper-case “E” with acute accent
è È	è È	è È	lower-case “e” with grave accent upper-case “E” with grave accent
ê Ê	ê Ê	ê Ê	lower-case “e” with circumflex upper-case “E” with circumflex
ë Ë	ë Ë	ë Ë	lower-case “e” with diaeresis/umlaut upper-case “E” with diaeresis/umlaut
í Í	í Í	í Í	lower-case “i” with acute accent upper-case “I” with acute accent
ì Ì	ì Ì	ì Ì	lower-case “i” with grave accent upper-case “I” with grave accent
î Î	î Î	î Î	lower-case “i” with circumflex upper-case “I” with circumflex
ï Ï	ï Ï	ï Ï	lower-case “i” with diaeresis/umlaut upper-case “I” with diaeresis/umlaut
ñ Ñ	ñ Ñ	ñ Ñ	lower-case “n” with tilde upper-case “N” with tilde
ó Ó	ó Ó	ó Ó	lower-case “o” with acute accent upper-case “O” with acute accent
ò Ò	ò Ò	ò Ò	lower-case “o” with grave accent upper-case “O” with grave accent
ô Ô	ô Ô	ô Ô	lower-case “o” with circumflex upper-case “O” with circumflex
ø Ø	ø Ø	ø Ø	lower-case “o” with slash upper-case “O” with slash
õ Õ	õ Õ	õ Õ	lower-case “o” with tilde upper-case “O” with tilde
ö Ö	ö Ö	ö Ö	lower-case “o” with diaeresis/umlaut upper-case “O” with diaeresis/umlaut
ß	ß	ß	ess-tsett
ú Ú	ú Ú	ú Ú	lower-case “u” with acute accent upper-case “U” with acute accent
ù Ù	ù Ù	ù Ù	lower-case “u” with grave accent upper-case “U” with grave accent
û Û	û Û	û Û	lower-case “u” with circumflex upper-case “U” with circumflex
ü Ü	ü Ü	ü Ü	lower-case “u” with diaeresis/umlaut upper-case “U” with diaeresis/umlaut
ÿ	ÿ	ÿ	lower-case “y” with diaeresis/umlaut

Symboles mathématiques en HTML

Tableaux

Permet tout d'abord de présenter l'information en colonnes et lignes, ils ont beaucoup servis aussi pour subdiviser la page en plusieurs parties en utilisant ses cellules.

On utilise les balises <TABLE></TABLE>. Un tableau contient une ou plusieurs lignes, chaque ligne est décrite par les balises <TR></TR>. Chaque ligne est composée d'une ou ou plusieurs cellules qui sont décrites par les balises <TD></TD>.

Exemple de table avec un colspan et un rowspan :

<table width="200" border="1">
  <tr>
    <td colspan="2">&nbsp;</td>
    <td rowspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<tr>
  <td colspan="2">&nbsp;</td>
  <td rowspan="5">&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>

</table> </html>

Attributs

BORDER
BGCOLOR
BACKGROUND

Cadres

Les cadres sont utilisés pour séparer une page en différentes sections. Cette méthode de structuration d'un site n'est plus utilisée aujourd'hui car elle pose des problèmes d'affichage et de référencement.

Formulaires

Permet aux visiteur d'envoyer des données au serveur.
La balise <FORM> insère un formulaire dans la page web.
Les attributs sont :
- METHOD → Méthode utilisée pour envoyer les données du formulaire. Valeurs possibles : GET et POST
- ACTION → Action à entreprendre lorsque l'utilisateur soumet le formulaire
- ENCTYPE → spécifie le format de données, dans le cas où le protocole n'impose pas de format précis

Exemple :

<FORM METHOD="POST" ACTION="script.php"></FORM>

Éléments du formulaire

La balise <INPUT>

Attributs

NAME
MAXLENTGTH
VALUE
TYPE
- TEXT
- BUTTON
- PASSWORD
- CHECKBOX
- RADIO → Les boutons radio sont regroupés par le nom qui doit être identique.
- HIDDEN
- FILE → Exemple : Incluez votre cv : <INPUT TYPE=“file” NAME=“lecv”>
- SUBMIT
- RESET
CHECKED → dans le cas que le type est CHECKBOX

Les zones de texte : <TEXTAREA></TEXTAREA>

ROWS, COLS, READONLY

Listes de choix : <SELECT>

NAME
SIZE
MULTIPLE
Les choix sont décrits par la balise <OPTION>
- VALUE
- SELECTED

Inclure des styles CSS dans le code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Html avec style</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>
 
<body>

Inline styles

<font style="font-family: Arial,Helvetica,sans-serif; font-size:22px; color:red; text-decoration:underline; ">

Exemples de codes

nofollow

<a href="http://www.siteinternet.com/" rel="nofollow">nom du lien</a>

Wiki SGY.io

Table des matières

Introduction

Règles des balises

Structure générale

Les commentaires

Les balises de base

Niveaux de titres

Paragraphes

Lignes horizontales

Alignement de plusieurs éléments

Mise en forme

Les polices de caractères

Les liens

Lien externe

Lien interne au site

Lien interne à une page

Lien de courriel

Images

Images réactives

Entête

Meta tags

Lien CSS

Éléments plus avancés

Caractères spéciaux

Tableaux

Attributs

Cadres

Formulaires

Éléments du formulaire

Inclure des styles CSS dans le code HTML

Inline styles

Exemples de codes

nofollow