Le langage HTML

(Section : "Les articles")
3

Le langage HTML

Article publié le Mercredi 22 novembre 2023 , lu 11 fois

Illustration : Le langage HTML

Le fonctionnement d'un site WEB

Un site WEB est un ensemble de page, voir une seule page, écrite(s) en langage HTML. Ce langage est ensuite interprété par un navigateur WEB, comme Chrome, Firefox, Edge ou autres…

Le langage HTML a été créé par Tim Berners-Lee et est apparu pour la première fois en août 1991. Il fonctionne avec le protocol HTTP (Hypertext Transfer Protocol) et les URL (Uniform Resource Locator), à la base de la création du WWW (World Wide Web). Le langage HTML évoluera vers sa version majeure HTML4 en 1997, puis vers la version HTML5 en octobre 2014.

Le langage HTML est constitué de "balises" qui de son origine et jusqu'a sa version 4 permettait une mise en forme succinte des documents. Puis sont apparues las feuilles CSS (Cascading Style Sheets).

Le langage HTML

Historique du language HTML

Nous allons voir ici la structure générale d'un document "une page HTML". bien entendu, tout au long de ce tutoriel nous parlerons de la dernière version du language HTML qui est la version 5 et se nomme HTML5.

La strucuture de base d'une page HTML5


	<!doctype html>
	<html lang="fr">
	  <head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
		<link rel="stylesheet" href="style.css">
	  </head>
	  <body>
		Ici le contenu de la page…
	  </body>
	</html>

Le "doctype"

Le doctype (Document type), est présent en début de document, il en spécifie sa syntaxe. Pour le HTML5, c'est toujours : <!DOCTYPE html>

La langue utilisée

En HTML 5, la langue utilisée dans le document et donc le site WEB, est incluse dans la balise générale <html>. Elle y est incluse sous la forme d'un attribut "lang", ici nous utilisons le Français.

Nous verrons plus loin, qu'en HTML5 les balise sont pratiquement toujours fermées. Une balise fermée se presente de la sorte <balise>…</balise>. Si l'on regarde le code ci-dessus, on voit, qu'a l'exception du doctype, le document est entre deux balises "html". Il en ira de même pour les sous parties du code.

Le "head"

C'est dans ce sous-ensemble que nous retrouverons les informations utiles pour le site WEB en dehors de son contenu. Elle délimite la section d'en-tête (head) du document. L'élément <head> contient les métadonnées du document, les liens vers la ou les feuilles CSS et autres…

Le jeu de caractères utilisé

Sous la forme d'une balise "meta" on définit ici le "Charset" (Jeu de caractères) utilisé sur le site WEB qui est en relation direct avec la langue utilisée et la situation géographique principale. Nous utilisons ici UTF-8 (Universal character cet Transformation Format - 8 bits).

L’UTF-8 est utilisé par environ de 95% des sites WEB à l'automne 2020. C'est aussi le codage le plus utilisé dans les systèmes GNU et Linux et pour gérer le plus simplement possible des textes et leurs traductions dans tous les alphabets du monde.

Le "title"

La balise "title" spécifie le nom de votre page WEB, c'est le texte qui s'affichera dans l'onglet de votre navigateur WEB.

Les CSS

Ici on fait le lien (link) vers le fichier CSS de la page WEB, en spécifiant au navigateur qu'il s'agit d'une feuille de style grâce au paramètre "rel". Cette feuille de style va prendre en charge la mise en page et la "décoration" de votre page WEB.

le "body"

Le "body" encapsule touts les textes, données, images… à afficher sur votre page. C'est le contenu de votre page. Ce body sera subdiviser en plusieurs parties pour la mise en page de votre site WEB (En-têtes, sections, menus, pied de page…)

Notre première page HTML

Nous allons créer notre première page afin de voir ce que ça donne et pouvoir entrer rapidement dans le vif du sujet.

Pour cela, il va nous falloir un outil pour écrire des pages en langage HTML. Si vous codez déja vous pouvez utiliser vos outils préférrés. Cet outil se nomme un "editeur", étant sous Windows, on utilisera le "Notepad++", pour sa puissance et sa simplicité d'utilisation.

Vous allez copier coller ce code dans votre éditeur, ou l'écrire :


	<!doctype html>
	<html lang="fr">
	  <head>
		<meta charset="utf-8">
		<title>Ma première page HTML !</title>
	  </head>
	  <body>
		<h211>Mon premier contenu</h211>
		<p>Comme c'est facile de programmer en HTML, 
		je ne croyais pas cela si simple…</p>
	  </body>
	</html>

Les deux seules balises utilisées ici son "h211" et "p". Les balises "h211 à h6" encadrent les titres, et la balise "p" délimite les paragraphes. Mais nous reverrons cela plus loin.

Maintenant enregistrez votre page sous la forme "maPage.html", puis double cliquez sur le fichier enregistré.

Votre navigateur (Celui utilisé par défaut par Windows) va se lancer et afficher votre page.

Facile, non ?

Dans la catégorie : Informatique (articles)