🌐 Comment coder en HTML (le squelette d’un site web)

🧱 1. Qu’est-ce que le HTML ?

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.

🧩 2. Comment il est structuré

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é

💡 Tips à retenir :

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

📄 3. Le squelette complet d’une page HTML

Voici le modèle de base de toute page web :

<!DOCTYPE html>

<html>

<head>

<title>Morgann Music</title>

</head>

<body>

<h1>Bienvenue sur Morgann Music 🎧</h1>

<p>Découvre les derniers sons, clips et actus exclusives.</p>

</body>

</html>

💡 Explication :

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

🧠 4. Les balises les plus utiles à connaître

Balise

Rôle

Titres (h1 = grand titre, h6 = petit)

<p>

Paragraphe de texte

Lien cliquable

Image

Liste à puces

Liste numérotée

<div>

Zone (bloc de contenu)

<span>

Petit morceau de texte

<br>

Saut de ligne

<hr>

Ligne horizontale de séparation

💻 Exemple complet :

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

</body>

</html>

💡 Tips à retenir :

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>

🔍 5. Tester ton code facilement

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 🎉

🎯 Mini défi

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.

🎨 Apprendre le CSS (le style et les couleurs du web)

💡 “Si le HTML est le squelette du site, le CSS en est les vêtements, la couleur de peau et le maquillage.”

🧱 1. C’est quoi le CSS ?

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 💻

🧩 2. Comment le CSS fonctionne

Tu donnes des règles de style à tes éléments HTML.

Chaque règle a 3 parties :

sélecteur {

propriété: valeur;

}

Exemple :

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é

💡 Tips à retenir :

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

💾 3. Où écrire ton CSS

Tu peux écrire le CSS de trois façons :

✅ Méthode 1 : Directement dans le HTML

<h1 style="color:red;">Hello Morgann Music</h1>

👉 Rapide, mais pas recommandé pour les gros sites.

✅ Méthode 2 : Dans une balise <style> dans ton fichier HTML

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

✅ Méthode 3 (pro) : Dans un fichier CSS séparé

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

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;

}

🎨 4. Exemple complet : “Page Morgann Music stylisée”

index.html

<!DOCTYPE html>

<html>

<head>

<title>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/artist/...">Spotify</a></li>

</ul>

</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é.

💡 Tips à retenir :

✅ 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

🎯 Mini défi

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)

Google Sites

Report abuse