Exercices TP-1

  1. Bienvenue aux TP de web - S1
  2. Premiers pas en HTML
    2. Modification du fichier html
    3. Présentation des balises HTML
    4. Ecrire un premier morceau de HTML
    5. Présentation des attributs
    6. Un lien en HTML
    7. Exemples de balises
    8. Mémorisation balises
  3. Validation du HTML
    2. Utilisation du validateur en ligne
    3. Correction de l'erreur
    4. Raccourci validateur : web dev toolbar
  4. Exercice libre : pages en HTML
  5. Interaction client - serveur
    2. Navigateurs
    3. Serveur
    4. Interaction client serveur - exercice
    5. Éléments d'une URL
    6. Chemin d'une URL
    7. Protocole d'un URL
    8. Adresse IP
    9. Adresse IP - 2
  6. HTML : nouveaux éléments et documentation web
    2. Normes HTML
    3. Ressources et documentation sur le web
    4. Liste
    5. Élément d'une liste
    6. Tableau HTML
    7. Table HTML - correction
    8. Table - balises
  7. Arbre d'éléments dans un Document
    2. Arbre simple
    3. Arbre d'un document complet - correspondaces
    4. Structure d'un document HTML
    5. Structure d'un document - exercice
    6. Fin de l'introduction au HTML!
  8. Premiers pas en CSS
    2. Premier essai de CSS
    3. CSS : propriétés courantes
    4. CSS: couleur d’arrière plan
    5. CSS: bordure
    6. CSS: font-size
    7. CSS: obtenir un résultat simple
    8. Correction
    9. Couleurs RVB
  9. Modèles de boites
    2. Modèles de boites: exemples
    3. CSS: exercice
    4. Correction
  10. Unités et longueurs
    2. Largeur d'un texte en px
    3. Largeur d'un texte en px
    4. Largeur d'une lettre M en px
    5. Largeur d'une lettre M en em
    6. Largeur de l'écran
    7. Taille de
  11. Fin du TP-1

1. Bienvenue aux TP de web - S1

1.1 Bienvenue aux TP de web - S1

Les TP d'informatique / web S1 se déroulent sur ce logiciel appelé « Moodle ».

Vous y trouverez des explications à lire, des questions à répondre et des exercices plus libres.

Prenez le temps de réfléchir par vous même avant de répondre à chaque question. Le but n'est pas de trouver la bonne réponse, mais de comprendre et apprendre. Ne vous contentez de recopier les réponses de vos voisins.

Ces TP ne sont PAS notés. Les notes affichées par le logiciel ne comptent pas dans votre évaluation.

N'hésitez pas à appeler votre enseignant. Il est là pour vous aider.

Moodle permet à chacun d'évoluer à son propre rythme. Chaque TP est prévu pour durer à peu près 4 heures, mais certains avanceront plus ou moins rapidement. Finissez chaque TP avant de passer au suivant, même si ça vous prend plus d'une séance. Si vous sautez des questions, vous risquez de ne plus comprendre.

Ces TP sont prévus pour Firefox sous Linux, pas pour Chrome, ni Windows.

Travaillez connectés si possible (lien « Connexion » en haut à droite de la page). Vous retrouverez plus facilement l'endroit ou vous en étiez à la séance suivante.

2. Premiers pas en HTML

2.1 Premiers pas en HTML

Commençons par un exemple simple.

1. Création d'un fichier html

Dans votre répertoire "public_html" créez un repertoire appelé "tp1".

Dans "tp1" créez un fichier "essai.html" avec le contenu suivant:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Premiers pas</title>    
  </head>
  <body>
    <h1>Bonjour!</h1>
    <p>
      Ma première page en html.<br/>
      <img src="http://moodle.iutv.univ-paris13.fr/img/web/computer-head-bang.gif" alt="informatique"/>
    </p>
  </body>
</html>

2. Visualisation dans le navigateur

Maintenant, tapez l'adresse suivante dans votre navigateur, en remplaçant "12345" par votre numéro d'utilisateur:

http://aquanux/~12345/tp1/essai.html

3. En cas de problème:

Si vous avez un message « Permission non accordée », tapez les commandes suivantes dans votre terminal:

chmod o+x ~
chmod o+rx ~/public_html

N'hésitez pas à demander de l'aide à votre enseignant.

2.2 Modification du fichier html

Changez la phrase « Ma première page en html. » dans le fichier essai.html

Pour voir ces changements dans votre navigateur il faut rafraîchir (actualiser) la page.

Pour rafraîchir la page vous pouvez utiliser une de ces méthodes:

Dans certains cas, ce rafraîchissement ne suffit pas (images en cache), essayez alors:

2.3 Présentation des balises HTML

Balises HTML

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-3.png

A partir de l’exemple qu'on vient de voir, à quoi servent les balises suivantes:

2.4 Ecrire un premier morceau de HTML

Écrivez ci-dessous (en une seule ligne) le HTML nécessaire pour un paragraphe affichant le texte suivant « Ceci est du HTML. »

(on demande juste le paragraphe, pas le fichier HTML en entier)

2.5 Présentation des attributs

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-4.png

Chaque balise peut contenir des attributs associés à des valeurs. Ils fournissent des informations au navigateur sur la balise.

En s'inspirant de cet exemple, et de la question précédente, écrivez ci-dessous (en une seule ligne) le HTML nécessaire pour créer un paragraphe affichant le texte suivant « Ceci est du HTML. ». Cette fois, la balise « p » aura un attribut appelé « id » dont la valeur sera « introduction ».

(on demande juste le paragraphe, pas le fichier HTML en entier)

2.6 Un lien en HTML

Un lien en HTML

Dans l'exemple précédent on a vu comment créer un lien entre deux pages en HTML:

L'URL peut prendre plusieurs formes. Dans les exemples suivants on suppose que le lien se trouve dans un fichier exemple.html

Les formes d'URL les plus courantes sont:

1. chemin relatif vers un fichier, par exemple:

2. une URL complète

Exercice

Écrivez ci-dessous le HTML nécessaire  pour obtenir l'affichage suivant:

« Ceci est un lien vers Google. »

Remarquez que les mots « lien vers » sont un lien vers https://www.google.fr

(ne mettez pas de paragraphe dans votre réponse)

2.7 Exemples de balises

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-5-3.png

Les balises br, hr et img sont auto-fermantes: elles n'ont pas de contenu.

La balise a (lien) a besoin d'un attribut:

La balise img a besoin de deux attributs:

Essayez de retenir ces balises. A la question suivants, on va voir si vous vous en souvenez!

2.8 Mémorisation balises

Est-ce que vous vous souvenez des balises?

3. Validation du HTML

3.1 Validation du HTML

Quand on écrit du HTML, on peut se tromper. Le navigateur réussit souvent à afficher quelque chose d'acceptable, même s'il y a une erreur dans le HTML. C'est pratique, mais alors on ne se rend souvent pas compte des erreurs. D'autres personnes, utilisant d'autres navigateurs auront peut-être des problèmes en affichant votre HTML.

Pour éviter ce genre de problème il est très important de valider le HTML qu'on écrit.


x

3.2 Utilisation du validateur en ligne

Utilisation du validateur en ligne

Ouvrez le lien suivant dans un autre onglet ou fenêtre:
http://validator.w3.org/#validate_by_input
Maintenant, copiez le HTML suivant et validez-le.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Premiers pas</title>    
  </head>
  <body>
    <h1>Bonjour!</h1>
    <p>
      Et voila! Une page en HTML. 
      <img/> 
    </p>
  </body>
</html>

Ce HTML comporte deux erreurs.
Validez cette page puis descendez tout en bas de la page de résultat de validation. Le validateur vous dit ou se trouve le problème.
Essayez de comprendre le problème.
À quel numéro de ligne se trouve le problème?

3.3 Correction de l'erreur

Le validateur vous dit qu'il manque des attributs à une des balises.
Corrigez le HTML de la question précédente et vérifiez que votre HTML corrigé est accepté par le validateur.

3.4 Raccourci validateur : web dev toolbar

La méthode de validation des questions précédentes est fastidieuse (copier coller...).

Plusieurs autres méthodes sont possibles:

Raccourci clavier

La première est de loin la plus simple. Allez sur une de vos pages HTML et essayez-la en appuyant tout simplement sur Ctrl+Maj+A

Menu Web Dev.

La deuxième est plus longue.

Essayez.

4. Exercice libre : pages en HTML

4.1 Exercice libre : pages en HTML

Maintenant, on va mettre tout ça en pratique.

Créez trois pages HTML dans le répertoire ~/public_html/tp1/ :

Utilisez la structure suivante pour chacune des pages:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>...</title>    
  </head>
  <body>
     ....
  </body>
</html>

et ajoutez votre contenu à l'intérieur de <body>...</body>

accueil.html

  1. allez sur http://images.google.fr/ , recherchez une image
  2. enregistrez l'image et déplacez-là dans le même répertoire que accueil.html. Pour enregistrer une image que vous trouvez sur le web, cliquez sur l'image avec le bouton droit et sélectionnez "Enregistrer l'image sous..."
  3. rajoutez une balise img dans accueil.html faisant référence à l'image
  4. vérifiez que l'image s'affiche bien
  5. ajoutez un peu de texte dans la page et des liens vers les pages musique.html et liens.html
  6. essayez toutes les balises qu'on a vues : strong, br, hr
  7. VALIDEZ!

musique.html

  1. ajoutez des liens vers accueil.html et liens.html
  2. ajoutez un peu de texte et une autre image
  3. VALIDEZ!

liens.html

  1. ajoutez des liens vers accueil.html et musique.html
  2. ajoutez un peu de texte
  3. ajoutez des liens vers vos sites webs préférés
  4. VALIDEZ!

Indications:

Les balises a, img, br ne peuvent pas être mises directement dans body. Vous devez les mettre dans un p,h1, h2,...

Pour les URL des images (img) et des liens (a) essayez d'utiliser les noms de fichier (exemple.html) et les URL complètes (http://aquanux/..../exemple.html).

Avertissement: Ce n'est pas parce qu'une image est accessible sur le web qu'il est autorisé de la recopier et de la réutiliser. Il faut forcément l'accord du créateur de l'image (une licence d'utilisation).

5. Interaction client - serveur

5.1 Interaction client - serveur

Que se passe-t-il quand on visite une page web?

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-7-1.png

Explication:

Le « langage » (protocole) utilisé par le navigateur pour parler au serveur s'appelle « http ».

Ce schéma est très important. Au cours de ces séances, on y ajoutera de nouveaux concepts et interactions.

5.2 Navigateurs

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-8-1.png

Un site web doit s'afficher correctement sur les principaux navigateurs (Firefox, Chrome,...) et formats (bureau, smartphone, tablette,...).
C'est un gros travail de vérification.

(statistiques)

5.3 Serveur

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-9-1.png

Le serveur web est un logiciel qui s’exécute sur un ordinateur (aussi appelé serveur).

Ces ordinateurs sont « hébergés » dans des armoires (baies) qui se trouvent dans des bâtiments spécialisés, très sécurisés, appelés « datacenters ».

Les entreprises ou particuliers qui veulent créer un site web peuvent louer un serveur (OVH, online.net,...).

Les très grosses entreprises ont leurs propres datacenters (voir photos).

5.4 Interaction client serveur - exercice

Est-ce que vous avez bien retenu?
x
(interaction très simplifiée pour un fichier HTML simple)

A,B et C sont les « acteurs » de cette « discussion ».
1,2,3,4,5 sont les étapes de la « discussion ».

5.5 Éléments d'une URL

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-10-1.png

Le nom de domaine (site.org) est converti en adresse IP (140.186.70.131) par un système appelé le DNS.

Les adresses IP sont une série de numéros identifiant chaque machine connecté au réseau internet.

Question:

Quel est le nom de domaine que vous utilisez quand vous écrivez des pages HTML dans ces TP à l'IUT ?

5.6 Chemin d'une URL

Quel est le chemin de cette URL ?

https://fr.wikipedia.org/wiki/Tux

5.7 Protocole d'un URL

Quel est le protocole (schéme) de cette URL ?

https://fr.wikipedia.org/wiki/Tux

5.8 Adresse IP

Adresse IP

Votre navigateur convertit automatiquement un nom de domaine en adresse IP.

Pour obtenir une adresse IP à partir d'un nom de domaine, vous pouvez utiliser la commande « ping »

Quelle est l'adresse IP correspondant au nom de domaine « aquanux » ?

(Ctrl-C pour arrêter l'exécution de la commande ping)

5.9 Adresse IP - 2

Quelle est l'adresse IP correspondant au nom de domaine « www.univ-paris13.fr » ?

6. HTML : nouveaux éléments et documentation web

6.1 HTML : nouveaux éléments et documentation web

Dans les pages suivantes on va découvrir d'autres éléments HTML (listes, tables) et apprendre à utiliser la documentation de référence.

6.2 Normes HTML

Le HTML est défini par des normes (spécifications) officielles publiées par un organisme appelé le W3C.
L'évolution des normes HTML est un peu compliquée:
http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-11-2.png
Vous trouverez sur le web des exemples de HTML correspondant à diverses normes.
Dans ces TP on utilisera seulement les éléments de la norme HTML 5 qui sont bien supportés par les navigateurs actuels.
On utilisera une syntaxe proche du XML:

Balise fermantes:
Balises en minuscules:
  • Bon:       <p>Premier paragraphe</p>
  • Mauvais: <P>Premier paragraphe</P>

6.3 Ressources et documentation sur le web

Ressources et documentation sur le web

Vous trouverez énormément d'information et de conseils sur le web. Mais attention! De nombreuses informations sont périmées ou bien ne sont pas fiables. Ceci est particulièrement vrai pour le HTML et la programmation web. Donc, comme toujours ... gardez un esprit critique.

Quelques sites utiles:

6.4 Liste

(Rappel : liens de documentation: http://moodle.iutv.univ-paris13.fr/mod/page/view.php?id=19 )

Cherchez dans la documentation sur le web (ou sur Google) le nom des éléments permettant d'afficher la liste à puce suivante:

HTML:

<XXX>
    <YYY>pomme</YYY>
    <YYY>poire</YYY>
    <YYY>fraise</YYY>
</XXX>

Question:

Que  faut-il écrire à la place de XXX ?

6.5 Élément d'une liste

HTML:

<XXX>
    <YYY>pomme</YYY>
    <YYY>poire</YYY>
    <YYY>fraise</YYY>
</XXX>

Question:

Ensuite, que  faut-il écrire à la place de YYY ?

6.6 Tableau HTML

Liens: http://moodle.iutv.univ-paris13.fr/mod/page/view.php?id=19

Cherchez dans la documentation sur le web comment afficher un tableau en HTML.

Vous aurez besoin des balises suivantes: table, tr, td et th

Écrivez un fichier HTML permettant d'afficher ce qui suit:

6.7 Table HTML - correction

<table>
    <tr><th>Joueur</th><th>Score</th><th>Temps</th></tr>
    <tr><td>Tom   </td><td>140  </td><td>15   </td></tr>
    <tr><td>Ahmed </td><td>210  </td><td>14   </td></tr>
    <tr><td>Joe   </td><td>45   </td><td>16   </td></tr>
    <tr><td>Li    </td><td>190  </td><td>12   </td></tr>
</table>

6.8 Table - balises

Pour résumer, à quoi correspondent les balises suivantes?

7. Arbre d'éléments dans un Document

7.1 Arbre d'éléments dans un Document

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-12.png

Par la suite, on va souvent voir les éléments HTML comme un arbre:
Certains éléments sont contenus dans d'autres éléments.

Vous devez prendre le réflexe de visualiser l'arbre quand vous voyez le HTML.

7.2 Arbre simple

Arbre simple

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-13-1.png

  <body>
    <p>
      Ma première page en html.<br/>
      <img src="photo.jpg" alt="photo"/>
    </p>
    <ul>
        <li>pomme</li>
        <li>fraise</li>
    </ul>
  </body>

Remarque: dans ces schémas, on ne tient pas compte du texte.

7.3 Arbre d'un document complet - correspondaces

Arbre d'un document complet

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-14.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Exemple</title>
  </head>
  <body>
    <h1>Bonjour!</h1>
  </body>
</html>
(<!DOCTYPE> n'est pas dans l'arbre)

7.4 Structure d'un document HTML

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-15.png

Tous les documents HTML ont la même structure 1,2,3,4,5.
Vous devez connaître cette structure.

<head> est l'endroit où on fournit des informations à propos du document qui ne sont pas affichées directement dans le navigateur.
Pour l'instant, on a vu deux exemples:

Il y en a beaucoup d'autres (CSS, javascript, RSS, ...)

7.5 Structure d'un document - exercice

Récapitulons quelques balises que vous avez apprises.

7.6 Fin de l'introduction au HTML!

On a fini cette partie.

Maintenant, vous savez écrire des documents HTML simples. Vous connaissez les balises essentielles.

Mais vous ne savez pas encore comment les mettre en forme.

Dans la partie suivante, on va apprendre à ajouter des couleurs, changer la présentation, les bordures, la taille des textes ... bref, rendre les documents HTML plus jolis!

8. Premiers pas en CSS

8.1 Premiers pas en CSS

Pour mettre en forme (couleurs, décortation...) une page web, on utilise des feuilles de style (CSS : Cascading Style Sheets : feuilles de style en cascade).

Commençons par un exemple:

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-16.png

Regardons cet exemple plus en détail:

http://moodle.iutv.univ-paris13.fr/img/web/webs1-cm-1-17-1.png

8.2 Premier essai de CSS

Premier essai de CSS

  1. Créez un document HTML complet contenant un titre (h1) et un paragraphe.
  2. A l'intérieur du <head> (après title et meta-charset) ajoutez la balise suivante:
    <link href="essai.css" rel="stylesheet" type="text/css" />
  3. Créez un fichier essai.css permettant d'afficher le titre en vert et le paragraphe en rouge.
  4. Essayez, une par une, les propriétés / valeurs suivantes:
    background-color: ....;
    font-size: 9px;
    font-size: 40px;
    border: dashed;
    border: 1px solid red;

8.3 CSS : propriétés courantes

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-18.png

Essayez de retenir les noms de ces propriétés.

8.4 CSS: couleur d’arrière plan

Quel est le nom (juste le nom) de la propriété permettant de changer la couleur d’arrière plan?

8.5 CSS: bordure

Quel est le nom de la propriété permettant de tracer une ligne autour d'un élément ?

8.6 CSS: font-size

Quel est le nom de la propriété permettant de changer la taille du texte ?

8.7 CSS: obtenir un résultat simple

On veut obtenir l'affichage suivant:

en utilisant le HTML suivant.

<!DOCTYPE html>
<html>
  <head>
    <title>Premiers pas CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="essai2.css">
  </head>
  <body>
    <h1>Un essai en CSS</h1>
    <p>
      Ma première page avec du <strong>CSS</strong>.
    </p>
  </body>
</html>

Copiez cet HTML dans un fichier, sans le modifier et écrivez le fichier essai2.css pour obtenir EXACTEMENT l'affichage souhaité.

(Remarque: on va faire ce type d'exercice souvent. Il correspond bien à la démarche utilisée en pratique)

Indication: vous pouvez aussi changer le CSS de l'élément <body>

8.8 Correction


body
{
    background-color: black;
    color: white;
}

h1
{
    font-size: 14px;
}

p
{
    margin-left: 4em;
}

strong
{
    border: 3px solid #afa;
    color: black;
    background-color: white;
}

8.9 Couleurs RVB

Couleurs RVB

Les couleurs dans une feuille de style sont souvent donnés à l'aide de 6 chiffres hexadécimaux (exemple: AAF3B0). Soit deux pour chacune des 3 composantes, Rouge, Vert et Bleu (RVB) ou Red, Green, Blue (RGB) en anglais.

Le mélange de ces couleurs (de lumière) se fait par "synthèse additive" ce qui est très différent de ce que vous faites si vous mélangez de la peinture:
x

On va utiliser un logiciel de dessin (gimp) pour expérimenter avec ces mélanges de couleurs.
Lancez le logiciel gimp (par le menu ou sur la ligne de commande : gimp).

  1. cliquez sur 1 pour ouvrir le sélectionneur de couleurs
  2. changez les couleurs en regardant les valeurs RVB dans 2
  3. remarquez les valeurs en hexadécimal affichez dans 3
    - prenez le temps d'expérimenter avec de nombreuses couleurs pour bien sentir comment se font les mélanges
  4. essayez ensuite d'autres manières de choisir vos couleurs avec les différents onglets dans 4
  5. Répondez au questions ci-dessous


x

9. Modèles de boites

9.1 Modèles de boites

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-19.png

Le modèle de boîtes est très important pour la mise en page CSS. Essayez de bien mémoriser ce schéma.

Les espacements (margin, padding) et les bordures peuvent être définis dans différentes directions. Par exemple:

margin-left: 20px;
padding-top: 10px;
border-bottom: 2px solid black;

On peut aussi imposer la taille de certaines boites:

width: 300px;
height: 200px;

9.2 Modèles de boites: exemples

Rappel:

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-19.png

Exercice

Dans ces exemples on utilise le HTML suivant:

<p>bla bla bla bla bla bla </p>
<h3>bla bla bla bla bla bla</h3>
<p>bla bla bla bla bla bla </p>

et le CSS suivant:

p
{
    margin: 0;
}

h3
{
    background-color: #eff;
    margin: 0;
    border: 2px solid red;
}

(remarquez le "margin: 0;" qui enlève la marge que les éléments p et h3 ont par défaut)

Ensuite, on va voir plusieurs cas où on ajoute à h3 uniquement une propriété parmi les suivantes: margin, padding, border, width ou height.
A vous de trouver laquelle a été ajoutée... (répondez- ci-dessous)

http://moodle.iutv.univ-paris13.fr/img/web/boxes.png

9.3 CSS: exercice

On veut obtenir l'affichage suivant:

en utilisant le HTML suivant.

<!DOCTYPE html>
<html>
  <head>
    <title>Premiers pas CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="essai3.css">
  </head>
  <body>
    <h1>Un essai avec des styles</h1>
    <h2>Titre de la 1ere section</h2>
    <p>bla bla bla bla bla</p>
    <h2>Titre de la 2eme section</h2>
    <p>bli bli bli bli bli</p>
    <h2>Titre de la 3eme section</h2>
    <p>Qu'est qu'on s'amuse!</p>
    <h2>Titre de la 4eme section</h2>
    <p>abc def ghi jkl mno</p>
  </body>
</html>

Copiez cet HTML dans un fichier, sans le modifier et écrivez le fichier essai3.css pour obtenir EXACTEMENT l'affichage souhaité.

Indications:

Faites particulièrement attention aux espacements (padding, margin).

Les éléments "block" (h1,h2,p,...) couvrent, par défaut, une ligne horizontale entière. Par défaut, ça ne se voit pas, mais ça devient visible quant vous ajoutez une bordure. Pour les titres h2, imposez une largeur (width) de 20em (20 fois la taille d'une lettre "M").

Rappel:

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-19.png

9.4 Correction


h1
{
    color : white;
    background-color: gray;
    padding: .5em;
}

h2
{
    color : red;
    border: 3px solid red;
    margin-left: 2em;
    width: 20em;
}

p
{
    margin-left: 4em;
}

10. Unités et longueurs

10.1 Unités et longueurs

http://moodle.iutv.univ-paris13.fr/img/web/webs1-tp-1-18.png

Les mesures de longueur / distance sont très utilisées en CSS.

Les unités les plus utilisées sont : "px" "em" et "%"

Par exemple:

« width: 30px; » veut dire « largeur = 30 pixels. »

« width: 3em; » veut dire « largeur = 3 fois la largeur d'une lettre M majuscule. »

« width: 50%; » veut dire « largeur = la moitié de la largeur du parent. »

« margin-left: 1em; » veut dire « ajouter une marge à gauche de la même largeur qu'une lettre M majuscule »


C'est important de bien "sentir" les longueurs.
Quand vous voulez ajuster une mise en page vous devez avoir une idée de combien de "px" ou de "em" vous voulez déplacer élément.

Dans les pages suivantes, on va faire quelques exercices pour s'habituer.

10.2 Largeur d'un texte en px


Créez les deux fichiers suivants :


essai-longueurs.html :

<!DOCTYPE html>
<html>
  <head>
    <title>Longueurs</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="essai-longueurs.css">
  </head>
  <body>
    <p>
      Bonjour !
    </p>
  </body>
</html>

essai-longueurs.css :

body
{
	font-size: 14px;
}

p
{
	width: 50px;
	border: 1px solid red;
	white-space: nowrap; /* evite le passage à la ligne */
}

Visualisez la page dans le navigateur et ouvrez le fichier essai-longueurs.css dans votre éditeur de texte.

Dans ce fichier, ajustez la largeur (width) du paragraphe pour qu'il soit exactement de la taille du texte "Bonjour !"

Combien de pixels mesure "Bonjour !" ?

10.3 Largeur d'un texte en px

En reprenant l'essai précédent, quelle est la largeur de "Bonjour !" en unités "em" ?

10.4 Largeur d'une lettre M en px

En reprenant l'essai précédent, quelle est la largeur de "M" en unités "px" ?

10.5 Largeur d'une lettre M en em

En reprenant l'essai précédent, quelle est la largeur de "M" en unités "em" ?

10.6 Largeur de l'écran

Quelle est approximativement la largeur en px de votre écran à l'IUT ?

10.7 Taille de

Essayez d'estimer la taille verticale, en "px", de la boite ci-dessous où vous tapez votre réponse.

11. Fin du TP-1

11.1 Fin du TP-1

Félicitations, vous avez fini le premier TP!

Maintenant, vous connaissez les bases du HTML et du CSS.

Au TP suivant, on va approfondir ces connaissances.