1. Introduction
2. Langage HTML

2.1. Un premier document

2.2. Présentation

2.3. Structure générale

2.4. Les métas

2.5. Principaux Eléments

2.6. Liens Hypertextes

2.7. Images

2.8. Tableaux

2.9. Formulaires

2.10. Cadres

2.11. Valeurs des attributs

2.12. Caractères spéciaux

2.13. Recommandations

3. Feuilles de style
4. Scripts et évènements
5. Références
6. Travail Pratique






Langage HTML / Principaux Eléments

  • Se focaliser sur la structure du document
  • Paramétrer la présentation (couleurs, espacements...) à l'aide de feuilles de style.

Headers

  • Titres et entêtes
  • 6 niveaux : h1 ... h6
  • exemple

<h1 align style class title lang >Headers</h1>

Paragraphes

  • La présentation du texte encapsulé dans les balises pre est restituée tel quel
  • Attribut width : nombre maximum de caractères par ligne
  • exemple

<p align class style lang title >Bonjour Monsieur Durand.</p>
<pre width class style lang title >Bonjour Monsieur Durand.</pre>

Saut de ligne

<br>

Listes

  • Listes non murérotées :
    <ul type compact class style lang title >
      <li type class style lang title >item 1</li>
      <li>item 2</li>
      ...
    </ul>
  • Listes numérotées :
    <ol type start compact class style lang title >
      <li type class style lang title >item 1</li>
      <li>item 2</li>
      ...
    </ol>
  • Listes de définitions :
    <dl compact class style lang title >
      <dt>item 1</dt>
      <dt>item 2</dt>
      ...
    </dl>
  • exemple
  • Attribut type de l'élément ul : disc, circle, square
  • Attribut type de l'élément ol : 1, A, a, I, i
  • Attribut start : un entier
  • Attribut compact : pas de valeur. Compacte la liste autant que possible

Autres éléments de présentation

  • Mettre en gras : <b>...</b>
  • Mettre en italique : <i>...</i>
  • Souligner : <u>...</u>
  • Mise en évidence : <em>...</em>
  • Accentuer : <strong>...</strong>
  • Réduire : <small>...</small>
  • Barrer : <strike>...</strike>
  • Clignoter : <blink>...</blink>

Eléments préformatés

  • Abbréviation : <abbr>...</abbr>
  • Accronyme : <acronym>...</acronym>
  • Adresse
    : <address>...</address>
  • Citation : <cite>...</cite>
  • Citation
    : <blockquote>...</blockquote>
  • Légende : <legend>...</legend>

Présenter du code

<code>...</code>

Autres éléments

  • Affichage d'une barre : l'attribut noshade ne prend aucune valeur et a pour effet d'annuler les effets d'ombrage
    <hr align width noshade size class style lang title >
  • Affichage d'une applet Java :
    <applet type code codebase align width height hspace vspace alt class style title name >

Elément span

<span class style lang title >...</span>

Cet élément permet de contrôler la présentation d'une portion de texte à l'aide d'une feuille de style.

L'élément div possède les mêmes propriétés mais se comporte moins bien.