L'écriture d'une page Web

Une page Web est constituée de deux éléments distincts : le code HTML[1] pour la structure et la feuille de style CSS pour la présentation.

Remarque

COMMENT EST ECRITE UNE PAGE WEB ?

Le langage HTML

Le langage HTML (HyperText Markup Language) permet de structurer et de mettre en forme les éléments d'une page Web. Une page web peut contenir du texte, du son, des images, des vidéos, des liens et des renvois internes ou externes.

Il s'écrit avec des balises[2] qui fonctionnent toujours par deux : la balise d'ouverture et la balise de fermeture. Les balises se distinguent par leur crochet : <balise d'ouverture > et </ balise de fermeture>.

Un fichier HTML est constitué de deux parties bien distinctes :

  • Head : l'en-tête

  • Body : Le corps

Fondamental

  • Ecrire le contenu de la page HTML tel qu'il s'afficherait sur un navigateur.

  • Compléter la page HTML en ajoutant le titre « La classe de première » au même niveau que « Les Classes de Seconde ».

Le langage CSS

Le langage CSS[3] (Cascading Style Sheets) permet de définir des feuilles de style[4], c'est-à-dire le style graphique d'une page Web (arrière-plan, type et taille des polices de caractères, bordures, etc.).

Fondamental

  • Quel est le nom et la taille de la police de caractère pour les titres de niveau 1 ?

Le couple HTML-CSS

Une page Web est écrite à partir de deux langages de description : le HTML et le CSS. La modification d'un élément de la feuille de style CSS se répercute automatiquement à toutes les pages HTML liées à cette feuille. La feuille de style[4] est liée à une page Web par la balise unique <link rel="stylesheet" href="style.css"> qui se trouve dans l'en-tête du fichier HTML.

Attention

  • A chaque fois que vous voyez cette icône , il y une action à effectuer.

    Vous devez réaliser cette activité afin de pouvoir répondre aux questions finales.

Méthode

En cliquant sur ce lien https://jsfiddle.net/ , vous allez pouvoir vous rendre compte de la fonctionnalité des deux langages.

Pour commencer, cliquez sur le lien "close" afin de réduire le menu bleu.

Vous pouvez remarquer que l'écran se scinde en quatre fenêtres :

Nous utiliserons les deux première et visualiserons le résultat en cliquant sur l’icône RUN (en haut à gauche).

Copiez ce code HTML, et coller le dans la fenêtre HTML.

Attention : Vous devez sélectionner uniquement le code HTML sans les numéros de ligne, pour cela vous pouvez désactiver les numéros de ligne avec les icônes en haut à droite de ce cadre.

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset=”utf-8”>
5
<title>Structure fichier HTML</title>
6
<link href=”style.css” rel=”stylesheet”>
7
</head>
8
<body>
9
<div>
10
<h1 align=”center”>Le Web</h1>
11
<h2>Vous avez des questions à nous poser ?</h2>
12
<p>  Nous sommes à votre écoute : cliquez sur le lien ci-dessous pour accéder
13
au formulaire de contact.
14
</p>
15
<p><strong><a href="formulaire.html">Nous contacter</a></strong></p>
16
</div>
17
</body>
18
</html>

Cliquez sur RUN et vous pourrez visualiser le résultat obtenu avec ce code.

La page contient un TITRE, un SOUS-TITRE,  du texte, et un lien hypertexte. La présentation est brute et ne donne pas envie.

Copiez ce code CSS, et coller le dans la fenêtre CSS.

1
body {
2
background-color: white;
3
font-family: “Open Sans”, sans-serif;
4
padding: 5px 25px;
5
font-size: 18px;
6
margin: 0;
7
color: #684;
8
}
9
10
11
h1 {
12
font-family: “Merriweather”, serif;
13
font-size: 32px;
14
}
15
h2 {
16
font-family: “Merriweather”, serif;
17
font-size: 24px;
18
}
19
.fondbleuclair {
20
background-color: lightblue;
21
}
 Cliquez sur RUN et vous pourrez visualiser le résultat obtenu en ajoutant utilisant un fichier CSS avec le fichier HTML
La page contient le même contenu, cependant la mise en forme du texte est plus agréable : le texte est en couleur et une police de caractère est utilisée.
 Copiez ce code CSS, et coller le dans la fenêtre CSS.
1
body {
2
background-color: dodgerblue;
3
font-family: “Open Sans”, sans-serif;
4
padding: 5px 25px;
5
font-size: 18px;
6
margin: 0;
7
color: #444;
8
}
9
10
 
11
h1 {
12
background-color: yellow;
13
font-family: “Merriweather”, serif;
14
font-size: 48px;
15
}
16
h2 {
17
font-family: “Merriweather”, serif;
18
font-size: 36px;
19
}
20
.fondbleuclair {
21
background-color: lightblue;
22
}
 Cliquez sur RUN et vous pourrez visualiser les modifications obtenues.
Fondamental
  • Quelle différence constatez-vous entre les deux versions du site Web et d'où vient-elle
  • Quel changement aurait-il fallu faire pour afficher le titre Le Web en taille 54 ?
Les liens hypertextes
Un lien hypertexte[6] permet un renvoi à un autre endroit d'une page Web, à une autre page du site ou un autre site. La source d'un hyperlien est généralement un mot ou un groupe de mots, mais peut également être une image. Pour mettre en place ces liens, on utilise le HTML[1].
Un lien hypertexte se code ainsi :
Pour en savoir plus sur le codage des liens hypertexte :  [pdf]
Fondamental
  • Vers quelle page pointe le lien hypertexte « Nous contacter » ?
CONCLUSION.
  • Comment les pages Web sont-elles écrites ?