Création d'un Site Web Complet avec HTML
Glissez pour afficher le menu
Nous avons désormais abordé les concepts fondamentaux de HTML et sommes prêts à créer un site portfolio d'une page complet à partir de zéro.
Vous pouvez essayer de le construire par vous-même ou suivre ce guide étape par étape avec le code pour chaque partie.
Guide étape par étape
1. Plan de la structure du site web
Notre page portfolio comprendra :
- En-tête : titre du site et liens de navigation ;
- À propos : brève introduction sur le propriétaire ;
- Portfolio : projets avec images, titres et courtes descriptions ;
- Contact : formulaire permettant aux visiteurs de prendre contact ;
- Pied de page : droits d'auteur et liens de contact/réseaux sociaux.
2. Structurer le contenu avec HTML sémantique
Créer un nouveau fichier index.html et ajouter la structure HTML de base avec <!DOCTYPE html>, <html>, <head>, et <body>.
index.html
3. Section d'en-tête
Ajouter un <header> avec le nom du propriétaire et un <nav> contenant des liens qui mènent aux sections À propos, Portfolio et Contact.
index.html
4. Section À propos
Créer une balise <section id="about"> avec un titre et un court paragraphe décrivant le propriétaire.
index.html
5. Section Portfolio
Ajouter une balise <section id="portfolio"> qui répertorie les projets avec images, titres et brèves descriptions.
index.html
6. Section Contact
Créer une balise <section id="contact"> avec un formulaire de contact simple recueillant le nom, l'adresse e-mail et le message.
index.html
7. Section pied de page
Terminer la page avec un <footer> incluant un texte de droits d’auteur ainsi que des liens vers les réseaux sociaux, un numéro de téléphone et une adresse e-mail.
index.html
Bonus
Pour rendre la page plus attrayante visuellement, il est possible de lier un fichier CSS et de styliser le HTML. Le CSS contrôle les couleurs, les espacements, les polices et la mise en page, permettant à une même structure d’apparaître beaucoup plus soignée.
Pour l’instant, il suffit de comparer l’apparence de la page en HTML brut et les changements apportés après l’application de styles CSS de base.
index.html
index.css
Voici le lien vers le site web complet construit dans ce chapitre : Site de Julia
Ce que vous avez construit
Vous avez créé une page web complète en utilisant HTML avec une structure, du contenu et des éléments de base.
Ce qui manque
Votre page fonctionne, mais elle reste très basique. HTML définit la structure, pas le design.
Prochaine étape
Pour styliser votre page, vous aurez besoin du CSS afin d’ajouter des couleurs, une mise en page et une finition visuelle.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
