1. Introduction

HTML constitue la base de toutes les pages web. Dès que tu affiches un site dans un navigateur, celui-ci interprète un document HTML pour construire la page visible à l’écran.

Dans un BTS CIEL ou SIO, tu utilises HTML dans plusieurs situations :

création de sites web ;
développement d’interfaces d’administration ;
intégration d’applications réseau ;
création de documentation web ;
mise en place de dashboards techniques ;
développement d’interfaces IoT ou cybersécurité.

Cette fiche t’apprend à :

comprendre la structure d’un document HTML ;
utiliser les principales balises ;
créer une page propre et structurée ;
intégrer des images, liens, tableaux et formulaires ;
respecter les bonnes pratiques modernes ;
préparer un site compatible SEO et accessibilité.

2. Sommaire

Introduction
Sommaire
Synthèse Markdown pour ta fiche bristol
Présentation du HTML
Installation et environnement de travail
Structure d’un document HTML
Les balises principales
Gestion du texte et de la mise en page
Liens et navigation
Images et médias
Tableaux HTML
Les formulaires HTML
HTML sémantique
Métadonnées et SEO
Arborescence d’un projet web
Fichiers importants
Exemple complet de page HTML
Commandes utiles et dépannage
Logs et outils de débogage
Erreurs fréquentes
Bonnes pratiques de sécurité
Conclusion
Pour aller plus loin
Liens utiles
Propositions de TP

Synthèse Markdown pour ta fiche bristol

# HTML - Aide mémoire

## Structure minimale
```html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
</head>
<body>

</body>
</html>

Titres

<h1>Titre principal</h1>
<h2>Sous-titre</h2>

Texte

<p>Paragraphe</p>
<strong>Important</strong>
<em>Italique</em>

Liens

<a href="https://example.com">Lien</a>

Images

<img src="images/logo.png" alt="Logo">

Liste

<ul>
  <li>Élément</li>
</ul>

Tableau

<table>
  <tr>
    <th>Nom</th>
    <th>IP</th>
  </tr>
  <tr>
    <td>srv01</td>
    <td>192.168.1.10</td>
  </tr>
</table>

Formulaire

<form>
  <input type="text">
  <button>Envoyer</button>
</form>

Commentaire

<!-- commentaire -->


# 3. Présentation du HTML

HTML signifie HyperText Markup Language.

Ce langage décrit la structure d’une page web. Contrairement à Python ou JavaScript, HTML ne programme pas des actions complexes. Il organise le contenu.

HTML fonctionne avec des balises.

Exemple :

```html
<p>Bonjour</p>

Ici :

<p> ouvre un paragraphe ;
</p> ferme le paragraphe.

Le navigateur lit ces balises puis affiche le résultat.

4. Installation et environnement de travail

Tu peux créer des fichiers HTML avec :

Visual Studio Code ;
VSCodium ;
Sublime Text ;
Nano ;
Vim.

Sous Debian 13 :

sudo apt update
sudo apt install code

sudo exécute la commande avec les droits administrateur.
apt install installe un paquet.

Sous Ubuntu :

sudo snap install code --classic

Pour tester rapidement une page :

firefox index.html

Ou :

google-chrome index.html

5. Structure d’un document HTML

Voici la structure minimale moderne :

<!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ère page HTML</p>

</body>
</html>

Explications :

<!DOCTYPE html> indique HTML5 ;
<html> contient toute la page ;
lang="fr" améliore l’accessibilité ;
<head> contient les métadonnées ;
<body> contient le contenu visible ;
<meta charset="UTF-8"> active les accents ;
<title> définit le titre de l’onglet navigateur.

6. Les balises principales

Titres

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>

h1 représente le titre principal de la page.
Tu ne dois généralement utiliser qu’un seul h1.

Paragraphes

<p>Texte du paragraphe</p>

Texte important

<strong>Texte important</strong>

Texte accentué

<em>Texte en italique</em>

Retour à la ligne

<br>

Ligne horizontale

<hr>

Même si cette fiche évite les séparateurs visuels, cette balise reste utile dans certains cas.

7. Gestion du texte et de la mise en page

Listes non ordonnées

<ul>
    <li>Apache</li>
    <li>Nginx</li>
    <li>HAProxy</li>
</ul>

Listes ordonnées

<ol>
    <li>Installer Debian</li>
    <li>Configurer Apache</li>
    <li>Tester le service</li>
</ol>

8. Liens et navigation

Lien externe

<a href="https://debian.org">Debian</a>

Ouvrir dans un nouvel onglet

<a href="https://ubuntu.com" target="_blank" rel="noopener">
    Ubuntu
</a>

rel="noopener" améliore la sécurité.

Lien interne

<a href="contact.html">Contact</a>

9. Images et médias

Afficher une image

<img src="images/serveur.jpg" alt="Serveur Debian">

alt reste obligatoire pour :

l’accessibilité ;
le SEO ;
les lecteurs d’écran.

Lecture vidéo

<video controls>
    <source src="video/demo.mp4" type="video/mp4">
</video>

10. Tableaux HTML

Les tableaux affichent des données structurées.

<table>
    <tr>
        <th>Machine</th>
        <th>Adresse IP</th>
    </tr>

    <tr>
        <td>srv-web</td>
        <td>192.168.1.10</td>
    </tr>
</table>

Balises importantes :

<table> : tableau ;
<tr> : ligne ;
<th> : cellule d’en-tête ;
<td> : cellule classique.

11. Les formulaires HTML

Les formulaires récupèrent des informations utilisateur.

Exemple simple

<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>

Explications

action indique la destination ;
method="post" envoie les données ;
input crée un champ ;
type="password" masque la saisie.

12. HTML sémantique

Le HTML moderne privilégie les balises sémantiques.

Exemple :

<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<footer></footer>

Ces balises améliorent :

le référencement ;
l’accessibilité ;
la lisibilité du code.

13. Métadonnées et SEO

Description SEO

<meta name="description" content="Tutoriel HTML pour BTS CIEL et SIO">

Responsive design

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Encodage UTF-8

<meta charset="UTF-8">

14. Arborescence d’un projet web

Exemple recommandé :

site-web/
├── index.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── images/
│   └── logo.png
└── assets/

Cette organisation simplifie :

la maintenance ;
les sauvegardes ;
le déploiement ;
le travail en équipe.

15. Fichiers importants

Fichiers HTML

/var/www/html/index.html
/var/www/html/contact.html

Configuration Apache

/etc/apache2/sites-available/

Configuration Nginx

/etc/nginx/sites-available/

Journaux Apache

/var/log/apache2/access.log
/var/log/apache2/error.log

Journaux Nginx

/var/log/nginx/access.log
/var/log/nginx/error.log

16. Exemple complet de page HTML

<!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émonstration 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ésentation</h2>

    <p>
        Exemple de page HTML pédagogique.
    </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>

17. Commandes utiles et dépannage

Installer Apache2

sudo apt install apache2

Vérifier le service

sudo systemctl status apache2

status affiche :

l’état ;
les erreurs ;
le PID ;
les derniers logs.

Redémarrer Apache

sudo systemctl restart apache2

Recharger la configuration

sudo systemctl reload apache2

reload recharge sans couper les connexions.

Tester la syntaxe Apache

sudo apachectl configtest

Vérifier les ports ouverts

sudo ss -tulpn

Options :

-t : TCP ;
-u : UDP ;
-l : écoute ;
-p : processus ;
-n : format numérique.

Pare-feu UFW

Autoriser HTTP :

sudo ufw allow 80/tcp

Autoriser HTTPS :

sudo ufw allow 443/tcp

Activer le pare-feu :

sudo ufw enable

Afficher les règles :

sudo ufw status verbose

18. Logs et outils de débogage

Apache

Access log

tail -f /var/log/apache2/access.log

Tu vois :

les IP clientes ;
les pages demandées ;
les codes HTTP ;
les navigateurs utilisés.

Error log

tail -f /var/log/apache2/error.log

Tu peux détecter :

erreurs PHP ;
erreurs de permissions ;
problèmes de configuration.

Nginx

tail -f /var/log/nginx/error.log

Console navigateur

Dans Firefox ou Chromium :

touche F12
onglet Console
onglet Réseau

Tu peux analyser :

erreurs JavaScript ;
ressources manquantes ;
codes HTTP ;
temps de chargement.

19. Erreurs fréquentes

Oublier une balise fermante

Incorrect :

<p>Bonjour

Correct :

<p>Bonjour</p>

Mauvais chemin image

Incorrect :

<img src="logo.png">

Si l’image se trouve dans images/.

Correct :

<img src="images/logo.png">

Oublier UTF-8

Sans UTF-8 :

accents cassés ;
caractères incohérents.

20. Bonnes pratiques de sécurité

Toujours utiliser HTTPS

HTTPS protège :

les mots de passe ;
les cookies ;
les formulaires.

Ne jamais faire confiance aux formulaires HTML

HTML ne sécurise pas les données.

Le serveur doit :

valider ;
filtrer ;
contrôler les entrées utilisateur.

Éviter les scripts inline

Évite :

onclick="..."

Privilégie JavaScript externe.

Utiliser les attributs de sécurité

rel="noopener noreferrer"

21. Conclusion

HTML représente la fondation du web moderne. Une bonne maîtrise des balises, de la structure et des bonnes pratiques simplifie ensuite l’apprentissage du CSS, du JavaScript, de PHP ou des frameworks modernes.

Prends l’habitude d’écrire un HTML :

lisible ;
bien indenté ;
sémantique ;
accessible ;
sécurisé.

Cette discipline facilite énormément la maintenance des projets professionnels.

22. Pour aller plus loin

Tu peux approfondir :

CSS ;
Flexbox ;
Grid Layout ;
JavaScript ;
accessibilité web ;
SEO technique ;
responsive design ;
Bootstrap ;
React ;
Vue.js.

23. Liens utiles

Documentation officielle HTML MDN

https://developer.mozilla.org/fr/docs/Web/HTML

Référence officielle très complète avec exemples modernes.

Documentation WHATWG HTML

https://html.spec.whatwg.org

Spécification officielle du standard HTML.

OpenClassrooms – Créez votre site web avec HTML5 et CSS3

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3

Excellent cours progressif en français.

Documentation Debian Apache2

https://wiki.debian.org/Apache

Très utile pour héberger des pages HTML sous Debian.

Documentation Ubuntu Apache2

https://documentation.ubuntu.com/server/how-to/web-services/install-apache2

Guide officiel Ubuntu Server.

RFC URI

https://datatracker.ietf.org/doc/html/rfc3986

Référence sur les URL et URI.

24. Propositions de TP

TP 1 — Première page HTML

Objectifs :

créer une page HTML ;
ajouter titres, paragraphes et images ;
tester dans un navigateur.

TP 2 — Site multi-pages

Objectifs :

créer plusieurs pages ;
utiliser des liens ;
organiser les fichiers.

TP 3 — Formulaire de connexion

Objectifs :

créer un formulaire HTML ;
comprendre GET et POST ;
analyser les requêtes réseau.

TP 4 — Hébergement Apache2

Objectifs :

installer Apache ;
publier un site ;
analyser les logs.

TP 5 — Mini site vitrine

Objectifs :

créer un site complet ;
intégrer CSS ;
optimiser le HTML sémantique ;
préparer un déploiement web.