Scribd
Importer
144 vues81 pages

Programmation Web Html5 - css3

Transféré par

kadiatousidibe39
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
144 vues81 pages

Programmation Web Html5 - css3

Transféré par

kadiatousidibe39
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 81

Programmation Web

Présenté et dispensé par Abdoulaye


Mahamane Maiga, enseignant - chercheur à
l’IUFP
INTRODUCTION A LA PROGRAMMATION
WEB
INTRODUCTION

Comment fonctionne le web


?????
Réseaux et types de sites internet(1)

• Lorsque l’on crée un site web, il faut connaître le réseau cible


sur lequel il va être déployé, car cela peut conditionner
certains choix de conception.

• Les réseaux « internet », « intranet » et « extranet » sont des


réseaux sur lesquels un site web est le plus communément
déployé. D’un point de vue technique, ces trois réseaux sont
identiques, mais leur utilisation est différente.
Réseaux et types de sites internet(2)

•Internet et le Web sont étroitement liés.


•Internet
•Intranet
•Extranet
•Site Statique et Dynamique
•Choisir un type de site ?
Réseaux et types de sites internet(3)
• Internet : permet l’échange d’information entre différents
postes, à un niveau mondial et sans restrictions.
• Intranet : possède un fonctionnement similaire, à la
différence près que l’accès à ce réseau est restreint à
quelques lieux identifiés.
• Extranet : est destiné aux mêmes types de personnes.
Cependant, il leur permet un accès à différentes
fonctionnalités en dehors des lieux identifiés.
Réseaux et types de sites internet(4)
Site statique
• Un site statique est réalisé en utilisant le langage HTML (HyperText
Markup Language). Les informations des pages de ce site sont contenues
dans les pages elles-mêmes.

• Un site est qualifié de site « statique » lorsqu’il ne possède pas de


contenu « interactif ». Un site est qualifié de site « statique » lorsqu’il
ne possède pas de contenu « interactif ». Cela n’a aucun rapport avec le
fait que des éléments sur ses pages « bougent », clignotent, s’animent,
ou non.
Réseaux et types de sites internet(5)
Site Dynamique
• Un site dynamique est réalisé en utilisant des scripts générant du code.
Les informations des pages du site sont issues d’une base de données ou
de ressources distantes.

• On dit d’un site qu’il est « dynamique » parce qu’il propose des
contenus « interactifs ». Les pages d’un site dynamique proposent un
contenu dit « interactif », car son contenu est généré en fonction des
choix des utilisateurs du site.
• Cela n’a, encore une fois, aucun rapport avec le fait qu’il puisse
éventuellement présenter des contenus « animés ».
Réseaux et types de sites internet(6)
Choisir un type de site ?
• Le trait technique le plus distinctif de ces deux types de sites est
l’utilisation d’une base de données. Un site statique n’en a pas besoin,
alors qu’il s’agit d’un prérequis dans le cadre d’un site dynamique.

• La question du choix de type de site à implémenter (mettre en place)


est cruciale et dépend surtout du rôle de ce dernier :
• Quel est le rôle du site ?
• Quelle est la cible du site ?
• Quel est le nombre estimé d’utilisateurs ?
• Quelle sera leur façon de l’utiliser ?
Rôles de HTML et CSS
• HTML (HyperText Markup Language) :
• Il a fait son apparition dès 1991 lors du lancement du Web.
• Son rôle est de gérer et organiser le contenu. C'est donc en HTML que
vous écrirez ce qui doit être affiché sur une page web : du texte, des
liens, des images etc..

• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) :


Son rôle est de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…).
• Ce langage est venu compléter le HTML en 1996.
CODE MINIMAL D'UNE PAGE HTML5(1)
•
STRUCTURE DE BASE D'UNE PAGE HTML5(2)
• <!DOCTYPE html>
Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web
HTML.
• La balise <html> </html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page.
• L'en-tête <head>
cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la
gestion des caractères spéciaux), Les informations que contient l'en-tête ne sont pas affichées sur la
page, ce sont simplement des informations générales à destination de l'ordinateur.
• le corps <body>
c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à
l'écran.
• <meta charset="utf-8" /> Cette balise indique l'encodage utilisé dans votre fichier .html.
STRUCTURE DE BASE D'UNE PAGE HTML5(3)

• UTF-8. Cette méthode d'encodage permet d'afficher sans aucun


problème pratiquement tous les symboles de toutes les langues de notre
planète !

• la balise <title> </title> Pour le titre principal de la page


Les commentaires
Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- votre commentaire -->
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>
RÉSUMÉ

Les balises peuvent avoir plusieurs formes :


• <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début et
fin d'un titre, par exemple).
• <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles
permettent d'insérer un élément à un endroit précis (par exemple une image).
• Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple : <image nom="photo.jpg" />).
• Une page web est constituée de deux sections principales : un en-tête (<head>) et
un corps (<body>).
• On peut afficher le code source de n'importe quelle page web en faisant un clic droit
puis en sélectionnant Afficher le code source de la page.
LES PARAGRAPHES

• <p> votre paragraphe </p>


• le contenu de notre site web est écrit a l’intérieur de la balise <body> </body>
Exemple :

<p> BIENVENU SUR LE SITE DES GENIES </p>


• <br /> pour aller a la ligne a la fin d’un paragraphe
NB : N’utiliser pas la balise <br /> de manière abusive. On utilisera CSS
pour plus de precision.
MA PREMIERE PAGE WEB AVEC HTML

• Environnement de programmation HTML

• Au préalable créer un dossier personnel « PROJET WEB » dans l’un de


mémoire de stockage de votre ordinateur.
• Ouvrir sublimtext
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Licence 3 Informatique de Gestion UPMSC</title>
</head>
<body>
<p>BIENVENU SUR NOTRE PLATEFORME LES GENIES EN
INFORMATIQUES </p> <br />
<p> Sur cette plateforme vous aurez la possibilité d’échanger avec des experts
en Informatique.</p>
<p> Sachez que l'excellence est un art que l'on n'atteint que par l'exercice
constant.</p>
<p> Nous sommes ce que nous faisons de manière répétée.</p>
<p> L'excellence n'est pas donc une action mais une habitude.</p>
</body>
</html>
Les titres(a l’intérieur de votre page web)
• En HTML, nous pouvons utiliser 06 niveaux de titre selon l’importance du texte. Nous avons six balises :
• <h1> </h1> : Quand le titre très important . En général, on s'en sert pour afficher le titre de la page au début de
celle-ci.

• <h2> </h2> : quand le titre important

• <h3> </h3> : quand le titre est un peu moins important.

• <h4> </h4> : titre encore moins important.

• <h5> </h5> : titre pas important.

• <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

• A ne pas confondre avec la balise <title> </title> qui affiche le titre de la page dans le navigateur.
La mise en valeur sous HTML
• <em> </em> pour Mettre légèrement en valeur votre texte

• <strong> </strong> pour bien mettre en valeur votre texte.

• <mark> </mark> pour marquer le texte


Les Listes pour structurer et organiser nos informations

Pour créer des listes, nous utiliserons les balises suivantes :


• la balise <ul> </ul> pour une liste a puces non ordonnées
• La balise <ol> </ol> pour une liste ordonnée. À l'intérieur,
• on insère les éléments de notre liste avec la balise <li> </li> pour chaque item.
Exemple :
Liste non ordonnée Liste ordonnée
<ul> <ol>
<li>POO EN JAVA</li> <li>MENU FILE</li>
<li>BDD ORACLE</li> <li>NEW</li>
<li>WINDOWS SERVER</li> <li>PROJECT JAVA</li>
</ul> </ol>
Création des liens
Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.
• Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible.
Lien vers un autre site
• <a href="http://www.NomDeDomaine">Identifiant du site </a>
Lien vers une page de son site
• deux pages situées dans le même dossier
<a href="NomDeLaPage.html"> Identifiant </a>
• deux pages situées dans des dossiers différents
<a href="emplacement/NomDeLaPage.html"> Identifiant </a>
Lien vers une ancre
• Une ancre est un lien permettant d'amener vers d'autres endroits sur la même page. On le cree
avec l'attribut id
<h2 id="NomAncre">Titre</h2> puis on crée le lien vers l’ancre crée
<a href="#NomEncre">Titre</a>
• Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer
l'adresse de la page cible.

Lien vers un autre site


• <a href="http://www.NomDeDomaine">Identifiant du site </a>

Lien vers une page de son site


• deux pages situées dans le même dossier
<a href="NomDeLaPage.html"> Identifiant </a>

• deux pages situées dans des dossiers différents


<a href="emplacement/NomDeLaPage.html"> Identifiant </a>
Lien vers une ancre
• Une ancre est un lien permettant d'amener vers d'autres
endroits sur la même page. On le cree avec l'attribut id
<h2 id="NomAncre">Titre</h2> puis on crée le
lien vers l’ancre crée
<a href="#NomEncre">Titre</a>
EXEMPLE
<h1>Mon premier site </h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#algo"> algo </a><br />
<a href="#C++">C++</a><br />
</p>
<h2 id=" algo "> algo </h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="C++">C++</h2>
<p>... (beaucoup de texte) ...</p>
<p>... (beaucoup de texte) ...</p>
QUELQUES ATTRIBUTS DE LA BALISE <a> </a>

• Ajouter une infobulle a votre lien : avec l’attribut title


<a href="http://www.NomDomaine" title=" le message infobulle">Identifiant</a>
• Un lien qui ouvre une nouvelle fenêtre : avec l’attribut target="_blank«
<a href="http://www.NomDomaine" target="_blank">Identifiant</a>
• Un lien pour envoyer un e-mail : en utilisant le lien de type mailto
<a href="mailto:AdresseEmail">Envoyez-moi un E-mail !</a>
• Un lien pour télécharger un fichier :
<a href="NomFichier.extension">Télécharger le fichier</a>
Les images
Insertion d’une image :
On utilise la balise orpheline <img /> avec deux attributs obligatoires :
• src : qui permet d'indiquer l’emplacement de l'image que l'on veut insérer. Soit en donnant un
chemin absolu ou un chemin relatif.
• alt : c’est un texte alternatif qui permet de donner une légende a l’image
NB : Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p>
</p>). Le plus souvent
Exemple :
<p>
Photo de groupe de la 2eme année Informatique de Gestion :<br />
<img src= " UPMSC/etudiant.jpg" alt="Photo de souvenir UPMSC 2021" />
</p>
On peut aussi ajouter une infobulle a nos images avec la balise title
<img src=« ECOSUP/etudiant.jpg" alt="Photo de souvenir Ecosup 2018" title="Une photo
de souvenir"/>
Création d’une figure en HTML5
• Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.
Les figures peuvent être de différents types : des images ;du code source ; des citations afin de
guider le lecteur de votre page. Pour cela nous utiliserons la balise <figure> </figure>
<figure>
<img src="capture/code_java.png" alt="création d’une classe en java" />
</figure>
• pour ajouter une légende a votre figure utiliser la balise <figcaption>
</figcaption>
<figure>
<img src="capture/code_java.png" alt=« code source java" />
<figcaption> création de la classe Compte</figcaption>
</figure>
Introduction au CSS (Cascading Style Sheets - feuilles de
styles en cascade)
• il sert principalement à gérer l'aspect visuel d'une page web
• Le CSS n'existe pas par lui-même. Il s'applique forcément à un autre
document : il ne peut être utilisé qu'en association avec des langages de
balisage tels que HTML.

• Le CSS est là pour gérer l'apparence de la page web, il crée la mise en


page du langage de balisage : couleurs, positions, tailles, police... sans
avoir à modifier le code HTML. C'est un des concepts fondamentaux
actuels du web : la séparation du fond et de la forme.
Utilisation du langage CSS
• on peut écrire du code en langage CSS à trois endroits différents :
 dans un fichier .css ;
 dans l'en-tête <head> du fichier HTML ;
 directement dans les balises du fichier HTML via un attribut style.
NB : la méthode la plus recommandée est d’écrire nos codes css dans un fichier .css
• Pour cette méthode(fichier.css) nous allons utilisé la balise orpheline link avec l’attribut rel et href a
l’intérieur de la balise <head> </head> comme suit :
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="fichier.css" />
<title>Premiers tests du CSS</title>
</head>
Application du style CSS

• Dans un code CSS, on trouve trois éléments différents :


• Le noms de balises : on écrit les noms des balises dont on veut
modifier l'apparence.
• Les propriétés CSS : les « effets de style » de la page sont rangés dans
des propriétés. Il y a par exemple la propriété color qui permet
d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille
du texte, etc.
• Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur.
balise1
{
propriete1: valeur1;
propriete2: valeur2;
……………………
……………………
proprieten: valeurn;

}
balise2
{
propriete1: valeur1;
propriete2: valeur2;
proprieten: valeurn;
}
Exemple
P
{
color: blue;
}
h1
{
color: blue;
}

p,em
{
color: blue;
}
Les commentaires en css
• pour faire un commentaire en css, on utilise le symbole /*, suivi de votre
commentaire, puis */ pour terminer votre commentaire. Vos commentaires peuvent
être écrits sur une ou plusieurs lignes.

/*
Vos commentaires
*/

P
{
color: blue; /* Les paragraphes seront en bleu */
}
Appliquer un style : class et id
L’attribut class
• Il est utilisé pour personnaliser le style a mettre sur les balises ciblées.
c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi
bien titre que paragraphe, image, etc.
<h1 class=" "> </h1>
<p class=" "> </p>

vous devez écrire un nom qui sert à identifier la balise. Ce que vous
voulez, du moment que le nom commence par une lettre.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1 class= “ introduction”>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue sur mon site !
</p>
</body>
</html>
Code CSS : a écrire dans le fichier style.css

.introduction
{
color: blue;
}
L’attribut id
il ne peut être utilisé qu'une fois dans le code, très généralement en
javascript pour identifier certaines balises. Par exemple sur le logo de
votre site web.
dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#)
Exemple
<img src="pictures/LogoSite.png" alt="Logo du site" id="logo" />
Code CSS : a écrire dans le fichier style.css

#logo
{
float: left;
}
Les balises universelles

• Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains
mots qui, à l'origine, ne sont pas entourés par des balises.
• En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc
en mettre que sur une balise. Si, par exemple, je veux modifier uniquement «
bienvenue » dans le paragraphe suivant :
<p>Bonjour et bienvenue sur mon site !</p>
Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais,
malheureusement il n'y en a pas.
Nous avons deux balises dites universelles :
<span> </span> et <div> </div>
<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on
place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement.
Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au
milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer «
bienvenue ».
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>
.salutations
{
color: blue;
}
• <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les
balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en
commun : elles créent un nouveau « bloc » dans la page et provoquent donc
obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée
dans la construction d'un design.
Formatage du texte
• La taille
Pour modifier la taille du texte, on utilise la propriété CSS font-
size.
p{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}
Une valeur relative
C'est la méthode recommandée car le texte s'adapte alors plus
facilement aux préférences de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par
exemple écrire la taille avec des mots en anglais comme ceux-ci :
• xx-small : minuscule ;
• x-small : très petit ;
• small : petit ;
• medium : moyen ;
• large : grand ;
• x-large : très grand ;
• xx-large : … gigantesque.
p{
font-size: small;
}
h1
{
font-size: large;
}
Modifier la police
• La propriété CSS qui permet d'indiquer la police à utiliser est
font-family. Vous devez écrire le nom de la police comme ceci :
balise
{
font-family : police;
}
• Seulement, pour éviter les problèmes si l'internaute n'a
pas la même police que vous, on précise en général
plusieurs noms de police, séparés par des virgules :
Modifier la police
balise
{
font-family: police1, police2, police3, police4;
}
Le navigateur essaiera d'abord d'utiliser la police1. S'il ne
l'a pas, il essaiera la police2. S'il ne l'a pas, il passera à la
police3, et ainsi de suite.
En général, on indique en tout dernier serif, ce qui
correspond à une police par défaut (qui ne s'applique que
si aucune autre police n'a été trouvée).
Modifier la police
Voici une liste de polices qui fonctionnent bien sur la
plupart des navigateurs :
• Arial ;
• Arial Black ;
• Comic Sans MS ;
• Courier New ;
• Georgia ;
• Impact ;
• Times New Roman ;
• Trebuchet MS ;
• Verdana.
Modifier la police
P
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-
serif;
}
cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial
Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché,
mets une police standard (sans-serif) ».
NB :
Si le nom de la police comporte des espaces, je conseille de
l'entourer de guillemets, comme je l'ai fait pour « Arial Black
»
La propriété font-style
en CSS, pour mettre en italique, en oblique ou normal on
utilise font-style qui peut prendre trois valeurs :
• italic : le texte sera mis en italique.
• oblique : le texte sera passé en oblique (les lettres sont
penchées, le résultat est légèrement différent de
l'italique proprement dit).
• normal : le texte sera normal (par défaut). Cela vous
permet d'annuler une mise en italique.
La propriété font-style
h2
{
font-style: italic;
}
La propriété CSS pour mettre en gras est font-weight et prend
les valeurs suivantes :
• bold : le texte sera en gras ;
• normal : le texte sera écrit normalement (par défaut).
h1
{
font-weight: bold;
}
Soulignement et autres décorations
La propriété CSS associée porte bien son nom :
text-decoration. Elle permet, entre autres, de souligner
le texte, mais pas seulement. Voici les différentes valeurs
qu'elle peut prendre :
• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Ne fonctionne pas sur tous les
navigateurs (Internet Explorer et Google Chrome,
notamment).
• none : normal (par défaut).
h1
{
text-decoration: blink;
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}
L’alignement
Le langage CSS nous permet de faire tous les alignements
connus : à gauche, centré, à droite et justifié. C'est tout
simple. On utilise la propriété text-align et on indique
l'alignement désiré :
let : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera « justifié ». Justifier le texte permet de
faire en sorte qu'il prenne toute la largeur possible sans
laisser d'espace blanc à la fin des lignes. Les textes des
journaux, par exemple, sont toujours justifiés.
Quelques propriétés utiles

•la propriété border


Balise
{
border : 3px blue solid;
}
L’alignement
h1
{
text-align: center;
}
P
{
text-align: justify;
}
.signature
{
text-align: right;
}
Les flottants
Le CSS nous permet de faire flotter un élément autour du texte.
On dit aussi qu'on fait un « habillage ».
La float propriété peut prendre deux valeurs très simples :
• left : l'élément flottera à gauche.
• right : l'élément flottera… à droite ! Oui, bravo.
L'utilisation des flottants est très simple :
• 1. Vous appliquez un float à une balise.
• 2. Puis vous continuez à écrire du texte à la suite normalement.
Faire flotter une image

<p> <img src="flash.gif" class="imageflottante" alt="Image flottante"/>


Ceci est un texte normal de paragraphe, écrit à la suite de
l'image et qui l'habillera car l'image est flottante.</p>

.imageflottante
{
float: left;
}
Stopper un flottant
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après
un float: left; ou après un float: right;
• On applique un clear: both; au paragraphe que l'on veut
voir continuer sous l'image flottante et le tour est joué !
• <p><img src="flash.gif" class="imageflottante" alt="Image
flottante" /> </p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image
flottante.</p>
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
Appliquer une image de fond
La propriété permettant d'indiquer une image de fond est background-image.
Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :
• Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS !
L'adresse de l'image doit être indiquée par rapport au fichier .css et non pas
par rapport au fichier .html. Pour simplifier les choses, je vous conseille de
• placer l'image de fond dans le même dossier que le fichier .css (ou dans un
sous-dossier).

body
{
background-image: url("neige.png");
}
Options disponibles pour l'image de fond
• On peut compléter la propriété background-image que nous venons de
voir par plusieurs autres propriétés qui permettent de changer le
comportement de l'image de fond.
background-attachment : fixer le fond
La propriété CSS background-attachment permet de « fixer » le fond.
L'effet obtenu est intéressant car on voit alors le texte « glisser » par-
dessus le fond. Deux valeurs sont disponibles :
• fixed : l'image de fond reste fixe ;
• scroll : l'image de fond défile avec le texte (par défaut).
body
{
background-image: url("neige.png");
background-attachment: fixed; /* Le fond restera
fixe */
}
background-repeat : répétition du fond
Par défaut, l'image de fond est répétée en mosaïque. Vous
pouvez changer cela avec la propriété background-
repeat :
• no-repeat : le fond ne sera pas répété. L'image sera
donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la
première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la
première colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).
body
{
background-image: url("soleil.png");
background-repeat: no-repeat;
}
background-position : position du fond
• On peut indiquer où doit se trouver l'image de fond avec background-position.
Cette propriété n'est intéressante que si elle est combinée avec background-
repeat: no-repeat; (un fond qui ne se répète pas).
• Vous devez donner à background-position deux valeurs en pixels pour indiquer la
position du fond par rapport au coin supérieur gauche de la page (ou du
paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position: 30px 50px;
votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi
possible d'utiliser ces valeurs en anglais :
• top : en haut ;
• bottom : en bas ;
• left : à gauche ;
• center : centré ;
• right : à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à
droite, vous taperez : background-position: top right;
Ainsi, si je veux afficher un soleil en image de fond (figure suivante), en un unique
exemplaire (no-repeat), toujours visible (fixed) et positionné en haut à droite (top
right), je vais écrire ceci :
body
{
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à
droite */
}
Plusieurs images de fond
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour
cela, il suffit de séparer les déclarations par une virgule, comme ceci :
body
{
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}
La première image de cette liste sera placée par-dessus les autres (figure suivante).
Attention donc, l'ordre de déclaration des images a son importance : si vous inversez le
soleil et la neige dans le code CSS précédent, vous ne verrez plus le soleil !
MISE EN PAGE DU SITE
LES BALISES STRUCTURANTES DE HTML5
<header> : l'en-tête
La plupart des sites web possèdent en général un en-tête, appelé header
en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de
votre site…
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>
LES BALISES STRUCTURANTES DE HTML5
<footer> : le pied de page
l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document.
On y trouve des informations comme des liens de contact, le nom de l'auteur, les
mentions légales, etc.
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>
<nav> : principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous
y placerez par exemple le menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la
balise <nav> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section> : une section de page
La balise <section> sert à regrouper des contenus en fonction de leur
thématique. Elle englobe généralement une portion du contenu au centre
de la page.
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

NB : Chaque section peut avoir son titre de niveau 1 (<h1>), de même que
l'en-tête peut contenir un titre <h1> lui aussi. Chacun de ces blocs étant
indépendant des autres, il n'est pas illogique de retrouver plusieurs titres
<h1> dans le code de la page web. On a ainsi « Le titre <h1> du <header>
», « Le titre <h1> de cette <section> », etc.
<aside> : informations complémentaires
La balise <aside> est conçue pour contenir des informations
complémentaires au document que l'on visualise. Ces informations sont
généralement placées sur le côté (bien que ce ne soit pas une obligation).
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>
Il peut y avoir plusieurs blocs <aside> dans la page. Sur Wikipédia, par
exemple, il est courant de voir à droite un bloc d'informations
complémentaires à l'article que l'on visualise.
Ainsi, sur la page présentant la planète Saturne (figure suivante), on trouve
dans ce bloc les caractéristiques de la planète
(dimensions, masse, etc.).
<article> : un article indépendant
La balise <article> sert à englober une portion généralement autonome de
la page. C'est une partie de la page qui pourrait ainsi être reprise sur un
autre site. C'est le cas par exemple des actualités (articles de journaux ou
de blogs).
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>
Résumé
Résumé
Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui
constituent la page web :

<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complémentaires ;
<article> : article indépendant.

Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut
avoir son propre en-tête.
Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à
l'ordinateur le sens du texte

Vous aimerez peut-être aussi