Glossaire pour HTML

Essayons de respecter une bonne présentation pour chaque instruction. Cela peut-être un peu contraignant au départ, mais va permettre à tout le monde de s'y retrouver grâce à une mise en forme identique. Astuce , recopier un bloc précédent et modifiez le.

Structure du code

Il est important de bien structurer son code HTML. Pour cela, vous devez passer par 3 balises : html, head et body

<html>
  <head>
    <!--Ici ce trouve les informations générale du site (les métadonnées) comme ci-dessous-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>titre de l'onglet</title>
  </head>
  <body>
    <!--Et ici vous trouverez le contenu de la page-->
    <!--Au fait ceci est un commentaire ;)-->
  </body>
</html>

/!\ Il est important de noté qu'il faut refermer dans le sens de leur ouverture. Comme dans l'exemple au dessus la balise <html> est la première ouverte et donc la dernière fermée.

Les liens

Pour rendre votre site plus joli il vous faut écrire en CSS. Le mieux est de créer un fichier CSS à côté de votre fichier html. Pour le lier les deux fichiers, vous devez écrire cette ligne entre les balises Head:

<head>
   <link rel="stylesheet" href="style.css">
</head>

Et pour lier un fichier JavaScript c'est avec celle-ci :

<head>
    <script src="script.js"></script>
</head>

Les balises à connaître

Les balises de Texte

Balise de paragraphe

pour 'définir' un paragraphe, c'est avec la balise p :

<body>
  <p>Ceci est un paragraphe.</p>
</body>

Strong

La balise Strong permet de mettre en gras le texte compris entre ses balises :

<body>
  <p>Ceci est un paragraphe et <strong>ce mot</strong> est en gras !</p>
</body>

em

La balise em met le texte qu'elle contient en italique :

<body>
  <p>Ceci est un <em>paragraphe</em> et <strong>ce mot</strong> est en gras !</p>
</body>

Ces deux balises sont utilisées pour signaler une importance sur un mot précis.

Ul et Li

Ces deux balises vous serviront à créer des listes :

<body>
  <p>Voici une liste des astronautes de la mission Apollo</p>

  <ul> <!--La liste est définie ici-->
    <li>Neil Armstrong</li> <!--Et ici, ce sont les éléments qu'elle contient-->
    <li>Alan Bean</li>
    <li>Peter Conrad</li>
    <li>Edgar Mitchell</li>
    <li>Alan Shepard</li>
  </ul>
</body>

Remarque quand vous créez une liste elle a un style par défaut, pour le retirer ou le modifier il vous faudra utiliser du CSS, mais ce n'est pas le sujet de cette page !