Cette ressource vous propose un modèle de page HTML complète, avec des explications pas à pas pour comprendre la structure d'un site web. Vous pouvez copier le code, le modifier et l'utiliser comme base pour vos projets.
À savoir : Ce code est fourni à titre d'exemple. Il ne contient pas de JavaScript avancé ni de connexion à une base de données. Pour un site professionnel, pensez à ajouter des feuilles de style et à sécuriser les formulaires.
Comment utiliser cette ressource
- Copiez le code HTML fourni dans un fichier avec l'extension .html
- Ouvrez le fichier dans un navigateur pour voir le résultat.
- Modifiez le contenu (titres, textes, liens) selon vos besoins.
- Ajoutez des images en les plaçant dans le même dossier et en référençant leur chemin.
- Créez une feuille de style CSS pour personnaliser l'apparence.
Télécharger la ressource
Exemple de page HTML
Le code ci-dessous est un exemple complet de page HTML avec une structure sémantique : en-tête, navigation, contenu principal et pied de page.
Explications
Chaque balise est commentée pour vous aider à comprendre son rôle. Vous pouvez supprimer les commentaires une fois que vous avez compris.
Version à copier et adapter
Mon premier site body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f0f0f0; padding: 20px; text-align: center; } nav ul { list-style-type: none; background-color: #333; overflow: hidden; } nav ul li { display: inline; } nav ul li a { color: white; padding: 14px 16px; text-decoration: none; } main { padding: 20px; } footer { background-color: #f0f0f0; text-align: center; padding: 10px; } Bienvenue sur mon site Accueil À propos Contact Accueil Ceci est la page d'accueil de mon site. À propos Quelques informations sur moi. Contact Vous pouvez me contacter par email : contact@example.com © 2023 Mon SiteChecklist avant utilisation
- Structure de base (doctype, html, head, body)
- Balises meta (charset, viewport)
- Titre de la page
- En-tête (header)
- Navigation (nav)
- Contenu principal (main)
- Sections avec titres
- Pied de page (footer)
- Liens internes et externes
- Validation du code HTML
Questions fréquentes
Quelle est la différence entre HTML et CSS ?
Le HTML structure le contenu d'une page (titres, paragraphes, images), tandis que le CSS gère la présentation (couleurs, polices, mise en page).
Comment voir mon site en ligne ?
Vous devez héberger vos fichiers sur un serveur web. Vous pouvez utiliser un hébergeur gratuit ou payant, puis transférer vos fichiers via FTP ou un gestionnaire de fichiers.
Puis-je utiliser ce code pour un site professionnel ?
Oui, mais il est recommandé d'ajouter des fonctionnalités supplémentaires comme des formulaires de contact, une optimisation pour le référencement et une sécurité renforcée.