Présentation des balises HTML [Structure d'une page HTML]

Présentation des balises HTML

Dans ce module nous allons introduire les balises HTML et leur fonctionnement.

Méthode : La composition d'une balise HTML

Délimitée par des chevrons ouvrants < et fermants >,
Pour du texte qui doit recevoir un traitement particulier,
Composé de mots clés tels que : table, a, p,
La majorité des balises fonctionnent par paire, une ouvrante <p> et une fermante </p>.

Méthode : L'élément HTML

<p>Je suis un paragraphe de texte</p>

<p>Je suis un paragraphe de texte</p>

Il est constitué d'une balise ouvrante - d'un contenu - d'une balise fermante.

Méthode : L'attribut html

Les balises HTML peuvent se voir ajouter des attributs pour pouvoir modifier leur mise en forme avec du CSS ou JS.

Voici plusieurs attributs :

id
class
width
lang
title
alt
Etc.

<p attribut="valeur">Je suis un paragraphe de texte</p>
<p id="test">Je suis un paragraphe de texte</p>

<p attribut="valeur">Je suis un paragraphe de texte</p>
<p id="test">Je suis un paragraphe de texte</p>

Méthode : L'imbrication des éléments

Certains éléments ne peuvent être imbriqués dans d'autres,
L'imbrication nécessite le respect de la hiérarchie,
L'imbrication demande le bon respect de l'ouverture et des fermetures des balises.

<section>
   <h1>Titre de section</h1>
   <article>
      <h2>Titre de l'article</h2>
      <img src="images/laptop.jpg" alt="Laptop" width="400">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#">Lire la suite</a>
   </article>
</section>

<section>
   <h1>Titre de section</h1>
   <article>
      <h2>Titre de l'article</h2>
      <img src="images/laptop.jpg" alt="Laptop" width="400">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#">Lire la suite</a>
   </article>
</section>

Méthode : Le schéma sémantique

Avant de commencer à coder un site web, faites un schéma sémantique.

Éléments bloc : les uns au-dessus des autres,
Éléments inline : les uns à côté des autres.

Le Doctype

Méthode :

Tout document HTML doit commencer par un Doctype.

Définit les règles d'écriture d'une page HTML,
Définit la DTD (Définition Type de Document).

<!DOCTYPE html>

<!DOCTYPE html>

La DTD permet aux navigateurs d'interpréter correctement la version du HTML de la page.

Autocomplétion et coloration syntaxique

Méthode :

L'autocomplétion et la coloration syntaxique permettent :

D'insérer des balises plus rapidement,
De les différencier des contenus et des attributs.