Differences

This shows you the differences between two versions of the page.

--- 2015_2016:s1:webdoc:td4 [2015/10/06 12:52] – created urli
+++ 2015_2016:s1:webdoc:td4 [2015/11/30 14:43] (current) – [Sprite] urli
@@ Line 1: / Line 1: @@
 ====== 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&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;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>