Créer un mini site web
Un site
Un site simple est constitué de quelques pages web avec un menu de navigation pour passer d'une page à l'autre.
Le nom de notre page web est index.html, tout navigateur lira cette page par défaut, elle sera donc notre page d’accueil.
Dans cette partie nous allons créer deux autres pages web et un menu de navigation.
Méthode : Création de pages
Dans code.org, pour créer un nouveau fichier, on clique droit dans la partie gauche (le dossier contenant les fichiers).
À faire : créer deux fichiers : page1.html et page2.html
Puis écrire (ou copier coller le code) ci-dessous dans chacune d'elles.
<!-- document HTML-->
<html> <!--début du document-->
<head> <!--le head permet d'initialiser certains paramètres-->
<meta charset="UTF-8"> <!--comme le fait de pouvoir utiliser les caractères accentués-->
<link rel="stylesheet" href="style.css"> <!--ou encore de lier la feuille de style-->
</head> <!--fin du head-->
<body> <!--début du corps de la page web-->
<!-- C'est ici que l'on écrira le contenu de la page web--></body><!--fin du body-->
</html><!--fin de la page HTML-->
Méthode : Un menu de navigation
On commence par compléter la feuille de style :
À faire : Ajouter ce code dans votre feuille de style
#nav {list-style: none ;
margin: 0 ;
padding: 0 ;
overflow: hidden ; /* Création du contexte de formatage */
}
#nav li {
float: left ;
width: 150px ;
border: 1px solid #600 ;
margin-right: 1px ;
color: #fff ;
background: #c00 ;
}
#nav li a {
display: block ;
background: #c00 ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
padding: 4px 0 ;
text-align: center ;
text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #900 ;
text-decoration: underline ;
}
Il faut maintenant ajouter dans chaque page html de votre site le code suivant, juste après la balise <body>
<!-- Code pour le menu --><ul id="nav">
<li><a href="index.html" title="aller à l'accueil">acceuil</a> </li>
<li><a href="page1.html" title="aller à la page 1">page1</a></li>
<li><a href="page2.html" title="aller à la page 2">page2</a></li>
</ul>
À faire : Ajouter le code de navigation dans chaque page et vérifier qu'il fonctionne bien.
Méthode : Un pied de page ou footer
Dans la plupart des sites il y a un footer, cet élément permet par exemple de donner des informations sur l'auteur du site
À faire : Ajouter à la feuille de style le code suivant :
footer {display: flex;
justify-content: center;
padding: 5px;
background-color: bisque;
color: #fff;
}
À faire : Ajouter à la fin de vos pages web le code suivant (juste avant </body> )
<footer>
<p>Webmaster : votre nom</p>
</footer>
Méthode : Un header
À faire : Comme pour le footer, on commence par ajouter dans la feuille de style :
header.page-header {
background: no-repeat left/cover url(header.png);
display: flex;
height: 120px;
min-width: 120px;
align-items: center;
color: #fff;
text-shadow: #000 0 0 .2em;
}
header.page-header > h1 {
font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive, fantasy;
margin: 2%;
}
À faire : On télécharge cette image que l'on place ensuite dans le dossier du site(Add image dans code.org)
Cette image est chargée dans le code css...
À faire : On écrit ce code dans toute les pages du site (juste après le <body>)
<header class="page-header">
<h1>Mon premier site web!</h1>
</header>
Complément : Pour vérifier...
Vous pouvez en suivant ce lien vérifier si votre travail correspond à celui demandé...
