Accueil - HTML - CSS - Propriétés CSS - Création de page web - Exercices des élèves - Retour

Le HTML

L’Hypertext Markup Language, généralement abrégé HTML, est le langage conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. Il permet de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il est souvent utilisé conjointement avec des langages de programmation (type JavaScript) et des formats de présentation (CSS ou feuilles de style en cascade).

Les balises et leur orthographe

L'écriture du HTML s'effectue à l'aide de balises. Chaque balise correspondra à un élement (texte, image, effet,...) sur la page. Toutes les balises sont ouvertes en début d'élement et fermées en fin d'élément (sauf meta, link,...) . Prenons l'exemple de la balise strong qui correspond au caractère en gras. Pour ouvrir la balise on utilise la syntaxe <strong> et pour la fermer </strong>. Ainsi le code <strong>Bonjour!</strong> donnera Bonjour!

La page web de base

La balise <html> vient toujours en premier, elle indique le langage utilisé.

Les balises <head></head> contiennent l'en-tête de page, c'est la "carte d'identité" du site, on y inclue les balises <meta> qui définissent les mots clés pour le référencement, les paramètres de caractères, la description de la page, l'auteur de la page, on y inclue égalment le titre de la page, ainsi que les liens vers les fichiers de mise en page (CSS) et d'effets (Javascript). On ne voit pas son contenu sur la page.

La balise <body> contient tout le corps du texte, c.à.d. tout ce que l'on voit sur la page web.

Quelques exemples de balises

1. Les balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre et :

<link/> Liaison avec une feuille de style
<meta/> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page


2.Balises de structuration du texte
<a> Lien hypertexte
<p> Paragraphe
<br> Saut de ligne
<i>
Italique
<strong> Caractère gras
<h1> Caractère de niveau 1 (il y a six niveaux prédéfinis)
<img> Image
<audio>
Son
<video> Vidéo


3.Balises de listes, de tableau et de formulaire
<ul> Liste à puces
<ol> Lise numérotées
<li> Élément de la liste à puces
<table>
Tableau
<tr> Ligne de tableau
<td> Cellule
<form> Fomulaire
<textarea>
Zone de texte
<input> Libellé d'un champ de formulaire
<label> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<select> Liste déroulante


4. Les balises de section
Ces balises permettent de construire le squelette de notre site web.

<header> En tête
<nav> Element de navigation (menu, sous-menu,...)
<footer> Pied de page
<section> Section


5. Les balises universelles

Les balises universelles sont des balises qui n'ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre »,etc.
Parfois, on a besoin d'utiliser des balises universelles car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l'une est inline, l'autre est block.


<div> Balise générique de type block
<span> Balise générique de type inline