Tomy PELISSOU le 6 février 2026 à 14:14

2026-02-06T14:14:15Z

← Version précédente		Version du 6 février 2026 à 14:14
Ligne 1 :		Ligne 1 :
	'''Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE'''		'''Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE'''
	[[Fichier:HTML5.~~webp~~\|vignette\|Logo HTML & CSS]]		[[Fichier:HTML5.png.png\|vignette\|Logo HTML & CSS]]

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

Tomy PELISSOU le 6 février 2026 à 14:01

2026-02-06T14:01:57Z

← Version précédente		Version du 6 février 2026 à 14:01
Ligne 1 :		Ligne 1 :
	'''Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE'''		'''Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE'''
			[[Fichier:HTML5.webp\|vignette\|Logo HTML & CSS]]
	[[Fichier:~~HTML CSS Logo~~.~~png~~\|vignette\|Logo HTML & CSS]]

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

Tomy PELISSOU : Page créée avec « '''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, an... »

2026-02-06T14:00:16Z

Page créée avec « '''Comment coder un site en HTML & CSS ? Expliqué par PELISSOU Tomy & Enzo VEAUTE''' vignette|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, an... »

Nouvelle page

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

[[Fichier:HTML CSS Logo.png|vignette|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 :
** <code>index.html</code> (le contenu)
** <code>style.css</code> (le design)

---

== Comment créer le site ? ==

# Créer un dossier (ex : <code>MonSite</code>)

# Dans ce dossier, créer :

#* <code>index.html</code>
#* <code>style.css</code>

# Ouvrir le dossier dans l’éditeur de code

# Ouvrir <code>index.html</code> dans un navigateur pour voir le résultat

---

== Comment coder en HTML ? ==

Dans <code>index.html</code>, on écrit la structure de base :

<code>
<!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>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est mon premier site en HTML et CSS.</p>

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

Ce que ça fait :

* <code><h1></code> : un grand titre
* <code><p></code> : un paragraphe
* <code><a></code> : un lien
* <code><link></code> : connecte le CSS au HTML

---

== Comment styliser en CSS ? ==

Dans <code>style.css</code>, on change l’apparence :

<code>
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;
} </code>

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 : <code>header</code>, <code>main</code>, <code>footer</code>
* Utiliser des '''classes''' pour cibler des éléments :

HTML : <code>
<div class="carte">Mon contenu</div> </code>

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

---

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

* <code>index.html</code> contient le contenu (HTML)
* <code>style.css</code> 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 !'''

Site web - Historique des versions

Tomy PELISSOU le 6 février 2026 à 14:14

Tomy PELISSOU le 6 février 2026 à 14:01