HTML est le sigle de "Hypertext Markup Language" (ou Hyper Text Markup Language), en français "langage de balisage d'hypertexte", c'est-à-dire un langage utilisant des balises pour structurer un document et permettant, à partir de ce document, à l'aide de liens (appelés hyperliens ou liens hypertexte), de consulter d'autres documents sur Internet (le fameux World Wide Web, ou web, ou "la Toile" en français). Ces documents sont généralement nommés "pages web".
Le langage HTML a connu bien entendu plusieurs versions depuis sa création en 1989. Bien que les versions 4 du HTML aient continué à être majoritairement utilisées par les créateurs de sites, un langage plus strict, le XHTML, est élaboré, de 2000 à 2006, connaissant 2 versions.
En 2008, le XHTML est abandonné et une version du langage, plus complète, voit le jour, le HTML5, la norme aujourd'hui.
Le plan de construction d'une page web est traditionnellement constitué de 2 parties principales:
- une en-tête appelée "header" dont le contenu, qui ne s'affiche pas sur l'écran, renferme des informations utiles au
navigateur (logiciel qui vous permet d'accéder à l'internet et de vous déplacer de page web en page web). Les navigateurs les plus connus sont Internet explorer, Netscape, Firefox, Opera, Google Chrome, Safari ... - un corps appelé "body" contenant tout ce qui va s'afficher à l'écran.
Lancez PSPad en cliquant double sur l'icone de raccourci ou par le menu Démarrer. Avant toute chose, faîtes un clic droit sur l'onglet "Nouveau1.txt" et cliquez sur "Fermer". Cliquez en haut à gauche sur "Fichier" puis sur "Nouveau". Cliquez sur "HTML" puis sur "OK". Sélectionnez tout le texte dans la fenêtre de saisie et supprimez-le. Cliquez de nouveau sur "Fichier" puis sur "Enregistrer sous". Recherchez le dossier "www" de "Wamp" en cliquant sur "C" dans la colonne de gauche puis double clic sur "wamp" dans la colonne de droite puis double clic sur "www": dans "Nom du fichier" sélectionnez "Nouveau1.html", supprimez-le et tapez à la place "index.html" puis cliquez sur "Enregistrer".
Lancez maintenant "Wamp" en cliquant double sur son icone de raccourci. Cliquez "Oui" dans la fenêtre qui s'ouvre. Quand l'icone dans la barre des taches en bas de la page est devenue verte, cliquez dessus puis cliquez sur "www directory". Dans la page qui s'est ouverte, cliquez double sur "index.html". A ce stade, la page qui va s'afficher est entièrement blanche.
Quand votre page est ouverte dans "Wamp", à chaque fois que vous aurez ajouté du code dans votre fichier avec PSPad et que vous aurez enregistré les modifications, il vous suffira d'actualiser la page dans "Wamp" en pressant la touche "F5" sur votre clavier.
Les balises sont des mots-clé qui, pour être distingués et interprétés par votre navigateur, sont encadrés par les chevrons < et > (ouvrant et fermant): par exemple la balise <p> annonçant le début d'un paragraphe.
Pour indiquer la fin de ce paragraphe, il faudra réutiliser la même balise, mais dans sa version fermante </p> (le slash placé avant le mot-clé indique la fermeture).
Le navigateur lit et interprète les balises dans l'ordre et l'une après l'autre à partir du haut à gauche du code de votre page jusqu'au bas à droite et affiche le contenu de votre page à l'écran en fonction du résultat de l'ordre dans lequel les balises ont été disposées dans le code.
La première règle est qu'une balise ouverte doit toujours être refermée.
Nous verrons plus loin que quelques balises bénéficient d'une simplification d'usage, notamment la balise <p> qui peut s'écrire <p /> à l'ouverture du paragraphe et qui ne se refermera que lorsqu'une nouvelle balise sera rencontrée (on dit que ces balises sont auto-fermantes).
La deuxième règle est que les balises sont toujours écrites en minuscules.
Ce ne fut pas toujours le cas mais c'est la règle aujourd'hui. Une seule exception à cette règle, la balise <!DOCTYPE> (le doctype n'est pas à vraiment parler une balise HTML mais une indication donnée au navigateur sur la façon dont il doit interpréter le code en fonction de la version du langage HTML). Elle se place en tout début de page. Le doctype pour HTML5 est <!DOCTYPE html>.
La troisième règle est que, en cas d'emboîtement de balises les unes dans les autres, elles doivent être refermées dans l'ordre inverse de leur ouverture.
exemples:
<balise 1> <balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 2> </balise 1>
<balise 1> .... bla bla bla .... <balise 2> .... bla bla bla .... </balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 1>
exemples:
<balise 1> <balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 2> </balise 1>
<balise 1> .... bla bla bla .... <balise 2> .... bla bla bla .... </balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 1>
Immédiatement après le doctype, on place la balise <html> pour marquer le début d'une page HTML. La balise fermante </html> sera placée tout en bas du code pour indiquer la fin de la page web.
Après la balise <html>, on place l'en-tête de la page web en insérant la balise <head>. La fin de l'en-tête sera ensuite indiquée par la balise fermante </head>.
Après l'en-tête, le corps de la page débutera avec la balise <body> et se terminera avec la balise fermante </body> (qui sera immédiatement suivie par la balise </html>), comme ci-dessous.
Cliquez sur l'image pour l'agrandir
Pour l'instant, si on tente de l'ouvrir dans le serveur local, on n'obtient qu'une page blanche.
- Ouvrez PSPad comme je vous l'ai indiqué précédemment. Sur la page qui s'affiche, cliquez droit sur l'onglet "Nouveau.txt" → Fermer" puis cliquez sur Fichier → Nouveau → HTML → OK. Cliquez ensuite Fichier → Enregistrer sous. Dans la fenêtre qui s'affiche (c'est l'explorateur Windows) recherchez le dossier www situé dans wamp. Ouvrez-le en cliquant double dessus et tapez index.html à la place de Nouveau.html puis Enregistrer. Remplacez la ligne du DOCTYPE par <!DOCTYPE html> puis tapez un nom pour votre page entre les balises "title" puis cliquez sur Enregistrer.
-
Lancez wamp comme indiqué précédemment. Pour ouvrir la page "index.html" que nous venons de créer,
- soit vous lancez votre navigateur (Google Chrome, Firefox, Internet Explorer, etc) et vous tapez dans la barre d'adresse "http://127.0.0.1/index.html" soit "http://localhost/index.html" et vous ajoutez votre page dans vos Favoris pour la retrouver facilement sans avoir à retaper son adresse,
- soit vous cliquez sur l'icône verte de wamp dans la barre des tâches (en bas de la page près de l'horloge) puis vous cliquez sur "Répertoire www" puis vous cliquez double sur "index.html". Même chose pour les Favoris. La page qui s'ouvre doit être entièrement blanche.
Aucun commentaire :
Enregistrer un commentaire