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/11/20 08:45] 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 105: | Line 108: | ||
<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 : > | ||
* Ajouter dans votre page web | * 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. | * Construire un menu en début de page qui renvoie vers les différentes rubriques de votre page. | ||
</box> | </box> | ||
Line 132: | Line 136: | ||
Pour créer la carte, il existe des outils qui vous permettent de les générer | 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 : > | <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 | * 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). | * Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances). | ||
Line 155: | Line 161: | ||
</box> | </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 ==== | ==== Autre arrière-plan ==== | ||
Line 166: | 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 180: | Line 192: | ||
</box> | </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 |}} | {{ :2013_2014:s1:docweb:approfondissementhtml:capture_d_e_cran_2013-11-20_a_08.39.31.png?nolink&300 |}} | ||
Line 186: | Line 198: | ||
Vous aurez aussi besoin de : | Vous aurez aussi besoin de : | ||
* [[ http://www.w3schools.com/cssref/pr_tab_table-layout.asp|table-layout]] | * [[ 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 ===== | ===== Structure d'une page web html5 ===== | ||
Line 219: | 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 229: | 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 299: | Line 319: | ||
</box> | </box> | ||
- | ===== Animations ===== | + | ===== Transformations, Translations, Animations, ... ===== |
Line 386: | Line 406: | ||
* Quels sont les types de marge sur lesquelles vous pouvez agir? | * Quels sont les types de marge sur lesquelles vous pouvez agir? | ||
* Comment placer les éléments relativement les uns aux autres? | * 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> | </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]] |