TP 2 Mme ISSAOUI Hadhami

TP 2 Initiation au développement WEB

Objectifs :
L'objectif de cette séance de TP est de :
- Découvrir le langage HTML
- Connaître la structure de base d’un document HTML, manipuler les balises de mise en
forme et manipuler les listes.

Ce TP s’effectuera individuellement. Vous rédigerez des pages HTML qui seront envoyées à
l’enseignant strictement avant la fin de la séance, par courrier électronique exclusivement. Votre
mail devra mentionner votre nom, prénom, classe et numéro du TP.

Tous les fichiers créés devront contenir en haut du fichier, en commentaires, vos nom et prénom.

Le code HTML devra impérativement être conforme au standard HTML5, et les caractères devront
s’afficher correctement quelle que soit la configuration du navigateur. Tout non-respect de ces
consignes donnera lieu à une baisse significative de la note.

La consultation de sites Web externes n’est pas autorisée pendant ce TP à l’exception du validateur
de code HTML du W3C : http: // validator. w3. org/

1. Préparation
Avant toute chose, organisez proprement vos dossiers et fichiers afin de pouvoir facilement
retrouver le travail effectué dans les différentes séances de TPs de l'enseignement Atelier
Développement Web I. Pour cela procédez comme suit :

1. Dans votre répertoire personnel, créez un répertoire [Link]

2. Positionnez vous dans ce répertoire [Link]
3. Créez un répertoire TP2 dans le répertoire [Link]
4. Positionnez vous dans ce répertoire TP2

C'est dans ce répertoire TP2 que vous enregistrerez ensuite tous les travaux effectués au cours de
cette 2ère séance de TP

 Le compte-rendu devra être impérativement rendu par courrier électronique avant la fin
de la séance. Afin d’éviter tout problème en fin de séance, il vous est demandé d’effectuer

1
TP 2 Mme ISSAOUI Hadhami

dès le début de la séance un test d’envoi d’email à l’enseignant. L’objet de votre courriel
sera « [Link] : Test ».

2. Validation et correction de pages HTML

La validation d'une page web est importante. Cela permet d'être sûr que la structure de la page est
correcte et qu'il n'y a pas de fautes, c'est
c'est-à-dire
dire que la syntaxe du langage HTML5 est bien respectée.
Dans ce premier exercice, vous allez effectuer ce travail de vérification sur le code d'un mini site
existant

1. Téléchargez le fichier [Link] et désarchivez son contenu dans votre répertoire TP1. Un
répertoire exercice1 y est créé, ce répertoire contient deux fichiers HTML
([Link] et [Link]
[Link]), ainsi que deux images.
2. Visualisez ces pages dans votre navigateur.
3. Vérifiez que [Link] et [Link] sont valides. Pour cela, vous utiliserez le validateur
HTML5 "nu" du W3C accessible à l'URL [Link]
[Link]

Utilisation du service de validation du W3C.

4. Corrigez le code de ces pages jusqu'à ce qu'elles soient toutes les deux valides.

2
TP 2 Mme ISSAOUI Hadhami

3. Création des premières pages HTML

Exercice 1:
1- Créer un sous-répertoire nommé TP2 sous votre dossier personnel.
2- On se propose de créer une page web pour le texte suivant, sous le nom "[Link]"
dans le répertoire TP2:

La page contient un titre de page et 2 paragraphes et doit avoir les caractéristiques

suivantes:
- Les mots "Internet", "courrier électronique" et "World Wide Web" doivent être en
gras
- Les lettres I et P de "Internet Protocol" doivent être en gras
- Le 1er paragraphe doit être justifié et le 2ème doit être aligné à gauche
- La phrase " Source : Wikipédia: l'encyclopédie libre" doit être en italique et alignée à droite

Exercice 2: Les listes imbriquées

Réaliser la page Web simple illustrée par la copie-écran ci-dessous sous le nom "[Link]"
dans le répertoire TP2:

Les chapitres les plus importants

I. Programmation C
o Concept de base
o Entrées/Sorties
o Tableaux
II. Programmation avancée C
o Pointeurs
o Listes
o Arbres

3
TP 2 Mme ISSAOUI Hadhami

III. HTML
o Documents structurés
o Liens hypertextes
1. Liens internes
2. Liens externes
o Les formulaires
IV. Algorithmique

Exercice 3:
1- Dans TP2, Créer un fichier « [Link] »
2- Diviser votre texte en utilisant la balise <div>
3- Ajouter des paragraphes à votre texte en utilisant la balise <p>

[Link]

<!DOCTYPE html>
<html>
<head>
<title>TATIN DE TOMATES CERISE</title>
</head>
<body>
TATIN DE TOMATES CERISE

<div>
INGRÉDIENTS
<p>Nb de personnes : 6</p>

<p>
1 pâte feuilletée (si possible allégée)
500 g de tomates cerise
6 c. à soupe de vinaigre balsamique
4 c. à soupe de sucre de canne complet
1 gousse d’ail
Quelques feuilles de basilic
Sel & poivre
</p>
</div>

<div>
PRÉPARATION
<p>
Préparation : 20 min Cuisson : 40 min
</p>

<p>
Préchauffez le four à 200°C.
Pelez et pressez l’ail. Lavez les tomates cerise.
Versez dans une poêle antiadhésive le sucre, le vinaigre, le
miel et l’ail. Chauffez à feu vif jusqu’à obtenir un sirop.

4
TP 2 Mme ISSAOUI Hadhami

Ajoutez les tomates cerise, baissez le feu et laissez

confire 10 minutes, en remuant de temps en temps.
Tapissez un moule à tarte de papier de cuisson, et versez-y
le contenu de la poêle. Salez et poivrez.
Déroulez la pâte par-dessus, et rentrez bien les bords à
l’intérieur du moule.
Enfournez. Baissez le four à 180°C et laissez cuire 30 minutes.
À la sortie du four, retournez la tarte sur une assiette.
Servez avec une belle salade, et consommez sans abuser !
</p>
</div>
Tarte au thon, tomates et fromage blanc
</body>
</html>
4- Ajouter une liste non ordonnée pour la partie « les ingrédients » :

1 pâte feuilletée (si possible allégée)

500 g de tomates cerise
6 c. à soupe de vinaigre balsamique
4 c. à soupe de sucre de canne complet
1 gousse d’ail
Quelques feuilles de basilic
Sel & poivre

5- Ajouter une liste ordonnée pour la partie « recette » :

Préchauffez le four à 200°C.

Pelez et pressez l’ail. Lavez les tomates cerise.
Versez dans une poêle antiadhésive le sucre, le vinaigre, le miel
et l’ail. Chauffez à feu vif jusqu’à obtenir un sirop.
Ajoutez les tomates cerise, baissez le feu et laissez confire 10
minutes, en remuant de temps en temps.
Tapissez un moule à tarte de papier de cuisson, et versez-y le
contenu de la poêle. Salez et poivrez.
Déroulez la pâte par-dessus, et rentrez bien les bords à
l’intérieur du moule.
Enfournez. Baissez le four à 180°C et laissez cuire 30 minutes.
À la sortie du four, retournez la tarte sur une assiette.
Servez avec une belle salade, et consommez sans abuser !

6- Mettez le texte «TATIN DE TOMATES CERISE » comme un titre de niveau 1 en utilisant la

balise <h1>.
7- Mettez le texte «INGRÉDIENTS» et «PRÉPARATION» comme des titres de niveau 2 en
utilisant la balise <h2>.
8- Dans TP2, Créer un fichier « [Link] » contenant la recette d’une tarte au Thon et ayant
la même mise en forme que la page «[Link] ».

TARTE AU THON, TOMATES FROMAGE BLANC

INGRÉDIENTS
Nb de personnes : 6
1 pâte brisée
200 g de thon naturel

5
TP 2 Mme ISSAOUI Hadhami

5 tomates
100 g fromage blanc
Moutarde
thym
3 oeufs
sel, poivre

PRÉPARATION
Préparation : 25 min Cuisson : 45 min

Préchauffez votre four à th.6 (180°C).

Faites sortir la pâte brisée du frigo 20 min avant.
Emiettez le thon dans un grand récipient.
Dans un récipient adapté, mélangez ces miettes de thon avec 1 c. à soupe
de moutarde.
Lavez les tomates, coupez-les afin de les épépiner puis coupez-les en
petits dés sur une planche de cuisine.
Faites chauffer une poêle et faites-y cuire les dés de tomates pendant
quelques min. Ajoutez le thym.
Mettez le thon sur la pâte brisée, puis recouvrez-le de tomates et thym
poêlés.
Cassez les oeufs dans un bol et battez-les avec le sel, le poivre et le
fromage blanc.
Arrosez les tomates et le thon avec ce mélange d'oeufs battus.
Enfournez pendant 45 min.
Servez la tarte chaude ou froide dans un plat de service accompagnée
d'une salade verte.

Tatin de tomates cerises

9- Sur le texte « Tarte au thon, tomates et fromage blanc » du fichier

« [Link] », faites un lien relatif vers la page « [Link] » :

<a href=[Link]> Tarte au thon, tomates et fromage blanc</a>

10- Maintenant, de la page « [Link] », faites un lien pour revenir à la page « [Link] ».

Exercice 4: Les liens internes

Il y a des liens sur Terminologies et Les étapes de construction d’un site Web ainsi que les différents
éléments de chaque partie du sommaire.

Lorsque vous cliquez sur un des liens, celui-ci doit vous renvoyer vers le bon emplacement sur la
page.

Écrire le code HTML5 nécessaire pour créer la page web suivante:

Chapitre 1 : INTRODUCTION AU DEVELOPPEMENT WEB

6
TP 2 Mme ISSAOUI Hadhami

Sommaire
1. Terminologies
 Internet
 Le Web ou World Wide Web (WWW)
 Hypertexte
 Un navigateur web (browser)
 Site Web
 Page Web
 L'adresse Web
2. Les étapes de construction d’un site Web
i. La planification
ii. Le développement du contenu
iii. La conception graphique
iv. La programmation
v. L’hébergement et le référencement
vi. La maintenance

1. Terminologies
 Internet : Un système de communication qui permet aux ordinateurs autour du monde de
communiquer et de s'échanger des informations entre eux.
 Le Web ou World Wide Web (toile d’araignée mondiale) ou le WWW : est un système
hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un
navigateur, des pages mises en ligne dans des sites.
 Hypertexte : Ensemble de textes et d’autres documents qui peuvent être consultés à
partir d’un système d’envoi hiérarchisé.
 Un navigateur web (browser) : est un logiciel destiné à la consultation des ressources du
World Wide Web. 3 Terminologies (suite)
 Site Web : un ensemble de pages qui peuvent être consultées en suivant des hyperliens à
l'intérieur du site.
 Page Web : Elle présente une partie d’un site Web. C’est un document électronique écrit
dans un langage informatique appelé HTML (Hypertext Markup Language).
 L'adresse Web d'un site correspond à l'URL (Uniform Resource Locator : localisateur

7
TP 2 Mme ISSAOUI Hadhami

uniforme de ressource) d'une page web, utilisée pour identifier les pages et les sites web.

2. Les étapes de construction d’un site Web

i. La planification
• La première page rencontrée : page d'accueil. Elle présente le contenu du site.
• Un site se compose d'une ou plusieurs pages, ou de quelques pages longues.
• Le haut de la page comprend la bannière.

ii. Le développement du contenu

• La page d'accueil doit attirer les visiteurs sans les submerger d'informations.
• Il faut veiller à une présentation simple et à un texte court.
• En plus, il faut ajouter des illustrations pour transmettre l’image.
• Pas de textes trop longs sur les pages.
• Il faut utiliser uniquement les informations les plus indispensables.
• Si on doit inclure des documents longs, il faut les diviser en sections avec des titres.
• Après, on crée un index ou une table des matières en haut de la page, avec des liens à chaque
section.
• Si on souhaite fournir un accès à de nombreux documents, on doit ajouter une fonction de
recherche.
• Il est préférable d’utiliser des graphiques pour améliorer le site, mais on doit minimiser leur taille
autant que possible.

iii. La conception graphique

• On peut enrichir le site à travers quelques bons graphiques placés sur la page d'accueil.
• Les exigences relatives à :
– la taille des fichiers,
– au choix des couleurs et
– la résolution d'écran sont à prendre en considération.
• La clé de la création de graphiques appropriés est de maintenir une faible taille de fichier. De
cette façon, ils sont chargés rapidement.
• Les graphiques Web sont dans l'un des deux formats suivants :
– JPEG (méthode de compression développée par le Joint Photographic Experts Group, pour
les images photographiques ).

8
TP 2 Mme ISSAOUI Hadhami

– GIF (Graphics Interchange Format, un système de compression développé par Compuserve

pour les graphiques ).
• Pour convertir les graphiques dans un format Web, il faut utiliser un logiciel d'édition d'images
pour créer ou modifier les images.

iv. La programmation
• Une fois le contenu créé, on doit convertir les informations dans une forme lisible sur le Web.
• On peut convertir les fichiers textes au format HTML et les graphiques au format GIF ou JPEG.
• Après on doit chercher un endroit pour héberger le site.

v. L’hébergement et le référencement
• Héberger les sites par un fournisseur de services Internet ou par une société d'hébergement sur
le Web.
• On distingue deux principales catégories d'hébergeurs :
- les hébergeurs gratuits : Ils prêtent gratuitement un espace disque sur un serveur.
- les hébergeurs professionnels : garantit un service de qualité et de sécurité.

• Le référencement est l'ensemble des techniques qui permettent d'inscrire un site dans les
moteurs de recherche ou dans les annuaires.
• Le référencement de sites web s'articule par la mise en place des deux stratégies distinctes et
complémentaires : le référencement naturel et les liens sponsorisés.
• La première stratégie passe par une phase d'indexation (prise en compte) du site par les outils de
recherche, puis une phase de positionnement (se positionner dans les premiers résultats lors de
recherches sur certains mots-clés).
• La seconde stratégie s'apparente à de la gestion de budgets de publicité.

vi. La maintenance
• Tout comme une maison, un site Web nécessite un entretien régulier.
• Il ne faut pas commettre l'erreur de penser qu'une fois en ligne, c'est terminé.
• On doit ajouter un nouveau contenu et mettre à jour l'existant.

Exercice 5:
Créer dans une page web les définitions suivantes.

9
TP 2 Mme ISSAOUI Hadhami

La page a les caractéristiques suivantes :

- Le titre de la page est "Lexique d'Internet".

- DNS, FTP, HTML, HTTP, Internet, IP et Lien ou Hyperlien, existant en haut de page, assurent
des liens internes vers les définitions correspondantes.

- Le lien "Internet : le réseau des réseaux" pointe vers une page de nom "[Link]"
existant dans le dossier TP2.

- Le lien "API Guide" pointe sur l'URL: [Link]

- L'image de contact est sensible au clic et elle permet d'envoyer un e-mail à l'adresse
"contact@[Link]"

10