Le WEB : HTML. Formation Systèmes d'information et numérique. Exercices en HTML

Transcription

1 1 ère STI2D TD V1.0 Le WEB : HTML Formation Systèmes d'information et numérique 1) Exercice 1 : Texte simple : Exercices en HTML 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 : Ex TP Web Page:1/15 RC&JFA&JF 2015

2 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:2/15 RC&JFA&JF 2015

3 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:3/15 RC&JFA&JF 2015

4 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:4/15 RC&JFA&JF 2015

5 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:5/15 RC&JFA&JF 2015

6 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:6/15 RC&JFA&JF 2015

7 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:7/15 RC&JFA&JF 2015

8 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:8/15 RC&JFA&JF 2015

9 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 dossier1 fic1.html répertoire racine index.html / \ répertoire dossier2 fic2.html TP Web Page:9/15 RC&JFA&JF 2015

10 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:10/15 RC&JFA&JF 2015

11 18) Exercice 18 : Les Formulaires : Créer une page avec les formulaires ci-dessous. TP Web Page:11/15 RC&JFA&JF 2015

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

13 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:13/15 RC&JFA&JF 2015

14 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:14/15 RC&JFA&JF 2015

15 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. TP Web Page:15/15 RC&JFA&JF 2015