HTML constitue la base de toutes les pages web. D\u00e8s que tu affiches un site dans un navigateur, celui-ci interpr\u00e8te un document HTML pour construire la page visible \u00e0 l\u2019\u00e9cran.<\/p>\n\n\n\n
Dans un BTS CIEL ou SIO, tu utilises HTML dans plusieurs situations :<\/p>\n\n\n\n
Cette fiche t\u2019apprend \u00e0 :<\/p>\n\n\n\n
# HTML - Aide m\u00e9moire
## Structure minimale
```html
<!DOCTYPE html>
<html lang=\"fr\">
<head>
<meta charset=\"UTF-8\">
<title>Mon site<\/title>
<\/head>
<body>
<\/body>
<\/html><\/code><\/pre>\n\n\n\nTitres<\/h2>\n\n\n\n<h1>Titre principal<\/h1>
<h2>Sous-titre<\/h2><\/code><\/pre>\n\n\n\nTexte<\/h2>\n\n\n\n<p>Paragraphe<\/p>
<strong>Important<\/strong>
<em>Italique<\/em><\/code><\/pre>\n\n\n\nLiens<\/h2>\n\n\n\n<a href=\"https:\/\/example.com\">Lien<\/a><\/code><\/pre>\n\n\n\nImages<\/h2>\n\n\n\n<img src=\"images\/logo.png\" alt=\"Logo\"><\/code><\/pre>\n\n\n\nListe<\/h2>\n\n\n\n<ul>
<li>\u00c9l\u00e9ment<\/li>
<\/ul><\/code><\/pre>\n\n\n\nTableau<\/h2>\n\n\n\n<table>
<tr>
<th>Nom<\/th>
<th>IP<\/th>
<\/tr>
<tr>
<td>srv01<\/td>
<td>192.168.1.10<\/td>
<\/tr>
<\/table><\/code><\/pre>\n\n\n\nFormulaire<\/h2>\n\n\n\n<form>
<input type=\"text\">
<button>Envoyer<\/button>
<\/form><\/code><\/pre>\n\n\n\nCommentaire<\/h2>\n\n\n\n<!-- commentaire --><\/code><\/pre>\n\n\n\n
# 3. Pr\u00e9sentation du HTML
HTML signifie HyperText Markup Language.
Ce langage d\u00e9crit la structure d\u2019une page web. Contrairement \u00e0 Python ou JavaScript, HTML ne programme pas des actions complexes. Il organise le contenu.
HTML fonctionne avec des balises.
Exemple :
```html
<p>Bonjour<\/p><\/code><\/pre>\n\n\n\nIci :<\/p>\n\n\n\n
\n<p><\/code> ouvre un paragraphe ;<\/li>\n\n\n\n<\/p><\/code> ferme le paragraphe.<\/li>\n<\/ul>\n\n\n\nLe navigateur lit ces balises puis affiche le r\u00e9sultat.<\/p>\n\n\n\n
4. Installation et environnement de travail<\/h1>\n\n\n\n
Tu peux cr\u00e9er des fichiers HTML avec :<\/p>\n\n\n\n
\n- Visual Studio Code ;<\/li>\n\n\n\n
- VSCodium ;<\/li>\n\n\n\n
- Sublime Text ;<\/li>\n\n\n\n
- Nano ;<\/li>\n\n\n\n
- Vim.<\/li>\n<\/ul>\n\n\n\n
Sous Debian 13 :<\/p>\n\n\n\n
sudo apt update
sudo apt install code<\/code><\/pre>\n\n\n\nsudo<\/code> ex\u00e9cute la commande avec les droits administrateur.
apt install<\/code> installe un paquet.<\/p>\n\n\n\nSous Ubuntu :<\/p>\n\n\n\n
sudo snap install code --classic<\/code><\/pre>\n\n\n\nPour tester rapidement une page :<\/p>\n\n\n\n
firefox index.html<\/code><\/pre>\n\n\n\nOu :<\/p>\n\n\n\n
google-chrome index.html<\/code><\/pre>\n\n\n\n5. Structure d\u2019un document HTML<\/h1>\n\n\n\n
Voici la structure minimale moderne :<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"fr\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Breizh Sec Ops<\/title>
<\/head>
<body>
<h1>Bienvenue<\/h1>
<p>Premi\u00e8re page HTML<\/p>
<\/body>
<\/html><\/code><\/pre>\n\n\n\nExplications :<\/p>\n\n\n\n
\n<!DOCTYPE html><\/code> indique HTML5 ;<\/li>\n\n\n\n<html><\/code> contient toute la page ;<\/li>\n\n\n\nlang=\"fr\"<\/code> am\u00e9liore l\u2019accessibilit\u00e9 ;<\/li>\n\n\n\n<head><\/code> contient les m\u00e9tadonn\u00e9es ;<\/li>\n\n\n\n<body><\/code> contient le contenu visible ;<\/li>\n\n\n\n<meta charset=\"UTF-8\"><\/code> active les accents ;<\/li>\n\n\n\n<title><\/code> d\u00e9finit le titre de l\u2019onglet navigateur.<\/li>\n<\/ul>\n\n\n\n6. Les balises principales<\/h1>\n\n\n\nTitres<\/h2>\n\n\n\n<h1>Titre principal<\/h1>
<h2>Sous-titre<\/h2>
<h3>Section<\/h3><\/code><\/pre>\n\n\n\nh1<\/code> repr\u00e9sente le titre principal de la page.
Tu ne dois g\u00e9n\u00e9ralement utiliser qu\u2019un seul h1<\/code>.<\/p>\n\n\n\nParagraphes<\/h2>\n\n\n\n<p>Texte du paragraphe<\/p><\/code><\/pre>\n\n\n\nTexte important<\/h2>\n\n\n\n<strong>Texte important<\/strong><\/code><\/pre>\n\n\n\nTexte accentu\u00e9<\/h2>\n\n\n\n<em>Texte en italique<\/em><\/code><\/pre>\n\n\n\nRetour \u00e0 la ligne<\/h2>\n\n\n\n<br><\/code><\/pre>\n\n\n\nLigne horizontale<\/h2>\n\n\n\n<hr><\/code><\/pre>\n\n\n\nM\u00eame si cette fiche \u00e9vite les s\u00e9parateurs visuels, cette balise reste utile dans certains cas.<\/p>\n\n\n\n
7. Gestion du texte et de la mise en page<\/h1>\n\n\n\nListes non ordonn\u00e9es<\/h2>\n\n\n\n<ul>
<li>Apache<\/li>
<li>Nginx<\/li>
<li>HAProxy<\/li>
<\/ul><\/code><\/pre>\n\n\n\nListes ordonn\u00e9es<\/h2>\n\n\n\n<ol>
<li>Installer Debian<\/li>
<li>Configurer Apache<\/li>
<li>Tester le service<\/li>
<\/ol><\/code><\/pre>\n\n\n\n8. Liens et navigation<\/h1>\n\n\n\nLien externe<\/h2>\n\n\n\n<a href=\"https:\/\/debian.org\">Debian<\/a><\/code><\/pre>\n\n\n\nOuvrir dans un nouvel onglet<\/h2>\n\n\n\n<a href=\"https:\/\/ubuntu.com\" target=\"_blank\" rel=\"noopener\">
Ubuntu
<\/a><\/code><\/pre>\n\n\n\nrel=\"noopener\"<\/code> am\u00e9liore la s\u00e9curit\u00e9.<\/p>\n\n\n\nLien interne<\/h2>\n\n\n\n<a href=\"contact.html\">Contact<\/a><\/code><\/pre>\n\n\n\n9. Images et m\u00e9dias<\/h1>\n\n\n\nAfficher une image<\/h2>\n\n\n\n<img src=\"images\/serveur.jpg\" alt=\"Serveur Debian\"><\/code><\/pre>\n\n\n\nalt<\/code> reste obligatoire pour :<\/p>\n\n\n\n\n- l\u2019accessibilit\u00e9 ;<\/li>\n\n\n\n
- le SEO ;<\/li>\n\n\n\n
- les lecteurs d\u2019\u00e9cran.<\/li>\n<\/ul>\n\n\n\n
Lecture vid\u00e9o<\/h2>\n\n\n\n<video controls>
<source src=\"video\/demo.mp4\" type=\"video\/mp4\">
<\/video><\/code><\/pre>\n\n\n\n10. Tableaux HTML<\/h1>\n\n\n\n
Les tableaux affichent des donn\u00e9es structur\u00e9es.<\/p>\n\n\n\n
<table>
<tr>
<th>Machine<\/th>
<th>Adresse IP<\/th>
<\/tr>
<tr>
<td>srv-web<\/td>
<td>192.168.1.10<\/td>
<\/tr>
<\/table><\/code><\/pre>\n\n\n\nBalises importantes :<\/p>\n\n\n\n
\n<table><\/code> : tableau ;<\/li>\n\n\n\n<tr><\/code> : ligne ;<\/li>\n\n\n\n<th><\/code> : cellule d\u2019en-t\u00eate ;<\/li>\n\n\n\n<td><\/code> : cellule classique.<\/li>\n<\/ul>\n\n\n\n11. Les formulaires HTML<\/h1>\n\n\n\n
Les formulaires r\u00e9cup\u00e8rent des informations utilisateur.<\/p>\n\n\n\n
Exemple simple<\/h2>\n\n\n\n<form action=\"\/login\" method=\"post\">
<label for=\"user\">Utilisateur<\/label>
<input type=\"text\" id=\"user\" name=\"user\">
<label for=\"password\">Mot de passe<\/label>
<input type=\"password\" id=\"password\" name=\"password\">
<button type=\"submit\">Connexion<\/button>
<\/form><\/code><\/pre>\n\n\n\nExplications<\/h2>\n\n\n\n\naction<\/code> indique la destination ;<\/li>\n\n\n\nmethod=\"post\"<\/code> envoie les donn\u00e9es ;<\/li>\n\n\n\ninput<\/code> cr\u00e9e un champ ;<\/li>\n\n\n\ntype=\"password\"<\/code> masque la saisie.<\/li>\n<\/ul>\n\n\n\n12. HTML s\u00e9mantique<\/h1>\n\n\n\n
Le HTML moderne privil\u00e9gie les balises s\u00e9mantiques.<\/p>\n\n\n\n
Exemple :<\/p>\n\n\n\n
<header><\/header>
<nav><\/nav>
<main><\/main>
<section><\/section>
<article><\/article>
<footer><\/footer><\/code><\/pre>\n\n\n\nCes balises am\u00e9liorent :<\/p>\n\n\n\n
\n- le r\u00e9f\u00e9rencement ;<\/li>\n\n\n\n
- l\u2019accessibilit\u00e9 ;<\/li>\n\n\n\n
- la lisibilit\u00e9 du code.<\/li>\n<\/ul>\n\n\n\n
13. M\u00e9tadonn\u00e9es et SEO<\/h1>\n\n\n\nDescription SEO<\/h2>\n\n\n\n<meta name=\"description\" content=\"Tutoriel HTML pour BTS CIEL et SIO\"><\/code><\/pre>\n\n\n\nResponsive design<\/h2>\n\n\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/pre>\n\n\n\nEncodage UTF-8<\/h2>\n\n\n\n<meta charset=\"UTF-8\"><\/code><\/pre>\n\n\n\n14. Arborescence d\u2019un projet web<\/h1>\n\n\n\n
Exemple recommand\u00e9 :<\/p>\n\n\n\n
site-web\/
\u251c\u2500\u2500 index.html
\u251c\u2500\u2500 contact.html
\u251c\u2500\u2500 css\/
\u2502 \u2514\u2500\u2500 style.css
\u251c\u2500\u2500 js\/
\u2502 \u2514\u2500\u2500 app.js
\u251c\u2500\u2500 images\/
\u2502 \u2514\u2500\u2500 logo.png
\u2514\u2500\u2500 assets\/<\/code><\/pre>\n\n\n\nCette organisation simplifie :<\/p>\n\n\n\n
\n- la maintenance ;<\/li>\n\n\n\n
- les sauvegardes ;<\/li>\n\n\n\n
- le d\u00e9ploiement ;<\/li>\n\n\n\n
- le travail en \u00e9quipe.<\/li>\n<\/ul>\n\n\n\n
15. Fichiers importants<\/h1>\n\n\n\nFichiers HTML<\/h2>\n\n\n\n\/var\/www\/html\/index.html
\/var\/www\/html\/contact.html<\/code><\/pre>\n\n\n\nConfiguration Apache<\/h2>\n\n\n\n\/etc\/apache2\/sites-available\/<\/code><\/pre>\n\n\n\nConfiguration Nginx<\/h2>\n\n\n\n\/etc\/nginx\/sites-available\/<\/code><\/pre>\n\n\n\nJournaux Apache<\/h2>\n\n\n\n\/var\/log\/apache2\/access.log
\/var\/log\/apache2\/error.log<\/code><\/pre>\n\n\n\nJournaux Nginx<\/h2>\n\n\n\n\/var\/log\/nginx\/access.log
\/var\/log\/nginx\/error.log<\/code><\/pre>\n\n\n\n16. Exemple complet de page HTML<\/h1>\n\n\n\n<!DOCTYPE html>
<html lang=\"fr\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta name=\"description\" content=\"Site de d\u00e9monstration HTML\">
<title>Breizh Sec Ops<\/title>
<\/head>
<body>
<header>
<h1>Breizh Sec Ops<\/h1>
<\/header>
<nav>
<a href=\"index.html\">Accueil<\/a>
<a href=\"contact.html\">Contact<\/a>
<\/nav>
<main>
<section>
<h2>Pr\u00e9sentation<\/h2>
<p>
Exemple de page HTML p\u00e9dagogique.
<\/p>
<img src=\"images\/linux.png\" alt=\"Logo Linux\">
<\/section>
<section>
<h2>Liste des services<\/h2>
<ul>
<li>Apache2<\/li>
<li>Nginx<\/li>
<li>MariaDB<\/li>
<\/ul>
<\/section>
<section>
<h2>Connexion<\/h2>
<form action=\"\/login\" method=\"post\">
<label for=\"login\">Utilisateur<\/label>
<input type=\"text\" id=\"login\" name=\"login\">
<label for=\"password\">Mot de passe<\/label>
<input type=\"password\" id=\"password\" name=\"password\">
<button type=\"submit\">Connexion<\/button>
<\/form>
<\/section>
<\/main>
<footer>
<p>Breizh Sec Ops<\/p>
<\/footer>
<\/body>
<\/html><\/code><\/pre>\n\n\n\n17. Commandes utiles et d\u00e9pannage<\/h1>\n\n\n\nInstaller Apache2<\/h2>\n\n\n\nsudo apt install apache2<\/code><\/pre>\n\n\n\nV\u00e9rifier le service<\/h2>\n\n\n\nsudo systemctl status apache2<\/code><\/pre>\n\n\n\nstatus<\/code> affiche :<\/p>\n\n\n\n\n- l\u2019\u00e9tat ;<\/li>\n\n\n\n
- les erreurs ;<\/li>\n\n\n\n
- le PID ;<\/li>\n\n\n\n
- les derniers logs.<\/li>\n<\/ul>\n\n\n\n
Red\u00e9marrer Apache<\/h2>\n\n\n\nsudo systemctl restart apache2<\/code><\/pre>\n\n\n\nRecharger la configuration<\/h2>\n\n\n\nsudo systemctl reload apache2<\/code><\/pre>\n\n\n\nreload<\/code> recharge sans couper les connexions.<\/p>\n\n\n\nTester la syntaxe Apache<\/h2>\n\n\n\nsudo apachectl configtest<\/code><\/pre>\n\n\n\nV\u00e9rifier les ports ouverts<\/h2>\n\n\n\nsudo ss -tulpn<\/code><\/pre>\n\n\n\nOptions :<\/p>\n\n\n\n
\n-t<\/code> : TCP ;<\/li>\n\n\n\n-u<\/code> : UDP ;<\/li>\n\n\n\n-l<\/code> : \u00e9coute ;<\/li>\n\n\n\n-p<\/code> : processus ;<\/li>\n\n\n\n-n<\/code> : format num\u00e9rique.<\/li>\n<\/ul>\n\n\n\nPare-feu UFW<\/h2>\n\n\n\n
Autoriser HTTP :<\/p>\n\n\n\n
sudo ufw allow 80\/tcp<\/code><\/pre>\n\n\n\nAutoriser HTTPS :<\/p>\n\n\n\n
sudo ufw allow 443\/tcp<\/code><\/pre>\n\n\n\nActiver le pare-feu :<\/p>\n\n\n\n
sudo ufw enable<\/code><\/pre>\n\n\n\nAfficher les r\u00e8gles :<\/p>\n\n\n\n
sudo ufw status verbose<\/code><\/pre>\n\n\n\n18. Logs et outils de d\u00e9bogage<\/h1>\n\n\n\nApache<\/h2>\n\n\n\nAccess log<\/h3>\n\n\n\ntail -f \/var\/log\/apache2\/access.log<\/code><\/pre>\n\n\n\nTu vois :<\/p>\n\n\n\n
\n- les IP clientes ;<\/li>\n\n\n\n
- les pages demand\u00e9es ;<\/li>\n\n\n\n
- les codes HTTP ;<\/li>\n\n\n\n
- les navigateurs utilis\u00e9s.<\/li>\n<\/ul>\n\n\n\n
Error log<\/h2>\n\n\n\ntail -f \/var\/log\/apache2\/error.log<\/code><\/pre>\n\n\n\nTu peux d\u00e9tecter :<\/p>\n\n\n\n
\n- erreurs PHP ;<\/li>\n\n\n\n
- erreurs de permissions ;<\/li>\n\n\n\n
- probl\u00e8mes de configuration.<\/li>\n<\/ul>\n\n\n\n
Nginx<\/h2>\n\n\n\ntail -f \/var\/log\/nginx\/error.log<\/code><\/pre>\n\n\n\nConsole navigateur<\/h2>\n\n\n\n
Dans Firefox ou Chromium :<\/p>\n\n\n\n
\n- touche
F12<\/code><\/li>\n\n\n\n- onglet Console<\/li>\n\n\n\n
- onglet R\u00e9seau<\/li>\n<\/ul>\n\n\n\n
Tu peux analyser :<\/p>\n\n\n\n
\n- erreurs JavaScript ;<\/li>\n\n\n\n
- ressources manquantes ;<\/li>\n\n\n\n
- codes HTTP ;<\/li>\n\n\n\n
- temps de chargement.<\/li>\n<\/ul>\n\n\n\n
19. Erreurs fr\u00e9quentes<\/h1>\n\n\n\nOublier une balise fermante<\/h2>\n\n\n\n
Incorrect :<\/p>\n\n\n\n
<p>Bonjour<\/code><\/pre>\n\n\n\nCorrect :<\/p>\n\n\n\n
<p>Bonjour<\/p><\/code><\/pre>\n\n\n\nMauvais chemin image<\/h2>\n\n\n\n
Incorrect :<\/p>\n\n\n\n