FAQ HTML

22/04/20 danny

Documentation

HTML (HyperText Markup Language)
HTML5 est la dernière révision majeure.
Finalisée le 28 octobre 2014.


Exemple de fichier index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <title>titre de notre page</title>
</head>

<body>
  Contenu de notre page
</body>

</html>

Fichiers CSS et JS

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>titre de notre page</title>
  <link href="fichier.css" rel="stylesheet">
</head>

<body>
  Contenu de notre page
  <script src="fichier.js"></script>
</body>

</html>

Balises

Liste des Balises

<pre> : élément de texte préformaté
<ul> : liste d'éléments


Balise texte préformaté

Le code HTML.
Le résultat dans un navigateur.

<pre>
body {
  color: black;
  font-weight: 400;
}
</pre> 
body {
  color: black;
  font-weight: 400;
}

Balise ul

  <ul>
    <li>720p</li>
    <li>1080p
      <ul>
        <li>progressive</li>
        <li>interlaced</li>
      </ul>
    </li>
  </ul>

Commentaires

La syntaxe <!-- ... --> permet de mettre en commentaire des blocs de code. 

<body>
  <!-- Ligne de commentaires -->
  <app-root></app-root>
</body>

Attribut aria-label

Utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. 

<div class="footer-socials">
	<a type="button" aria-label="Github : Ganatan" class="btn-floating blue" href="https://github.com/ganatan">
		<i class="fab fa-github"></i>
	</a>
</div>

Colspan Rowspan

colspan
Permet de fusionner horizontalement et verticalement les cellules d'un tableau

rowspan
Permet de fusionner horizontalement et verticalement les cellules d'un tableau

<table border="1" cellpadding="1" cellspacing="1" style="width:400px">
  <tbody>
    <tr>
      <th>Movie</th>
      <th>Box Office</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Avatar</td>
      <td>$2,790,439,000</td>
      <td rowspan="2">$5,588,239,564</td>
    </tr>
    <tr>
      <td>Avengers: Endgame</td>
      <td>$2,797,800,564</td>
    </tr>
  </tbody>
</table>
Movie Box Office Total
Avatar $2,790,439,000 $5,588,239,564
Avengers: Endgame $2,797,800,564
<table border="1" cellpadding="1" cellspacing="1" style="width:400px">
  <tbody>
    <tr>
      <th>Movie</th>
      <th>Box Office</th>
    </tr>
    <tr>
      <td>Avatar</td>
      <td>$2,790,439,000</td>
    </tr>
    <tr>
      <td>Avengers: Endgame</td>
      <td>$2,797,800,564</td>
    </tr>
    <tr>
      <td colspan="2">$5,588,239,564</td>
    </tr>
  </tbody>
</table>
Movie Box Office
Avatar $2,790,439,000
Avengers: Endgame $2,797,800,564
$5,588,239,564