Tu débutes en développement web ? Tu veux créer ta première page avec HTML et CSS ?
Alors ce tutoriel est parfait pour toi.
Dans cet article, tu vas apprendre à créer une petite page web bien présentée, avec :
- Un titre
- Un paragraphe
- Une image
- Et un design propre avec CSS
🧱 Partie 1 : Structure de base du projet
📁 Dans ton dossier, crée 2 fichiers :
- index.html 👉 pour le contenu
- style.css 👉 pour le style
🧾 Partie 2 : Code HTML expliqué
Voici le contenu de ton fichier index.html :
html
<!DOCTYPE html>
Ma première page
Bienvenue sur mon site web
Je m'appelle Josué, je suis développeur web en formation.
<!DOCTYPE html> : indique que c’est un fichier HTML5
- : la langue est le français
- : contient le titre et le lien vers le CSS
- : relie notre fichier CSS
- : le corps de la page, ce que l'utilisateur verra
: un grand titre
: un paragraphe
: une image
🎨 Partie 3 : Code CSS expliqué
Dans le fichier style.css, mets ce code :
css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
padding: 50px;
}
h1 {
color: #2c3e50;
}
p {
color: #34495e;
font-size: 18px;
}
img {
margin-top: 20px;
width: 300px;
border-radius: 8px;
}
🧠 Explication CSS :
- font-family : change la police d’écriture
- background-color : couleur de fond claire
- text-align: center : tout est centré
- padding : espace à l’intérieur de la page
- color : couleur du texte
- font-size : taille du texte
- img : largeur + coins arrondis
🔍 Résultat final
Tu verras une page simple et propre avec :
- Un titre en haut
- Une description
- Une image centrée
💻 Tu peux même remplacer le lien d'image par une vraie photo de toi ou une illustration !
✅ Conclusion
Voilà ! Tu as maintenant une vraie page HTML + CSS.
C’est la base pour créer :
- Un portfolio
- Un CV en ligne
- Un blog personnel