Une page HTML basique

Bases d'HTML

A présent que vous avez compris la différence entre une page HTML et une page CSS, on va voir à quoi ressemble une page html. Je sais, on dirait un peu du chinois comme ça, mais vous verrez que c'est en réalité assez simple =).

Tout d'abord, il faut savoir que l'html fonctionne sous principe de balises, comme en PHBB sur le forum. Il existe des balises qui vont par paire, comme :

Code:: <machin> blabla </machin>

. Et des balises uniques, comme

Code:: <ht />

. Bien sûr, les balises que j'ai notées ici n'existent pas ^^'. On utilisera énormément les balises qui vont par paire =).

Donc... Voici le code d'une page qui servira de base (un peu améliorée tout de même) à chaque fois qu'on voudra créer une page =). (Toutes les choses contenues entre  sont des commentaires annotant le code).

Code:: <html>
<head>
<title>TITRE DE VOTRE SITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="contenu">

</div>

<div class="menu">

</div>


<table id="Tableau_01" width="700" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td>
      <img src="images/index_01.jpg" width="700" height="50" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_02.jpg" width="700" height="50" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_03.jpg" width="700" height="50" alt=""></td>
</tr>
<tr>
   <td>
      <img src="images/index_04.jpg" width="700" height="50" alt=""></td>
</tr>
</table> 

</body> 

</html>

<html > ouvre la page.

Entre les balises head, on va trouver les informations techniques relatives à la page html. L'encodage des caractères, à quel fichier css il est lié, etc.. La seule chose qu'on modifiera là sera le titre de votre site, entre les balises title.

Entre les balises body, c'est tout tout tout le contenu de votre site. On passera donc la majeure partie de notre temps là-dedans =). les leftmargin et autres servent à positionner le body sur votre layout. Ici, les valeurs sont à zéro car on modifiera tout ça dans le css =).

Toujours dans body, j'ai ouvert deux "blocs" div avec un nom (=class). Le nom servira à ajuster les propriétés de chaque bloc dans le css =).

Pour finir, j'ai placé mon layout sous forme d'un tableau (entre les balises table).
Afin de faciliter le chargement de la page, j'ai découpé mon layout en bandelettes horizontales que j'ai ensuite placé dans un tableau à une colonne et à autant de lignes qu'il y a de bandelettes =). La balise tr indique qu'il s'agit d'une ligne, et la balise td qu'il s'agit d'une celulle de la ligne dans laquelle elle est contenue =). Img src indique où le navgateur doit aller chercher l'image (la bandelette) et widht et height sont simplement les largeurs et hauteurs de la bandelette =). (Ceci peut être réalisé très facilement à l'aide de Photoshop...sinon il vous faudra faire cela à la main)

Et finalement, on va fermer la page avec </html >.

» Le HTML, c'est quoi?
» Vagues balises HTML
» Liste des tutoriaux [HTML]
» Livre Formation HTML et CSS