Portfolio et hyperliens ¶

Structure du portfolio ¶

Pour simplifier le développement et être rigoureux dans votre projet, respectez la structure suivante :

portfolio
├── fonts
│   ├── une-fonte.otf
│   ├── une-fonte.woff
│   └── une-fonte.woff2
├── images
│   ├── une-image.png
│   └── une-autre-image.jpg
├── pages
│   ├── un-projet.html
│   └── un-autre-projet.html
├── index.html
└── style.css

Toutes vos pages utiliserons le même style.css, sauf si vous avez besoin d’un style particulier pour une page.

À partir de maintenant, toutes les URLs qui pointeront vers votre contenu devront commencer par un slash / et décrire le chemin du contenu depuis la racine de votre portfolio. Cela simplifiera la mise en ligne de votre site par la suite.

Par exemple, en suivant l’arborescence ci-dessus :

<link href="/style.css" rel="stylesheet">

<img src="/images/une-image.png">
<a href="/pages/un-projet.html">Venez voir mon projet !</a>
<a href="/">Retour à l’accueil</a>

Noms de fichiers ¶

Tous vos noms de fichiers doivent impérativement respecter les critères suivants :

• pas de majuscules
• pas d’espaces
• uniquemenent les caractères suivants :
  • lettres miniscules non-accentuées
  • chiffres 0-9
  • underscore _
  • tiret -

Cela évitera certains problèmes lors de la mise en ligne de votre portfolio, les serveurs étant souvent moins gentils que vos systèmes d’exploitations habituels.

Hyperliens particuliers^[1] ¶

Ancres ¶

On a vu que l’attribut href d’un lien pouvait être une URL absolue (https://wikipedia.com) ou une URL relative (/pages/mon-super-projet.html).

Il existe une troisième possibilité permettant de pointer vers un élément présent sur la page en cours : on appelle cela des ancres.

La syntaxe d’une ancre est la suivante :

<a href="#mon-ancre">Lien vers mon ancre</a>

Ce lien pointera vers le premier élément qui aura pour id mon-ancre :

<div id="mon-ancre">Coucou !</div>

L’attribut id se comporte un peu comme l’attribut class : c’est également une « étiquette » permettant de cibler l’élément, la différence étant qu’un id est conçu pour être unique, c’est-à-dire qu’il ne peut y avoir deux éléments d’un document possédant le même id, ce qui le rend moins intéressant à utiliser en CSS, mais très utile pour faire des sauts dans une page.

mailto: et tel: ¶

Si vous souhaitez pointer directement vers votre email ou votre numéro de téléphone, vous pouvez également utiliser des hyperliens. Les préfixes mailto: et tel: indiquent à votre navigateur d’ouvrir ces liens respectivement dans une application mail ou téléphone.

<a href="mailto:john@example.com">Email</a>

<a href="tel:+123456789">Phone</a>

Éviter le spam sur les mailto:^[2] ¶

Si vous mettez un lien mailto: sur votre site, il est possible que des bots récupèrent cette adresse pour l’ajouter à une liste d’envoi de spam.

Ces robots sont conçus pour naviguer sur internet et récupérer une liste de tout ce qui ressemble à une adresse email.

Pour éviter cela, vous pouvez encoder votre email de façon à la rendre invisible à la plupart des bots.

 <a href="mailto:example@gmail.com">
 <a href="mailto:\&#101;\&#120;\&#97;\&#109;\&#112;\&#108;\&#101;\&#64;\&#103;\&#109;\&#97;\&#105;\&#108;\&#46;\&#99;\&#111;\&#109">
   Contactez-moi sur example@gmail.com
   Contactez-moi sur \&#101;\&#120;\&#97;\&#109;\&#112;\&#108;\&#101;\&#64;\&#103;\&#109;\&#97;\&#105;\&#108;\&#46;\&#99;\&#111;\&#109;
   </a>

Forcer le téléchargement d’un fichier ¶

Ajouter l’attribut download à un lien forcera son téléchargement au lieu d’ouvrir la cible dans une page.

<a href="mon-cv.pdf" download>Mon CV</a>

Ouvrir un lien dans nouvel onglet ¶

L’attribut target="_blank" indique au navigateur d’ouvrir le lien dans un nouvel onglet.

<a href="mon-cv.pdf" target="_blank">Mon CV</a>