HTML. 3 septembre 2014

Transcription

1 OCI 3 septembre 2014 HTML Exercice 1 Enregistrer le code source minimal d une page HTML. Ouvrir le fichier à la fois dans un éditeur de texte et dans un navigateur. Observer l effet de la modification du contenu de la balise <title></title> en actualisant la page ouverte dans le navigateur. Faire cette manipulation dans plusieurs navigateurs. Exercice 2 À partir d un fichier HTML minimal, créer la page ci-dessous : Il convient d utiliser les balises suivantes : <h1></h1>, <h2></h2>, <h3></h3> et <p></p>. 1

2 OCI 3 septembre 2014 Exercice 3 Modifier le code source de la solution de l exercice précédent pour obtenir la page ci-dessous : Il convient d utiliser les balises suivantes : </br>, <em></em>, <strong></strong> et <mark></mark>. 2

3 Exercice 4 Écrire le code source de la page représentée ci-dessous : Il convient d utiliser les balises <ul></ul>, <ol></ol> et <li></li>. Exercice 5 Créer un dossier dont le nom est du type site_oci_nomdefamille, en remplaçant nomdefamille par le vôtre. Dans ce dossier, créer un sous-dossier solutions contenant les quatre fichiers html dans lesquels se trouve le code source de vos solutions des quatre premiers exercices. Au même niveau, créer un fichier index.html en s inspirant de la page ci-dessous : Il convient d utiliser la balise <a href="..."></a>. 3

4 Exercice 6 Créer le fichier texte actionhumaine.html à partir d un document HTML de base. À l aide des balises adéquates et d un certain nombres de copier-coller, mettre en forme le texte du fichier actionhumaine.txt dans le fichier actionhumaine.html. a) Ajouter à cette page ouèbe un lien sur la page de Wikipédia consacrée à Ludwig von Mises et un lien sur le site des Presses Universitaires de France. b) Établir les liens qui permettent, d une part, d accéder aux deux notes de bas de document et, d autre part, de remonter à l emplacement de ces notes dans le texte. c) En haut du document, créer une table des matière permettant d accéder au début de chaque paragraphe. Faire en sorte de pouvoir remonter à l emplacement correspondant dans la table des matières en cliquant sur l un quelconque des titres de paragraphe. Exercice 7 En consultant la page ouèbe 3OCI_7.html et en cliquant les liens auxquels on peut accéder, deviner la structure du répertoire dans lequel se trouve ce fichier. On s intéresse à la structure des dossiers adjacents au fichier 3OCI_7.html et à tous les éventuels sous-dossiers. Créer un «site» selon l arborescence ci-dessous, ayant comme propriété que l on peut accéder à toutes les pages du site depuis une «feuille» quelconque de l arborescence. On peut de plus parcourir l arbre de la racine aux feuilles. 4

5 Exercice 8 Créer une page ouèbe basique qui s appelle 3OCI_8.html. On trouve sur cette page une liste non-ordonnée de liens qui permet a) d accéder directement aux notes du premier paragraphe du livre de Ludwig von Mises, sur la page de l exercice 6 ; b) d accéder au site en affichant le texte «Rien que du bon 98%, sel 2%...» dans une infobulle ; c) d ouvrir une nouvelle fenêtre sur la première page du tutoriel Java du site du zéro ; d) d envoyer un courriel au rédacteur de l exercice ; e) de télécharger un fichier zip qui contient tous les fichiers html des exercices 3 à 6. Exercice 9 Créer la page New_York.html en y insérant l image Flat-Iron-Building.jpeg. Les images se trouvent dans le dossier images_ny. Ajouter l infobulle avec le texte Flat Iron Building. Exercice 10 Compléter la page New_York.html en insérant les trois images Manhattan-Skyline.jpeg, Statue-of-Liberty.jpeg et Times-Square.jpeg. Pour chaque image créer une infobulle. Exercice 11 A l aide du logiciel Gimp (ou tout autre logiciel de traitement d images), créer pour chaque image une miniature correspondante. Créer un dossier _miniatures dans le dossier images_ny ; placer ces miniatures dans ce nouveau dossier. 5

6 Exercice 12 Créer la page New_York_Mini.html en utilisant cette fois-ci les miniatures. Les miniatures sont cliquables et renvoient aux images en taille originale. Exercice 13 Placer dans la balise <a> l attribut target avec la valeur _blank (target="_blank"). Que se passe-t-il? Exercice 14 Utiliser les balises <figure> et <figcaption> pour obtenir la nouvelle page html. Exercice 15 A l aide du logiciel Gimp transformer l image i-love-new-york.png au format 32 x 32 pixels et la nommer favicon.png. Ensuite, insérer dans l en-tête l instruction <link rel="icon" type="image/png" href="images_ny/favicon.png" />. Exercice 16 Créer la page mon_cv.html sur laquelle figure votre curriculum vitae et y insérer votre photo. 6