Les pages web

Pour échanger des informations, nous avons appris à réaliser des documents (textuels, multimédia …) à partir de différentes applications bureautiques (LibreOffice Writer, Draw, Impress …). Ces documents sont surtout destinés à une utilisation personnelle ou une impression.

Aujourd'hui, beaucoup d'informations sont partagées à partir de pages Web disponible sur Internet. En plus de savoir utiliser les applications bureautiques, des connaissances sur les pages Web deviennent nécessaires.

Compétence(s)

D 2.4 : Outils numériques pour échanger et communiquer
D 1 - Éducation aux médias et à l’information - Produire, communiquer, partager des informations
PIX 3.2 : Développer des documents multimédia

J’ai acquis la(les) compétence(s) si :

Je sais expliquer ce qu'est une page Web et une feuille de style
J'ai compris le principe des balises et de leurs attributs
Je connais les principales balises d'une page Web

Dans cette séquence, nous allons découvrir ce que sont les pages Web, leur composition et nous produirons une page pour l'afficher dans un navigateur.

Prérequis

Dans les applications bureautiques déjà utilisées, toutes les informations (textes, images …) sont regroupées dans un seul fichier qui ne peut être visualisé qu'avec l'application qui l'a créé (application propriétaire).

Le web a lui été conçu pour le partage d'information. Chaque texte, photo … sont enregistrés dans des fichiers séparés, en format ouvert (lisible par toutes les applications Web) et reliés entre eux grâce à des liens hypertextes. Les différents fichiers sont placées sur le même, ou plusieurs serveur(s) Web.

Internet est un réseau informatique mondial accessible au public. Il est composé de câbles, routeurs, serveurs reliés entre eux et fonctionnant grâce à des protocoles. Il est composé de matériel et de logiciel, pas de contenue.
World Wide Web (la « toile (d’araignée) mondiale »), abrégé www ou Web : C'est un système hypertexte public fonctionnant sur des serveurs spécifiques (serveurs Web) reliées à Internet et pouvant être parcourus grâce à un navigateur. Il regroupe une grande partie des contenus disponibles sur Internet.
Navigateur : Application permettant de consulter et afficher les différentes ressources du Web (documents texte, image, vidéo …) grâce aux liens hypertexte (adresses URL).
Lien hypertexte : Système de renvois cliquable (qui prennent la plupart du temps la forme d'un texte souligné en bleu, parfois d'image de bouton …) ou automatique placé à l’intérieur des pages Web afin de fusionner ou naviguer entre plusieurs documents.

Au début d'Internet, l’accès aux différentes ressources était compliqué et nécessitaient une application spécifique en fonction de leur type de contenu. Le Web a facilité leur utilisation et provoqué le succès d'Internet.

Le Web a été inventé au CERN (Conseil Européen pour la Recherche Nucléaire) en 1989-1990 par :

Tim Berners-Lee inventeur des trois technologies fondatrices : les adresses Web sous forme d'URL, le protocole de communication HTTP, et le langage informatique HTML.
Robert Cailliau inventeur du premier navigateur et à l'origine du passage du Web pans le domaine public.

La page WEB

La page Web est un document textuel qui s'affiche dans un navigateur en fusionnant toutes les ressources indiquées par des liens hypertextes et en prenant la forme définie dans la feuille de style liée.

Une page web <html> est un document textuel dont le contenu est décrit à travers des balises. Elle contient :

l'entête <head>, destinées au navigateur pour afficher correctement le contenu,
le corps <body>, qui comprend le contenu pour le lecteur et sa description pour le navigateur.

Il existe une balise ouvrante et une balise fermante (ex. <balise>Contenu</balise>) décrivant chaque type de contenue (titre, texte, image, lien ..). La balise fermante est la même que l'ouvrante avec une barre oblique au début. Il existe des balises sans contenu (ex. <balise />). Chaque balise et généralement écrite sur une ligne séparée en utilisant des indentations (espaces en début de ligne pour faciliter la lecture).

Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web.

Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu.

Il est souvent utilisé conjointement avec des feuilles de style en cascade (CSS) pour la mise en forme des pages. HTML est inspiré du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

Une balise spéciale permet d'insérer des commentaires qui ne s'affichent pas dans le navigateur.
Une balise peut contenir un ou plusieurs attributs permettant de donner des précisions sur son utilisation.

En HTML5 (version actuelle des pages web) cela donne :

<!doctype html>
<html lang="fr">
  <head>
    ... <!-- Contenu entête -->
  </head>
  <body>
    ... <!-- Contenu corps -->
  </body>
</html>

La 1ere ligne indique un document en HTML5
La 2ème indique le début de la page web et l'attribut lang qu'elle est en langue française
Début de l'entête pour le navigateur
Contenu de l'entête (avec balise commentaire)
Fin de l'entête
Début du corps
Contenu du corps (avec balise commentaire)
Fin du corps
Fin de la page

L'entête

Un entête peut contenir beaucoup d'informations mais ici nous allons nous limiter à 3 balises principales :

  <head>
    <title>Titre de la page dans l'onglet du navigateur</title>
    <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
    <link rel='stylesheet' type='text/css' href='style.css' />
  </head>

title : indique le titre affiché dans l'onglet du navigateur
meta : donne des indications sur la page. l'attribut charset indique le codage des caractères (généralement “UTF-8” en HTML5) [voir le cours sur la numérisation des informations ]
link : indique un lien vers un autre document. L'attribut rel indique qu'il s'agit d'une feuille de style pour la mise en forme et l'attribut href son adresse URL. En l'absence de cette balise, une mise en forme par défaut est utilisée.

Les balises meta et link n'ont pas un contenu affichable tel le titre de la page et n'utilisent pas de balise fermante mais la barre oblique de fin.

Le corps

Nous allons ici aussi nous en tenir aux balises principales :

Balises	Description
<h1>Titre</h1>	Indique un titre de niveau 1 (titre principal). On peut utiliser les niveaux 2 à 6 pour les sous titres
<p>Texte du paragraphe</p>	Contenu d'un paragraphe. Les espaces sont réduits et il n'y a pas de saut de ligne automatique
<br />	Saut de ligne forcé
partie de texte	Permet de modifier la mise en forme d'une partie du texte dans un paragraphe
<img src=“URL” />	Permet d'afficher l'image d'adresse URL (locale au dossier de la page ou distante protocole http)
<cite>Source</cite>	Permet d'indiquer une source documentaire ou un commentaire à afficher dans le navigateur
<a href=“URL”>Nom du lien</a>	Place un lien Internet cliquable vers la ressource d'adresse URL
< div >…< /div >	Permet de découper une page WEB en plusieurs parties

exemple

Code HTML

<!doctype html>
<html lang="fr">
  <head>
    <title>Page sur les capteurs</title>
    <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
    <link rel='stylesheet' type='text/css' href='./style.css' />
  <body>
  <h1>Les capteurs</h1>
  <p>Pour plus d'informations, voir <a href="https://fr.wikipedia.org/wiki/Capteur">la page sur les capteurs</a> de <cite>Wikipédia</cite>.</p>
  <div class="mf1">
    <h2>Le bouton</h2>
    <img src="./bp.jpg" />
    <p>Fourni une <span class="mf2">information logique</span> enclanché ou pas</p>
  </div>
   <div class="mf3">
    <h2>Le potentiomètre</h2>
    <img src="./pot.jpg" />
    <p>Fourni une <span class="mf2">information analogique</span> (valeur électrique de 0 à 10 volts par exemple)</p>
  </div>
</body>
</html>

Rendu dans navigateur avec feuille de style

Pour aller plus loin

Les principales balises utilisées sont :

<html>…</html> : la page web
- <head>…</head> : son entête
  - <title>…</title> : son titre
  - <link rel='stylesheet' … /> : sa feuille de style pour son affichage
- <body>…</body> : son contenu
  - <h1>…</h1> : les titres et sous-titre (h1 à h6) du contenu
  - <p>…</p> : les paragraphes
  - <img src='…' /> : les images
  - <a href='…'>…</a> : les liens hypertextes cliquables
  - < div >…</div> : les blocs de regroupement

Les balises peuvent avoir un contenu ou/et des attributs (ex. class='unstyle').
Elles sont généralement imbriqué en utilisant des indentations comme en programmation.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site