Introduction au HTML
Introduction
Lorsque nous créons un site web, nous allons diviser le travail en 3 sections: la structure de la page web, le style et le visuel de la page web et finalement le comportement de la page web. Chacune de ces 3 sections utilise son propre langage de programmation, soit respectivement le HTML, le CSS et le Javascript. La première chose à développer sera toujours la structure en HTML, c'est donc le premier langage que nous apprendrons.
Le HTML est un langage de balisage. Contrairement à un langage de programmation comme le Java ou le C#, les langages de balisage ne contiennent pas de logique. Ils ne servent qu'à définir et structurer de l'information. Le HTML sert donc à définir et à structurer nos pages Web. Comme vous pourrez le constater, le HTML sera beaucoup plus simple à apprendre qu'un langage de programmation. Vous serez très à l'aise avec son utilisation au bout de seulement quelques semaines.
Il est important de noter: Chaque page web est un fichier HTML.
Les balises
Puisque le HTML est un langage de balise, il est essentiel de savoir ce qu'est une balise en HTML pour pouvoir l'utiliser. En effet, en HTML, tout est une balise. On les retrouve généralement sous le format suivant:
Chaque balise possède un nom. Elles vont aussi, en général, contenir du texte ou d'autres balises. Finalement, une balise doit se fermer à l'aide d'une balise de fermeture contenant une barre oblique /. C'est ce qu'on appelle une balise en bloc. Il existe aussi des balises qui ne peuvent rien contenir. On appelle ces balises des balises en ligne. Dans ce cas particulier, nous omettrons la balise de fermeture et mettrons la barre oblique / directement à la fin de la balise d'ouverture.
Il existe plus de 100 balises différentes en HTML et elles utilisent tous une syntaxe similaire à celle montré ci-dessus. Vous n'aurez pas à apprendre toutes les balises par coeur, mais il est important de connaître les balises de base. Pour les balises plus complexe ou plus rarement utilisé, vous pourrez utiliser les ressources disponibles sur ce site ou ailleurs sur Internet. Nous commencerons à voir plus en détail chaque balise un peu plus tard. Pour le moment, voyons comment construire la structure de base d'une page Web.
Gabarit d'un fichier HTML
Chaque page Web que nous allons créer utilisera le gabarit HTML de base ci-dessous. Comme tous les fichiers de code, les fichier HTML sont des fichiers textes. Pour les créer, vous pouvez simplement créer un fichier texte vide dans votre explorateur de fichier où vous changerez l'extension pour .html au lieu de .txt. Vous pouvez aussi créer le fichier directement dans votre éditeur de code, en vous assurant de bien mettre l'extension à .html. Si le fichier n'a pas la bonne extension les navigateurs Web ne seront pas en mesure d'afficher votre page Web.
Chaque balise dans ce gabarit est importante. Voici donc une courte explication de chacune d'entre elle:
- <!doctype html>
- Commande indiquant au navigateur Web que le fichier contient du HTML sous le format le plus récent. Contrairement à ce que l'on peut penser, cette commande n'est théoriquement pas une balise, mais plutôt une instruction de contrôle pour le navigateur. Assurez-vous de toujours ajouter le Doctype au haut de votre fichier HTML.
- <html>
- La balise englobant la page Web. Toute la page Web au complet est inséré à l'intérieur de cette balise. Nous indiquons aussi la langue du contenu de la page Web dans cette balise.
- <head>
- La balise indiquant au navigateur quoi faire avant d'afficher la page. Toutes les balises à l'intérieur du <head> servent à configurer la page Web avant son affichage. On y mettra plusieurs balises de configuration à l'intérieur.
- <meta>
- La balise permettant de donner de l'information sur la page. Nous l'utilisons généralement pour indiquer certaines informations importante au navigateur ou aux moteurs de recherche. Elle se retrouve uniquement à l'intérieur de la balise <head>. Dans notre gabarit, nous l'utilisons pour indiquer l'encodage de la page Web (utf-8) et la fenêtre d'affichage pour que le site web fonctionne mieux sur les versions mobiles.
- <title>
- La balise permettant d'indiquer le titre de la page. Le titre de la page sera affiché dans l'onglet de la page Web dans le navigateur. Comme pour la balise <meta>, la balise <title> se retrouve uniquement à l'intérieur de la balise <head>. De plus, une page Web doit contenir un seul titre.
- <body>
- La balise contenant le corps de la page Web. Essentiellement, toutes les balises contrôlant l'affichage et la structure du site Web se retrouve à l'intérieur de cette balise. Nous mettrons donc la majorité de notre code dans la balise <body>.
Si vous ouvrez le fichier HTML ci-dessus dans votre navigateur, vous aurez simplement une page blanche avec un titre. Nous verrons dans les prochaines pages comment ajouter des éléments à notre page Web à l'aides de différentes balises.