Cours 3¶

Formatage du texte HTML¶

Balise	Description	Exemple
`<strong>`	Texte en gras avec importance	`<strong>Attention!</strong>`
`<em>`	Texte en italique avec emphase	`<em>Mise en valeur</em>`
`<u>`	Texte souligné (peu utilisé en HTML5)	`<u>Texte souligné</u>`

Il existe aussi les balises  et , qui produisent un effet visuel similaire, mais sans signification sémantique. Il est donc préférable d’utiliser  et  lorsque le contenu a une importance ou une emphase réelle.

Anglicismes¶

Les anglicismes sont doivent être pris en charge de façon sémantique. Pour ce faire, il faut ajouter un attribut.

Balises génériques¶

Balise	Type	Usage typique
`<div>`	bloc	Conteneur de sections (ex. : regroupement de paragraphes, structure d’une page)
`<span>`	inline	Mise en forme ou manipulation de mots précis dans une ligne de texte

<div class="carte">
  <h2>Produit</h2>
  <p>Prix : <span class="prix">29.99$</span></p>
</div>

Liens hypertexte¶

La syntaxe

<a href="https://www.google.com">Visiter Google</a>

Types de liens¶

Type	Exemple	Description
Externe	`<a href="https://example.com">Lien externe</a>`	Va vers un autre site
Interne	`<a href="page2.html">Page interne</a>`	Va vers une autre page du site
Ancre	`<a href="#section2">Aller à Section 2</a>`	Saute à une section de la même page

Créer une ancre¶

<a href="#contact">Aller à Contact</a>

<!-- Plus bas dans la page -->
<h2 id="contact">Section Contact</h2>

Et si on imbriquait ?¶

Faut-il mettre un  dans un <a>, ou l’inverse ?

Les deux sont valides, parce que ce sont toutes les deux des balises inline (on verra ce que ça veut dire un peu plus tard). Alors, comment choisir ?

<p>
    J'ai écrit un article sur le film 
    <a href="https://www.themoviedb.org/movie/71883"><strong>Redline</strong></a>.
</p>
<!-- 
  Signification sémantique :
  Le lien est important. Clique dessus, c’est crucial !
-->

<p>
    J'ai écrit un article sur le film 
    <strong><a href="https://www.themoviedb.org/movie/71883">Redline</a></strong>.
</p>
<!-- 
  Signification sémantique :
  Le film Redline est important. Ah, et en passant, c’est aussi un lien.
-->

Chemins d’accès absolus vs relatifs¶

Type	Exemple	Description
Absolu	`https://site.com/images/logo.png`	Lien complet vers un fichier sur le Web
Relatif	`./images/logo.png`	Lien par rapport à l’emplacement actuel

Variants de chemins relatifs¶

Chemin	Signification
`./`	Dossier actuel
`../`	Remonte d’un dossier
`/`	Racine du site (si serveur configuré)

Exemple¶

index.html
pages/
  contact.html
images/
  logo.png

Dans contact.html, pour viser logo.png :

<img src="../images/logo.png" alt="Logo">