Matière : Atelier Développement Web et Multimédia 1
Nombre de pages : 4 Classe : 1ère Année TI
Enseignante : Mme. Nesrine B.H.HAMMOUDA AU: 2022-2023
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
