|
Page HTML
• déclaration de la page
<html>...</html>
• en-tête de la page
<head>...</head>
• encodage de la page
<meta ...>
• titre de la page
<title>...</title>
• corps de la page
<body>...</body>
|
|
|
|
• Code minimal pour créer une page HTML :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>...</title>
</head>
<body>
...
</body>
</html>
|
|
|
En-tête de la page
• entre les balises
<head>...</head>
|
|
|
|
• Code pour appeler une feuille de style externe :
<link rel="stylesheet" type="text/css" href="lien de la feuille de style">
• Code pour créer une feuille de style interne :
<style type="text/css">
...
</style>
• Code pour produire un code JavaScript :
<script type="text/javascript">
...
</script>
|
|
|
Tableau
• entre les balises
<body>...</body>
• déclaration du tableau
<table>...</table>
• déclaration d'une ligne
<tr>...</tr>
• déclaration d'une cellule
<td>...</td>
|
|
|
|
• Code pour créer une tableau :
<table>
<tr>
<td align="center">Asperges</td>
<td align="center">Bouillon</td>
<td align="center">Cabillaud</td>
</tr>
<tr>
<td align="center">Daurade</td>
<td align="center">Endives</td>
<td align="center">Farfalle</td>
</tr>
</table>
• Résultat :
| Asperges |
Bouillon |
Cabillaud |
| Daurade |
Endives |
Farfalle |
|
|
|
Liste
• entre les balises
<body>...</body>
• déclaration de la liste
<ul>...</ul>
• déclaration d'un élément
<li>...</li>
|
|
|
|
• Code pour créer une liste:
<ul>
<li>Asperges</li>
<li>Bouillon</li>
<li>Cabillaud</li>
<li>Daurade</li>
<li>Endives</li>
<li>Farfalle</li>
</ul>
• Résultat :
- Asperges
- Bouillon
- Cabillaud
- Daurade
- Endives
- Farfalle
|
|
|
Liste numérotée
• entre les balises
<body>...</body>
• déclaration de la liste
<ol>...</ol>
• déclaration d'un élément
<li>...</li>
|
|
|
|
• Code pour créer une liste numérotée :
<ol>
<li>Asperges</li>
<li>Bouillon</li>
<li>Cabillaud</li>
<li>Daurade</li>
<li>Endives</li>
<li>Farfalle</li>
</ol>
• Résultat :
- Asperges
- Bouillon
- Cabillaud
- Daurade
- Endives
- Farfalle
|
|
|
Texte
• entre les balises
<body>...</body>
|
|
|
|
• Code pour hiérarchiser des titres :
<h1>...</h1> à <h6>...</h6>
• Code pour écrire un paragraphe :
<p>...</p>
• Code pour passer à la ligne :
<br>
• Code pour mettre en gras :
<b>...</b> ou <strong>...</strong>
• Code pour mettre en italique :
<em>...</em>
• Code pour créer une ligne de séparation :
<hr>
|
|
|
Lien hypertexte
• entre les balises
<body>...</body>
|
|
|
|
• Code pour créer un lien hypertexte :
<a href="...">...</a>
• Code pour créer un lien hypertexte dans un nouvel onglet :
<a href="..." target="_blank">...</a>
|
|
|
Image
• entre les balises
<body>...</body>
|
|
|
|
• Code pour insérer une image :
<img src="...">
|
|
|
Balise div
• entre les balises
<body>...</body>
|
|
|
|
• Code pour structurer le contenu :
<div>...</div>
|
|
|
Vidéo
• entre les balises
<body>...</body>
|
|
|
|
• Code pour insérer une vidéo youtube de taille 400 pixels × 300 pixels dont l'adresse youtube est :
<iframe src="https://www.youtube.com/embed/7ceNf9qJjgc" allowfullscreen="" width="400" height="300"></iframe>
|
|
