Compléments

I. Chemins absolus ou relaifs

Nous allons étudier l'exemple suivant :

Chemin absolu ou relatif

Pour indiquer la position d'un fichier (ou d'un dossier) dans l'arborescence, il existe 2 méthodes :

• indiquer un chemin absolu. Le chemin absolu doit indiquer « le chemin » depuis la racine. Par exemple l'URL du fichier fichier3.jpg sera : /dossier2/dossier3/fichier3.jpg Remarquez que nous démarrons bien de la racine / (attention les symboles de séparation sont aussi des /)

• indiquer un chemin relatif.Imaginons maintenant que le fichier fichier1.css fasse appel au fichier fichier3.jpg (comme un fichier HTML peut faire appel à un fichier CSS). Il est possible d'indiquer le chemin non pas depuis la racine, mais depuis le dossier dossier2 qui accueille le fichier1.css, nous parlerons alors de chemin relatif : dossier3/fichier3.jpg

👉 Remarquez l’absence du / au début du chemin (c'est cela qui nous permettra de distinguer un chemin relatif et un chemin absolu).

Autre exemple de chemin relatif

Imaginons maintenant que nous désirions indiquer le chemin relatif du fichier fichier5.svg depuis l'intérieur du dossier dossier4.

Comment faire ?

Il faut "remonter" d'un "niveau" dans l'arborescence pour se retrouver dans le dossier dossier2 et ainsi pouvoir repartir vers le dossier3. Pour ce faire il faut utiliser 2 points : ..

../dossier3/fichier5.svg

Autre exemple de chemin relatif

😊 Il est tout à fait possible de remonter de plusieurs "crans" : ../../ depuis le dossier dossier4 permet de revenir à la racine.

1. Chemin relatif

Depuis le dossier3, donner le chemin relatif qui permet d'obtenir fichier4.js

Solution

../../dossier1/fichier4.js

2. Chemin relatif

Donnez le chemin relatif permettant d'atteindre le fichier fichier5.svg depuis le dossier dossier4

Solution

../dossier3/fichier5.svg

3. Chemin absolu

Donnez le chemin absolu permettant d'atteindre le fichier fichier6.html

Solution

/dossier2/dossier4/fichier6.html

II. Le WEB sémantique

Vous l'avez compris, tout ce qui est affiché dans une page est une série de "blocs", auxquels s'ajoutent des éléments non affichés. La norme HTML 5 est très stricte sur l'utilisation des balises sémantiques dont nous avons déjà vu certaines.

Le HTML sémantique est l'utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c'est-à-dire leur sens, plutôt que de se borner à définir leurs présentations (ou apparence). Le HTML sémantique est traité par les navigateurs courants, mais aussi par de nombreux autres agents utilisateurs. Le langage CSS est utilisé pour suggérer la forme sous laquelle il sera présenté aux utilisateurs humains.

Par exemple, les spécifications HTML récentes déconseillent l'utilisation de la balise <i>, qui indique un style de police italique, au profit de balises sémantiquement plus précises, telles que <em>, qui indique une mise en valeur. C'est la feuille de style CSS qui spécifie ensuite si cette mise en valeur est représentée par un style italique, un style gras, un soulignement, une prononciation plus lente ou plus forte, etc. L'utilisation de l'italique ne se limite en effet pas à la mise en valeur. Il est également utilisé pour citer des sources, et pour cela, le HTML 5 propose la balise <cite>.

1. Balises structurelles

• header Regroupe les éléments de l'en-tête (du body, d'une section, d'un article...)
• main: Utilisée pour regrouper l'ensemble des sections ou articles, partie la plus importante du contenu.
• nav Utilisée pour regrouper les éléments du menu de navigation.
• section Regroupe les éléments d'un partie d'un document.
• article Comme une section mais le sens est légèrement différent
• footer Regroupe des éléments comme pied de page, mais peut aussi figurer en fin d'une section par exemple avec un bouton "haut de page"
• aside Regroupe des éléments tels que des notes, remarques, commentaires, compléments, non essentiels pour la lecture du contenu, mais qui le complète.

2. Balises d'emphase

• h1 h2 h3... h7 Les balises de titres hiérarchisent les contenus
• strong Met en valeur un mot ou un groupe de mots. Les navigateurs font généralement appraitre le texte entre <strong> et </strong> en gras. La balise <b>...</b> a aussi cet effet, mais celle ci n'a pas de sens particulier, alors que <strong> indique un mot ou groupe de mots importants (mots clefs, définitions etc...)
• em: Comme <strong> mais moins "fort".
• mark: Comme <strong> et em mais encore moins "fort"
• cite Début d'une citation.
• blockquote Regroupe les éléments tiré d'une autre source (qui sera généralement mentionnée).
• code Début d'une portion de contenu contenant du code (html, python, javascritpt etc...)

Il en existe de nombreuses autres (adress, abbr pour une abréviation, q pour une citation rapide et courte etc...)

3. balises non sémantiques

Il est parfois nécessaire de regrouper des éléments (surtout pour des motifs de placement ou de formatage dans la page) sans que le groupe constitue un ensemble auquel on puisse donner un sens. Pour cet usage on a conservé, en HTML 5 une balise qui existe depuis le début du WEB : La balise div.

son usage est extrêmement courant, bien que dans de nombreux cas, il soit incorrect, car une autre balise, sémantique, aurait put être utilisée. Elle n'en demeure pas moins indispensable à connaitre pour des mises en page sophistiquées.

Exemple d'utilisation de <div>

Dans le code ci-dessous, un bloc <div> est utilisé pour regrouper 1 titre, un paragraphe et un bloc aside , le tout formant un bloc pour afficher une définition. A noter qu'au lieu de <div> il serait préférable ici d'utiliser <dfn>.

<section>
  <h2>Titre de la section<h2>  
  <p>Un premier paragraphe<p>
  <div>
    <h3>Définition</h3>
    <p>
      Le texte de la définition
    </p>
    <aside>
      Une remarque
    </aside>
  </div>
  <h3>La suite de la section</h3>
</section>

Le plus souvent, ce bloc <div> est utilisé pour attribuer une classe aux éléments, nous verrons cela plus loin. La classe permet de formater l'apparence des éléments concernés. Par exemple, on souhaite que cette section apparaisse avec un fond de page d'une couleur différente du reste de la page....

Dans le même ordre d'idée, la balise <span>....</span> regroupe aussi des éléments (mais dans le cas de <span>, les éléments seront placés côte à côte, alors que <div> produira un placement des éléments les uns en dessous des autres.