Ma première page HTML


Généralités sur HTML

HTML signifie HyperText Mark-up Language.

Les balises servent à donner des instructions :

Une balise se présente sous la forme d'une lettre ou d'un mot (son nom) entourés par les symboles < et >. Elle est en général double : ouverture et fermeture. Par exemple :
<p> commence un paragraphe; </p> termine le paragraphe.
<b> indique que le texte doit être écrit en gras; </b> met fin à la commande.


Le premier fichier HTML

<html>
 <head>
  <title>Ma première page</title>
 </head>
 <body>
  Bonjour le monde.
 </body>
</html>

Structure du fichier

Entête

L'entête est destiné à recevoir certains renseignements généraux sur le fichier : auteur, mots-clés, titre de la page, ...
Les balises <title> et </title> servent à définir le titre utilisé par le navigateur pour l'affichage de la barre de titre de la fenêtre ou pour l'insertion dans les favoris.

Corps

Le corps du fichier contient le texte qui constitue la partie visible du document.

Voir le résultat

Enregistrer le fichier texte sous le nom page1.html.
Exécuter page1.html pour le voir apparaître dans le navigateur.


Mise en forme du texte

Sauts de ligne

Ajoutons la ligne : "Voici ma première page HTML."
Affichons. Le navigateur recolle les deux lignes en une seule. Le saut de ligne du fichier source est interprété comme un simple espace.
Pour effectuer un saut de ligne dans le document :

Mise en valeur du texte

On distinguera deux types de mise en valeur : logique et physique.

Mettons la première ligne sous forme de titre avec les balises <h1> et </h1>. Il existe des balises <h2>, ..., <h6> pour des sous-titres.
Testons les balises <b> (gras) et <i> italique.
<p><b>Cette ligne est écrite en gras.</b></p>
<p><i>Celle-ci est écrite en italique.</i></p>

Utiliser des couleurs

Certaines balises peuvent être accompagnées d'attributs : la balise <body> permet de définir la couleur du fond de la page ainsi que celle du texte.
Les couleurs sont définies par une suite de 3 nombres hexadécimaux représentant les valeurs du rouge, du vert et du bleu.
Pour obtenir un texte écrit en blanc sur fond bleu, on complètera la balise <body> de la façon suivante :

<body bgcolor="#0000FF" text="#FFFFFF">
Il est aussi possible d'utiliser certains noms de couleurs : aqua, black, blue, fuchsia, ....
Ainsi,
<body bgcolor="#0000FF" text="yellow">
donnera un texte jaune sur fond bleu.

Alignement de paragraphes

Le texte d'un paragraphe peut être aligné à gauche, à droite ou centré.
On utilise pour cela l'attribut align de la balise <p> (ou <Hn>) qui pourra prendre les valeurs left, right ou center.
Pour centrer le titre on écrira :

<h1 align="center">Bonjour le monde.</h1>

Listes à puces

Les balises <ul> et </ul> servent à définir des listes à puces. Chaque ligne sera introduite par la balise <li>.

Par exemple :

 <p>Voici une liste à puces :</p>
 <ul>
 <li>première ligne de la liste</li>
 <li>deuxième ligne de la liste</li>
 <li>troisième ligne de la liste</li>
 </ul>


Exercice

Voici 10 questions concernant Internet. Cherchez les réponses sur le Web, puis présentez les dans un document HTML.