HTML (HyperText Markup Language) est un langage de description de contenu de page Web dont les parties sont délimitées par des balises.

​

Exemple de balises :

​

<!doctype html>   

<html>

    <head>

        <title>Ecrire ici le titre de la page qui s&acute;affichera juste au dessus de l&acute;url</title>

    </head>

    <body>

        <h1>Ecrire ici un titre qui s&acute;affichera dans la page web</h1>

        <div>

            <p>Ecrire ici le texte ou paragraphe que s&acute;affichera dans la page web</p>

            <p>Ecrire ici le texte ou paragraphe que s&acute;affichera dans la page web</p>

        </div>

    </body>

</html>

​

La balise <div> définit une division ou une section dans un document HTML.

​

La balise <h1> sert à afficher un titre. La balise <h2> affiche un sous-titre. 

​

​

Il est souvent utile de représenter la structure d'une page HTML. Pour cela on fait un DOM (Document Object Model) dans lequel on indique les principales balises HTML de la page.

​

​

​

​

​

​

​

​

​
 

​

 

 

En HTML, les caractères spéciaux (accents, apostrophe, symboles, ...) ne sont pas autorisés. Il faut donc saisir une combinaison précédée du caractère & et terminée par un point-virgule.

Pour voir tous les codages des caractères spéciaux vous pouvez aller sur le site suivant :

​

​

​

 

La balise <li> est utilisée pour représenter un élément dans une liste. Elle doit être contenu dans un élément parent : une liste ordonnée (<ol>), une liste non ordonnée (<ul>) ou un menu (<menu>). Dans les menus et les listes non ordonnées, les éléments de liste sont affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.

​

​​<div>

    <ol>

        <li>Faites bouillir de l'eau. Saler l&apos;eau.</li>

        <li>Plonger les p&acirc;tes dans l&apos;eau bouillante (environ 10 minutes de cuisson).</li>

        <li>Les &eacute;goutter.</li>

        <li>Ajouter une grosse noix de beurre.</li>

    </ol>

</div>

​

À savoir : la balise CENTER permet de centrer les éléments.

​

​

En HTML, on peut faire des tableaux entre les deux balises BODY. Pour cela il faudra utiliser une balise tableau (<table>), puis des balises lignes (<tr>) et cellules (<td>).

Par défaut, il n'y a pas de bordure pour les cellules, il faudra donc utiliser une page CSS pour définir les caractéristiques du tableau (bordures, espacement, couleur ...).

​

<table>

    <tr>

        <td>Contenu de la premi&egrave;re cellule de la premi&egrave;re ligne</td>

        <td>Contenu de la deuxi&egrave;me cellule de la premi&egrave;re ligne</td>

    </tr>

    <tr>

        <td>Contenu de la premi&egrave;re cellule de la deuxi&egrave;me ligne</td>

        <td>Contenu de la deuxi&egrave;me cellule de la deuxi&egrave;me ligne</td>

    </tr>

</table>

​

​

Pour afficher une image dans une page HTML, on utilise la balise <img> dans laquelle on met le nom de l'image.

​

Affichage de l'image nommée mon_image.jpg :

​

<img src=mon_image.jpg>

​

À savoir : on peut afficher une image dans une cellule d'un tableau.

​

​

Avec getElementsById(), on retourne / sélectionne un élément d'une balise à partir de son id.

Ne pas confondre la propriété id et la propriété name. Pour trouver tous les éléments à partir de leur nom, il faut utiliser getElementsByName().

​

Par exemple, avec getElementsById(), on peut utiliser une suite de fonctions. Et quand on va cliquer sur un bouton, un élément va changer.

​

<div id=nom_id>Texte de base</div>

​

<div onclick="document.getElementById('nom_id').innerHTML = 'Le texte change';">cliquez</div>

​

Quand on va cliquer sur le bouton "cliquez", l'élément "Texte de base", qui a pour id "nom_id", va changer en "Le texte change".

Ici avec getElementsById(), on retourne l'élément (Texte de base) à partir de son id (nom_id).