Créer son premier site web | partie 1 : Page d’accueil — HTML
Nous allons apprendre ensemble à créer un site web de A à Z rien qu’on utilisant du HTML et CSS. Trouvez la démo du résultat final sur le lien suivant : https://chahrazed-ismail.com/demos/premier-site-web/
Vous pouvez récupérer le code source final de ce tutoriel ici.
Si vous n’avez aucune connaissance en terme de développement web, je vous conseille de commencer par les articles suivant : “les ABC du développement web” et “Créer sa première page en HTML” .
Ce tutoriel sera constitué d’une série d’articles, où nous allons apprendre à créer une partie du site chaque article.
Dans le présent article, nous allons commencer par créer la page d’accueil.
Préparez votre éditeur de code préféré et préparez vous à créer votre premier site web :D
Structure générale de la page :
Avant de commencer à coder, essayons de comprendre la structure générale de notre page :
Nous pouvons d’abord voir la page comme trois sections différentes :
1. Section du menu qu’on va appeler ‘header’
2 Section principale qu’on va appeler ‘main’
3. Section de bas de page qu’on appellera ‘ footer
Nous allons commencer par créer ce format général :
Nous pouvons définir les différentes sections à l’aide des balises <header> , <main> et <footer>.
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Mon Premier Site Web avec Chahrazed | Accueil</title> </head> <body> <header>Menu</header>
<main>Section principale</main>
<footer>Bas de page</footer> </body></html>
Maintenant que nous avons délimité nos 3 sections, nous allons commencer à ajouter du contenu à chacune d’entre elles.
1. Header :
Notre section header contient le logo à gauche et la section de navigation à droite.
Nous pouvons définir la section de navigation grâce à la balise <nav> (navigation).
Notre ‘header’ va donc contenir deux éléments :
- Le logo qu’on va définir grâce à une balise de titre<h1> (header 1)
- la section de navigation qu’on va définir grâce à la balise <nav>.
- A l’intérieur de notre ‘nav’ nous allons définir les éléments de notre menu, pour cela nous allons utiliser une liste.
En HTML, nous pouvons définir deux types de liste :
- Liste ordonnée grâce à la balise <ol> (ordered list)
- Liste non ordonnée grâce à la balise <ul> (unordered list)
Pour ce qui est des éléments de la liste, nous utiliseront la balise <li> (list item).
Nous obtiendront alors le résultat suivant :
<header> <h1>Mon Site Web</h1> <nav> <ul> <li>Accueil</li> <li>A propos</li> <li>Services</li> <li>Contact</li> </ul> </nav></header>
Voici ce qu’on devrait obtenir comme résultat :
Ne vous inquiétez pas si le résultat ne ressemble pas à la démo, nous allons arrangez ça grâce au CSS. Pour l’instant concentrons nous sur le contenu.
2. Main
Passons maintenant à la section principale, Nous pouvons découper notre section en 3 sous sections.
- Section du Banner
- Section qui contient les 3 technologies (HTML, CSS, JS)
- Section d’inscription à la newsletter
Nous allons définir chaque section grâce à la balise <section>, pour distinguer nos sections nous allons donner à chacune d’entre elles un identifiant grâce à l’attribut ‘id’, comme ce ci : <section id=”identifiant”> .
Nous aurons alors les 3 sous sections :
<main> <section id="banner"></section> <section id="features" ></section> <section id="newsletter" ></section></main>
La section Banner contient un grand titre et un paragraphe.
<section id="banner"> <h1> Mon Premier Site Web </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum. </p></section>
Remarque : le texte bizarre que je vient d’insérer dans le paragraphe est un faux texte qu’on utilisait pour les exemple.
Quand à la section ‘features’ elle sera constitué de 3 parties, où chaque partie contient : une image, un titre et un paragraphe.
pour définir une image, nous utilisant la balise <img src=”url”>, en spécifiant l’url de notre image à l’aide de l’attribut ‘url’.
Dans mon exemple, j’ai placé toutes les images dans un sous dossier du dossier de mon projet que j’ai appelé ‘img’. Voici à quoi ressemble notre code finale.
<section id="features" > <div> <img src="./img/logo_html.png" /> <h3>HTML5</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies </p> </div> <div> <img src="./img/logo_css.png" /> <h3>CSS3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies </p> </div> <div> <img src="./img/logo_js.png" /> <h3>JS</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies </p> </div></section>
Notre section newsletter est constitué de deux partie :
- un titre à gauche.
- un champs se saisi à droite.
Pour ajouter le champs de saisi, nous devons d’abord déclarer un formulaire à l’aide de la balise <form>. Le formulaire est constitué d’un champs de saisi ‘input’ et un bouton pour soumettre notre formulaire.
Nous utilisons la balise <input> pour définir un champs de saisi, nous allons découvrir plus de détail sur les formulaire dans un article dédié. Pour l’instant il faut savoir que nous avons plusieurs type de <input>, dans notre cas, notre input va être de type “email”. nous pouvons utiliser l’attribut ‘placeholder’ pour laisser une indication à l’utilisateur.
Enfin nous devons ajouter un bouton sur lequel l’utilisateur devra cliquer pour envoyer son email.
Voici le code nécessaire pour ça :
<section id="newsletter" > <h1>Inscrivez vous à ma newsletter</h1> <form> <input type="email" placeholder="Entrer Email..." /> <button type="submit" >M'inscrire</button> </form></section>
3. Footer
Nous arrivons à la dernière partie de notre page qui est le footer. Notre footer est simplement constitué de texte que nous pouvons définir ainsi
<footer><p>Un texte personnalisé</p></footer>
Si vous avez bien suivi cette première partie du tutoriel, vous devrez avoir ceci comme résultat :
J’espère que vous avez réussis à créer votre page d’accueil, dans la prochaine partie nous allons définir le CSS pour que notre page d’accueil ressemble à ceci :
Bonne lecture à tous :)
