Anatomie d'une page web, initiation au langage HTML
- Forker ce projet dans votre espace personnel sur Github
- Cloner le fork dans Github Desktop
Vous allez travailler sur le fichier index.html, qui contient la structure minimale d'une page web. Tout le contenu doit donc s'écrire au sein du bloc <body></body>
- En utilisant au maximum la liste de balises disponibles ci-dessous, et en utilisant la chanson de votre choix, créez une page contenant les paroles et la présentation de l'artiste.
Celui-ci doit s'approcher au maximum du rendu suivant :
Pensez à "aérer" votre code en sautant des lignes et en créant des indentations. Cela ne modifie pas le rendu et permet une meilleure lisibilité.
Le HTML est un langage de balises. Celles-ci servent de blocs qui structurent le contenu.
La plupart s'ouvrent et se ferment : <p>Mon texte</p> (un paragraphe).
Mais certaines sont autonomes : <hr /> (une ligne horizontale).
Les balisent doivent se fermer dans l'ordre inverse dont elles ont été ouvertes :
Code valide ->
<p>Les mots suivants sont <strong>en gras</strong></p>
Code invalide ->
<p>Les mots suivants sont <strong>en gras</p></strong>
<header>Le bloc qui contient le haut de la page</header><nav>Le bloc qui contient le menu de la page</nav><main>Le bloc qui contient la partie centrale de la page</main><article>Un bloc qui contient le contenu important de la page</article><aside>Un bloc qui contient le contenu additionnel de la page</aside><footer>Le bloc qui contient le bas de la page</footer>
Il existe aussi des blocs génériques, très (trop) utilisés :
<div></div><span></span>
<p>Un paragraphe</p><h1>Un titre très important</h1><h2>Un titre un peu moins important</h2>, et ainsi de suite h3, h4, h5, h6...<strong>Un texte en gras</strong><em>Un texte en italiques</em><small>Un texte plus petit</small><big>Un texte plus grand</big><a href="https://adresse.du.lien">Un lien</a>
Une liste non-ordonnée :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>Une liste ordonnée :
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>- Un retour à la ligne :
<br /> - Une ligne horizontale :
<hr />
- Une image :
<img src="https://adresse.de.limage.jpg" alt="Description de l'image" /> - Un son :
<audio></audio> - Une vidéo :
<video></video>
<table>
<caption>Titre du tableau</caption>
<thead>
<tr>
<td>En-tête 1</td>
<td>En-tête 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne 1 - Cellule 1</td>
<td>Ligne 1 - Cellule 2</td>
</tr>
<tr>
<td>Ligne 2 - Cellule 1</td>
<td>Ligne 2 - Cellule 2</td>
</tr>
</tbody>
</table><adress>Une adresse de contact</adress><abbr>Une abbréviation</abbr><blockquote>Une citation</blockquote><sup>Une texte en exposant</sup><sub>Une texte en indice</sub><mark>Une texte surligné</mark><pre>Un texte pré-formatté</pre>