HTML : langage de marquage pour le web

YuGiOhJCJ

1 Avant propos...
2 Introduction
3 Les titres
4 Les paragraphes
5 Les lignes
6 Les listes
    6.1 Les listes à puces
    6.2 Les listes ordonnées
7 Les images
8 Les liens
    8.1 Les ancres
9 Les tableaux
    9.1 La fusion de cellules
10 Les commentaires

1 Avant propos...

Cette documentation a été rédigée par YuGiOhJCJ. Vous lisez actuellement la version 20080523 qui est gratuite. Si vous souhaitez utiliser une partie de cette documentation pour vos créations, veuillez d'abord me contacter à yugiohjcj@free.fr. La version la plus récente de ce document est disponible à l'adresse http://yugiohjcj.free.fr/. Cette publication peut contenir certaines erreurs. N'hésitez pas à me les rapporter pour que j'effectue une correction.

2 Introduction

Le langage HTML est un langage de marquage pour créer des pages web. C'est une suite de balises ouvrantes et fermantes. Voici un exemple :

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
		<head>
			<title>
				Le titre de ma page
			</title>
		</head>
		<body>
		</body>
	</html>

Des arguments peuvent être placés dans les balises. Par exemple, pour avoir un arrière-plan rouge :

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
		<head>
			<title>
				Le titre de ma page
			</title>
		</head>
		<body bgcolor="#FF0000">
		</body>
	</html>

Des arguments peuvent être placés dans les balises. Je vais présenter les principales balises.

3 Les titres

	<h1>Voici un titre de niveau 1.</h1>
	<h2>Voici un titre de niveau 2.</h2>
	<h3>Voici un titre de niveau 3.</h3>

4 Les paragraphes

	<p>Voici un paragraphe.</p>

5 Les lignes

	<hr>

6 Les listes

6.1 Les listes à puces

	<ul>
		<li>Voici le premier élément de la liste</li>
		<li>Voici le second élément de la liste</li>
		<li>Voici le troisième élément de la liste</li>
	</ul>

6.2 Les listes ordonnées

	<ol>
		<li>Voici le premier élément de la liste</li>
		<li>Voici le second élément de la liste</li>
		<li>Voici le troisième élément de la liste</li>
	</ol>

7 Les images

Une image au format GIF, JPEG ou PNG peut être affichée sur la page à l'aide de la balise img.

	<img alt="Mon image" src="mon_image.png" title="Mon image" >

8 Les liens

Un lien est une zone interactive de la page qui permet de naviguer vers une nouvelle adresse. Un lien peut être ajouté sur la page à l'aide de la balise a.

	<a href="http://yugiohjcj.free.fr/">Cliquez ici</a>

8.1 Les ancres

Une ancre est un lien spécial qui se limite à la navigation dans la page courante.

	<a href="#bas">Cliquez ici pour aller en bas de la page</a>
	[...]
	<a name="bas"></a>

9 Les tableaux

Les tableaux sont composés de lignes et de colonnes. Chaque intersection entre ligne et colonne forme une zone appelée cellule.

	<table>
		<tr>
			<th>
				Cellule colonne 1, ligne 1
			</th>
			<th>
				Cellule colonne 2, ligne 1
			</th>
		</tr>
		<tr>
			<td>
				Cellule colonne 1, ligne 2
			</td>
			<td>
				Cellule colonne 2, ligne 2
			</td>
		</tr>
	</table>

9.1 La fusion de cellules

Avec l'argument colspan, il est possible de fusionner les colonnes du tableau pour faire tenir une seule cellule sur plusieurs colonnes.

	<table>
		<tr>
			<th colspan="2">
				Cellule colonne 1 et 2, ligne 1
			</th>
		</tr>
		<tr>
			<td>
				Cellule colonne 1, ligne 2
			</td>
			<td>
				Cellule colonne 2, ligne 2
			</td>
		</tr>
	</table>

A l'inverse, avec l'argument rowspan il est possible de fusionner les lignes du tableau pour faire tenir une seule cellule sur plusieurs lignes.

	<table>
		<tr>
			<td rowspan="2">
				Cellule colonne 1, ligne 1 et 2
			</td>
			<td>
				Cellule colonne 2, ligne 1
			</td>
		</tr>
		<tr>
			<td>
				Cellule colonne 2, ligne 2
			</td>
		</tr>
	</table>

10 Les commentaires

Les commentaires apparaissent uniquement dans le code source de la page. Ils sont invisibles sur la page affichée par le navigateur web.

		<!--
			Voici un commentaire HTML
		-->

File translated from T_EX by T_TH, version 3.79.
On 17 Jul 2008, 01:00.