Formations à l'informatique et à l'électronique

Auteur : SD
Modifié le : 14-03-2014
Créé le : 10-10-2013

Premiers pas en HTML

Sommaire

Introduction

Le langage HTML (HyperText Markup Language) est un langage dit "à balises". D'une manière très simplifiée, les balises permettent de mettre en forme le texte (titres, liens, tableaux,...) ou d'y placer des objets (images, sons, vidéos).

Depuis les débuts du langage (dans les années 1990) il y a eu de nombreuses évolutions et améliorations. La dernière version du langage est le HTML 5. Les pages WEB actuelles, en plus du HTML, intègrent du CSS, du javascript,...

Le but de ce document est de découvrir à travers des exemples simples les balises les plus courantes que l'on peut rencontrer dans un document HTML.

A propos du CSS

À l'origine les pages étaient codées en HTML uniquement (pas de CSS, de JavaScript,...). Il existe donc des balises pour mettre en forme le texte : couleur, gras, italique,... Ces balises sont obsolètes et ne seront pas décrites ici.

En effet, depuis l'introduction du CSS, la partie HTML contient uniquement le contenu (le fond) et le CSS permet de mettre en forme la page.

Un autre article sur le CSS est disponible ici mais il est préférable d'avoir quelques connaissances en HTML avant de se lancer dans le CSS....

Place maintenant à la pratique.

Code minimum d'une page HTML 5

Voici ci-dessous le code minimum d'une page HTML 5.

<!DOCTYPE html>
<html lang="fr"> <!-- La balise <!-- --> permet d'insérer des commentaires dans votre code -->
<head> <!-- En-tête de la page -->
<meta charset="utf-8" /> <!-- Cette balise indique l'encodage utilisé dans votre fichier .html ici utf-8 -->
<title>Titre de votre page WEB</title> <!-- Ce titre s'affiche dans l'onglet du navigateur -->
</head>
<body> <!-- Corps de la page -->
Contenu de votre page WEB.
</body>
</html>

Copier / coller le code ci-dessus dans un éditeur de texte (Visual Studio Code, Brackets, Notepad++ ou Sublime text) et enregistrez le sous le nom "pagemini.html". Ouvrez ce fichier dans un navigateur (Firefox, Chrome,...).

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code minimum html 5 dans un navigateur

Remarques :

Premières balises

Modifier la partie <body> du code précédent ainsi :

...
<body> <!-- Corps de la page -->
Contenu de votre page WEB.
Une deuxième ligne dans ma page WEB.
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code sans br html 5 dans un navigateur

Oups, il n'y a pas de retour à la ligne dans le navigateur ! En effet, les sauts de lignes que l'on met dans notre fichier HTML ne sont pas pris en compte par le navigateur. Pour faire un saut de ligne, il faut utiliser la balise <br>.

le code correcte est :

...
<body> <!-- Corps de la page -->
Contenu de votre page WEB.<br>
Une deuxième ligne dans ma page WEB.
</body>
</html>

La balise <p> permet d'organiser la page web en paragraphes. Par rapport à un saut de ligne, les 2 paragraphes seront séparés par une interligne.

...
<body> <!-- Corps de la page -->
<p>Premier paragraphe de ma page. Je fais un saut de ligne dans ce paragraphe.<br>Toujours dans le paragraphe 1 mais après le saut de ligne.</p>
<p>Deuxième paragraphe de ma page WEB.</p>
</body>
</html>
rendu du code avec br et p html 5 dans un navigateur

Pour un affichage correct des caractères accentués, convertir votre fichier en UTF-8 comme indiqué ci-dessous :

Convertir en UTF8 notepad++

Les titres

Les balises <h1> à <h6> permettent d'appliquer différents niveaux de titres au document HTML. Les mots clés employés dans les titres sont très importants pour le référencement des pages WEB car les moteurs de recherche leurs accordent un poids important.

Exemple :

...
<body> <!-- Corps de la page -->
<h1>Titre H1</h1>
<h2>Titre H2</h2>
<h3>Titre H3</h3>
...
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code html 5 avec h1 h2 h3 dans un navigateur

Les images

L'insertion d'une image dans un document se fait avec la balise <img>. Il faut préciser au minimum la source de l'image et également indiquer un texte alternatif, avec l'attribut "alt" qui sera affiché à la place de l'image si celle-ci, pour une raison ou une autre, ne peut pas être affichée. Ce texte alternatif sera également "lu" par les moteurs de recherche leur permettant ainsi de "comprendre" les images qui sont sur la page améliorant ainsi le référencement de votre page. Ce texte alternatif est également destiné aux personnes non voyantes : elles bénéficient alors d'une description de l'image.

Exemples :

...
<body><!-- Corps de la page -->
...
<!-- Image avec src indiqué en chemin relatif -->
<img src="./linux_server_lo.png" alt="Clipart libre serveur Linux" >

<!-- Image avec src indiqué en chemin absolu -->
<img src="http://www.electro-info.ovh/images/linux_server_lo.png" alt="Clipart libre serveur Linux" >

<!-- Image avec info bulle -->
<img title="Texte qui apparait dans l'info bulle" src="./linux_server_lo.png"
alt="Clipart libre serveur Linux" >

<!-- Image d'un autre site -->
<img src="http://www.openclipart.org/image/800px/svg_to_png/188904/linux_server.png"
alt="Clipart libre serveur Linux" >
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

Les liens hypertexte

L'insertion d'un lien dans un document se fait avec la balise <a>. Le lien peut être classiquement du texte ou une image. Comme pour les images, le chemin peut être absolue ou relatif.

Exemples :

...
<body><!-- Corps de la page -->
...<br>
<!-- Lien hypertexte simple chemin absolu -->
<a href="http://www.openclipart.org">Lien vers openclipart.org</a><br>

<!-- Lien hypertexte simple chemin relatif -->
<a href="./page2.html">Lien vers page2.html</a><br>

<!-- Lien hypertexte avec info bulle -->
<a title="Texte qui apparait dans l'info bulle" href="./page2.html">Lien vers page2.html</a><br>

<!-- Lien hypertexte appliqué à une image -->
<a title="Lien vers le site openclipart.org" href="http://www.openclipart.org">
<img src="./linux_server_lo.png"/> </a>
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code html 5 avec balises a et img dans un navigateur

Les listes

Liste à puces (non numérotée)

L'insertion d'une liste à puces se fait avec la balise <ul>. Les éléments de la liste sont ensuite délimités par la balise <li>.

Exemple :

...
<body><!-- Corps de la page -->
...
<!-- Liste à puces (non numérotée) -->
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ul>
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code html 5 avec balises ul

Liste numérotée

L'insertion d'une liste numérotée se fait avec la balise <ol>. Les éléments de la liste sont ensuite délimités par la balise <li>.

Exemple :

...
<body><!-- Corps de la page -->
...
<!-- Liste numérotée -->
<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>...</li>
</ol>
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code html 5 avec balises ol

Les tableaux

Un tableau est introduit par la balise <table>. Ensuite, les différentes lignes sont délimitées par la balise <tr>. Enfin les cases sont délimitées par la balise <td>.

Exemple :
Remarque : Les attributs "border" et "cellspacing" utilisés ici devraient normalement être remplacés par du CSS. Ils ont été utilisés ici car par défaut "border" est à 0 et les bordures du tableau sont alors invisibles.

...
<body><!-- Corps de la page -->
...
<!-- Début du tableau -->
<table border=1 cellspacing=0>
<tr> <!-- Ligne 1 -->
<td></td><td>A</td><td>B</td>
</tr>
<tr> <!-- Ligne 2 -->
<td>1</td><td>A1</td><td>B1</td>
</tr>
<tr> <!-- Ligne 3 -->
<td>2</td><td>A2</td><td>Cellule B2</td>
</tr>
</table>
<!-- Fin du tableau -->
</body>
</html>

Ce code HTML produit l'affichage ci-dessous dans le navigateur :

rendu du code html 5 avec balises table tr et td

On peut remarquer que la taille des cellules s'adapte automatiquement au texte. Par défaut le texte est aligné à gauche.

Autre balises relatives aux tableaux

Validation de votre code HTML

Pour vérifier qu'une page HTML respecte les standards du WEB, il est possible d'utiliser le site W3.ORG. La validation peut se faire en faisant un copié / collé du code HTML ou en entrant l'URL du site à vérifier.

Copie d'écran du site W3.ORG

Résumé des balises détaillées dans cet article

BALISERôLE
<html>...</html>Balise globale de la page Web
<head>...</head>En-tête de la page WEB
<body>...</body>Corps de la page WEB
<title>...</title>à placer dans la balise <head>, c'est le titre qui va apparaitre dans l'onglet du navigateur
<br>Saut de ligne
<hr>affichage d'une ligne horizontale
<p>...</p> Paragraphe
<h1>...</h1>Titre de niveau 1
<h2>...</h2>Titre de niveau 2
<h3>...</h3>Titre de niveau 3
<h4>...</h4>Titre de niveau 4
<h5>...</h5>Titre de niveau 5
<h6>...</h6>Titre de niveau 6
<img ... />Image
<a>...</a>Lien hypertexte
<ul>...</ul>Liste à puces
<ol>...</ol>Liste numérotée
<li>...</li>éléments d'une liste (à puces ou numérotée)
<table>...</table>Balise globale d'un tableau
<tr>...</tr>Ligne d'un tableau
<td>...</td>Cellule d'un tableau
<sup>...</sup>Texte en exposant
<sub>...</sub>Texte en indice
<del>...</del>Texte barré
<blockquote>...</blockquote>Citation

Articles connexes

Webographie


Vous avez apprécié cet article ? Partagez le !

Article connexe : Premiers pas en CSS