Communiquer, collaborer, échanger à l'ère numérique

Introduction aux langages HTML et CSS

Les attributs

Les attributs

Un attribut est une paire nom-valeur associée à la balise ouvrante d’un élément. Le nom de l’attribut est séparé de la valeur par un signe « = ». La valeur est placée entre guillemets.


<balise attribut="valeur"></balise>

Les attributs

Un attribut est une information supplémentaire que l’on ajoute sur un élément HTML pour ajuster son comportement.

Chaque élément ne peut pas avoir plus d’un attribut avec un nom donné.

Il existe des attributs globaux et d’autres qui sont spécifiques à un ou plusieurs éléments.

Les attributs globaux

Attributs utilisables avec tous les éléments HTML.

  • id : un identifiant unique pour l'ensemble du document. Cet attribut permet d’identifier un élément lorsqu'on crée un lien, quand on souhaite le manipuler avec un script ou pour le mettre en forme avec CSS. Un identifiant commence toujours par une lettre.
  • class : indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments via CSS ou JavaScript.
  • contenteditable : indique si l’élément courant peut être édité par l'utilisateur ou non.
  • dir : indique la direction du texte contenu dans l'élément.

Liens et navigation

Les liens <a>

La balise <a> signifie anchor (ancre). Elle permet de créer des liens hypertextes. C’est la balise qui rend le web possible.

<a> requiert l’attribut href (hypertext reference), dans lequel on indique un chemin, ou une URL.

<a href="https://www.parisnanterre.fr/">université Paris Nanterre</a>

Il est possible de créer des liens externes (pages web, images, documents, etc.) ; internes (href="#monID") ; vers des adresses mail (mailto:) ; vers des numéros de téléphone (tel:)

exemples

URL et Chemins absolus / relatifs

URL : Uniform Resource Locator, Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web MDN, Comprendre les URL et leur structure

Lorsque l'on réalise un site web, et plus particulièrement lorsque l'on met en place des liens ou une navigation, il est important de comprendre la distinction entre chemins absolus et chemins relatifs.

Chemins absolus

Un chemin absolu correspond à l’URL complète, partant du protocole, jusqu’au chemin précis de la ressource.


https://fr.wikipedia.org/wiki/Uniform_Resource_Locator

  • le protocole : https
  • le nom de domaine : fr.wikipedia.org
  • le chemin vers la ressource : wiki/Uniform_Resource_Locator

On peut aussi trouver un port, des paramètres ou encore une ancre

Chemins relatifs

Un chemin relatif fournit un chemin d'accès à partir de la position actuelle de la page ou du fichier. Il est utilisé pour relier des ressources au sein d'un même site, sans avoir besoin d'indiquer l’URL complète.


images/photo.jpg

Si l'on se trouve sur la page https://www.exemple.com/articles/index.html, le lien relatif ../images/photo.jpg signifie "dans le dossier parent (../) ; chercher le répertoire images (images/) ; puis le fichier photo.jpg".

Quand les utiliser

  • Les chemins absolus sont souvent utilisés pour des liens externes, car ils garantissent que le lien fonctionne partout.
  • Les chemins relatifs, en revanche, sont très pratiques pour lier des ressources à l'intérieur d'un même site. Ils simplifient la gestion du contenu et rendent les migrations de site plus faciles. Par exemple, si le nom de domaine change, les liens internes continueront de fonctionner sans qu'il soit nécessaire de les modifier.

À noter que ces chemins d'accès tirent leur origine des systèmes de fichiers hiérarchiques, systèmes popularisés par UNIX.

Syntaxe

Un chemin absolu part toujours de la racine ou du nom de domaine :

  • racine : / (linux/macos) ou C:, D:, etc. (Windows)
    /home/user/documents/file.txt
    C:\Users\John\Documents\file.txt
  • protocole et nom de domaine (pour le web) : http://www.mon-nom-de-domaine.fr (ou https://)
    https://www.example.com/images/photo.jpg

Un chemin relatif part du répertoire courant. Il est alors possible de descendre ou de remonter dans l'arborescence.

  • Utilisation de . pour indiquer le dossier actuel (optionnel).
  • Utilisation de .. pour remonter d'un niveau.

Chaque étape est ensuite délimitée par /

Quel est le chemin absolu vers le fichier about.html  ?

Quel est le chemin absolu vers le fichier about.html  ?

/home/username/Documents/about.html

Depuis about.html, quel est le chemin relatif vers index.html ?

Depuis about.html quel est le chemin relatif vers index.html ?

./index.html

Depuis index.html, quel est le chemin relatif vers le fichier image.jpg ?

Depuis index.html, quel est le chemin relatif vers le fichier image.jpg ?

../images/image.jpg

La navigation | <nav>

Les liens <a> permettent de relier des pages entre elles. Pour autant, lorsque l’on élabore un site web, il est parfois nécessaire d’isoler un groupe de liens pour élaborer la navigation du site. C’est le rôle de la balise <nav>.

Exemple

TP

  • Télécharger le dossier « tp ». Il contient l’ébauche d’un site web formé de 4 pages HTML réparties dans différents dossiers (index.html, apropos.html, transcriptions.html et fevrier.html) ;
  • Ouvrir ces 4 fichiers dans un éditeur de texte ;
  • Pour chacun de ces fichiers, créer une navigation renvoyant vers les pages index.html, apropos.html et transcriptions.html (urls et chemins relatifs);
  • Au sein de la page transcriptions.html, ajouter un lien vers le document fevrier.html (urls et chemins relatifs) ;
  • Dans la page fevrier.html, créer un système de liens pour accéder directement à chaque entrée du journal ;
  • Bonus : créer une page HTML pour le mois de janvier suivant le même modèle. Le contenu se trouve dans le fichier janvier.txt.