Logiciels utilisés et liens utiles
Nous utiliserons les logiciels suivants :
- Notepad++ pour créer nos fichiers. http://notepad-plus-plus.org/fr/
- The Gimp, pour nos graphiques. http://www.gimp.org/
Les balises html
Exercice 1
Dans votre éditeur taper le texte ci-dessous, enregistrer votre programme dans le répertoire choisi en le nommant test_01.html. Ouvrir ensuite ce fichier avec Mozilla Firefox.
Voici mon super site ! Quelle joie !
Pour mieux organiser ce que l'on voit, il va falloir ajouter des instructions
"codées" dans notre fichier test_01.html.
Remplacer le contenu du fichier précédent par ce qui suit :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon super premier fichier html</title> </head> <body> <p> Voici mon super site ! <br /> Quelle joie ! </p> </body> </html>
Challenge 1
La zone de saisie ci-dessous simule l'utilisation d'un éditeur, et "l'écran" en dessous simule le résultat dans un navigateur.
Ceci nous permettra de faire des petits challenges pour mieux assimiler les notions abordées.
Le but ici est juste d'écrire entre les balises body et si possible d'utiliser la balise <br />
Le CSS
Exercice 2
On aimerait que le texte du fichier de l'exercice 1 soit écrit en rouge.
Voici trois méthodes pour faire cela. Nous verrons ensuite laquelle est la meilleure.
Dans la première, on modifie l'attribut couleur du bloc <p>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon super premier fichier html</title> </head> <body> <p style="color:#ff0000;"> Voici mon super site ! <br /> Quelle joie ! </p> </body> </html>
Pour la deuxième, on annonce le changement de couleur dans la partie <head> de notre document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon super premier fichier html</title>
<style>
p{
color: #ff0000;
}
</style>
</head>
<body>
<p>
Voici mon super site !
<br />
Quelle joie !
</p>
</body>
</html>
Dans la troisième méthode on se sert d'un fichier externe styles.css, on doit le signaler dans le <head> du document et on crée ensuite ce nouveau fichier (on veillera à l'enregistrer dans le même répertoire que test_01.html.
Nom du fichier : test_01.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styles.css" /> <title>Mon super premier fichier html</title> </head> <body> <p> Voici mon super site ! <br /> Quelle joie ! </p> </body> </html>
Nom du fichier : styles.css
p{
color:#ff0000;
}
Exercice 3
On souhaite maintenant écrire un paragraphe en rouge, l'autre, en blanc sur fond noir,
et le troisième de la même manière que le premier.
Nous devons modifier notre fichier html, ainsi que le fichier css.
Nom du fichier : test_01.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styles.css" /> <title>Mon super premier fichier html</title> </head> <body> <p class="rouge"> Voici mon super site ! <br /> Quelle joie ! </p> <p class="noir"> Maintenant un joli texte en blanc sur fond noir. </p> <p class="rouge"> Revenons au rouge... </p> </body> </html>
Le fichier : styles.css
.rouge{
color:#ff0000;
}
.noir{
color:#ffffff;
background-color: #000000;
}
Challenge 2
Compléter le code ci-dessous pour que la couleur de fond de la page soit rose, que la couleur d'écriture du premier paragraphe soit blanche, et du deuxième bleue.
Exercice 4
Chaque balise html peut avoir ses attributs css que l'on modifie pour obtenir un
aspect différent.
Il faut donc apprendre les balises html et les attributs css.
En voici une liste à chercher à l'aide d'un moteur de recherche.
<div>
<table>
<a>
<img />
<h1>
background-image
font-size
width
height
margin
opacity
word-wrap
border-radius
border
box-shadow
position
Challenge 3
Modifier le code ci-dessous pour que le rectangle blanc soit à la droite du disque bleu et non en dessous.
Challenge 4
Votre mission est de créer une page pour obtenir le résultat ci-dessous
Les images
Un site web se doit d'être agréable à l’œil. Il faut donc savoir y insérer des images. Cela n'est pas toujours aisé. Voici des problématiques auxquelles il va nous falloir répondre.
- Image détaillée ou compressée ?
- Quel est le meilleur format d'image ?
- Comment créer ou modifier des images ?
- Quelles images ai-je le droit d'utiliser ?
- Comment insérer une image dans un site web ?
Un exemple pas à pas
Nous allons créer une page web, en partant de zéro, et en effectuant des ajouts, au fur et à mesure, pour bien se rendre compte de l'effet de chaque instruction.
Nous aurons besoin pour cela de créer un nouveau répertoire, dans lequel nous créerons, deux fichiers : page_web.html et mon_style.css.
Le fichier : page_web.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="mon_style.css" /> <title>Pas à Pas</title> </head> <body> </body> </html>
Le fichier mon_style.css
En faisant un clic-droit sur l'image ci-dessous, on la sauvegardera dans le même répertoire que les deux fichiers précédents, et on la nommera fractale.png. Ce sera l'image qui nous servira d'image de fond pour notre page web.
fractale.png
Etape 1
Ouvrir le fichier page_web.html dans votre navigateur.
Une page blanche devrait apparaître, et c'est normal, car nous n'avons encore rien écrit entre les balises <body> et </body>.
Etape 2
Nous allons modifier le fichier mon_style.css pour afficher l'image de fond.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
}
Etape 3
Nous obtenons une image de fond qui se répète. Pour empècher cela, nous allons à nouveau modifier le fichier de style.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
}
Etape 4
L'image ne se répète plus, mais la couleur de fond ne correspond pas. Nous décidons de plus de placer l'image en haut à droite et non à gauche.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
Etape 5
Nous allons maintenant organiser le corps de notre fichier html.
Nous y mettrons une bannière pour le titre et un conteneur central, pour le texte principal, qui sera découpé en plusieurs paragraphes.
Le fichier : page_web.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="mon_style.css" /> <title>Pas à Pas</title> </head> <body> <div id="banniere"> </div> <div id="conteneur"> <div class="paragraphe"> </div> <div class="paragraphe"> </div> <div class="paragraphe"> </div> </div> </body> </html>
Etape 6
Cela n'a encore aucun effet lorsqu'on actualise la page web, car il n'y a aucun contenu dans les div que nous avons ajouté.
Pour ne pas à avoir à réfléchir sur le contenu nous ajoutons du texte en latin.
Le fichier : page_web.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body>
<div id="banniere">
Harum trium sententiarum
</div>
<div id="conteneur">
<div class="paragraphe">
<h2>Quam multa enim</h2>
Batnae municipium in Anthemusia conditum
Macedonum manu priscorum ab Euphrate
flumine brevi spatio disparatur, refertum
mercatoribus opulentis, ubi annua
sollemnitate prope Septembris initium
mensis ad nundinas magna promiscuae
fortunae convenit multitudo ad commercanda
quae Indi mittunt et Seres aliaque plurima
vehi terra marique consueta
</div>
<div class="paragraphe">
<h2>Quae in nostris rebus</h2>
Accedebant enim eius asperitati, ubi
inminuta vel laesa amplitudo imperii
dicebatur, et iracundae suspicionum
quantitati proximorum cruentae blanditiae
exaggerantium incidentia et dolere
inpendio simulantium, si principis
periclitetur vita, a cuius salute velut
filo pendere statum orbis terrarum
fictis vocibus exclamabant.
</div>
<div class="paragraphe">
<h2>sic in amicum sit animatus</h2>
Ob haec et huius modi multa, quae
cernebantur in paucis, omnibus timeri
sunt coepta. et ne tot malis dissimulatis
paulatimque serpentibus acervi crescerent
aerumnarum, nobilitatis decreto legati
mittuntur: Praetextatus ex urbi praefecto
et ex vicario Venustus et ex consulari
Minervius oraturi, ne delictis supplicia
sint grandiora, neve senator quisquam
inusitato et inlicito more tormentis
exponeretur.
</div>
</div>
</body>
</html>
Et nous allons, mettre un fond blanc dans la bannière et le conteneur centrale.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
}
#conteneur{
background-color:#ffffff;
}
Etape 7 : la bannière
Nous allons maintenant nous occuper de la bannière.
Toute les nouveautés du fichier de style seront écrite en rouge.
Nous allons modifier sa largeur pour qu'elle occupe 70% de la largeur de l'écran. Ensuite,
nous écrirons au centre de la div avec une police de 2em, et nous demanderons à ce qu'il y ait une marge interne de 10 pixels en haut et en bas.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
}
#conteneur{
background-color:#ffffff;
}
Nous allons maintenant écrire le titre de la bannière en gras, et avec une ombre en gris.
Nous demandons également à ce que les coins de la bannière soient arrondis.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
}
#conteneur{
background-color:#ffffff;
}
Ajoutons maintenant une image à gauche dans la bannière. Cette image, à télécharger ci-dessous (clic-droit, enregistrer-sous), à une hauteur de 100 pixels. Il faut donc donner cette même hauteur à notre bannière, et dire que la ligne d'écriture fait également 100 pixels, si on veut que le texte soit centré verticalement.
julia.png
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
background-image:url('julia.png');
background-repeat: no-repeat;
background-position: top left;
height: 100px;
line-height:100px;
}
#conteneur{
background-color:#ffffff;
}
Etape 8 : le conteneur central
Nous allons tout d'abord, établir une marge avec la bannière, pour ne pas que les div soient collées.
Ensuite, nous allons éloigner le texte des bords hauts et bas de la div, puis définir une largeur égale à celle de la bannière.
Et pour finir, nous arrondirons les coins de la div.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
background-image:url('julia.png');
background-repeat: no-repeat;
background-position: top left;
height: 100px;
line-height:100px;
}
#conteneur{
background-color:#ffffff;
margin-top: 30px;
padding-top:10px;
padding-bottom:10px;
width: 70%;
border-radius:5px;
}
Etape 9 : les paragraphes
Pour l'instant les paragraphes occupent 100% de la largeur du conteneur central. Nous allons réduire cela, et demander de centrer les div.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
background-image:url('julia.png');
background-repeat: no-repeat;
background-position: top left;
height: 100px;
line-height:100px;
}
#conteneur{
background-color:#ffffff;
margin-top: 30px;
padding-top:10px;
padding-bottom:10px;
width: 70%;
border-radius:5px;
}
.paragraphe{
width:50%;
margin:auto;
}
Pour les titres (balises h2), nous allons ajouter à gauche une image de fond (à télécharger ci-dessous),
et donc devoir décaler l'écriture pour que le texte ne se superpose pas à l'image.
Pour que le texte soit centré verticalement, nous allons définir la hauteur de la balise et donner la même valeur pour la hauteur de ligne.
vign_2.jpg
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
background-image:url('julia.png');
background-repeat: no-repeat;
background-position: top left;
height: 100px;
line-height:100px;
}
#conteneur{
background-color:#ffffff;
margin-top: 30px;
padding-top:10px;
padding-bottom:10px;
width: 70%;
border-radius:5px;
}
.paragraphe{
width:50%;
margin:auto;
}
h2{
background-image:url('vign_2.jpg');
background-repeat: no-repeat;
background-position: top left;
padding-left:50px;
height:50px;
line-height:50px;
}
Etape 10 : ajout d'une image
Pour terminer, nous allons ajouter une image (à télécharger ci-dessous), dans le corps du fichier html.
fractale.jpg
Le fichier : page_web.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="mon_style.css" /> <title>Pas à Pas</title> </head> <body> <div id="banniere"> Harum trium sententiarum </div> <div id="conteneur"> <div class="paragraphe"> <h2>Quam multa enim</h2> Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta </div> <div class="paragraphe"> <h2>Quae in nostris rebus</h2><img id="img_01" src="fractale.jpg" />
Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant. </div> <div class="paragraphe"> <h2>sic in amicum sit animatus</h2> Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur. </div> </div> </body> </html>
Et il nous reste à définir le style pour cette image dans le fichier css.
Nous allons définir sa taille, et à la place de demander à la centrer, nous allons définir une position flottante à droite, ce qui aura pour effet que l'image sera placée à droite, et que le texte s'y adaptera.
Et pour des raisons esthétiques, nous allons ajouter une bordure arrondie autour de cette image.
Le fichier : mon_style.css
body{
background-image:url('fractale.png');
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
#banniere{
background-color:#ffffff;
width:70%;
text-align:center;
font-size:2em;
padding-top:10px;
padding-bottom:10px;
font-weight:bold;
text-shadow: 2px 3px 2px #929292;
border-radius:5px;
background-image:url('julia.png');
background-repeat: no-repeat;
background-position: top left;
height: 100px;
line-height:100px;
}
#conteneur{
background-color:#ffffff;
margin-top: 30px;
padding-top:10px;
padding-bottom:10px;
width: 70%;
border-radius:5px;
}
.paragraphe{
width:50%;
margin:auto;
}
h2{
background-image:url('vign_2.jpg');
background-repeat: no-repeat;
background-position: top left;
padding-left:50px;
height:50px;
line-height:50px;
}
#img_01{
width:220px;
float:right;
border:10px solid #03045e;
border-radius:10px;
}
Challenge 5
Créer une page web comportant la structure suivante :- Une bannière,
- Une image de fond,
- Un menu,
- Un texte comportant plusieurs paragraphe.