10/10/14
Un site Web est en général constitué de plusieurs pages; un lien HTML
est un moyen d’aller d’une page à une autre du site en cliquant sur un texte (ou une
image). Pour placer un lien dans un fichier HTML on utilise la balise html "a";
c’est une balise double et elle nécessite un attribut nommé HREF. Cet attribut indique
l'adresse de la page liée. Le principe est le suivant :
<a href= « adresse du fichier html de la page à afficher»> texte à
cliquer pour déclencher le lien </ a>
Un lien interne est un lien entre les pages d'un même site.
Construisez une page un.html dans un dossier appelé "monsite". Copiez le texte suivant dans la page un : Bonjour, lien vers le document deux
Balisez "bonjour" et "lien vers.." comme paragraphes.
Construisez une page deux.html dans le dossier "monsite" à coté de "index.html"; Copiez le texte suivant dans la page deux : au revoir ; lien vers le document un ; balisez le comme deux paragraphes.
Pour lier la page un.html à la deux.html, modifiez la page un.html : <a href="deux.html">lien vers le document deux</a>
Vérifiez que le lien fonctionne; faites le lien retour dans la page deux.
Cette façon de référencer le fichier lié (c'est à dire ce qu'on met dans href) s'appelle : adressage relatif (par opposition à adressage absolu que nous ne verrons pas pour l'instant).
Exemple d'adressage absolu (à ne pas utiliser) : href="file://C:Documents and settings....."
Créez maintenant un dossier autres dans le dossier Monsite et déplacez le document deux.html dans ce dossier; les liens ne fonctionnent plus. Modifiez le lien dans un.html en corrigeant par : href="autres/deux.html"; maintenant le lien de un vers deux fonctionne mais pas le lien de deux vers un. Corrigez le lien du document deux : href="../un.html".
Créez un autre dossier dans Monsite appelé pages ; déplacez un.html dans ce dossier; de nouveau, les liens ne fonctionnent plus. Corrigez les (href=....) en vous inspirant de l'exemple précédent.
On peut aussi créer des liens vers des pages d'autres sites. Dans ce cas, l'attribut href doit indiquer l'adresse internet complète (l'URL) de la page visée : href="http://....."
Faites un lien dans votre page un.html vers la page d'accueil de l'UPV
Dans votre CV rajoutez des liens vers des sites en rapport avec les informations que vous donnez. (site de votre lycée, université, de votre ville natale, de vos employeurs)
Lorsqu'une page Web est assez longue, le navigateur met des ascenseurs dans la fenêtre d'affichage ; mais il peut être plus convivial de faire des liens internes à la page, par exemple "cliquer ici pour aller en haut de page", "Cliquer pour aller en bas de page", etc...
Ce genre de lien s'appelle une "ancre". Le principe est de repérer chaque endroit nécessaire de la page (créer des ancres), puis de créer des liens vers ces ancres.
Création d'une ancre : une ancre est un attribut que l'on ajoute à une balise, il s'appelle "identificateur" et se note "id".
Exemples:
<body id="debut" ...>, <p id="un" ...>, <h1 id="premier"...>, etc ...
Pour le choix du nom de l'identificateur (début, un, premier, ...) la seule règle est que dans une page web chaque nom d'identificateur est unique, c'est à dire deux balises d'une même page ne peuvent avoir le même nom d'identificateur. Toute balise du corps du HTML peut avoir un id.
On peut ainsi repèrer des endroits d'une page Web en nommant les balises correspondantes.
Une fois les balises nommées, on rajoute dans la page un "menu de navigation" qui permet au visiteur d'aller directement sur chaque partie de la page. Il est habituel en HTML de faire un menu en utilisant les balises de liste :
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Il faut ensuite rendre les items cliquables en utilisant des balises de lien. L'exemple ci-dessous vous donne les dernières informations pour faire fonctionner les ancres.
Exemple à compléter :
<html>
<head>
<title>CV de ....</title>
</head>
<body>
<h1>Mon CV sur le Web</h1>
<ul>
<li>Mes coordonnées</li>
<li>Mes années lycée</li>
<li>Mes années université</li>
<li>Mon projet professionnel</li>
<li><a href="#passions">Mes passions</a></li>
</ul>
<h2>Mes coordonnées</h2>
texte long
<h2>Mes années lycée</h2>
texte long
<h2>Mes années université</h2>
texte long
<h2>Mon projer professionnel</h2>
texte long
<h2 id="passions">Mes passions</h2>
texte long
<p>revenir en début de pade</p>
</body>
</html>
Une table est une structure du HTML qui permet de représenter des données en lignes et colonnes. Pour étudier les nouvelles balises nécessaires, nous prendrons l'exemple d'une page Web pour un site touristique dans laquelle on veut intégrer une liste d'hotels avec leurs caractéristiques ; un exemple :
| Name | Location | Price | Phone | Availability | Lens |
| East Brother Island Light | Point Richmond, CA | $290-$410 | (510) 233-2385 | Thursday though Sunday, all year | Operational |
| Point Arena Light | Point Arena, CA | $140-$170 | (877) 725-4448 | All week, all year | Operational |
table : Une table html est indiquée par la balise : <table>......</table>
tr : Une table est une suite de ligne ; chaque ligne est indiquée par la balise <tr> :
exemple table de deux lignes : <table><tr>....</tr><tr>.....</tr></table>
td : chaque ligne de la table est un ensemble de cellules ; balise : <td>
Exemple : chaque ligne comprend trois cellules :
<table><tr><td>....</td><td>...</td><td>....</td></tr><tr><td>....</td><td>...</td><td>....</td></tr></table>
Dans chaque cellule on peut insérer du texte, etc ...
Affichez le code source de la page de ce cours et regardez les balises de la table ci-dessus.
Faites un tableau de deux lignes et trois colonnes contenant du texte dans les cellules des colonnes un et deux et une image dans chaque cellule de la colonne trois.
Sur votre cv créez une table de vos années lycée...