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

AUTRES TYPES DE LIENS EN HTML

D’autres utilisations de l’élément HTML a

On peut également utiliser l’élément a pour créer d’autres types de liens, qui ne vont pas ramener vers d’autres pages mais nous permettre par exemple de nous déplacer dans une même page, d’afficher ou de télécharger un ficher PDF ou encore d’envoyer un mail.

Dans ce nouveau chapitre, nous allons étudier trois nouvelles utilisations de l’élément a :

  • Pour se déplacer dans une page (les « ancres »);
  • Pour envoyer un mail ;
  • Pour afficher ou télécharger un fichier.

Créer une ancre en HTML

Parfois, si votre page est très longue, vous voudrez proposer des raccourcis à vos visiteurs : en cliquant sur un lien, ceux-ci doivent être redirigés à un endroit précis de la page.

Pour faire cela, nous allons créer des liens de type « ancre ».

Pour créer un lien de type ancre, il va avant tout nous falloir une ancre. On va créer cette ancre en rajoutant un attribut id à l’intérieur de la balise ouvrante de l’élément où l’on veut envoyer le visiteur.

Vous n’avez pas encore besoin de savoir véritablement ce que représente id, nous étudierons cet attribut plus en détail plus tard dans le cours.

Vous devez donner une valeur unique à un attribut id, afin d’ensuite pouvoir utiliser cette valeur pour retrouver l’id.

Vous pouvez lui donner n’importe quelle valeur, mais essayez de rester cohérent. De plus, évitez les espaces, les caractères spéciaux et commencez par une lettre.

On commence par créer une ancre en attribuant un id à un élément HTML et en lui donnant un nom unique

Une fois notre ancre créée, nous allons créer le lien ramenant à l’ancre. Pour cela, on utilise une nouvelle fois un élément a avec son attribut href.

Seulement, cette fois-ci, on va devoir indiquer la valeur donnée à l’attribut id comme valeur pour notre attribut href, et faire précéder cette valeur d’un dièse.

On crée notre lien ramenant vers notre ancre avec un dièse dans la valeur de l’attribut href

Finalement, pour tester notre lien dans de bonnes conditions, nous allons rajouter de nombreux retours à la ligne dans notre page.

En effet, nous ne pouvons vérifier si notre ancre fonctionne bien que si notre page comporte un scrolling (barre de défilement vertical), c’est-à-dire seulement si celle-ci est suffisamment longue ou si on redimensionne notre fenêtre.

On crée des retours à la ligne dans notre page HTML afin de tester notre ancre en conditions réelles

Dès que l’on va cliquer sur notre lien, nous allons être redirigés à l’endroit où se trouve notre élément comportant notre id dans la page.

En cliquant sur notre lien, nous sommes redirigés vers notre ancre

Après avoir cliqué sur l’ancre

Evidemment, on peut créer plusieurs ancres dans une même page, le tout étant de ne jamais donner la même valeur à deux id différents (sinon notre lien ne pourrait pas savoir où ramener).

On crée plusieurs ancres en donnant des valeurs uniques à chaque id

Un utilisateur peut facilement naviguer dans la page HTML grâce à nos ancres

Essayer ce code

Un lien pour permettre l'envoi d'un mail en HTML

On peut également utiliser l’élément a pour permettre à nos utilisateurs de nous envoyer simplement un mail. Pour cela, on va placer la valeur « mailto : » suivie de notre adresse email en valeur de l’attribut href.

Lorsqu’un visiteur va cliquer sur notre lien, sa messagerie par défaut va automatiquement s’ouvrir. Par exemple, si vous avez un Mac, ce sera certainement l’application « Mail » qui va s’ouvrir.

De plus, le champ destinataire sera automatiquement rempli avec notre adresse email.

Note : si vous travaillez sous Windows, il est possible que rien ne se passe si vous n’avez configuré aucune messagerie par défaut.

On utilise l’élément HTML a et mailto : pour permettre à nos visiteurs de nous envoyer simplement un mail

La messagerie par défaut de nos visiteurs va s’ouvrir

Dès qu’un visiteur clique sur le texte de notre lien, sa messagerie par défaut s’ouvre s’il en a configuré une :

Messagerie ouverte avec champ mail pré-rempli

Essayer ce code

Un lien pour télécharger un fichier

Vous pouvez encore utiliser l’élément a pour permettre à vos visiteurs de télécharger certains types de fichiers, comme des fichiers PDF ou Word par exemple.

Cependant, cela va être un peu plus compliqué que précédemment comme nous allons le voir.

Pour faire télécharger un fichier, vous avez deux solutions.

La première solution consiste à utiliser l’attribut download dans l’élément a grâce auquel vous pouvez théoriquement faire télécharger n’importe quel type de fichier à vos visiteurs.

Le problème est que cet attribut a été créé très récemment et ne fonctionne pas avec certains navigateurs majeurs, dont Safari entre autres.

La deuxième solution est de préciser tout simplement l’adresse du fichier avec son extension sous forme de lien relatif en valeur de l’attribut href.

L’inconvénient de cette deuxième méthode est que vous ne pouvez pas faire télécharger un fichier HTML par exemple à vos visiteurs car le fichier va être ouvert et donc interprété par le navigateur si ceux-ci cliquent directement sur votre lien.

Voici cependant un exemple utilisant la deuxième méthode ci-dessous. Ici, nous voulons faire télécharger le fichier « cours.pdf » à nos visiteurs qui se situe dans le même dossier que notre fichier HTML à partir duquel nous créons le lien.

On précise le nom du fichier en valeur de l’attribut HTML href pour le faire télécharger à nos visiteurs

L’utilisateur n’a plus qu’à cliquer sur le lien pour ouvrir et enregistrer le fichier

Lorsqu’un utilisateur clique sur le lien, le fichier « cours.pdf » s’ouvre et l’utilisateur peut alors le télécharger.

Le fichier s’est bien ouvert, il n’y a plus qu’à l’enregistrer

Chapitre précédent

Chapitre suivant