Votre première page HTML


Votre première page HTML


Maintenant que nous avons la structure d'une page HTML, nous allons construire le contenu de la page.

Tout ce que nous allons apprendre ici se localise entre les balises <body>,
sauf exeption possible que nous signalerons.


Comme nous avons tenté de l'expliquer avant, chaque balise doit décrire ce
qu'elle entoure. Il existe un grand nombre de balises, vous pourrez vous référer à une ressource très complète répertoriant toutes les balises xhtml, ainsi que leur description, leurs principaux attributs...

Je vous invite à vous remettre en mémoire les différences entre les balises bloc et inline (voir "Les trois types de balises").


// Les balises courantes

On encadre toujours une partie de contenu d'une balise de type bloc, ce sont les
balises que l'on utilise le plus couramment. La balise la plus utilisée est la balise <div>.

C'est la balise bloc universelle, qui sert à contenir tout type de donnée que l'on ne peut pas
vraiment décrire. On l'utilise par exemple pour encadrer la totalité de la page, ou encadrer des
grandes parties de l'organisation (lemenu, l'entête...).
Nous allons commencer par faire trois grandes parties :

l'entête qui contiendra notamment le logo, la zone du contenu de la page qui contiendra le
menu, le texte de la page et le pied de page avec le copyright et les informations diverses... 


     1  <div>
     2    <!-- Entête de la page : logo -->
     3  </div>
     4  <div>
     5    <div>
     6      <!-- Menu -->
     7    </div>
     8    <div>
     9      <!-- contenu de la page -->
    10    </div>
    11  </div>
    12  <div>
    13    <!-- Pied de page -->
    14  </div>


> Liste des attributs pour la balise <div>


Travaillons en premier l'entête :

Le logo est une image : 

    1  <div>
    2    <img src="./images/logo.jpg" alt="Logo du site" />
    3  </div>

L'image est un élément inline, il contient deux attributs obligatoires :


  • src : correspond à
    "source", on indique le chemin relatif
    de l'image, par rapport
    à la page.

  • alt : correspond à texte
    alternatif, cet attribut sert à décrire l'image, dans le cas où l'image serait
    absente ou que la page serait lue par un navigateur textuel.


il existe de nombreux autres attributs pour l'image, mais pas obligatoires, tel que :


  • title : On indique le
    titre de l'image (souvent affichée dans une bulle d'aide). Il est utile et
    souvent à mettre pour des images illustrant un texte.


> Liste des attributs pour la balise <img>


Nous allons maintenant faire le menu avec une liste à puces. 


    1  <div>
    2    <div>
    3    <!-- Menu -->
    4      <ul>
    5        <li>Accueil</li>
    6        <li>Produits</li>
    7      <li>Nos Prix</li>
    8      <li>Contact</li>
    9    </ul>
   10    <div>
   11  <div>

Les balises <ul> entourent les différentes lignes de la liste.

Chaque ligne est entourée de la balise <li>. Il est possible de faire une sous liste en imbriquant une autre liste entre <li> et </li>. 

   
    1  <ul>
    2    <li>
    3      Liste 1
    4      <ul>
    5        <li>Sous liste</li>
    6        <li>Sous liste</li>
    8      </ul>
    9    </li>
   10  </ul>

// Le lien hypertexte

Le lien hypertexte est le morceau de texte sur lequel vous cliquez pour voir apparaître
une autre page.

En voici le code : 


    1  <a href="suivant.html" title="Titre de la prochaine page"
       hreflang="fr" accesskey="s" tabindex="1">Page suivante</a>


L'attribut obligatoire est href dans lequel vous indiquez le chemin vers la page qui s'affichera.

Les autres attributs sont optionnels :


  • title : Donnez un titre
    à la prochaine page, il sera affiché dans une bulle d'aide au survol du lien
    par la souris

  • hreflang : définissez la
    langue de la page qui sera affichée (fr,en,...).

  • accesskey : vous pouvez
    indiquer une lettre de raccourci, en tapant Alt+cette lettre, la page
    s'affiche

  • tabindex : c'est aussi
    un attribut d'accessibilité vous pouvez définir dans quel ordre les liens ont
    le focus (sont pointés) en tapant sur la touche tab.



> voir la liste des attributs pour <a>


Note aux utilisateurs de HTML 4 : l'attribut target est devenu obsolète, pour ouvrir une page dans une nouvelle fenêtre, il faut utiliser un javascript.


// Titres et paragraphes

Nous allons maintenant structurer le texte : 


   1  <h1>1. Documentation du Produit</h1>
   2    <h2>1.1. Spécificité</h2>
   3      <p>
   4        Lorem ipsum dolor sit amet, consectetuer adipiscing
   5        elit. Vestibulum sollicitudin, neque blandit
   6        elementum nonummy, massa wisi hendrerit dolor,
   7        quis commodo enim risus in velit.
   8      </p>
   9    <h2>1.2. Fonctions avancées</h2>
  10      <p>
  11        Praesent sodales. Vestibulum faucibus, ipsum non
  12        convallis auctor, leo arcu porttitor velit, id
  13        lobortis justo augue a dui. Pellentesque laoreet
  14        ligula eu eros. Donec at felis in dui aliqu.
  15      </p>

Nous définissons les titres avec les balises <h1>,<h2>,... jusqu'à <h6>.

Le titre le plus important étant <h1> et <h6> le sous-titre le plus bas
dans l'organisation du document.


la balise <p> correspond à un paragraphe. C'est une balise encore plus
souvent utilisée que la balise <div>


même si elle se limite à un type de contenu plus précis.

Vous pouvez voir l'exemple n°1 construit avec ces balises courantes.


// Les caractères spéciaux

Certains caractères en html, tel que les é è ê, ne sont pas admis dans le code, pour les
taper, il faut utiliser des codes de substitution.

Chacun de ces codes commence par le symbole & et se termine par ; (point-virgule).

Par exemple, pour é le code sera &eaute;.

La syntaxe sera : 


    1  &eacute;
    2  & [lettre accentuée] [accent] ;
    3  ex : à => &agrave; ou œ = &oelig;...

On aura :



  • Accent aigü : acute;
    : é = &eacute;

  • Accent grave :
    grave; : è = &egrave;

  • Accent circonflexe :
    circ; : ê = &ecirc;

  • Tréma : uml; : ë = &euml;

Il existe d'autres caractères spéciaux, les plus courants sont :


  • € = &euro;

  • © = &copy;

  • ™ = &trade;

  • < = &lt; : ne les remplacez que dans un texte, pas pour une balise.

  • > = &gt;

  • " = &quot; : ne les remplacez pas dans une balise.

  • & = &amp; : vous devez aussi remplacer ce signe dans une
    adresse web.



> Liste des caractères spéciaux



Vous venez d'étudier les bases fondamentales de la création de pages web.

Nous allons approfondir et alimenter notre liste de balises connues. Ces dernières vous
seront très utiles dans de nombreux cas. Il est assez important de les connaître.


> retour au sommaire

> voir la suite