This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
2015_2016:s1:webdoc:td4 [2015/10/06 14:52] urli created |
2015_2016:s1:webdoc:td4 [2015/11/30 15:43] (current) urli [Sprite] |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | |||
====== TD4 Web ====== | ====== TD4 Web ====== | ||
- | * Transformation d'une page en fonction de son CSS | + | Inspiré du cours de Mr Rey Gaëtan |
- | * CSS avec MediaQuery | + | |
+ | ===== Structure d'une page web html5 ===== | ||
+ | |||
+ | Voici un schéma exemple de découpage d'une page HTML5. | ||
+ | <html> | ||
+ | <img src="http://blog.referencementschool.com/wp-content/uploads/2009/07/html5_structure.png"/> | ||
+ | </html> | ||
+ | |||
+ | Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. | ||
+ | Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après. | ||
+ | |||
+ | Plus d'infos sur les différentes balises html utilisées : | ||
+ | * http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Voici ci-après la visualisation d'un exemple de ce que vous pourriez obtenir {{2015_2016:s1:webdoc:capture1778.jpg|exemple}} | ||
+ | * Commencer par créer les sections header, nav, section, aside et footer de votre page. Laissez la partie section vide pour l'instant nous y reviendrons plus tard. | ||
+ | * Définir la feuille de style pour obtenir une "belle visualisation" qui utilise les éléments de codage donnés ci-après. | ||
+ | </box> | ||
+ | |||
+ | ==== Gérer l'affichage des listes ==== | ||
+ | [[http://www.w3schools.com/cssref/pr_list-style.asp|En savoir plus]] | ||
+ | |||
+ | Par exemple, | ||
+ | <code css> | ||
+ | list-style: none; | ||
+ | </code> | ||
+ | |||
+ | Ce style supprime les puces et est utilisé pour structurer la barre de navigation. | ||
+ | |||
+ | Pour placer les élément de la liste sous la forme d'un menu horizontal : | ||
+ | |||
+ | <code css> | ||
+ | display:inline-block; | ||
+ | </code> | ||
+ | |||
+ | Vous pourrez **par la suite** utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu. | ||
+ | |||
+ | ==== Placements relatifs ==== | ||
+ | |||
+ | Nous utiliserons le positionnement flottant. | ||
+ | |||
+ | Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. | ||
+ | |||
+ | Quelques éléments sur les flux et le positionnement relatif : | ||
+ | * http://openweb.eu.org/articles/initiation_flux/ | ||
+ | |||
+ | Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. | ||
+ | |||
+ | <code css> | ||
+ | float:left; /*Positionnement d'un élément à gauche de la page*/ | ||
+ | float:right; /*Positionnement d'un élément à droite de la page*/ | ||
+ | </code> | ||
+ | |||
+ | Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. | ||
+ | |||
+ | Comprendre les float : | ||
+ | * http://openweb.eu.org/articles/initiation_float/ | ||
+ | |||
+ | Pour restreindre sa largeur il est possible de donner une taille à l'élément: | ||
+ | |||
+ | <code css> | ||
+ | width:500px; /*taille fixe en pixels*/ | ||
+ | width:50%; /*taille adaptable en pourcentage, 50% de l'espace disponible*/ | ||
+ | </code> | ||
+ | |||
+ | Vous noterez que dans un positionnement flottant les éléments se positionnent à l'endroit ou il reste de la place disponible ce qui peut provoquer parfois des agencements hasardeux. | ||
+ | |||
+ | clear a été conçue pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. clear permet de libérer l'élément de l'influence du flottant. | ||
+ | |||
+ | <code css> | ||
+ | clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | ||
+ | </code> | ||
+ | |||
+ | Elements supplémentaires sur les positions fixes et absolues : | ||
+ | * http://openweb.eu.org/articles/initiation_absolue/ | ||
+ | |||
+ | Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | ||
+ | * http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html | ||
+ | * http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html | ||
+ | * http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html | ||
+ | * http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html | ||
+ | * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]] | ||
+ | * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]] | ||
+ | |||
+ | |||
+ | ==== Introduire une marge ==== | ||
+ | |||
+ | Il est possible de définir des marges en css: | ||
+ | |||
+ | - les marges autour de l'élément : margin | ||
+ | |||
+ | - les marges à l'intérieur de l'élément : padding | ||
+ | |||
+ | <code css> | ||
+ | margin:10px; /* marge de 10 pixels tout autour de l'élément*/ | ||
+ | margin:1%; /*marge de 1% tout autour de l'élément*/ | ||
+ | margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/ | ||
+ | margin-left:10px; | ||
+ | padding: 10px; | ||
+ | padding: 5px 6px 7px 8px; | ||
+ | </code> | ||
+ | |||
+ | ==== Survol d'un élément ==== | ||
+ | |||
+ | Quand on passe la souris sur un article, le fond change de couleur : | ||
+ | |||
+ | <code css> | ||
+ | li:hover{ | ||
+ | /* attributs css */ | ||
+ | } | ||
+ | </code> | ||
+ | http://www.w3schools.com/cssref/sel_hover.asp | ||
+ | |||
+ | ==== Centrer un texte ==== | ||
+ | http://www.w3schools.com/cssref/pr_text_text-align.asp | ||
+ | |||
+ | ==== Création des articles du blog ==== | ||
+ | |||
+ | En utilisant les balises HTML 5 article et aside créer la liste des articles de votre blog. | ||
+ | |||
+ | Un article étant caractérisé par : | ||
+ | - un titre | ||
+ | - une date | ||
+ | - un texte | ||
+ | - un visuel éventuel | ||
+ | |||
+ | ===== Iframe ===== | ||
+ | [[http://www.w3schools.com/tags/tag_iframe.asp|En savoir plus.]] | ||
+ | |||
+ | Soit le code d'une page contenant une iFrame. | ||
+ | <code html> | ||
+ | <iframe src="iframe0.htm" id="iframe_0"></iframe> | ||
+ | <p><a href="http://www.w3schools.com" target="iframe_0">W3Schools.com</a></p> | ||
+ | |||
+ | <p><b>Note:</b> Parce que la cible du lien correspond au nom de l'Iframe, le lien s'ouvrira dans l'Iframe.</p> | ||
+ | </code> | ||
+ | |||
+ | pour le fichier ''iframe0.htm'', par exemple : | ||
+ | <code html> | ||
+ | <body style="background-color:#F5DEB3"> | ||
+ | <h1>Cette page sera visualisée dans l'IFRAME </h1> | ||
+ | </body> | ||
+ | </code> | ||
+ | |||
+ | |||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Tester cet {{:2013_2014:s1:docweb:approfondissementhtml:iframe.zip|Exemple de codes}} | ||
+ | </box> | ||
+ | |||
+ | Voici un exemple classique de code, produit par google map : | ||
+ | <code html> | ||
+ | <iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/?ie=UTF8&t=h&ll=43.552529,6.987305&spn=0.955471,1.757813&z=9&output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&t=h&ll=43.552529,6.987305&spn=0.955471,1.757813&z=9&source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small> | ||
+ | </code> | ||
+ | Mais ce format n'est pas valide en html5. | ||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Corrigez cette définition pour être conforme à la norme html5: vous aurez besoin de //''seamless'' : Specifies that the <iframe> should look like it is a part of the containing document.// | ||
+ | * Ajouter une telle carte dans votre site web. | ||
+ | </box> | ||
+ | |||
+ | |||
+ | |||
+ | ===== Après les TDs 3 et 4, je sais répondre à ===== | ||
+ | |||
+ | <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | ||
+ | * Comment créer des liens relatifs ou absolus? | ||
+ | * Comment créer un lien vers une partie précise d'un document? | ||
+ | * Comment ouvrir un lien dans une nouvelle fenêtre? | ||
+ | * Comment permettre à l'utilisateur d'envoyer un email en pré-remplissant l'adresse email? | ||
+ | * Quels sont les types de marge sur lesquelles vous pouvez agir? | ||
+ | * Comment placer les éléments relativement les uns aux autres? | ||
+ | * Comment forcer l'affichage d'un tableau à respecter les dimensions qu'on lui a donné ? | ||
+ | * Comment centrer un texte? | ||
+ | * A quoi sert un identifiant? une classe? | ||
+ | * A quoi sert l'attribut "float"? | ||
+ | * Que signifie : <code>li:nth-child(even) { color: green; }</code> | ||
+ | </box> |