Spécification W3C depuis le 24 décembre 1999
Spécification à: http://www.w3.org/TR/html4
Marquage de documents permettant d'enrichir le contenu:
HTML est un exemple de marquage
<!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>
Eléments
Attributs
Notes:
<!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 --
<!-- ceci est un commentaire -->
<!-- Attention -- ceci n'est pas valide! -->
<P -- ceci non plus! -->
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
As <CITE>Harry S. Truman</CITE> said,
<Q>The buck stops here.</Q>
<P>Voici un paragraphe<BR>avec une cassure, écrit par Arnaud Le Hors. Voici un paragraphe avec une cassure, écrit par Arnaud Le Hors.
<PRE>Voici un paragraphe preformatté. </PRE> Voici un paragraphe preformatté.
<P><q lang="en">To be or not to be?</q> est de l'anglais.
<OL> <LI>item 1 <LI>item 2 </OL> 1. item 1 2. item 2
<DL>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>
Cracker
hacker on the Internet
Nerd
male so into the Net that he forgets his
wife's birthday
<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% |
\-----------------------------------------/
You'll find a lot more in <A href="chapter2.html">chapter two</A>.
See <A href="#section2">section 2</A> for details. ... <A name="section2">Section 2</A> ... section 2 ...
See <A href="#section2">section 2</A> for details. ... <A id="section2">Section 2</A> ... section 2 ...
<HEAD> <TITLE>Chapter 2</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"> </HEAD>
<P>I just returned from vacation! Here's a photo of my family at the lake: <IMG src="vacation/family.png" alt="A photo of my family at the lake.">
<APPLET code="Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </APPLET>
<P>I just returned from vacation! Here's a photo of my family at the lake: <OBJECT data="vacation/family.png" type="image/png"> <OBJECT data="vacation/family.gif" type="image/gif"> A photo of my family at the lake. </OBJECT> </OBJECT>
<DIV id="section1"> <H1>...</H1> <P>... </DIV> <DIV id="section2"> <H1>...</H1> <P>... </DIV>
<HEAD> ... <LINK href="mystyle.css" rel="stylesheet" type="text/css"> </HEAD>
<HEAD> ... <STYLE type="text/css"> ... </STYLE> </HEAD>
<P style="...">Aren't style sheets wonderful? </P>
<P class="important">Attention: ...</P>
<META http-equiv="Content-Style-Type" content="text/css">
<A target="frame1" ...">...</A>
<!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 | | | | | | | | | | | | | | ---------------------------------------
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
<TITLE>Test Document</TITLE>
<SCRIPT type="text/javascript">
document.write("<p><b>Hello World!<\/b>")
</SCRIPT>
<TITLE>Test Document</TITLE> <SCRIPT type="text/javascript" src="myscript.js"> </SCRIPT>
<INPUT NAME="userName" onblur="validUserName(this.value)">
<META http-equiv="Content-Script-Type" content="text/tcl">
Terme marketing
Comprend:
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
Exemple:
H1 { color: blue }
^^^^^^^^^^^^^^^ déclaration
^^ sélecteur
Une règle comprend deux parties:
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>
H1, H2, H3 { font-family: helvetica }
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
H1 { font: bold 12pt/14pt helvetica }
H1 { color: blue }
<H1>Le titre <EM>est</EM> important!</H1>
BODY {
color: black;
background: url(texture.gif) white;
}
Exemple:
H1.important { color: #FF0000 }
<H1 class="important">Attention!</H1>
Sélection de tous les éléments de même classe:
.important { color: #FF0000 }
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 }
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 }
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 }
Identiques à ceux de C:
EM { color: red } /* red, really red!! */
Sélection indépendante de la structure HTML
A:link { color: red } /* unvisited */
A:visited { color: blue }
A:active { color: lime }
DIV > P:first-child { text-indent: 0 }
:lang(fr) > Q { quotes: '« ' ' »' }
P:first-line { font-style: small-caps }
P:first-letter { font-size: 200% }
P.special:before {content: "Special! "}
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 }
Modèle de boites:
_______________________________________
| margin (transparent) |
| _________________________________ |
| | border | |
| | ___________________________ | |
| | | padding | | |
| | | _____________________ | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
A chaque élément correspond une ou plusieurs boites.
Deux types principaux d'éléments:
Exemples:
IMG.icon {
float: left;
margin-left: 0;
}
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
CSS3 en préparation:
Réécriture de HTML 4 en XML