Lorsque l’on crée un nouveau projet html sur Replit, on découvre une page HTML avec la structure suivante :
Sur la partie droite, une fenêtre de preview s’affiche également.
ci dessous vous trouverez le détail des éléments de base de la page html.
<!DOCTYPE html>
Pour faire simple, cette ligne permet d’indiquer à notre navigateur (Edge, Firefox, Opera, Chrome…) avec quel type de HTML nous avons écrit notre page. Pour notre cas, c’est le HTML5.
<html>
C’est une balise obligatoire qui s’ouvre au début de la page HTML (juste après le doctype) et se ferme à la fin.
<head>
C’est l’en-tête du fichier HTML. Elle englobe les balises <meta>, <title>, <link> ainsi que d’autres balises disponibles.
<meta charset="utf-8">
Permet de spécifier l’encodage du document. Sans cette balise, tous les accents dans notre texte seront remplacés par des caractères spéciaux. Sur Thimble, retirer cette balise n’a aucun impact, mais il est nécessaire de prendre l’habitude de toujours l’écrire.
<meta name="viewport" content="width=device-width, initial-scale=1">
Cette ligne définit la taille de notre page par rapport à l’écran de notre appareil (ordinateur, tablette, téléphone).
<title>replit</title>
Obligatoire, cette balise affiche le titre de notre site sur l’onglet utilisé ! Elle permet aussi d’améliorer la visibilité du site dans les moteurs de recherche comme Google.
<link rel="stylesheet" href="style.css">
Permet de lier une page CSS à une page HTML.
<body>
C’est le corps de notre page, l’endroit où nous allons intégrer tous les éléments de notre page HTML.
L'intégralité du code html que l'on va rajouter sera ici.
<script src="script.js">
Il s'agit du script par défaut. Souvent on supprimera ces lignes de script que l'on utilisera pas.
La plupart des balises que nous allons voir fonctionne par paire.
<p>Mon texte ici</p>
Ici par exemple, nous avons une balise ouvrante <p> et une balise fermante </p>
La balise p encadre un paragraphe, ce qui signifie que tout ce qui est entre les balises <p> et </p> est dans le paragraphe.
Écrire un paragraphe : <p>Mon texte ici</p> Écrire en gras : <strong>Mon texte ici</strong> <b>Mon texte ici</b> Écrire en italique : <i>Mon texte ici</i> Écrire en souligné : <u>Mon texte ici</u> Écrire un titre : <h1>Mon titre ici</h1> <h2>Mon titre ici</h2> <h3>Mon titre ici</h3> <h4>Mon titre ici</h4> <h5>Mon titre ici</h5> <h6>Mon titre ici</h6> Obtenir une ligne séparatrice : <hr/> Sauter une ligne : <br/> Obtenir un texte entre guillemets : <q>Mon texte ici</q> La balise <span> permet d’entourer une portion de texte : Bonjour, ici je cible le mot <span>Lapin</span> parce que je souhaite le modifier en CSS.
Insérer une image : <img src="img/spartan.jpg" alt="Spartan" title=”John-117” class=”MonImage” /> Insérer un son : <audio src=”monSon.mp4” controls> On peut remplacer controls par autoplay si on veut que le son se joue au chargement
de la page sans que l’utilisateur ne puisse le mettre sur pause. Insérer une vidéo : Vidéo de l’ordinateur : <video src="video.mp4" controls> Vidéo de youtube : Aller sur une vidéo sur Youtube Cliquer sur Partager Puis cliquer sur Intégrer, et copier-coller le code dans votre page HTML !
Cliquer sur un mot : <a href="index-2.html">Cliquer ici</a> Cliquer sur une image : <a href="index-2.html"><img src="img/spartan.jpg" /></a> Les “target” : target = “_blank” le lien s’ouvre dans une nouvelle fenêtre. target = “_self” le lien s’ouvre dans la même fenêtre. <a href="index-2.html" target=”_blank”>Mon lien</a> Envoyer un mail en cliquant sur un lien : <a href=”mailto:axelle.dru@magicmakers.fr”>M’envoyer un mail</a> Insérer une ancre (lien qui dirige sur la même page) <a href="#ancre">Cliquer ici pour revenir en haut de la page</a> <span id=”ancre”>Haut de page
L'entête permet de mettre en avant une bannière en haut de la page : <header>
<h1>Cliquer ici</h1>
<header>
plus d'information sur le header sur la documentation mozilla
La balise <nav> pour navigation représente un endroit de la page ou l'on mettra des liens vers une autre partie du site, ou l'extérieur :
<header>
<h1>Cliquer ici</h1>
<nav>
<ol>
<li> <a href="page2.html"> Page2 </a> </li>
<li> <a href="page3.html"> Page3 </a> </li>
<li> <a href="page4.html"> Page4 </a> </li>
</ol>
</nav>
<header>
On créera souvent des listes dans les nav, pour mettre en forme les liens et en faire un menu.
plus d'information sur le header sur la documentation mozilla
La section définie une partie d'un site dans laquelle on va pouvoir placer des éléments : <section>
<h1>titre</h1>
<p>contenue</p>
</section> plus d'information sur le header sur la documentation mozilla
L'article sera souvent un élément unique d'une section, comme un article de blog ou un objet sur une page de vente :
<section>
<h1>titre</h1>
<article>
<h1>titre</h1>
<p>contenue</p>
</article>
</section>
plus d'information sur le header sur la documentation mozilla
Le footer est l'inverse du header, c'est un élément que l'on trouvera en bas de la page :
<footer>
<p>contenue</p>
</footer>
plus d'information sur le header sur la documentation mozilla