Hypertext Markup Language

« Hypertext Markup Language » expliqué aux enfants par Vikidia, l’encyclopédie junior
Aller à : navigation, rechercher
Exemple de document très simple écrit en HTML

Le HTML, ou HyperText Markup Language en anglais, est un langage informatique qui sert à écrire une page Web.

On peut retrouver le code HTML d'une page en faisant par exemple un clic droit sur la page, puis "Code source de la page".

Il y a plusieurs versions de HTML : HTML 1, HTML 2, HTML 3.2, HTML 4, HTML 5. Il existe aussi des déclinaisons du HTML, comme le XHTML 1.0.

La base d'une page en HTML[modifier | modifier le wikicode]

Voici le code de base d'une page écrite en HTML5 :

<!DOCTYPE html>
<html>
	<head>
		<title>Le titre de la page</title>
		<meta charset="utf-8" >
		<!-- cela sert à préciser l'encodage, c'est à dire comment les lettres sont codées pour que l'ordinateur sache comment les lire. La balise <meta> est très spéciale : elle n'a pas besoin de /> pour terminer. -->
	</head>
	<body>
		<p>Ici se trouve le texte de votre page !</p>
	</body>
</html>

Quelques balises[modifier | modifier le wikicode]

Toutes ces balises se mettent entre les balises <body> et </body>. En effet, il n'existe que très peu de balises qui se mettent dans le header.

Un lien hypertexte[modifier | modifier le wikicode]

Vous pouvez mettre un lien hypertexte dans votre page, il suffira alors de cliquer dessus pour accéder à la page demandée.

Voici la balise à utiliser pour ajouter un lien :

<a href="url_de_la_page_cible">Le texte à cliquer pour le lien</a>

Exemple[modifier | modifier le wikicode]

Par exemple, si nous voulons insérer un lien vers Wikipédia, nous utiliserions la balise ainsi :

<a href="https://fr.wikipedia.org/">Wikipédia</a>

Ce qui donne : Wikipédia.

Une image[modifier | modifier le wikicode]

Vous pouvez également ajouter une image dans une page HTML.

La balise d'image, img, s'utilise ainsi :

<img src="URL_de_l'image" alt="Texte alternatif" title="Infobulle informative sur l'image" />

Parmi les attributs, seul src est obligatoire, mais les autres peuvent servir. Voici la liste des attributs que peut prendre img :

  • src (obligatoire) : L'URL de l'image.
  • alt : Le texte alternatif de l'image. Celui-ci sera affiché en cas d'erreur, si l'image ne peut pas s'afficher.
  • title : Si vous le renseignez, un texte informatif sur l'image s'affichera au survol.
  • Il y en a aussi d'autres, mais les trois ci-dessus sont les plus utilisés.

Exemple[modifier | modifier le wikicode]

Voici un exemple, imaginons que vous souhaitez afficher une image qui s'appelle « arbre. png » et qui se trouve dans le dossier « images » ; Vous ferez donc ainsi pour l'afficher :

<img src="images/arbre.png" alt="Un arbre" title="Photo du noisetier dans mon jardin."/>

Et vous avez votre image qui s'affiche !

Et bien d'autres ![modifier | modifier le wikicode]

Il existe un nombre considérable de balises, c'est pourquoi nous ne pourrons pas toutes les citer dans cet article. Cependant, vous pouvez les trouver en faisant une simple recherche sur Internet.

D'autres langages[modifier | modifier le wikicode]

Un site Web c'est bien, même statique (qui reste toujours le même), mais un site Web dynamique et interactif, c'est mieux. Certains langages ont été conçus pour cela:

  • Il y a par exemple le DHTML, Dynamic HTML qui sert à faire des animations, par exemple, intégrées dans un code HTML.
  • Il existe aussi le Javascript, qui est assez similaire au DHTML.
  • Il existe aussi le langage PHP (PHP Hypertext Preprocessor) qui a la particularité d'être un langage serveur, c'est-à-dire que c'est le serveur qui gère la page avant de l’envoyer à l'utilisateur.

Et il y en a bien sûr beaucoup d'autres!

Vikilien externe[modifier | modifier le wikicode]

Langages de programmation.svg
Les langages de l’informatique
Internet. Portail Internet —  Tous les articles sur Internet, son histoire, le web, les sites internet et le réseau.
Portail de l'informatique —  Tous les articles sur son histoire, les logiciels, Internet…