HTML pour débutant
Les balises HTML
Balises doubles et balises simples
Un fichier HTML contient des balises. Une balise HTML est un élément que l’on ajoute au texte de départ afin de signaler au navigateur de quelle manière l’afficher. Le navigateur reconnaît et interprète la balise utilisée.
Une balise HTML est toujours délimitée par les signes < et >.
Les balises HTML fonctionnent généralement par paire afin d'agir sur les éléments qu'elles encadrent. La « balise d'ouverture » ou « balise ouvrante », permet d’ouvrir l’encadrement et la « balise de fermeture » ou « balise fermante » de fermer l’encadrement. La balise fermante est identique à la balise ouvrante, à la différence qu’elle est précédé du signe /.
On a donc :
<balise>éléments encadrés</balise>
Ex:
<title>Ma première page</title>
La balise <title> est un exemple de balise double. Elle permet de déterminer le titre de la page web, qui sera affiché sur l’onglet de la page.
Les éléments ou textes contenus entre la balise d’ouverture et la balise de fermeture sont considérés comme l’élément HTML, qui représentent donc le contenu de la page web.
Cependant, certaines balises sont vides, c’est-à-dire qu’elles ne possèdent pas d’éléments ou de textes. Ces balises, qui n’ont pas besoin d’être fermées, sont appelées des « balises simples », contrairement aux balises fonctionnant par paire, qui sont appelées des « balises doubles ».
On a donc:
Zone de texte.
<br>Texte à la ligne.
La balise <br> est un exemple de balise simple. Elle permet d'aller à la ligne lors de l'écriture d'un texte.
Les attributs
Une balise d’ouverture peut avoir divers attributs. Ces attributs sont des informations complémentaires qui vont caractériser et préciser la balise. Le ou les attributs d’une balise sont indiqués à l’intérieur des signes < et > de la balise d’ouverture, juste après le nom de la balise et sont toujours suivis par un signe égal (=) ainsi que la valeur de l'attribut entre des guillemets ("...")
On a donc:
<balise attribut1="..." attribut2="...">Texte</balise>
Ex:
<a href="isn.html">ISN</a>
La balise <a> permet la création d’une ancre pour liens hypertexte. Elle contient l'attribut href, qui permet de déterminer l'adresse de destination où mène le lien.
REMARQUE: Il est inutile d'apprendre chaque balise, leur fonction ainsi que leurs attributs par coeur, il suffit de faire une recherche sur internet, où toutes les balises sont trouvables.
Cliquer ICI pour voir un exmple de site où trouver les différentes balises.
Structure d’une page HTML
Le doctype, qu’est ce que c’est ?
Le doctype est toujours indiqué à la première ligne d’un document HTML. Il s'agit en fait d'une ligne de déclaration du type de document, qui indique au navigateur dans quelle version du langage HTML la page a été écrite (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...), afin de spécifier le standard utilisé pour le codage de la page.
Ex:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
REMARQUE: Il est également inutile d'apprendre le doctype par coeur, il suffit de faire un copier/coller d'internet.
Balises <html>, <head> et <body>
Un document HTML commence toujours par la balise <html> (et finit donc par </html>). La balise double <html> contient deux grandes balises principales : un « en-tête », délimité par la balise double <head>, puis un « corps », délimité par la balise double <body>.
Le <head> est un élément structurel, qui contient des informations essentielles à la description du document, tels que le titre du document (incluant la balise <title>), les références aux feuilles de style ou aux javascripts utilisés dans le document, ou encore la balise <meta>, qui permet d’indiquer des informations sur la page (auteur, description, etc.)
Le <body> est également un élément structurel, qui représente le contenu du document, c’est-à-dire que tout ce qui s’y trouve sera affiché par le navigateur sur la page web, à l’exception du texte contenu entre <!-- et -->, dont nous allons maintenant déterminer l’utilité.
Les commentaires HTML
Il est possible d'ajouter des éléments d'information dans une page web grâce à un jeu de balises spécifique, appelé balises de commentaires. Un commentaire commence par <!-- et se termine par -->.
On a donc:
<!-- Voici un commentaire -->
Un commentaire HTML est un texte qui sert simplement de mémo. Il n'est pas affiché par le navigateur, et n’a donc pas d’impact sur la page. Un commentaire sert à se repérer dans le code source de la page, surtout si celui-ci est long, et peut donc se trouver n’importe où au sein du code source.
Mais alors comment ajouter des images à mon texte ?
