Premiers pas avec HTML : Créez votre première page web en 10 minutes
Mike Codeur
Vous rêvez de créer votre propre site web mais ne savez pas par où commencer ?
Bonne nouvelle : avec HTML, le langage de base du web, vous pouvez créer une première page simple en un rien de temps. Pas besoin d’être un expert, suivez ce guide et lancez-vous !
Qu'est-ce que HTML ?
HTML, ou HyperText Markup Language, est la structure de base de toutes les pages web. Imaginez HTML comme le squelette qui donne forme à vos contenus en ligne. Grâce à des balises (ou tags), vous pouvez structurer du texte, ajouter des images, insérer des liens, et bien plus encore.
Votre matériel de départ
Avant de commencer, voici ce dont vous avez besoin :
- Un éditeur de texte : Visual Studio Code ou même le Bloc-notes suffisent.
- Un navigateur web : Chrome, Firefox ou Edge.
- 10 minutes de votre temps.
Étape 1 : Créez le fichier HTML
- Ouvrez votre éditeur de texte.
- Enregistrez un nouveau fichier avec l’extension
.html, par exemple :index.html.
Étape 2 : Structure de base d'une page HTML
Copiez-collez ce code dans votre fichier :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Première Page Web</title>
</head>
<body>
<h1>Bienvenue sur ma première page web !</h1>
<p>Ceci est un paragraphe de texte. Créer une page web est plus simple que vous ne le pensez.</p>
</body>
</html>Explication rapide :
<!DOCTYPE html>: Indique que nous utilisons HTML5.<html>: La racine de votre document.<head>: Contient des informations sur la page (comme le titre affiché dans l’onglet du navigateur).<body>: Contient tout ce que vos visiteurs verront.
Étape 3 : Visualisez votre page
- Ouvrez le fichier
index.htmldans votre navigateur (double-cliquez dessus). - Félicitations, vous venez de créer votre première page web !
Étape 4 : Ajoutez des éléments
Expérimentez en ajoutant d'autres contenus à votre page.
Ajouter une image :
<img src="https://via.placeholder.com/150" alt="Image exemple">Ajouter un lien :
<a href="https://www.google.com" target="_blank">Visitez Google</a>Étape 5 : Personnalisez avec un peu de style
Pour rendre votre page plus attrayante, ajoutez un fichier CSS basique.
- Créez un fichier nommé
style.cssdans le même dossier. - Ajoutez ce code :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
text-align: center;
}- Liez le fichier CSS à votre HTML en insérant cette ligne dans
<head>:
<link rel="stylesheet" href="style.css">Rafraîchissez votre page pour admirer le résultat !
Conclusion
En quelques minutes, vous avez créé une première page web fonctionnelle et commencé à explorer les bases du développement web. C’est le début d’une aventure passionnante. Continuez à expérimenter et, surtout, amusez-vous ! 🚀