Outil de l`Internet - LAMSADE - Université Paris

Transcription

Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
T.P. OUTILS DE L’INTERNET
Le HTML (HyperText Markup Language) est un langage informatique utilisé pour la création
de pages Web. Une page HTML est un simple fichier texte contenant des balises (parfois
appelées marqueurs ou repères ou tags en anglais) permettant de mettre en forme le texte, les
images, etc.
1. Les balises
Une balise est une commande encadrée par le caractère inférieur (<) et le caractère supérieur
(>). Ainsi, une balise s’écrit <balise>
Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies
indifféremment en minuscules ou en majuscules !
Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La
première est appelée balise d'ouverture et la seconde balise de fermeture. La balise de
fermeture inclut une barre oblique (/). Ainsi à la balise d’ouverture <balise> correspond la
balise de fermeture </balise>.
A titre d'exemple, les balises et permettent de mettre en gras le texte qu'elles
encadrent : Ce texte est en gras 
Les balises HTML peuvent parfois être uniques : la balise représente par exemple un
retour à la ligne.
2. Notion d'attribut
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des
propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire
attribut = "valeur". Il est recommandé de mettre la valeur entre guillemets.
Voici un exemple d'attribut pour la balise (balise définissant un paragraphe), permettant
de spécifier que le texte doit être aligné sur la droite :
Exemple de paragraphe
Chaque balise peut comporter un ou plusieurs attributs, séparés par un espace.
3. Structure d’un document HTML
Un document HTML commence par la balise <html> et finit par la balise </html>. Il contient
également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le
contenu de la page. L'en-tête est délimité par les balises <head> et </head>. Le corps est
délimité par les balises <body> et </body>.
Voici par exemple une page HTML minimaliste :
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>
1
DU1 MI2E
2011 - 2012
Pour réaliser les exercices proposés dans ces TP sur le langage HTML, vous allez suivre les
étapes suivantes :
a. création du code Html,
b. visualisation dans un navigateur.
A. Création du code Html
Pour créer du code Html, n’importe quel éditeur de texte peut être utilisé. Vous allez utiliser
un éditeur de texte élémentaire comme le « Text Editor ».
Votre première tâche consistera à enregistrer comme un modèle le document Html minimum :
1. Créer un nouveau dossier et nommer le TPHTML
2. Lancez l’éditeur de texte Text Editor (menu Accessoires, double clic Text Editor)
3. Ecrivez le code Html suivant :
<html>
<head>
<title> Ma page Html </title>
</head>
<body>
Bravo, vous avez réussi
</body>
</html>
4. Dans le menu Fichier, activez l’option Enregistrer sous
5. Sur la fenêtre qui apparaît, déterminer l’emplacement du fichier (Enregistrer dans)
dans le dossier TPHTML que vous venez de créer. Ensuite dans la zone Type,
choisissez l’option Tous ou Tous les fichiers
6. Donnez un nom de fichier avec l’extension .htm, à titre d’exemple mapage.htm
7. Cliquez sur Enregistrer et réduisez (ou minimisez) la fenêtre de Text Editor
B. Visualisation dans un navigateur
Pour visualiser le résultat de votre page vous devez ouvrir votre navigateur (menu
Application, double clic sur Mozilla ou sur Epiphany)
Une fois votre navigateur préféré est lancé, dans le menu Fichier activez l’option Ouvrir un
fichier. Ensuite indiquez l’emplacement du dossier TPHTML où est enregistré votre
document. Cliquez sur le bouton Ouvrir pour confirmer l’affichage du document.
Pour chaque exercice à réaliser, en cas d’erreur, vous réduirez la fenêtre du navigateur, puis
vous rappellerez l’application Text Editor pour y apporter les modifications et les enregistrer.
Après l’avoir réduit, vous rappellerez le navigateur et vous actualiserez la page afin de
visualiser la dernière version du fichier modifié.
2
DU1 MI2E
2011 - 2012
TP 1 : MISE EN FORME DU TEXTE
Niveaux de titres
Le langage HTML définit 6 niveaux de titre, afin de définir une structuration hiérarchique
des paragraphes dans un texte.
La balise est notée <hx> où x est un niveau allant de 1 à 6
Exercice 1.1 : Des titres de toutes les tailles
Présentez dans un document Html les six tailles de titre <hx> disponibles en partant du plus
grand au plus petit
Les balises de style
Les balises de style modifient la typographie du texte. Voici une liste de balises de style
reconnues par la plupart des navigateurs (chacun à sa façon si bien que certains ne font pas
la différence entre ces styles).
Balise
Effet visuel

Met le texte en gras

Met le texte en italique

Commence un nouveau paragraphe
 
Passage à la ligne

Souligne un texte
3
<s>…</s>
Texte barré
<blink>
Texte Clignotant
…
Met le texte en indice
…
Met le texte en exposant
DU1 MI2E
2011 - 2012
Imbrication des balises
Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique
afin de permettre le cumul de leurs propriétés. En contrepartie le chevauchement de balises
n'est pas toléré par le standard HTML. Voici un exemple de texte formaté avec des balises
imbriquées :
Comment ça Marche, encyclopédie informatique libre
L'exemple ci-dessus donne le résultat suivant :
Comment ça Marche, encyclopédie informatique libre
Exercice 1.2 : Texte en gras, italique et souligné
Affichez du texte en gras, en italique et en souligné.
Exercice 1.3 : Un peu de mathématiques
Affichez la formule suivante : (x1-x2)2=(x1+x2)2-4x1x2
Les polices de caractère
Pour spécifier la police de caractères à utiliser pour l'affichage du texte on utilise la balise
 ... .
Pour changer la taille de la police, on utilise l’attribut size :
 … exprimée de façon absolue par un nombre compris entre 1 et 7
ou de façon relative à la taille de la police courante par un incrément signé (allant de -3 à
+3). Il faut rester entre 1 et 7.
4
DU1 MI2E
2011 - 2012
Pour changer la couleur d'affichage du texte, on utilise l’attribut color :
 … pour la notation hexadécimale (base 16, soit de 00 à
FF) ou
 … pour la notation par nom
Pour changer la polices de caractères, on utilise l’attribut face :
 … où x est la liste de noms de polices de caractères séparés par
des virgules. Il est recommandé de spécifier plusieurs polices, dans le cas où la première
police serait indisponible sur l'ordinateur du lecteur.
A titre d’exemple :
 ... 
Exercice 1.4 : Les tailles des caractères en revue
Présentez dans un document Html, les tailles de caractères disponibles avec la balise 
en partant de la plus grande à la plus petite.
Exercice 1.5 : Dégradé de couleur
Présentez en valeur hexadécimale du texte (en gras, taille 6) en bleu clair, en bleu moyen et en
bleu foncé.
5
DU1 MI2E
2011 - 2012
Exercice 1.6 : La foire aux polices
Affichez quelques lignes de texte dans les polices différentes suivantes : Times New Romain,
Arial, Courier et MS Sans Serif.
Commentaires
Il est possible d'ajouter des éléments d'information dans une page Web sans que ceux-ci
soient affichés à l'écran grâce à un jeu de balises spécifique, appelé balises de
commentaires.

Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent
également servir à commenter du code HTML.
Exercice 1.7 : Commentaires
Affichez le texte ci-après en ajoutant en commentaire la mention : "Tout ce qui est écrit ici ne
sera pas affiché."
L’alignement
Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs
répartissent au mieux leur contenu dans la fenêtre. A l'intérieur d'un paragraphe, les espaces,
tabulations et retours chariot comptent pour un seul espace.
La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises 
et . Cette balise accepte n'importe lequel des attributs vus précédemment.
Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise 
L’alignement du texte est réaliser par l’attribut align="type" qui prend les valeurs suivantes :
6
DU1 MI2E
2011 - 2012
Attribut
align
Valeur
left
Effet visuel
Texte aligné à gauche
right
Texte aligné à droite
center
justify
Texte centré
Texte justifié
Les balises servant à indenter le texte sont appelées des conteneurs.
Conteneur
<blockquote> ...
</blockquote>
Effet visuel
Texte indenté
<address> … </address> Pour écrire une adresse
<note> …</note>
Permet de rédiger une note
<fn> … </fn>
Permet de réaliser une note de fin de page
<banner> …</banner>
Fixe un bloc de texte par rapport à la page
<pre> … </pre>
Permet d'écrire un texte
préformatté en conservant les espaces,
les retours à la ligne et les
tabulations.
Exercice 1.8 : L’alignement
Alignez à droite un paragraphe de texte en gras.
Listes et énumérations en HTML
Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML
définit trois types de listes :
1. la liste ordonnée,
2. la liste non ordonnée
3. la liste de définition.
7
DU1 MI2E
2011 - 2012
Voici d'abord un tableau résumé des 3 types de listes :
Type
liste
Liste
ordonnée
de
Exemple de code
Représentation
Les premières villes de France
<ol>
<li>Paris </li>
<li>Lyon </li>
<li>Marseille </li>
</ol>
Les premières villes de France
1. Paris
2. Lyon
3. Marseille
Liste
non Quelques fruits
ordonnée
<ul>
<li>Pommes </li>
<li>Poires </li>
<li>Oranges </li>
</ul>
Quelques fruits



Liste
de <dl>
définition
Quelques définitions de termes
<dt>HTML
<dd>Hypertext Markup Language
<dt>WWW
<dd>World Wide Web
<dt>Navigateur
<dd>Logiciel spécialisé dans
l'interprétation du langage HTML
</dl>
Pommes
Poires
Oranges
Quelques définitions de termes
HTML
Hypertext Markup Language
WWW
World Wide Web
Navigateur
Logiciel
spécialisé
dans
l'interprétation du langage
HTML
Il existe des attributs spécifiques aux listes:
Attribut
start = "x"
(pour les listes
ordonnées)
type = "valeur"
(pour les listes
ordonnées)
Valeur
x
définit le premier numéro
1
numérotation chiffrée (par défaut)
A
numérotation en capitales
a
numérotation en bas de casse
I
numérotation en chiffres romains (I, II, III, IV ...)
i
numérotation en chiffres romains en bas de casse
circle
type="valeur"
(pour les listes
non-ordonnées)
Effet visuel
square
disc
o
puce circulaire

puce carrée

puce en disque
8
DU1 MI2E
2011 - 2012
Exercice 1.9. Listes à puces
Reproduisez la liste à puces, comme ci-après :
Exercice 1.10 : Listes ordonnées
Reproduisez la liste numérotée suivante en respectant bien les différents retraits. Vous
passerez en revue l’attribut "type" de la balise <ol> …</ol>
Exercice 1.11 : Une liste dite de définition
Présentez sous forme de liste de définition, les sortes de listes en Html, comme ci-après :
9
DU1 MI2E
2011 - 2012
Exercice 1.12 : Texte en retrait
Trouvez trois balises différentes pour créer un retrait.
Les séparateurs horizontaux
Le trait horizontal est un outil fort pratique pour structurer le contenu d’une page. On peut
aussi insérer une ligne horizontale grâce à la balise <hr>. Elle comporte les attributs
suivants :
size="x" pour déterminer la hauteur du trait en pixels,
width="x" ou width="x%" pour déterminer la largeur du trait en pixels ou en pourcentage,
algin=" " pour déterminer l’alignement du trait,
color= " " pour déterminer la couleur du trait,
noshade pour créer un trait plein sans effet d’ombrage
Exercice 1.13 : Des lignes, des lignes
Passez en revue la balise de retrait horizontal induit par la balise <hr>, comme ci-après. Le
premier trait est celui par défaut (taille 2), le second comporte l’attribut noshade, le troisième
est de couleur rouge et le dernier a en plus une taille de 5 pixels.
10

Outil de l`Internet - LAMSADE - Université Paris

Transcription

Documents pareils

Langage HTML 5

Fiche BALISES - JCM Distribution

le rallye photo

Roadbook parcours découverte

La balise d`assistance

La Course d`Orientation ou comment joindre nature, sport et réflexion

La Course d`Orientation

J4 la carte flottante

Programme de formation Le language HTML Mise en page