Etape 2 : Étudier la page web

Tout d'abord vous allez retrouver le code HTML de cette page. Pour cela vous allez faire un clic droit sur la page, puis choisissez " code source de la page". Vous devez alors avoir accès au code ci-dessous.

1
<!DOCTYPE html>
2
<html lang="fr_FR">
3
<head>
4
	<title>Mon site</title>
5
	<meta charset="utf-9"/>
6
	<meta name="description" content="Descriptif de ma page en mots clés ">
7
	<link rel="stylesheet" type="text/css" href="style.css">
8
</head>
9
<body>		<!-- corps de la page -->
10
	<h1>Titre de la page</h1>
11
	<h2>Un titre plus petit: liste non numérotée </h2>
12
	<ul>	<!-- liste non numérotée -->
13
		<li>Objet 1 de la liste</li>
14
		<li>Objet 2 de la liste</li>
15
		<li>Objet 3 de la liste</li>
16
	</ul>
17
	<h2>Liste numérotée </h2>
18
	<ol>	<!-- liste numérotée -->
19
		<li>Objet A de la liste</li>
20
		<li>Objet B de la liste</li>
21
		<li>Objet C de la liste</li>
22
	</ol>
23
	<h4>Un titre encore plus petit</h4>
24
	<p>Ceci est un paragraphe contenant du texte...</p>
25
	<p>Ceci est un autre paragraphe contenant du texte... avec </br> retour à la ligne</p>
26
	<img src="image1.png" alt="Lorient" width="100%">
27
	<p>Un petit texte...</p>
28
	<footer>
29
		<p style="text-align:center">Mon prénom et Nom - Projet SNT 2019/2020 - Titre de la page </p>
30
	</footer>
31
</body>
32
</html>

Sur le site https://jsfiddle.net/ , copier/coller ce code dans la fenêtre HTML.

Vous allez maintenant retrouver le code CSS de cette page. Pour cela à la ligne 7 de ce code HTML cliquez sur le lien hypertexte href="style.css .

Sur le site https://jsfiddle.net/ , copier/coller ce code dans la fenêtre CSS. Ensuite cliquez sur RUN pour retrouver la page Web dans la fenêtre résultat.

Ainsi vous pourrez modifier le code HTML ou CSS sans modifier vos fichiers originaux.

En repérant les différentes balises, vous allez comprendre à quoi elles correspondent.

Commencer par les balises en <h_> et </h_> : Ces balises correspondent aux titres, sous titres, ... . Entre chaque balise se trouve le texte concerné.

Modifier quelques titres pour mieux comprendre.

De la même manière, cherchez à quoi peuvent servir les balises suivantes :

  • <li> et </li>

  • <ul> et </ul>

  • <ol> et </ol>

  • <li> et </li>

  • <footer>et </footer>

  • </br> attention celle-ci a une particularité.

[doc]

Compléter le document Word ci-dessus.

Faites une sauvegarde dans votre dossier.

Modifions maintenant le code CSS. Dans ce code on retrouve toutes les balises vues précédemment. A chaque balise est associée plusieurs caractéristiques de style tel que vous l'avez vu dans le cours.

Modifier quelques caractéristiques de style pour mieux comprendre. Attention ne modifier pas les balises en rouge ainsi que les instructions en vert.

Pour modifier les couleurs et choisir le bon codage vous pourrez utiliser ce nuancier [pdf]