User Tools

Site Tools


2013_2014:s1:docweb:approfondissementhtml:start

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
2013_2014:s1:docweb:approfondissementhtml:start [2013/12/04 07:00] – [Les tableaux] blay2013_2014:s1:docweb:approfondissementhtml:start [2014/02/04 13:50] (current) – [Les liens hypertextes] blay
Line 46: Line 46:
 Si le document ciblé //(par exemple, index.html)// se trouve dans un répertoire au dessus à que celui où l'on est: vous pouvez y faire référence par Si le document ciblé //(par exemple, index.html)// se trouve dans un répertoire au dessus à que celui où l'on est: vous pouvez y faire référence par
 <code> <a href="../index.html">..</a> </code> <code> <a href="../index.html">..</a> </code>
 +
 +
 +Pour tester les liens de votre page web : [[http://validator.w3.org/checklink|Link Checker]]
  
 ==== Lien vers un endroit précis d'une page ==== ==== Lien vers un endroit précis d'une page ====
Line 173: Line 176:
 Vous allez nous démontrer que vous savez à présent retrouver tout seul des informations sur le web !! 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 :  > <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
Line 195: Line 200:
   * [[http://www.w3schools.com/cssref/pr_border-collapse.asp|border-collapse]]   * [[http://www.w3schools.com/cssref/pr_border-collapse.asp|border-collapse]]
  
-  * une nouvelle de CSS3 nth-child(exp) pour avoir le nieme enfant, on peut spécifier paire, impaire ... très pratique pour +  * Vous pouvez tester la nouvelle balise de CSS3 nth-child(exp) pour avoir le nieme enfant
-sélectionner des lignes dans un tableau.+        vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau.
  
 ===== Structure d'une page web html5 ===== ===== Structure d'une page web html5 =====
Line 230: Line 235:
 Ce style est utilisé pour structurer la barre de navigation. Ce style est utilisé pour structurer la barre de navigation.
 ==== Placements relatifs ==== ==== 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. Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/  pour construire par exemple la barre de menu.
Line 240: Line 248:
 http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html</note> 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 ==== ==== Affichage à l'horizontal ou à la vertical : CSS Display ====
Line 310: Line 319:
 </box> </box>
  
-===== Animations =====+=====  Transformations, Translations, Animations, ... =====
  
  
Line 411: Line 420:
        * a:hover   {color:red;}        * a:hover   {color:red;}
        * a:active  {color:yellow;        * 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> </box>
 ===== Références ===== ===== Références =====
  
 [[http://cinema-series.orange.fr/evenement/treme/|Un très beau site]] [[http://cinema-series.orange.fr/evenement/treme/|Un très beau site]]
2013_2014/s1/docweb/approfondissementhtml/start.1386140426.txt.gz · Last modified: 2013/12/04 07:00 by blay