Formation Web : Séance 2

Cette formation est assurée par Oussama Krifa , notre responsable Formation du Club.

La deuxième séance a été une introduction au CSS 3 et a duré environ une heure. Vous trouverez les diapos et le code source de la page développée pendant cette séance en bas de la page.

Pendant la partie pratique nous avons commencé par créer deux nouveaux documents texte, on a appelé le premier page.html (l'extension .html est nécessaire) et le deuxième style.css (l'extension .css spécifie qu'il s'agit d'une feuille de style).
D'abord, nous avons commencé à remplir notre page html par le code standard pour une page web:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>

Ensuite, nous avons ajouté la balise <link> entre <head> et </head> pour spécifier la source du fichier de style pour notre page html

<link rel="stylesheet" href="style.css" />

Maintenant qu'on a préparé le nécessaire, on peut commencer à remplir le corps de notre page web: on va mettre un titre <h1>, un paragraphe <p> dans lequel on a mis une image <img> et un autre paragraphe !
On ajoute l'attribut class pour spécifier un style à une balise bien particulière: le second paragraphe à titre d'exemple, à qui on a affecté la classe "texte"

<h1>Software Freedom Day 2013</h1>
<p>
<img src="SFD_Banner.png" alt="" width="600">
<p class="texte">
La journée du logiciel libre (également connue en anglais sous l’appellation « Software Freedom Day »)
est une manifestation mondiale annuelle instaurée en 2004 dans le but d’initier le public aux logiciels
libres à l’échelle mondiale, par son utilisation personnelle, dans l’éducation, l’économie ou par les
gouvernements.notre club y participe chaque année en préparant des présentations et workshops en relation
avec les actualités du monde du logiciel libre. <br/>
</p>
</p>

Enfin on a mis un dernier paragraphe qui va jouer le rôie du pied de la page, ce dernier lui aussi possède un attribut class de nom "pied"

<p class="pied">
<a href="www.softwarefreedomday.tn">www.softwarefreedomday.tn</a><br />
<a href="www.ossec.tn">www.ossec.tn</a>
</p>

Une fois tout est défini coté html, et qu'on a choisi des noms à nos classes (styles), on peut aller au fichier css pour définir le style de notre page que ce soit pour les balises ou les class.
On ouvre le fichier .css et on ajoute:

/*Toutes les titres h1 en couleur marron*/
h1 {
color: maroon;
}
/*Tous les paragraphes sont écrits en blanc, ont un arrière plan bleu ciel, ont une largeur de 70% de la largeur du navigateur, et une marge automatique, qui implique le centrage du paragraphe.*/
p {
color: white;
background-color: #399ED4;
max-width: 70%;
margin: auto;
}
/*Le body possède une image d'arrière plan, de source "bg.jpg", répétée horizontalement et verticalement, et tout le texte est centré.*/
body {
background-image: url("bg.jpg");
background-repeat: repeat;
text-align: center;
}
/*La classe texte possède une proprieté couleur de valeur blanc.*/
.texte {
color: white;
}
/*La classe pied utilise un texte en gras.*/
.pied {
font-weight: bold;
}
/*Toutes les images ont une marge supérieure et une autre inférieure de 15px chacune*/
img {
margin-top : 15px ;
margin-bottom : 15px;
}

Vous trouverez dans le fichier ci dessous (Pratique-Seance2.zip) le résultat de notre phase pratique.

Si vous avez des questions n'hésitez pas à nous les poser dans notre groupe facebook: https://www.facebook.com/groups/217972881622039/

Diapo deuxième séance

Résultat de la 2ème séance (316Ko)