Création d'une page web

La page web qui s'affiche dans la fenêtre d'un navigateur est générée à partir d'un simple fichier texte. Ce fichier est enregistré avec l'extension .html et il est écrit en utilisant 2 langages : le HTML et le CSS.

Le langage de base est le langage de description HTML (HyperText Markup Langage). Il permet de structurer le contenu de la page web, comme les titres, les paragraphes, les listes, les tableaux, etc.

Le second langage est le CSS (Cascading Style Sheets). Celui-ci permet de faire la mise en forme, comme le choix des polices de caractères, les couleurs, etc. Il fonctionne en attribuant aux balises HTML des propriétés qui définissent leur style.

Enfin il est possible d'ajouter de l'interactivité à une page web en utilisant le langage de programmation JavaScript.

Organisation générale

Le squelette d'un fichier .html est le suivant :

<!DOCTYPE html>
<html lang="fr">
 
<head>
<meta charset="uft-8"/>
<title>Titre de la page</title>
<meta name="description" content="Résumé de la page."/>
<style>

...

</style>
</head>

<body>

...

</body>

</html>

Le langage HTML est un langage à balisage, par exemple l'ensemble du code de la page figure entre les balises :

<html lang="fr"> et </html>.

La balise ouvrante est <html lang="fr"> et la balise fermante est </html>. Ainsi les noms des balises sont entre chevrons et le nom de la balise fermante débute par un slash. Une balise ouvrante peut contenir un ou plusieurs attributs. Par exemple l'attribut lang="fr" spécifie que le contenu de la page HTML est rédigé en langue française.

Le code HTML de la page se décompose en deux parties :

Le corps commence généralement par un titre principal. Il peut-être constitué de plusieurs sous-sections et de paragraphes.

Quelques éléments du langage HTML

Les titres

Pour afficher un titre il faut utiliser :

Tester sur w3schools

Les paragraphes

Le contenu d'un paragraphe doit figurer entre des balises <p> et </p>. Pour faire un saut de ligne dans un paragraphe il faut utiliser une balise <br/> (elle n'a pas de balise fermante séparée, mais elle se termine par / : il s'agit d'une balise auto-fermante).

Tester sur w3scools

Les hyperliens

Les hyperliens permettent de naviguer de pages en pages. Pour inclure un lien il faut utiliser une balise <a> dont l'attribut href indique le nom du fichier de la page de destination.

Exemple : <a href="une_autre_page.html">Aller à l'autre page</a>

Les images

Pour inclure une image dans un paragraphe il faut utiliser une balise <img>. L'attribut src doit obligatoirement être défini avec le nom du fichier qui contient l'image. Comme <br/>, la balise <img> est auto-fermante.

Exemple : <img src="mon_image.jpeg"/>

Pour continuer : Un exemple commenté de page web