Ressources Magic Makers

Bases HTML

Structure d'une page HTML

Lorsque l’on crée un nouveau projet sur Glitch, on découvre une page HTML avec la structure suivante :

Et le rendu (si tu cliques sur show) : 

<!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>Hello!</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.

<h1>Hi there!</h1>
C’est un titre.

<p>I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!</p>
C’est un paragraphe, un bloc de texte.
La balise <a> permet d'ajouter un lien autour du texte qu'elle encadre.

Listes de balises utiles

Sur cette fiche, tu trouveras toutes les infos dont tu as besoin pour commencer à remplir ton site :

Ressources makers HTML

Texte

É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.

Media

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></audio>
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></video>

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 !

Liens

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</span>

Autres

Écrire un commentaire :
<!-- Mon commentaire -->

La balise <div> permet d’entourer plusieurs éléments. C’est comme une boîte dans laquelle nous rangeons des choses.

<div>
   Voici mon texte d’exemple, avec une image au-dessous :
   <img src=”MonImage.jpg” />
</div>


Liste avec des chiffres :
<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>

Liste avec des points :
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Les tableaux : 
<table>
   <tr>
      <td>Cellule 1</td>
      <td>Cellule 2</td>
   </tr>
   <tr>
      <td>Cellule 1</td>
      <td>Cellule 2</td>
      <td>Cellule 3</td>
   </tr>
</table>

Les nouvelles balises HTML5 :