Fonctionnement des Services Web
Un service web repose sur le protocole HTTP pour la communication client-serveur. Voici un exemple simplifié d'un serveur HTTP en Python :
import socket
serveur = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
serveur.bind(("localhost", 8888))
serveur.listen(3)
while True:
client, adresse = serveur.accept()
requete = client.recv(2048)
client.sendall(b"HTTP/1.1 200 OK\r\n\r\n")
client.sendall(b"<h1>Bienvenue sur le serveur !</h1>")
client.close()
Le flux typique est le suivant : le navigateur envoie une requête HTTP → le serveur traite la requête → le serveur renvoie une réponse contenant le code HTML → le navigateur interprète et affiche la page.
Définition de HTML
- HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer le contenu des pages web.
- Il définit des règles interprétées par les navigateurs, permettant de rendre les éléments visibles. Les différences d'implémentation entre navigateurs peuvent causer des problèmes de compatibilité.
- Les fichiers HTML portent généralement l'extension .html ou .htm.
Distinction entre HTML et les Langages de Programmation
HTML est un langage de balisage, pas un langage de programmation. Il utilise des balises pour décrire le contenu, sans structures logiques comme les conditions ou les boucles, contrairement à des langages tels que Python.
Anatomie d'un Document HTML
Un document HTML standard se présente ainsi :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Page Web</title>
</head>
<body>
<!-- Contenu visible ici -->
</body>
</html>
Points essentiels :
- <!DOCTYPE html> indique la version HTML5.
- La balise <html> encapsule l'ensemble du document, avec les sections <head> et <body>.
- <head> contient les métadonnées et configurations, non affichées directement.
- <title> définit le titre affiché dans l'onglet du navigateur.
- <body> héberge le contenu visible par l'utilisateur.
Attention : Pour les pages en français, utilisez <meta charset="utf-8"> pour éviter les problèmes d'encodage. Certains navigateurs peuvent nécessiter <meta charset="gbk"> selon les configurations.
Syntaxe des Balises HTML
Les balises HTML sont entourées de chevrons, souvent utilisées par paires (ex: <div> et </div>). Quelques balises sont autofermantes comme <br /> ou <img src="image.jpg" alt="description" />.
Attributs courants :
- id : Identifaint unique pour cibler un élément via JavaScript ou CSS.
- class : Permet d'associer des styles CSS à plusieurs éléments.
- style : Applique des styles CSS directement à un élément (ex: <p style="color: blue;">Texte en bleu</p>).
Commentaires HTML
<!-- Ceci est un commentaire, invisible dans le navigateur -->
La Balise DOCTYPE
<!DOCTYPE html> doit être la première ligne du document. Elle informe le navigateur sur la version HTML utilisée, mais ce n'est pas une balise à part entière.
Balises Courantes dans la Section HEAD
| Balise | Utilité |
|---|---|
| <title> | Définit le titre de la page |
| <style> | Intègre des règles CSS internes |
| <script> | Inclut du code JavaScript ou référence un fichier externe |
| <link> | Charge une feuille de style CSS externe |
| <meta> | Fournit des métadonnées sur le document |
Balises Meta Détails
Les balises <meta> offrent des informations aux moteurs de recherche et aux navigateurs. Deux attributs principaux :
- http-equiv : Agit comme un en-tête HTTP. Exemple :
<meta http-equiv="refresh" content="5;URL=https://example.com">pour rediriger après 5 secondes. - name : Fournit des descriptions pour l'indexation. Exemple :
<meta name="keywords" content="HTML, CSS, web">pour le référencement.
Balises de la Section BODY : Éléments de Base
Balises de Bloc et en Ligne
<p>Paragraphe</p>
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<br />
<hr />
<div>Conteneur de bloc</div>
<span>Élément en ligne</span>
Les balises de bloc (ex: div, p) commencent sur une nouvelle ligne, tandis que les balises en ligne (ex: span, img) restent dans le flux du texte.
Caractères Spéciaux
| Caractère | Code HTML |
|---|---|
| Esppace | |
| > | > |
| < | < |
| & | & |
Balises Image et Lien
<img src="chemin/image.jpg" alt="Texte alternatif" width="200" height="100" />
<a href="https://example.com" target="_blank">Lien externe</a>
L'attribut target="_blank" ouvre le lien dans un nouvel onglet.
Listes et Tableaux
Liste non ordonnée :
<ul type="square">
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
Liste ordonnée :
<ol type="A" start="3">
<li>Élément A</li>
<li>Élément B</li>
</ol>
Tableau de base :
<table border="1" cellpadding="5">
<thead>
<tr><th>Nom</th><th>Âge</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
</tbody>
</table>
Formulaires HTML et Éléments de Saisie
Les formulaires collectent des données utilisateur pour envoi au serveur. Structure de base :
<form action="/traitement" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="utilisateur_nom" />
<input type="submit" value="Envoyer" />
</form>
Attributs clés de <form> :
- action : URL de destination pour les données.
- method : Méthode HTTP (GET ou POST). POST masque les données dans l'URL.
Types d'Éléments Input
| Type | Description | Exemple |
|---|---|---|
| text | Champ texte simple | <input type="text" name="pseudo" /> |
| password | Champ masqué pour mots de passe | <input type="password" name="mdp" /> |
| checkbox | Cases à cocher multiples | <input type="checkbox" name="options" value="A" /> |
| radio | Boutons radio pour choix unique | <input type="radio" name="genre" value="F" /> |
| file | Sélection de fichier | <input type="file" name="document" /> |
Éléments Select et Textarea
<select name="pays">
<option value="fr">France</option>
<option value="ca" selected>Canada</option>
</select>
<textarea name="commentaires" rows="4" cols="50"></textarea>
L'attribut selected définit l'option par défaut. Pour <textarea>, rows et cols contrôlent la taille.
Balise Label et Accessibilité
<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="courriel" />
L'attribut for associe le label à l'input correspondant via son id, améliorant l'expérience utilisateur.