NSI·NSISeconde

HTML, CSS et le web

HTML c'est le squelette, CSS c'est les fringues, JS c'est l'attitude.

Cours

HTML : structure

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Un paragraphe.</p>
    <a href="https://exemple.fr">Lien</a>
  </body>
</html>

Balises essentielles

<h1>...<h6> : titres
<p> : paragraphe
<a href="..."> : lien
<img src="..." alt="..."> : image
<ul>/<ol>/<li> : listes
<div>/<span> : conteneurs neutres

CSS : style

h1 {
  color: #22d3a0;
  font-size: 2rem;
}
.btn {
  background: black;
  padding: 10px 20px;
}
#logo { width: 100px; }

Sélecteurs : balise (p), classe (.btn), id (#logo).

Modèle client-serveur

Le client (navigateur) envoie une requête HTTP
Le serveur répond (HTML/CSS/JS, JSON…)
Le navigateur affiche

URL

https://exemple.fr/page?id=42

protocole · domaine · chemin · paramètres

Formules clés

Sélecteur classe

.ma-classe { ... }

Sélecteur id

#mon-id { ... }

Lien

<a href="url">texte</a>

Méthodes

Construire une page web minimale

1Créer un fichier index.html avec la structure HTML5
2Ajouter contenu dans <body> avec balises sémantiques
3Ajouter <link rel="stylesheet" href="style.css"> dans <head>
4Styliser dans style.css avec sélecteurs

Astuces & pièges

À retenir

alt= sur les images est OBLIGATOIRE pour l'accessibilité (et le SEO).

Piège à éviter

id = unique sur la page. class = réutilisable. Ne pas confondre.

CSS sans Flexbox ni Grid, c'est comme cuisiner avec une pelle. Possible, douloureux.

Teste-toi

1.Quel sélecteur cible la classe "btn" ?

2.Une URL HTTPS commence par :