HTML

04/11/20 danny

Eléments essentiels

Les éléments essentiels

  • Un fichier de base
  • Un fichier de base responsive
  • fichier HTML avec script css et js
index.html
<!DOCTYPE html>
<html>

<head>
    <title>Titre de note page : ganatan</title>
</head>

<body>

    <h1>un element Headings : Movies List</h1>
    <p>un élément paragraph : Box Office 2019</p>

</body>

</html>
index.html Responsive
<!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>

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