Première Partie

HTML 4.0

Historique

HTML 4.01

Spécification W3C depuis le 24 décembre 1999
Spécification à: http://www.w3.org/TR/html4

SGML - Standard Generalized Markup Language

Marquage de documents permettant d'enrichir le contenu:

HTML est un exemple de marquage

Un exemple de document HTML

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>My first HTML document</TITLE>
 </HEAD>
 <BODY>
   <IMG src="logo.gif">
   <P>Hello world!
 </BODY>
</HTML>

Définition d'un langage de marquage

Eléments et Attributs

Eléments

Attributs

Notes:

Document Type Definition (DTD)

<!ELEMENT UL - - (LI)+>
<!ELEMENT IMG - O EMPTY>

<!ATTLIST MAP
 name    CDATA  #REQUIRED
>

 id      ID     #IMPLIED  -- document-wide unique id -- 
 rowspan NUMBER 1         -- number of rows spanned by cell --

Caractères

Commentaires

  <!-- ceci est un commentaire -->
  <!-- Attention -- ceci n'est pas valide! -->
  <P -- ceci non plus! -->

Structure Globale

Information sur la version d'HTML utilisée (DOCTYPE)

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/REC-html40/frameset.dtd">

Une section de déclaration (HEAD, TITLE, META, ...)

<HEAD>
 <TITLE>HTML 4.0</TITLE>
 <META name="Author" content="Arnaud Le Hors">
</HEAD>

Le corps du document (BODY or FRAMESET)

Deux catégories d'éléments: "block-level" et "inline" (ou "text-level")

=> caractéristiques de présentation prédéfinies

Texte

Listes

Tableaux

Note
A ne pas utiliser simplement pour controller le formattage d'un document!!! (cf. CSS Positioning)

Tableaux - Exemple

<TABLE border="1"
 summary="This table gives some statistics about fruit
          flies: average height and weight, and percentage
          with red eyes (for both males and females).">
 <CAPTION><EM>A test table with merged cells</EM></CAPTION>
 <TR><TH rowspan="2"><TH colspan="2">Average
  <TH rowspan="2">Red<BR>eyes
 <TR><TH>height<TH>weight
 <TR><TH>Males<TD>1.9<TD>0.003<TD>40%
 <TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>

        A test table with merged cells
/-----------------------------------------\
|          |      Average      |   Red    |
|          |-------------------|  eyes    |
|          |  height |  weight |          |
|-----------------------------------------|
|  Males   | 1.9     | 0.003   |   40%    |
|-----------------------------------------|
| Females  | 1.7     | 0.002   |   43%    |
\-----------------------------------------/

Liens

Images, Applets et Objets

DIV et SPAN

Style

Frames

Note:
A éviter! Trop orienté vers les agents graphiques, pas de "bookmark" possible, pas de mécanisme de synchronisation.

Frames - Exemple

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
 <TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
 <FRAMESET rows="100, 200">
  <FRAME name="frame1" src="contents_of_frame1.html">
  <FRAME src="contents_of_frame2.gif">
 </FRAMESET>
 <FRAME src="contents_of_frame3.html">
 <NOFRAMES>
  <P>This frameset document contains:
  <UL>
   <LI><A href="contents_of_frame1.html">Some neat contents</A>
   <LI><IMG src="contents_of_frame2.gif" alt="A neat image">
   <LI><A href="contents_of_frame3.html">Some other neat contents</A>
  </UL>
 </NOFRAMES>
</FRAMESET>
</HTML>

 ---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

Formulaires

Script

Validation HTML

"Dynamic HTML"

Terme marketing

Comprend:

Evolution future d'HTML

Voir http://www.w3.org/MarkUp

Deuxième Partie

CSS level 2

CSS level 2

Language de feuilles de style pour documents HTML

Permet une séparation claire de la structure et du style
=> plus grande indépendance avec le media utilisé.

Recommendation W3C depuis le 12 mai 1998
Spécification à: http://www.w3.org/TR/REC-CSS2

Règles de style

Exemple:

H1 { color: blue }
^^^^^^^^^^^^^^^ déclaration
^^ sélecteur

Une règle comprend deux parties:

  1. un sélecteur: le lien entre HTML et CSS
  2. une déclaration: une propriété et une valeur

Intégration de style dans HTML

Utilisation de LINK, STYLE, et/ou style:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Titre</TITLE>
<LINK rel="stylesheet" type="text/css" 
href="http://style.com/cool" title="Cool">
<STYLE type="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Titre en bleu</H1>
<P style="color: green">Un paragraphe vert.
</BODY>
</HTML>

Groupements

Sélecteurs:
H1, H2, H3 { font-family: helvetica }
Déclarations:
H1 { 
font-weight: bold; 
font-size: 12pt;
line-height: 14pt; 
font-family: helvetica; 
font-variant: normal;
font-style: normal;
}
Autre:
H1 { font: bold 12pt/14pt helvetica }

Héritage

Le sélecteur class

Exemple:

H1.important { color: #FF0000 }

<H1 class="important">Attention!</H1>

Sélection de tous les éléments de même classe:

.important { color: #FF0000 }

Le sélecteur ID

Exemple:

#z98y { letter-spacing: 0.3em }

<P ID="z98y">Il fait vraiment un temps
incroyable.</P>

Equivalent à (ID est unique!):

P#z98y { letter-spacing: 0.3em }

Sélecteur contextuel

Exemple 1:

H1 EM { color: red }

Exemple 2:

H1 > EM { color: red }

Exemple 3:

UL LI { font-size: small }
UL UL LI { font-size: x-small }

Mixage de sélecteurs

Exemple:

.reddish H1     { color: red }
#x78y CODE      { background: blue }
DIV.sidenote H1 { font-size: large }
H1 B, H2 B, H1 EM, H2 EM { color: red }

Commentaires

Identiques à ceux de C:

EM { color: red }  /* red, really red!! */

Pseudo-classes et pseudo-éléments

Sélection indépendante de la structure HTML

Pseudo-classes:
A:link { color: red }     /* unvisited */
A:visited { color: blue }
A:active { color: lime }
DIV > P:first-child { text-indent: 0 }
:lang(fr) > Q { quotes: '« ' ' »' }
Pseudo-éléments:
P:first-line { font-style: small-caps }
P:first-letter { font-size: 200% }
P.special:before {content: "Special! "}

La cascade

Combinaison de feuilles de style par l'auteur:

@import url(http://www.style.org/marine);
/* surchage du style importé */
H1 { color: red }

Combinaison des feuilles de style de l'auteur avec celle de "l'utilisateur".

L'ordre normal de precedence peut être modifié:

H1 { color: black ! important }

Le modèle de formattage

Modèle de boites:

 _______________________________________
|           margin (transparent)        |
|   _________________________________   |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |    element width    |
|              box width                |

Le modèle de formattage (2)

A chaque élément correspond une ou plusieurs boites.

Deux types principaux d'éléments:

Les propriétés

Les unités

Positioning

Exemples:

IMG.icon { 
float: left;
margin-left: 0;
}

#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}

Et d'avantage...

Validation CSS

Evolution future de CSS

CSS3 en préparation:

La suite: XHTML 1.0

Réécriture de HTML 4 en XML

http://www.w3.org/Style