Apprendre le HTML

L’ambition de ce site n’étant pas de réécrire ce qui existe déjà, aussi, pour apprendre le html, je vous invite

En quelques heures, vous connaîtrez la base du langage HTML, à savoir les éléments, les balises et les attributs. Vous serez à même de réaliser un site rudimentaire avec des titres, du texte, des images, des tableaux, des liens, et ce sans l’intervention d’aucun logiciel WYSIWYG.

Vous pourrez alors commencer à construire votre site web. Gardez toutefois en tête le principe de base, d’abord le fond, ensuite la forme ! Ne vous souciez pas à ce stade de la présentation, le CSS est là pour ça. Mettez seulement en place votre structure… le reste viendra ensuite !

A ce stade de la création de votre site web, je vous suggère d'utiliser le template XHTML 1.0 du W3C légèrement retouché ci-dessous.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
 <title></title>
 <meta http-equiv="content-type" 
 content="text/html;charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

 <h1> Ma première page web</h1>
 <p>… Et voilà …</p>

</body>
</html>

Si vous préférez coder en HTML 4.01, vous pouvez utiliser cet autre template.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
 <meta http-equiv="Content-Type" content="text/html;
 charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <title></title>
 </head>

<body>

<h1> Ma première page web</h1>
<p>… Et voilà …</p>

</body>
</html>

Ne vous souciez pas encore des éléments <head> et <title> et commencez à insérer entre les balises <body> </body> votre contenu et la structure de votre page web, à savoir :

Les titres :

<h1></h1> : titre de 1er niveau
<h2></h2> : titre de 2ème niveau (etc. jusqu'à 6)

Les éléments de texte

<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li>: élément d'une liste
<a href=""></a> : lien hypertexte

Et éventuellement des tableaux

<table></table>: tableau
<th></th> : titre de ligne ou de colonne
<tr></tr> : ligne du tableau
<td></td> : colonne du tableau

Ne vous embarrassez pas dès à présent avec les images, vous les intégrerez après avoir acquis les notions CSS de positionnement et de flottement.

Dès que vous aurez pris un peu de bouteille, vous pourrez vous référer directement aux standards rédigés par l’organisme de normalisation du web, le W3C HTML 4.01 ou XHTML 1.0. Ce site exhaustif et pas forcément accessible d’entrée de jeu, vous indiquera, exemples à l’appui, les règles officielles de maniement de chacun des éléments.

A noter : les standards rédigés en anglais par le W3C, sont traduits en français, qu'il s'agisse du HTML 4.01 ou du XHTML 1.0.

Pour aller plus loin :

Si vous vous interrogez sur la différence qui sépare le HTML du XHTML, allez donc lire l’article rédigé par Laurent Jouanneau et Denis Boudreau (Openweb.eu.org) Passer du HTML au XHTML.

En complément vous pourrez

  1. Afficher le code source de vos concurrents. De préférence, utilisez les navigateurs qui offrent la coloration syntaxique
    • MOZILLA FIREFOX Affichage/ Code source de la page (Ctrl+U)
      apprendre html, afficher le code source
    • la fonction DRAGONFLY du navigateur OPERA. Cette fonction permet de sélectionner l’élément de la page web qui vous intéresse et met en valeur la partie du code correspondant.

      Video : Découvrir le code source avec OPERA DRAGONFLY

  2. Consulter les tutoriels, les articles spécialisés et le forum d'Alsacréations. Vous y trouverez des informations pratiques qui pourraient répondre à vos besoins immédiats ou vous donner des idées.