Chapitre 16 : Aide mémoire HTML⚓︎

Structure de base d'un fichier HTML

<!DOCTYPE html> <!-- définit le langage utilisé : ici le HTML -->
<html lang='fr'> <!-- ouverture du bloc HTML - Langue : français -->
    <head> 
        <!-- contenu du bloc head : configuration de la page -->
        <meta charset="UTF-8" /> 
        <title> Titre de la page </title>
        <link rel="stylesheet" href="style.css"/> 
        <link rel="icon" type="image/png" href="favicon.png"/>
        <script src="script.js"></script>
    </head>
    <body>
        <!-- contenu du bloc body : tout le contenu affiché de la page -->
        <!-- Ceci est un commentaire -->
    </body>
</html> <!-- fermeture du bloc HTML  -->

<!DOCTYPE HTML> précise que le ficher contient du HTML
<html lang="fr"> ouverture du bloc html qui englobe tout
Bloc <head> : entête. Contient la configuration de la page html
Bloc <body> : corps de la page. Contient toutes les informations à afficher.
définit l’encodage des caractères (affichage correct des lettres accentuées).
<title> Titre de la page </title> définit le nom de la page dans l’onglet du navigateur.
<link rel="stylesheet" href="style.css"/> indique l’utilisation d’une feuille de style et son chemin d'accès. (Optionnel)
<link rel="icon" type="image/png" href="favicon.png"/> affiche une icone à gauche de l'onglet.(Optionnel)
<script src="script.js"></script> indique l’utilisation d’un script de type JavaScript et son chemin d'accès.(Optionnel)

Balises de Texte

Balise	Description	Balise Fermante	Exemple
`<h1>` à `<h6>`	Titres de différents niveaux.	`</h1>` à `</h6>`	`<h1>Titre Principal</h1>`
`<p>`	Balise de paragraphede type block.	`</p>`	`<p>Ceci est un paragraphe.</p>`
`<div>`	Balise générique de division de type block.	`</div>`	`<div></div>`
`<span>`	Balise générique de type inline.	`</span>>`	`<span></span>`
`<br/>`	Retour à la ligne.	(auto-fermante)	`<p>Ligne 1<br/> Ligne 2</p>`
`<hr/>`	Ligne horizontale.	(auto-fermante)	`<hr/>`
`<strong>`	Texte en gras.	`</strong>`	`<strong>Texte en gras</strong>`
`<em>`	Texte en italique.	`</em>`	`<em>Texte en italique</em>`
`<code>`	pour afficher du code informatique.	`</code>`	`<code>print("Bonjour")</code>`
`<sub>`	Texte en indice.	`</sub>`	`<sub>Indice</sub>`
`<sup>`	Texte en exposant.	`</sup>`	`<sup>Exposant</sup>`

Exemples en HTMLRendu des exemples

<body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <h3>Titre de niveau 3</h3>
    <h4>Titre de niveau 4</h4>
    <h5>Titre de niveau 5</h5>
    <h6>Titre de niveau 6</h6>
    <p>
    Ceci est un paragraphe. Il force le passage à la ligne et
    met en place des espacements avec les éléments au dessus et
    au dessous (margin et padding).
    </p>
    <p>
    Mise en place des balises in-line :
    <em>emphasis</em>, <strong>strong</strong>, <code>code</code>
    <sup>sup</sup>, <sub>sub</sub> et <span> span : balise générique </span>
    </p>
</body>

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6

Ceci est un paragraphe. Il force le passage à la ligne et met en place des espacements avec les éléments au dessus et au dessous (margin et padding).

Mise en place des balises in-line : emphasis, strong, code ^sup, _sub et span : balise générique - pas de propriétés pas défaut)

Balises de Listes

Balise	Description	Balise Fermante	Exemple
`<ul>`	Liste non ordonnée.	`</ul>`	`<ul><li>Élément 1</li><li>Élément 2</li></ul>`
`<ol>`	Liste ordonnée.	`</ol>`	`<ol><li>Élément 1</li><li>Élément 2</li></ol>`
`<li>`	Élément de liste.	`</li>`	`<li>Élément de liste</li>`

Exemples en HTMLRendu des exemples

<body>
    <h1> Faire une pâte à crêpe </h1>
    <h2> Liste des ingrédients </h2>
    <ul>
        <li> 500g de farine </li>
        <li> 2 oeufs </li>
        <li> 0,5l de lait </li>
        <li> une pincée de sel </li>
    </ul>
    <h2> préparation </h2>
    <ol>
        <li> Mélanger les ingrédients </li>
        <li> Laisser reposer </li>
        <li> Faire chauffer la poêle </li>
    </ol>
</body>

Faire une pâte à crêpe

Liste des ingrédients

500g de farine
2 oeufs
0,5l de lait
une pincée de sel

préparation

Mélanger les ingrédients
Laisser reposer
Faire chauffer la poêle

Balises de Liens et Images

Balise	Description	Balise Fermante	Exemple
`<a>`	Lien hypertexte.	`</a>`	`<a href="https://example.com">Lien</a>`
`<img>`	Image.	(auto-fermante)	`<img src="image.jpg" alt="Description"/>`

Exemples en HTMLRendu des exemples

    <body>
        <h2> Les images</h2>
        <img src="images/lien.jpg"/>
        <h2> Les liens </h2>
        <p> 
            On peut définir une URL comme lien : <br/>
            <a href="https://raymond-naves.mon-ent-occitanie.fr/"> Lycée Raymond Naves </a>
        </p>
        <p>
        On peut définir un chemin relativement au répertoire courant vers une autre page du site:<br/>
        <a href="../page1.html"> Aller vers la page1 </a>
        </p>
        <p>
        On peut rendre une image cliquable vers un lien: <br/>
        <a href="https://raymond-naves.mon-ent-occitanie.fr/"><img src="images/lien.jpg"/> </a>
        </p>
    </body>

Les images

Les liens

On peut définir une URL comme lien : Lycée Raymond Naves

On peut définir un chemin relativement au répertoire courant vers une autre page du site: Aller vers la page1

On peut rendre une image cliquable vers un lien

Balises de Tableaux

Balise	Description	Balise Fermante	Exemple
`<table>`	Tableau.	`</table>`	`<table></table>`
`<tr>`	Ligne de tableau.	`</tr>`	`<tr></tr>`
`<th>`	En-tête de tableau.	`</th>`	`<th>En-tête</th>`
`<td>`	Cellule de tableau.	`</td>`	`<td>Cellule</td>`
`<caption>`	Légende du tableau.	`</caption>`	`<caption>Légende</caption>`

Exemples en HTMLRendu des exemples

    <body>
        <table>
            <tr>
                <th> Prénom </th>
                <th> Nom </th>
                <th> Age </th>
            </tr>
            <tr>
                <td> Alain </td>
                <td> Térieur </td>
                <td> 50 </td>
            </tr>
            <tr>
                <td> Paul </td>
                <td> Auchon </td>
                <td> 94 </td>
            </tr>
            <tr>
                <td> Jean </td>
                <td> Raffole </td>
                <td> 80 </td>
            </tr>
            <caption> Ceci est un tableau</caption>
        </table>
    </body>

Ceci est un tableau
Prénom	Nom	Age
Alain	Térieur	50
Paul	Auchon	94
Jean	Raffole	80

Exemple de Document HTML

Code HTMLRendu de la page exemple

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mon Document HTML</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header>
            <h1>Bienvenue sur mon site</h1>
        </header>
        <div>
            <ol>
                <li>Accueil</li>
                <li>À propos</li>
                <li>Contact</li>
            </ol>
        <div>
        <div>
        <h2>Accueil</h2>
        <p>Bienvenue sur la page d'accueil.</p>
        <h2>À propos</h2>
        <p>Informations sur le site.</p>
        <h2>Contact</h2>
        <p>
            <ul>
                <li>Aristote</li>
                <li>Thalès</li>
                <li>Pythagore</li>
            </ul>
        </p>
        <p>
        <h2>Une image</h2>
        <img src="images/image.png"/>
        <h2>Mes liens préférés</h2>
            <a href = "https://www.qwant.com">Le meilleur moteur de recherche</a>
            <br/>
            <a href = "https://www.duckduckgo.com">Le 2ème meilleur moteur de recherche</a>
        </div>
    </body>
</html>

Mon Document HTML

Bienvenue sur mon site

Accueil
À propos
Contact

Accueil

Bienvenue sur la page d'accueil.

À propos

Informations sur le site.

Contact

Aristote
Thalès
Pythagore

Une image

Mes liens préférés

Le meilleur moteur de recherche
Le 2ème meilleur moteur de recherche