Comprendre les Fondamentaux du HTML
HTML, ou HyperText Markup Language, est le langage fondamental utilisé pour structurer le
contenu des pages Web. Contrairement à un langage de programmation, HTML ne contient
pas de logique ou de calculs; il s'agit plutôt d'un langage de balisage permettant de décrire la
structure des informations. Les éléments HTML sont les blocs de construction des pages Web,
définissant la hiérarchie et la présentation du contenu.
Structure Essentielle d'un Document HTML
Un document HTML typique commence avec une déclaration de type et se divise
principalement en deux sections : <head> et <body>. Voici un exemple basique illustrant cette
structure :
html
Copier le code
<!DOCTYPE html>
<html>
<head>
<title>Page Exemple</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Voici un paragraphe d'introduction.</p>
</body>
</html>
<!DOCTYPE html> : Cette déclaration spécifie que le document est conforme aux
normes HTML5.
<html> : La balise racine qui encapsule l'ensemble du contenu HTML.
<head> : Cette section contient des métadonnées telles que le titre de la page, les liens
vers les fichiers CSS, les scripts JavaScript, et d'autres informations non visibles
directement par l'utilisateur.
<title> : Définit le titre de la page affiché dans la barre du navigateur.
<body> : Contient tous les éléments visibles de la page, tels que les titres, les
paragraphes, les images, etc.
Éléments HTML Clés
Titres et Paragraphes
Les titres sont organisés en six niveaux, de <h1> à <h6>, offrant une hiérarchie du contenu.
html
Copier le code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Les paragraphes sont définis par la balise <p>, utilisée pour organiser le texte en blocs
distincts.
html
Copier le code
<p>Ceci est un exemple de paragraphe.</p>
Liens Hypertextes
Les liens hypertextes, créés avec la balise <a>, sont essentiels pour la navigation. L'attribut
href indique l'adresse vers laquelle le lien pointe.
html
Copier le code
<a href="[Link] Exemple</a>
Images
Les images sont insérées via la balise <img>. L'attribut src spécifie le chemin de l'image,
tandis que alt fournit un texte alternatif pour les lecteurs d'écran et les cas où l'image ne peut
être affichée.
html
Copier le code
<img src="[Link]" alt="Description de l'image">
Listes
HTML offre deux types principaux de listes : les listes non ordonnées (à puces) et les listes
ordonnées (numérotées).
Listes non ordonnées : Utilisent <ul> et <li> pour les éléments.
html
Copier le code
<ul>
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
</ul>
Listes ordonnées : Utilisent <ol> et <li> pour les éléments numérotés.
html
Copier le code
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ol>
Attributs HTML
Les attributs fournissent des informations supplémentaires sur les éléments HTML. Par
exemple, dans une balise <a>, l'attribut target="_blank" indique que le lien doit s'ouvrir
dans un nouvel onglet.
html
Copier le code
<a href="[Link] target="_blank">Ouvrir dans un nouvel
onglet</a>
Les Formulaires
Les formulaires sont utilisés pour recueillir des données utilisateur. Un formulaire est encadré
par la balise <form> et contient divers champs d'entrée.
html
Copier le code
<form action="/soumettre" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<input type="submit" value="Envoyer">
</form>
<form> : Délimite le formulaire et définit son action et sa méthode.
action : Spécifie l'URL de traitement des données du formulaire.
method : Détermine comment les données sont envoyées (post ou get).
<label> : Associe un libellé à un élément de formulaire.
<input> : Définit un champ d'entrée.
Les Commentaires
Les commentaires sont utilisés pour insérer des notes dans le code. Ils ne sont pas affichés par
le navigateur et ne sont visibles que dans le code source.
html
Copier le code
<!-- Ceci est un commentaire et ne sera pas affiché sur la page -->
Conclusion
Le HTML constitue le fondement de toute page Web, définissant la structure et le contenu.
Bien que ce guide couvre les concepts de base, il ne s'agit que de la surface des possibilités
offertes par le HTML. En conjonction avec le CSS pour le style et le JavaScript pour
l'interactivité, HTML permet de créer des expériences web riches et engageantes. Pour
approfondir vos compétences, la pratique et l'exploration des spécificités de ces technologies
sont indispensables.
