TD3 - XHTML Avancé

Inspiré du cours de Gaëtan Rey.

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 :

<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>

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

 <a href="cible.html">..</a> 

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

 <a href="chapitres/chapitre2.html">..</a> 

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

 <a href="../index.html">..</a> 

Pour tester les liens de votre page web : Link Checker

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 :

<h1 id="intro"> Introduction </h1>

Il suffit de faire un lien en incluant un # devant le nom de la destination.

<a href="#intro"> vers l'introduction </a>

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.

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

<a href="http://www.w3schools.com" target="W3CSchool">Visit W3Schools.com!</a> 

• 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

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> 

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

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

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

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

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

 <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> 

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).

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

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

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

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 :

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

Pour fusionner des colonnes :

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

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.

• Vous pouvez tester la nouvelle balise de CSS3 nth-child(exp) pour avoir le nieme enfant. Exemple :

tr:nth-child(2){
	background:purple;
	width:100px;
	height:50px;
}

• vous pouvez spécifier paire, impaire … très pratique pour sélectionner des lignes dans un tableau.