Activité 2 – Une page web

Vous allez toujours utiliser le même site web que dans l’activité 1 :  http://jsfiddle.net/ .

À faire vous-même 1

À l’aide de http://jsfiddle.net/

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<h1>Hello World! Ceci est un titre</h1>
		<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
	</body>
</html>
			

Testez votre code.

---

Dans l’exemple vous reconnaissez le code se trouvant entre les balises <body> :

<body>
……
</body>

Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtes inconnues. Passons-les en revue :

La première ligne (<!doctype html>) permet d’indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.

La balise <html> est obligatoire, l’attribut lang= »fr » permet d’indiquer au navigateur que nous utiliserons le français pour écrire notre page.

Les balises <head>…</head> délimitent ce que l’on appelle l’en-tête. L’en-tête contient, dans notre exemple, 2 balises : la balise <meta charset= »utf-8″> qui permet de définir l’encodage des caractères (utf-8) et la balise <title> qui définit le titre de la page (attention ce titre ne s’affiche pas dans le navigateur, ne pas confondre avec la balise <h1>).

À faire vous-même 2

Toujours à l’aide de http://jsfiddle.net/

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :

h1
{
	text-align: center;
	background-color: red;
}
p
{
	font-family: Verdana;
	font-style: italic;
	color: green;
}
			

Pour l’instant notre CSS ne sera pas appliqué à notre page, pour ce faire, il faut modifier notre code HTML en ajoutant une ligne qui va permettre d’associer notre code CSS à notre page.

Modifiez le code HTML avec la ligne suivante <link rel= »stylesheet » href= »style.css »> :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>Hello World! Ceci est un titre</h1>
		<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
	</body>
</html>
			

Testez votre code à l’aide d’un navigateur web.

---

Remarque : dans l’exemple que nous venons de voir, les fichiers « index.html » et « style.css » se trouvent dans le même dossier. Il est souvent utile de placer les fichiers CSS dans un dossier “CSS”. Il faudra alors modifier le code HTML en conséquence :

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

Pour terminer, voici quelques balises très utilisées :

La balise a

<a href="mon_autre_page.html">Cliquez ici pour vous rendre sur mon autre page</a>
			

La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de « voyager » entre les pages d’un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que l’on cherche à atteindre ou l’adresse du site cible (exemple : <a href= »http://www.google.fr »>Cliquez ici pour vous rendre sur google.fr</a>). Entre la balise ouvrante et fermante, on trouve le texte qui s’affichera à l’écran (c’est ce texte qui est souligné et de couleur bleue).La balise peut sans problème se trouver en plein milieu d’un paragraphe.

La balise image

Comme vous devez déjà vous en douter, la balise image sert à insérer des……images :

<img src="mon_image.jpg" alt="avion"/>
			

la balise img est à la fois ouvrante et fermante comme la balise br. Elle possède 2 attributs :

• src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier).
• alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisées par les non-voyants), il faut donc systématiquement renseigner cet attribut.

Les balises form, input et button

Les formulaires sont des éléments importants des sites internet, ils permettent à l’utilisateur de transmettre des informations. Un formulaire devra être délimité par une balise form (même si ce n’est pas une obligation) :

<form>
….
</form>

Il existe différentes balises permettant de construire un formulaire, notamment la balise input. Cette balise possède un attribut type qui lui permet de jouer des rôles très différents.

La balise button nous sera aussi d’une grande utilité.

À faire vous-même 3

Copier le code suivant :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<form>
			<p>voici un champ de texte : <input type="text"/></p>
			<p>voici une checkbox <input type="checkbox"/></p>
			<button>Cliquez ici !</button>
		</form>
	</body>
</html>
			

Testez votre code.

À faire vous-même 4

Copier le code suivant : tenant le code suivant :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<div>div est une balise de type "block"</div>
		<p>la balise p est une autre balise de type block</p>
		<span>En revanche, span est une balise de type "inline"</span>
		<a href="www.google.fr">Et voici une autre balise de type "inline"</a>
		<h1>h1 est bien une balise de type "block"</h1>
		<span>la malheureuse balise span est "obligée" de se placer en dessous</span>
	</body>
</html>
			

Testez ce code

---