LPOW

Langages de programmation orientés Web

HTML++

2025 - 2026

Correction

Liens & URL

Attribut target

<a href="https://www.google.com/" target="_blank">Vers google.com</a>

target défini le comportement d'un lien: est-ce qu'il doit s'ouvrir dans l'onglet actuel ou dans un onglet externe ?

Voici les 2 valeurs les plus communes :

  • _self : la valeur par défaut de target, qui n'a pas besoin d'être précisé. Le lien s'ouvre dans l'onglet actuel.
  • _blank :Le lien s'ouvre dans un nouvel onglet (ou fenêtre si l'utilisateur à changer ses paramètres).
Target

URL relatives &
absolues

URL absolue

Une URL absolue commence toujours avec un protocole http:// ou https://.

URL relative

À contrario, une URL relative ne contient jamais le protocole. Elle indique un chemin relatif soit à la racine du site, soit à la page actuelle.

  •  /  : indique un lien depuis la racine du site.
  •  ./  : indique un lien depuis le fichier actuel.
  •  ../  : indique un chemin depuis le dossier parent.
  •  ../../  : indique un chemin depuis un dossier parent d'un dossier parent.

Tableaux

Les tableaux servent à représenter des données. Ils sont organisées sur 2 dimensions via des lignes et des colonnes qui sont gérées par le nombre de cellule(s).

Il y a longtemps, très longtemps, les sites étaient construis uniquement via des tableaux.

Structure

La structure d'un tableau est très similaire à une page html. On y retrouve d'abord la balise table qui indique le début et la fin du tableau, et à l'intérieur nous avons la balise thead comme en-tête, la balise tbody pour le contenu général et enfin la balise tfoot utilisée pour résumer les informations de notre tableau.

table thead tbody tfoot

Lignes

Pour ajouter une ligne, on utilise la balise tr (table row). Cela fonctionne dans les 3 structures précédentes.

tr

Colonnes &
cellules

Pour rajouter du contenu dans notre tableau, il va falloir remplir nos lignes. Il existe 2 balises,  th  &  td  qui permettent de rajouter des cellules, qui définiront le nombre de colonnes dans notre tableau.

Cela veut donc dire qu'il faut s'assurer de créer le même nombre de cellule(s) par ligne pour garder le tableau cohérent. 

  
    

      Produit
      Quantité
      Prix
    

  
  
    

      Berserk - Tome 01
      1
      7,50€

Étendre des cellules

Il est possible d'étendre les cellules pour qu'elles occupent plusieurs colonnes ou plusieurs lignes. Cela est possible via les attributs colspan pour les colonnes et rowspan pour les lignes, en leur passant un nombre.

colspan rowspan

Mise en ligne

Prérequis

Pour rendre disponible un fichier .html, il nous faut 3 choses :

  • Un ou plusieurs fichiers html.
  • un nom de domaine avec un hébergement.
  • un programme pour transférer les fichiers vers le serveur.

Client FTP

Un client FTP permet de transférer des fichiers vers un serveur web. Nous allons utiliser FileZilla, un client gratuit et utilisé communement.

Hébergement

L'Ephec nous fournis un accès FTP vers un espace personnel, voici la page d'inscription.

Attention de bien retenir vos accès.
Inscription Retrouver vos accès Tuto FileZilla

Connexion

Une fois connecté, nous avons accès à la racine de notre site. Il sera important d'avoir au moins un fichier index.html ou index.php pour qu'il y ait une page qui s'affiche par défaut sur votre nom de domaine.

Exercices

Sur base de l'exercice précédent

Pour vos 3 films, jeux ou séries préférés : créer une page dédié qui présente plus en profondeur chaque film/jeu/série.

  • Valider votre code via le W3C validator
  • Ajouter un tableau avec les informations de votre média (ex: éditeur, producteur, année de production, notes, etc. ), au moins 3 entrées.
  • Ajouter une navigation qui permet d'atteindre vos différentes pages

1/6

1/1