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

Pour cela on utilise la balise dans l'en-tête du document En voici un exemple : Le résultat de l'affichage est le même que celui du tableau

Créez un fichier mon-cv html dans le répertoire /EnvSystemeReseau/tp-html On utilise la balise (table data) pour insérer une nouvelle cellule dans une

[PDF] 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"

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

L,insertion d,une animation Flash en HTML 5 Organisation des formulaires à l' aide de tableaux (fichiers PDF, présentations de style diaporama )

[PDF] Exercice HTML : «Tableaux » - SITE DU COURS HTML

Exercice HTML : «Tableaux » http://www siteduzero com/tutoriel-3-13584-les- tableaux html#ss_part_1 Insérer un tableau dans la page Rappel : Balises :

[PDF] Exercice 1 La structure minimale dune page HTML

Pour cela on utilise la balise dans l'en-tête du document En voici un exemple : Le résultat de l'affichage est le même que celui du tableau

[PDF] Cours et exercices corrigés

Cours et exercices corrigés © Groupe Eyrolles, 2012, ISBN : 978-2-212-13400-1 Page 2 Table des matières Avant-propos Les attributs de base de HTML

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

Exercice 1 : création de votre première page html Préparez Exercice 3 : Formatage de texte Vous allez utiliser les tableaux pour la page "contact html"

[PDF] Les cahiers dExercices en Programmation : Le langage HTML

Après avoir réalisé tous les exercices de chaque chapitre vous allez pouvoir vérifier les compétences acquises à l'aide du tableau des objectifs Celui-ci sert à la

[PDF] TP HTML/CSS

Rappel : n'hésitez pas `a consulter le cours correspondant sur Html et Css surtout pas de copier/coller depuis ce sujet, car les caract`eres générés dans le pdf ne Un tableau de trois colonnes et au moins 4 lignes présentant plusieurs

[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

[PDF] exercice java corrigé debutant pdf

[PDF] exercice java corrigé heritage

[PDF] exercice java corrigé pdf

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> px ; une bordure de couleur noire, d'une épaisseur de 1 px et de style solid. <p>| Attribuez au second <div> : un positionnement fixe ; à 2% du bord haut et 2% du bord droit de la fenêtre</p> ; une largeur de 10% ; une marge intérieure de 15 px ; un arrière-plan de couleur gris. <p>| Faites défiler la page vers le haut et vers le bas avec les barres de défilement et observez le comportement</p> des deux éléments <div>. 8 <h3>ESR 2011-2012</h3> <h3>Exercice 6 Les tableaux</h3> <h4>1. Créez un fichier mon-cv.html dans le répertoire /EnvSystemeReseau/tp-html. Copiez-y le</h4> contenu du fichier base.html. <h4>2. Complétez le contenu de la balise <title> imbriquée dans <head> avec le titre suivant : Curriculum</h4> <h3>Vitae de Nom Prénom.</h3> <h4>3. Souvent, pour présenter des informations structurées en lignes et en colonnes, on utilise les tableaux. La</h4> balise <table> permet d'insérer un tableau dans une page Web. Un tableau est défini de la manière suivante : | Le tableau commence par la balise ouvrante <table> et se termine par la balise fermante </table>. | On utilise la balise <tr> (table row) pour insérer une nouvelle ligne. | On utilise la balise <td> (table data) pour insérer une nouvelle cellule dans une ligne. | On utilise la balise <th> (table head) pour insérer un titre de ligne ou de colonne Voici un exemple de tableau et le résutlat de son affichage : <h4>1. Dans cet exemple, tous les élément <th> ont un attribut style de même valeur, et tous les éléments <td></h4> 9 <h3>ESR 2011-2012</h3> <p>ont un attribut style de même valeur. Afin d'appliquer les mêmes styles à plusieurs balises sans les répéter dans</p> <p>chacune des balises concernées, on peut définir une feuille de style interne. Pour cela on utilise la balise</p> <style> dans l'en-tête <head> du document. <h3>En voici un exemple :</h3> <p>Le résultat de l'affichage est le même que celui du tableau précédent. La balise <style> contient 3 règles CSS :</p> <p>la première s'applique à tous les éléments <table> de la page, la second s'applique à tous les éléments <th> de</p> <p>tous les tableaux de la page, la troisième s'applique à tous les éléments <td> de tous les tableaux de la page.</p> <h4>2. Il existe 3 manières de définir des styles CSS :</h4> | les styles en ligne : dans le code HTML, avec l'attribut style dans chaque élément | les styles incorporés : dans l'en-tête de la page, avec la balise <style> <p>| les styles externes : dans une feuille de style séparée (un fichier dont le nom a pour extension .css,</p> <p>fichier.css dans l'exemple suivant). Une feuille de style externe peut être appliquée à n'importe</p> <p>quel fichier HTML. Il suffit, pour cela, d'insérer, dans le fichier HTML concerné, une balise <link> de la</p> manière suivante : 10 <h3>ESR 2011-2012</h3> <h4>1. Dans le fichier mon-cv.html, nous allons créer 3 sections : diplômes, expériences professionnelles et</h4> loisirs. Vous définirez les styles en interne ou en externe. <p>| Le titre de chaque section sera inséré à l'aide d'une balise <h3>. Il sera affiché en bleu (color:</p> blue;) et centré horizontalement (text-align: center). | Le contenu de chaque section sera un tableau. <p>| Dans la section Diplômes, le tableau contiendra autant de lignes que de diplômes que vous avez obtenus.</p> <p>Il sera divisé en 3 colonnes dont les titres seront : Année, Diplôme, Établissement. Le contenu des cellules sera</p> aligné à gauche (text-align: left;) <p>| Dans la section Expériences professionnelles, le tableau sera divisé en 3 colonnes dont les titres seront :</p> <p>Période, Établissement, Poste occupé. Le contenu des cellules sera également aligné à gauche.</p> <p>| Dans la section Loisirs, le tableau contiendra 3 lignes dont les titres seront : langues, activités artistiques</p> et sports. Chaque ligne contient 2 colonnes. <h4>1. Ajoutez un titre principal à votre page à l'aide d'une balise <h1> que vous formaterez selon votre goût.</h4> <h4>2. Ajoutez également une section contenant votre identité et vos coordonnées (Nom et prénom, adresse</h4> postale, adresse électronique, numéros de téléphone fixe et portable). <h3>Exercice 7 Les listes</h3> <h4>1. Créez un fichier mon-cv_listes.html dans le répertoire /EnvSystemeReseau/tp-html.</h4> <h3>Copiez-y le contenu du fichier base.html.</h3> <h4>2. Complétez le contenu de la balise <title> imbriquée dans <head> avec le titre suivant : Curriculum</h4> <h3>Vitae (listes) de Nom Prénom.</h3> <h4>3. Souvent, pour présenter des informations ordonnées, non ordonnées ou des définitions, on utilise des</h4> listes. Une liste doit contenir au minimum un élément. Une liste non ordonnée est définie de la manière suivante : | La liste commence par la balise ouvrante <UL> et se termine par la balise fermante </UL>. | On utilise la balise <IL> pour insérer un nouvel élément dans la liste. <h3>Voici un exemple de liste non ordonnée :</h3> Insérez ce code dans le corps <body> du fichier mon-cv_listes.html et observez. <h4>1. Les éléments d'une liste non ordonnée sont introduits par des " éléments graphiques ». Par défaut il s'agit</h4> <p>d'un rond noir pour le premier niveau d'indentation, un rond blanc pour le deuxième niveau, etc... Ces éléments</p> graphiques peuvent être modifiés en renseignant le champs type='valeur' dans la balise <IL>. fichier.css fichier.html 11 <h3>ESR 2011-2012</h3> Le champs type peut prendre les valeurs suivantes : Testez les différentes valeurs sur la liste non ordonnée précédente. <h4>2. Une liste ordonnée est définie de la manière suivante :</h4> | La liste commence par la balise ouvrante <OL> et se termine par la balise fermante </OL>. | On utilise la balise <IL> pour insérer un nouvel élément dans la liste. Transformez la liste non ordonnée précédente en liste ordonnée, observez. <h4>1. Comme pour les listes non ordonnées, les listes ordonnées utilisent des éléments graphiques pour</h4> <p>introduire les éléments de la liste. Ces éléments graphiques peuvent être modifiés en renseignant le champs</p> type='valeur' dans la balise <OL>. Le champs type peut prendre les valeurs suivantes : <h3>Type Type d'énumération</h3> <h4>1 Chiffres arabes 1, 2, 3, ...</h4> a Minuscules a b, c, ... <h3>A Majuscules A, B, C, ...</h3> i Chiffres romains minuscules i, ii, iii, ... <h3>I Chiffres romains majuscules I, II, III, ...</h3> Testez les différentes valeurs sur la liste ordonnée précédente. <h4>2. Une liste dite de " description » est définie de la manière suivante :</h4> | La liste commence par la balise ouvrante <DL> et se termine par la balise fermante </DL>. | Un titre de définition est indiqué par la balise <DT>. | On utilise la balise <DD> pour renseigner la définition elle-même. <h3>Voici un exemple de liste de description :</h3> Insérez ce code dans le corps <body> du fichier mon-cv_listes.html et observez. <h4>1. Dans le fichier mon-cv_listes.html, nous allons créer 3 sections : diplômes, expériences</h4> professionnelles et loisirs. <p>| Chaque section sera une liste de description dont le titre sera inséré à l'aide d'une balise <h3>. Il sera</p> affiché en bleu (color: blue;) . <p>| Le contenu de chaque section sera une liste non ordonnée d'éléments en rapport avec la section (les</p> diplômes dans la section diplômes, ...). <p>| Pour chaque diplôme dans la section Diplômes, vous devez créer une liste non ordonnée contenant les</p> 12 <h3>ESR 2011-2012</h3> informations suivantes : Année, Diplôme, Établissement. <p>| La section Expériences professionnelles, doit être créée de la même façon que la section Diplômes. Les</p> <p>informations demandées pour chaque expérience sont : Période, Établissement, Poste occupé.</p> <p>| De même pour la section Loisirs, avec les informations suivantes : langues, activités artistiques et sports.</p> <h4>2. Ajoutez également une section contenant votre identité et vos coordonnées (Nom et prénom, adresse</h4> <p>postale, adresse électronique, numéros de téléphone fixe et portable). Cette section sera créée grâce à une liste de</p> description. <h3>Exercice 7 Mise en forme des listes</h3> <h4>1. Créez un fichier listes-formattees.html dans le répertoire /EnvSystemeReseau/tp-</h4> html. Copiez-y le contenu du fichier base.html. <h4>2. Insérez la liste suivante dans le corps de la page :</h4> Puis définissez le code CSS qui permet de formater l'affichage de cette liste comme suit : En l'absence de règles supplémentaires, la liste est affichée de cette manière : <h4>3. Positionnement de la liste. Attribuez à la liste précédente une marge extérieure gauche (margin-left)</h4> et une marge intérieure gauche (padding-left) de 0 px et observez le résultat. <p>Corrigez ensuite les deux propriétés précédentes de manière à réintégrer les puces de la liste à l'intérieur du bloc</p> <div>. <h4>4. Images en tant que puces. La propriété list-style-image permet d'utiliser une image en tant que</h4> <p>puce. Téléchargez une image (pas trop grande) et enregistrez-la dans le répertoire images sous le nom</p> <p>puce.gif. Puis complétez le code CSS relatif à la liste avec la propriété liste-style-image:</p> url(puce.gif);. <p>Si le navigateur utilisé par l'utilisateur ne prend pas en chage cette partie de CSS (ou n'affiche pas les images), la</p> <p>puce par défaut sera utilisée. Pour spécifier vous-même la puce HTML à afficher dans une telle situtation, vous</p> définirez à la fois la propriété list-style-image et la propriété list-style-type. 13 <h3>ESR 2011-2012</h3> <h4>5. Positionnement des puces. La propriété list-style-position permet de placer les puces par</h4> <p>rapport au texte des items de la liste. Attribuez à la liste précédente cette propriété avec pour valeur inside et</p> observez le résultat. <h4>6. Suppression des puces. Il peut arriver que vous ne vouliez pas utiliser de puce pour l'affichage d'une</h4> <p>liste. Pour cela, vous remplacerez les trois règles précédentes par l'attribut list-style: none; dans votre</p> règle de style concernant la liste. <p>Si vous souhaitez, non pas supprimer les puces mais les remplacer par un caractère de votre choix, vous utiliserez</p> <p>également la règle list-style: none;. Puis vous forcerez la première ligne de chaque item de la liste à</p> <p>s'afficher avec un alinéa négatif à l'aide de la propriété text-indent. Il vous faudra également définir le</p> <p>margin-left ou padding-left, l'un des deux au choix, à 0, et l'autre à la même valeur positive que le</p> text-indent. Voici le code CSS complet : <p>Remplacez les styles définis précédemment pour la liste par ces derniers. Puis ajoutez le caractère » au</p> début de chaque item de la liste. <h3>Exercice 8. Les styles CSS</h3> <h4>1. Une feuille de style est un fichier dont l'extension est .css. On définit dans ce fichier nos préférences</h4> <p>concernant l'affichage du contenu de notre page HTML : les polices d'écriture, la taille des caractères pour les</p> <p>textes, les couleurs, la taille des images, arrière-plans, le positionnement des différentes sections, etc.</p> <p>Nous avons vu (durant l'exercice 6) les trois façons de définir les styles d'une page HTML. L'avantage des styles</p> <p>externes, c'est qu'une modification dans cette feuille de style principale affectera toutes les pages qui lui sont liées.</p> <h4>2. Créez un fichier mise-en-forme.html dans le répertoire /EnvSystemeReseau/tp-html.</h4> <p>Copiez-y le contenu du fichier base.html. Créez ensuite un nouveau fichier mes-styles.css dans le même</p> répertoire. <h4>3. Insérez, dans la balise <head> de votre page HTML, la balise suivante :</h4> <p>Cette balise vous permet de créer un raccourci vers le fichier dans lequel vous définissez les styles d'affichage de</p> votre page : <p>| La balise <link> indique au navigateur qu'il doit chercher un document situé à l'extérieur de la page</p> HTML. | L'attribut rel="stylesheet" précise que le document en question est une feuille de style. | L'attribut type="text/css" précise le type de la feuille de style, du CSS en l'occurrence. | Et L'attribut href="URL" donne l'URL de la feuille de style, c'est-à-dire son emplacement. <h4>1. À présent, insérez dans le contenu de la page (dans la balise <body>) un titre <h1> dont le contenu est</h4> <p>Mise en forme par les styles CSS. Insérez ensuite un titre <h2> dont le contenu est Un premier petit exemple suivi</p> <p>d'un paragraphe <p> que vous remplirez avec un texte quelconque de petit taille (à rechercher sur le Web). Insérez</p> <p>une deuxième fois un titre <h2> avec pour contenu Un deuxième petit exemple suivi d'un paragraphe que vous</p> remplirez cette fois avec un texte de longueur moyenne ou grande. 14 <h3>ESR 2011-2012</h3> <p>Nous allons, par la suite, définir, dans notre fichier mes-styles.css, l'aspect global de la page mise-en-</p> <p>forme.html lors de son affichage. Pour cela, nous allons fournir au navigateur les règles d'affichage du</p> contenu. <h4>2. La syntaxe d'une règle CSS est de la forme suivante : sélecteur {propriété1: valeur1;</h4> <p>SURSULpPp2 YMOHXU2 "`. Une règle est donc composée de deux parties : un sélecteur et une ou</p> <p>plusieurs déclarations. Une déclaration comprend elle-même deux parties : une propriété et une valeur associée</p> <p>à cette propriété. Ces deux parties sont séparées par le caractère deux-points (:) et la déclaration est terminée par</p> <p>un point-virgule (;). Dans l'exemple suivant, le sélecteur est p et la déclaration est color: blue ; dans la</p> déclaration, la propriété est color et sa valeur est #e8eae8. | Tous les types d'éléments HTML (les noms des balises) peuvent être des sélecteurs. <p>| La liste des propriétés et leurs valeurs est définie dans la spécifications du w3c, que vous pourrez trouver</p> à l'adresse suivante : http://www.yoyodesign.org/doc/w3c/css1/index.html#css1-properties. <h4>1. Les sélecteurs. Un sélecteur peut contenir plusieurs noms de balises, séparés de différentes manières.</h4> <p>| Les sélecteurs multiples contiennent une liste de noms de balises HTML séparés par des virgules. Ils</p> <p>permettent d'appliquer le même bloc de règles de styles à plusieurs éléments de la page HTML. Les deux</p> exemples suivants sont équivalents : <p>| Les sélecteurs contextuels contiennent une liste de noms de balises HTML séparés par un espace. Il</p> <p>permettent d'appliquer des styles à une balise lorsqu'elle se trouve dans un contexte donné. Dans le sélecteur, les</p> <p>balises sont listées dans leur ordre d'imbrication. L'exemple suivant définit la valeur de la propriété list-style</p> des balises <li> selon leur niveau dans une liste : <p>- si <li> est imbriquée dans un seul <ol>, alors le navigateur utilise la valeur upper-roman de la propriété</p> list-style - si <li> est imbriquée dans deux <ol>, alors il utilise la valeur upper-alpha - si <li> est imbriquée dans trois <ol>, alors il utilise la valeur décimal <p>| Le sélecteur universel, noté *, applique les styles qui lui sont associés à tous les éléments du document.</p> <p>Avec la règle de l'exemple suivant, tous les textes de la page HTML seront affichés en violet et dans la police</p> <h3>Times New Roman.</h3> <p>| Les sélecteurs adjacents contiennent des noms de balises séparés par le caractère +. Ils permettent de</p> <p>sélectionner une balise lorsqu'elle est immédiatement suivie d'une autre. Dans l'exemple suivant, le navigateur</p> <p>ajoute de l'espace aux instances <h1> de la page lorsqu'elles sont immédiatement suivies d'un titre de niveau 2,</p> <h2>. 15 <h3>ESR 2011-2012</h3> <p>| Les pseudo-éléments contiennent un nom de balise suivi de : et du nom d'un pseudo-élément (:first-</p> line, :first-letter, :before, :after). Ils permettent de mettre en forme des parties de contenu qui <p>sont impossibles à baliser. Selon l'exemple suivant, la première ligne des éléments <p> doit s'afficher en italique</p> et dans une taille de police deux fois plus grosse : <h4>1. Les classes. Le langage CSS permet d'appliquer plusieurs styles à un même élément en attribuant une</h4> <p>classe à chacun de ces éléments. Pour attribuer une classe à un élément, on utilise l'attribut class="nom".</p> <p>| Les classes régulières. On veut, par exemple, présenter un article contenant deux paragraphes <p>, l'un</p> <p>contenant le résumé de l'article et l'autre l'article lui-même. On attribue au premier paragraphe la classe résumé,</p> <p>ainsi : <p class="resume"> et au deuxième paragraphe la classe article, ainsi : <p class="article">.</p> <p>On définit ensuite le style de chacun de ces paragraphes de la manière suivante (le nom de la balise et celui de sa</p> <p>classe sont séparés par un .). Le résumé sera alors affiché en italiques, dans une taille de police inférieure et avec</p> une marge de 0.5cm. Le contenu de l'article sera centré dans la page. <p>| Les classes génériques. On peut aussi définir une classe et l'associer à plusieurs balises différentes. Le</p> <p>sélecteur de la règle CSS est alors composé d'un . suivi du nom de la classe. Par exemple, pour afficher les titres</p> <p><h1> et les paragraphes <p> en italiques, on définit une classe italique à laquelle on associe la règle permettant</p> <p>d'afficher du texte en italiques. Puis, dans le code HTML, on attribue le nom de cette classe aux <h1> et aux <p></p> : <p class="italique"> et <h1 class="italique"> . <p>| Les classes ID permettent d'attribuer un identifiant unique à une balise donnée. Le sélecteur de la règle</p> <p>CSS est composé d'un caractère # suivi du nom de l'identifiant. Par exemple, pour afficher le contenu d'un <p></p> <p>donné en jaune, on peut lui attribuer l'identifiant jaune (<p id="jaune"> ) puis définir la règle CSS suivante :</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/22675/25/6" 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=22675&t=25&view=5&url=https://pdfprof.com/PDFV2/Documents3/22675/25/5" 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] Exercice 6 – Les tableaux - Inria