Differences

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

--- 2015_2016:s1:webdoc:td4 [2015/11/20 11:20] – gjannon
+++ 2015_2016:s1:webdoc:td4 [2015/11/30 14:43] (current) – [Sprite] urli
@@ Line 1: / Line 1: @@
 ====== TD4 Web ======
+Inspiré du cours de Mr Rey Gaëtan
 ===== Structure d'une page web html5 =====
@@ Line 11: / Line 13: @@
 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:capture.jpg|exemple}}
+  * 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.
@@ Line 27: / Line 32: @@
 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
+Nous utiliserons le positionnement flottant.
- <code css>
+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.
-list-style: none;
-</code>
-Pour en savoir plus sur les possibilités de positionnement :
+Quelques éléments sur les flux et le positionnement relatif :
-   - http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
+   * http://openweb.eu.org/articles/initiation_flux/
-   - 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
+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.
-Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/  pour construire par exemple la barre de menu.
+<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>
-<note warning>Pour en faire un peu plus,
+Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible.
-http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html</note>
+Comprendre les float :
+   * http://openweb.eu.org/articles/initiation_float/
-   * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]]
+Pour restreindre sa largeur il est possible de donner une taille à l'élément:
-   * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]]
-==== Affichage à l'horizontal ou à la vertical : CSS Display ====
+<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.
-//[[http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html|Extrait]]
+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.
-les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale).
-Si on ne veut pas un tel comportement, on utilise "inline". Dans une suite de paragraphes ou une liste
+<code css>
-les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant). //
+clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/
+</code>
-http://www.w3schools.com/cssref/pr_class_display.asp
+Elements supplémentaires sur les positions fixes et absolues :
+   * http://openweb.eu.org/articles/initiation_absolue/
-  * A utiliser en particulier pour //nav, section, footer// ...
+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 ====
-[[http://css.mammouthland.net/margin-padding-css.php|En savoir plus]]
+Il est possible de définir des marges en css:
-  * En particulier autour des éléments qui constituent la barre de navigation.
+- les marges autour de l'élément : margin
+- les marges à l'intérieur de l'élément : padding
-==== Largeurs ====
+<code css>
-http://www.w3schools.com/cssref/pr_dim_width.asp
+   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.
+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
@@ Line 84: / Line 120: @@
 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 =====
@@ Line 120: / Line 164: @@
 </box>
-=====  Transformations, Translations, Animations, ... =====
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-  * Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations.
-</box>
-==== Déplacement au survol de l'image ====
-<code css>
-img:hover {
-  -webkit-transform: translate(0, -20px);
- /* -moz-transform: translate(0, -20px);
-  -ms-transform: translate(0, -20px);
-  -o-transform: translate(0, -20px);
-  transform: translate(0, -20px); /* déclenchement de la transition au survol */
-*/
-}
-</code>
-(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)
-==== Changement de couleur d'un lien doucement ====
-<code css>
-a {
-	font-size: 3em;
-	font-weight: bold;
-	color: #789;
-	text-decoration: none;
- 	-webkit-transition-property: color;
-	-webkit-transition-duration: 3s;
-	/* Pour Firefox */
-	/* -moz-transition-property: color;
-	-moz-transition-duration: 2s; */
-	/* … et lorsque ce sera standardisé
-	transition-property: color;
-	transition-duration: 1s; */
-}
-</code>
-(source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm)
-==== Amusez-vous ====
-http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm
-Regardez et amusez vous à partir du [[ http://animateyourhtml5.appspot.com/pres/index.html#5|site ci-après]].
-Par exemple :
-<code css>
-.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; }
-@-webkit-keyframes anim2
-{
-   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
-%  {left: 600px; -webkit-transform: scale(0.5) rotate(10deg)  }
-   to   {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) }
-}
-</code>
-Et un peu plus :  http://html5demo.braincracking.org/, caractéristique par caractéristique.
-==== Sprite: section à venir ====
-L'image est ici : http://www.w3schools.com/css/img_navsprites.gif
-Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
-http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
+===== Après les TDs 3 et 4, je sais répondre à =====
-===== Je sais répondre à =====
 <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à :   >
@@ Line 207: / Line 175: @@
   * Quels sont les types de marge sur lesquelles vous pouvez agir?
   * Comment placer les éléments relativement les uns aux autres?
-  * Les selecteurs en CSS, que signifie
-       *  ol li ?
-       * h1, h2 ?
-       * h1+h2
-       * ol > li
-  * Comment noter
-       * les descendants de l'identifiant "mainzone"?
-       * le frère adjacent à h1 ?
-       * toutes les balises?
-  * que signifient
-       * a:link    {color:green;}
-       * a:visited {color:green;}
-       * a:hover   {color:red;}
-       * a:active  {color:yellow;}
   * Comment forcer l'affichage d'un tableau à respecter les dimensions qu'on lui a donné ?
   * Comment centrer un texte?
-  * Comment forcer les cellules d'un tableau à partager des bordures communes? non communes?
   * A quoi sert un identifiant? une classe?
   * A quoi sert l'attribut "float"?
   * Que signifie : <code>li:nth-child(even) { color: green; }</code>
 </box>
-===== Références =====
-[[http://cinema-series.orange.fr/evenement/treme/|Un très beau site]]