Formation XHTML / CSS Les liens internes à la page

Cours XHTML / CSS Les liens internes à la page, tutoriel & guide de travaux pratiques en pdf.

Organiser son texte

Différence entre le texte « de l’éditeur » et le texte « du navigateur »
Voici le body d’une page html :
<body>
<p>
Bonjour et bienvenue sur mon site !
Pour l’instant c’est un peu vide, mais revenez plus tard quand j’aurai appris plus de choses,
</p>je vous assure que vous allez être surpris !
</body>
Cette page sera interprété comme ceci par un navigateur :
On remarque que les espaces à gauche de « bonjour … » et de « pour … » on été ignorés.
Ainsi que tout les sauts de ligne.
Et si on diminue la fenêtre du navigateur ; Il gère lui même les retours à la ligne …
Sauter une ligne
Si on veut sauter une ligne :
il faut le demander explicitement au navigateur avec la balise <br />.
Attention cette balise doit obligatoirement être dans un paragraphe. Pas en dehors.

Commentaire

La balise de commentaire est la seule à ne pas être symétrique :
<!– ceci est un commentaire qui ne sera pas affiché –>
Comme le navigateur n’affiche ni les retours chariot ni le contenu des balises commentaire, n’hésitez pas à en abuser.
Afficher un titre
Il existe 6 balises pour afficher des titres en XHTML : de <h1> à <h6>
Ces 6 balises correspondent à des importances de titre :
<h1> = Gros titre très important
…
<h6> = Petit titre a peine mis en avant
Il n’y a pas d’ordre : Vous pouvez utiliser un <h3> sans avoir mis de <h1> ou de <h2> avant …
Un exemple de page web affiché avec Firefox 3 (a gauche) et IE 6 (à droite)
Et si je veux un titre centré écrit en rouge et souligné ?
Nous verrons cela avec les CSS. Ce qui est important, c’est de retenir que <h1> ne signifie pas « Times New Roman, taille 16 pt », mais « Titre important ».
Ce sont les CSS, qui dirons que « Les titres importants sont centrés, rouges et soulignés »
Mettre, un peu, en valeur le texte : <em>
La balise <em> (pour embedded) permet de mettre un peu en avant une partie du texte.
Par défaut (sans CSS) le texte est juste en italique.
Mettre, beaucoup, en valeur le texte : <strong>
La balise <strong> permet de mettre plus en avant une partie du texte.
Par défaut (sans CSS) le texte est juste en gras.
Ex :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr »> <head>
<title>Ma première page web</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ /> </head>
<body>
<h2>Bonjour et bienvenue sur mon site !</h2> <p>
Pour l’instant c’est <em>un peu</em> vide, <br />
mais revenez dans 2-3 jours quand j’aurai appris un peu plus de choses, <strong>je vous assure que vous allez être surpris !</strong>
</p>
</body>
</html>
Donne :
Mettre en exposant ou en indice <sup> et <sub>
<sup> pour mettre en indice. ex 1<sup>er</sup> donne : 1er
<sub> pour mettre en exposant. ex CO<sub>2</sub> donne : CO2
Les citations <q> et <blockquote>
<q> pour quote (Citation) et <blockquote> pour Citation de bloc …
En XHTML, on distingue 2 types de balises :
● Les balises de type inline : ce sont des balises que l’on utilise à l’intérieur d’un paragraphe. C’est le cas notamment des balises <strong>, <em>, <q> etc…
● Les balises de type bloc : ces balises servent à structurer la page en plusieurs « blocs ». C’est le cas notamment des balises <p>, <h1>, <h2>, <blockquote>… Chacune de ces balises constitue un bloc séparé.
Par défaut (Sans CSS) <q> met le texte entre guillemets et <blockquote> crée un retrait de quelques centimètres à gauche.

Les acronymes

En français un acronyme est une suite d’initiales qui est devenu un nom (Radar, ovni, laser, sida …).
En anglais c’est – juste – un mot composé d’initiales, comme par exemple XHTML, SNCF, CD …
La balise <acronym> permet de fournir une aide instantanée sur un mot.
<acronym> fonctionne avec un attribut (title) :
<p>Le <acronym title= »eXtensible HyperText Markup Language »>XHTML</acronym> est le langage qui permet de créer un site web.</p>
Si vous laissez la souris sur XHTML, la description de l’acronyme apparaît.
Vous noterez encore une petite différence entre IE et Firefox : Firefox souligne en pointillés l’acronyme, tandis qu’IE… ne fait rien
Les liens Hypertext

Les liens internes à la page

C’est la balise <a> qui gère tous les types de liens
Pour faire, par exemple, un lien pointant vers le bas de la page, il faut deux choses.
La cible
En bas de la page (ou en haut …), on ajoute l’attribut id= à une balise qui encadre le texte ciblé <p id= »nom »> (par exemple, mais on aurait put utiliser un <h2 id= »nom »>)
Le lien.
Autre part dans le document, on encadre le texte qui fera lien entre <a href= »#nom »> et </a>
Exemple :
<a href= »#fondpage »>Aller en bas</a>
<p id= »fondpage »>Fond</p>
Les liens internes au site
C’est le même fonctionnement, mais encore plus simple car il n’y a pas de NAME à préciser
(puisque la page-cible sera simplement désignée par son nom de fichier.)
<a href= »PageDeux.html »>Passer à la page suivante</a>
Il faut juste s’assurer que le fichier soit bien à l’endroit spécifié, le plus simple étant de mettre toutes les pages du site dans un même répertoire.
Attention : Contrairement à Windows, Linux est sensible à la case. PageDeux.html et Pagedeux.html sont deux fichiers différents.
Attention : Si les fichiers ne se trouvent pas dans le même dossier :
Il faudra préciser le chemin relatif : « dossier/cible.html »
Ne confondez pas avec les antislash (\) de Windows : sur Internet, on utilise TOUJOURS des slash (/)

Les liens externes

Fonctionne comme les liens internes, mais au lieu de référencer un fichier sur le même serveur, il faut préciser une URL.
<a href= »http://www.whitehouse.gov/ »>Pour s’entrainer au hacking</a>
On précise TOUJOURS le protocole dans un lien (http://).
Si vous faites un lien vers un site qui comporte une adresse avec des paramètres (&), comme :
http://www.site.com/?data=15&name=toto&source=ms
Vous devrez remplacer tous les (&) par (&) comme ceci :
http://www.site.com/?data=15&name=toto&source=ms
Cela est nécessaire pour que votre page web respecte les normes du XHTML.

Les liens vers un e-mail

Pour lancer automatiquement le programme de Mail par défaut et remplir quelques champs, il suffit d’utiliser la syntaxe suivante :
<a href= »mailto:xxxxxxx@xxxxxx.xx »>texte</a>
Pour proposer un sujet par défaut, il faut libeller le lien ainsi :
<a href= »mailto:president@elysee.fr?subject=Salut Nico »>Ici</a>

Les liens qui ouvrent une nouvelle page

Même si beaucoup de sites le font, en XHTML il n’est plus possible d’ouvrir les liens dans une nouvelle fenêtre.
C’est une décision volontaire : Ceci afin de ne pas gêner la navigation du visiteur qui n’a pas forcément envie de voir 50 fenêtres de son explorateur ouvertes.
C’est au visiteur de décider lui-même s’il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj
+ Clic sur le lien (fonctionne sur IE et Firefox), ou encore mieux : Ctrl + Clic (pour ouvrir dans un nouvel onglet dans Firefox).
Enfin, chose importante : les personnes non-voyantes4 qui surfent sur le web sont perturbées par l’ouverture d’une nouvelle fenêtre de leur navigateur. Quand une nouvelle fenêtre s’ouvre, il n’est plus possible de faire « Précédente ».
Lien vers une ancre située dans une autre page
L’idée, c’est de faire un lien qui ouvre une nouvelle page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c’est assez simple : il suffit faire suivre le nom de la page d’un dièse (#), suivi du nom de l’ancre.
Par exemple :
<a href= »cible.html#rollers »>
vous amènera sur la page cible.html, directement au niveau de l’ancre appelé « rollers ».
… Si cette ancre existe.
4 Valable aussi pour les handicapés qui ont un écran de 4 pouces (Smartphones …)

Les images

Les formats d’image
● Le jpeg (ou jpg) convient très bien pour les photos.
● Le png est le plus récent. Ce format est adapté « à tout ce qui n’est pas une photo ». Le PNG gére très bien la transparence.
● Le gif est un format assez vieux (et propriétaire) mais qui reste très utilisé par habitude. Aujourd’hui, le PNG est bien meilleur que le GIF : les images sont plus légères et la transparence est meilleure.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu’à plusieurs millions de couleurs). Le format GIF conserve quand même un avantage que le PNG n’a pas : il peut être animé. (C’est l’image qui est animée en elle même, pas de traitements particuliers au niveau du xhtml)
Le bmp est à bannir : car non compressés, donc trop gros, donc pas adaptés au web.

La balise <img />

C’est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs, et 2 d’entre eux sont indispensables :
● src : il indique où se trouve l’image que l’on veut insérer. Le nom de fichier est un nom relatif. Ainsi, si votre image est dans un sous-dossier « images » vous devrez taper : src= »images/fleur.png »
● alt : pour « texte alternatif ». On doit toujours indiquer un texte qui décrit ce que contient l’image. Ce pour 4 raisons :
– Ce texte sera affiché à la place de l’image si celle-ci ne peut pas être téléchargée
– Ce texte sera affiché à la place de l’image sur les navigateurs de personnes handicapées (non-voyants)
– Ce texte est indexé par les moteurs de recherche (pour leur section Image)
– Sinon, votre page ne sera pas « XHTML valide ».
par exemple : alt= »Une fleur »
Note : On peut, pour l’attribut src indiquer une url (src= »http://www.site.com/fleur.png »), mais cela ralentit l’affichage (Le navigateur doit se connecter au site une fois par image).
Voici un exemple d’insertion d’image :
<p>Voici une photo que j’ai prise lors de mes dernières vacances :<br /> </p> <img src= »images/hawai.jpg » alt= »Photo de Hawaii » />
Note : Évitez les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Si votre image ne s’affiche pas, c’est très généralement parce que le chemin est incorrect !
Note : les images se mettent obligatoirement à l’intérieur d’un paragraphe (<p></p>). Si vous ne le faites pas, comme pour « alt » la page s’affichera peut-être correctement mais elle ne sera alors plus valide.

Les liens via une image

Pour avoir une image qui sert de lien hypertext, il suffit de combiner la balise <a> et la commande <img> :
<p>Cliquez sur la vache pour nous rejoindre</p>
<a href= »pagedeux.Html »><img src= »cow.gif » alt= »Page suivante »></a>
Facile non ?
Les infobulles sur les images
L’attribut fait pour afficher une bulle d’aide est le même que pour les liens, c’est title. Cet attribut est facultatif.
<p>Voici une photo que j’ai prise lors de mes dernières vacances :<br /> </p> <img src= »images/hawai.jpg » alt= »Photo de Hawaii » title= »Cool non ? » />
A nouveau Internet Explorer ne suis pas les règles du W3C : En l’absence de title, il utilise alt pour afficher un infobulle. Ce n’est pas normal.

Premiers CSS

Le xhtml sert à gérer le contenu (ce que l’on écrit).
Les CSS servent à gérer la présentation (comment on l’écrit).
Ce principe de séparation de la forme et du fond est à la base de la création de page web.
Pour commencer, un peu de motivation :
Allez jeter un oeuil au site zengarden : www.csszengarden.com/tr/francais/
Le principe de ce site : C’est une même page xhtml qui est conjugué avec des css différent. (Cliquez sur la colonne de droite pour en changer) Impressionnant non ?
(Le fichier xhtml sans css : www.csszengarden.com/zengarden-sample.html)
Ou écrire les CSS ?
Dans un fichier .css le plus souvent on écrit du code CSS dans un fichier spécial ayant l’extension .css (contrairement aux fichiers XHTML qui ont l’extension .html).
C’est – de loin – la méthode la plus pratique car :
Elle permet proposer facilement plusieurs designs différents à vos visiteurs.
Elle permet de regrouper les styles pour toutes les pages de votre site.
Si vous utilisez Notepad++, pensez à aller dans le menu « Langage / CSS » pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
Concrètement : Il faudra ajouter une ligne dans votre fichier .html entre les balises <head> </head> comme ceci :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » > <head>
<title>Exemple d’utilisation de CSS externe</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ /> <link rel= »stylesheet » media= »screen » type= »text/css » title= »Design »
href= »design.css » />
</head>
<body>
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
<p>Cette page comporte une feuille de style externe. C’est la meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>
La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d’entre eux :
● title : c’est le nom que vous donnez à votre feuille de style (Pas de contraintes)
● href : c’est l’emplacement où se trouve votre feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier, mais je vous recommande de le mettre dans un sous-dossier « styles/ » par exemple.
Dans la section <head>
Il est aussi possible de taper du CSS directement à l’intérieur même du fichier XHTML, entre les balises <head> </head>. Vous devrez y mettre une balise <style> </style> à l’intérieur, comme ceci
<style type= »text/css »>
/* Vous taperez votre code CSS ici */
</style>

Directement dans la balise

Cette méthode consiste à ajouter un attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les balises. Par exemple sur un titre :
<h1 style= »/* Votre style pour cette balise ici */ »>Titre</h1>
Je vous rappelle que seule la première méthode vous permettra d’avoir de n’écrire qu’une fois chaque style.
● Des noms de balises dont on veut modifier l’apparence. Par exemple, pour modifier l’apparence de tous les titres <h1>, écrire h1
● Des propriétés CSS : Par exemple la propriété color qui permet d’indiquer la couleur du texte, font-size pour la taille du texte …
● Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on veut …
Formation XHTML / CSS page 12 / 62
Chaque propriété est suivie du symbole « deux-points » (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;)

L’attribut class

C’est le cœur des css. Il sert à personnaliser des présentation.
Ce que je vous ai montré jusqu’ici a un défaut : cela implique par exemple que TOUS les paragraphes soient écrits par exemple en bleu / 18 pixels.
Il existe, bien sur, un attribut spécial qui fait que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d’une manière différente : L’attribut class
Il fonctionne sur toutes les balises :
<h1 class= » »> </h1>
<p class= » »></p>
<img class= » » />
Comme valeur, on met … ce qu’on veut.
Comme l’a dit Neil Armstrong un 20 juillet 1969 : <q class= »important »>C’est un petit pas pour l’homme, un grand pas pour l’humanité</q><br />
Il a également déclaré un 12 février 1978 : <q>Tiens, j’ai envie de frites
Note : Pour monter qu’il sagit d’une classe et nom d’une balise, on le précède d’un point.

Les balises universelles

Il arrivera parfois que vous ayez besoin d’appliquer une class à certains mots qui ne sont pas entourés par des balises. (class étant un attribut, vous ne pouvez le mettre que sur une balise.)
On a inventé les balises-qui-ne-servent-à-rien :
● <span> : c’est une balise de type inline (une balise qui se met à l’intérieur d’un paragraphe, comme <strong>, <em>, <q>).
● <div> : c’est une balise de type bloc. (Comme <p>, <h1> etc…) Elle crée un nouveau « bloc » dans la page, et provoque donc obligatoirement un retour à la ligne.