I. CRÉER UNE PREMIÈRE PAGE HTML
Ma première page Web
Objectifs
•Identifier certaines baliseshtml.•Observer l’effet d’une feuille de stylecss.
I Créer une première page html
1. Dans votre espace PEDAGO, créez un dossier WEB puis un sous-dossier Page1.
2. Ouvrez l’applicationNotePadde l’ordinateur.
3. Ouvrez un navigateur et allez surtableauxmaths.fr/spipdans SNT puis Web.
4. Copiez/collez le premier code html du TP1 ci-dessous dansNotePadpuis enregistrez-le souspage1.html dans votre dossier Page1.
<!DOCTYPE␣html␣PUBLIC␣"-//W3C//DTD␣HTML␣4.01//EN">
<html>
<head>
␣␣␣␣<title>Ma␣première␣page␣Web</title>
␣␣␣␣<link␣rel="stylesheet"␣type="text/css"␣href="theme.css">
</head>
<body>
<!--␣Contenu␣principal␣-->
<h1>Ma␣première␣page␣Web</h1>
<p>Bienvenue␣sur␣ma␣page␣Web</p>
<p>Il␣lui␣manque␣des␣images,␣des␣couleurs,␣des␣liens␣...␣</p>
<div␣class="bloc1">
␣␣␣␣<p␣class="citation">
␣␣␣␣␣␣␣␣Le␣premier␣qui␣ayant␣enclos␣un␣terrain␣s'avisa␣de␣dire␣:␣ceci␣est␣à␣moi,␣
et␣trouva␣des␣gens␣assez␣simples␣pour␣le␣croire,␣fut␣le␣vrai␣fondateur␣de␣la␣
société␣civile.
␣␣␣␣</p>
␣␣␣␣<p␣class="auteur">
␣␣␣␣Jean-Jacques␣Rousseau
␣␣␣␣<p>
</div>
<div␣class="bloc2">
␣␣␣␣<p␣class="citation">
␣␣␣␣␣␣␣␣Dans␣la␣vie␣on␣ne␣fait␣pas␣ce␣que␣l'on␣veut␣mais␣on␣est␣responsable␣de␣ce
␣que␣l'on␣est.
␣␣␣␣</p>
␣␣␣␣<p␣class="auteur">
␣␣␣␣␣␣␣␣Jean-Paul␣Sartre
␣␣␣␣<p>
</div>
<div␣class="pied">
␣␣␣␣<p>Au␣revoir</p>
</div>
</body>
</html>
5. Une fois enregistré, ouvrez ce fichier avec un navigateur Internet.
Première page Web
II. FEUILLE DE STYLES
6. Dans le code précédent, à quoi correspondent lesbalisessuivantes :
<title> : . . . .
<h1> : . . . .
<p> : . . . .
<html> : . . . .
<body> : . . . . (Modifiez quelques lignes pour comprendre quelques éléments de ce fichier, enregistrez puis appuyez sur F5 dans le navigateur pour rafraîchir la page)
II Feuille de styles
7. Dans un nouveau fichier NotePad, copiez/coller le code ci-dessous puis enregistrez-le sous le nom theme.cssdans le même dossier quepage1.html.
body␣{
␣␣␣␣font-family:␣Georgia;
␣␣␣␣color:␣#00FF99;
␣␣␣␣background-color:␣purple;
}
h1␣{␣␣␣␣text-align:␣center;
␣␣␣␣background-color:␣grey;
}
.bloc1,␣.bloc2␣{
␣␣␣␣width:␣44%;
␣␣␣␣height:␣150px;
␣␣␣␣float:␣left;
␣␣␣␣margin-left:␣4%;
␣␣␣␣font-weight:␣bold;
}
.bloc1␣{
␣␣␣␣background-color:␣grey;
}
.bloc2␣{
␣␣␣␣background-color:␣#0033CC;
}
.auteur␣{
␣␣␣␣font-style:␣italic;
␣␣␣␣text-align:␣right;
}
.pied␣{
␣␣␣␣margin-top:␣200px;
␣␣␣␣background-color:␣grey;
␣␣␣␣text-align:␣center;
}
8. Indiquez ce que fait chaque bloc du fichiertheme.css.
9. Complétez/modifiez cette page Web pour obtenir une page avec 9 citations de votre choix.
Première page Web
