Technologies du Web: HTML

(1)

Technologies du Web: HTML

TP 2 : Structure générale et texte

Objectifs : Dans ce premier TP, les balises de bases (h1,p,br...) ainsi que leurs principaux attributs sont abordés afin que nous soyons tout d'abord capables de structurer nos futures pages.

Le langage HTML permet de créer des pages pouvant être lues par des navigateurs sur le réseau internet.

Tout d’abord il convient de copier le fichier Page1.html

Dans votre répertoire, créez un dossier Internet 2015 puis un sous dossier HTML. Ensuite cliquez sur

« page1.htm».

Vous allez donc modifier le code à gauche, observer les changements à droite et ainsi comprendre progressivement le langage HTML :

• les balises HTML

• les attributs des balises

<HTML>

<head>

<title> mon site personnel à moi</title>

</head>

<body>

Mon site Web

<hr>

<h1>Sommaire</h1>

Ma vie

Mon oeuvre

J'aime

Mes photos

photos de vacances

Photos d'identité

<s>Photos perso</s>

</body>

</H

Code d’un fichier HTML Résultat de l’interprétation du

code par un navigateur : Mozilla, internet explorer…

(2)

Voici le code complet du fichier avec en plus les numéros de ligne :

1 : <HTML>

2 : <head>

3 : <title>mon site personnel à moi</title>

4 : </head>

5 :<body>

6 : Mon site Web

7 : <hr>

8 : <h1>Sommaire</h1>

9 : Ma vie 

10 : Mon oeuvre 

11 : J'aime

12 : 

13 : <blockquote> J'aime pas</blockquote>

14 : Mes photos

15 : Photos de vacances

16 : <hr width="200" size="20" align="center"

17 : color="blue">

18 : 

19 : 

20 : Photos d'identité

21 : 

22 : <s>Photos perso</s>

23 :</body>

24 :</HTML>

1- LES BALISES

Le langage HTML utilise des balises servant à MARQUER le texte présenté : Exemple : la balise (voir ligne6) signifie que l’on veut créer un paragraphe.

Pour découvrir les autres balises, répondez aux questions suivantes : Exemple : question 1.1 : pour répondre à cette question vous devez : - supprimer la ligne 7

- cliquer sur le bouton « Interpréter »

- observer les changements à droite : la ligne horizontale en dessous de Mon site Web disparaît - donc la balise <HR> permet ce créer cette barre horizontale

- cliquez sur Actualiser pour revenir au code initial : la barre réapparaît.

Numéro question

Numéro de ligne

Changement du code Question Réponse

1.1 Ligne 7 Supprimer <HR> A quoi sert la balise <HR> La balise HR permet de créer une barre horizontale

1.2 Ligne 8 Remplacer <H1> par

<H5>

A quoi sert la balise <H5>

1.3 Ligne 9 Supprimez la balise

A quoi sert la balise

1.4 Ligne 13 Supprimez

<BLOCKQUOTE> et

</ BLOCKQUOTE>

A quoi sert la balise

1.5 Ligne 14 Mettre « green » à la place de « red »

A quoi sert la balise

1.6 Ligne 22 A quoi servent les balises

et <S>

(3)

2- LES ATTRIBUTS DES BALISES

Certaines balises ont des attributs c’est à dire des propriétés que l’on peut modifier Numéro

question

Numéro de ligne

Changement du code Question Réponse

2.1 Ligne 15 Remplacer « center » par « right »

A quoi sert l’attribut ALIGN de la balise P

2.2 Ligne 16

et 17

Quels sont les attributs de la balise HR

2.3 Ligne 19 Quels sont les attributs de la

balise FONT

2.4 Quelle est la syntaxe

générale d’une balise HTML ?

3 - AMÉLIORATION DE LA PAGE

La page que vous avez étudiée a des avantages pédagogiques mais elle est moche...

Vous pouvez essayer les balises suivantes pour l’améliorer un peu : • pour le corps du document :

BALISE <BODY>

Attributs : BGCOLOR : couleur de fond du document : blue, green, red, ....

3.1- Changez la couleur du fond : bleue (blue), rouge (red) ou verte (green).

• pour le titre du document : « Mon site Web »

<MARQUEE></MARQUEE> défilement d’un texte à l’écran dont les attributs sont entre autres :

Nom attribut FONCTION VALEURS

BEHAVIOR Contrôle la fluidité du défilement Scroll, slide, alternate

DIRECTION Sens du déroulement Left, right, up, down

BGCOLOR Couleur du fond Blue, green, ...

LOOP Nombre de répétition d’un défilement

complet

Infinite ou une valeur numérique (2,3, ..)

3.2- Faites en sorte que le titre (« Mon site Web ») défile vers la droite, avec un fond blanc.

3.3- Continuez les modifications pour obtenir la présentation du texte suivant :

(4)

Technologies du Web: HTML

TP 3 : GRILLE d’observation : Les tableaux

Objectif :

On va aborder la création de tableaux en HTML. La mise en forme n'est pour le moment qu'effectuée par le biais du HTML (pas de CSS).

4- Les tableaux :

Vous avez découvert les bases d’un langage à balise avec l’utilisation de balises et d’attributs. Vous allez maintenant apprendre l’écriture du code permettant d’obtenir un tableau : ouvrir le fichier « Page2.html ».

Afin de comprendre la structure du code, répondez aux questions suivantes : I. OBSERVATION DU CODE :

I-1 : Listez les attributs de la balise TABLE en précisant leurs rôles ? BALISE TABLE : création d’un tableau :

Remplacer table border ="0" par table border ="10"

ALIGN (center, left ou right) Permet de positionner le tableau sur le document

BORDER

WIDTH

BORDERCOLOR

HEIGHT

I-2 : A quoi sert la balise TD et quels sont ses attributs ? (Remarque : la balise TR définit une LIGNE) BALISE TD :

WIDTH

ALIGN

BGCOLOR

(5)

Allez

Les

Bleus I-3 : Changez les couleurs du tableau 1 :

1ère ligne 1ère colonne : couleur verte, bleue, rouge .... au choix 2ème ligne pour les 3 colonnes : autre couleur

3ème ligne 3ème colonne : autre couleur Vous obtenez un résultat de ce type :

I-4 :

Quelle est la signification de la valeur de l’attribut : #CCFFCC

II. CONCEPTION :

II.1- Rajoutez une ligne au tableau avec votre nom, prénom et classe II.2- Modifiez le code pour obtenir le résultat suivant à l’écran : Synthèse Terminale S Bac

5_- Codage des caractères et HTML

4.1- Ouvrez le fichier suivant à l'aide de votre éditeur de texte (ex_html1.html).

4.2- Entêtes des fichiers HTML <head>

Une des informations donnée dans l'entête est le codage des caractères utilisé pour écrire la page web, grâce à la balise ci-dessous.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Elle indique que le codage de caractères utilisé pour le fichier est de l'UTF-8 dans cet exemple.

Que signifie UTF – 8 ?

………

Importance du codage.

a) Ajoutez la balise de codage donnée précédemment dans le fichier exemple, à l'intérieur de la balise <head>, en première position.

Nom Prénom Mention Moyenne

PAOLO Laurent AB 12 ,5

ROBINSON Cindy Passable 10 ,5

DASILVA José TB 17

(6)

b) Ouvrez le fichier dans votre navigateur. Est-ce que le texte est lisible ? c) Si non, pourquoi et comment faire pour qu'il s'affiche correctement ? Autre exemple :

Ouvrir ce fichier html : http://www.w3schools.com/tags/tryit.asp?=tryhtml_charsets.

Dans le code HTML, changez le "UTF-8" en "ISO-8859-1" et observez ce qu'il se passe lors de l'affichage du fichier dans votre navigateur.

4.3- Correction de fichier HTML.

a) Affichez le fichier ex_html2.html dans votre navigateur. Est-ce que l'affichage semble correct ?

b) Ouvrez le fichier à l'aide de votre éditeur de texte et corrigez les erreurs de syntaxe HTML.

c) Affichez de nouveau le fichier et vérifiez que l'affichage est conforme à ce qui est attendu.

d) Une fois que vous pensez avoir corrigé toutes les erreurs, testez votre fichier à l'aide du validateur du consortium W3C : http://validator.w3.org/

Bilan : Lors de la définition d'une page HTML, il est important de préciser l'encodage des caractères utilisés. À défaut, le navigateur web utilisera un encodage par défaut qui ne correspondra pas nécessairement à l'encodage utilisé pour écrire le fichier.

TRAVAIL :

1) En vous aidant des tableaux des entités HTML, faites en sorte que le texte suivant apparaisse dans votre page, affichée par votre navigateur :

5 € > 4 €

Voir :http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references 2) Créer une page web présentant votre projet. On gardera cette page pour la suite du TP afin de l’améliorer avec des images et des liens hypertextes.

(7)

Objectif : Dans ce TP, nous allons apprendre à manier l'utilisation de liens et d'ancres (liens internes à une même page).

Vous avez découvert les bases d’un langage à balise avec l’utilisation de balises et d’attributs.

Vous allez maintenant apprendre l’écriture du code permettant d’obtenir des liens hypertextes : ouvrir le fichier « Page3.html

»

Les liens permettent de naviguer à l’intérieur d’une page, entre pages ou sites internet.

Quelle différence observez-vous entre le lien fait sur le texte « Remerciement » et le lien fait sur le texte « Voir par-là»

………

« remerciement » reste sur la même page, en descendant juste au bas de page, alors que « voir par-là » est un lien qui change de page.

1 LES ANCRES

Les ancres permettent de naviguer à l’intérieur d’une page HTML. L’ancre est composée de deux éléments : l’ancre de départ (HREF) et l’ancre d’arrivée (NAME).

1.1- Quelle partie du code permet de définir l’ancre (ancre de départ ET ancre d’arrivée) sur le texte « remerciement » ?

………

href permet de créer l'ancre et name permet de montrer ou l'encre doit amener sur le site

1.2- Créez une ancre «date de création» permettant d’aller vers le paragraphe « date de création».

1.3- Créez une ancre permettant de revenir au début de la page et placée à la fin de la page . 2- LES LIENS

Les liens permettent de naviguer entre des pages HTML d’un même site ou de sites différents.

Pour créer des liens, il faut d’abord avoir conçu la structure du site. Dans votre cas, la structure est la suivante :

Technologies du Web: HTML

TP 4 : Lien hypertextes et images

(8)

Les répertoires sont gras et soulignés. Les flèches représentent des liens.

2.1- Quelle est la structure du code définissant le lien vers la page « pagelien.html » dans le répertoire lien1.

………

2.2- La balise IMG permet d’insérer des images dans une page HTML. Exemple :

<img src="images/fleche.gif" alt = "c’est l’image d’une flèche">

Une image peut aussi être un lien, c’est le cas de la flèche, dans le code de la Page3.html.

Remarque : alt = "c’est l’image d’une flèche"> permet d'afficher un texte alternatif

lorsque l'image ne s'affiche pas

Créer une mini page html Pagelien2 dans le répertoire Lien2, contenant une photo (télécharger une photo libre de droit sur internet) .

Ecrire le lien permettant d’aller vers cette page.

2.3- Quelle est la structure du code définissant le lien « retour vers Page3.html » dans la page lien ? Expliquer le sens de «../ »

2. 4 Lien externe : Quelle est la structure du code définissant le lien vers le site du zéro

TP ancres – liens

Page3.html

Images Flèche.gif

Copie.jpeg

Lien 1 Pagelien1.html

Lien 2 Pagelien2.html

(9)

3. Images

Des images peuvent être insérées dans des documents HTML grâce à la balise img:

Connaissez-vous Wikimedia Commons, la médiathèque libre des projets Wikimedia ?

Son logo est le suivant :

Wikimedia Commons est un dépôt de millions d'images que vous pouvez utiliser.

Le logo de Wikimedia Commons est disponible à l'adresse :

http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg 3.1- Ouvrir une page internet qui contient une image.

3.2- Dans votre page présentant votre projet d’ISN, insérer des photos en rapport avec votre lycée ainsi que des photos illustrant votre projet.