Construire un Site Web Entier

Nous avons couvert tous les sujets essentiels de HTML et sommes maintenant prêts à construire un site web complet à partir de zéro. Créons un site web portfolio d'une page pour présenter vos projets et compétences.

Vous pouvez soit travailler dessus de manière indépendante, soit suivre le guide ci-dessous, où nous vous fournirons des instructions étape par étape et du code lié à chaque étape.

Guide étape par étape

1. Plan de structure du site web

Notre site web comprendra plusieurs sections clés :

1. En-tête : Cette section affichera de manière proéminente le nom du propriétaire du portfolio et facilitera la navigation sur l'ensemble du site web ;
2. À propos : Ici, les visiteurs trouveront des informations pertinentes sur le propriétaire du site web, fournissant des aperçus sur son parcours et son expertise ;
3. Portfolio : Cette section présentera divers projets, chacun avec des images de projet, des titres, des descriptions et les technologies utilisées ;
4. Contact : Nous intégrerons un formulaire pour recueillir les informations des visiteurs ;
5. Pied de page : Le pied de page sera la section de conclusion, comportant des informations sur le droit d'auteur et des liens vers les profils de réseaux sociaux, le contact téléphonique et l'adresse e-mail.

2. Structurer le contenu avec du HTML sémantique

Créons un nouveau fichier index.html et configurons la structure de base du document HTML.

3. Section d'en-tête

Construisons l'header avec le nom du propriétaire du site et les liens de navigation.

4. Section À propos

Section consacrée à la brève introduction et aux informations sur le propriétaire.

5. Section Portfolio

Dans la section portfolio, nous nous concentrons sur les projets avec des descriptions et des images.

6. Section de contact

Construisons le formulaire de contact pour entrer en contact avec le propriétaire.

7. Section de pied de page

Enfin, ajoutons des informations sur le droit d'auteur et des liens vers les réseaux sociaux.

Bonus

Améliorons l'apparence de notre site web non seulement pour les moteurs de recherche mais aussi pour les utilisateurs. Nous pouvons y parvenir grâce à l'aide de CSS, qui signifie Cascading Style Sheets. Bien que nous n'ayons pas couvert CSS dans ce cours, c'est un aspect important de la conception de sites web.

CSS est un langage de feuille de style qui nous permet de spécifier la présentation et le style d'un document écrit dans un langage de balisage comme HTML. Cela peut être la prochaine étape après avoir appris HTML — plus à ce sujet dans le prochain chapitre. Pour l'instant, observons comment CSS améliore HTML.

Tutoriel Vidéo

Voici le lien vers le site web complet qui a été construit dans ce chapitre : Site Web de Julia