Martius Web : toolbox pour programmeurs et webmasters
AccueilRéalisationsArticlesTutoriauxBlogForumContact
Martius Web vous propose ses services à des prix très compétitifs, contactez-nous ! (Missions de tout type sur Troyes ou Dijon, sur place ou télétravail)

Les tutoriaux

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 (le menu, 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

N'hésitez pas à poser vos questions sur le forum

phpMyVisites


© 2004 Martius Web | Some rights reserved | A propos | Plan du site