zylv.biz.st Accueil Jess Fonds d'écran Liens Livre d'or Trafic | Mail Membres
Zylv

Zylv

Projet professionnel
C.V
Expériences détaillé
Formations détaillé
Compétences

Informatique

Cours
Truks et astuces
Allemand technique
Flashdengs
Logiciels Libres

Musique

Fanfare En Pétard
Web Radio
A découvrir

- @ -


Contact

Développer en HTML

Introduction

HTML : Hypertext Markup Language (langage de balisage d'hypertexte), c'est un language de présentation de texte.

Structure d'une page HTML

<html>
  <head>
    <title>
      Titre
    </title>
  </head>
  <body>
     Texte avec un <a href="cible.html">lien</a>.
    <p>
      Ceci est un nouveau paragraphe
    </p>
  </body>
</html>

Mise en forme

Les balises de base

Voici les balises qui permettent de mettre en forme du texte :

<B>Texte Gras</B> Texte Gras
<I>Texte Italique</I> Texte Italique
<U>Texte Souligné </U> Texte Souligné
<STRIKE>Texte Barré </STRIKE> Texte Barré
<BIG>Police plus grande</BIG> Police plus grande
<SMALL>Police plus petite</SMALL> Police plus petite
<SUB>Texte en indice</SUB> Texte en indice
<SUP>Texte en exposant</SUP> Texte en exposant

Les titres

Les six niveaux de TITRE de <H1> à <H6> permettent de mettre en valeur une portion de texte en le plaçant entre les balises d'ouverture et de fermeture.

<H1>Titre de niveau 1</H1>

Titre de niveau 1

<H2>Titre de niveau 2</H2>

Titre de niveau 2

<H3>Titre de niveau 3</H3>

Titre de niveau 3

<H4>Titre de niveau 4</H4>

Titre de niveau 4

<H5>Titre de niveau 5</H5>
Titre de niveau 5
<H6>Titre de niveau 6</H6>
Titre de niveau 6

Dans ce tableau Les titres de niveau 2 et 3 sont mis en form par la feuille de style que j'utilise, sans celle-çi le titre 2 ne serai pas souligné et le 3 ne serai pas gris.

Les listes

Liste ordonnée

<ol> permet d'avoir une liste numérotée, <lh> indique le titre de la liste et <li> indique chaque élément de la liste.

La balise <ol> à des attributs :

  • TYPE=A : Numérotation en lettres majuscules.
  • TYPE=a : Numérotation en lettres en minuscules.
  • TYPE=I : Numérotation en chiffres romains majuscules.
  • TYPE=i : Numérotation en chiffres romains minuscules.
  • TYPE=1 : Numérotation en nombres (utilisé par défaut).
  • START=n : Valeur de départ de la Numérotation. 
<OL> 
  <LH> Titre 
  <LI> élément 1 
  <LI> élément 2 
  <LI> élément 3 
</OL>
    Titre
  1. élément 1
  2. élément 2
  3. élément 3 
<OL type=A start=2> 
  <LH> Titre 
  <LI> élément 1 
  <LI> élément 2 
  <LI> élément 3 
</OL>
    Titre
  1. élément 1
  2. élément 2
  3. élément 3

Liste non ordonnée

<ul> permet d'avoir une liste non numérotée avec des puces, <lh> indique le titre de la liste et <li> indique chaque élément de la liste.

La balise <ul> à des attributs pour modifier les puces :

  • TYPE=DISC : Puce en forme de disque plein.
  • TYPE=CIRCLE : Puce en forme de disque vide.
  • TYPE=SQUARE : Puce en forme de carré. 
<UL> 
  <LH> Titre 
  <LI> élément 1 
  <LI> élément 2 
  <LI> élément 3 
</UL>
    Titre
  • élément 1
  • élément 2
  • élément 3 
<UL type=circle > 
  <LH> Titre 
  <LI> élément 1 
  <LI> élément 2 
  <LI> élément 3 
</UL>
    Titre
  • élément 1
  • élément 2
  • élément 3

Liste de définitions

<dl> permet d'avoir une liste de définitions, <dt> indique le terme et <dd> indique chaque définitions.

<DL> 
  <dt> Terme 1 
    <dd> définition 1 du terme 1 
    <dd> définition 2 du terme 1  
  <dt> Terme 2 
    <dd> définition 1 du terme 2  
    <dd> définition 2 du terme 2  
</DL>
Terme 1
définition 1 du terme 1
définition 2 du terme 1
Terme 2
définition 1 du terme 2
définition 2 du terme 2

Les liens

Lien interne dans la page <A NAME="haut"> Ancre
Lien interne dans la page <A HREF="#haut"> Haut
Lien interne <A HREF="page.htm"> Page
Lien externe <A HREF="http://www.zylv.com"> zylv.org
Lien e-mail <A HREF="mailto:mail@zylv.org?subject=test"> Mail
Lien vers serveur ftp <A HREF="ftp://ftp.site.com"> Ftp

Les tableaux

La balise <TABLE> indique la création d'un tableau, la balise >TH> définit l'en-tête des colonnes, la balise >TR> définit une nouvelle ligne et la balise >TD> définit une nouvelle cellule.

Titre du tableau

La ballise >CAPTION> défini le titre du tableau, il peut être placé au dessus ou en dessous à l'aide des attributs TOP ou BOTTOM

Structure d'un tableau simple

<TABLE BORDER=1>
<CAPTION>
Titre du tableau.
</CAPTION>
<TR>
<TH>Colonne 1</TH>
<TH>Colonne 2</TH>
</TR>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TABLE>
Titre du tableau.
Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 3 Cellule 4

Cellules fusionnées

<TABLE BORDER=1>
<TR>
<TD>Cellule 1</TD>
<TD COLSPAN=2>2 cellules fusionnées en ligne</TD>
</TR>
<TR>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
<TD ROWSPAN=2>2 cellules fusionnées en colonne</TD>
</TR>
<TR>
<TD>Cellule 4</TD>
<TD>Cellule 5</TD>
</TR>
</TABLE>
Cellule 1 2 cellules fusionnées en ligne
Cellule 2 Cellule 3 2 cellules fusionnées en colonne
Cellule 4 Cellule 5

Les attributs ALIGN et VALIGN

  • ALIGN=LEFT : (défaut) Les données sont alignées à gauche de la cellule,
  • ALIGN=RIGHT : Les données sont alignées à droite de la cellule,
  • ALIGN=CENTER : Les données sont centrées à l'intérieur de la cellule,
  • VALIGN=MIDDLE : (défaut) Les données sont centrées verticalement à l'intérieur de la cellule,
  • VALIGN=TOP : Les données sont en haut de la cellule,
  • VALIGN=BOTTOM : Les données sont en bas de la cellule,
  • VALIGN=BASELINE : Toutes les données des cellules sont alignées sur une ligne.

Les attributs de mise en page

  • WIDTH : Spécifie la largeur du tableau ou d'une cellule, en pixels ou pourcentage,
  • HEIGHT : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou pourcentage,
  • BORDER : Spécifie la taille de la bordure,
  • CELLPADDING : Spécifie l'espace entre la bordure et le contenu de la cellule,
  • CELLSPACING : Spécifie l'espace entre les cellules,
  • BGCOLOR : Spécifie la couleur de fond de la cellule,
  • BORDERCOLOR : Spécifie la couleur de la bordure,
  • BORDERCOLORLIGHT : Spécifie la couleur aux extremitées de la bordure,
  • BORDERCOLORDARK : Spécifie la couleur d'ombre de la bordure,
  • BACKGROUND : Spécifie l'URL de l'image à afficher comme image d'arrière plan..

Exemple d'un tableau complexe

<TABLE BORDER=2>
<CAPTION>
Titre du tableau.
</CAPTION>
<TR>
<TH WIDTH=150 BGCOLOR="#FF3333" >Colonne 1</TH>
<TH>Colonne 2</TH>
</TR>
<TR>
<TD>Cellule 1</TD>
<TD ALIGN=right>Cellule 2<br>
<TABLE BORDER=4 BORDERCOLOR="#FF3333" >
<TR BORDERCOLOR="#FF3333">
<TD>Cellule 1</TD>
<TD COLSPAN=2> cellules fusionnées </TD>
</TR>
<TR>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
<TD ROWSPAN=2> cellules fusionnées</TD>
</TR>
<TR>
<TD BGCOLOR="#33FF66">Cellule 4</TD>
<TD>Cellule 5</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TABLE>
Titre du tableau.
Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 1 cellules fusionnées
Cellule 2 Cellule 3 cellules fusionnées
Cellule 4 Cellule 5
Cellule 3 Cellule 4
zylv.org