Etape 2 - etude de la page web

  • Effectuez un clic droit sur la page, puis choisissez " code source de la page" pour faire apparaître le code HTML de la page.

Le code ci-dessous doit apparaître.

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>

  • Copiez-collez le code ci-dessus dans la fenêtre HTML du site JSFiddle.

  • Exécuter le code et visualiser le résultat.

Pour rappel, le site JSFiddle vous permet de modifier le code HTML ou CSS sans modifier vos fichiers originaux.

Sur le DR, expliquer pourquoi le code exécuté est sans mise en forme.

La mise en forme est absente car le contenu de la feuille de style n'a pas été associée dans Jsfiddle. Pour retrouver le code CSS qui assure la mise en forme et qui est associé à la page :

  • Dans le code source de la page affiché dans le navigateur, cliquez sur le lien hypertexte href="style.css présent à la ligne 7.

  • Copiez-collez le code CSS qui apparaît dans la fenêtre CSS du site JSFiddle.

  • Cliquez sur RUN et vérifier que vous retrouvez bien la page Web dans la fenêtre résultat.

Sur le DR, expliquer pourquoi le code exécuté est cette fois bien mis en forme.

  • Repérez les différentes balises présentées dans le document comme par exemple <h_> et </h_> :

Les balises correspondent aux titres, sous titres, ... entre chaque balise se trouve le texte concerné.

  • Modifiez quelques titres pour comprendre en vous appuyant sur le tableau complété à l'AP2 du DR.

Dans le code CSS, on retrouve donc toutes les balises. A chaque balise est associée plusieurs caractéristiques de style tel que décrit ici.

  • Modifiez 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]