Structure du HTML et généralités
Le HTML est le langage utilisé pour coder les sites webs. Il est compris par les Navigateurs tels qu'Internet Explorer, Mozilla ou Netscape. Il est très adapté au web. C'est lui qui constitue l'ossature d'une page web. On trouve aussi sur Internet d'autres langages plus complexes tels que PHP ou Java, mais nous ne nous intéresserons ici qu'au HTML car il est largement suffisant pour construire un site web.
Structure du HTML
Un fichier de code HTML est un fichier de texte (c'est à dire tout le texte qui apparait à l'écran lorsque vous allez sur un site) au milieu duquel on a rajouté des éléments qui définissent la manière dont ce texte apparaît à l'écran. On appelle ces éléments des balises.
Ces balises sont matérialisées par les symboles < et >. Par exemple <BR> signifie "aller à la ligne". Certaines balises délimitent une partie de texte. On a alors une balise d'ouverture et une balise de fermeture. Par exemple:<B>Texte</B> signifie que le mot "texte" va apparaître en gras à l'écran, <B> étant la balise correspondant au gras.
Le fichier texte qui contient le code est appellé fichier source. Il est lu de haut en bas par le navigateur. Il a l'extension .htm ou .html
Les balises
Nous allons distinguer trois types de balises.
Les balises qui découpent le fichier source
Ces balises servent à découper le fichier source en deux grandes parties distinctes :
- la tête (head) : contient les informations générales sur le fichier. Elles n'apparaîssent pour la plupart pas dans la fenêtre du navigateur.
- le corps (body) : c'est le contenu de la page, c'est à dire tout le texte et les images qui vont s'afficher à l'écran.
De plus afin de signaler que nous sommes en présence d'un fichier HTML, le fichier doit commencer par <HTML> et se finir par </HTML>.
Le fichier source ressemblera donc à ça :
|
<HTML> on signale le début du fichier
<HEAD> début de la tête du document
Ici vont se trouver toutes les infos qui concernent le document
</HEAD> fin de la tête du document
<BODY>
Ici on trouve le contenu du document
</BODY>
</HTML> |
 |
C'est le fichier minimal. Si tu l'ouvres avec Internet Explorer il te donnera une page blanche (car il n'y a rien d'écrit entre <BODY> et </BODY>. C'est cette page blanche que nous allons remplir par la suite.
Les balises qui délimitent une zone de texte
Ce sont toutes les balises qui s'ouvrent et se referment (donc à chaque fois on écrit deux balises : la balise <Balise> et son anti-balise </Balise>).
Ces balises permettent de délimiter une zone de texte. Elles servent à spécifier les caractéristiques du texte qui se trouvent entre elles.
|
Par exemple le code suivant :  |
Va faire apparaître "les amis" en gras
(<B> est la balise qui met le texte en gras) dans le navigateur:  |
Les balises "objets"
Ce sont des balises qui servent à insérer un objet ou quelque chose de ponctuel à un moment dans le texte. Exemple : une image (<IMG>), un saut de ligne (<BR>). Lorsque le navigateur va lire le texte et tomber sur une balise il va savoir qu'à cet endroit il y a l'objet défini par la balise.
Par exemple : 
Va être lu : 
Car <BR> signifie "aller à la ligne". Le navigateur lit donc : "salut les amis, aller à la ligne J'espère que vous allez bien" et affiche en conséquence à l'écran.
Les attributs
Pour spécifier plus précisément leur action, certaines balises sont accompagnées d'attributs placés à l'intérieur des crochets. Exemple:<FONT SIZE=2> précise l'action de la balise <FONT> (balise qui définit le style -police, taille, couleur - du texte). Ces attributs se placent uniquement dans les balises d'ouverture.
Par exemple <BODY> possède des attributs qui te permettent de définir la couleur du texte de la page (TEXT), la couleur du fond (BGCOLOR) etc :
Va donner (c'est extrêmement laid):
Fabrique ta première page
Comme tu peux le voir, le langage HTML n'est pas très compliqué à comprendre et il est bien conçu pour ce qu'il doit faire : mettre en forme du texte. Tu as maintenant tous les éléments pour faire une première page lisible facilement.
Il existe bien entendu un grand nombre de balises pour améliorer encore la présentation de tes pages. Huipat' te propose maintenant d'aller compléter tes connaissances :
- apprendre à faire des liens et des images
- apprendre à structurer la page : les tableaux
- la tête de page : <HEAD></HEAD>
- Liste des balises usuelles et de leurs attributs
- Un truc génial : l'éditeur HTML
| 
