mar
16
2015

Réalisation d’une bannière en HTML5 / CSS3

Dans ce tutoriel nous allons apprendre à réaliser une bannière comme ci dessous avec un menu de navigation intégré en HTML5 et CSS3.

1

Partie I : La préparation

Pour y arriver on va dans un premier temps il faut vous assurez d’avoir installé sur votre ordinateur un éditeur de texte de type Notepad++ ou Sublime Text par exemple, pour ma part j’utilise Notepad++ mais rien ne vous empêche d’en utiliser un autre.

Ensuite assurez-vous d’avoir sur votre PC Wamp(pour Windows) ou Mamp(pour Mac). Allez dans c: puis wamp ensuite www et créez un nouveau dossier où sera sauvegardé votre travaille, pour ma part je l’ai nommé banniere.

Lancez votre éditeur de texte créer un nouveau fichier, et enregistrez-le directement dans le dossier c:wamp/www/nomdevotredossier. Nommez-le index.html.

N’oubliez pas de sauvegarder votre travaille et recharger la page de votre navigateur  régulièrement pour constater les évolutions ce celui-ci.

 

Partie II : le corps de la page html

 

le html est un langage de balisage il a besoin d’être ouvert et fermé. Au sein du balisage <html>

</html>

nous allons intégrer un <head> et un <body>. Le <head> intègre toutes les informations de la page et les informations dont la page à besoin pour fonctionner correctement, mais nous y reviendrons plus tard.

2

Au sein du <body> on intègre une balise <header> c’est une balise spécifique au HTML5 elle représente l’entête d’une page, c’est là que nous allons construire notre bannière.

3

la balise <a href= »# »> est un lien hypertext, le « # » signifie que le lien ne renvoi nul part, mais il peut très bien pointer sur une page que vous aurez créé, si la page que vous visez est dans le même dossier que votre index il suffi de renseigner le nom de votre page et son extension.

Vous aurez sans doute remarqué la balise <div> c’est une balise qui permet de créer un élément dans une page, nous y reviendrons bientôt.

4

La partie HTML est pratiquement finie, voyons ce que cela donne en lançant la page web. Lancez wamp puis cliquez sur localhost, cela doit lancer votre navigateur par défaut. Ensuite, double-cliquez sur le dossier où votre travail est enregistré.

5

Comme on peut le voir il y a un problème. Cela est bien éloigné de l’objectif à obtenir. Pas de panique, il manque la feuille de style qui conditionne le design du notre page web.

On retourne dans votre éditeur de texte et l’on créer un nouveau fichier que l’on enregistre tout de suite dans le même dossier que votre fichier index.html. Je l’ai appelé style.css. Appelez-le comme vous le voulez mais n’oubliez pas que l’extension du fichier doit être en .css.

Partie III : la feuille de style

 

Nous allons tout d’abord appeler la feuille de style dans la page html  :

6

link rel= »stylesheet » appel la feuille de style  et href= »style.css » indique le chemin ou se trouve la feuille de style. En l’occurrence si comme moi votre feuille de style est au même endroit que votre page html seul le nom de votre fichier suffi cependant n’oubliez pas l’extension .css.

Il est temps maintenant de créer la feuille de style, dans votre éditeur de texte créez un nouveau fichier, enregistrez le fichier dans le même dossier que votre page index et donnez-lui le nom que vous voulez, mais il doit être le même que le fichier que vous appelez dans la page index.html. Pour ma par je l’ai appelé style.css.

1. Le <header>

Attaquons-nous à la balise <header>, vous vous souvenez c’est dans cette balise que se trouve la bannière que l’on veux créer.

7

Après avoir rempli les informations du header comme indiqué sur la capture d’écran, voyons ce que cela donne.

8

C’est déjà mieux, la bannière s’affiche bien mais cela n’est pas suffisant.

Passons maintenant aux différents éléments composant la bannière.

2. Le titre :

9

retournons dans le fichier index.html

A la place de :

<h1> AFTEC-Informatique</h1>

remplacez par :

<a href= »index.html »>AFTEC-Informatique</a>

cela permet de créer un lien qui renvoi sur votre index, cela n’a pas d’utilité actuellement mais prenez cette habitude quand vous coderez en php où les lignes de codes peuvent être appelé un peu partout, cela évite de tout réécrire.

Voyons le résultat obtenue maintenant:

10

 

On peut voir que le style du titre est bien modifier.

 

3. Le bandeau de navigation :

11

le style du bandeau de navigation prend forme.

il faut repasser par le fichier index.html

12

 

Nous pouvons maintenant regarder le résultat  sur le navigateur, n’oubliez pas de recharger la page :

13

Il nous reste plus qu’à s’attaquer au boutons de navigation, la fin du travaille sur la bannière est proche.

4. Les boutons de navigation :

Les boutons de navigation on un style identique mais ils n’ont pas la même position, c’est une chose à prendre en compte.

Partant du constat que les boutons sont identiques mis à par leur positionnement on va créer une classe de bouton que l’on va simplement appeler bouton_navigation. Retournez dans votre éditeur de texte et ajoutez comme sur le screenshot qui suit un

14

Maintenant retournons dans la partie feuille de style CSS.

15

 

On peut voir que des attributs déterminant la position des boutons sont identique à chaque boutons mais la position des boutons sur l’axe horizontale ne sont pas indiqué.

16

 

Comme on peut le voir tous les boutons se superpose, on va donc ajouter un id à chaque bouton. Pour rappel un id est unique et un class peut être attribué à plusieurs éléments. Courage, c’est la dernière ligne droite.

17

On ajoute donc un id différent à chaque bouton, je les ai nommé de façon très original bouton1, bouton2 et bouton3.

Repassons dans la feuille de style.

18

Comme on peut le voir l’attribut right est différent en effet plus le nombre de pixel augmente plus l’élément bouton s’éloigne du bord droit de la <div> navigation.

Et oui ! Souvenez-vous que l’élément bouton est positionné dans la <div> navigation et il se positionne par rapport à la <div> et non pas par rapport à la page !

Après avoir sauvegardé retournons dans le navigateur pour recharger la page et voir le résultat.

19

Et voila ! La bannière est achevée !

Bonus

Donnons une forme aux paragraphes en bas de la bannière qui nous ont accompagné jusqu’ici.

20

 

On ajoute dans le fichier index.html un id= »corps » contenant les paragraphes.

21

On détermine un style à la l’id corps et à l’élément p désignant simplement un paragraphe en html.

22

 

Comme on peut le voir les paragraphes ont maintenant un style. Cette fois c’est fini.

Merci d’avoir suivi mon tutoriel.

 

Tutoriels connexes

A propos de l'auteur: benoit le bellego

Les commentaires ne sont plus accessibles.