Participer au site avec un Tip
Rechercher
 

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Une première page HTML

La syntaxe HTML Les commentaires HTML



Accès rapide :
La vidéo
Structure minimale d'une page HTML
Quelques premiers tags visuels

La vidéo

Cette vidéo vous montre comment générer votre première page HTML. L'atelier utilisé pour la démonstration est Visual Studio Code.


Votre première page HTML

Structure minimale d'une page HTML

Comme nous l'avons indiqué en introduction de ce cours, une page HTML doit respecter la recommandation HTML (la version la plus récente de la recommandation, si possible). L'exemple ci-dessous propose la plus petite page possible qui respecte ce standard. Quelques explications complémentaires suivront.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
<!DOCTYPE html>
<html>
    <head>
        <title>Une page HTML vierge</title>
        <meta charset="utf-8" />
    </head>
    <body>
        
    </body>
</html>
Notre première page HTML

Donc une page HTML commence toujours par le tag <html> et doit se terminer par le tag fermant </html>. Cette page est normalement découpée en deux parties principales : l'entête de la page HTML et son corps. L'entête HTML est introduite par le tag <head>. Le corps de la page est, quand à lui, introduit via le tag <body>.

Revenons sur l'entête de la page : normalement, elle contient un grand nombre d'informations non visuelles (non affichées dans le corps de la page). Ces informations, non obligatoire, sont souvent utilisées par d'autres outils tels que les moteurs de recherche. Seules deux lignes sont imposées par la recommandation HTML : le titre de la page (le tag <title>) et l'information d'encodage du fichier source HTML (le tag <meta> avec l'attribut charset).

le titre de la page ne se voit pas dans le corps de la page (l'exemple ci-dessus affiche une page vide). Par contre, on le retrouve dans le texte de l'onglet associé à votre page Web.
Notre première page HTML

Pour ce est du tag <meta> vous devez garantir que l'encodage indiqué correspond bien à celui utilisé par votre éditeur de pages Web. Si vous avez un doute, essayer de faire un « Save As... » pour le forcer. Personnellement, je vous recommande vivement d'utiliser un encodage UFT-8 : c'est un encode moderne supportant tous les caractères (les glyphes) dont vous pouriez avoir besoin.

Quelques premiers tags visuels

Je vous propose de commencer par introduire le titre « visuel » dans la page HTML. Pour ce faire, nous utilisont le tag <h1>. Le nom de ce tag signifie « heading one » (un titre de niveau 1). En fait nous avons six niveaux de titres en HTML : de <h1> à <h6>.

Nous pouvons, ajouter des paragraphes à notre page HTML. Pour ce faire, nous utiliserons le tag <p> (p pour paragraphe, bien entendu). Votre page HTML peut contenir autant de pragraphes que souhaité.

Et puis, il y a ce qui a fait le succès de HTML : le lien hypertexte. Pour introduire un lien hypertexte dans votre page, il faut utiliser le tag <a>. Celui-ci doit avoir un attribut obligatoire (pour être un lien) : l'attribut href (la référence hypertexte). Cette référence hypertexte doit être une URL : une « Uniform Resource Locator ». Une adresse Internet, si vous péférez. Entre le tag ouvrant et le tag fermant, vous devrez placer le texte qui sera présenté par le lien. Voici un exemple de page HTML présentant ces éléments.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
<!DOCTYPE html>
<html>
    <head>
        <title>Une petite page HTML</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Un titre de niveau 1</h1>
        
        <p>
            Un premier petit paragraphe.
        </p>
        
        <h2>Un titre de niveau 2</h2>
        
        <p>
            Un autre paragraphe contenant un lien pour aller
            sur le site <a href="http://koor.fr">KooR.fr</a>.
        </p>
    </body>
</html>
Notre première page HTML avec du contenu

Et voici comment un navigateur affichera votre page HTML.

Notre première page HTML
si vous placer la souris sur un lien hypertexte, l'URL visée par ce lien sera affichée en bas à gauche de la fenêtre un navigateur.
La syntaxe HTML Les commentaires HTML