Les balises html
Dans votre éditeur taper le texte ci-dessous, enregistrer votre programme dans le répertoire choisi en le nommant test_01.html. Ouvrir ensuite ce fichier avec un navigateur web.
Voici mon super site !
Quelle joie !
Le résultat qui apparaît correspond aux caractères enregistrés mais sans passage à la ligne et sans aucun formatage.
Pour mieux organiser ce que l'on voit, il va falloir ajouter des instructions « codées » dans notre fichier test_01.html.
Remplacer le contenu du fichier précédent par ce qui suit et observer le résultat dans votre navigateur en rechargeant la page.
<!DOCTYPE html>
<html>
<head>
Mon super premier fichier html
</head>
<body>
Voici mon super site !
Quelle joie !
</body>
</html>
Chaque instruction entre les caractères < et > s'appelle une balise, et toutes ont un effet sur la structure de la page web. Nous allons apprendre le fonctionnement des plus communes dans ce tutoriel.
La zone de saisie ci-dessous simule l'utilisation d'un éditeur, et « l'écran » en dessous simule le résultat dans un navigateur. Cliquer sur « Exécuter » pour afficher le résultat du code.
Modifier ensuite le texte entre les balises body et insérer au milieu de celui-ci la balise <br />. Observer le résultat en cliquant sur « Exécuter ».
body{
background-color:lightblue;
}
Changer le texte ici !
Le CSS
On aimerait que le texte du fichier de l'exercice 1 soit écrit en rouge.
Voici trois méthodes pour faire cela. Nous verrons ensuite laquelle est la meilleure.
Dans la première, on modifie l'attribut css couleur du bloc <p>.
<!DOCTYPE html>
<html>
<head>
Mon super premier fichier html
</head>
<body>
Voici mon super site !
Quelle joie !
</body>
</html>
Pour la deuxième, on annonce le changement de couleur dans la partie <head> de notre document.
<!DOCTYPE html>
<html>
<head>
Mon super premier fichier html
</head>
<body>
Voici mon super site !
Quelle joie !
</body>
</html>
Dans la troisième méthode on se sert d'un fichier externe styles.css, on doit le signaler dans le <head> du document et on crée ensuite ce nouveau fichier (on veillera à l'enregistrer dans le même répertoire que test_01.html.
Nom du fichier : test_01.html
<!DOCTYPE html>
<html>
<head>
Mon super premier fichier html
</head>
<body>
Voici mon super site !
Quelle joie !
</body>
</html>
Nom du fichier : styles.css
p{
color:#ff0000;
}
On souhaite maintenant écrire un paragraphe en rouge, l'autre, en blanc sur fond noir, et le troisième de la même manière que le premier.
Modifier vos fichiers avec les codes ci-dessous :
Nom du fichier : test_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<title>Mon super premier fichier html</title>
</head>
<body>
<p class="rouge">
Voici mon super site !
<br />
Quelle joie !
</p>
<p class="noir">
Maintenant un joli texte en blanc sur fond noir.
</p>
<p class="rouge">
Revenons au rouge...
</p>
</body>
</html>
Nom du fichier : styles.css
.rouge{
color:#ff0000;
}
.noir{
color:#ffffff;
background-color: #000000;
}
Compléter le code ci-dessous pour que la couleur de fond de la page soit rose, que la couleur d'écriture du premier paragraphe soit blanche, et du deuxième bleue.
body{
background-color: ;
}
.para1{
color: black;
}