option si, 3a xhtml un document xhtml étant un document xml il commence par une déclaration xml...

Option SI, 3A

XHTML

Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous devrez spécifier quelle DTD vous comptez utiliser avec votre document.

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

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

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

</html>

Le contenu de votre document se trouvera alors entre les balises <html> et </html>.

XHTML

Option SI, 3A

Titre du document et en têteLe titre est définit à l'aide de l'élément title comme dans l'exemple suivant :

<head> <title>Titre de mon document</title></head>

Pour tester ce que nous venons d'expliquer, créez un document test.html dans lequel vous copierez la code suivant :<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titre de mon document</title> </head> </html>

Les navigateurs Web affichent généralement le titre dans la barre de titre de la fenêtre.

XHTML

Option SI, 3A

Corps du document, titres et paragraphes

•Le corps du document est la zone que l'on va trouver après l'en-tête. Il est définit par l'élément body.•Les titres sont au nombre de 6, chacun ayant un niveau d'importance. Le plus haut niveau d'importance est le titre h1, suivit de h2 et ainsi de suite jusqu'à h6. Ces niveaux sont largement suffisants pour couvrir l'ensemble de vos besoins les plus courants.•Un paragraphe est définit par l'élément p. Il sera affiché avec un espacement avant et après, permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des éléments du document.

<body> <h1>Titre très important</h1> <p>Paragraphe.</p> <h2>Titre moins important</h2> <p>Second paragraphe un peu plus long que le premier.</p> </body>

XHTML

Option SI, 3A

Les liens• L'aspect le plus intéressant du Web est cette formidable capacité à

créer des liens de pages en pages, de sites en sites. Pour créer un lien on utilise l'élément a. Pour créer un lien vers un fichier test2.html se trouvant dans le même répertoire que votre fichier test.html il suffira de faire comme dans l'exemple suivant :

<a href="test2.html">Second fichier test</a>

• Le navigateur affichera généralement le lien en bleu et le soulignera. Pour faire un lien vers un autre site Web on écrira le code suivant :

<a href="http://www.w3.org/">Le W3C</a>

XHTML

Option SI, 3A

Images• Afin de rendre vos documents plus attrayants, vous pouvez y

insérer des images à l'aide de l'élément img. le fichier de cette image s'appelant toto.jpg, voici le code à écrire pour insérer l'image dans votre page :

<img src="toto.jpg" width="180" height="130" />

XHTML

Option SI, 3A

Les listes

Les listes sont des outils bien utiles pour présenter des informations. XHTML en offre plusieurs types différents. Le premier type de liste est la liste non ordonnée, autrement appelée liste à puces. Le second exemple affiche un numéro au lieu d'un puce avant le texte de chaque élément.

<ul>

<li>1er élément</li>

<li>2ème élément</li>

<li>3ème élément</li>

</ul>

<ol> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ol>

XHTML

Option SI, 3A

Tableaux•Un tableau XHTML est découpé en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit être le même. Voici un exemple de tableau très simple :

<table> <tr> <td>ligne 1, colonne 1</td> <td>ligne 1, colonne 2</td> <td>ligne 1, colonne 3</td> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> </table>

Les balises <tr> et </tr> délimitent les lignes du tableau. Dans les lignes suivantes, <td> spécifie les cellules de données.

XHTML

Option SI, 3A

Feuille de style (CSS)

Séparation du contenu et de la présentation

• Interopérabilité : affichage sur le Web,sur papier, BD, …

• Réutilisabilité/ durabilité : le document ne devient pas obsolète avec l'évolution des techniques informatiques ; il pourra être traité par des applications inexistantes au départ

Feuilles de style

Option SI, 3A

Types de média

• all, aural, braille, embossed, handheld, print, projection, screen, tty, tv

@media print {...}@media screen {...}

@import « style-print.css » print;@import « style-screen.css » screen;

Option SI, 3A

Définition d’un stylebalise { propriété style: valeur; propriété style: valeur }

Exemple :

H3 { font-family: Arial; font-style: Italic }

Le Texte « Cours XML » sera en Arial et en italique.

<h3> Cours HML</h3>

balise.nom_de_classe { propriété de style: valeur }

Exemple

p.toto {font-weight: bold; font-color: #000080 }

Le texte « exemple1 » sera en gras et bleu mais pas « exemple2 »

<p class= " toto" >exemple1</p><p class= " titi">exemple2</p>

Feuilles de style

Option SI, 3A

Définition style (suite 1)

.nom_de_classe { propriété de style: valeur }

Exemple

.toto {color:blue; font-size:12px}

Le texte « exemple1 », « exemple2 » et en bleu et de taille 12 mais pas « exemple3 » ni « exemple4 »

<h1 class="toto">exemple 1</h1>

<p class="toto">exemple2</p>

<p>exemple3</p>

<h1 class="titi">exemple4</h1>

Feuilles de style

Option SI, 3A

Définition style (suite 2)

* { propriété style: valeur; … }

Le sélecteur universel « * » agit sur toutes les balises.

Exemple

* {background-color:red}

« exemple1 » et « exemple2 » sont sur fond rouge.

<h1>exemple 1</h1>

<p class="titi">exemple2</p>

Feuilles de style

Option SI, 3A

Type de propriété de style

• Couleur et image d’arrière plan : background-color :red, …

• Couleur d’avant plan : color:#008000, …• Bordure: border:5px dotted:#0000FF, …• Largeur, hauteur: width:250px; …• Marge, espacement: margin:10px;…• Alignement: text-align: center; …• Positionnement: fload: left; …• Typographie: font-weight: bold; …

Feuilles de style

Option SI, 3A

Positionnement

Option SI, 3A

Boîte de type bloc en flux normal

Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur :

En HTML :<p class="jaune">Une boîte jaune</p> <p class="verte">Une boîte verte</p>

En CSS :

.jaune { background-color: #ffff00; }

.verte { background-color: #00ff00; }

Le résultat :

Feuilles de style

Option SI, 3A

Marqueurs de boîtes blocs

Les principaux éléments créant des boîtes bloc sont :

• l'élément div ; • les titres h1, h2, h3, h4, h5, h6 ; • le paragraphe p ; • Les listes et éléments de liste ul, ol, li, dl, dd ; • Le bloc de citation blockquote ; • Le texte pré-formaté pre ; • L'adresse address.

Feuilles de style

Option SI, 3A

Boîte de type en-ligne

Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur :

En HTML :<p> <span class="jaune">Une boîte jaune</span> <span class="verte">Une boîte verte</span> </p>

En CSS :.jaune { background-color: #ffff00; } .verte { background-color: #00ff00; }

Le résultat :

Feuilles de style

Option SI, 3A

Marqueurs de boîtes en ligneLes principaux éléments créant des boîtes en ligne sont :• l'élément span ; • le lien a ; • L'image img ; • Les emphases em et strong ; • La citation q ; • La citation cite ; • L'élément code ; • Le texte entré par l'utilisateur kbd ; • L'exemple samp ; • La variable var ; • Les abréviations et acronymes abbr, acronym ; • Le texte inséré ins ; • Le texte supprimé del.

Feuilles de style

Option SI, 3A

CSS : positionnement relatif

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

En HTML :<p> Lorem <span class="jaune"> boîte en position relative

</span> ipsum dolor. </p>

En CSS :.jaune { position: relative; bottom: 5px; background-color: #ffff00; }

Le résultat :

Feuilles de style

Option SI, 3A

CSS : positionnement flottant

Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.

En HTML:

<p class="jaune">Une boîte jaune flottant</p> <p class="verte">Une boîte verte doté d'un contenu plus long…</p>

En CSS:

.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; }

.verte { background-color: #00ff00; }

Le résultat :

Feuilles de style

Option SI, 3A

une mise en page à deux colonnes

En CSS :

.content { float: left; width: 70%; } .menu { margin-left: 80%; border: 1px solid #000000; padding: 1em; }

En HTML… <body> <div class="content"> … </div> <div class="menu"> <ul> <li>lien_1</li> <li>lien_2</li> <li>lien_3</li> </ul> </div> </body> …

Résultat :

Feuilles de style

Option SI, 3A

CSS : positionnement fixe et absolue

Le fonctionnement de la position absolue : Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :

• une boîte elle-même positionnée (position relative ou absolue) ;

• le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.

Feuilles de style

Option SI, 3A

CSS : positionnement fixe et absolue

Définissons un conteneur verte en position relative :.verte { position: relative; background-color: #00ff00; width: 15em; }

Et un positionnement absolu jaune :.jaune { position: absolute; top: 1em; right: 1em; background-color: #ffff00; }

HTML :<div class="verte"> <p> … </p> <p class="jaune"> Boîte jaune en position absolue </p> </div>

Résultat :

Feuilles de style

Option SI, 3A

Images et CSS

• Beaucoup d'images sont utilisées dans le but unique d'embellir les pages HTML. Ces images n'apportent rien au contenu, et en toute logique ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le ou les fichiers HTML à la recherche des images de présentation.

Feuilles de style

Option SI, 3A

Les images de fond• En utilisant un élément div vide, on peut aisément remplacer une

image purement décorative par une image de fond. Le principe consiste simplement à dimensionner le div à la même taille que l'image cible, et à lui appliquer l'image à remplacer comme image de fond.

Code XHTML : Résultat :

<div id="avatar"> </div>

Feuille de style :

div#avatar { background-image: url(avatar-p.png);

background-repeat: no-repeat;

width: 80px;

height: 103px;

padding: 0; }

Feuilles de style

Option SI, 3A

Création d'une bordure stylée

CSS :div.bordure-top { padding-top: 15px; border-left: 1px solid; border-right: 1px solid; background-image: url(borderh.gif); background-position: top; background-repeat: repeat-x; }

div.bordure-bottom { padding: 0px 7px 15px 7px; background-image: url(borderh.gif); background-position: bottom; background-repeat: repeat-x; }

XHTML<div class="bordure-top"> <div class="bordure-bottom"> Texte d'exemple. </div> </div>

Résultat :

Feuilles de style

Option SI, 3A

Ou mettre le CSS ?• Il est possible d'inclure une feuille de style de deux manières

différentes dans un document. La première possibilité, qui est probablement la plus simple, est de mettre la feuille de style directement dans l'entête du document, entre une paire de balises

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

• La seconde possibilité est de mettre le code dans un fichier séparé, souvent nommé en .css, et de l'inclure avec dans l'entête une balise de la forme

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

Feuilles de style

Option SI, 3A

• XML met l’accent sur le contenu et non sur la manière de présenter les données.

Exemple de code XHTML de la page http://www.csszengarden.com/

<div id="container"> <div id="intro"> <div id="pageHeader"> <h1>css Zen Garden</h1> <h2>The Beauty of CSS Design</h2> </div> <div id="quickSummary"> <p class="p1">A demonstration of what can be accomplished visually through CSS based design. Select any style sheet from the list to load it into this page. </p> ….

Feuilles de style

Option SI, 3A

Zen Garden (XHTML Brut)

Feuilles de style

Option SI, 3A

Zen Garden (CSS N°1)

Feuilles de style

Option SI, 3A

Zen Garden (CSS 2)

Feuilles de style

Option SI, 3A

Zen Garden (CSS N°3)

Feuilles de style

option si, 3a xhtml un document xhtml étant un document xml il commence par une déclaration xml...

Documents