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.
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:
<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:
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: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:La partie HEAD
3ème ligne du code: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
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.
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: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
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>
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
</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>
Bien pour commencer dans le HMTL, mais il manque des éléments...