Atelier HTML Et CSS

Transféré par

Yahya Abida
56 vues5 pages
Html css

Titre original

Atelier HTML et CSS

Copyright

© © All Rights Reserved

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Signaler ce document

Description :

Html css

Droits d'auteur :

© All Rights Reserved
Signaler comme contenu inapproprié
56 vues5 pages

Atelier HTML Et CSS

Titre original :

Atelier HTML et CSS

Transféré par

Yahya Abida

Description :

Html css

Droits d'auteur :

© All Rights Reserved
Signaler comme contenu inapproprié
sur 5

Création d’un site sous HTML5 et CSS3

1 : le squelette HTML
1) Créer des pages HTML qui vont constituer le site web.
index.html
experience.html
loisir.html
contact.html

Créer un dossier « img » dans le dossier contenant les différentes pages. Afin
de placer dedans ce sous-dossier toutes les images de site
2) Création de l’entête de page ‘header’, pied de page ‘footer’ et le menu ‘nav’. C’est parties sont des parties
« fixes » de site, c’est-à-dire les parties qui vont être identiques sur chaque page.
- Le code correspondant à ces parties est présenté ci-dessous, essayer de le copier dans la page
index.html, puis le dupliquer dans les autres pages.
Cette façon de procéder n’est toutefois pas optimale. En pratique, les parties répétitives sont
écrites dans fichiers différents, puis ces fichiers seront inclus par PHP.

▪ Commencer, par créer la structure minimale d’une page en HTML afin que celle-ci soit valide.

▪ Ajoute un attribut lang à l'élément <html>. Pour donner une indication aux moteurs de recherche sur
la langue utilisée dans les pages web.

▪ Préciser également un <meta charset="utf-8"> pour prend en charge les accents et les caractères
spéciaux.

▪ Créer le lien vers un fichier CSS (que vous allez créer par la suite) avec l’élément link

▪ Ensuite utiliser les trois éléments HTML <header>, <nav> et <footer> à l’intérieur de l'élément
<body>. Ces éléments sont des éléments HTML structurants qui sont apparus avec HTML5.
Les éléments HTML <header>, <nav>, et <footer> servent à diviser le contenu d’une page en différentes
parties selon un ordre logique. Ces éléments sont de type block et peuvent ainsi remplacer certains d’éléments
<div>.

Voici la liste complète des éléments HTML structurants ainsi que leur cas d’utilisation.

Dans cet atelier, nous contentons d’écrire un titre avec la balise <h1> dans l’élément <header> Faites
attention à ne pas confondre les éléments <header> et <head> ! L’élément header sert bien à définir l'en-
tête du contenu « visible » de la page et se situe dans l’élément body.

Pour le menu, nous pouvons utiliser l’élément <nav>. Ainsi, la façon utilisée est classique, un élément <ul>
pour définir le menu et des éléments <li> pour chaque élément de menu. Chaque élément <li>, contient
un lien avec l’éléments <a> afin que les éléments de menu renvoient bien vers les autres pages de site.
Finalement, chaque élément contient un attribut class, afin de préparer le terrain pour la mise en forme en
CSS. De plus, le menu est inséré dans un <div> qui englobe tous les éléments de menu, Celui-ci permettra
plus tard de bien contrôler la mise en page de menu par CSS.
3) Enfin, l’élément <footer> contient une ligne de texte insérée par l’élément <p>

À ce stade, tous les éléments "fixes" du site sont créés. Il suffit de copier le contenu de la page index.html et le
coller dans autres pages HTML, en modifiant juste le contenu de l’élément <title> afin d’avoir un titre qui
reflète le contenu de chaque page. Voici le résultat après l’affichage dans le navigateur :
2 : la mise en forme CSS
Concernant le style CSS, Créer un dossier
nommé CSS dedans ce dossier créer un
fichier style.css. Puis, copier dans ce fichier
les moreaux de codes expliqués dans cet
atelier. Les styles généraux des éléments
<body>, <h1>, <header> et <footer>
servent à :

▪ Définir des polices d’écriture pour le site


▪ Effectuer également un reset CSS des
marges intérieures et extérieures de
l’élément <body> afin d’avoir le même
rendu sur tous les navigateurs (certains
ajoutent automatiquement une petite
marge).
▪ Centrer les titres h1 et les mettre en
forme
▪ Une mise en forme minimale du header
et du footer

Pour le menu, le code CSS est un peu plus long.

Commencer par mettre les éléments de menu en


ligne et par enlever les puces devant les éléments de
liste.

Effectuer un reset des marges d’élément de liste ul.

Etendre l’élément nav et lui donne une couleur de


fond

Ensuite, mettre en forme les éléments de lien, c’est-


à-dire les éléments a.

Pour centrer le menu dans la page web, appliquer un


display : table et un margin : 0 auto au div
intermédiaire qui a été créé avec class= ‘navbar’.
Pour rendre le style un peu plus sophistiqué, appliquer
une bordure en haut des éléments de menu ainsi
qu’une couleur de fond transparente lors du survol de
l’élément en question :

Comme la bordure déplace les éléments de menu de sa


hauteur lors du survol, ajouter une marge intérieure
spécifique lors du survol des éléments de menu pour
contrebalancer l’effet de la bordure.

Le résultat de ce travail est comme illustré ci-dessus :

Concernant l’aspect responsive du site, consiste à réduire les dimensions et écarts


entre les différents éléments afin que le site s’affiche également bien sur mobile.

Vous aimerez peut-être aussi