Vous êtes sur la page 1sur 4

Matière : Atelier Développement Web et Multimédia 1

Nombre de pages : 4 Classe : 1ère Année LI


Enseignante : Mme Nesrine. H.HAMMOUDA AU: 2020/2021

TP N° 1

Objectifs du TP
Maîtriser les balises nécessaires pour :
- la création de pages html,
- l'organisation du texte, les listes
- la structuration des pages
Visualisation de page dans un navigateur

Outils utilisés

- Utiliser Bloc-notes ou Notepad++


- Un navigateur

Exercice 1 :
Dans cet exercice, on va créer une page Web contenant le plan de cours de programmation
web1.
Etape 1 : Création d'une page Web
1. Lancer l'éditeur de texte Notepad++ et tapez le code suivant:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!-- Partie Visible -->
</body>
</html>

2. Enregistrez la page dans le dossier de travail "mon site" sous le nom "cours.html".
3. Taper le titre de document "Cous Programmation Web" entre les balises <title> </title>,
enregistrer et visualiser la page dans votre navigateur.

1
Etape 2 : Organisation du contenu
4. Diviser le bloc <body> en 3 blocs à l'aide de la balise <div> </div>
<div title="entete"></div>
<div title="contenu"></div>
<div title="piedpage"></div>

Etape 3 : Saisie et organisation du texte


5. Ajouter les retours en ligne selon le besoin
6. Dans le bloc1 : ajouter la ligne suivante "Cours programmation Web 1" en niveau 1.
7. Dans le bloc 2 :
• Mettez le sous-titre "Objectifs" en niveau 2 (<h2>) et en gras (<strong>).
• Saisir le paragraphe suivant : " Développer chez l’apprenant les compétences
adéquates pour planifier et concevoir un site web statique en utilisant les logiciels
appropriés."
• Appliquer la même mise en valeur sur le sous-titre "Plan".
• Mettez les éléments du paragraphe "Plan" dans une liste numérotée (Technologies
web, Structure HTML, Style CSS et Référencement).
• Indiquer le texte étendu des abréviations HTML et CSS en utilisant la balise <abbr>.
• Mettez le sous-titre Terminologies avec la même mis en valeur de 2 sous titres
précédents.
• Ajouter une liste de définition des termes suivants ( Web, HTML, CSS, HTTP, URL,
Navigateur web, Hyperlien).
• Marquer chaque terme à définir.
• Ajouter une ligne horizontale (<hr />) entre les trois parties de ce bloc.
8. Dans le bloc 3 :
• Ajouter les lignes suivantes :
"Département Technologie de l'informatique - ISET Mahdia
Classe : TI1.4 - Tronc commun "
• Mettre le terme "ISET Mahdia" en italique (<i>) et préformaté (<pre>).
• Réduire la taille des caractères du texte "Tronc commun", en utilisant la balise
<small>.
• Ajouter la mention "Source : Wikipedia"
9. Tester le code avec le validateur W3C

2
- Allez à la page : http://validator.w3.org/
- Choisir l'onglet «Validate by file upload» > parcourir >cours.html > Check

NB : Si le code est correct, la mention «This document was successfully checked as


XHTML 1.0 Transitional !» sera affichée, sinon, les erreurs sont repérées, aidez-vous de
ces indications pour corriger ...
10. Les sous titres Objectifs, Plan et Terminologies sont des éléments d'une liste numérotés
( Valeur de départ : 1 et Type = romain).

Exercice 2 :
1. Créer une page nommée "accueil.html" dont la structure est comme suit :

Mon contenu.........
Bienvenue sur le
Présentation site de l'équipe
Equipe TI1.

Contact

@copyright, certains droits réservés Dernière modification 2017-09-11


Figure 1 : page d'accueil de site de l'équipe TI1.....

2. Taper le même code que l'exercice précédent (/3).


3. Inclure les éléments structurantes du HTML5 suivantes entre les balises <body> </body>:
<header></header>
<nav></nav>
<aside></aside>
<footer></footer>
Saisir le contenu du document
4. Contenu de l'en-tête
Insérer le logo HTML5 dans l'en-tête de la page à l'aide de la balise <img />. (voir
annexe).
5. Zone de navigation

3
Insérer dans le contenu de l'élément <nav> une liste des liens hypertextes vers les pages
suivantes respectivement : "Présentation.html", "equipe.html" et "contact.html".
6. Informations complémentaires
Inclure la ligne suivante dans l'élément <aside> : "Bienvenue sur le site de l'équipe
TI1.4 pour HTML5 ".
7. Pied de page
Ajouter les informations suivantes en pied de page comme illustrée dans la figure 1 :
@copyright, certains droits réservés et Dernière modification 2017-09-11

Vous aimerez peut-être aussi