====== TD3 - XHTML Avancé ======

Inspiré du cours de Gaëtan Rey.

===== Prélude : Rendre accessible sa page web =====


<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
Ouvrez le logiciel ''FileZilla'' présent dans le répertoire réseau ''R:'' : il s'agit d'un client FTP, un logiciel capable de se connecter à un serveur en utilisant le protocole FTP, afin de transférer des fichiers.
Renseignez les informations suivantes : 
  * Hôte : linserv3
  * Login : votre identifant
  * Password : votre mot de passe
  * Port : 22

Lancez la connection, vous devriez voir des répertoires dans site distant. 
Créez un dossier ''web'' (clic droit dans Site distant, puis Créer un répertoire), ouvrez le et transférez les pages du dernier TD dedans. 

Vous devriez pouvoir y accéder au sein de l'université à partir de l'adresse suivante : http://linserv3/users/etudiant/n/nomIdentifiant/web/ où **nomIdentifiant** correspond à votre identifiant.
L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web

A votre avis, pourquoi l'URL est-elle différente dans l'université ? 

</box>

<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
  * Sur votre page web ou sur une autre page que vous référencez depuis votre page web, vous prévoyez à présent de montrer votre savoir-faire. Les exercices qui suivent se feront dans cette partie. Il vous appartient de bien présenter ce travail pour
      * qu'un internaute extérieur puisse juger de vos compétences,
      * qu'un internaute qui désire apprendre puisse trouver les informations qui l'intéressent,
      * que plus tard, vous sachiez à nouveau refaire ce que vous avez fait aujourd'hui.

Pour cela, vous pouvez à présent travailler dans les fichiers que vous voulez. Le tout étant ensuite de bien regrouper vos travaux dans un site web qui présente votre travail.
</box>

===== Les liens hypertextes =====

Les liens sont la base du web. 

Une ancre (lien hypertexte) est notée <a>...</a> et l'attribut href vous permet de fournir l'url de la page liée.

Pour qu'une image se transforme en référence : 
<code html>
<a href="http://www.iut.unice.fr/formations/departement/id/5_informatique-site-de-nice"> <img src="http://www.iut.unice.fr/themes/default/images/header/logo-iut-nice-transparent.png"/> </a>
</code>

Par contre on ne peut pas placer un élément de bloc, (paragraphe par exemple) dans un lien.

Vous pouvez utiliser des adresses relatives au document de départ. 
Si le document ciblé //(par exemple, cible.html)// se trouve dans le même répertoire que celui où l'on est: vous pouvez y faire référence par
<code> <a href="cible.html">..</a> </code>

Si le document ciblé //(par exemple, chapitre2.html)// se trouve dans un sous-répertoire //(par exemple, chapitres)// à que celui où l'on est: vous pouvez y faire référence par
<code> <a href="chapitres/chapitre2.html">..</a> </code>

Si le document ciblé //(par exemple, index.html)// se trouve dans un répertoire au dessus de celui où l'on est: vous pouvez y faire référence par
<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 ====

=== Nommer la destination ===
Cela revient à mettre un drapeau sur l'endroit où l'on veut revenir, on parle du fragment.

Pour créer une destination, il faut lui donner un nom unique, au sens où il ne doit apparaître qu'une seule fois dans le document, en utilisant l'attribut ''id''.
Par exemple : 
<code html>
<h1 id="intro"> Introduction </h1>
</code>

=== Lien vers la destination ===

Il suffit de faire un lien en incluant un # devant le nom de la destination.
<code html>
<a href="#intro"> vers l'introduction </a>
</code>

=== Lien vers un fragment d'un autre document ===
Pour mettre un lien vers un fragment dans une autre page, il suffit de mettre le lien vers la page puis de rajouter la référence vers le fragment.

<a href="http://www.exemple.com/glossaire.html#debutA"> vers A </a>

Pour savoir s'il existe des identifiants dans une page, il faut afficher le code source.

==== Ouvrir une nouvelle fenêtre du navigateur ====

Si un utilisateur en cliquant sur un lien, remplace le fichier visualisé par le fichier correspondant, il peut être gêné dans sa navigation, voire ne plus jamais revenir sur votre page web par exemple. Il est dans ces conditions possibles d'ouvrir une nouvelle fenêtre dans laquelle visualiser le fichier lié.

Pour cela placer un attribut target dans l'élément ancre (a) e, donnant le nom de la fenêtre dans laquelle ouvrir le document. 

Par exemple
<code html>
<a href="http://www.w3schools.com" target="W3CSchool">Visit W3Schools.com!</a> 
</code>
  * La taille de cette nouvelle fenêtre correspond à la taille de la fenêtre la plus récemment ouverte par le navigateur de l'internaute.
  * Si vous choisissez comme cible ''_blank'', le navigateur ouvrira une nouvelle fenêtre à chaque fois que vous sélectionnerez le lien. 
Par exemple
<code html>
<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> 
</code>

Par contre si vous mettez plusieurs fois la même cible ces liens s'ouvriront dans la même fenêtre.

<note warning>
Attention cependant, ces ouvertures de fenêtres sont déroutantes et peuvent créer des problèmes d'accessibilité. Il vaut mieux éviter cet usage.</note>

==== Courrier électronique ====
<note warning>Pour ce qui suit, il faut que votre navigateur soit configuré pour autoriser et prendre en charge l'envoi d'emails</note>

<code html>
<a href="mailto:blay@unice.fr">Contacter MBF </a> 
</code>


<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 toujours dans une nouvelle fenêtre
      * 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>
===== Les images =====

==== Format d'images ====

Les navigateurs web ne reconnaissent que 3 formats d'image : GIF(utilisation de 266 couleurs maximum), JPEG (16,7 millions de couleurs) et PNG.

==== Taille des images ====

Si vos images sont grosses, les temps de chargements seront longs.
Pour réduire le poids de l'image, vous pouvez la compresser. La compression implique une dégradation de la qualité visuelle. Il convient donc de trouver l'équilibre entre qualité et taille de l'image.

Voici pour réduire la taille des images, il existe des logiciels comme "paint" sur windows.

http://www.commentcamarche.net/faq/3779-diminuer-la-taille-d-une-image

==== Images réactives ====


Il est possible de créer des images réactive en HTML, c'est à dire ou certaines zones sont cliquables et déclenchent une action. 

Par exemple
<code html>
 <img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 
</code>

Pour créer des cartes avancées, il existe des outils qui vous permettent de les générer 
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 :  >
  * Intégrez cette image sur votre page {{ :2015_2016:s1:webdoc:plan_iut_nice.jpg?nolink&450 |prenez celle-ci}}
  * Utilisez l'outil précédent pour créer une map dans cette image. lorsque l'on clique sur l'icone de Nice on est redirigé vers la page de présentation de l'iut Nice (http://www.iut.unice.fr/formations/site/id/4_site-de-nice) de même pour Sophia (http://www.iut.unice.fr/formations/site/id/5_sophia-antipolis).
  * Ajouter cette image devenue active à votre page web (a priori dans la zone de démonstration de vos connaissances).
</box>


==== Images d'arrière-plan  ====

Voici comment positionner des images en arrière-plan :http://www.w3schools.com/css/css3_backgrounds.asp

Par défaut, l'image se place dans le coins en haut à gauche puis se reproduit horizontalement et verticalement, pour remplir tout l'espace.

Pour qu'une image ne se répète pas mettez la valeur ''no-repeat''


<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
  * démontrer votre compréhension de cette rubrique en plaçant des images en arrière-plan de sous-parties de votre partie de démonstration.
</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  ====

http://www.alsacreations.com/tuto/lire/813-css3-background-radial-gradient.html

<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
  * démontrer votre compréhension de cette rubrique en plaçant de tels fonds d'écran en arrière-plan de sous-parties de votre partie de démonstration.
</box>
===== Les tableaux =====

Nous avons vu dans le premier TD comment réaliser un tableau en HTML. 

Il est possible de fusionner des cellules comme dans Excel ;-)

Pour fusionner des lignes :

<code html>
<table>
<tr><td rowspan="2">Cellule fusionnée</td><td>cellule</td></tr>
<tr><td>cellule</td></tr>
</table>
</code>


Pour fusionner des colonnes :

<code html>
<table>
<tr><td colspan="2">Cellule fusionnée</td></tr>
<tr><td>cellule</td><td>cellule</td></tr>
</table></code>


<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
Voici une image qui correspond à une copie d'écran d'un tableau obtenu avec du code html et css, reproduisez exactement le même résultat!! tout d'abord en créant la structure du tableau en html, puis en créant le css associé qui fournira les tailles et les couleurs de chaque cellule.
{{ :2013_2014:s1:docweb:approfondissementhtml:sans_titre.png?nolink&300 |}}
</box>

  * Vous pouvez tester la nouvelle balise de CSS3 nth-child(exp) pour avoir le nieme enfant. Exemple :
<code css>
tr:nth-child(2){
	background:purple;
	width:100px;
	height:50px;
}
</code>
       *  vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau.