Pour votre progression, c'est très important de finir le TP précédent avant de commencer celui-ci.
Dans ce TP nous allons voir quelques notions nouvelles, mais nous allons surtout avancer sur votre projet de site web.
Placez vous dans la salle de TP à coté des autres personnes de votre groupe, pour pouvoir travailler ensemble.
Commençons par quelques révisions.
Écrivez tout le CSS nécessaire (sélecteur, propriété et valeur ) pour afficher en rouge tous les
« liens contenus dans un ul, lui même contenu dans une balise ayant class="menu" »
Voici un exemple de HTML qui pourrait être affecté:
<nav class="menu">
<ul>
<li><a href="...">abc</a></li>
<li><a href="...">def</a></li>
</ul>
</nav>
Écrivez un exemple de HTML qui s'affiche en rouge grâce au CSS suivant:
div#p { color: red; }
Est-ce que vous vous souvenez de ces balises?
Dans l'exemple suivant,
<p>Le chocolat ... cacao.<img class="illustration" src="chocolat.png" alt="chocolat"/> Celle-ci est fermentée,...</p>
Quel CSS faut-il ajouter pour que l'image s'affiche à droite, sortie du texte comme suit:
(on vous demande toute la déclaration CSS, y compris le sélecteur)
HTML:
<div >xyz</div>
<div id="x">xyz</div>
<div >xyz</div>
CSS:
#x
{
border: 1px solid black;
YYYY
}
Que faut-il écrire à la place de YYYY pour obtenir l'affichage suivant:
HTML:
<div >xyz</div>
<div id="x">xyz</div>
<div >xyz</div>
CSS:
#x
{
border: 1px solid black;
YYYY
}
Que faut-il écrire à la place de YYYY pour obtenir l'affichage suivant:
HTML:
<ul>
<li>fraise</li>
<li>chocolat</li>
<li>vanille</li>
</ul>
Ceci s'affiche normalement comme ceci:
Que faut-il écrire à la place de YYYY pour obtenir ceci:
fraise chocolat vanille
li
{
YYYY
}
Dans le cas d'une page HTML simple:
Mais s'il y a des images, des fichiers CSS, des fichiers javascript... les interactions sont plus compliquées:
En pratique, il peut y a avoir des dizaines requêtes comme celles-ci.
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Étape 1:
L'utilisateur vient de cliquer sur un lien "http://exemple.org/toto.html"
Que faites vous (le client) en premier ?
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Étape 2:
exemple.org vous répond en vous envoyant le fichier suivant:
<!DOCTYPE html>
<html>
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici une jolie photo:<img src="photo.jpg" alt="photo"/></p>
</body>
</html>
Que faites vous ?
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Etape 3:
Oui, il manque des choses... donc que faites vous ?
Pour rappel, le fichier HTML reçu est:
<!DOCTYPE html>
<html>
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici une jolie photo:<img src="photo.jpg" alt="photo"/></p>
</body>
</html>
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Étape 4:
Vous recevez le fichier style.css, maintenant que faites vous?
Pour rappel, le fichier HTML reçu est:
<!DOCTYPE html>
<html>
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici une jolie photo:<img src="photo.jpg" alt="photo"/></p>
</body>
</html>
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Étape 5:
Oui, il manque des choses... donc que faites vous ?
Pour rappel, le fichier HTML reçu est:
<!DOCTYPE html>
<html>
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici une jolie photo:<img src="photo.jpg" alt="photo"/></p>
</body>
</html>
Dans ces questions vous jouez le rôle du client, c'est à dire du navigateur web (par exemple Firefox). Nous simulons un dialogue entre le client et le serveur.
Le machine du client s'appelle "mamachine" et le serveur s'appelle "exemple.org"
Etape 6:
Vous recevez le fichier photo.jpg, maintenant que faites vous?
Pour rappel, le fichier HTML reçu est:
<!DOCTYPE html>
<html>
<head>
<title>Un essai</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici une jolie photo:<img src="photo.jpg" alt="photo"/></p>
</body>
</html>
Pour l'instant, on a vu comment changer la taille du texte avec « font-size ».
On peut aussi changer la hauteur des lignes de texte. Par exemple, pour plus les espacer verticalement entre-elles.
Ça peut aussi être utile pour centrer verticalement un texte.
(Attention: « text-align: center » centre horizontalement, pas verticalement).
Le texte entier (plusieurs lignes) est inclus dans une boite (par exemple un paragraphe <p>).
Il ne faut pas confondre
Pour centrer horizontalement du texte à l'intérieur d'une boite (par exemple <p>) on utilise « text-align: center; »
Par contre pour centrer une boite toute entière, il faut:
HTML
<p id="p1">...</p>
<p id="p2">...</p>
CSS
p
{
border: 1px solid black;
}
#p1
{
text-align: center;
}
#p2
{
width: 300px;
margin-left: auto;
margin-right: auto;
}
Arrivé ici, vous devez déjà avoir
Faites dès maintenant les étapes qu'il vous manque ci-dessus.
Vous trouverez plus de détails dans le document de suivi.
Une page de ressources est à votre disposition ici:
http://moodle.iutv.univ-paris13.fr/mod/page/view.php?id=27
On va maintenant travailler sur votre page d'accueil étape par étape.
Chaque étape sera illustrée par un exemple sur le site vert ci-dessous.
Ce n'est qu'un exemple. Vous devez travailler sur votre site, pas sur cet exemple.
Le « site vert » complet est visible ici:
http://moodle.iutv.univ-paris13.fr/img/web/site-vert/site-vert.html
Faites un dessin rapide, sur papier, de votre page d'accueil.
Il s'agit de découper votre page en morceaux.
Voici un exemple. Votre page sera probablement différente.
un autre exemple, correspondant au «site vert »
Maintenant, sur votre dessin identifiez les grandes parties horizontales (1,2,3,...) occupant toute la largeur du contenu.
Exemple 1:
Exemple « site vert »
Ces parties (1,2,3,...) vont être les balises principales de votre site. Essayez d’identifier leur fonction.
Si une partie est l’entête du site, utilisez <header>
Si une partie est un bas de page, utilisez <footer>
Si aucune correspond, utilisez <div>
Exemple 1:
<body>
<header>...</header> (1)
<div>...</div> (2)
<footer>...</footer> (3)
</body>
Exemple « site vert ».
<body>
<header>...</header> (1)
<main>...</main> (2)
<div>...</div> (3)
<footer>...</footer> (4)
</body>
Dans cet exemple, tout le contenu (B) est centré. Pour l'extérieur du centre (A,B), on ne peut pas distinguer des couleurs ou des images de fond différentes pour les parties 1,2,3. On peut éventuellement changer la couleur de fond pour toutes les parties (1,2,3 et A B C) en changeant la couleur de fond (ou image de fond) de <body>.
Pour centrer l'affichage, il suffit d'ajouter un <div> autour de tous les parties. C'est ce qu'on avait fait au TP-3.
<body>
<div id="exterieur">
<header>...</header> (1)
<div>...</div> (2)
<footer>...</footer> (3)
</div>
</body>
Et dans le CSS:
#exterieur
{
width: 1000px; /* à vous de voir */
margin-left: auto;
margin-right: auto;
}
Dans l'exemple « site vert », on veut une texture verte partout (A,B,C) sur l’entête (1).
On veut une texture sombre partout (A,B,C) sur le pied de page (4).
On va donc ajouter un <div> qui s'affichera en B pour chacune des parties 1,2,3,4.
<body>
<header><div class="centrer">...</div></header> (1)
<main ><div class="centrer">...</div></main> (2)
<div ><div class="centrer">...</div></div> (3)
<footer><div class="centrer">...</div></footer> (4)
</body>
On pourra par exemple, donner une texture verte à <header> (qui couvre A,B,C) et une texture sombre à <footer> (qui couvre A,B,C).
Ensuite pour centrer:
.centrer
{
width: 1000px; /* à vous de voir */
margin-left: auto;
margin-right: auto;
}
A l'intérieur de chaque partie horizontale, on peut créer plusieurs colonnes.
Chaque colonne est crée avec la balise qui vous semble le mieux (div, nav, aside, section,...).
Pour la mise en page, il suffit de préciser la largeur de la colonne (width: ...) et d'utiliser display:flex sur la partie horizontale;
Pour l'instant utilisez des largeurs (width) approximatives, on verra plus tard comment les régler précisément.
Ajoutez du texte dans chaque colonne pour remplir. Utilisez une couleur de fond pour bien les distinguer.
La partie (2) a deux colonnes.
<body>
<div id="exterieur">
<header>...</header> (1)
<div id="contenu"> (2)
<main>image et texte</main> - colonne 1
<aside>actualités</aside> - colonne 2
</div>
<footer>...</footer> (3)
</div>
</body>
La partie (2) a trois colonnes.
La partie (3) a trois colonnes.
<body>
<header><div class="centrer">...</div></header> (1)
<main > (2-ABC)
<div class="centrer"> (2-B)
<section class="boite">...</section> - col 1
<section class="boite">...</section> - col 2
<section class="boite">...</section> - col 3
</div>
</main>
<div > (3-ABC)
<div class="centrer"> (3-B)
<div class="details-col-articles">...</div> - col 1
<div class="details-col-articles">...</div> - col 2
<div id="details-droite">...</div> - col 3
</div>
</div>
<footer><div class="centrer">...</div></footer> (4)
</body>
Exemple « site vert » complet à cette étape:
HTML:
<header id="entete">
<div id="entete-centre" class="centrer">
<h2>entete-centre</h2>
</div>
</header>
<main id="principal">
<div id="principal-centre" class="centrer">
<div id="boites">
<section class="boite"><h2>boite</h2></section>
<section class="boite"><h2>boite</h2></section>
<section class="boite"><h2>boite</h2></section>
</div>
</div>
</main>
<div id="details">
<div id="details-centre" class="centrer">
<div id="details-ligne">
<div id="details-col-1" class="details-col-articles"><h2>articles</h2></div>
<div id="details-col-2" class="details-col-articles"><h2>articles</h2></div>
<div id="details-droite"><h2>details-droite</h2></div>
</div>
</div>
</div>
<footer id="bas-de-page">
<div id="bas-de-page-centre" class="centrer">
<h2>bas-de-page-centre</h2>
</div>
</footer>
CSS:
/* body représente toute la partie affichable du document HTML */
body
{
/* enlever le petit espace blanc tout autour de la page */
margin:0;
}
/* Centrer horizontalement le contenu au milieu de la page */
.centrer
{
/* les marges à gauche et droite "auto" permettent de centrer */
margin-left: auto;
margin-right: auto;
/* largeur de la partie centrale principale de l'affichage */
width: 1200px;
/* Forcer à ce que tout le contenu de cette partie reste à l'intérieur de cette partie */
/* Par exemple: les marges ne débordent pas */
/* Par exemple: les float ne débordent pas */
overflow: hidden;
}
#entete
{
background-color: #ccccff;
}
#entete-centre
{
border: 1px solid black;
}
#boites
{
/* placer les trois boites horizontalement, pas verticalement */
display: flex;
}
/* Les trois boites avec des images et du texte */
.boite
{
width: 384px;
margin-right: 24px;
}
/* La dernière boite à droite (last-child = dernier fils) */
.boite:last-child
{
/* pas d'espace à droite, sinon elle déborde et passe à la ligne suivante */
margin-right: 0px;
}
#details
{
/* empêcher le débordement et contenir les marges à l'intérieur de cette boite */
overflow: hidden;
background-color: #aecf00;
}
#details-ligne
{
/* placer cette partie horizontalement, pas verticalement */
display: flex;
}
.details-col-articles
{
/* placer les deux listes d'articles horizontalement, pas verticalement */
margin-right: 24px;
width: 282px;
background-color: #99ccff;
}
#details-droite
{
width: 588px;
overflow: hidden;
background-color: #99ccff;
}
#bas-de-page
{
background-color: #9966cc;
}
#bas-de-page-centre
{
border: 1px solid black;
}
Affichage:
Pour l'instant vous avez choisi les largeurs (width) des colonnes et de la page au « feeling ».
Pour obtenir un affichage bien aligné, on utilise souvent un système de « grille ».
Visitez cette page: http://960.gs/
En bas de la page, vous trouverez de nombreux exemples de sites web.
Sur plusieurs sites, appuyez sur le bouton « show grid » pour voir la grille superposée.
Important: la grille n'est pas un concept technique ou CSS, c'est un concept graphique (esthétique).
C'est juste une manière de choisir la largeur et l'espacement entre vos colonnes pour que tout soit bien aligné et agréable.
Ci-dessous un exemple d'une grille de 12 colonnes de 65px avec des espaces de 20x, pour une largeur totale de 1000px.
Choisissez une grille qui vous convient et recalculez toutes les largeurs et les espaces de vos colonnes.
Typiquement, une « boite » aura un CSS ressemblant à ceci
#boite-exemple
{
width: (largeurcol*nbcolonnes+espace*(nbcolonnes-1))px;
margin-right: (espace)px;
}
bien sur, pour la dernière colonne (droite) il n'y a pas de margin-right.
Remarque: si vous utilisez justify-content: space-between; sur le flexbox, vous n'avez pas besoin de régler les margin.
Grille de 12 colonnes de 78px avec des espaces de 24x, pour une largeur totale de 1200px.
Ça y-est, on a fini la structure de la page d'accueil. On peut maintenant s'attaquer au détail des différentes parties.
Commençons par la partie du haut, l'entête <header>. Dans les questions suivantes, nous allons créer un logo (texte), un menu et quelques autres détails.
Créer des illustrations (photos, rubans, barres, lignes, textures) demande des compétences de graphiste et beaucoup de travail.
De belles photos peuvent avoir un gros impact visuel et occupent parfois une place importante sur la page d'accueil.
Ce n'est pas facile de trouver des images de qualité gratuites et libres. Voici deux sites qui peuvent vous aider:
Sinon, vous trouverez des images, en général pas libre de droits, sur Google images:
http://www.google.com/imghp?hl=FR
Remarque: vous devez travailler sur votre site web, pas sur « site vert ». Ce n'est qu'un exemple pour illustrer les techniques utilisées dans les questions suivantes.
Si vous voulez reproduire l'exemple du « site vert », vous pouvez télécharger et désarchiver les images suivantes : images.tar.gz
Le « site vert » complet est visible ici:
http://moodle.iutv.univ-paris13.fr/img/web/site-vert/site-vert.html
Vous pouvez créer un logo à l'aide d'un logiciel de dessin (gimp, inkscape, photoshop, ...). C'est un gros travail.
Une alternative plus simple est d'utiliser du texte.
On pourra améliorer le texte en utilisant une police de caractères particulière et / ou en créant des effets avec des ombres (text-shadow) (par exemple ici).
On retrouve sur tous les navigateurs certaines polices de caractères. Elle ne sont pas nombreuses et elles ne sont pas assez intéressantes pour en faire un logo:
http://web.mit.edu/jmorzins/www/fonts.html
Heureusement, on peut fournir au navigateur d'autres polices.
Google fourni un site vous présentant de nombreuses polices avec des indications pour les inclure sur votre page:
http://www.google.com/fonts
Visitez la page de google fonts et trouvez une police pour votre logo.
On choisit la police appelée « Lobster ».
Appuyez sur « Quick use » :
Puis en bas de la page, vous trouverez, à l'étape 3:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
...
<head>
...
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
...
</head>
<body>
...
<header id="entete">
<div id="entete-centre" class="centrer">
<div id="logo">
<h1>Mon joli site</h1>
<div id="soustitre">très très beau</div>
</div>
</div>
</header>
..
#logo h1
{
font-family: 'Lobster';
font-size: 72px;
/* par défaut le h1 est "bold" (gras), nous on veut normal */
font-weight: normal;
}
On utilise souvent des textures ou des images de fond pour donner de l'ambiance à une page.
Pour avoir une idée de ce qui se fait, faites une recherche de « texture background » dans Google images:
https://www.google.com/search?q=texture+background&hl=en&so...
On utilise une texture verte pour toute la ligne (pour <header> en entier), et on ajoute, en plus, une image de fond avec des herbes sur la partie du centre.
CSS:
#entete
{
color: white;
/* texture verte affichée en dehors de la partie centrale */
background-image: url(images/header-outer-bg.jpg);
}
#entete-centre
{
/* Image de fond avec des herbes pour la partie centrale de l'entete */
background-image: url(images/header-bg.jpg);
background-repeat: none;
/* centrer l'image de fond horizontalement et la coller en haut */
background-position: center top;
}
/* Balises HTML5 pour vieux navigateurs */
section,nav,article,aside,header,footer,main
{
display: block;
}
Comme on l'a vu dans les TP précédents, le menu horizontal se construit avec une liste (<ul>, <li>).
Les idées principales sont:
HTML
<nav id="menu">
<ul>
<li><a href="">Homepage</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
</ul>
</nav>
CSS:
#menu ul
{
/* enlever les puces de la liste ul */
list-style: none;
background-color: #242424;
/* Forcer le ul à prendre en compte tout son contenu. */
overflow: hidden;
padding: 0;
margin: 0;
/* On veut une liste horizontale, pas verticale */
display: flex;
}
#menu li
{
/* une légère bordure à chaque élément du menu pour ajouter du relief */
border-left: 1px solid #323232;
border-right: 1px solid #131313;
}
#menu li a
{
/* on veut pouvoir agrandir le lien, ce qui n'est pas possible en inline (par défaut) */
display: block;
padding: 17px 24px;
/* par défaut les liens sont soulignés... enlever */
text-decoration: none;
color: #b2b2b2;
font-size: 12px;
}
/* :hover s'applique quand la souris pas pardessus l'élément */
#menu li a:hover
{
color: #FFFFFF;
/* dégradé gris clair ver gris sombre, du haut vers le bas */
/* crée avec http://www.css3factory.com/linear-gradients/ */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #232323),color-stop(1, #3A3A3A));
background-image: -o-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -moz-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -webkit-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -ms-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: linear-gradient(to top, #232323 0%, #3A3A3A 100%);
}
Jusqu'à maintenant on a utilisé des couleurs en hexadécimal
Par exemple:
color: #fa2587; /* rouge=#fa=250 vert=#25=37 bleu=#87=137 */
ou en trois lettres
color: #f3a; /* rouge=#ff=255 vert=#33=51 bleu=#aa=170 */
On peut aussi utiliser la notation rgba (rouge,vert,bleu,transparence)
Rouge, vert et bleu sont des entiers entre 0 et 255.
Transparence est une valeur flottante entre 0 et 1.
Par exemple:
color: rgba(255,51,170,.7);
La grande image du haut a un cadre semi-transparent:
#illustration-haut
{
/* ajouter un cadre semi-transparent à la grande image du haut */
background-color: rgba(0,0,0,.1);
padding: 20px 0;
/* centrer l'image à l'intérieur du div */
text-align: center;
}
Nous avons vu plusieurs éléments permettant de construire le <header> d'un site web.
Voici le résultat final pour « site vert »
HTML:
<header id="entete">
<div id="entete-centre" class="centrer">
<div id="logo">
<h1>Mon joli site</h1>
<div id="soustitre">très très beau</div>
</div>
<nav id="menu">
<ul>
<li><a href="">Homepage</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
<li><a href="">Bla bla</a></li>
</ul>
</nav>
<div id="illustration-haut">
<img src="images/pics01.jpg" alt="immeubles"/>
</div>
</div>
</header>
CSS:
/* body représente toute la partie affichable du document HTML */
body
{
/* enlever le petit espace blanc tout autour de la page */
margin:0;
}
/* Centrer horizontalement le contenu au milieu de la page */
.centrer
{
/* les marges à gauche et droite "auto" permettent de centrer */
margin-left: auto;
margin-right: auto;
/* largeur de la partie centrale principale de l'affichage */
width: 1200px;
/* Forcer à ce que tout le contenu de cette partie reste à l'intérieur de cette partie */
/* Par exemple: les marges ne débordent pas */
/* Par exemple: les float ne débordent pas */
overflow: hidden;
}
#entete
{
color: white;
/* texture verte affichée en dehors de la partie centrale */
background-image: url(images/header-outer-bg.jpg);
}
#entete-centre
{
/* Image de fond avec des herbes pour la partie centrale de l'entete */
background-image: url(images/header-bg.jpg);
background-repeat: none;
/* centrer l'image de fond horizontalement et la coller en haut */
background-position: center top;
padding-bottom: 20px;
}
#logo
{
padding-top: 17px;
padding-bottom: 28px;
}
#logo h1
{
/* On veut que le logo et le soustitre soient sur la même ligne */
display: inline;
/* La police "Lobster" du logo est incluse par la balise <link> */
font-family: 'Lobster',cursive;
font-size: 72px;
/* par défaut le h1 est "bold" (gras), nous on veut normal */
font-weight: normal;
/* enlever les espaces par défaut du h1 */
margin: 0;
}
#soustitre
{
display: inline;
margin-left: 8px;
font-family: 'Magra',sans-serif;
font-size: 27px;
font-weight: 200;
/* serrer les lettres (diminuer l'espacement horizontal entre chaque lettre) */
letter-spacing: -2px;
}
#menu
{
margin-bottom: 21px;
}
#menu ul
{
/* enlever les puces de la liste ul */
list-style: none;
background-color: #242424;
/* Forcer le ul à prendre en compte tout son contenu. */
overflow: hidden;
padding: 0;
margin: 0;
/* On veut une liste horizontale, pas verticale */
display: flex;
}
#menu li
{
/* une legere bordure à chaque élément du menu pour ajouter du relief */
border-left: 1px solid #323232;
border-right: 1px solid #131313;
}
#menu li a
{
/* on veut pouvoir agrandir le lien, ce qui n'est pas possible en inline (par défaut) */
display: block;
padding: 17px 24px;
/* par défaut les liens sont soulignés... enlever */
text-decoration: none;
color: #b2b2b2;
font-size: 12px;
}
/* :hover s'applique quand la souris pas pardessus l'élément */
#menu li a:hover
{
color: #FFFFFF;
/* dégradé gris clair ver gris sombre, du haut vers le bas */
/* crée avec http://www.css3factory.com/linear-gradients/ */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #232323),color-stop(1, #3A3A3A));
background-image: -o-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -moz-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -webkit-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: -ms-linear-gradient(top, #232323 0%, #3A3A3A 100%);
background-image: linear-gradient(to top, #232323 0%, #3A3A3A 100%);
}
#illustration-haut
{
/* ajouter un cadre semi-transparent à la grande image du haut */
background-color: rgba(0,0,0,.1);
padding: 20px 0;
/* centrer l'image à l'intérieur du div */
text-align: center;
}
/* Balises HTML5 pour vieux navigateurs */
section,nav,article,aside,header,footer,main
{
display: block;
}
Vous avez maintenant assez d'outils pour compléter votre page d'accueil.
N'hésitez pas à demander de l'aide à votre enseignant.
Une page de ressources, de conseils et d'exemples de CSS ici: