Ce language
de
programmation, actuellement dans sa version 4, se présente
sous forme de lignes de codes (code source), que les navigateurs
internet "compilent" afin d'afficher un "rendu".
Une erreur dans le code peut donc provoquer un mauvais affichage
de la page; néanmoins, c'est un language assez souple, peu
sensible à la casse (majuscule/minuscule), et éditable
à partir d'un quelconque bloc-note (notepad de Windows par
exemple) pour peu que l'on ne soit pas rebuté par le "codage"
manuel.
Le Html a pour structure
différentes balises qui encapsulent différents éléments.
Les balises sont des "contenants", souvent dotés
d'attributs, englobant des "contenus". A part quelques
exceptions, chaque type de balise se subdivise en deux balises:
une balise d'ouverture (
<balise>)
et sa quasi-jumelle de fermeture (
</balise>).
Entre les deux, le contenu. Ainsi, irrémédiablement,
le code source d'une page html commence par la balise ouvrante "
<html>"
et se termine par la balise fermante "
</html>".
A noter que les balises ne sont jamais visibles à l'affichage
dans les navigateurs, les balises n'étant autres que des
informations de compilation et formatage!
Exemple: la simple ligne de code "
<html>Ceci
est une page html</html>" éditée
avec notepad et enregistrée avec l'extension *.html (ou *.htm)
produit une page web. A l'écran de votre navigateur internet
s'affiche alors "
Ceci est une page html"
lors de l'ouverture de cette page.
Deux parties principales: En-tête et
Corps de page
Schématiquement, le code source d'une page web se divise
en deux parties principales: la première, l'En-tête
(encapsulée par les balises "
<head></head>")
contient le titre de la page, les mots clés, scripts, styles,
appels à des fichiers externes, etc... Les éléments
de l'en-tête sont invisibles lors de l'affichage dans un navigateur
internet, à l'exception du titre qui apparait dans la barre
du haut.
La seconde partie, le Corps de la page (encapsulé par les
balises "
<body></body>")
contient tout ce qui est visible lors de l'affichage de la page,
textes, images, tableaux, animations, etc... Contrairement au reste
du code source qui obéit à certaines règles
dans l'organisation des balises, cette partie est laissée
au libre arbitre du créateur de la page.
Schéma (non exhaustif!) d'une page
html sans contenu:
<html>
|
|
<head>
|
|
<title>Titre
de la page ici </title>
|
<meta
http-equiv="content-type"
content="text/html;charset=iso-8859-1">
|
<meta
name="keywords" content="mot
clé1, mot clé2 ">
|
<link
rel="stylesheet" href="style.css">
|
|
|
</head>
|
<body>
|
|
contenu visible de la
page ici...
|
|
</body>
|
|
|
</html>
|
note: les traits et le texte gris sont ici purement dans un
but explicite et ne sont pas à prendre en compte. Seul le
code en rouge importe!
Attributs des balises
Comme on peut le voir ci-dessus, une balise de fermeture n'est pas
forcément nécéssaire, certaines balises ayant
des propriétés spécifiques. Par contre, la
majorité d'entre elles ont des attributs qui permettent de
les nuancer. Les attributs (également spécifiques
à chaque type de balise) s'insèrent obligatoirement
dans la première des deux balises, la balise d'ouverture.
Exemple:
<a>ceci est
un lien</a>
Les balises par leur propriété indiquent que le texte
entouré ci-dessus est un lien mais n'indiquent pas quelle
page, ou document, doit être ouvert lorsque l'on clique dessus.
Il faut donc ajouter à la balise ouvrante l'attribut "
href"
et donner à ce dernier le fichier à ouvrir, comme
valeur.
Exemple:
<a href="ma_page.html">ceci est un lien</a>
Autre exemple d'attributs d'une balise: la deuxième balise
"
<meta>"
du schéma de page qui précède:
<meta name="keywords" content="mot
clé1, mot clé2 ">
Cette balise a la spécificité de ne pas encapsuler
un contenu, mais de directement l'intégrer comme valeur d'un
attribut. L'attribut "
name"
avec la valeur "
keywords"
indique que le contenu de cette balise est des mots clés,
et l'attribut "
content" (contenu)
a pour valeur les mots clés en question.
Pour les détails de toutes les balises et de leurs attributs,
voir: Html ->
Balises