Ex TP Web Page:1/15 RC&JFA&JF 2015

1ère STI2D

Le WEB : HTML

TD V1.0

Formation Systèmes d'information et numérique

Exercices en HTML

1) Exercice 1 : Texte simple :

A l’aide de Notepad++, créez une page web Ex1.html qui contient « Hello World !» et qui a comme

titre « Exercice 1 » comme ceci :

2) Exercice 2 : Les titres :

A l’aide de Notepad++, créez une page web Ex2.html qui contient les 6 titres disponibles et qui a

comme titre « Exercice 2 » comme ceci :

TP Web Page:2/15 RC&JFA&JF 2015

3) Exercice 3 : Les paragraphes de texte et le retour à la ligne :

A l’aide de Notepad++, créez une page web Ex3.html qui contient un titre et deux paragraphes qui a

comme titre « Exercice 3 » comme ceci :

4) Exercice 4 : Le formatage du texte :

A l’aide de Notepad++, créez une page web Ex4.html qui contient tous les formatages de texte

possibles et qui a comme titre « Exercice 4 » comme ceci :

TP Web Page:3/15 RC&JFA&JF 2015

5) Exercice 5 : L’alignement :

A l’aide de Notepad++, créez une page web Ex5.html qui contient tous les alignements de texte et

qui a comme titre « Exercice 5 » comme ceci :

6) Exercice 6 : Polices, tailles et couleurs de texte :

A l’aide de Notepad++, créez une page web Ex6.html avec différentes polices, tailles et couleurs de

texte et qui a comme titre « Exercice 6 » comme ceci :

TP Web Page:4/15 RC&JFA&JF 2015

7) Exercice 7 : Les caractères spéciaux :

A l’aide de Notepad++, créez une page web Ex7.html avec différentes caractères spéciaux et qui a

comme titre « Exercice 7 » comme ceci :

8) Exercice 8 : Autres balises de texte :

A l’aide de Notepad++, créez une page web Ex8.html avec différentes utilisations de balises textes et

qui a comme titre « Exercice 8 » comme ceci :

TP Web Page:5/15 RC&JFA&JF 2015

9) Exercice 9 : Les images :

A l’aide de Notepad++, créez une page web Ex9.html avec différentes utilisations de balises textes et

image « zozor » qui a comme titre « Exercice 9 » comme ceci :

TP Web Page:6/15 RC&JFA&JF 2015

10) Exercice 10 : Les listes numérotées :

A l’aide de Notepad++, créez une page web Ex10.html avec différentes utilisations de listes

numérotées et qui a comme titre « Exercice 10 » comme ceci :

TP Web Page:7/15 RC&JFA&JF 2015

11) Exercice 11 : Les listes avec symboles :

A l’aide de Notepad++, créez une page web Ex11.html avec différentes utilisations de listes avec

symboles et qui a comme titre « Exercice 11 » comme ceci :

TP Web Page:8/15 RC&JFA&JF 2015

12) Exercice 12 : Les listes de définitions : Facultatif

A l’aide de Notepad++, créez une page web Ex12.html avec différentes utilisations de listes

définitions et qui a comme titre « Exercice 12 » comme ceci :

13) Exercice 13 : Les séparateurs horizontaux :

A l’aide de Notepad++, créez une page web Ex13.html avec différentes utilisations des séparateurs

horizontaux et qui a comme titre « Exercice 13 » comme ceci :

TP Web Page:9/15 RC&JFA&JF 2015

14) Exercice 14 : Les tableaux :

Reconstituer le tableau suivant :

On n'essaiera pas de tout faire à la fois !

1. Déclarer un tableau de largeur 90% de la largeur de la fenêtre, aligné au centre, avec une bordure

de 1

2. Déclarer un entête au tableau (balise <thead>), constitué d'une ligne de trois colonnes de type header

3. Déclarer un <tbody> 4. Déclarer une première ligne constituée de trois cellules simples

5. Déclarer la deuxième ligne constituée de deux colonnes assemblées, et d'une troisième colonne

6. Aligner le texte à droite dans la première cellule de la ligne

7. Déclarer une troisième "ligne" constituée de deux cellules simples, et d'une cellule assemblant

deux lignes

8. Aligner le texte en bas dans la dernière colonne

9. Déclarer une quatrième ligne constituée de deux cellules simples (expérimenter ce qui se passe

en déclarant une cellule de moins, ou une cellule de plus ; interpréter)

10. Déclarer une cinquième ligne constituée d'une cellule simple et d'une cellule regroupant deux

colonnes et deux lignes

11. Aligner le texte au centre et en haut dans la dernière cellule

12. Compléter le tableau par une dernière ligne. Combien faut-il de cellules ?

Essayer sur le tableau précédent les effets des balises et attributs vus en cours.

15) Exercice 15 : Les ancres ou liens intérieurs :

Créer une page avec un lien pour aller à la fin de la page (ancre)

Créer un lien pour aller au début de la page (ancre)

Créer un lien pour aller vers la page de Google© (lien externe)

16) Exercice 16 : Les liens inter pages :

Créer une structure de répertoires en arbre à deux branches :

répertoire racine index.html

/ \

répertoire dossier1 fic1.html

répertoire dossier2 fic2.html

TP Web Page:10/15 RC&JFA&JF 2015

|

répertoire dossier3 fic3.html

|

répertoire dossier4 fic4.html

racine :

│ - index.html

│

├───dossier1 :

│ │ - fic1.html

│ │

│ └───dossier3 :

│ - fic3.html

│

└───dossier2 :

│ - fic2.html

│

└───dossier4 :

- fic4.html

Créer, pour chaque fichier, une liste non ordonnée de liens relatifs vers chacun des autres

fichiers.

17) Exercice 17 : Les liens vers d’autres protocoles :

Créer une page pour vous envoyer un mail.

TP Web Page:11/15 RC&JFA&JF 2015

18) Exercice 18 : Les Formulaires :

Créer une page avec les formulaires ci-dessous.

TP Web Page:12/15 RC&JFA&JF 2015

TP Web Page:13/15 RC&JFA&JF 2015

19) Synthèse :

A l’aide de Notepad++, créez une page web monfilmprefere.html et qui a comme titre « Mon Film

Préféré » et qui fait la synthèse des balises rencontrées :

Le titre du film en Grosse police centré.

Une image de l’affiche du film

Un résumé du film.

Un tableau avec les acteurs du film

Un tableau avec la fiche technique : réalisateur date de sortie,….

TP Web Page:14/15 RC&JFA&JF 2015

20) Synthèse suite :

A l’aide de Notepad++, modifiez votre page web monfilmprefere.html afin que quand vous cliquez

sur le titre du film, vous ouvrier la page web officielle du film. Puis quand vous cliquiez sur les acteurs,

vous ouvriez la page web de l’acteur.

21) Synthèse Fin :

A l’aide de Notepad++, vous créerez un mini site Web avec un menu et des liens vers 4 pages :

Une page d’accueil,

La page de votre film préféré

Une page sur le réalisateur de votre film préféré,

Une page sur la suite ou le film précédent le vôtre,

Une page vers le teaser de votre film,

…

TP Web Page:15/15 RC&JFA&JF 2015

22) Les cadres : Création d'une navigation standard :

Le but de cet exercice est de créer, à base de cadres, la structure générale du site d'une petite

société de vente en ligne, e-legumes.com. Les contenus et images sont fournis.

1. Téléchargement des fichiers nécessaires

1. Dans votre répertoire de travail, créer un répertoire cadres.

2. Télécharger le fichier fichiers.zip et le décompresser dans le répertoire.

3. Créer un répertoire images.

4. Télécharger le fichier images.zip et le décompresser dans le répertoire images. 2. Création des pages-cadres

1. Ouvrir le fichier index.html dans l'éditeur. Créer la structure de cadres indiquée dans

les commentaires.

2. Ouvrir le fichier contenu.html dans l'éditeur. Créer la structure de cadres indiquée

dans les commentaires.

3. Création de la navigation intra-site

1. Ouvrir le fichier bandeau.html dans l'éditeur. Créer les liens indiqués dans les

commentaires.

2. Ouvrir le fichier contact.html dans l'éditeur. Créer le lien indiqué dans les

commentaires.

3. Ouvrir le fichier promotions.html dans l'éditeur. Créer le lien indiqué dans les

commentaires.

4. Ouvrir le fichier menu.html dans l'éditeur. Créer les liens indiqués dans les

commentaires.

5. Ouvrir le fichier produits.html dans l'éditeur. Créer le lien indiqué dans les

commentaires.

4. Tester la navigation dans le site.

5. A propos de navigation, que manque-t-il fondamentalement sur chaque page de contenu ?

Corriger.