La structure de base d'un document au format HTML
Voici un descriptif des balises HTML de base qui structurent un document standardisé nommé page web...
<html>
<head>
<title> </title>
</head>
<body>
<p>Votre contenu...<p>
</body>
</html>
A NOTER : toutes les balises <> se referment avec un "/"
!-- Le document HTML commence ici --!
<html>
On complète désormais cette première déclaration par la langue et son format générique qui est en html 5 :
<html lang="fr">
!-- Ici, une déclaration de titre pour la page --!
<head>
<title>Votre titre de page ici</title>
</head>
On complète désormais cette première déclaration par le type d'encodage des caractères de la page qui est en utf-8 :
<meta charset="utf-8">
!-- Et le début du corps de la page --!
<body>
Tous les éléments constituant le contenu visible de la page se situent à l'intérieur de la balise <body> (le corps du document) : le texte, les images, les animations...
!-- Pour insérer les titres, sous-titres... <H1>,<H2>,<H3>,<H4>,<H5>,<H6> --!
<h1>niveau one header </h1>
<h2>niveau two header </h2>
<h3>niveau three header </h3>
<h4>niveau four header </h4>
<h5>niveau five header </h5>
<h6>niveau six header </h6>
<h1> et le plus grand format et <H6> le plus petit, ce qui donne ceci pour ce site :
Premier niveau - l'en-tête
Second niveau - Un sous-titre
Troisième niveau - Une rubrique
Quatrième niveau - Une sous-rubrique
Cinquième niveau - Une section
Sixième niveau - Une sous-section
!-- Pour mettre du texte en gras --!
un texte normal...
<b>les balises requises</b>
Voici le texte en gras
Elle est de plus en plus substituée par la balise <strong> (fort) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement le terme au-delà de la mettre simplement en gras
<strong>les balises requises</strong>
!-- Pour mettre du texte en italique--!
un texte normal...
<i>les balises requises</i>
Voici le texte en en italique
Elle est de plus en plus substituée par la balise <em> (emphase) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement (avec emphase donc) le terme au-delà de la mettre simplement en italique
<em>les balises requises</em>
!-- Pour centrer le texte ou une image --!
<center><h1>Le texte que vous souhaitez centrer</h1></center>
Ce qui donne ceci :
Le texte que vous souhaitez centrer
!-- Insertion d'une image dans la page --!
Ce qui donne ceci :
<img src="/mon-logo.jpg">
Il est très conseillé de rajouter l'attribut "alt" qui permet d'afficher un texte alternatif pendant que votre image se charge lorsqu'elle est d'un poids important :
<img src="/images/mon-logo.jpg" alt="Mon logo : Webmaster Bretagne" />
!-- Pour ajouter un lien hypertexte--!
<a href="/index.php">Retour à la page d'accueil</a>
Ce qui donne ceci :
Retour à la page d'accueil
!-- Une ligne de séparation --!
Pour faire des séparation entre vos paragraphes, vous pouvez utiliser le balise <HR> qui génère une ligne horizontale sur toute la largeur de la page. Attention, elle s'insère seul, sans balise de fermeture.
<hr />
Ce qui donne ceci :
Vous pouvez l'agrémenter de divers attributs :
<hr size=10 align=left noshade width=50%>
Ce qui donne ceci :
!-- Les listes à puce --!
Vous pouvez créer des listes précédées de puce avec les balises <ul> et <li>.
<ul>
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>
Ce qui donne ceci :
!-- Listes numérotées --!
Vous pouvez créer des listes numérotées avec les balises <ol> et <li>..
<ol>
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ol>
Ce qui donne ceci :
- Texte 1
- Texte 2
- Texte 3
!-- A la fin de votre page, vous devez refermer les balises de pages --!
</body>
</html>
Des infos complémentaires :
Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?
Allez plus loin :
La liste des balises essentielles en HTML5...
Toutes les balises HTML en détail (en.)
erwan-corre.com - Copyright © 2007-2024