Hypertext Markup Language/Première page
Introduction modifier
Une page HTML est composée d’un ensemble d'instructions données grâce à des balises.
Pour écrire du code HTML, il suffit d’utiliser n’importe quel éditeur de texte simple. N'utilisez pas de logiciel de traitement de texte, qui a tendance à reformater le texte écrit par l'utilisateur.
Les balises modifier
Définition modifier
Les instructions en HTML sont définies grâce à des balises (ou tags en anglais). Ce sont ces balises qui vont permettre au navigateur qui interprétera le code de faire la différence entre la présentation et le texte proprement-dit.
Les balises indiquent donc au navigateur comment mettre en forme le texte. Une balise s'écrit entre les signes inférieur (<) et supérieur (>), appelés également chevrons. Cela donne : <balise>. Une balise est en général accompagnée d’une seconde balise de la forme </balise>. La première balise est appelée balise d'ouverture ou balise ouvrante et la deuxième est nommée balise de fermeture ou balise fermante. La balise de fermeture permet d'indiquer au navigateur qu’il faut arrêter d'appliquer la mise en forme introduite par la balise ouvrante.
Prenons un exemple pour expliquer ce principe de balises ouvrante et fermante. La balise <i> permet de mettre le texte en italique. Ainsi, si dans la phrase Le langage HTML est un langage informatique, on veut mettre seulement le mot HTML en italique, on utilise la syntaxe suivante :
L'<i>HTML</i> est un langage informatique.
affichera
L'HTML est un langage informatique.
La balise ouvrante <i> indique au navigateur que la suite du texte doit apparaître en italique et la balise fermante </i> indique au navigateur qu’il doit cesser d'écrire en italique.
Les balises peuvent être écrites indifféremment en majuscules ou en minuscules. Cependant, il est conseillé de les écrire en minuscules pour assurer une plus grande compatibilité avec le XHTML et faciliter la migration vers ce langage le moment venu.
Une balise peut avoir un ou plusieurs attributs. Les attributs permettent de préciser les propriétés de la balise. Ils se présentent sous la forme <balise attribut="valeur">. Les guillemets autour de la valeur ne sont pas obligatoires mais sont recommandés pour des raisons de compatibilité avec le XHTML. Les attributs ne doivent pas être répétés dans la balise fermante.
On appelle code source (ou source tout court), l’ensemble des balises et du texte de la page.
Il est possible d'observer le code source de toute page web en faisant :
- Un clic droit puis Code source de la page sous Firefox
- Un clic droit puis Afficher la source sous Internet Explorer
- Un clic droit puis Afficher le code source de la page sous Chrome
- Un contrôle+clic puis "code source" sous Safari
- Un clic droit puis Source, ou CTRL+U sous Opera
L'imbrication modifier
Une des forces du HTML est le fait que les balises puissent être imbriquées. En effet pour écrire un texte en italique (balise <i>) et souligné (balise <u>), il suffit d'écrire <i><u>texte</u></i>. Cependant les balises ne doivent pas se chevaucher. En d'autres termes, il est impératif de fermer la première balise ouverte après la deuxième. Ainsi, <u>Firefox est un <i>navigateur Web</i></u> est correct mais <u>Firefox est un <i>navigateur Web</u></i> est incorrect puisque la balise <u> a été ouverte avant la balise <i> et a été fermée en premier. On peut bien évidemment imbriquer plus de deux balises.
Le document HTML minimum modifier
Nous avons déjà vu qu'un document HTML n'est qu'un document texte avec l'extension .html ou .htm. Cependant, pour que le navigateur reconnaisse le fichier comme un fichier HTML, il faudrait au minimum écrire :
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
La balise <html> permet de déclarer le document comme un document HTML, et annonce son début. La balise </html> annonce la fin du document HTML au navigateur.
La page web possède une entête délimitée par les balises <head> et </head> et qui permet de donner un titre à la page (avec <title>…</title>), ainsi que des informations au navigateur et aux moteurs de recherches.
La balise <title> permet de définir le titre du document, qui n'est composé que de texte.
Celui-ci n’est pas affiché dans le document, mais comme une donnée à propos du document.
Enfin les balises <body> et </body> délimitent le corps de la page HTML, c'est-à-dire ce qui sera affiché dans le navigateur.
Cette disposition est équivalente à celle d’une lettre. En effet, l'entête d’une lettre comporte les informations concernant l’objet et des informations sur l'expéditeur. Elle est représentée par la balise <head>. Le corps de la lettre comprend le message proprement-dit et est représenté par la balise <body>.
Première page web modifier
Créons maintenant une première page web. La syntaxe de base doit être celle du paragraphe précédent. Nous allons créer une page qui affiche Bonjour et bienvenue sur Wikiversité. Le code source est le suivant :
<html>
<head>
<title>Première page</title>
</head>
<body>
Bonjour et Bienvenue sur <i>Wikiversité</i>
</body>
</html>
La balise <title> permet d'ajouter un titre au document qui s'affichera dans la barre de titre du navigateur. Attention à ne pas oublier
de la fermer avec la balise </title>.
