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

Vous pouvez travailler dessus de manière autonome ou suivre le guide ci-dessous, où nous vous fournirons des instructions détaillées et le code correspondant à chaque étape.

Guide étape par étape

1. Plan de la structure du site web

Notre site web comprendra plusieurs sections clés :

1. En-tête : Cette section affichera de manière visible le nom du propriétaire du portfolio et facilitera la navigation sur le site ;
2. À propos : Les visiteurs y trouveront des informations pertinentes sur le propriétaire du site, offrant un aperçu de son parcours et de son expertise ;
3. Portfolio : Cette section présentera divers projets, chacun comportant des images, 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 finale, comprenant les informations de copyright 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éation d’un nouveau fichier index.html et mise en place de la structure de base du document HTML.

3. Section d’en-tête

Construction de l’élément header avec le nom du propriétaire du site et les liens de navigation.

4. Section À propos

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

5. Section portfolio

Dans la section portfolio, l'accent est mis sur les projets avec descriptions et images.

6. Section contact

Création du formulaire de contact pour joindre le propriétaire.

7. Section pied de page

Enfin, ajout d'informations sur les droits d'auteur et de liens vers les réseaux sociaux.

Bonus

Amélioration de l'apparence du site web non seulement pour les moteurs de recherche, mais aussi pour les utilisateurs. Cela peut être réalisé à l'aide de CSS, qui signifie Feuilles de Style en Cascade. Bien que le CSS n'ait pas été abordé dans ce cours, il constitue un aspect important de la conception de sites web.

Le CSS est un langage de feuille de style permettant de spécifier la présentation et la mise en forme d'un document rédigé dans un langage de balisage tel que HTML. Il peut représenter l'étape suivante après l'apprentissage du HTML — plus d'informations à ce sujet dans le prochain chapitre. Pour l'instant, observons comment le CSS améliore le HTML.

Tutoriel vidéo

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