HTML (HyperText Markup Language) est un langage de balisage conçu pour structurer le contenu des pages web. Les navigateurs interprètent les balises HTML pour afficher les éléments, avec des variations possibles selon les implémentations. Les fichiers web utilisent l'extension .html ou .htm.
Pour illustrer le fonctionnement basique d'un serveur web, voici un exemple Python qui écoute les requêtes HTTP et renvoie une réponse :
import socket
# Initialisation du socket serveur
socket_serveur = socket.socket()
socket_serveur.bind(('127.0.0.1', 9090))
socket_serveur.listen(4)
while True:
connexion_client, adresse = socket_serveur.accept()
requete = connexion_client.recv(2048)
reponse_entete = b"HTTP/1.1 200 OK\r\n\r\n"
corps_html = b"<h1>Bienvenue sur le serveur</h1>"
connexion_client.send(reponse_entete + corps_html)
connexion_client.close()
Ce code montre une interaction simple : le navigateur envoie une requête via le protocole HTTP, le serveur traite la demande et retourne une réponse HTML pour le rendu côté client.
Structure fondamentale d'un document HTML
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
<!-- Contenu visible -->
</body>
</html>
Les attributs essentiels incluent : id pour un identifiant unique, class pour des groupes de styles, et style pour des règles CSS en ligne.
Balises courantes dans la section head
<title>: Définit le titre de l'onglet du navigateur.<style>: Cnotient les feuilles de style internes.<script>: Intègre du code JavaScript ou référence des fichiers externes.<link>: Associe des ressources externes comme les CSS ou les icônes.<meta>: Spécifie des métadonnées sur le document.
Éléments de base dans la section body
Les balises sémantiques structurent le texte :
<b>pour le gras,<i>pour l'italique.<p>pour les paragraphes,<br>pour les sauts de ligne.<h1>à<h6>pour les titres hiérarchiques.<hr>pour une ligne horizontale de séparation.
Utilisez pour insérer des espaces non rompus dans le contenu.
Balises div et span
<div> est un conteneur bloc sans signification sémantique, souvent stylisé via CSS. <span> est un conteneur en ligne utilisé de manière similaire. La différence principale : les éléments blocs commencent généralement une nouvelle ligne, tandis que les éléments en ligne restent sur la même ligne. Notez que les éléments en ligne ne peuvent pas imbriquer des éléments blocs, sauf exceptions comme dans les formulaires.
Balise img pour les images
<img src="chemin/image.jpg" alt="Texte alternatif" title="Info-bulle" width="300" height="200">
Balise a pour les liens hypertextes
Une URL se compose de : protocole (ex. http), domaine ou IP, répertoire et nom de fichier. L'attribut target="_blank" ouvre le lien dans un nouvel onglet.
Listes
Listes non ordonnées
<ul type="square">
<li>Élément</li>
<li>Autre élément</li>
</ul>
L'attribut type accepte "disc", "circle", "square" ou "none".
Listes ordonnées
<ol type="A" start="3">
<li>Premier</li>
<li>Deuxième</li>
</ol>
L'attribut type peut être "1", "A", "a", "I" ou "i".
Formulaires
Les formulaires collectent des données utilisateur pour le serveur. L'élément <input> varie selon son attribut type :
text: champ de texte simple.password: masque les caractères.checkboxetradio: sélections multiples ou uniques.submit,reset,button: actions de formulaire.hidden,file: champs cachés ou upload de fichiers.
Listes déroulantes
<select name="options">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
</select>
Zone de texte multi-ligne
<textarea name="commentaire" rows="5" cols="40">Texte par défaut</textarea>
Classification des éléments
Éléments bloc : structurent la page et occupent toute la largeur disponible. Ils peuvent contenir d'autres éléments blocs ou en ligne, sauf pour <p> qui ne doit pas imbriquer d'éléments blocs.
Éléments en ligne : restent dans le flux du texte, avec des dimensions limitées au contenu. Ils ne peuvent imbriquer que des éléments en ligne.