Differences

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

--- 2013_2014:s1:docweb:approfondissementhtml:start [2013/11/20 08:45]
blay [Les tableaux]
+++ 2013_2014:s1:docweb:approfondissementhtml:start [2013/12/04 14:00]
blay [Je sais répondre à]
@@ Line 105: / Line 105: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
   * Ajouter dans votre page web
-      * un lien vers le département d'informatique de l'IUT qui s'ouvre dans une nouvelle fenêtre
+      * un lien vers le département d'informatique de l'IUT qui s'ouvre toujours dans une nouvelle fenêtre
-      * un lien vers l'université de Nice qui s'ouvre dans la même fenetre que précedemment
+      * deux liens (par exemple un vers l'université de Nice et un vers ent)  qui s'ouvrent dans la même fenêtre cible
+      * un lien vers une page de votre site qui n'ouvre pas une nouvelle fenêtre
       * Construire un menu en début de page qui renvoie vers les différentes rubriques de votre page.
 </box>
@@ Line 132: / Line 133: @@
 Pour créer la carte, il existe des outils qui vous permettent de les générer
-par exemple : http://www.maschek.hu/imagemap/
+par exemple : http://www.maschek.hu/imagemap/ (Attention après chargement il faut accepter!!)
+Attention c'est l'attribut "name" qui sert à faire la correspondance entre l'image et les zones (l'id généré par l'outil ne sert à rien).
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-  * Choisissez une photo ou {{ :2013_2014:s1:docweb:approfondissementhtml:sans_titre.png?nolink&300 |prenez celle-ci}}
+  * Choisissez une photo ou prenez celle-ci {{ :2013_2014:s1:docweb:approfondissementhtml:sans_titre.png?nolink&300 |prenez celle-ci}}
   * Utilisez l'outil précédent pour créer une map dans cette image
   * Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances).
@@ Line 155: / Line 158: @@
 </box>
+En savoir plus/mieux:
+  * http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html
+  * http://www.alsacreations.com/tuto/lire/1353-etape-3-couleurs-images-de-fond.html
 ==== Autre arrière-plan  ====
@@ Line 166: / Line 173: @@
 Vous allez nous démontrer que vous savez à présent retrouver tout seul des informations sur le web !!
+Vous commencerez par regarder le tutoriel en ligne :
+http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
@@ Line 180: / Line 189: @@
 </box>
-Vous pouvez vous aider des informations suivantes extraites de http://www.md.ucl.ac.be/didac/hosp/HTcours/tab.htm.
+Vous pouvez vous aider des informations suivantes extraites de http://www.md.ucl.ac.be/didac/hosp/HTcours/tab.htm Mais attention ce site est en html 4 et pas en Xhtml.
 {{ :2013_2014:s1:docweb:approfondissementhtml:capture_d_e_cran_2013-11-20_a_08.39.31.png?nolink&300 |}}
@@ Line 186: / Line 195: @@
 Vous aurez aussi besoin de :
   * [[ http://www.w3schools.com/cssref/pr_tab_table-layout.asp|table-layout]]
-  *
+  * [[http://www.w3schools.com/cssref/pr_border-collapse.asp|border-collapse]]
+  * Vous pouvez tester la nouvelle balise de CSS3 nth-child(exp) pour avoir le nieme enfant:
+       *  vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau.
 ===== Structure d'une page web html5 =====
@@ Line 219: / Line 232: @@
 Ce style est utilisé pour structurer la barre de navigation.
 ==== Placements relatifs ====
+Regardez le tutoriel sur
+   - 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)]]
 Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/  pour construire par exemple la barre de menu.
@@ Line 229: / Line 245: @@
 http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html</note>
+   * [[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)]]
 ==== Affichage à l'horizontal ou à la vertical : CSS Display ====
@@ Line 299: / Line 316: @@
 </box>
-===== Animations =====
+=====  Transformations, Translations, Animations, ... =====
@@ Line 386: / Line 403: @@
   * 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]]

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools