Temps de lecture : 13 Minutes
La balise <body> est restée vide trop longtemps , il faut que nous la complétions au plus vite. Nous allons réaliser un site web simple. Nous allons prendre comme exemple, un site personnel qui a pour objectif de se présenter. Au cours de ce chapitre, nous allons enfin découvrir les balises HTML. Certaines de ces balises existent depuis les toutes premières versions, tandis que d'autres ont été introduites dans la dernière version. Au final, ça n'a que peu d'importance, c'est pour votre gouverne.
Les en-têtes HTML sont définis à l’aide des balises, <h1> à <h6>
<h1> définit l’en-tête le plus important et <h6> définit la rubrique la moins importante.
Copiez ce code dans votre fichier pour voir le résultat :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Les titres <h1> doivent être utilisés pour les titres principaux, suivis des titres <h2> qui est lui aussi suivis de <h3> ,puis des moins importants, et ainsi de suite jusques <h6>
L’élément HTML <p> définit un paragraphe.
Un paragraphe commence toujours sur une nouvelle ligne,
et les navigateurs ajoutent automatiquement des espaces (une marge) avant et après un paragraphe.
Copiez ce code dans votre fichier pour voir le résultat :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<p>
On m’a dit que tu parlais aux hommes mais moi je n'entends rien.
Si les tiens sont égarés, où veux-tu encore me trouver ?
Ne me laisse pas dans ce doute seule au milieu de ce néant.
Sana
</p>
<p>
Si tu es Dieu, viens briser ce mur de silence.
Si tu es Dieu, parle-moi que je t'entende.
Sans intermédiaire, sans masque, sans chaîne.
Sana.
</p>
</body>
</html>
On m’a dit que tu parlais aux hommes mais moi je n'entends rien. Si les tiens sont égarés, où veux-tu encore me trouver ? Ne me laisse pas dans ce doute seule au milieu de ce néant. Sana
Si tu es Dieu, viens briser ce mur de silence. Si tu es Dieu, parle-moi que je t'entende. Sans intermédiaire, sans masque, sans chaîne. Sana.
Le contenu est purement fictif. Écrivez ce que vous souhaitez et commencez même votre premier site, si vous avez la motivation. Par contre, merci de ne pas me tenir rigueur de ce qui peut me passer par la tête. Je suis rigoureusement mon traitement.
Vous découvrez la mise en forme par défaut du HTML. Pour le moment, tout ce que vous écrivez aura la mise en forme par défaut du HTML dans le navigateur web.
C'est particulièrement brut et moche. Comment améliorer ça ? La mise en forme du HTML se fait à l'aide d'un autre langage informatique :
le CSS (Cascading Style Sheets). Ce sera l'objet d'un cours entier bon bref dagninin Narcis.
Pour réaliser un saut à la ligne on utilise la balise auto-fermente <br />.
La balise <hr /> insère une ligne horizontale, utilisée pour séparer des sections.
Copiez ce code dans votre fichier pour voir le résultat,
ensuite introduiser la balise <hr /> entre les deux paragraphe pour voir le resultat. :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<p>
On m’a dit que tu parlais aux hommes mais moi je n'entends rien.<br />
Si les tiens sont égarés, où veux-tu encore me trouver ?<br />
Ne me laisse pas dans ce doute seule au milieu de ce néant.<br />
Sana
</p>
<p>
Si tu es Dieu, viens briser ce mur de silence.<br />
Si tu es Dieu, parle-moi que je t'entende.<br />
Sans intermédiaire, sans masque, sans chaîne.<br />
Sana.
</p>
</body>
</html>
On m’a dit que tu parlais aux hommes mais moi je n'entends rien.
Si les tiens sont égarés, où veux-tu encore me trouver ?
Ne me laisse pas dans ce doute seule au milieu de ce néant.
Sana
Si tu es Dieu, viens briser ce mur de silence.
Si tu es Dieu, parle-moi que je t'entende.
Sans intermédiaire, sans masque, sans chaîne.
Sana.
Au sein de vos paragraphes, certains mots ou expressions sont plus importants que d'autres. Dans un logiciel de traitement de texte, vous auriez sauté sur le gras ou l'italique. En HTML, c'est différent, on indique seulement l'importance de portions de texte. La mise en forme se fait avec le CSS. Ne perdez pas de vue que le HTML ne permet pas de mise en forme. Il propose différents moyens de mettre en valeur le texte. Nous nous focaliserons sur les balises normales <strong> et <b>. <strong> est utilisé pour insister sur l'importance du contenu, tandis que <b> met simplement le texte en gras.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<p>
<strong>Sana</strong> Abdoul Djelil
Kouadio <b>Kouadio jean Martial<b>
</p>
</body>
</html>
Mise en valeur du nom :
Sana Abdoul Djelil
Mise en gras du prenom :
Kouadio Kouadio jean Martial
Les listes nous permettent au cours de notre rédaction de mieux structurer nos différents blocs de texte et d'ordonner des informations. Le HTML permet de reproduire des listes ordonnées ou non. En HTML, on parle de :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<ul>
<li>Sana Abdoul Djelil</li>
<li>Kouadio Kouadio jean Martial</li>
<li>Yobouet Konan Hermann</li>
<li>N'dri Koffi Nichiren</li>
<li>Diabaté Aboubacar Siriki</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre de la page affiché dans la barre du navigateur</title>
</head>
<body>
<ol>
<li>Sana Abdoul Djelil</li>
<li>Kouadio Kouadio jean Martial</li>
<li>Yobouet Konan Hermann</li>
<li>N'dri Koffi Nichiren</li>
<li>Diabaté Aboubacar Siriki</li>
</ol>
</body>
</html>
Les listes peuvent s'imbriquer pour former une liste ou arborescence complexe.
Les balises normales <div> et <span> sont utiles car elles ne représentent rien de particulier.
Elles sont très utilisées pour appliquer des styles de mise en forme. Cependant, elles ont tout de même un comportement par défaut.
Considérons pour le moment que la balise <span> s'utilise à l'intérieur d'un <div>, <p>,
<h?> ou <li>, tandis que la balise <div> englobe toutes ces balises.
C'est à dire que <div> est un conteneur de niveau bloc (structure des sections), tandis que <span> est un conteneur de niveau ligne (style inline). <div> et <span> sont souvent utilisés pour appliquer des styles CSS.
Nous avons aussi un moyen de mettre des commentaires dans notre code avec <!--ceci est un commentaire--> elles ne s'affichent pas a l'utilisateur mais permettent au développeur de se retrouver
dans son code.
Nous approfondirons leur comportement dans le cours sur le CSS.
C'est un nouveau chapitre dense qui se termine. Nous avons appris plein de nouvelles balises et à quoi allait nous servir le CSS.
Ce cours sur le HTML en est un parmi tant d'autres. Le web regorge de ressources sur le développement web. Celui-ci a été rédigé par mes soins et est orienté pour les débutants. Il est non-exhaustif. Si vous repérez une erreur ou un oubli, vous pouvez bien évidemment me contacter. me contacter
Ce cours a été rédigé en mars 2025.