Principales balises HTML

  1. Les lignes horizontales

    2.

  2. Les paragraphes

    3.

    Le code :

    	  <p align="right">
	  Le 27 Juillet 2004</p>
	  <p align="left">
	  Nom Prénom</p>
	  <p align="center"> à</p>
	  <p align="right">Mr René Dupond</p>

    Le résultat :

    Le 27 Juillet 2004

    Nom Prénom

    à

    Mr René Dupond

  3. Les divisions

    4.

    Le code : 

    	  <div align="right">
	  <p>un premier paragraphe</p>
	  <p>et un second</p>
	  <p>tous alignés à droite</p>
	  </div>

    Résultat :

    un premier paragraphe

    et un second

    tous alignés à droite

  4. les listes

    5.

    Le code :

    	  <ul type="square"> 
	    <li> Une liste numérotée</li>
	  <ol type="a">
	    <li>et de un</li>
	    <li> et de deux</li>
	  </ol>
	  <li>Une liste de description</li>
	  <dl>
	    <dt> HTML</dt>
	    <dd>Hyper Text Markup Language</dd>
	    <dt> CSS</dt>
	    <dd> Cascading Style Sheet</dd>
	  </dl>

    Résultat :

    • Une liste numérotée
      1. et de un
      2. et de deux
    • Une liste de description
      • HTML
      Hyper Text Markup Language
      CSS
      Cascading Style Sheet

  5. Les tables

    6.

    Le code :

    	  <table border="1" width="108px"  background="../IMAGES/logo_ensicaen.jpg" align="center">
	    <caption> Un exemple de table</caption>
	      <tr>
		<td colspan="3" align="center">
		  0</td>
	      </tr>
	      <tr>
		<td rowspan="3" valign="top">
		  1</td>
               <td>2</td><td>3</td>
	      </tr>
	      <tr><td>4</td><td>5</td></tr>
	  </table>

    Résultat :

    Un exemple de table
    0
    1 23
    45

  6. Les liens les ancres

    7.

    Le code :

               <a name="top"/>
    en début de document et 
    	  <a href="#top"> Début</a><br/>
	  <a href="mailto:luc.brun@free.fr"> Écrivez moi</a>

    Résultat :

    Début
    Écrivez moi

  7. Les images

    8. Le code :

    	  <img src="../IMAGES/logo_ensicaen.jpg" 
	    width="100px" align="middle" 
	    hspace="20">
	  Ancien logo de L'EnsiCaen

    Résultat :

    Ancien logo de L'EnsiCaen

  8. Les images clicables

    9.

    Le code :

    	  <map name="menu">
	    <area shape="rect" coords="30,45,125,65" href="#ligne"/>
	  <area shape="rect" coords="20,75,180,90" href="#paragraphe"/>
	  <area shape="rect" coords="20,100,144,120" href="#division"/>
	  <area shape="rect" coords="15,125,115, 142" href="#listes"/>
	  <area shape="rect" coords="20,160,115, 175" href="#tables"/>
	  <area shape="rect" coords="20,196,115, 210" href="#liens"/>
	  <area shape="rect" coords="15,215, 120,235" href="#images"/>
	</map>
	  <img src="IMAGES/menu.jpg" align="middle" usemap="#menu">

    Résultat :

Voir également la carte de france.
luc.brun@free.fr
Last modified: Fri Sep 9 13:32:36 CEST 2005