Dans notre précédent article, nous avons vu comment créer notre premier document,
Nous allons voir le HTML et CSS plus en profondeur en créer une navigation et insérant du contenu comme du texte ou image.
C’est parti
Comment créer un menu en HTML:
La plupart du temps, un menu est une liste <ul></ul> contenant des <li></li> contenant elles-mêmes dans liens <a></a>
ex:
<ul>
<li><a href=""></a>Lien 1</li>
<li><a href=""></a>Lien 2</li>
<li><a href=""></a>Lien 3</li>
<li><a href=""></a>Lien 4</li>
</ul>
Et voila le rendu:
Bon ça reste pas superbe, on va améliorer tout ça.
Tout d’abord, je vais m’inspirer d’un template HTML, un template est une mise en page toute faite, certaine gratuite, d’autre payantes.
Nous y reviendrons quand nous aborderons wordpress.
J’ai choisi le template Amoeba car la partie haute reste assez simple.
le but est de faire pareil, ou presque 🙂
Avant de partir tête dans le guidon, il faut d’abord analyser la structure du site qui est faite en 3 parties:
- le header (logo + menu)
- Le texte de bienvenue
- les logos
Toutes les parties sont centrées au milieu du navigateur.
Selon vous combien faudrait il de <div></div> pour diviser ces 3 parties ??
Vous pensez à 3 ? C’est juste et faux à la fois, (oui il y a plusieurs façons de faire, le mieux et de faire celle qui vous semblent le mieux),
Pour ma part, je vais en faire 8, ça fait beaucoup n’est-ce pas 😉 Vous allez voir pourquoi.
Voici le code de ma structure.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="container">
Logo + menu
</div>
</div> <!-- end .header -->
<div class="middle">
<div class="container">
<h1>Texte welcome</h1>
<h2> Accroche </h2>
</div>
</div> <!-- end .middle -->
<div class="logos">
<div class="container">
<div class="affichage_logo">
LOGO 1
<h3>Title logo</h3>
<p>Texte sous le logo</p>
</div>
<div class="affichage_logo">
LOGO 2
<h3>Title logo</h3>
<p>Texte sous le logo</p>
</div>
<div class="affichage_logo">
LOGO 3
<h3>Title logo</h3>
<p>Texte sous le logo</p>
</div>
</div>
</div> <!-- end .logos -->
</body>
</html>
Le rendu sans CSS:
Pour dégrossir tout ça, je fait une <div class= »header »></div>
qui un autre <div class= »container »></div> qui contiendra elle même le logo et le menu.
Idem pour les autres partie, pourquoi des classes container ??
Ces classes vont servir à center les éléments au milieu du navigateur, le début de mon css:
*{
margin: 0;
padding: 0;
}
.container{
margin: 0 auto;
max-width: 1290px;
}
.header{
line-height: 100px;
height: 100px;
background-color: #4F827C;
}
.middle{
background-color: #70B9B0;
padding: 50px;
text-align: center;
}
.logos{
text-align: center;
}
.affichage_logo {
padding-top: 20px;
width: 30%;
float: left;
}
Le * cible tout le document, *{ padding: 0, margin: 0} permet de ne pas avoir de marge par défaut.
Si vous ne connaissez pas une directive HTML comme par ex: line-height: google est votre ami 😉
Bon line-height c’est pour la hauteur du text entre les paragraphes 🙂
Voila le résultat
C’est mieux, mais pas encore ça.
On va placer des vrais éléments comme le logos, mettre une autre police, et le menu.
C’est partie.
Création du menu dans notre <div class= »header »></div>
<div class="header">
<div class="container">
<span class="image-logo">Amoeba</span>
<span class="menu">
<ul>
<li><a href="">Lien </a></li>
<li><a href="">Lien </a></li>
<li><a href="">Lien </a></li>
<li><a href="">Lien </a></li>
<li><a href="">Lien </a></li>
</ul>
</span>
</div>
</div> <!-- end .header -->
On a donc rajouté 2 <span></span> dans cette div:
- Une pour le logo
- Une autre pour le menu
Code CSS pour designer le menu:
span.image-logo{ /* span ayant pour classe image-logo */
display: block;
float:left;
}
span.menu {
display: block; /* TRANSFORM UN ELEMENT EN TYPE BLOCK */
float: right;
}
span.menu ul li{ /* <li> étant dans <ul> elle même étant dans la span qui à la classe menu. */
float: left;
list-style-type: none; /* Suppression des puces */
margin-right: 25px;
}
span.menu ul li a{ /* Deveninez vous même ;) */
text-decoration: none;
color: white;
}
Les nouvelles directives sont commentées dans le code 🙂
Donc, on align à gauche le logo,
on align à droite le menu,
on align les <li></li> du menu, ainsi que les <a> du menu</a>
Pour un peu plus de beauté dans ce monde de brut, on change la typo général du site en ajoutant:
body{
font-family: "Open Sans", sans-serif; /* Changement de police en général pour le body */
}
Quand un élément en css n’a pas de . ou de # cela veut dire qu’on cible le nom de la balise, ex: body, on cible la balise body.
Par ex:
n’affiche aucune <div></div>, complètement inutile hein ? 😉
Voici l’aperçu avec ce nouveau css:
ah, ça commence à être un peu plus sympathique !
Allez on ajoute les images.
Pour faire les choses bien, dans mon dossier de mon site, j’ai créé un dossier images:
Je télécharge un icon en png sur iconfinder et je le place dans mon dossier images et nomme l’image chimie.png (png pour la transparence)
et pour insérer une image en HTML on utilise la balise img:
<img src="images/chimie.png" alt="Logo de chimie">
l’attribut src= »images/chimie.png » indique d’aller chercher l’image chimie.png dans le dossier images au même niveau que mon index.html et le alt= » » est très important pour les moteur de recherche comme google, nous y reviendrons lorsque nous aborderons le SEO.
Donc en plaçant l’image dans notre <div class= »middle »></div>
<div class="middle">
<div class="container">
<img src="images/chimie.png" alt="Logo de chimie">
<h1>Texte welcome</h1>
<h2> Accroche </h2>
</div>
</div> <!-- end .middle -->
Voici le résultat:
Bravo ! Vous savez placer une image !
Allez je vous laisse finir de designer 🙂
voici le code final:
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="container">
<span class="image-logo">Amoeba</span>
<span class="menu">
<ul>
<li><a href="index.html">Accueil </a></li>
<li><a href="societe.html">Qui sommes nous ?</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contactez-nous</a></li>
</ul>
</span>
</div>
</div> <!-- end .header -->
<div class="middle">
<div class="container">
<img src="images/chimie.png" alt="Logo de chimie">
<h1>Texte welcome</h1>
<h2> Accroche </h2>
</div>
</div> <!-- end .middle -->
<div class="logos">
<div class="container">
<div class="affichage_logo">
<img src="images/html.png" alt="logo html 5">
<h3>Title logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fuga dolorum fugit soluta quibusdam perferendis aspernatur, provident dolores itaque necessitatibus eaque, odit beatae impedit aperiam delectus illo, alias reiciendis. Ab?</p>
</div>
<div class="affichage_logo">
<img src="images/code.png" alt="logo html 5">
<h3>Title logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fuga dolorum fugit soluta quibusdam perferendis aspernatur, provident dolores itaque necessitatibus eaque, odit beatae impedit aperiam delectus illo, alias reiciendis. Ab?</p>
</div>
<div class="affichage_logo">
<img src="images/eclair.png" alt="logo html 5">
<h3>Title logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fuga dolorum fugit soluta quibusdam perferendis aspernatur, provident dolores itaque necessitatibus eaque, odit beatae impedit aperiam delectus illo, alias reiciendis. Ab?</p>
</div>
</div>
</div> <!-- end .logos -->
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
body{
font-family: "Open Sans", sans-serif; /* Changement de police en général pour le body */
}
.container{
margin: 0 auto;
max-width: 1290px;
}
.header{
line-height: 100px;
height: 100px;
background-color: #4F827C;
}
.middle{
background-color: #70B9B0;
padding: 50px;
text-align: center;
color: white;
}
.logos{
text-align: center;
}
.logos p {
padding-left: 12%;
margin-top: 10px;
text-align: justify;
}
.affichage_logo {
padding-top: 20px;
width: 30%;
float: left;
}
span.image-logo{ /* span ayant pour classe image-logo */
display: block;
float:left;
font-weight: bold;
font-size: 16px;
color: white;
}
span.menu {
display: block; /* TRANSFORM UN ELEMENT EN TYPE BLOCK */
float: right;
}
span.menu ul li{ /* <li> étant dans <ul> elle même étant dans la span qui à la classe menu. */
float: left;
list-style-type: none; /* Suppression des puces */
margin-right: 25px;
}
span.menu ul li a{ /* Deveninez vous même ;) */
text-decoration: none;
color: white;
}
le rendu:
Beaucoup mieux qu’au début !
On peux toujours mieux faire, mais nous allons en rester la pour le moment.
Pour le lorem ipsum, il s’agit d’un texte générique qui permet de mettre du faux contenu quand vous intégrer un site pour un client qui n’a pas encore fourni ses textes par exemple.
Pour pouvez en générez sur lorem ipsum il existe un outil similaire pour les images, il s’agit de lorempixel 🙂
Pour le menu, dans les balises href, j’ai rajouter les liens des pages internes de mon site, contact.html blog.html etc…
il suffit de duppliquer le index.html, le renommer en contact.html, changer le contenu et votre page contact et faites, super non ?
La suite au prochain épisode >
Articles similaires
Commentaires
Laisser un commentaire