Site web
Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE
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 ?
- Créer un dossier (ex :
MonSite)
- Dans ce dossier, créer :
index.htmlstyle.css
- Ouvrir le dossier dans l’éditeur de code
- Ouvrir
index.htmldans 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.htmlcontient le contenu (HTML)style.cssgère le design (CSS)- On ouvre le fichier HTML dans un navigateur pour tester
Votre premier site web en HTML/CSS est maintenant fonctionnel !