HyperText Markup Language
listes, tableaux, liens, images
& sections
Après cette présentation
- Des listes à puces créer tu sauras
- Des listes numérotés tu écriras
- Des listes de définition tu apprendras
- Des informations avec des tableau tu croiseras
- Des liens vers des pages et des ancres tu réaliseras
- Des images finalement tu ajouteras
- Ta page en grandes sections (au sabre laser) tu découpera
éléments html que nous allons étudier
| Listes | <ol> <ul> <li> <dl> <dt> <dd> |
| Tableaux | <table> <thead> <tbody> <tfoot> <tr> <th> <td> |
| Liens | <a> |
| Images | <img> <figure><figcaption> |
| Sections | <header> <footer> <nav><main> <section> <article> <aside> |
Les listes
| Types de liste |
<ol> - Liste triée (order list) <ul> - Liste non-triée (unordered list) <dl> - Liste de définition (definition list) |
| Eléments de liste |
<li> - Elément de liste (list item) <dt> - Terme à définir (definition term) <dd> - Description (definition description) |
|
Attributs Uniquement pour<ol> |
start - "Numéro" du 1er élément de la liste type - Type de liste (a, A, i, I, 1) reversed - liste inversée |
Les listes permettent de regrouper, lier et hiérarchiser des contenus
Les tableaux
| Structure de base |
<table> <caption> <thead> <tbody> <tfoot> |
Tableau Titre du tableau Entête du tableau Corps du tableau Pied du tableau |
| Lignes | <tr> | une ligne de tableau |
|
Cellules |
<th> <td> |
cellule d'entête (étiquette) cellule de données |
| Attributs |
colspan rowspan |
fusion de cellules en colonnes fusion de cellules en lignes |
Les tableaux permettent de croiser des informations
Les tableaux
| Pays | Population | Superficie |
| Suisse | 8 341 630 | 41 285 km2 |
| France | 67 425 000 | 672 369 km2 |
| Rapport | 8x | 16.2x |
<table>
<thead>
<tbody>
<tfoot>
<tr>
<tr>
<tr>
<tr>
<th>
<th>
<th>
<th>
<th>
<td>
<td>
<td>
<td>
<th>
<th>
<th>
Superficie et population par pays
<caption>
Liens et ancres
| Liens absolus |
<a href="http://www.google.ch">Google
</a>
Pour aller sur un autre site |
| Liens relatifs |
<a href="pages/contact.html">Me contacter
</a>
Pour aller sur une autre page de son site |
| Ancre | <h3
id="histoire-suisse">Histoire Suisse</h3>
Pour placer un repère, ancre, dans une page |
| Liens internes |
<a href="#histoire-suisse">Voir Histoire Suisse</a>
Pour se déplacer vers un ancre de la page |
| Cible du lien | L'attribut target permet de définir la cible du lien |
- pour aller, monter dans un dossier :
"nom-dossier/" - pour sortir, descendre d'un dossier :
"../"
Liens relatifs
<a href="movies/cinema/listings.html">
Liste des films
</a>
<a href="../movies/dvd/index.html">
Liste des films
</a>
Images
| <img> | élément image |
| src="" | attribut qui définit le chemin de l'image <img src="vador.jpg"> |
| alt="" |
texte alternatif décrivant l'image <img src="vador.jpg" alt="Photo de Dark Vador"> |
| height="" | hauteur de l'image en px ou % |
| width="" | largeur de l'image en px ou % |
- alt est OBLIGATOIRE !
- alt est indispensable pour les malvoyants
- alt décrit le contenu de l'image aux robots
Les sections en html5
| <header> | Entête du site ou d'une section |
| <footer> | Pied du site ou d'une section |
| <nav> | Eléments de navigation, menu, pagination, ... |
| <main> | Contenu principal |
| <section> | Groupement thématique de contenu, généralement avec un en-tête, titre |
| <article> | Contenu autonome dans une page message sur un forum, un article de blog, ... |
| <aside> | Contenu qui indirectement lié, en marge du sujet principal, voir même sans rapport |
<header>
<main>
<section>
<section>
<aside>
<footer>
<article>
<article>
<section>
<section>
<nav>
Exercice ''totché''
101 - 04 - HTML - LISTES, TABLEAUX, LIENS, IMAGES & SECTIONS
By Steve Fallet
