Bienvenue dans ce guide complet pour apprendre à créer un site web avec HTML et CSS. Que vous soyez débutant ou curieux de découvrir le développement web, vous êtes au bon endroit.
Nous allons vous montrer étape par étape comment structurer votre site avec HTML et le rendre beau et agréable avec CSS.
Pas besoin d’ordinateur puissant : vous pouvez coder directement sur votre téléphone avec des applications simples à utiliser.
Suivez le tutoriel jusqu’à la fin, et vous serez capable de créer votre propre site web !
HTML (HyperText Markup Language)
HTML est la base de tout site web. C’est lui qui structure les pages. Il sert à organiser le contenu : titres, paragraphes, images, liens, tableaux, boutons, formulaires, etc.
Importance :
- Définit la structure du site
- Permet d’ajouter des éléments comme des textes, images, vidéos
- Organise le contenu pour qu’il soit lisible et compréhensible par les navigateurs
CSS (Cascading Style Sheets)
CSS gère l’apparence visuelle d’un site. Il sert à rendre le site joli et attractif.
Importance :
- Applique des couleurs, tailles, polices
- Gère la disposition des éléments (mise en page)
- Rend les sites responsables (adaptés aux téléphones, tablettes, PC)
- Donne un style professionnel et cohérent à tout le site
En résumé :
- HTML = le squelette du site
- CSS = les vêtements, les couleurs,
la beauté du site
Voici quelques bonnes applications que tu peux utiliser :
Sur Android :
1. Acode – Léger, complet, supporte HTML, CSS, JavaScript
2. Dcoder – Bon pour l’apprentissage et les petits projets
3. Spck Editor – Interface claire, support GitHub
4. Quoda – Éditeur puissant, avec aperçu du rendu
Sur ordinateur (Windows, Mac, Linux) :
1. Visual Studio Code – Le plus populaire, très puissant et personnalisable
2. Sublime Text – Léger, rapide, idéal pour le HTML/CSS
3. Brackets – Spécialisé pour le web, avec aperçu en direct
4. Atom – Open source, simple à utiliser
Voici un exemple de base en HTML et CSS que vous pouvez copier et coller dans votre éditeur pour créer votre première page web. Ce code vous montre comment structurer une page avec HTML et lui donner un style avec CSS. Testez-le pour voir le résultat dans votre navigateur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page HTML</title>
</head>
<body>
<h1>Bonjour, monde !</h1>
</body>
</html>
body {
background-color: #ccff00;
font-family: Arial, sans-serif;
}
h1 {
color: #004080;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}