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.
