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 |