Création de site web | Tutoriel sur le langage HTML

1 janvier 2013

Apprendre le HTML est vraiment facile, vous n’avez nul besoin de connaissances préalables de conception ou de programmation web.

 

Notions de base en création de site web : Le HTML

Le HTML – H yper T ext M arkup L angue (N’est pas un langage de programmation mais un langage de balisage) est utilisé pour créer des pages web 
Le HTML est un simple fichier texte qui est lu par les navigateurs Web (Internet Explorer et Google Chrome) et affiché en tant que page Web. C’est avec le HTML que vous pourrez créer votre propre site web. Ce tutoriel destiné aux débutants abordera les notions de base de la création de site internet. 

Configuration logicielle requise:

Vous n’avez besoin d’aucun logiciel spécial ou serveur Web pour réaliser ce tutoriel. Seuls les pages dites « dynamiques » en trouveront l’utilité. Le langage HTML dit « statique », peut être exécuter simplement sur votre navigateur, depuis votre disque dur.
Bien qu’il existe plusieurs logiciels comme Visual Web Developer, Dream weaver, FrontPage, etc qui peuvent être utilisés pour générer des codes HTML, il est fortement recommandé de commencer avec un logiciel de type bloc-notes. Il est conseillé d’utiliser un logiciel de bloc note tel que Notepad++ qui, en plus de fournir de nombreuses fonctionnalités, reconnaîtra votre code et lui donnera un aspect plus lisible qu’un simple bloc note.

Notepad ++

Commencez par créer un nouveau dossier dans votre ordinateur pour y stocker des codes html (de préférence sur le bureau pour un accès facile).  Assurez-vous d’enregistrer les fichiers avec soit l’extension ‘. html’ ou « . htm » . Ces deux extensions sont une seule et même que vous pouvez utiliser pour créer des fichiers web.

Code HTML pour votre première page web!

Tapez le code suivant dans votre Bloc-notes : 

<html>
<head>
    <title> Ma première page web </title>
</head>
<body>
    Bonjour tout le monde!
</body>
</html>
Enregistrez le fichier texte sous le nom «mapageweb.html» ou «mapageweb.htm ‘ dans votre dossier précédemment créé. N’oubliez pas de bien définir l’extension en «. html» ou «. htm» à la place du traditionnel « .txt « . Sans cela votre code html ne fonctionnera pas. Maintenant, allez dans le dossier dans lequel vous venez d’enregistrer votre page Web et double-cliquez pour l’ouvrir. Vous venez de créer votre première page web. Félicitations …!

Les balises HTML et les éléments

Maintenant, nous allons survoler les différents codes html afin d’apprendre des choses intéressantes. Ce sont les notions de base en html.

Exemple balises HTML
<html>
<head>
    <title> Ma première page web </title>
</head>
<body>
    Bonjour tout le monde!
</body>
</html>

Dans l’exemple ci-dessus, <html>, <head>, <title> et body sont les balises HTML. Les balises HTML sont des mots de code entouré par des crochets. Lors de l’ouverture d’une page, le navigateurs Web parcoure les différente balises afin de structurer les pages Web.

De nombreux types de balises peuvent être utilisées dans les documents HTML, chacune ayant une signification différentes. La plupart de ces balises viennent en paire – balise de début et balise de fin. La balise de fin  différe de celle du début pa sa barre oblique « / ».

Lespages Web sont composés d’une série d’éléments. Les éléments sont constitués de balise de début, de balise de fin et d’un contenu plus ou moins important entre les deux. Dans l’exemple ci-dessus,  » <title> Ma première page web </ title> « est un élément.

 

Les balises HTML

Le code HTML est toujours contenu entre <html> et </ html>. 

Toutes les autres balises viennent entre ces balises parentes. 

La balise <title> décrit le titre de la page Web. Le contenu entre ces balises apparaîtra dans la barre de titre de la page.

Les moteurs de recherche tels que «Google» et «Bing» donnent beaucoup d’importance aux titres des pages dans leurs résultats de recherche. Assurez-vous de mettre un titre approprié pour l’ensemble de vos pages Web.

Les balises <title> sont placés entre <head>. Le contenu présent entre les balises <head> n’apparaîtra pas directement dans le contenu de la page Web. Il est principalement utilisé pour fournir des informations sur la page ( titre, langue, mots-clés…) en dehors de quelques autres fonctions (nous y reviendrons plus tard). Les balises <head> sont placés avant les balises <body> dans la structure html. Le texte entre les balises < body > et </ body> représente le contenu visible de votre pagea page Web.