exercices en html - jfalycee.free.frjfalycee.free.fr/img/pdf/ex_html.pdf · ex tp web page:1/15...
Post on 01-Nov-2018
220 Views
Preview:
TRANSCRIPT
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: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.
top related