Cours Stage - Langages des pages Web

Création d'une page web

L'énoncé

- Dans cet exercice nous allons nous intéresser à la création d'une page web en HTML.


Question 1

Créer un fichier index.html. Ecrire le code correspondant à la base d'une page web en HTML. Le code doit faire apparaître les balises <!DOCTYPE html>, <html>, <head>, et <body>.

<!DOCTYPE html>

<html>

  <head>

 

  </head>

  <body>

 

  </body>

</html>

N'oubliez pas de rajouter les balises fermantes correspondantes si elles sont nécessaires !

Question 2

On souhaite donner un titre principal à notre page. Où faut-il l'ajouter dans le code ? Modifier le code pour que la page web affiche "Ma Première Page Web".

On ajoute une balise <title> dans le <head> :

<!DOCTYPE html>

<html>

  <head>

    <title>Ma Première Page Web</title>

  </head>

  <body>

 

  </body>

</html>

Le titre ne doit pas s'afficher dans la page mais en haut de celle-ci (voir exemple question 4).

Question 3

La balise <meta charset="utf-8" /> permet d'indiquer l'encodage du fichier html. UTF-8 est une méthode d'encodage de caractères informatique. Il permet d'afficher l’ensemble des caractères du « répertoire universel de caractères codés ».

Où doit-on insérer cette balise ? Modifier votre code pour que la page web soit encodée en UTF-8.

L'en-tête <head> permet de spécifier les informations générales sur la page comme son titre, l'encodage etc.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Ma Première Page Web</title>

  </head>

  <body>

 

  </body>

</html>

Quelle balise permet de spécifier les informations générales d'un document HTML ?

Question 4

On souhaite créer la page suivante :

Notre première page web !

En suivant cet exemple, modifier le code pour que la page affiche les éléments suivants :

  1. un titre de niveau h1,
  2. deux paragraphes,
  3. un lien vers le site des bons profs.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Ma Première Page Web</title>

  </head>

  <body>

    <h1>Bienvenue !</h1>

    <p>Voici mon <strong>premier</strong> site web !</p>

    <p>J'ai créé cette <i>suberbe</i> page dans le cadre d'un exercice du site <a src="https://www.lesbonsprofs.com/">LesBonsProfs</a> !</p>

  </body>

</html>

Pour écrire en gras et en italique, on utilise les balises <strong> et <i>.


Pour faire un lien on utilise la balise <a>. Il faut lui ajouter l'attribut href pour indiquer vers quelle page le lien renvoie.

Question 5

Parmi ces propositions, lesquelles sont correctes ? Justifier la réponse dans les deux cas.

  1. <html><body></body></html>

  2. <html><body></html></body>

  3. <html><body><\body><\html>

a. correcte : la balise <body> est ouverte ET fermée à l'intérieur de la balise <html>.

b. incorrecte : les balises <body> et <html> s'entremêlent.

c. incorrecte : les balises fermantes utilisent des antislash « \ ».

En HTML, les balises doivent être fermées dans le sens inverse de leur ouverture.