User Tools
2013_2014:s1:docweb:approfondissementhtml:start
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2013_2014:s1:docweb:approfondissementhtml:start [2013/12/04 08:00] blay [Les tableaux] |
2013_2014:s1:docweb:approfondissementhtml:start [2014/02/04 14:50] (current) blay [Les liens hypertextes] |
||
|---|---|---|---|
| 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 08:00 by blay
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
