Faire son site et le publier

Kompozer et CSS

Feuille de style interne : Les balises HTML 

Exercice : Reprenons le même code d'origine, sans mise en forme, pour étudier un peu plus en détail les balises HTML.
Ouvrir et sauvegarder dans un dossier d'exercices une nouvelle page « test.html »
Copier ce code dans le presse papier :

<html>
<head>
<title>Document sans titre</title>
</head>
<body>
<h1>Ceci est le titre principal</h1>
<h2>Titre secondaire no 1</h2>
<p>Ceci est le texte du premier paragraphe</p>
<h2>Titre secondaire no 2</h2>
<p>Ceci est le texte du second paragraphe</p>
<cite>
Nous naissons tous fous.
Quelques-uns le demeurent. (Samuel Beckett, 1906-1989)
</cite>
</body>
</html>

Ouvrir l'Editeur texte, supprimer tout sauf la première ligne DOCTYPE, coller le contenu du presse papier et sauvegarder.
Revenir sur la page et observer, côte à côte, le code et la page.

balises HTML : onglet Normal de Kompozer et code dans l'éditeur

HTML   HyperText MarkUp Language : langage de marquage de liens hypertextes.

Le langage html colle des étiquettes littérales dans le texte d'une page web. Il utilise des balises, tags en anglais, qui permettent de dire sur quel élément appliquer telle ou telle règle. Les balises fonctionnent en général par paires, une balise ouvrante et une balise fermante. Ce sont des mots anglais faciles à comprendre et à mémoriser. Tout contenu du document doit être contenu dans au moins une balise. On peut imbriquer des balises les unes dans les autres mais il faut toujours les fermer dans l'ordre.  <1><2><3>contenu</3></2></1>

Les procédés qui utilisaient uniquement le html pour créer des pages web sont tombés en désuétude. Pour mettre en forme le contenu des pages on se sert maintenant des CSS. Le html continue à servir pour structurer les informations et pour créer des liens.

Le code source d'une page web  comprend   4 parties obligatoires :

  1. DOCTYPE : A  la première ligne, le DOCTYPE informe le navigateur sur la version  HTML utilisée. Il indique la "grammaire" html à suivre,
  2. <html>  c'est l'élément racine. Cette balise crée une boite invisible contenant head et body.
  3. <head>  c'est une sorte d'introduction. Le head n'apparaît pas dans la fenêtre de texte du navigateur. Il contient des informations meta et title exploitées par les navigateurs et moteurs de recherche.
  4. <body>  c'est le corps de la page. Tout ce qui est placé entre <body> et </body> sera affiché dans la fenêtre du navigateur.

Autres balises dans ce code :

Haut de page
Jos Argaud - Mise à jour 31/08/2008  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement