Créer un site internet n'est pas compliqué en soi mais demande certaines connaissances. Quelque soit le site à créer (site perso ou professionnel), le HTML est une étape obligatoire. Il s'agit en effet du langage principal, présent dans toutes pages sur internet.

Attention : utiliser le html ne signifie pas apprendre le html. Il existe des logiciels (tels que Dreamweaver ou FrontPage) qui vous permettent de créer des pages sans connaissances de ce langage. Mais je vous conseille fortement d'en apprendre un minimum (nul besoin de connaitre tout par coeur) en dépit de quoi, vous serez vite dépassé et dans l'impossibilité de déceler certaines erreurs. L'idéal est sans doute de créer vos pages avec l'un de ces logiciels (gain de temps garanti) et de vérifier en même temps les modifications apportées au code par le logiciel. C'est formateur, et ça vous familiarisera avec le html.

Remarque préalable : le langage HTML vous permet de commenter le code de vos pages, c'est à dire d'ajouter des notes personnelles qui n'apparaîtront pas sur la page de vos visiteurs (mais notez bien qu'ils peuvent toujours avoir accès à la source... ne mettez donc aucune information confidentielle). Les commentaires sont simplement encadrés par  . Vous retrouverez donc ce type de notes pour chaque exemple de code HTML présenté sur ce site :

 <!-- ceci est un commentaire en langage HTML -->

Structure d'une page HTML : les balises

Une page internet est structurée. Les premiers éléments à connaître sont l'en-tête (définissant le titre et d'autres informations qui n'apparaissent pas directement sur la page) et le corps du document. Voici donc la structure de base d'une page :

<html> <!-- obligatoire au début de la page -->

<head> <!--  head (tête en anglais) ouvre l'entête du document -->
  <title></title> <!-- title détermine le titre du document -->
  [...] <!-- nous verrons que l'en-tête comprend d'autres informations -->
</head> <!-- ferme l'entête du document -->

<body> <!--  body ouvre le corps du document -->
  [...] <!--  Tout le code composant la page est ici -->
</body> <!--  ferme le corps du document -->

</html> <!--  obligatoire en fin de page -->

Vous remaquez déjà une chose très importante du html : ce langage fonctionne par balises qui ne sont ni plus ni moins que des mots entourés de crochets. Sauf exceptions, on remarque également que pour chaque balise, il y a des balises d'ouverture (<...>) et de fermeture (</...>). Vous connaissez donc maintenant quatre balises importantes : html, head, title et body.

Les principales balises HTML

Outre les quatre présentées ci-dessus, le langage HTML utilise une quantité importante de balises. Pour une première approche, nous n'étudierons ici que les plus utiles (les autres seront traitées plus en détail dans la partie perfectionnement HTML). Pensez également à utiliser l'exercice d'entrainement HTML pour vous familiariser avec ces balises :

Les paragraphes : <p></p>

<p>ceci est un paragraphe</p>
<p>ceci est un autre paragraphe</p>

Le retour à la ligne : <br />

<p>ceci est un paragraphe<br />avec retour à la ligne</p>
<p>ceci est un paragraphe sans retour à la ligne</p>

Les tableaux : <table><tr><td></td></tr></table>

<table> <!-- ouverture de la table -->
  <tr>  <!-- ouverture d'une ligne : <tr> -->
    <td>ceci est une cellule de la première ligne</td>
    <td>autre cellule (toujours sur la même ligne)</td>
  </tr> <!-- fermeture de la première ligne -->
  <tr> <!-- ouverture d'une seconde ligne -->
    <td>ceci est une cellule de la seconde ligne</td>
    <td>autre cellule de la seconde ligne</td>
  </tr> <!-- fermeture de la seconde ligne -->
</table>

Les listes ordonnées (ol) et non ordonnées (ul)

<ul> <!-- liste UL : chaque élément sera précédé du même signe ou d'une même image -->
  <li>item 1 de la liste non ordonnée</li>
  <li>item 2 de la liste non ordonnée</li>
</ul>
<ol> <!-- liste OL : chaque élément sera précédé d'un numéro (1, 2...) -->
  <li>item 1 de la liste ordonnée</li>
  <li>item 2 de la liste ordonnée</li>
</ol>

Les liens hypertextes, qui permettent de lier les pages : <a href=""></a>

<a href="autre-page.php">Texte de votre lien</a>
<!-- Le texte de votre lien est encadré par les balises <a> et </a>
le lien de la page est un « attribut » ... nous verrons ci-dessous
ce qu'est un attribut -->

Les images... <img src="" />

<img src="/fichiers/images/interface/logo.gif" width="221" height="41" />
<!-- L'image doit bien sûr se trouver sur internet... on indique alors
son adresse (URL) avec l'attribut src... mais qu'est-ce qu'un attribut ? -->

Paramètres des balises : les attributs

Nous venons de voir que le langage html utilisait des balises. Nous allons voir maintenant que la plupart d'entre elles sont paramétrables. Par exemple, et pour reprendre les balises présentées ci-dessus, les liens hypertexte (a) et images (img) utilisent respectivement les attributs href (adresse du lien) et src (adresse/source de l'image). Ces paramètres sont à insérer dans la première balise. Autre exemple avec la balise body (étudiée plus haut) :

<body bgcolor="#EEEEEE" text="#000000" bottommargin="10">
  [...]
</body> // aucun attribut dans la balise de fermeture

Nous avons ici déterminé dans la balise body :

la couleur d'arrière plan de la page : bgcolor = "#EEEEEE" (couleur Hexa)
la couleur du texte principal (pour tout le document) : text = "#000000",
la marge en bas de page : bottommargin = "10".

Important : si le langage html prévoit des attributs pour la mise en page (couleurs, marges, bordures...), on préfèrera l'utilisation des feuilles de style, étudiées à l'étape suivante.

Créer un site web : précédent | suivant : Feuilles de style css