3 – Fichiers HTML et CSS

JSFIDDLE ou CSSDESK sont de beaux outils, mais ils ne peuvent pas être utilisé pour la réalisation d’un vrai site internet (ou d’une vraie application web).

Nous allons créer 2 fichiers : un fichier qui contiendra du HTML (xxxxx.html) et un fichier qui contiendra du CSS (xxxxx.css). Le premier indiquera où trouver le second.

À faire vous même 3.1

À l’aide d’un éditeur de texte (type Notepad++ sur Windows), créer un nouveau fichier.

Sauvegardez-le en précisant son nom, par exemple index.html.

É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>

<!doctype html>

<head>

<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 à l’aide d’un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier index.html

Dans l’exemple du « À faire vous même 3.1 », vous reconnaissez le code se trouvant entre les balises

<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. La balise </html> termine la page web.

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>). Le titre va alors apparaître dans le cadre de la fenêtre du navigateur lorsque votre page web sera lue.

À faire vous même 3.2

Toujours à l’aide d’un éditeur de texte, vous allez créer un fichier qui va contenir le CSS de notre page (par exemple monStyle.css). Compléter ce fichier à l’aide du code suivant :

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

{

text-align: center;

background-color: red;

}

{

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.

Modifier le code HTML précédent en rajoutant la ligne n°6 ci-dessous :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
<link rel="stylesheet" href="monStyle.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>