Allons plus loin

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

Regardez l'exemple ci après et comprenez comment définir des zones cliquables dans une image : http://www.w3schools.com/tags/tag_area.asp

Pour créer la carte, 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/css3/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

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

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

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.

Vous aurez aussi besoin de :

• table-layout
• 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.

Voici un schéma exemple de découpage d'une page HTML5.

Nous nous proposons à présent de structurer votre propre page web en utilisant ces balises. Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après.

En savoir plus

Par exemple,

list-style: none;

Ce style est utilisé pour structurer la barre de navigation.

Regardez le tutoriel sur

1. http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
2. http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
3. http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
4. http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu.

• Affichage relatif des éléments (bien regarder tous les exemples...
• Placer en dessous (clear)

Extrait les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale). Si on ne veut pas un tel comportement, on utilise “inline”. Dans une suite de paragraphes ou une liste les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant).

http://www.w3schools.com/cssref/pr_class_display.asp

• A utiliser en particulier pour nav, section, footer …

En savoir plus

• En particulier autour des éléments qui constituent la barre de navigation.

http://www.w3schools.com/cssref/pr_dim_width.asp

• Quand on passe la souris sur un article, le fond change de couleur.

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/pr_text_text-align.asp

En savoir plus.

Soit le code d'une page contenant une iFrame.

<iframe src="iframe0.htm" id="iframe_0"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_0">W3Schools.com</a></p>
 
<p><b>Note:</b> Parce que la cible du lien correspond au nom de l'Iframe, le lien s'ouvrira dans l'Iframe.</p>

pour le fichier iframe0.htm, par exemple :

<body style="background-color:#F5DEB3">
<h1>Cette page sera  visualisée dans l'IFRAME </h1>
</body>

Voici un exemple classique de code, produit par google map :

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>

Mais ce format n'est pas valide en html5.

img:hover {
  -webkit-transform: translate(0, -20px);
 /* -moz-transform: translate(0, -20px);
  -ms-transform: translate(0, -20px);
  -o-transform: translate(0, -20px);
  transform: translate(0, -20px); /* déclenchement de la transition au survol */
*/
}

(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)

a {
	font-size: 3em;
	font-weight: bold;
	color: #789;
	text-decoration: none;
 	-webkit-transition-property: color;
	-webkit-transition-duration: 3s;
 
	/* Pour Firefox */
	/* -moz-transition-property: color;
	-moz-transition-duration: 2s; */
 
	/* … et lorsque ce sera standardisé 
	transition-property: color;
	transition-duration: 1s; */
 
}

(source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm)

http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm

Regardez et amusez vous à partir du site ci-après.

Par exemple :

.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; }
@-webkit-keyframes anim2
{
   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
   50%  {left: 600px; -webkit-transform: scale(0.5) rotate(10deg)  }
   to   {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) }
}

Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique.

L'image est ici : http://www.w3schools.com/css/img_navsprites.gif

Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Un très beau site