Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Création d'un Site Web Complet avec HTML | HTML Avancé
Principes Fondamentaux du HTML

bookCréation d'un Site Web Complet avec HTML

Nous avons désormais couvert 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

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

index.html

copy

3. Section d'en-tête

Ajouter un <header> avec le nom du propriétaire et une balise <nav> contenant des liens menant aux sections À propos, Portfolio et Contact.

index.html

index.html

copy

4. Section À propos

Créer une balise <section id="about"> avec un titre et un court paragraphe décrivant le propriétaire.

index.html

index.html

copy

5. Section Portfolio

Ajouter une balise <section id="portfolio"> qui répertorie les projets avec des images, des titres et de courtes descriptions.

index.html

index.html

copy

6. Section Contact

Créer une balise <section id="contact"> avec un formulaire de contact simple qui collecte le nom, l'adresse e-mail et le message.

index.html

index.html

copy

7. Section pied de page

Terminer la page avec un <footer> incluant un texte de droit 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

index.html

copy

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, comparer simplement l’apparence de la page en HTML brut et son aspect après l’application de styles CSS de base.

index.html

index.html

index.css

index.css

copy

Voici le lien vers le site web complet construit dans ce chapitre : Site de Julia

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

bookCréation d'un Site Web Complet avec HTML

Glissez pour afficher le menu

Nous avons désormais couvert 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

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

index.html

copy

3. Section d'en-tête

Ajouter un <header> avec le nom du propriétaire et une balise <nav> contenant des liens menant aux sections À propos, Portfolio et Contact.

index.html

index.html

copy

4. Section À propos

Créer une balise <section id="about"> avec un titre et un court paragraphe décrivant le propriétaire.

index.html

index.html

copy

5. Section Portfolio

Ajouter une balise <section id="portfolio"> qui répertorie les projets avec des images, des titres et de courtes descriptions.

index.html

index.html

copy

6. Section Contact

Créer une balise <section id="contact"> avec un formulaire de contact simple qui collecte le nom, l'adresse e-mail et le message.

index.html

index.html

copy

7. Section pied de page

Terminer la page avec un <footer> incluant un texte de droit 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

index.html

copy

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, comparer simplement l’apparence de la page en HTML brut et son aspect après l’application de styles CSS de base.

index.html

index.html

index.css

index.css

copy

Voici le lien vers le site web complet construit dans ce chapitre : Site de Julia

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4
some-alt