Initiation au code

HTML

HTML - Balises courantes

Les balises de structuration du contenu :

Titres h1, h2, ..., h6

<h1>Titre de 1e niveau</h1>

<h2>Titre de 2e niveau</h2>

<h3>Titre de 3e niveau</h3>

<h4>Titre de 4e niveau</h4>

<h5>Titre de 5e niveau</h5>

<h6>Titre de 6e niveau</h6>

Paragraphe p

<p>Un simple paragraphe.</p>

<p>Un autre paragraphe.</p>

Retour à la ligne br

<p>Les programmes de Windows se trouvent dans : <br> C:\Program files</p>

Lien a

<a href="http://www.example.com" title="Explication du lien">Texte cliquable</a>

<a href="mailto:nom@example.com">Envoyez-nous un email</a>

Ancre nommée a

<a id="identifiant_unique">Texte ancré</a>

<a href="#identifiant_unique" title="Lien interne">Texte cliquable vers l’ancre</a>

Image img

<img src="images/photo.jpg" alt="Texte pour les non-voyants" width="100" height="80">

Listes ordonnées

     
<ol> 
  <li>1er élément de la liste</li> 
  <li>2e élément de la liste</li> 
</ol>

Listes non-ordonnées (puces)

<ul> 
  <li>1er élément de la liste</li> 
  <li>2e élément de la liste</li> 
</ul>

Tableau table

Titre de la colonne 1	Titre de la colonne 2
Élément 1 ligne 1	Élément 2 ligne 1

<table>
  <tr>
    <th>Titre de la colonne 1</th>
    <th>Titre de la colonne 2</th>
  </tr>
  <tr>
    <td>Élément 1 ligne 1</td>
    <td>Élément 2 ligne 1</td>                                                                                     
  </tr>                                                                          
</table>

Commentaires

<! Commentaire HTML -->

HTML - Les balises de structuration de la page :

Balises obligatoires

Les balises de fichier HTML

<!DOCTYPE html>

    <html>

        <head></head>

        <body></body>

    </html>

<!DOCTYPE html>

<html></html>

<head></head>

<body></body>

Les balises de métadonnées

<head>
    <title></title>
    <meta charset="UTF-8">
</head>

<title></title>

<meta charset= "UTF-8">

Les balises HTML5

Les balises sémantiques

<body> 

     <header>Haut de la page</header> 

     <nav>Pour les menus</nav> 

     <section> 

              <article>Pour du texte</article> 

              <aside>À côté de l'article</aside> 

     </section> 

     <footer>Pied de page </footer> 

</body>

<section></section>

<article></article>

<footer></footer>

<nav>

<aside>

<header>

Les balises universelles

<div></div>

<span></span>