Institut Supérieur des Etudes Technologiques de Sfax

Département Technologies de l’Information

Matière : Atelier développement Web 1

Enseignante: Manel Elloumi Groupe: INFO15
TP 01 HTML – Les balises de bases

Travail demandé
1. Installez notepad++ comme éditeur web
2. Créer le dossier AtelierDevWeb1 puis le dossier TP 01 HTML_Nom-Prénom
3. Ecrire le code nécessaire
4. Compressez le dossier et déposez le dans l’Espace de Dépôt du TP 01

Exercice1
Créez le fichier Ex1.html et introduire le code nécessaire pour avoir :
 Le titre de la page est Exemple1
 2 titres : Les matières et Le contenu
 2 listes
Lancez la page dans un navigateur web. L’affichage sera comme suit :

Le résultat dans le navigateur

Exercice2
Créez une page appelée Ex2.html qui fera apparaître plusieurs mises en forme de paragraphes
et de titres. La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur
chaque partie. Pour cela réactualisez la page dans le navigateur à chaque fois.
Description de la page à créer :
Atelier Développement Web I INFO15

 Le fond de la page sera gris foncé et le texte blanc

 Le titre de la page est «Mise en forme de base »
Description de la 1ère partie :
 Un titre de niveau 1 centré : Première Partie
 Un paragraphe avec le texte suivant en rouge :Je suis le 1 er paragraphe, je suis en
rouge
 Une ligne séparatrice de taille 2 et de couleur rouge
Description de la 2ème partie :
 Un titre de niveau 2 centré : Deuxième Partie
 Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 :
Je suis le 2ème paragraphe en italique
Au centre en gras
En taille 5 et en jaune souligné
 Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire

Description de la 3ème partie :

 Un titre de niveau 3centré : Troisième Partie
 Un paragraphe à droite avec le texte suivant en taille 7 et la police Arial :Je suis le
dernier paragraphe, je suis en taille 7 arial
Exercice3

Créez un répertoire Ex3 puis créez trois pages HTML

 accueil.html
 images.html
 liens.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..."

accueil.html

1. Ajoutez une balise img dans accueil.html faisant référence à l'image

2. Vérifiez que l'image s'affiche bien
3. Ajoutez un peu de texte « Ceci est la page d’accueil » dans la page, le mettre en forme
de votre choix et des liens vers les pages images.html et liens.html

images.html

1. Ajoutez des liens vers accueil.html et liens.html

2. Ajoutez une image (assez grande)en miniature (taille 50x100) et d’y ajouter un lien
qui ouvre l’image dans une nouvelle fenêtre avec sa taille réelle.

2 AU 2023-2024
Atelier Développement Web I INFO15

Exemple :

liens.html

1. Ajoutez des liens vers accueil.html et images.html

2. Ajoutez le texte Mes sites préférés
3. Ajoutez des liens vers vos sites webs préférés

Exercice4

1. Créez le fichier Ex4.html

2. Baliser le nom de la recette avec <h1>……</h1>, liste des ingrédients avec <h2>…</h2>
, et préparation avec <h3>…..</h3>. Terminer chaque phrase avec <br/>
3. Télécharger une photo de crêpes sur intenet
4. Copier cette photo dans votre dossier
5. Afficher la photo en bas de page
6. Chercher un site spécialisé en pâtisserie et ouvrez la page consacrée aux crêpes. Copier le
lien et insérer le sur votre page HTML
7. l’affichage de la page Ex4.html ressemble à la figure suivante :

3 AU 2023-2024
Atelier Développement Web I INFO15

Exercice à rendre pour évaluation

Créez une page HTML

Ajoutez votre nom et votre prénom en titre principal
Ajoutez une photo miniature, sur laquelle on pourra cliquer pour avoir une version agrandie
Ajoutez 3 parties avec un titre secondaire (mon expérience, mes compétences, ma formation).
Chaque partie contient un paragraphe ou une liste à puce.
Vérifiez bien que vous avez les éléments suivants :
 La page HTML est un CV.
 Le titre principal est en <h1>
 Une photo miniature cliquable renvoie sur la même photo agrandie.
 3 sections (mon expérience, mes compétences, ma formation) sont en titre
 Chaque section contient un paragraphe ou une liste à puce.

4 AU 2023-2024