Vous êtes sur la page 1sur 3

HTML démarrage navigation sous forme d'une liste de lien

("Accueil", "Tech" et "Science").


1. Création du projet
La première étape est de créer le dossier de
votre projet. A l'intérieur vous allez
pouvoir y stocker votre code HTML ainsi 2. Vos articles
que vos fichier CSS et JavaScript plus tard. Sur votre page d'accueil nous allons
La première page que verront vos visiteurs pouvoir retrouver un extrait du dernier
est l'index (c'est la page chargé par défaut). article du site avec une image (trouvé par
vos soins) et en à-côté une liste d’articles
Exercice : Créez votre dossier projet, puis moins récents. Voici une archive contenant
a l'intérieur votre page index.html et les les articles qui seront présent sur le site
dossiers "css", "images" et "js". : Les Articles

Exercice : Ajouter dans votre page d'index


une section contenant un extrait d'un des
2. Commencement articles avec une image et un lien pour
Ouvrez votre page index.html dans votre consulter l'article entier, puis, en à-coté,
éditeur. Vous allez devoir mettre en place des liens vers les autres articles.
la structure de base d'une page HTML pour
que votre site puisse être consulté dans de
bonnes conditions
3. Votre pied de page
Exercice : Ajouter dans votre page le Sur votre page d'accueil vos utilisateurs
minimum pour que votre navigateur vont pouvoir retrouvez diverses
comprenne que c'est une page HTML et informations dans le pied de page, comme
qu'il y ait un titre. une liste de liens de sites partenaire, votre
nom et votre adresse email pour pouvoir
HTML le contenu vous contacter.

Le HTML n'est pas un langage de Exercice : Ajouter dans votre page d'index
programmation, c'est un langage de un pied de page contenant les informations
balisage qui vous permet de gérer du demandé.
contenu et sa hiérarchisation. C'est ici que
vous rédigerez vos articles mais aussi que
vous gérerez l'arborescence de votre site et 4. Vos articles
l'organisation de l'information. N'oubliez Vous allez créer les pages de vos articles
pas que la sémantique est très importante sur votre site. Un article contiendra un
sur les pages avec les balises <nav> titre, une image et le texte. Ces pages
<header> <article> <aside> <footer>. reprendront votre entête et votre pied de
page de l'accueil

1. Création d'un menu Exercice : Créez dans votre dossier projet


Le site que nous allons créer est un site les pages d'article en respectant la
d'actualités ou les visiteurs pourront demande.
trouver des articles sur le thème de la Tech
et la science. CSS démarrage

Exercice : Créez dans index.html, l'entête Le CSS est un langage permettant la mise
de votre site avec : le titre et votre en page de vos contenus. Appelé aussi
"Feuille de style en cascade" c'est un  40px de haut
élément indispensable du web.  toute la largeur de la page
 Fond de couleur noir
 Texte en blanc de couleur noir
 Titre d'assez grande taille, centré
1. Création et chargement de votre verticalement, avec seulement une
feuille de style marge de 10px à gauche et à droite
Maintenant que le contenu est en place, il  La liste de lien doit être placé sur
faut ajouter une feuille de style et la une ligne a droite du titre, chaque
charger sur nos pages lien doit faire 150px de large et le
texte doit etre centré
Exercice : Créez votre fichier main.css horizontalement et verticalement.
dans le dossier css et chargez le dans vos Le soulignement doit disparaitre.
fichier html avec la balise <link>  Au survol le fond des éléments de
la liste de lien doit passer en gris
CSS la mise en page foncé

Votre feuille de style est maintenant en Pour le placement, vous utiliserez le


place, il ne reste plus qu'a ajouter des positionnement via inline-block, attention a
sélecteurs et des attributs pour gérer la l'alignement vertical de vos éléments <h1>
mise en page. Pour avoir un complément et <nav>
sur le fonctionnement des sélecteurs, les
combinateurs, pseudo-éléments et des Pour le survol, vous utiliserez une pseudo-
propriétés, vous pouvez consulter cette classe
page et celle-ci.
Exercice : Suivez les règles défini ci-
dessus et mettez en place le style de
l'entête
1. Quelques règles génériques
Quelques règles de mise en page générique
3. Le corp
a mettre en place :
Vous allez mettre en place la mise en page
pour le corp de votre page d'accueil ! Elle
 Le site doit etre en Arial 12pt
doit respecter les contraintes suivantes :
 Le site doit etre sur toute la largeur
de la zone d'affichage
 L'article doit etre a gauche et doit
 Le site doit faire au minimum toute
prendre 70% de la largeur avec une
la hauteur de la zone d'affichage
marge interne de 10px.
 Le site sera sur fond blanc
 Dans l'article, le titre doit etre au
 Il ne doit y avoir aucune marge
dessu, en majuscule
entre les bords de la zone
 Dans l'article, l'image doit etre tout
d'affchage et le contenu
a gauche et doit prendre seulement
30% de l'espace aloué a l'article
Exercice : Suivez les règles défini ci-
 Dans l'article, l'extrait doit etre a
dessus et mettez en place ces quelques
droite
règles générique sur html et body.
 Le texte extrait de l'article doit etre
justifié
2. L'entête
 Le lien "En savoir plus" doit être en
Vous allez mettre en place la mise en page rouge, sans soulignement et aligné
pour l'entête de votre site ! Elle doit a droite sous l'article.
respecter les contraintes suivantes :
 Au survol, le lien "En savoir plus"  Les partenaires doivent être à
doit être souligné. gauche, les un en dessous des
 Le contenu annexe (aside) doit être autres
tout à droite de la page et doit  Les liens du footer doivent être en
prendre 30% de la largeur, avec une gris clair et se souligner au survol
marge interne de 10px, une marge  Le nom et l'adresse doivent être
de 20px en haut et sur fond gris absolument en bas à droite de
clair l'élément a 10px du bord
 Les bords du contenu annexe  Le lien de contact doit être en
doivent être arrondis dessous du nom.
 Chaque élément annexe doit être  le footer doit avoir une ombre de
les uns sous les autres avec une 5px
marge de 5px tout autour.
 Les éléments annexe doivent être Pour le placement du footer, vous pouvez
écris en noir sans soulignement regarder le fonctionnement
 Au survol, les éléments annexes du positionnement relatif, absolus et fixe
doivent être soulignés
Pour la gestion de l'ombre sur un élément
Il est recommandé d'utiliser des classes html, regardez box-shadow
afin de facilité la différenciation entre la
page d'accueil et une page d'article (que Exercice : Suivez les règles défini ci-
nous ferons plus tard) dessus et mettez en place le style du pied
de page
Pour gérer facilement les marges internes
avec un élément block en pourcentage,
vous pouvez regarder le fonctionnement
de box-sizing

Pour les bordures arrondis vous pouvez


regarder le fonctionnement de border-
radius

Exercice : Suivez les règles défini ci-


dessus et mettez en place le style de
l'accueil

4. Le pied de page
Vous allez mettre en place la mise en page
pour le pied de page de votre site ! Elle
doit respecter les contraintes suivantes :

 Le pied de page doit TOUJOURS


être fixé en bas de l'écran.
Attention, Il ne doit pas occulter le
contenu.
 il sera sur fond noir avec les
écritures blanches, avec une marge
interne de 10px.

Vous aimerez peut-être aussi