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





Previous PDF Next PDF



Cours et exercices corrigés

tableau 2-1 . . Page 40. 26. Le langage HTML 5. PARTIE I. Tableau 2-1. Tous les éléments de la catégorie Phrasing (voir le tableau 2-3) ainsi que <head>. Le 



Les cahiers dExercices en Programmation : Le langage HTML Les cahiers dExercices en Programmation : Le langage HTML

Vous trouverez à la fin du cahier le corrigé de chaque exercice. Certaines Reproduit ce tableau ci-dessous en langage html. Ajoute ce titre à la page ...



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

Exercice 4 : Réalisez un mini site comprenant votre CV selon le descriptif suivant: • Un tableau avec bordure fine qui comportera les informations "standards".



Exercice 6 – Les tableaux Exercice 6 – Les tableaux

Exercice 6 – Les tableaux. 1. Créez un fichier mon-cv.html dans le répertoire /EnvSystemeReseau/tp-html. Le tableau commence par la balise ouvrante <table> et ...



Langage C : énoncé et corrigé des exercices IUP GéniE

l'erreur ) . Exercice 27 Ecrire une f onction int coder ( int iD ep la ce m ent c ha r * sN o mF ic h ier 1 





Automatique Linéaire 1 – Travaux Dirigés

Exercice 3.1 : Correction à avance de phase. Tracer dans le plan de Black les fonctions de transfert en boucle ouverte du système corrigé et non corrigé à ...



HTML : exercices

Exercice 1 : Affichage de document HTML. 1. Ouvrez le bloc-note copiez-y le document Exercice 6 : Tableau de statistiques. Ajoutez à votre site une page ...



TP n°2 : Tris Tableaux croisés et Graphiques

http://www.lamsade.dauphine.fr/~mayag/teaching.html. Copier ce classeur dans votre répertoire personnel. Exercice 1 : Sur la feuille Détails_commandes 



Examen Final

(1 point) Une fois le document de la question précédente corrigé afin que son HTML et son Faites en sorte que les cellules de votre tableau HTML aient une ...



Cours et exercices corrigés

langage .HTML 5 .en .tant .qu'outil .de .structuration .des .documents . . Elle .vous .permet .d' 



Exercice 1. La structure minimale dune page HTML

Créez un répertoire tp-html puis un fichier base.html dans le répertoire Le tableau commence par la balise ouvrante <table> et se termine par la balise ...



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

Ecrivez l'extrait de code HTML qui réalise ce titrage dans un fichier nommé Un tableau avec bordure fine qui comportera les informations "standards".



Les cahiers dExercices en Programmation : Le langage HTML

cahier le corrigé de chaque exercice. vérifier les compétences acquises à l'aide du tableau des objectifs. ... HTML utilise des balises .



Exercices corrigés

Affectez les données de ce tableau à un dictionnaire dico python de façon à pouvoir écrire par exemple : >>> print dico["Au"]["Z/A"][0] # affiche : 79.



TP 5 – Programmation Web avec PHP - Correction

</html>. Variables d'environnement. 1.3.Afficher dans un tableau la 1.6.php qui permettra à la fois de créer et de traiter le formulaire de l'exercice.



Les Zooms. Exercice danalyse financière - 5e édition

Exercices d'analyse financière avec corrigés détaillés – 2010/2011 financière – Le tableau de financement et les flux de trésorerie –.



Recueil dexercices corrigés en INFORMATIQUE I

Corrigés des exercices : Architecture de l'ordinateur 4) Dans un tableau Excel on veut que le contenu de la cellule D4 soit égale au contenu de la.



Exercices sur les tableaux Php - page 1

23 déc. 2015 On voudrait réaliser un tableau HTML $Mois donnant le nombre de jours de chaque mois de l'année par un script PHP utilisant un tableau PHP. Les ...



Exercice 6 – Les tableaux

contenu du fichier base.html. 2. Complétez le contenu de la balise <title> imbriquée dans <head> avec le titre suivant : Curriculum.

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 début) et --> (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.quotesdbs_dbs4.pdfusesText_8</div> <style> .ahover:hover{ background:#efefef; } </style> <div style="padding:5px; font-size:22px;"> <a href="https://pdfprof.com/PDFV2/Documents1/22675/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice html tableau pdf</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22676/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice identité remarquable factorisation</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22677/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice identité remarquable seconde</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22679/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice immunité bac science</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22681/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice imparfait passé simple cm2 ? imprimer</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22683/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice induction mpsi</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22684/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice inégalité de bernoulli</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22686/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice information chiffrée terminale stmg</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22687/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice interactif javascript</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22688/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice java corrigé debutant</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22689/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice java corrigé debutant pdf</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22690/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice java corrigé heritage</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22692/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice javascript formulaire corrigé</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22693/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice jeu a 3 basket</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/22694/25" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice la houle</a><br/><br/> </div> </div> </div> <div class="left"> <br/> <div style="width:100%;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script> <!-- Responsive1 --> <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> <br/> <br/> <br/> <br/> <div style="background:#efefef;"><br/></div> </div> <div> <style> .exit-intent-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(33, 33, 33, 0.8); transform: translateY(60%) scale(0); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } .exit-intent-popup.visible { transform: translateY(0) scale(1); } .newsletter { position: absolute; top: 20%; left: 20%; transform: translate(-20%, -20%); } /* Popup-specific styles */ .newsletter { background: #FFF; padding: 10px; border-radius: 3px; } .close { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 20px; height: 20px; font-size:18px; } </style> <link rel="stylesheet" href="popup.css" /> <div class="exit-intent-popup"> <div class="newsletter"> <span>Nous vous remercions chaleureusement pour votre soutien et votre générosité.</span><br/> <br/> <img src="https://pdfprof.com/PDFV2/6oB.gif" style="max-width:100%;"/> <div style="width:100%;"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://pdfprof.com/PDFV2/Documents1/22674/25/2" rel="nofollow" target="_blank" style="margin-right: 5px; background: #03A9F4; color: white; padding: 1%; font-size:15px; width:46%; ">Share on Facebook</a> <a href="https://api.whatsapp.com/send?text=exercice+la+houle+Download+From++-+https%3A%2F%2Fpdfprof.com%2FPDFV2%2FDocuments1%2F22674%2F25%2F2" rel="nofollow" target="_blank" style="background: #4CAF50; color: white; padding: 1%; width:48%; font-size:15px;">Share on Whatsapp</a> </div> <br/> <span class="close">x</span> </div> </div> <script> /* const CookieService = { setCookie(name, value, days) { let expires = ''; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 12 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + ';'; }, getCookie(name) { const cookies = document.cookie.split(';'); for (const cookie of cookies) { if (cookie.indexOf(name + '=') > -1) { return cookie.split('=')[1]; } } return null; } }; const exit = e => { const shouldExit = [...e.target.classList].includes('exit-intent-popup') || // user clicks on mask e.target.className === 'close' || // user clicks on the close icon e.keyCode === 27; // user hits escape if (shouldExit) { document.querySelector('.exit-intent-popup').classList.remove('visible'); } }; const mouseEvent = e => { const shouldShowExitIntent = !e.toElement && !e.relatedTarget && e.clientY < 10; if (shouldShowExitIntent) { document.removeEventListener('mouseout', mouseEvent); document.querySelector('.exit-intent-popup').classList.add('visible'); CookieService.setCookie('exitIntentShown', true, 30); } }; if (!CookieService.getCookie('exitIntentShown')) { setTimeout(() => { document.addEventListener('mouseout', mouseEvent); document.addEventListener('keydown', exit); document.querySelector('.exit-intent-popup').addEventListener('click', exit); }, 0); } */ </script> <!-- Trigger/Open The Modal --> <!-- The Modal --> <div> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="closeA">×</span> <style> .downlink{ border:1px solid #aaa;color:white;padding:8px;width:98%;color:white;background:green;display:block; } .downlink:hover{ background:blue; cursor:pointer; } </style> <table style="width:80%;"> <tr style="width:100%;"> <td style="width:50%;"><a href="https://pdfprof.com/PDFV2/ShowLink_1.php?vidt=22674&vt=25&links=https%3A%2F%2Fmonge.univ-mlv.fr%2Fens%2FLicence%2FL1%2F2012-2013%2FESR%2Ftp05.pdf" class="downlink" target="_blank">PDF Download</a> </td> <td style="width:45%;"><a href="https://pdfprof.com/PDFV2/Documents1/22674/25/3" class="bblinkss"> Next PDF </a> </td></tr> </table> <iframe id="ppifa" 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=22674&t=25&view=2&url=https://pdfprof.com/PDFV2/Documents1/22674/25/2" style="width:100%;height:90vh;" ></iframe> <script> /* var iframe = document.getElementById("ppifa"); var srcv=iframe.src; var loadingStatus = false; function abc(){ iframe.onload = function () { loadingStatus = true; console.log('ok is loaded iframe'); } if(loadingStatus==false) { iframe.src=srcv; } } abc(); */ </script> </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: 90%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:5px; } .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> </html>