Site web

Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE

Logo HTML & CSS

Déjà, c’est quoi HTML et CSS ?

HTML (HyperText Markup Language) est le langage qui sert à **structurer** une page web : titres, paragraphes, images, boutons, liens…

CSS (Cascading Style Sheets) est le langage qui sert à **mettre en forme** la page web : couleurs, tailles, polices, alignements, animations, etc.

En résumé :

• HTML = le squelette (contenu)
• CSS = le style (design)

---

De quoi a-t-on besoin pour commencer ?

Pour créer un site, il suffit de :

• Un éditeur de code (ex : Visual Studio Code, Notepad++, Sublime Text…)
• Un navigateur (Chrome, Firefox, Edge…) pour tester la page
• Deux fichiers :

 ** index.html (le contenu)
 ** style.css (le design)

---

Comment créer le site ?

1. Créer un dossier (ex : MonSite)

1. Dans ce dossier, créer :

1. • index.html
   • style.css

1. Ouvrir le dossier dans l’éditeur de code

1. Ouvrir index.html dans un navigateur pour voir le résultat

---

Comment coder en HTML ?

Dans index.html, on écrit la structure de base :

<!DOCTYPE html> <html lang="fr"> <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Mon premier site</title>
 <link rel="stylesheet" href="style.css">

</head>

<body>

Bienvenue sur mon site

Ceci est mon premier site en HTML et CSS.

<a href="">Un(https://www.debian.org%22>Un) lien exemple</a> </body> </html>

Ce que ça fait :

•  : un grand titre

•  : un paragraphe

• <a> : un lien
• <link> : connecte le CSS au HTML

---

Comment styliser en CSS ?

Dans style.css, on change l’apparence :

body {

 font-family: Arial, sans-serif;
 background: #f2f2f2;
 padding: 20px;

}

h1 { color: #d00000; text-align: center; }

p { font-size: 18px; }

a { display: inline-block; margin-top: 10px; color: white; background: black; padding: 10px 15px; text-decoration: none; border-radius: 8px; }

Ce que ça fait :

• change la police
• ajoute un fond gris
• centre le titre
• transforme le lien en “bouton”

---

Comment organiser son site (bonnes pratiques)

• Mettre le texte dans des balises logiques : header, main, footer
• Utiliser des classes pour cibler des éléments :

HTML :

Mon contenu

CSS : .carte { background: white; padding: 15px; border-radius: 10px; }

---

Pourquoi apprendre HTML/CSS est utile ?

Création rapide

On peut créer un site vitrine, un portfolio ou une page de présentation facilement.

Compatible partout

Tous les navigateurs lisent HTML/CSS, donc ça marche sur PC et téléphone.

Base obligatoire du web

Avant JavaScript, PHP ou autre, il faut maîtriser HTML/CSS.

Personnalisation totale

On contrôle tout : couleurs, mise en page, animations, design…

---

Conclusion

Une fois les fichiers créés et liés :

• index.html contient le contenu (HTML)
• style.css gère le design (CSS)
• On ouvre le fichier HTML dans un navigateur pour tester

Votre premier site web en HTML/CSS est maintenant fonctionnel !