9 juin 2024
Premier projet HTML / CSS
Dans cette formation, nous allons créer notre premier site web (une seule page), qui contiendra :
- Une barre de navigation
- Un pied de page
- Des sections pour nos contenus
Pour commencer, il faut démarrer un projet HTML et nous allons spécifier le fichier CSS directement à la racine du projet (là, où se trouve votre fichier HTML)
— index.html —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!-- On déclare notre feuille CSS -->
<title>Premier Site web</ title>
</ head>
<body>
<main>
</ main>
</ body>
</ html>
—
Juste après le <body> ajoutons un <header></ header> qui eux-mêmes contiendra une <nav></ nav> :
<body>
<header>
<nav>
</ nav>
</ header>
Dans notre balise <main></ main> ajoutons des "sections" :
<main>
<section></ section>
<section></ section>
</ main>
Et après notre <main></ main> ajoutons un <footer></ footer> :
</ main>
<footer></ footer>
</ body>
Nous avons là une structure de site web plutôt commune, mais pour notre exemple ça suffira amplement. Détaillons juste rapidement les balises :
- header = En-tête du site web
- nav = Barre de navigation
- main = Conteneur, c'est ici ou tout notre contenu sera mis
- footer = pied de page
Commençons par notre barre de navigation, nous lui ajoutons une liste de lien qui permet de rediriger les utilisateurs vers une page spécifique :
<nav>
<ul>
<li><a href="#">Lien 1</ a></ li>
<li><a href="#">Lien 2</ a></ li>
<li><a href="#">Lien 3</ a></ li>
</ ul>
</ nav>
Ajoutons également, du contenu à nos sections avec des <article></ article> :
<main>
<section><article><p>Premier paragraphe</ p></ article></ section>
<section><article><p>Deuxième paragraphe</ p></ article></ section>
</ main>
Puis ajoutons du contenu dans notre "footer" :
<footer>
<p>Copyright</ p>
</ footer>
Maintenant, mettons un peu en place tout ça. Dans notre fichier style.css, mettons en forme notre barre de navigation :
a{
text-decoration: none;
}
li{
list-style: none;
}
nav{
width: 100%;
}
ul{
display: flex;
flex-direction: row;
justify-content: center;
gap: 3em;
}
On utilise notre sélecteur (p, li, nav, etc..) pour prendre nos balises HTML et leur définir des paramètres CSS.
Tout le code ci-dessus, met en place notre barre de navigation (on met le tout sur une ligne et on écarte nos liens).
—
—
Maintenant ajoutons un peu de style pour différencier notre navbar du reste du contenu :
nav{
width: 100%;
border-bottom: 1px solid black;
}
Et mettons en place notre contenu situé dans nos sections pour les rendre l'un à coté de l'autre :
main {
display: flex;
flex-direction: row;
justify-content: space-evenly;
min-height: 70vh;
}
section{
width: 100%;
}
Et mettons en forme notre pied de page :
footer{
margin-top: 10%;
border-top: 1px solid black;
}
Pour en voir plus sur votre premier projet, ajoutons des images en utilisant la balise <img /> :
<article>
<p>Deuxième paragraphe</ p>
<img src="https://i.postimg.cc/c1j4nH7w/pngwing-com.png" alt="titre pour les aveugles"/>
</ article>
Dans “src” autrement dis source, on y met le lien ou le chemin vers notre image par exemple :
<img src="https://i.postimg.cc/c1j4nH7w/pngwing-com.png" alt="titre pour les aveugles"/>
<img src="images/mon_image.jpg" alt="titre pour les aveugles"/>
Grâce au lien fournis, on a notre image incorporée dans notre projet, seul bémol, l'image est trop grande et pas bien placé. Pour remédier à ça, il faudra définir des paramètres CSS à notre image.
Attention ! Si vous avez plusieurs images dans votre projet, il faudra définir un nom à notre image pour sélectionner seulement celle voulu, sinon par défaut en utilisant le sélecteur "img", on sélectionne toutes nos images !
Pour notre cas, le sélecteur global “img” fera l'affaire, si vous désirez en ajouter une autre mettez un “id” ou une "class" à votre image :
<img src="images/mon_image.jpg" alt="titre pour les aveugles" id="image1" />
<img src="images/mon_image.jpg" alt="titre pour les aveugles" class="image1" />
Pour appeler une "class" ou un “id” en CSS il faut utiliser un “#” ou un “ . ” :
.image1{ //Appel une class }
#image1 { // Appel un id }
— style.css —
img{
width: 30%;
}
—
L'utilisation de "class" ou “id” se fait également sur des balises HTML classiques. Il faut prendre en compte également qu'un “id” doit être unique.
Sur notre deuxième article, ajoutons une "class" pour lui définir un placement et mettre les éléments qui sont dans ses balises en place.
— index.html —
<article class="art2">
<p>Deuxième paragraphe</ p>
<img src="https://i.postimg.cc/c1j4nH7w/pngwing-com.png" alt="titre pour les aveugles"/>
</ article>
—
— style.css —
.art2{
display: flex;
flex-direction: column;
}
—
—
—
Et voilà, vous avez mis en place votre première page web, pour le reste du contenu, la structure reste la même, utiliser les flexbox pour mettre en place votre contenu tout en pensant qu'une balise peut bouger les balises sous elles.
<section> <!-- la section pourra donc intéragir avec les trois balises sous elle. -->
<article></ article>
<article></ article>
<aside></ aside>
</ section>
J'espère que vous aurez appris des choses !
Mots clés:
html css
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis