Accès rapide :
La vidéo
Structure minimale d'une page HTML
Quelques premiers tags visuels
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.
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> |
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).
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.
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> |
Et voici comment un navigateur affichera votre page HTML.
La syntaxe HTML
Les commentaires HTML
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 :