paul franchi cip1 - cmd 2008-09 13/01/2014 transparent - 1 création & manipulation de documents...

Paul FranchiCIP1 - CMD

2008-0911/04/23 Transparent - 1

Création & Manipulation de DocumentsCréation & Manipulation de Documents

2 versions•.ppt à télécharger avec le répertoire DOC/•.pdf à afficher sous votre navigateur

2 versions•.ppt à télécharger avec le répertoire DOC/•.pdf à afficher sous votre navigateur

Révision du 11/04/23 • Definitions: Graphes, Arbres, •Blaisage, Arbre, Parenthéses..

Transparent 211/04/23

Sommaire du Cours

Chap I - Documents Structurés: Historique,

Modèle, Codage, Standards et Références

Chap II - Le langage (X)HTML: "Hyper Text Markup

Language"

Chap III - Le meta-langage XML: "eXtensible

Markup Language"

Chap IV - Les feuilles de style CSS: "Cascading

Style Sheets"


Programme des TPs (version 2007_08)

HTML - le Balisage

HTML - le Style avec la balise <style>

CSS - les Feuilles de Style Externes

XML - la Structure Logique (introduction)

LaTeX

Word -

Excel -

PowerPoint -

Enseignants 2009 Paul Franchi

Maria Kulikova

Hélène Renard


2008-0911/04/23 Transparent - 4

Chapître I - Documents Structurés Chapître I - Documents Structurés

Historique & Standards

Lexique

Références

Modèle de Documents

Historique & Standards

Lexique

Références

Modèle de Documents



Introduction Documents et Informatique:

(R)évolution ?

1985 1995 2005


Documents "Electroniques"

Fichiers & Répertoires

Codages

Formats

& Extensions

& Applications

& O.S.

binaire

ASCII ANSI

UNICODE

.txt .tex .csv .rtf

.ps .pdf .dvi

.c .java .js .vb .php

.sh .exe .jar .tar .zip

.jpg .gif .png .swf

.mp3 .wav .aac .aiff

.avi .mov .vob .mpeg

.doc .xls .ppt

.htm .html .xml .css


Codages

UNICODE (UCS, 1991) - UTF-8 & UTF-16 permet de représenter un caractère par un code sur 1 à 4

octets, indépendant de tout système d'exploitation ou langage de

programmation. compatible avec le code ASCII (UTF-8) regroupe ainsi la quasi-totalité des alphabets existants (arabe,

arménien, cyrillique, grec, hébreu, latin, ...)

ASCII - 7 bits (1960) ASCII – American Standard

Code for Information Interchange

ASCII étendu ANSI - 8 bits

en pratique:

utf-8 iso-8859-1 iso-latin-1-unix iso-latin-1-dos


Fichiers: Formats, Extensions & Applications

Extensions Formats Applications

.txt .csv .rtf

.c .java .cpp .h .sql

.sh .js .php .cgi

.htm .html .xml .css .tex

texte,

source LP,

source script,

source Doc,

éditeurs, compilateurs,

env de prog.

navigateurs, etc

bin .exe .dmg .zip .jar .tar .gz .lnk .tmp .old

binaire, compressé, etc.

systèmes

.ps .pdf .dvi format de sortie impression, visualisation

.jpeg .gif .png .pic .tiff .swf image graphique

.mp3 .wav .aac .aiff musique multimédia

.avi .mov .vob .mpeg video multimédia

.doc .xls .ppt MS Office Office


Survol du Domaine

Documents "Electroniques"

Modèles de Documents: SGML, W3C, DTD , XSD

Langages & Balises: TeX, LaTeX, HTML, XML, XHTML

Langages de Style: ODA, DSSL, CSS, XSL

Langages de Script: JavaScript, JScript, VBScript, PHP,

ASP

Transformations et Echanges : XSLT, XPath, XLink, etc.

API: DOM, SAX

Editeurs: Emacs, FrontPage, Dreamweaver, Kompozer,

Nvu, Office, etc.

Navigateurs: Netscape, I.E, Firefox, Mozilla, Safari, Opéra

Processeurs: Apache, Xalan, Saxon, etc.


Web les cours de l'EPU

Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html

Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents

http:www.polytech.unice;fr/~pfz/document.html

W3C tutorial : http://www.w3schools.com/

Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page

W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/

Biblio: nombreux ouvrages

Références


Documentation et Manuels Documents du web

liste de balises HTML

code des couleurs RVB

code HTML des caractères ISO

liste des extensions de fichiers (formats)

Expressions Rationnelles

Manuels. Expressions régulières sous E

macs

Recherche et remplacement sous Emacs

compléments Emacs

grep sous Unix

Tutoriaux du Web W3C : http://www.w3schools.com/

CSS Play : http://www.cssplay.co.uk/index

Zen Garden :

http://www.csszengarden.com/tr/francais/

CSS in10 steps :

http://www.barelyfitz.com/screencast/html-training/css/positioning/

10 steps to better CSS:

http://shapeshed.com/journal/10_steps_to_better_css/


Historique et Standards

GML – Generalized Markup Language IBM, 1960’s 3 initiales des inventeurs

SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986

HTML – HyperText Markup Language CERN, Genève, 1992

Standards du W3C (MIT, Mass, 1994) XML – eXtensible Markup Language, 1998 HTML- 4.01, 1999 XHTML- 1.0, 2000 CSS1 & CSS2 - Cascading Style Sheets DOM – Document Object Model etc.


Lexique API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language DHTML – Dynamic HTML ISO- International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) RDF - Resource Description Framework RSS- Really Simple Syndication SGML- Standard Generalized Markup Language SOAP- Simple Access Object Protocol SVG - Scalable Vector Graphics UNICODE – World wide Code UCS - Universal Character Set UTF-8/-16 – Unicode Transformation Format - 1 (ASCII) à 4 octets URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0– Web dit "sémantique"


Navigateurs ("Web Browsers") Historiques:

Mosaîc, I.E. Netscape liste de navigateurs sur Wikipédia

Internet Explorer 6 => 7 ss Win, Linux HTML 4.01, XHTML 1.0, XML, CSS2, DOM

Safari 3 ss Mac OS, Win HTML 4.01, XHTML 1.0, XML, CSS2, DOM

Mozilla ss Win, Mac OS, Linux Firefox 2.0.0.20 => 3.0.5

HTML 4.01, XHTML 1.0, XML, CSS2+, DOM

Opera 9 ss Win, Mac OS, Linux

Konqueror ss KDE

Google Chrome (le plus récent)

Un navigateur supporte la consultation du

Web (affichage des ressources).

Il comporte:

une couche réseau avec des protocoles: http: https: ftp:d'accès à des adresses URL.

un moteur de rendu: interpréteur html, css, xml, xsl, script, java,

etc.

une interface utilisateur: menus,

"widgets", historique, signets

un gestionnaire de "plugins" pour divers

formats


Traitement de Document (modèle SGML)

Structure

Logique

Générique

DTD / XSD

EDITION

Interface H/M

Structure

Générique

Format

FORMATAGE(style)

PRESENTATION (rendu)

S. LOGIQUE

S. LAYOUT


Traitement de document: l’approche hiérachique (ou arborescente)

Structure logique Une arborescence enracinée des composants ou

éléments (I.e. nœuds-balises) "Document Type Definition" (DTD) "XML-schémas" (XSD) "Document Object Model" (DOM)

Structure de format (« layout ») Une attribution de formatage (ODA, DSSL) Un balisage libre (TeX, HTML) Un balisage (LaTeX, XHTML, XML) bien parenthésé

(emboîtements)

Un format de Présentation (rendu, sortie) .ps, .dvi, etc Visualisation .pdf etc.


Définitions indispensables en Informatique Graphes:

nœud (sommet), arête (arc) orientation, connexité chemin, cycle, circuit

Arbres & Arborescences racine hauteur, largeur, profondeur parcours & ordres

Langages Formels vocabulaire, mot grammaire, automate analyse syntaxique validation "sémantique"

Expressions Régulières (rationnelles)

ss shell, grep, Emacs avec Java, JS, Python, Perl

Un graphe est un modèle Entités (nœuds) - Relations (arêtes).

Un arbre est un graphe connexe sans cycle.

Une arborescence est un arbreenraciné (racine unique)

et orienté (ordre partiel père-fils);souvent dessiné (ordre partiel des frères);(ordre total avec un parcours canonique)

Un Langage de Programmation (L.P.) ou de Document (HTML, XML)

est un Langage Formel défini par une grammaire syntaxique.

Un texte source (L.P., HTML, XML)est un mot syntaxiquement valide.

Une expression régulière (RegExp)est une expression bien parenthésée

(motif, "pattern") validant un ensemble de "mots" (termes)

sur un vocabulaire; s'écrit avec des caractères (opérateurs) spéciaux:

( ) [ ] + * ? . \

[a-zA-Z_.]+\.html

<[^><]+>

[a-zA-Z_.]+\.html

<[^><]+>


Un modèle de lettre: une entité (exemplaire)

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R. Dpt InformatiqueRef: MM25

Objet: à voir Monsieur,

J’ai l’honneur de porter à votre attention

1. le premier point

aaaaaaaaaaaaaa

bbbbbbb

2. le deuxième

3. etc. Sincères salutations,

M. X


Un modèle de lettre: une structure logique arborescente

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R. Dpt Informatique

Ref: MM25



1. le premier point

aaaaaaaaaaaaaa

bbbbbbb

2. le deuxième

3. etc.

Sincères salutations,

M. X

Lettre

EN TETE CORPS PIED

auteur date destinataire pretexte politesse signaturetexte

pol

section

nom

adr

nom

dpt

ref

objsoc

sssection

intro


Un modèle de lettre: une structure logique générique

Lettre

EN TETE CORPS PIED

auteur date destinataire pretexte politesse signaturetexte

pol

section

nom

adr

nom

dpt

ref

objsoc

sssection

intro

?*

*?

? ?

?

Méta-opérateurs des expressions régulières

? (0 ou 1)

+ (1 ou plusieurs)

* (0 ou plusieurs)

+

?


Lettre: structure arborescente de format (« layout »)

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R.Dpt InformatiqueRef: MM25



1. le premier point

aaaaaaaaaaaaaa

bbbbbbb

2. le deuxième

3. etc.Sincères salutations,

M. X


2008-0911/04/23 Transparent - 22

Chap II - HTML Chap II - HTML

BalisageTexte & StyleLienListeTableImageCadreForme

BalisageTexte & StyleLienListeTableImageCadreForme



HTML - Hyper Text Markup Langage

On <balise> le texte «source» (ou "contenu" du document) avec un ensemble fini de balises «tags»

le formatage initial du texte source établit un ordre entre les éléments du contenu, mais aucune indication d’espacement (lignes, espaces ou tabulations)

Les balises HTML jouent un double rôle: structuration logique du document format de présentation (« layout »)

Le principe de structuration est celui des systèmes de parenthèses (ou arborescences) mais le parenthésage du balisage n’est pas vérifié.

Le principe de formatage est celui des emboîtements

rectangulaires


Une lettre en HTML (version simpliste)<html><body bgcolor=#CCCCFF>

<table> <tr>

<td> <p align=left> M. Martin <br> Société S. <br> Avenue A. 06150 SA </p> </td>

<td> <p align=right> <i> </i> </td >

</table>

<p align=right> </p>

<p align=left> </p>

<p align=center> </p >

Le 4/11/2002

à M. DURAND <br> Société R. <br> Dpt Informatique

Ref: MM25 <br> Objet: à voir

Monsieur,

<ol> J’ai l’honneur de porter à votre attention

<li> le premier point

<ul> < li > aaaaaaaaaaaaaa <li> bbbbbbb </ul>

<li> le deuxième <li> etc. </ol>

<p align=center>

</body>

</html>

Sincères salutations, <br> M. X <br> <img src= signature.gif> </p >


Survol d’HTML (version 4.01)

Balisage une balise s’écrit avec < et > deux caractères spéciaux de

début et fin de balise et un identificateur(nom) prédéfini le balisage structure le source en éléments le balisage associe une balise ouvrante < > et une fermante

</ > par paire (non obligatoire). le texte entre une balise ouvrante et une fermante est le

contenu de l’élément le balisage est insensible à la casse (préférer les minuscules,

obligatoires en XHTML)

Attributs de balises une balise peut comporter 0 ou plusieurs paires

attribut = "valeur" <table border="1" align="center">

sans ou avec (préférer) quotes doubles " " ou simples ' '

HTML - source type (version simpliste)

<html>



<head>

<title> Titre de la page dans le navigateur </title>

</head>

<body >



</body>

</html>

XHTML - source type (version simpliste)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<title> Titre de la page dans le navigateur </title>

</head>

<body >



</body>

</html>

Balisage, Indentation, & Parenthèses

<html> 

<head>

<title> Titre de la page </title>

</head>

<body >

<p >

<a href=... > ... </a>

<ul> <li> <img src=... /> </li>

</ul>

</p>

</body>

</html>

( (

( ) ) (

( ( ... ) ( ( ( ) ) )

) )

)

Balisage & Arborescence

<html> 

<head>

<title> Titre de la page </title>

</head>

<body >

<p >

<a href=... > ... </a>

<ul> <li> <img src=... /> </li>

</ul>

</p>

</body>

</html>

Survol d’HTML (version 4.01)

Commentaires  Structuration & formats

<html> <body> le contenu </body> </html> <h1> Grand Titre </h1> <h6> petit titre </h6> <p> paragraphe </p> <br> break (ligne suivante) <hr> séparation horizontale

Alignements <h1 align="center"> grand titre à centrer </h1> <p align="left"> paragraphe à gauche </p> <center> texte à centrer </center>

Mon "premier" HTML

<html>

<head><title>Mon Premier HTML</title></head>

<body> 

<center><h1>HTML, c'est une affaire de balises!</h1></center>

<p> <b>Paragraphe <1></b> sur plusieurs

lignes .....</p>

<p> <i>Paragraphe <2> </i> sur plusieurs

lignes ..... </p>

<h3> avec la Couleur, c'est mieux </h3>

<font color="#FF0000"> EN ROUGE </font>

<br><font color="#00FF00"> EN VERT </font>

<br><font color="#0000FF"> EN BLEU </font>

<h3> un Logo trés connu ?</h3>

<center><img src="../IMAGES/LOGOEPU.gif" /></center>

<h3> un (Hyper)lien trés connu ? </h3>

<a href="http://www.polytech.unice.fr"> Polytech Sophia </a>

</body></html>


Survol d’HTML - Textes

Text Tags : styles & formats <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <s> Deprecated. Use <del> instead <strike> Deprecated. Use <del> instead <u> Deprecated. Use styles instead


Survol d’HTML - Autres textes "Computer Output" Tags

<code> Defines computer code text <kbd> Defines keyboard text <samp> Defines sample computer code <tt> Defines teletype text <var> Defines a variable <pre> Defines preformatted text <listing> Deprecated. Use <pre> instead <plaintext> Deprecated. Use <pre> instead <xmp> Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines an address element <bdo dir="rtl"> Defines the text direction ("rightToLeft") <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term


Survol d’HTML - Fontes & Styles

Font AttributesAttribute Example Purposesize="number" size="2" Defines the fontsize="+number" size="+1" Increases the fontsize="-number" size="-1" Decreases the font face="face-name" face="Times" Defines the font-namecolor="color-value" color="#eeff00" Defines the font colorcolor="color-name" color="red" Defines the font color

Style Tags <style> Defines a style definition <link> Defines a resource reference <div> Defines a section in a document <span> Defines a section in a document <font> Deprecated. Use styles instead <basefont> Deprecated. Use styles instead <center> Deprecated. Use styles instead


Survol d’HTML - Codes spéciaux The Most Common Character Entities:

Result Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (not in IE) '

Some Other Commonly Used Character Entities:

Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® regist. trademark ® ® × multiplication × × ÷ division ÷ ÷


La balise <pre> et le source des L.P. <html><body>

<h1> Source Java avec la balise < pre > </h1>

<pre >

//FIchier Arbralea.java

import java.awt.*; //Pour Graphics et Frame

public class Arbralea extends Frame {

static final int WIDTH = 800; // Taille initiale de la Frame

static final int HEIGHT = 1200;

static final int max =5 ; // nombre maximum de branches filles

static final float proba = (float)0.7; // proba de chaque branche fille

static final float div = (float)1.3; // la longeur de la branche fille

// est celle de la mere divisee

//par un facteur entre div et div +1

public static void main(String args[]) {

Arbralea t = new Arbralea();

t.setSize(WIDTH, HEIGHT);

t.setVisible(true);

t.setBackground (Color.white);

}

</pre>

</body> </html>


Survol d’HTML - Listes

List Tags<ol> an ordered list

<ul> an unordered list

<li> a list item

<dl> a definition list

<dt> a definition term

<dd> a definition description

<h4>A Definition List:</h4>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

Attributs de liste type=

pour <ol>: disc, circle, square pour <ul>: A, a, I, i, 1

value= pour <li>: un rang de

numérotationstart=

pour <ol>: un rang de numérotation

<ul type="square">

<li>Coffee</li>

<li>Tea

<ul type="i">

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li >

<li value="3">Milk</li>

</ul>


<body>

Un

Deux

Deux-Un

Deux-Deux

Deux-Deux-Un

Deux-Deux-Deux

Deux-Deux-Trois

Deux-Trois

Trois

</body>

Tables - Listes et Section


<body>

<ol>

<li>Un </li>

<li>Deux</li>

<ul>

<li>Deux-Un</li>

<li>Deux-Deux</li>

<ol>

<li>Deux-Deux-Un</li>

<li>Deux-Deux-Deux</li>

<li>Deux-Deux-Trois</li>

</ol>

<li>Deux-Trois</li>

</ul>

<li>Trois</li>

</ol>

</body>



<body>

<ol>

<li>Un

<li>Deux

<ul type="square">

<li>Deux-Un

<li>Deux-Deux

<ol>

<li value="221">Deux-Deux-Un

<li>Deux-Deux-Deux

<li>Deux-Deux-Trois

</ol>

<li>Deux-Trois

</ul>

<li>Trois

</ol>

</body>



Survol d’HTML - Tables Balises de Table

<table> a table <th> a table header <tr> a table row <td> a table cell <caption> a table caption

<h4>Horizontal headers:</h4>

<table>

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr> <tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr> <tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr> <tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>


Survol d’HTML - Tables

Attributs Table align bgcolor border cellpadding cellspacing cols height width

<h4>With spacing et padding:</h4>

<table cellspacing="20" cellpadding="5">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<h4>Vertical headers:</h4>

<table width="50%" border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr> <tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr> <tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>


<body>

<h1> le Triangle de Pascal </h1>

1 1

1 2 1

1 3 3 1

1 4 6 4 1

1 5 10 10 5 1

</body>

Tables - le triangle de Pascal


L'utilisation des Expressions Régulières (regexp ss Emacs)

permet le balisage "automatique" (systématique)

<td> … </td> $[0-9]+$ <td>\1</td>

<tr> … </tr> $.*$ <tr>\1</tr> ^1 <tr>1 1$ 1</tr>



Tables - le triangle de Pascal<body>


<table align="center" bgcolor="#FFFFCC" border="2"

cellspacing="10" width="50%" >

<tr align="center"> <td>1</td> <td>1</td></tr>

<tr align="center"> <td>1</td> <td>2</td> <td>1</td></tr>

<tr align="center"> <td>1</td> <td>3</td> <td>3</td> <td>1</td></tr>

<tr align="center"> <td>1</td> <td>4</td> <td>6</td> <td>4</td> <td>1</td></tr>

<tr align="center"> <td>1</td> <td>5</td> <td>10</td>

<td>10</td> <td>5</td> <td>1</td></tr>

</table>

</body>

Tables - le code ASCII <body>

<h1>le code ASCII </h1>

<table align="center" bgcolor="#FFFFCC" border="solid red 3px">

<tr>

<td>HEXA</td>

<td>-0</td> <td>-1</td> <td>-2</td> <td>-3</td> <td>-4</td> <td>-5</td> <td>6</td> <td>-7</td> <td>-8</td> <td>-9</td> <td>-A</td> <td>-B</td> <td>-C</td> <td>-D</td> <td>-E</td> <td>-F</td>

</tr>

<tr>

<td>0-</td>

<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> </td> <td>
</td> <td></td> <td></td> <td> </td> <td></td> <td></td>

</tr>

</table>

</body>

Tables - la palette RVB du Web<body> <h1>RVB 216 couleurs </h1>

<table align="center " border="0" cellspacing="5" cellpadding="5">

<tr>  </tr>

<tr><td>00--00</td>

<td bgcolor="#000000">#000000</td> <td bgcolor="#003300">#003300</td>


<td bgcolor="#00CC00">#00CC00</td> <td bgcolor="#00FF00">#00FF00</td>

<td>33--00</td>



<td bgcolor="#33CC00">#33CC00</td> <td bgcolor="#33FF00">#33FF00</td>

<td>66--00</td>



<td bgcolor="#66CC00">#66CC00</td> <td bgcolor="#66FF00">#66FF00</td> </tr>

</table>

</body>


Survol d’HTML - Liens & Ancres

Ancres & Sauts <a name= "destination" > une ancre dans cette page </a> <a href= "#destination" > saut vers cette ancre </a>

Liens <a href="tarifs.html" target="_self">Voir les tarifs </a>

<a href="http://www.w3schools.com/" target="_blank">Visit

W3Schools! </a>

<a href="mailto:[email protected]?subject=Hello%20again"> EMail Him

</a>

<a href="ftp://www.w3schools.com/ftp/winzip.exe"> Download WinZip</a>


Survol d’HTML - Images

Images <img src= “image.gif“ width = “160“ heigth= “90“

align= “center”> <body background= “paysage.gif“ >

Images & Liens <a href=“image.gif“ > Clicker pour voir l'image </a>

<a href=“page.html“> <img src= “FF.png“ heigth= “25“ width= “25“ />

Clicker sur le logo pour afficher la page </a>


Survol d’HTML - Cadres

Cadres <frameset> a set of frames <frame> a sub window (a frame) <noframes> a noframe section for browsers that do not

handle frames <iframe> an inline sub window (frame)

<frameset> (<frame src= “cadre.html “ >)* </frameset>

<html>

<frameset cols="120,*">

<frame src="cadre_liste.htm">

<frame src= "cadre_vision.htm" name="showframe">

</frameset>

</html>

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

<noframes> <body>

Your browser does not handle frames! </body> </noframes>

</frameset>

</html>

Cadres - Exemple de "Browser"

<html>

<frameset r ows="21%,*" cols="*" frameborder="YES" border="2" bordercolor="red" framespacing="2">



<frame name="HH" scrolling="auto" src="dicoIndex.html" id="HH" title="topFrame">

<frameset cols="20%,*" frameborder="YES" border="2" framespacing="2">



<frame name="VG" scrolling="auto" src="dicoTermes.html" id="VG" title="leftFrame">

<frame src="dicoInfo.html" name="CP" id="CP" scrolling="auto" title="mainFrame">

</frameset>

</frameset>

<noframes> <body> Your browser does not handle frames! </body> </noframes>

</frameset>

</html>

Accès par rubrique dans un dictionnaire Exploration en multimédia


Survol d’HTML - Formes Form Tags

<form> Defines a form for user input <input> Defines an input field <textarea> Defines a text-area (a multi-line text input control) <label> Defines a label to a control <fieldset> Defines a fieldset <legend> Defines a caption for a fieldset <select> Defines a selectable list (a drop-down

box) <optgroup> Defines an option group <option> Defines an option in the drop-down box <button> Defines a push button <isindex> Deprecated. Use <input> instead

<html> <body>

<form name="input" action="html_form_action.asp" method="get">

Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"><br>

Type your last name: <input type="text" name="LastName" value="Mouse" size="20"><br>

<input type="submit" value="Submit">

</form>

<p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.</p>

</body> </html>


Survol d’HTML - Entête Head Tags

<head> Defines information about the document <title> Defines the document title <base> Defines a base URL for all the links on a page <link> Defines a resource reference <meta> Defines meta information

DTD <!DOCTYPE> Defines the document type.

This tag goes before the <html> start tag.

Script Tags <script> Defines a script <noscript> Defines an alternate text if the script is not

executed <object> Defines an embedded object <param> Defines run-time settings (parameters)

for an object <applet> Deprecated. Use <object> instead


Les défauts d’ HTML Beaucoup de versions pas toujours compatibles avec des

interprétations dépendantes des navigateurs

La structure logique n’est pas prise en compte

Pas de structure logique générique

Le balisage n’est pas strictement arborescent

Pas de formatage générique

L’évaluation du formatage est strictement lié au texte

Pas de séparation style-formatage

Le balisage mélange le formatage et le style au contenu du texte

L’ensemble des balises est clos (aucune extension)


Quelques règles d'écriture pour un "meilleur" (X)HTML

respecter la validation syntaxique XHTML : balisage fermé, bien parenthésé usage des "" nom de balise en minuscule

associer le balisage à la structure logique utiliser <div> et <span> utiliser les attributs "id" et "class"

éviter les styles "internes": avec des balises: <b> <em> <u> <i> <font> avec des attributs : align width

préférer les styles CSS, notamment en feuilles externes

formater avec CSS saut de ligne: pas de <br />, éviter <p>, utiliser display: espace, tabulations: éviter , utiliser padding: et margin: placement: pas de <table >, utiliser display: float: position:


2008-0911/04/23 Transparent - 57

Chap III - XML - Présentation ("Basic")Chap III - XML - Présentation ("Basic")

MetaLangageNorme LexicaleNorme SyntaxiqueDialectes :

XHTML, MathML,

MetaLangageNorme LexicaleNorme SyntaxiqueDialectes :

XHTML, MathML,



XML - eXtensible Marked up Langage

XML est une recommandation W3C (1998) XML est un métalangage

les balises ne sont pas limitées XML permet de définir des Langages de balisage

Dialectes

Le balisage est structurel (Arborescence enracinée dessinée) DOM

Le principe de formatage est celui des boites rectangulaires bien emboîtées (parenthésées) XML bien formé

La DTD ou un XML-schéma définit une structure logique générique de validation XML valide

XML supporte les feuilles de styles séparées (CSS )

XML supporte les transformations XSL (XSLT)


XML - Une lettre <?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents -->

<lettre ref ="Ref: MM25" date="4/10/2004"> <!– balise racine unique obligatoire -->

<from soc= "Société S. Avenue A. 06150 SA" > M. Martin </from>

<date> </date>

<to adr= "Société R. Dpt Informatique" >

<TextePrincipal >

<pol > </pol >

Le 4/10/2004

à M. DURAND </to>

<obj> Objet: à voir </obj>

Monsieur,

<par> J’ai l’honneur de porter à votre attention </par>

<par> le premier point aaaaaaaaaaaaaa bbbbbbb </par>

<par> le deuxième </par>

<par> etc. </par>

</TextePrincipal>

</lettre>

<pol> Sincères salutations, </pol>

<sig> M. X <img src= signature.gif /> </sig>


XML - Le rôle des balises

<lettre>

<from > </from>

<date> </date>

</lettre>

<lettre ref ="Ref: MM25" date="4/10/2004">

Délimiter le texte (ou éléments)

Associer une fonction logique ou des attributs

Ordonner les éléments entre eux Hiérarchiser par imbrication

Créer des liens

<par> J’ai l’honneur de porter à votre attention </par>

<pol> Sincères salutations, </pol>

<sig> M. X <img src= signature.gif/> </sig>


Des exemples XML

Sur le tutorial W3C http://www.w3schools.com/xml/xml_examples.asp

un catalogue de CD

<?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents --><CATALOG>

<CD>

<TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST>

<COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE> <YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST>

<COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY>

<PRICE>9.90</PRICE> <YEAR>1988</YEAR>

</CD>

</CATALOG>

•xml


Des exemples XML Une carte de Menu

<?xml version="1.0" encoding="ISO-8859-1" ?> <!– pour les accents --><breakfast_menu>

<food> <price>$5.95</price>

<name>Belgian Waffles</name>

<description>two of our famous Belgian Waffles with plenty of real maple syrup</description>

<calories>650</calories>

</food><food><price>$7.95</price>

<name>Strawberry Belgian Waffles</name>

<description>light Belgian waffles covered with strawberries and whipped cream</description>



<name>Berry-Berry Belgian Waffles</name>

<description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>



<name>French Toast</name>

<description>thick slices made from our homemade sourdough bread</description>


</food>

</breakfast_menu>

•xml


XML - Norme Lexicale

les commentaires XML sont de la forme <!- - tout_sauf - - - ->

les CHAINES sont de la forme " tout_sauf " < > & " ou ' tout_sauf ' < > & '

les balises "xml" sont de la forme <?xml tout_sauf " < > & ?>

les autres balises "éléments" sont de 3 formes: <NOM attribs > <NOM attribs /> </NOM >

les NOMs sont de la forme [a-zA-Z_-][a-zA-Z0-9_-]* éventuellement précédé d'un préfixe de la même forme séparé par :

les NOMs sont sensibles à la casse

les attributs sont de la forme NOM = chaines

les " " \t \n sont permis partout sauf dans les balises entre < ou </ et NOM

le reste (le texte pur) ne comprend pas < > & qui sont codés par < > &


XML - Norme Syntaxique

Un source XML est dit "Bien Formé" ssi

il est structuré suivant le schéma: Prologue (facultatif) Arborescence d'Eléments Commentaires et Instructions de Traitement (facultatifs) dans le

prologue ou l'Arborescence

le Prologue se compose: d'une balise de déclaration <? xml > puis en option :

d'Instructions de Traitement (stylesheet, par ex) d'une déclaration de Type de Document (DTD) de commentaires

l'Arborescence forme un système de textes, de balises, de commentaires et d'instructions de traitement bien parenthésé et enraciné


XML - Validation

Un source XML est dit "Valide" ssi il est "Bien Formé" il est conforme aux règles définies par:

une DTD un schéma XSD

Des erreurs dans la syntaxe XML stoppent le processus d'excution du programme associé au source XML (affichage, transformations, etc.)

(contrairement à HTML)

Outils de validation: DW8 Via loadXML() et le DOM Divers (voir le Web)


XML - Quelques Dialectes, parmi des dizaines XHTML

XSL & XSL-FO

XSD – XML Schéma Définition

SMIL – pour le Multimédia

MathML – pour les formules mathématiques

CML – pour les formules chimiques

WML – pour les mobiles (Wap)

MusicML – pour la musique

WordML -- Office vers XML

Un dialecte XML est un ensemble (Langage) de documents XML valides

par rapport à

une DTD

ou un schéma XSD

(donc bien formés)


MathML: un exemple d'insertion dans XML

<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/css" href="monMathML.css"?>

<Racine>

<Titre> Formule sous MathML </Titre>

<Math xmlns = " http://www.w3.org/1998/Math/MathML ">

<mroot> <msup>

<mfrac> <mi>A*B</mi> <mi>b</mi></mfrac>

<mn> 10 </mn>

</msup>

<mi>x</mi>

</mroot>

</Math>

</Racine>


XHTML - Intro Une version « Xmlisée » de HTML 4.0

Recommandation W3C (Janvier 2000) au remplacement de HTML <html xmlns=‘‘http://www.w3.org/1999/xhtml’’>

XHTML 1.0: Compatibilité (presque) totale avec HTML 4.0

les documents doivent être « bien formés » au sens XML racine <html> </html> unique marqueurs de fermeture obligatoires: </p> </li> </td>ou <b /> et <img ….. />, avec un espace devant / balises bien emboîtées (parenthèsées) nom et attribut de balise en minuscule (sensibilité à la casse) valeurs d’attributs entre ‘‘ ’’ et valeurs explicites l’attribut id remplace name

XHTML 1.0: Trois niveaux de validation (3 DTDs) strict transitional framseset

XHTML- format

Source requis en XHTML1.0

Conseils d’utilisation protéger tous les caractères spéciaux: &amp &lt &gt séparer les scripts et les styles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> le Titre du Document </title>

</head>

<body>



</body>

</html>


XHML: un exemple d'insertion dans XML


<?xml-stylesheet type="text/css" href="xhtml.css"?>

<racine>

<titre> XHTML et XML</titre>

<html xmlns = " http://www.w3.org/1999/xhtml " >

<body>

<h1> Liens sous XHTML</h1>

<p>

<a href=" http://www.w3schools.comz "> Visit W3C Tutorial </a>

</p>

<p>

<a href=" http://www.essi.fr/~pfz ">chez Moi </a>

</p>

</body>

</html>

</racine>


2008-0911/04/23 Transparent - 71

Chap IV - CSS - Feuilles de Style en Cascade Chap IV - CSS - Feuilles de Style en Cascade

CSS 2: Règles, Sélecteurs, Proprirétes

La balise <style> en HTML

Feuilles de style séparées en HTML

Feuilles de style en XML

CSS 2: Règles, Sélecteurs, Proprirétes

La balise <style> en HTML

Feuilles de style séparées en HTML

Feuilles de style en XML



Evolution 0: les attributs de style Html

<html>

<body color: black ; font-family: arial >

<p text-align: center; color: red; >

texte centré en arial (par héritage) en rouge (par masquage)

</p>

</body>

</html>

HTML, comme il ne faut plus l'écrire !car pas évolutif !



<body><div style=" position: absolute; width: 500px; height: 52px;

z-index:1; left: 100px; top: 24px; layer-background-color: #00FFFF;

border: 5px solid #00FF00; text-align: center; color:red; text-transform: uppercase; font-size: xx-large; font-weight: bold;

"> Grand Titre 1<div style=" text-transform: capitalize;

font-size: x-large; font-weight: normal ">

sous titre 1 </div> </div></body> HTML, peu évolutif !


Evolution 2 : la balise <style> en Html

<head> <style> div#Titre {

position: absolute; width: 60%; left: 100px; top: 124px; background-color: #CCFFFF; border: 5px; solid #00FF00;

text-align: center; color: red; text-transform: uppercase; font-size: xx-large;font-weight: bold;

}div#sousTitre {

text-transform: capitalize; font-size: x-large; font-weight: normal;}</style> </head>

<body><div id="Titre"> Grand Titre <div id="sousTitre">sous titre avec l'attribut "id" </div></div></body>



<html><head> <style>p {text-align: center; color: red;} p.right {text-align: right}p.center {text-align: center}.center {text-align: center}#green {color: green}p#para1{ text-align: left; color: pink}

</style> </head><body ><p> This paragraph will be center-aligned and red-colored. </p><p class="right"> This paragraph will be right-aligned and also red. </p><p class="center"> This paragraph will be center-aligned and also red. </p><h1 class="center"> This heading will be center-aligned but black. </h1><p class="center"> This paragraph will also be center-aligned and red.</p><h2 id="green" class="center" >Subtitle centered in green.</h2><p id="para1"> This paragraph will be left-aligned and pink-colored.</p></body> </html>

Les attributs de style Liens en Html



<html> <head>

<style type="text/css">

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

</style></head> <body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited

in the CSS definition in order to be effective!!</p>

<p><b>Note:</b> a:active MUST come after a:hover

in the CSS definition in order to be effective!!</p>

</body></html>


CSS: les feuilles de style séparées

Un langage pour définir les styles de balises HTML ou XML des éléments d’une DTD

CSS -1 (1996) supporté par Netscape et IE version 4.

CSS -2 (1998) supporté par FF (complet) IE 5.5 , SAFARI

CSS -3 (2007, en cours) supporté par FF (partiel)

Principes Règles de style associées à la structure des documents Feuilles multiples Types de média Attachements alternatifs aux documents


XML: les feuilles de style


CSS: les feuilles de style en cascade

ModularitéImportationHéritageMasquageCascadeRésolution des conflits par la règle la plus spécifique

Feuille CSS Collection de Règles

Une règle CSS Sélecteur (balise HTML XML,, élément de DTD) propriétés (paramètres de style)

Conception CSS


CSS: Syntaxe (1)

Les Règles

( ascendance >? )? selecteur ( [ attr ( = val )? ] ) * {

( prop : val ; ) * }

Exemples HTML & XML

/* Xml */

envaleur {

font-style : italic ; font-weight : bold }

livre > titre {font-size : 24pt }

chapitre > titre {font-size : 20pt }

section theoreme {font-color : blue }

message [priorite = "haute"] {

font-size : 18pt ; font-color : red

}

/* Html */

body {

font-style : italic ;

color : black

}

p{

text-align : center ;

font-family: arial

}


CSS: Syntaxe (2)

Groupes de Règles

selecteur (, selecteur )* {

( prop : val ; ) * }

Les Commentaires : /* blabla */

Exemples HTML & XML /* Xml */

livre>titre, chapitre>titre {

font-size : 24pt ;

font-color : blue

}

/* Html */

h1, h2, h3 {

text-align : center ;

color: red

}

/* Html */

p+h3 {

text-align : left ;

}


CSS: Sélecteurs "Class" & "Id" en HTML

class permet d'associer plusieurs styles (différents) à un élément HTML

sélectionné par la valeur de l'attribut "class"

id idem, mais sélectionné par la valeur de l'attribut "id"

Exemples HTML

p.right {text-align : right }

p.left {text-align : left }

.center {text-align : center }

<h1 class ="center"> au centre </h1>

<p class ="left"> à gauche </p>

#grand{font-size : 20pt }

p#central {

text-align : center ; color: red

}

<p id = "grand">

paragraphe en 20 pt

</p>

<p id = "central"> centré en rouge </p>


CSS: les Sélecteurs

El Tous les <E1 >

Parent El les <E1> descendant d’un <Parent>

Parent > El les <E1> fils d’un <Parent>

El:first-child les <E1> premier fils d’un <Parent>

El + Ef les <Ef> précédés d’un <El>

El[att] Tous les <E1 att = “xxx“ >

El[att = “val“] les <E1 att = “val“ >

El[att~=“val“] les <E1 att = “val1 val val2“ >

El[att |= “val“] les <E1 att = “val-xxx“ >

El#nom les <E1 xxx = “nom“ > où xxx est un attribut de type ID

El:link les <E1> de type link non encore visités

El:visited Idem dèja visités

E1:hover Idem avec la souris dessus

E1:active Idem après le click

E1:lang (fr) les <E1 xml:lang= “ fr “ >

* Tous les élements


CSS en HTML: .class vs #id L'attribut "class" permet de définir une classe de

style qui peut peut être partagé par plusieurs éléments (balises) du document

L'attribut "id" définit une dénomination unique pour un élément (balise) du document

<html><head> <style>.center { }#navBar { }</style> </head><body> <div class="center"> </div><div id="navBar"> </div><p class="center"> à centrer </p>

<div id="navBar" class="center" > </div></body></html>


CSS: les Propriétés Mis en Page (Boites)

Polices de caractère font-family -style -weight -size

Textes text-align -indent -decoration word-spacing

Couleurs et Fonds color background

Listes List-style-position -image

Tableaux Médias

left

right

top

bottom

margin

contentpadding

border


Exemple: Bibliographie

placement sans <table> avec display: ou float: <html><head> <link rel="stylesheet"

href="bib.css" type="text/css" /> </head><body> <h1> Bibliographie "Documents"</h1><div class="Livre" > Comprendre XSLT<img src="../../BIBLIO/HTML2841771571.jpg"

width="54" height="90"> <ul> <em> Auteurs:</em> <li> <a href="">Bernard Amann</a></li> <li> <a href="">Philippe Rigaux</a></li> </ul> <span>2002</span><span>Ed: O'REILLY</span></div></body></html>

body > h1 { text-align: center; }

Livre {display: inline-block;width: 22%;background-color: #99FFFF;border: #0000FF medium ridge;margin: 10px ; }

Livre ul { padding-left: 0px;text-align: center; }

Livre li { list-style: none; }

img { float: right ; }

Les feuilles de style multiples en Html

Le(s) lien(s) vers le style CSS dans HTML

..\XML_CSS\leftnav.html ..\XML_CSS\rightnav.htm

ici 2 styles au choix dans le Navigateur<html><head> <link title="àGauche" rel="stylesheet"

href="leftNav.css" type="text/css" /> <link title="àDroite" rel="alternate stylesheet"

href="rightNav.css" type="text/css" /></head>

<body> <div id="masthead">  </div><div id="navBar">  </div>

</body></html>


Les feuilles de style multiples en Html

2 feuilles de style CCS

..\XML_CSS\rightNav.css ..\XML_CSS\leftNav.css

#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;

}

#navBar {float: right; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;

}

#masthead {padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc;width: 100%;

}

#navBar {float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee;border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;

}


XML et CSS Le style CSS dans XML cd_catalog.xml

la feuille de style CCS cd_catalog.css

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="cd_catalog.css"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD>

Transparent 89

•xml

CATALOG {background-color: #ffffff; width: 100%;}

CD {display: block; margin-bottom: 30pt; margin-left: 0;}

TITLE {color: #FF0000; font-size: 20pt;}

ARTIST {color: #0000FF; font-size: 20pt;}

CATALOG {background-color: #ffffff; width: 100%;}

CD {display: block; margin-bottom: 30pt; margin-left: 0;}

TITLE {color: #FF0000; font-size: 20pt;}

ARTIST {color: #0000FF; font-size: 20pt;}


CSS: Propriétés des Boites

Boîtes: Dimensions & graphiques valeurs

width max-width min-width "largeur" % auto inherit

height max- height min- height "hauteur" % auto

margin margin-top margin-bottom

margin-left margin-right

"largeur" %

padding padding-top padding-bottom

padding-left padding-right

"largeur" %

border-width

-top-width -bottom-width -left-width -right-width

"largeur" thin medium thick

border-color

-top-color -bottom-color -left-color -right-color

"couleur" transparent

border-style

-top-style -bottom-style -left-style -right-style

none hidden

dotted dashed solid

border -top -bottom -left -right none hidden

dotted dashed solid


CSS: Propriétés des Textes

Textes valeurs

text-indent indentation %

text-align left right center justify inherit chaine

text-decoration underline overline line-through blink none inherit

text-shadow couleur distance1 distance2 distance3 none inherit

letter-spacing normal distance inherit

word-spacing normal distance inherit

text-transform capitalize uppercase lowercase none inherit

direction ltr rtl

white-space normal pre nowrap inherit


CSS: Propriétés ("positionning")

Boîtes: Positions valeurs

display block inline inline-block

list-item none compact

table table-row table-col table-cell …

position static relative absolute fixed

top bottom left right "longeur" % auto inherit

float left right none inherit

clear left right none both inherit

overflow visible hidden scroll auto

clip rect(,,,,) auto

visibility visible hidden collapse inherit


CSS: Positionnements

<html><head> <style type="text/css">

h2.static { position: static; left: 113;}

h2.decGauche { position: relative; left: -20px;}

h2.courante { position: relative; left: 113;}

h2.centre { position: absolute; top: 50%; left:5 0%;}

h2.fixe { position: fixed ; top: 100; left: 200;}

div.fond { position: absolute ; top: 0; left: 0; }

</style></head>

<body style="color:#FF0000">

<div class="fond" > <img src="BandeauVerticalPPT.gif" width="112" /></div>

<h2 class="static"> Titre en position STATIC dans le "layout"</h2>

<h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2>

<h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2>

<h2 class="centre"> Titre CENTRé dans la page </h2>

<h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2>

</body></html>

<body>

<div id="HH">

<div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div>

<div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div>

<div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div>

</div> 

<div id="VG"> <p> "fixed" V G </p>

<div id="RUBRIQUE"> ..... </div>

<div id="RUBRIQUE"> ..... </div>

</div> 

<div id="GRDTITRE"><p> Grand Titre </p></div>

<div id="PRINCIPAL">

<p> CADRE PRINCIPAL "absolute" </p>

<div id="SECTION">

<p> SECTION 1 "relative" </p>

</div> 

</div> 

</body>

CSS: Modèle de page Web

zones fixeszones relatives & absolues


CSS: Insertion d'images dans un texte: float & clear

<html><head> <style type="text/css">

imgdroite{ float:right ; padding-left:20px; }

imggauche { float:left ; padding-right:20px; }

break { clear:both ; }

</style></head> <body>

<p> PARAGRAPHE 1 <br/>

<img class="droite" src="xpath.gif" width="112" height="84" />

This is some text. This is some text. This is some text. ….</p>

<p> PARAGRAPHE 2 <br/>

This is some text. This is some text. This is some text. ……</p>

<p>PARAGRAPHE 3 <br/>

<img class="gauche" src="xpath.gif" width="112" height="84" />

This is some text. This is some text. This is some text. …..</p>

<p class="break">Part 3.2: Ici aprés un "clear" This is some text. This is some text. This is some text. This is some text. This is some text. </p>

</body> </html>


CSS: em % overflow :hover :before content -moz opacity

CATALOG {display: block; background-color: #cccccc; width: 100%; }

CATALOG:before {

content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; }

CD {

display: inline-block; background-image: url(../IMAGES/cd.gif);

margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt;

border: cyan 5px ridge; -moz-border-radius: 50%; }

CD:hover {

background-image: url(../IMAGES/cd.png); background-position: 0px 4px;

height: 248px; width: 246px; font-size: 11pt; }

CD>ARTIST, CD>TITLE {

display:block ; margin-top: 1em; margin-left: auto; margin-right: auto;

padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; }

CD>TITLE {

width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px;

color: #00FFFF;font-style:italic; text-align:center ;

filter:alpha(opacity=80); opacity:0.8; }


la suite de ce document est un complément en option pour programmer en CSS


XML et CSS

Le style "Table" CSS dans XML

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="tableCatalog.css"?><CATALOG>

<Titre> Mon Tableau de CDs </Titre> <CD> … </CD></CATALOG>

CATALOG {display: table; width: 80%;margin-left: 30px; border: 2px solid; padding: 20px 30px 30px 20px;}CD {display: table-cell; background-color: #00FFFF; border: 2px solid; padding: 20px 30px 30px 20px;}Titre {display: table-caption; font-size:36px; text-align:center;}


CSS: les Styles Multiples en HTML Styles multiples

<html><head> <link rel="stylesheet"

href="Style1.css" type="text/css" /> <link rel="stylesheet"

href="Style2.css" type="text/css" /><style>@import "Fontes.css" ;@import "Tables.css" ;.center { }#navBar { }</style></head><body> <div id="masthead"> </div><div id="navBar"> </div></body></html>

style prédéfini des balises

balise <style> attribut .class attribut #id CSS par @import CSS par link

"stylesheet"


CSS: les Styles Multiples en XML Styles multiples


<?xml-stylesheet type="text/css" href="monStyle1.css"?>

<?xml-stylesheet type="text/css" href="monStyle2.css"?>

<racine>

<titre> Styles en XHTML et XML</titre>

<html xmlns = " http://www.w3.org/1999/xhtml " >

<body>

<h1> Liens sous XHTML</h1>

<a href=" http://www.essi.fr/~pfz ">

Chez Moi

</a>

</body>

</html>

</racine>

styles prédéfinis par xmlns: html, xhtml, etc.

CSS par xml-stylesheet


CSS: Z-Index

<html>

<head> <style type="text/css">

img{position:absolute;}

img.x1{left:100px; top:100px; z-index:-1}



</style></head>

<body>

<h1>This is a Heading</h1>

<img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380">



<p>Default z-index is 0. z-index -1 has lower priority.</p>

</body> </html>


CSS: Z-Index avec "iframe"

<html>

<body>

<iframe style="width:75%;

height:300px;

background-color: #FFFF99"

name="view"

src="CSSzIndex.html">

</iframe>

</body>

</html>


Ilot XML dans HTML

<html>

<body>

<xml id="MonIlotXML" src="data.xml"></xml>

<table border="1" datasrc="#MonIlotXML">

<tr>

<td><span datafld="NOM"></span></td>

<td><span datafld="PRENOM"></span></td>

</tr>

</table>

</body>

</html>


CSS: Propriétés des Tables

Tables valeurs

display table inline-table

table-row-group table-column-group

table-header-group table-footer-group

table-caption

table-row table-cell

caption-side top bottm left right inherit

table-layout auto fixed inherit

border-collapse

collapse separate inherit

border-spacing

dist-horiz dist-vertic inherit

empty-cells show hide inherit


CSS: des Tables sans la balise <table> (v1)

<html> <head> <style type="text/css">

.grdMere{display: table;}

.mere{display: table-row;}

.fille{display: table-cell;}

</style></head>

<body>

<div class="grdMere">

<div class="mere">

<p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p>

</div>

<div class="mere">

<p class="fille"> F21</p> <p class="fille"> F22</p>

</div>

</div>

</body></html>


CSS: des Tables sans la balise <table> (v2)

<html> <head> <style type="text/css">

.grdMere{display: table;}

.grdMere>div{display: table-row;}

.grdMere>div>p{display: table-cell;}

</style></head>

<body>

<div class="grdMere">

<div>

<p> F11</p> <p > F12</p><p> F13</p>

</div>

<div>

<p > F21</p> <p > F22</p>

</div>

</div>

</body></html>


XML et CSS: divers compléments

contenu

pseudo-élements :before :after

textes :first-line :first-letter white-space

compteurs

pagination

Exercice[ref]:before {content: "Exercice - " attr(ref);}

Paragraph:first-line {font-style:"italic";}Paragraph:first-letter {font-size:+200%;}SourceLP {white-space:pre;}

{content:"string" attr(A) url(" ") counter(C);}

Chapitre {counter(chapnum); counter-increment:chapnum; counter-reset:sectnum;}

Chapitre {page-break-after: always;}Exemple{page-break-inside: avoid;}

paul franchi cip1 - cmd 2008-09 13/01/2014 transparent - 1 création & manipulation de documents...

Documents

n standards

n navigateurs

n rvolution

n chap iv

cours n chap

balisage n html

balise n css

xhtml n langages