Programmation

Comment créer une page HTML?

Vous souhaitez créer un site web ? Apprendre l’HTML ? Voici comment créer une page HTML étape par étape, sans installer aucun logiciel spécifique. Nous allons créer une page simplifiée au maximum pour vous familiariser avec le langage HTML.

Comment créer une page HTML?

Création d'une page web étape par étape

1- Prenez un éditeur de texte sans mise en forme de type Bloc-notes sur PC ou Simple Text sur Mac.

N’utiliser pas de logiciel de traitement de texte de type World, car les fichiers au format world contiennent des informations superflus tels que les tailles de caractères, les polices, saut de page… et votre code ne sera pas reconnu comme un code HTML par votre navigateur.

Dans l’idéal je vous conseille d’utiliser NOTEPAD++, ce logiciel totalement gratuit est idéal pour coder. En plus d’être très simple d’utilisation il vous aidera à mieux voir le code et les erreurs éventuelles grâce à un jeu de couleurs. Vous pouvez le télécharger sur notepad-plus-plus.org/

2- Ecrivez le texte suivant dans votre editeur de texte:
<!DOCTYPE html>
<html>
<head>
    <title>
        Ma page
    </title>
</head>
<body>
    <h1>Bonjour</h1>
    <p>Voici une page en HTML</p>
</body>
</html>

Nous verrons par la suite la signification de chaque ligne de ce code.

3- Enregistrez le fichier sous le nom « hello.html ».

Allez sur Fichier > Enregistrer sous et entrez le nom du fichier. Il est important de bien spécifier l’extension « .html » à la fin du nom, pour que le fichier puisse être lisible par votre navigateur. Sinon, il sera enregistré au format texte simple et ne sera pas reconnu comme un fichier HTML.

4- Ouvrez le fichier dans votre navigateur internet

Allez sur votre navigateur internet (Internet Explorer, Safari, Firefox...) et faîtes Fichier > Ouvrir ou avec le raccourci Ctrl + O sur PC. Ouvrez le fichier « hello.html ». Vous devriez obtenir le résultat suivant:

Résultat page HTML simple
Bravo ! Vous avez créé votre première page HTML !

Explication du code

Le langage HTML est un langage simple qui utilise des balises, ou ‘tags’ en anglais. Les balises sont facilement reconnaissables dans le code HTML ; elles sont entourées des symboles "<" et ">".

La plupart des balises vont de paires. On parle dans ce cas de balise ouvrante et fermante. Par exemple, la balise ouvrante <p> désigne le début d’un paragraphe, on trouvera donc à la fin de ce paragraphe la balise fermante </p>. La balise fermante aura le même nom que la balise ouvrante avec simplement le symbole / avant son nom.

Voyons maintenant la signification du code que l’on vient de faire ligne par ligne.


Le Doctype

1ère ligne du code:
<!DOCTYPE html>

Sur la première ligne de code, on trouve le « DOCTYPE », cette ligne va indiquer au navigateur le type de document dont il s’agit ; d’où son nom DOCument TYPE. L’instruction DOCTYPE doit être la première instruction dans votre code HTML. Il ne s’agit pas d’une balise ouvrante car elle n’a pas besoin d’être fermée, il n’y a donc pas de balise fermante DOCTYPE.

Dans notre cas <!DOCTYPE html> signifie que la page est codée en HTML 5. Il existe d’autres types de doctype designant d'autres versions du langage HTML. Par exemple :

Pour du HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Pour du XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Je vous conseille d’utiliser le doctype <!DOCTYPE html> suivant les standards HTML5. Les autres versions d’HTML tendant à disparaitre pour laisser place au HTML5.


Structure du code HTML

2ème ligne du code:
<html>
Voici la balise <html>, cette balise désigne le début du code html. Il s’agit d’une balise ouvrante, on rencontre donc à la dernière ligne la balise fermante </html> signifiant la fin du code. Un code HTML est toujours composé en deux parties. Une partie HEAD (la tête du code) qui contient les paramètres de la page et une partie BODY avec le contenu lisible de la page.

La partie HEAD

3ème ligne du code:
<head>

La balise <head> marque le début de la partie HEAD (tête). Cette partie contient tous les paramètres qui ne sont pas visibles directement sur la page. Elle se termine par la balise fermante </head>. On peut y trouver des informations utiles au navigateur, pour qu’il traduise correctement la page, mais également des informations destinées aux moteurs de recherche pour référencer correctement la page.

Titre de la page
    <title>
        Ma page
    </title>

On retrouve la balise <titre> dans la partie head. Cette balise permet de donner un titre à votre page web. Ce titre apparait sur la partie supérieur de la fenêtre de navigation de votre explorer internet.

Résultat page HTML simple

Cette balise ne doit pas être négligée. Elle est utilisée par les moteurs de recherche; il est important qu’elle soit présente sur toutes les pages d’un site internet.


La partie BODY

8ème ligne du code:
<body>

La fin de la partie HEAD est marquée par la balise de fermeture </head>. On ouvre directement après la partie BODY, le corps du code, avec la balise <body>. Cette partie contient toutes les données visibles de la page web: le texte, les liens, les tableaux, les images... Il s’agit de la partie visible du code HTML.

Balise h1
<h1>Bonjour</h1>

Les balises <h1> sont utilisées pour délimiter un titre. Le « h » vient de « heading » en anglais. Il en existe six : h1, h2, h3, h4, h5 et h6. Elles permettent de hiérarchiser l’importance des titres h1 étant un titre de premier niveau, donc le plus important, h2 un titre de niveau secondaire, ainsi de suite jusqu’à h6.

Les balises h indiquent également aux moteurs de recherche les informations importantes de votre page. Les mots-clefs contenus entre des balises h1 seront d’avantage pris en compte dans le référencement.

Les balises <p>
<p>Voici une page en HTML</p>

Les balises <p> servent à marquer un paragraphe. Le navigateur sautera automatiquement une ligne en-dessous et au-dessous de chaque paragraphe. La taille des espaces en-dessous et au-dessous (margin) pourront être modifié par la suite avec un fichier CSS.

Fermeture des balises BODY et HTML
</body>
</html>

On place à la fin du code les balises fermantes </body> et </html>. Signifiant la fin du corps de code, partie BODY, et la fin du code HTML avec </html>

Commentaires

avatar
Eric

Bien pour commencer dans le HMTL, mais il manque des éléments...

avatar
Le grolandais

Cela a l'air compliqué...

Ecrire un commentaire