🌐 Comment coder en HTML (le squelette d’un site web)
🌐 Comment coder en HTML (le squelette d’un site web)
HTML veut dire HyperText Markup Language.
C’est le langage de structure des pages web.
Il dit à ton navigateur quoi afficher : du texte, des images, des liens, etc.
Il est lu de haut en bas, comme un livre.
Il n’est pas fait pour “calculer”, juste pour organiser le contenu.
Le HTML fonctionne avec des balises.
Une balise, c’est un mot-clé entouré de < >.
Elles vont souvent par paire :
<balise>contenu</balise>
Exemple :
<p>Salut, je suis Morgann Music !</p>
➡️ <p> = début du paragraphe
➡️ </p> = fin du paragraphe
➡️ Le texte au milieu = le contenu affiché
Les balises ouvrantes n’ont pas de slash : <p>
Les balises fermantes ont un slash / : </p>
Les balises sont toujours en minuscules (sinon ça peut buguer)
Le texte à afficher va entre les balises
Voici le modèle de base de toute page web :
<!DOCTYPE html>
<html>
<head>
<title>Morgann Music</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Bienvenue sur Morgann Music 🎧</h1>
<p>Découvre les derniers sons, clips et actus exclusives.</p>
</body>
</html>
<!DOCTYPE html> → indique qu’on écrit du HTML5 (la version moderne)
<html> → englobe toute la page
<head> → contient les informations cachées (titre, métadonnées, etc.)
<title> → le titre visible dans l’onglet du navigateur
<body> → contient tout ce que l’utilisateur voit
Balise
Rôle
<h1> à <h6>
Titres (h1 = grand titre, h6 = petit)
<p>
Paragraphe de texte
<a href="">
Lien cliquable
<img src="">
Image
<ul> / <li>
Liste à puces
<ol> / <li>
Liste numérotée
<div>
Zone (bloc de contenu)
<span>
Petit morceau de texte
<br>
Saut de ligne
<hr>
Ligne horizontale de séparation
<!DOCTYPE html>
<html>
<head>
<title>Page de Morgann Music</title>
</head>
<body>
<h1>🎧 Morgann Music</h1>
<p>Bienvenue sur le site officiel.</p>
<h2>Liens officiels :</h2>
<ul>
<li><a href="https://music.apple.com/fr/artist/morgann-music/1820890727">Apple Music</a></li>
<li><a href="https://open.spotify.com/intl-fr/artist/0WJlJdaavSKPNoCSSHb8OC">Spotify</a></li>
</ul>
<img src="https://music.morgannmusic.uk/logo%20plein.svg" alt="Logo Morgann Music" width="200">
</body>
</html>
Les liens utilisent href="URL"
Les images utilisent src="URL"
Chaque balise doit être fermée proprement
Si tu veux un saut de ligne, mets <br>
Mets le contenu visible entre <body> et </body>
1️⃣ Ouvre un bloc-notes (Windows) ou TextEdit (Mac)
2️⃣ Copie le code HTML
3️⃣ Enregistre-le sous :
index.html
4️⃣ Double-clique dessus ➜ il s’ouvrira dans ton navigateur 🌐
Félicitations, tu viens de créer ta première page web 🎉
Crée un fichier morgann.html avec ce contenu :
Un titre <h1> “Bienvenue sur Morgann Music”
Un paragraphe avec ton slogan
Une image (ton logo)
Un lien vers ton Apple Music
➡️ Ensuite, ouvre ton fichier dans ton navigateur pour voir le résultat.
💡 “Si le HTML est le squelette du site, le CSS en est les vêtements, la couleur de peau et le maquillage.”
CSS veut dire Cascading Style Sheets
➡️ C’est le langage du design sur le web.
Il permet de :
changer les couleurs 🎨
modifier les tailles et polices de texte ✍️
ajouter des marges, ombres, bordures, etc. 🪞
rendre ton site beau et professionnel 💻
Tu donnes des règles de style à tes éléments HTML.
Chaque règle a 3 parties :
sélecteur {
propriété: valeur;
}
h1 {
color: blue;
font-size: 32px;
}
➡️ h1 = le sélecteur (à quel élément appliquer le style)
➡️ color = la propriété
➡️ blue = la valeur
➡️ Les accolades { } contiennent les styles à appliquer
➡️ Le point-virgule ; sépare chaque propriété
Les propriétés CSS se terminent toujours par un point-virgule ;
Les valeurs (texte, couleurs, tailles) vont toujours après les deux-points :
Les accolades { } entourent les styles
Tu peux styliser plusieurs éléments dans un même fichier
Tu peux écrire le CSS de trois façons :
<h1 style="color:red;">Hello Morgann Music</h1>
👉 Rapide, mais pas recommandé pour les gros sites.
<!DOCTYPE html>
<html>
<head>
<title>Morgann Music</title>
<style>
h1 {
color: #ff0055;
text-align: center;
}
p {
color: #444;
}
</style>
</head>
<body>
<h1>Bienvenue sur Morgann Music 🎧</h1>
<p>Découvre les nouveaux sons et actus.</p>
</body>
</html>
C’est la méthode la plus propre 👇
1️⃣ Crée un fichier :
style.css
2️⃣ Dans ton HTML, ajoute ce lien dans le <head> :
<link rel="stylesheet" href="style.css">
3️⃣ Et dans ton style.css :
body {
background-color: #111;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #ff2a6d;
font-size: 40px;
}
a {
color: #00bfff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Morgann Music</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🎧 Morgann Music</h1>
<p>Bienvenue sur le site officiel.</p>
<h2>Liens officiels :</h2>
<ul>
<li><a href="https://music.apple.com/fr/artist/morgann-music/1820890727">Apple Music</a></li>
<li><a href="https://open.spotify.com/artist/...">Spotify</a></li>
</ul>
<img src="https://music.morgannmusic.uk/logo%20plein.svg" alt="Logo Morgann Music" width="200">
</body>
</html>
style.css
body {
background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
padding: 40px;
}
h1 {
font-size: 48px;
color: #ff0066;
text-shadow: 0px 0px 20px rgba(255,0,102,0.6);
}
p {
color: #ddd;
font-size: 18px;
}
ul {
list-style: none;
padding: 0;
}
a {
color: #00bfff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #ff0066;
transition: 0.3s;
}
img {
margin-top: 20px;
border-radius: 20px;
box-shadow: 0px 0px 15px rgba(255,255,255,0.2);
}
Résultat 👉 une page moderne, centrée, avec effet de lumière et dégradé.
✅ Le CSS agit sur les balises HTML (par leur nom, classe ou id)
✅ Les accolades { } contiennent le style
✅ Les couleurs peuvent être en nom, code hexadécimal, ou rgba()
✅ Tu peux tester en modifiant en direct ton fichier et en actualisant ton navigateur
✅ Le CSS se lit de haut en bas : le dernier style appliqué gagne
Crée un site morgann.html + style.css :
Arrière-plan en dégradé sombre
Texte blanc
Titre rose fluo avec ombre
Lien bleu qui devient rose au survol
Logo avec coins arrondis
💡 Bonus : teste d’autres couleurs ou tailles (font-size, color, background-color)