[PDF] Exercice 1 La structure minimale dune page HTML PDF tp05.pdf

Créez un répertoire tp-html puis un fichier base html dans le répertoire En cliquant sur le texte Retour au début de la page de la seconde balise , vous

Exercice 3 : Un formulaire avec plein de choses Ecrivez le code HTML qui affiche le formulaire ci-dessous : Page 3 Exercice 4 :

[PDF] Cours et exercices corrigés - fnac-staticcom

Le langage HTML 5 PARTIE I attribut Action de l'utilisateur onloadstart Début d' un téléchargement d'un média onmousedown Enfoncement d'un bouton de la

[PDF] Programmation Web TP1 - HTML 1 - Une première - Academie pro

Le code associé en HTML : Exercice 1 : création de votre première page html Préparez votre espace de travail en créant un dossier "public_html_local" dans

[PDF] Exercice 1 La structure minimale dune page HTML

Créez un répertoire tp-html puis un fichier base html dans le répertoire En cliquant sur le texte Retour au début de la page de la seconde balise , vous

[PDF] Examen Final

Exercice 1 : Architecture du Web (10 points) a (1 point) Internet ? d (1 point) Quelle est la spécificité des noms de fichier index html ou index php par rapport

[PDF] Cours et exercices corrigés

HTML 5 et CSS 3 CHAPITRE 9 Couleurs et images de fond 257 La couleur d'avant-plan

[PDF] TP HTML/CSS

(pages web html ou php) Dans ce répertoire, créez un sous-répertoire appelé tp1 dans lequel vous placerez les fichiers de ce TP Exercice 1 - Contenu des

[PDF] Travaux pratiques - Dunod

Présentation des exercices TP_CSS_xx_début html (où xx est le numéro du TP) est le fichier initial à partir duquel travailler, et le À chaque début d'exer-

[PDF] Séance dExercices Dirigés HTML et JavaScript - Cnam

ED HTML et Javascript page 1/6 Séance d'Exercices Dirigés HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante

[PDF] Séance dExercices Dirigés HTML, CGI et PHP - Cnam

Exercice 1 : Formulaire et script CGI Soit le formulaire 1°) Construire la page HTML qui présente ce formulaire La ligne 6 accueille la balise de début PHP

[PDF] exercice html formulaire corrigé

[PDF] exercice html tableau corrigé pdf

[PDF] exercice html tableau pdf

[PDF] exercice identité remarquable factorisation

[PDF] exercice identité remarquable seconde

[PDF] exercice immunité bac science

[PDF] exercice immunologie terminale s

[PDF] exercice imparfait passé simple cm2 ? imprimer

[PDF] exercice incertitude terminale s

[PDF] exercice induction mpsi

[PDF] exercice inégalité de bernoulli

[PDF] exercice infinitif radical terminaison cm2

[PDF] exercice information chiffrée terminale stmg

[PDF] exercice interactif javascript

[PDF] exercice java corrigé debutant

1

ESR 2011-2012

Exercice 1. La structure minimale d'une page HTML

1. Créez un répertoire tp-html puis un fichier base.html dans le répertoire /EnvSystemeReseau/ avec le

contenu suivant (sans les numéros de lignes) :

Ce fichier, qui contient la structure minimale d'une page HTML, vous servira de base de départ à chaque fois que

vous créerez une nouvelle page HTML.

2. Analyse :

| Un document HTML commence et se termine avec les balises et . Ces balises indiquent au navigateur que le document est entièrement composé en HTML. | Tout document HTML contient deux parties principales :

¾ un en-tête, défini dans la balise et qui contient les informations concernant le document

¾ et un corps, défini dans la balise et qui contient le contenu à afficher dans le navigateur

| L'élément d'en-tête le plus important, et le seul obligatoire, est le titre, spécifié à l'aide de la balise

. Les navigateurs ne mettent pas en forme le texte du titre et ignorent tout élément autre que du</p> texte. Le contenu du titre s'affiche en haut de la fenêtre du navigateur. <h4>3. Pour afficher ce fichier dans un navigateur Web, vous pouvez :</h4> <p>| soit cliquer sur le fichier avec le bouton droit de la souris et choisir Ouvrir avec/Navigateur Web,</p> | soit ouvrir un navigateur Web et ouvrir le fichier à partir du menu Fichier/Ouvrir un fichier. <h4>4. Remarque :</h4> <p>Les accents ne sont pas correctement affichés par le navigateur. Afin de remédier à ce problème :</p> <p>| On indique au navigateur la table de caractères (charset) qu'il doit utiliser pour afficher le contenu de la</p> <p>page (les tables de caractères sont associées à la notion de claviers nationaux). On utilise pour cela la balise</p> <meta charset=>. <p>Pour l'affichage de caractères issus de la majorité des langues (français, anglais, espagnol, italien, etc.), on utilise</p> <p>la table ISO-8859-1 (http://fr.wikipedia.org/wiki/ISO_8859_1). Si la page contient des caractères issus de</p> <p>familles de langues différentes (par exemple, du français et du russe), on utilise la table UTF-8</p> <p>(http://fr.wikipedia.org/UTF_8). La liste officielle de toutes les tables de caractères existantes se trouve à l'adresse</p> suivante : http://www.iana.org/assignments/character-sets. <p>| Pour s'assurer que les caractères accentués s'affichent correctement dans tous les navigateurs du monde, on</p> les remplace par leur nom d'entité ou par leur code d'entité. <p>¾ Un code d'entité est composé du caractère & (esperluette), du code HTML du caractère concerné et du</p> caractère ; (point-virgule) : &code_HTML; <p>¾ Un nom d'entité est composé de la séquence &# (esperluette cad ampersand en anglais et croisillon, du</p> code ASCII du caractère concerné et du caractère ; (point-virgule) : &#code_ASCII; ¾ Exemple : représentation du caractère 'é' (e avec accent aigu) par son entité - son code HTML est eacute, son code d'entité est é - son code ASCII est 233, son nom d'entité est é <p>Vous trouverez à l'adresse http://www.w3schools.com/tags/ref_entities.asp la liste complète des noms d'entités</p> (colonne 'Entity name') et des codes d'entités (colonne 'Entity numbers'). | Complétez le fichier base.html (voir le code suivant) et sauvegardez-le. Puis, dans le <p>navigateur, rechargez la page, en cliquant sur la touche <F5> de votre clavier ou sur l'icône de</p> votre navigateur. Observez le résultat. 2 <h3>ESR 2011-2012</h3> <h3>Exercice 2. Ma première page HTML</h3> <h4>1. Ouvrez un nouveau fichier et enregistrez-le sous le nom page1.html dans le répertoire</h4> /EnvSystemeReseau/tp-html. Puis, copiez et collez le contenu de base.html dans ce nouveau fichier. <h4>2. Créez un répertoire images dans le répertoire /EnvSystemeReseau/tp-html. Recherchez le logo de</h4> <p>l'université Paris-Est sur le Web et enregistrez l'image dans votre répertoire images sous le nom logo-</p> <p>upe.jpg. Placez ensuite votre photo préférée de vous-même dans le répertoire images sous le nom</p> moi.jpg. <h4>3. Complétez le fichier page1.html de manière à obtenir le document suivant :</h4> <h4>4. Analyse :</h4> <p>| Tout d'abord, les lignes 7, 11, 18 et 25 sont des commentaires. Il est possible d'ajouter, dans une page</p> <p>HTML, des éléments d'information à destination des programmeurs. Il peut s'agir, par exemple, de</p> <p>mentions internes sur l'auteur et la date de création du fichier, ou de remarques concernant le code qui</p> <p>permettront à toute personne ou au programmeur lui-même de lire ou relire aisément le code HTML.</p> <p>Les commentaires sont placés entre les séquences  (marqueur de fin). Tout ce</p> qui se trouve entre ces deux marqueurs est ignoré par le navigateur lors de l'affichage. <p>| La balise <h1> (ligne 8) permet d'introduire un titre de premier niveau. Le langage HTML possède six</p> <p>niveaux de titres : les balises <h1>, <h2>, ... jusqu'à <h6>, affichées par les navigateurs dans une taille</p> décroissante de caractères. La balise <h3> (ligne 14) introduit donc un titre de niveau 3. <p>Dans la plupart des navigateurs, les titres <h1>, <h2> et <h3> sont affichés avec une police plus grosse que le</p> 3 <h3>ESR 2011-2012</h3> <p>texte normal, <h4> est affiché avec une police de même taille que le texte normal, et <h5> et <h6> sont plus</p> petits. <p>| La balise <hr> (lignes 9 et 16) permet d'introduire une ligne horizontale dans la page. Elle peut être</p> <p>utilisée pour séparer les différentes sections d'un document, en l'occurrence, le titre, le sous-titre, le contenu</p> et la signature. <p>| La balise <img> (lignes 12 et 15) permet d'introduire une image à partir d'un fichier dont le chemin est</p> <p>spécifié par l'attribut src. L'attribut alt permet de spécifier un texte alternatif au cas où l'image ne</p> <p>s'afficherait pas. L'attribut title spécifie le contenu de l'infobulle qui s'affiche lors du survol de l'image</p> <p>avec la souris. D'autres attributs de la balise <img> (que nous verrons plus en détail au cours d'un prochain</p> TP) permettent de formater l'image et de la positionner dans la page. <p>| La balise <p> (lignes 19 et 26) marque le début d'un paragraphe. Lorsque le navigateur rencontre cette</p> <p>balise, il insère un saut de ligne et un espace vertical avant l'élément suivant. On peut également insérer un</p> saut de ligne simple à l'intérieur d'un paragraphe avec la balise <br> (ligne 24). <p>| Les balises <b> (texte en gras) et <i> (texte en italiques) sont des balises de style physique. Ces balises</p> <p>sont utilisées lorsqu'on veut que le texte s'affiche d'une certaine manière (en gras, en italiques, etc.).</p> <p>| La balise <a> (ligne 23) est un lien hypertexte qui renvoie à la première balise <a> (ligne 8), qu'on</p> appelle une ancre. En cliquant sur le texte Retour au début de la page de la seconde balise <p><a>, vous pouvez revenir en haut de page plus rapidement qu'avec les barres de défilement lorsque la page</p> est longue. <p>| Enfin, la balise <cite> est une balise de style de contenu. Elle indique que le texte inclus est une citation</p> bibliographique. Par convention, son contenu est affiché en italiques. <p>Les balises de style de contenu indiquent au navigateur que leur contenu présente une signification, un usage</p> <p>particulier. Le navigateur met alors ce contenu en forme en fonction de cette signification. Les balises de style de</p> <p>contenu sont essentielles pour le traitement automatique du contenu d'une page HTML. La balise <cite> peut,</p> par exemple, permettre d'extraire automatiquement une bibliographie depuis un fichier HTML. <h4>5. Téléchargez sur le Web une image de taille moyenne. Enregistrez-la dans votre répertoire images. Puis</h4> <p>insérez-la dans la page, avant le paragraphe qui commence à la ligne 19. Utilisez ensuite les barres de</p> <p>défilement pour descendre au bas de la page. Puis retournez en haut de page avec le lien Retour au début</p> de la page. <h3>Exercice 3. Les balises HTML</h3> <h4>1. HTML est un langage imbriqué : les balises sont des instructions qui, insérées dans le document, indiquent au</h4> <p>navigateur comment afficher leur contenu. Les balises sont donc interprétées par le navigateur, elles ne sont</p> <p>pas affichées à l'écran. Formellement, une balise HTML est un nom encadré par les caractères < (inférieur) et</p> > (supérieur). Par exemple, <html>. <h3>On distingue deux types de balises :</h3> <p>| La plupart des balises HTML sont des balises doubles : elles nécessitent deux balises, une ouvrante</p> <p>(<html>) et une fermante (</html>). La balise fermante est identique à la balise ouvrante, elle contient</p> en plus un caractère / avant le nom. <p>La zone de contenu délimitée par ces deux balises constitue le contenu de la balise (du texte et/ou d'autres</p> <p>balises) qui, ainsi délimité, peut être traité de manière exclusive, pour la mise en forme par exemple.</p> <h3>Exemple : <i>Du texte en italiques</i></h3> <p>| Il existe également quelques balises simples (ou vides). Ce sont des balises qui ne peuvent contenir</p> <p>d'autres balises HTML, elles n'ont donc pas besoin d'être fermées , car elles sont auto-fermantes et le</p> caractère / marquant la fin de l'élément se place à la fin de la balise ouvrante. Exemple : <img src="images/moi.jpg" alt="Toto" title="c'est moi !" /> <p>Recherchez dans la page http://creer-un-site.fr/liste-des-balises-html-xhtml-28.php la liste des balises simples du</p> HTML. <h4>1. Un document HTML est composé de balises imbriquées de manière hiérarchique.</h4> | On distingue alors les ancêtres, les parents, les enfants et les frères. Exemple : <strong>Du texte <i>en italiques <u>et souligné</u></i></strong> <p>La balise <strong> est parent de la balise <i>, qui est elle-même parent de la balise <u>. La balise</p> 4 <h3>ESR 2011-2012</h3> <p><strong> est ancêtre de la balise <u>. Inversement, <u> est enfant de <i>, qui est elle-même enfant de</p> <strong>. - Complétez les phrases a à g à partir du code qui suit : a. <h4> est ____________________ de <p>. b. Les deux <p> sont ____________________. c. <h5> est ____________________ de <p>. d. <p> est ____________________ de <h5>. e. <i> est ____________________ de <b>. f. <p> est ____________________ de <i> et de <b>. g. <h5> est ____________________ de <i>. <p>| L'imbrication de balises permet de cumuler les propriétés à appliquer à une portion de contenu. Dans</p> l'exemple <strong>Du texte <i>en italiques <u>et souligné</u></i></strong> : <p>w la portion de texte 'Du texte' sera affichée en gras car elle est contenue dans la balise <strong></p> <p>w la portion 'en italiques' sera affichée à la fois en gras et en italiques, car elle est contenue dans la balise</p> <i> qui est elle-même imbriquée dans la balise <strong> <p>w et la portion 'en souligné' sera affichée à la fois en gras, en italiques et soulignée, car elle est contenue</p> <p>dans la balise <u>, qui est imbriquée dans la balise <i>, qui est imbriquée dans la balise <strong>.</p> | Le chevauchement des balises est une erreur qui empêche l'affichage correct du contenu. Exemple : <i>Les balises <u>ne sont pas imbriquées</i> correctement</i> - Trouvez les erreurs qui se sont glissées dans le code suivant et corrigez-les. <h4>1. La balise ouvrante peut contenir des attributs qui précisent ou modifient leur comportement. Ces attributs sont</h4> <p>placés après le nom de la balise, chacun séparé par un ou plusieurs espaces, tabulations ou retours chariot. Leur</p> ordre n'a aucune importance. <p>Les attributs sont notés sous la forme nom_attribut="valeur". Par exemple, l'attribut style permet de</p> <p>spéficier la mise en forme du contenu d'un élément (positionnement des éléments qu'il contient, couleur du texte,</p> <p>couleur d'arrière-plan, tailles, etc.) à l'aide des propriétés de style du CSS. Sa notation est :</p> style="propriété1:valeur; propriété2:valeur; ...; propriétéN:valeur". <h3>Exemple :</h3> <p>IMPORTANT : Les noms des balises et des attributs ne sont pas sensibles à la casse (<head>, <HEAD> et</p> <p><Head> sont équivalents). En revanche, les valeurs assignées à un attributs sont sensibles à la casse. En</p> particulier, les noms de fichiers et de répertoires (URL). 5 <h3>ESR 2011-2012</h3> <h3>Exercice 4. Mise en page</h3> <h4>1. Ouvrez un nouveau fichier et enregistrez-le sous le nom page2.html dans le répertoire</h4> /EnvSystemeReseau/tp-html. Puis, copiez-y le contenu du fichier base.html. <h4>2. Dans la balise <body>, insérez des éléments <div> de la manière suivante :</h4> <h4>3. Explications :</h4> <p>| La balise <div> permet de diviser l'espace en zones d'affichage indépendantes. Chaque zone (ou 'boîte')</p> <p>peut être dotée de barres de défilement, d'une image d'arrière-plan, de styles indépendants, et peut être</p> positionnée de façon précise sur la page. <p>| Les principales propriétés CSS de la balise <div> sont : width (largeur), height (hauteur), margin</p> (marge extérieure), padding (marge intérieure), border-color (couleur de la bordure), border- width (épaisseur de la bordure), border-style (style de trait de la bordure), background-color (couleur d'arrière-plan). <h4>1. La propriété background-image permet de définir l'image d'arrière-plan d'une boîte. Elle est fixée par</h4> l'URL de l'image : background-image:url(image), où image est l'adresse de l'image, par exemple images/logo-upe.jpg. <p>| Insérez, à la suite de la seconde boîte <div>, une balise <div> de 50% de largeur (width) et 10% de</p> hauteur (height) avec un arrière-plan de couleur orange (background-color). | Le contenu de cette boîte est Ce texte est affiché au-dessus de l'image d'arrière-plan. | Ajoutez comme image d'arrière-plan de cette boîte l'image logo-upe.jpg de l'exercice 2. <h4>2. Par défaut, l'image d'arrière-plan se répète horizontalement et verticalement. Utilisez la propriété</h4> <p>background-repeat avec la valeur appropriée afin d'empêcher l'arrière-plan de se répéter.</p> <h4>3. Par défaut, l'image d'arrière-plan se place en haut à gauche dans la boîte. Utilisez la propriété background-</h4> position (background-position: horizontale verticale;), où horizontale et <p>verticale sont la position horizontale et verticale, afin de positionner l'image en bas et au centre de la</p> boîte. <h3>Exercice 5. Le flux HTML</h3> <p>La disposition des éléments d'une page HTML se fait par défaut selon le flux courant : le navigateur parcourt le</p> <p>code HTML et affiche au fur et à mesure les balises qu'il rencontre. Par conséquent, chaque élément est dépendant</p> des éléments qui l'entourent. <h3>Boîtes bloc et en-ligne</h3> <h4>1. Généralement, on distingue deux types d'éléments HTML : les éléments de type inline (en-ligne) et les</h4> <p>éléments de type block (bloc). Cette distinction a diverses implications sur les éléments concernés.</p> | Elle a des implications sur le positionnement des éléments dans le flux courant : <h3>¾ les boîtes de type block :</h3> - sont en flux vertical : elles se placent l'une en-dessous de l'autre - occupent automatiquement toute la largeur disponible de leur conteneur (élément parent) 6 <h3>ESR 2011-2012</h3> - exemples : <div>, <h1> à <h6>, <p>, <ul>, <ol>, <li>, etc. <h3>¾ les boîtes de type inline :</h3> - sont en flux horizontal : elles se placent l'une à côté de l'autre, sur la même ligne - n'occupent que la place nécessaire à leur contenu - exemples : <span>, <a>, <img>, <em>, <strong>, <cite>, etc. <p>¾ toute boîte peut être reclassée dans un type différent grâce à la propriété CSS display.</p> http://htmlhelp.com/reference/html40/block.html : les balises block http://htmlhelp.com/reference/html40/inline.html : les balises inline | Elle a des implications concernant les styles des éléments concernés : <p>¾ les balises block peuvent être positionnées et dimensionnées à l'aide des propriétés CSS width et</p> height (largeur et hauteur), min-width et min-height (largeur et hauteur minimales), etc. ¾ les balises inline ne sont pas prévues pour l'être. | Elle a des implications sur les règles d'imbrication des éléments : ¾ les balises block peuvent contenir une (ou plusieurs) autres balises block et/ou inline (sauf quelques exceptions) ¾ les balises inline ne peuvent contenir qu'une (ou plusieurs) balises inline. <h4>1. Créez un nouveau fichier page3.html dans le répertoire /EnvSystemeReseau/tp-html et copiez-y le</h4> contenu de base.html. <p>Au cours de cet exercice, vous utiliserez l'élément <p> (que nous avons vu au cours de l'exercice 2) et l'élément</p> <p><span>. Ce dernier permet de mettre en forme des portions de texte. Vous utiliserez également les propriétés</p> <p>width (largeur), background-color (couleur d'arrière-plan), padding (marge intérieure) et margin</p> (marge extérieure). | Insérez dans <body>, successivement : <p>¾ un <p> de 200 px de largeur, d'arrière-plan jaune et dont le contenu est le texte une boîte jaune,</p> ¾ un <p> d'arrière-plan vert et dont le contenu est une boîte verte <p>¾ et un <p> de 400 px de largeur, 5 px de marge intérieure et d'arrière-plan gris, avec à l'intérieur :</p> ¾ un <span> d'arrière-plan jaune et dont le contenu est une boîte jaune ¾ et un <span> d'arrière-plan bleu et dont le contenu est une boîte bleue. | Que constatez-vous concernant le positionnement dans le flux courant et la largeur des boîtes ? <p>| Attribuez une marge extérieure de 20 px au premier <p> et de 0 px au second <p>. Que constatez-vous</p> concernant l'étendue des marges par rapport aux bordures de l'élément parent <body> ? <p>| Attribuez à <body> une marge intérieure de 0 px. Observez le résultat. Puis remplacez padding par</p> margin et observez le résultat. <p>Exceptionnellement, avec l'élément <body>, la propriété margin spécifie non pas les marges extérieures mais</p> les marges intérieures. Par défaut, la marge intérieure de <body> est de 8 px. | Attribuez aux deux premiers <p> la propriété display:inline. Quelle est la conséquence ? | Attribuez au premier <span> la propriété display:block. Quelles sont les conséquences ? <h3>Positionnement des éléments dans le flux</h3> <h4>1. La propriété CSS position permet de modifier le positionnement par défaut des éléments dans le flux.</h4> | Le positionnement relatif (position:relative;) : ¾ maintient l'élément dans le flux courant, ¾ permet de le décaler par rapport à sa position par défaut dans le flux <p>¾ et le décalage n'influence en rien les éléments qui le précèdent ou le suivent : ces derniers se</p> positionnement par rapport à sa position par défaut. | Le positionnement absolu (position:absolute;) : <h3>¾ retire l'élément du flux courant,</h3> ¾ permet de le positionner par rapport aux bordures de son parent <p>¾ et a une influence sur les éléments qui le précèdent ou le suivent : ces derniers considèrent qu'il n'existe</p> <p>plus (par exemple, l'élément qui le suit dans le flux se positionne non plus par rapport à l'élément</p> concerné mais par rapport à l'élément qui le précède). 7 <h3>ESR 2011-2012</h3> | Le positionnement fixe (position:fixed;) : <h3>¾ s'apparente au positionnement absolu</h3> <p>¾ et l'élément reste toujours dans la même position par rapport à la fenêtre du navigateur, même lorsque</p> l'utilisateur fait défiler le contenu de la page avec les barres de défilement. | Le positionnement par défaut (position:static;) : ¾ l'élément se trouve à sa position par défaut dans le flux ¾ et les propriétés top, bottom, left et right ne s'y appliquent pas. <p>Un élément est positionné quand la valeur de sa position n'est pas static. Le positionnement d'un tel</p> élément est réalisé à l'aide des propriétés : ¾ top : décalage du bord haut de l'élément par rapport au bord haut de son parent ¾ bottom : décalage du bord bas de l'élément par rapport au bord bas de son parent ¾ left : décalage du bord gauche de l'élément par rapport au bord gauche de son parent ¾ right : décalage du bord droit de l'élément par rapport au bord droit de son parent <h4>1. Insérez l'élément suivant dans page3.html :</h4> <p>Décalez l'élément <span> de 10 px à gauche et de 5 px en bas. Quelles sont les conséquences ?</p> <h4>2. Positionnez le premier <span> de la question 2 en absolu. Quelles sont les conséquences ? Où se trouve la</h4> boîte bleue, à présent, et par rapport à quoi se place-t-elle ? <h4>3. Créez un nouveau fichier nommé page4.html dans le répertoire /EnvSystemeReseau/tp-html et</h4> copiez-y le contenu du fichier base.html. | Insérez dans l'élément <body>, successivement : <h3>¾ un élément <div> dont le contenu est :</h3> " Iam summus Pater architectus Deus Hanc quam videmus mundanam domum, divinitatis templum <p>augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat ;</p> <p>aethereos globos aeternis animis vagetarat ; excrementarias ac feculentas inferioris mundi partes amnigena</p> animalium turba complera. [...] » ¾ puis un élément <div> dont le contenu est : <h3>Lien 1 <br> Lien 2 <br> Lien 3 <br></h3> <p>| Par rapport à quel élément les deux <div> seraient-ils positionnés si on les sortait du flux courant ?</p> <p>| Attribuez au premier <div> les propriétés suivantes : un positionnement absolu ; à 10 % du bord gauche</p> <p>et 5% du bord haut de la fenêtre ; une largeur de 30% et une hauteur de 100% ; une marge intérieure de 15</p>quotesdbs_dbs1.pdfusesText_1 </div> </div> <div class="left"> <br/> <div style="width:100%;min-height:300px !important;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1570187411384203" data-ad-slot="2836242943" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div>  <div> <div id="myModal" class="modal">  <div class="modal-content"> <span class="closeA">×</span> if you Get <b>No preview available</b> Click on (Next PDF) <a href="https://pdfprof.com/PDFV2/Documents3/22672/25/7" class="bblinkss"> Next PDF </a> <iframe frameBorder="0" width="100%" height="50" frameBorder="0" src="https://pdfprof.com/PDFV2/ShowLink.php?links=https://monge.univ-mlv.fr/ens/Licence/L1/2012-2013/ESR/tp05.pdf" ></iframe> <iframe id="ppif" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=https://monge.univ-mlv.fr/ens/Licence/L1/2012-2013/ESR/tp05.pdf&idt=22672&t=25&view=4&url=https://pdfprof.com/PDFV2/Documents3/22672/25/4" style="width:100%;height:90vh;" ></iframe> </div> </div> </div> <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 10px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 5px; border: 1px solid #888; width: 85%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:1px; } .closeA:hover, .closeA:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closeA")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body>

[PDF] [PDF] Exercice 1 La structure minimale dune page HTML

[PDF] TP HTML Exercice 1 : Votre première page HTML Ecrivez lextrait de