Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LIENS INTERNES ET EXTERNES EN HTML

Définition et types de liens

Un lien, en HTML, va généralement servir à "transporter" un utilisateur d'un endroit vers un autre après que celui-ci ait cliqué dessus.

Pour créer des liens en HTML, nous allons utiliser l’élément a accompagné de son attribut href (hypertext reference) qui va prendre comme valeur la cible du lien.

La cible d’un lien est tout simplement l’adresse de la page de destination du lien.

Nous allons pouvoir distinguer deux grands types de liens : les liens permettant de se déplacer d'une page vers une autre à travers un même site et les liens permettant de se rendre sur d’autres sites.

On appellera ce premier type de liens des liens internes tandis que le second type va correspondre aux liens externes.

Dans les deux cas, seule la façon dont on va construire la valeur de l’attribut href va changer.

Les liens externes en HTML

Les liens externes vont être des liens ramenant vers des pages d’autres sites.

Pour créer un lien externe, on va devoir indiquer l’URL complète de destination du lien.

Par exemple, pour créer un lien ramenant vers la page d’accueil du site Wikipédia, nous allons nous y prendre comme ceci :

On crée un lien vers Wikipédia avec l'élément HTML a et son attribut href

Si on clique sur le lien, nous sommes redirigés vers Wikipédia

Essayer ce code

Le texte situé entre les balises ouvrante et fermante de notre élément a correspond au texte cliquable et également à la seule partie visible du lien pour l'utilisateur. Dans notre cas, cela correspond à « ce lien ».

Vous remarquez par ailleurs que le texte, lorsque l’on visualise notre page web dans un navigateur, est en bleu et est souligné pour indiquer que l’on peut cliquer dessus.

Lorsque l’attribut href prend une URL complète en valeur, on parle de valeur absolue (car celle-ci est fixe et ne dépend de rien). Les liens externes utilisent toujours des valeurs absolues.

Les liens internes en HTML

Les liens internes vont être des liens ramenant vers d’autres pages au sein d’un même site.

Dans ce cas, nous allons renseigner une valeur relative pour notre attribut href.

On dit que la valeur est relative car on va devoir indiquer l’adresse de la page de destination relativement à l’adresse de la page de départ (c’est-à-dire celle à partir de laquelle on fait notre lien).

En effet, vous devez savoir qu’un site n’est qu’un ensemble de fichiers liés entre eux. Ces fichiers peuvent être placés dans des dossiers différents.

Pour créer des liens internes, il faut donc distinguer trois cas :

  1. Le cas où la page de départ et celle de destination sont dans le même dossier ;
  2. Le cas où la page de destination est dans un sous-dossier par rapport à la page de départ ;
  3. Le cas où la page de destination est dans un dossier parent par rapport à la page de départ.

Pour illustrer ces cas, nous allons avoir besoin de trois dossiers différents et de quatre pages. Voici la structure que je vous propose de créer :

L'attribut href de l'élément HTML a va prendre une valeur différente selon le dossier de la page de destination

Pour le moment, nous nous sommes contentés de créer trois dossiers et quatre fichiers HTML:

  • Un dossier nommé « parent », contenant un fichier HTML nommé fichier-parent.html ainsi qu’un dossier « milieu » ;
  • Un dossier nommé « milieu », contenant les fichiers page-depart.html et fichier-milieu.html ainsi qu’un dossier nommé « sous » ;
  • Un dossier nommé « sous », comportant un fichier nommé fichier-sous.html.

Dans chaque fichier HTML, nous nous sommes contentés d’écrire la structure minimale d’un page HTML afin que nos fichiers soient valides ainsi qu’une phrase de texte pour les différencier les uns des autres :

On crée quatre pages HTML dans trois dossiers différents pour tester tous les cas de liens internes en HTML

Vous pouvez imaginer que ces trois dossiers et ces quatre fichiers représentent votre site. Notre but va maintenant être de créer des liens à partir du fichier page-depart.html vers chacune des autres pages.

Pour créer un lien vers un autre fichier situé dans un même dossier, il suffit de préciser le nom du fichier en valeur de l’attribut href.

Pour créer un lien vers un fichier situé dans un dossier parent, il faudra écrire « ../ » puis le nom du fichier en valeur de l’attribut href.

Pour créer un lien vers un fichier situé dans un sous-dossier, il faudra préciser le nom du sous-dossier et le nom du fichier, séparés par un slash, en valeur de l’attribut href.

On crée nos liens internes avec la bonne valeur pour l'attribut href

Nous avons bien créé des liens entre nos différentes pages

De même, si on souhaite créer un lien vers une page qui est à deux niveaux hiérarchiques d’écart de notre page de départ, il faudra soit indiquer le nom des deux sous-dossiers, soit indiquer deux fois « ../ ».

Par exemple, si l’on souhaite faire un lien de la page fichier-sous.html vers la page fichier-parent.html située deux dossiers plus haut :

On crée un lien interne vers une page deux dossiers au dessus

Notre lien interne HTML fonctionne bien

Voilà tout pour les liens internes et externes. Vous verrez qu’avec un petit peu de pratique, c’est assez simple. Le tout est de ne pas vous emmêler dans les différents dossiers créés.

L’attribut target ("cible")

Jusqu’à présent, lorsque nous cliquions sur les liens créés, nous étions immédiatement redirigés vers la nouvelle page.

Souvent, si vous avez un site, vous voudrez que le lien s’ouvre dans un nouvel onglet ou une nouvelle fenêtre afin que le visiteur ne perde pas la page de votre site. On va pouvoir faire cela avec l’attribut target.

L’attribut target va nous permettre de choisir où doit s’ouvrir notre page de destination. En pratique, nous utiliserons très souvent la valeur « _blank » qui spécifie que la nouvelle page doit s’ouvrir dans un nouvel onglet ou dans une nouvelle fenêtre selon le navigateur utilisé par vos visiteurs.

Voici un exemple pratique avec un lien externe menant vers Wikipédia et s’ouvrant dans un nouvel onglet ou une nouvelle fenêtre :

L'attribut HTML target nous permet d'ouvrir un lien dans un nouvel onglet ou une nouvelle fenêtre

Essayer ce code

Chapitre précédent

Chapitre suivant