Les page web

But et travail à faire

Réaliser un document numérique sous une autre forme qu'une page réalisée grâce à un traitement de texte.
Choisir une femme célèbre et rechercher des informations sur elle.
Le résultat des recherches sera présenté sous la forme d'une page WEB à laquelle sera associé une page de style pour sa mise en forme à l'écran.

Les informations recherchées sont :

Son nom complet ( et surnom ou nom d'artiste)
Sa nationalité et ses dates et lieux de naissance
Une photo libre de droit
Une description des faits importants relatifs à sa célébrité
Un avis personnel sur la personne (le votre)

Sites ressources

Voici une liste non exhaustive pour choisir la personne dont vous allez parler. D'autres sites tel Wikipédia vous permettront d'avoir des informations supplémentaires à son sujet.

Description sommaire

La page WEB

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).

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

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières