Etape 2 - mise en forme d'une page web

Dans cette étape, vous allez utiliser le site JSFiddle pour comprendre comment la mise en forme d'une page web est réalisée.

  • Ouvrir la page index.html dans un navigateur

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

Un code similaire à celui 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>Première partie avec un titre plus petit </h2>
12
	<p>Ceci est un paragraphe contenant du texte...</p>
13
	<h2>Deuxième partie avec un titre plus petit </h2>
14
	<p>Ceci est un autre paragraphe contenant du texte avec ...</br> retour à la ligne</p>
15
	<h4>Un titre encore plus petit pour présenter une image</h4>
16
	<img src="image1.png" alt="Lorient" width="100%">
17
	<p>Une légende pour l'image</p>
18
	<footer>
19
		<p style="text-align:center">Mon prénom et Nom - Projet SNT 2021/2022 - Titre de la page </p>
20
	</footer>
21
</body>
22
</html>

  • Copier-coller le code ci-dessus dans la fenêtre HTML (haut gauche) de Jsfiddle.

  • Exécuter le code en cliquant sur Run (en haut à gauche) et visualiser le résultat.

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

Sur le DR, expliquer pourquoi la page se trouve affichée sans mise en forme.

Comme vous l'avez exprimé dans votre réponse ci-dessus, la page est affichée sans mise en forme car, dans Jsfiddle, le contenu de la feuille de style n'a pas été précisé.

La procédure ci-dessous vous explique comme récupérer le code CSS et l'insérer dans Jsfiddle pour mettre en forme votre page.

  • Dans le code source de la page index.html qui est affiché dans le navigateur, cliquer droit sur le lien hypertexte href="style.css présent à la ligne 7.

Le code présent dans le fichier style.css apparaît.

  • Copier-coller le code CSS dans la fenêtre CSS (haut droit) du site JSFiddle.

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

Sur le DR, expliquer pourquoi la page se trouve affichée avec sa mise en forme.