FICHE 1

Transcription

FICHE 1

BTS Informatique de Gestion (lyc€e Rostand Chantilly)
Initiation au XHTML
– Pr€sentation -
Page 1
FICHE 1
Objectifs
Comprendre les principes de base du Xhtml
Etre capable de cr€er une page xhtml
Ressources
Fichier bienvenue.html
Un €diteur (HtmlPad, Notepad, EditPlus …)
I.
INTRODUCTION
1.
Petit historique
Le HTML (Hypertext Markup Language) est le langage de description de la plupart des
documents accessibles sur le Web. Il permet notamment d'implanter de l'hypertexte dans le
contenu des pages et repose sur un langage de balisage, d’o„ son nom.
HTML permet aussi de structurer et de mettre en forme le contenu des pages, d’inclure des
ressources multim€dias, des formulaires de saisie, et des €l€ments programmables tels que
des applets.
Le HTML a connu plusieurs €volutions successives. Sa version 1, cr€€e par Tim Berners-Lee
date de 1991. Sa version 2 date de 1994. La version 3.2 a vu le jour en 1996.
A cette €poque, c’€taient surtout les €diteurs de navigateurs (Netscape puis Microsoft) qui
imposaient leur volont€.
Pour €viter au Web de se transformer en une tour de Babel contraire aux principes historiques
de l’Internet (libre-acc…s aux donn€es, interop€rabilit€, €change), le W3C (World Wide Web
Consortium) a tent€, par ses normes sur le langage HTML (2.0, 3.2, 4.0, 5.0, …), de suivre le
mouvement et de retranscrire les diff€rentes fonctionnalit€s des principaux navigateurs.
Le respect de ces recommandations assure non seulement l’accessibilit€ d’un site sur la
majorit€ des navigateurs actuels, mais garantit surtout sa p€rennit€.
 http://www.w3.org
 http://openweb.eu.org
2.
Le XHTML
Le standard s’appelle aujourd’hui XHTML (Extensible HyperText Markup Language) (1.0 et 1.1
pour ses versions courantes).
Ce langage doit fonctionner de la m†me mani…re sur tous les navigateurs, la cr€ation de
nouvelles balises doit †tre autoris€e par le W3C.
Initiation au XHTML
3.
Page 2
Pour un web accessible € tous
La normalisation amorc€e par le W3C (1994) recherchait principalement l’interop€rabilit€ des
documents web.
Il s’agit de les faire comprendre ‡ tous les navigateurs (pr…s d’une centaine 
http://browsers.evolt.org/), sur toutes les plateformes (Windows, Unix, Macintosh) et outils
(t€l€phone mobile, assistant personnel, lecteur de braille, …).
Mais l’ambition d’universalit€ du Web ne concerne pas seulement les machines et les logiciels :
tous les †tres humains doivent pouvoir y acc€der, dans la mesure de leurs moyens et sans
barri…res artificielles (handicaps physiques, d€ficiences auditives, d€ficiences visuelles,
d€ficiences mentales).
Il existe ‡ cet effet des standards et des normes d’accessibilit€ du Web, dites WCAG (Web
Content Accessiblity Guidelines).
 http://www.w3/org/WAI)
4.
Principe g•n•ral
Une page XHTML (appel€e €galement ˆ document hypertexte extensible ‰) est un document
consultable sur le WEB.
Une des particularit€s du langage XHTML est la s•paration entre le contenu de la page et
son style. L’objectif du XHTML est de r€duire le document ‡ sa plus simple expression tout en
le gardant compr€hensible. La feuille de style (CSS) permettra de pr€senter la page WEB.
Ce syst…me est essentiellement un syst…me de publication de documents identifi€s par leur
URL (Uniform Ressource Locator = chemin d’acc…s ou adresse du document). Il est ax€ sur
un langage : le XHTML (Extensible HyperText Markup Langage) mais €galement sur un
protocole de transfert de documents : le protocole http (HyperText Transfer Protocol) dans
un environnement Client/Serveur.
WEB = Environnement client/Serveur + XHTML + CSS + HTTP + URL
Retourne la
page demandÄe
Retourne la
page demandÄe
INT ERNET
Titre du document - URL
page WEB
Demande de page
Demande de page
http://www.ac-amiens.fr/default.htm
Internet
Exploreur
Le navigateur va interpr€ter le
contenu de la page
Serveur WEB de
l'acadÄmie d'Amiens
Initiation au XHTML
Page 3
En r€sum€, on se sert de :


XHTML pour •crire le contenu de nos pages web.
CSS pour pr•senter ce contenu.
Ces langages sont donc compl€mentaires, l'un ne va pas sans l'autre.
Mais de quel logiciel vais-je avoir besoin pour cr€er mon site web ? Les documents XHTML
€tant des fichiers texte, ils peuvent †tre cr€€s ‡ l’aide de n’importe quel €diteur de texte (le
bloc-notes, NotePad, HtmlPad, EditPlus…).
Certaines applications sont con€ues sp•cialement pour la cr•ation de documents XHTML
(Expression Web, DreamWeaver, …). Elles disposent d’assistants, d’une interface graphique et
permettent de visualiser en temps r€el vos r€sultats.
5.
Le HTML 5.0
HTML 5 deviendra officiellement le format des pages Web pour succ€der ‡ l'actuelle version
4.0. Le standard est en cours de validation par le W3C.
Depuis 2004, la W3C travaillait ‡ la d€finition d'un format de page Web standard destin€ ‡
remplacer ‡ la fois HTML 4 et XHTML, tout en gardant la compatibilit€.
Un descriptif plus complet sur le format HTML 5 vous sera pr€sent€ un peu plus tard (fiche 15)
Initiation au XHTML
Page 4
II. Les documents XHTML
1.
Notion de balise
Les documents XHTML sont des documents texte contenant des instructions de mise en forme
(appel€es balises) et le texte ‡ afficher sur la page WEB. Ces balises peuvent †tre des
commandes de mise en forme (italique, gras, couleur…) ou des commandes demandant ‡
l’utilisateur de saisir des donn€es (champs d’un formulaire, cases d’option, cases ‡ cocher…).
Une balise commence par "<" et se termine par ">"
Les balises XHTML sont toujours •crites en minuscules.
Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque
chose au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de
votre page, cet autre texte est une citation, ...
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au
contraire sont toutes seules.

Les balises existant par paire : ce sont les plus courantes. On €crit la premi…re balise,
on tape du texte, puis on "ferme" la balise en la r€€crivant avec un slash devant "/".
Exemple 1 : <title>Page d’accueil </title>
La premi…re balise <titre> indique le d€but du titre, et elle est referm€e plus loin avec
</titre>.
Le navigateur comprend que ce qui est entre <title> et </title> est le titre de votre page
web, et que celui-ci est " Page d’accueil "
Exemple 2 : (fichier bienvenue.html)
Pour afficher le texte ˆ Bienvenue en BTS IG au lyc€e Rostand de Chantilly ‰ en caract…re
gras et en italique la syntaxe sera :
On peut enchaŠner
plusieurs balises
<strong><em>Bienvenue en BTS IG au lyc€e Rostand de Chantilly</em></strong>
D€but d’une balise <…>
Texte ‡ afficher
Fin de la balise </…>
Remarque : il faut toujours bien imbriquer les balises en ouverture-fermeture
Initiation au XHTML

Page 5
Les balises seules : On s'en sert en g€n€ral pour ins€rer un €l€ment dans une page.
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve ‡
la fin de la balise.
Par exemple : <br /> indique un saut de ligne
<strong><em>Bienvenue en BTS IG au lyc€e Rostand de Chantilly</em></strong>
<br />
Nous sommes le 6 septembre 2010
2.
Pr•sentation d’une page XHTML
D’une mani…re g€n€rale la structure d’un document en langage XHTML est la suivante :
Voici les explications :

La d€claration <!DOCTYPE …> : il permet d'indiquer au navigateur que l'auteur de la
page connaŠt les standards Web et estime que celle-ci s'y conforme.

La balise <html> : c'est la balise principale qui englobera toute votre page (x)HTML.
Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html>, qui indique que
votre page (x)HTML s'arr†te l‡. Il n'y a donc rien apr…s le </html>.

La balise <html> contient 2 attributs :
xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML.
xml:lang="fr" : cet attribut sert ‡ indiquer dans quelle langue est r€dig€e votre page
web.
Initiation au XHTML
Page 6
 La balise <head> contient quelques informations d'en-t†te pour votre page web. Elle est
referm€e un peu plus loin.

Une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web.
Servez-vous de ce mod…le ‡ chaque fois que vous cr€erez une nouvelle page web.
Le langage XHTML comporte de nombreuses balises permettant de cr€er des documents
XHTML. En voici quelques-unes :
Balises XHTML
<hr />
<table>… </table>
<strong>… </strong>
<u>… </u>
<dd>… </dd>
<em>… </em>
<br />
<p>… </p>
<img scr = … />
<sup>… </sup>
<sub>… </sub>
<q>…</q>
Description
Permet d’ins€rer une ligne horizontale
Permet de cr€er un tableau. Les lignes seront d€finies par <tr>
et les colonnes par <td>
Permet de mettre en gras le texte qu’elles encadrent
Permet de souligner le texte qu’elles encadrent
Permet de faire une tabulation
Permet de mettre en italique le texte qu’elles encadrent
Ins…re un saut de ligne
Commence un nouveau paragraphe
Ins…re un fichier image
Mettre en exposant une partie du texte
Mettre en indice un texte
Mettre des double-quote (citation)
Ces balises seront €tudi€es au fur et ‡ mesure des TP sur le langage XHTML.
Les balises <head>……..</head>
Il est possible d’inclure plusieurs balises dans la paire <head>…</head> afin de mettre en
forme le contenu du document concern€.
A l'int€rieur de la balise <head>, on trouve notamment
- La balise <title>. Elle est obligatoire et tr…s importante : elle contient le texte ‡ afficher
dans la barre de titre du navigateur. C'est elle qui contient le titre de votre page web.
Dans l’exemple pr€c€dent, le titre est "Mon premier programme"
- Une balise <meta> qui indique ici la table de caract…res utilis€e.
Initiation au XHTML
Page 7
Compl€ment sur la balise <meta>
Une fois un site sur le WEB, il faut le faire connaŠtre. Cela consiste ‡ le faire enregistrer sur
des moteurs de recherche. Afin de proc€der ‡ un tel r€f€rencement il importe de bien
remplir la balise <meta> qui peut comporter comme attribut :
<meta name="Description" content="1er TP en
HTML BTS IG1" />
<meta name="Keywords" content="BTS
IG1,Chantilly" />
<meta name="author" content="professeur" />
description du site sous la forme d'un
texte
permet de d€finir une liste de mots-cl€s
Informations sur l'auteur
Remarque : Tous les attributs € l’int•rieur d’une balise sont entour•s par des doublequotes
<meta name="author" content="professeur" />
Derni…re chose : si vous d€sirez ins€rer des commentaires c’est-‡-dire des informations que
vous €crivez pour vous et n’apparaissant pas aux yeux des visiteurs, alors vous devez utiliser
la balise commen‹ant par 
Voici un exemple de commentaires dans le code de tout ‡ l'heure (fichier bienvenue.html) :
Remarque : la gestion des accents en XHTML (les caract„res sp•ciaux)
Le code utilis€ sur le Web est le code ASCII (7 positions) qui ne permet pas de repr€senter les
caract…res accentu€s. Pour y parvenir (de mani…re universelle, quel que soit le syst…me client),
on utilise la notation codifi€e pr€c€d€e de "&" dont voici les principaux repr€sentants :
Caract„re
‡
‹
€
†
…
Code
à
ç
é
ê
è
Caract„re
„
Œ
•
espace
Code
ú
û
ï
 
Initiation au XHTML
Travail € faire
Cr€ez le code XHTML qui permet d’afficher comme r€sultat le texte ci-dessous.
Enregistrez votre travail sous le nom page2.html
Bienvenue ‡ la promotion 2010
STS Informatique de Gestion
du lyc•e Jean Rostand
de Chantilly
dans l’Oise
(caract…re
(caract…re
(caract…re
(caract…re
gras)
italique)
italique et gras)
soulign€, gras et italique)
Page 8
Initiation au XHTML
Page 9
FICHE 2
Objectifs
Etre capable d'utiliser les balises les plus courantes concernant la mise en page d'un
texte
Ressources
Fichier page2.html
I.
Les titres
Il existe six niveaux hi€rarchiques pour les titres. En pratique, seuls les deux premiers sont
utiles.
o <h1> </h1> : signifie "titre tr…s important". En g€n€ral, on s'en sert pour afficher le
titre de la page en haut.
o <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos
paragraphes et leur donner un titre.
o <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "soustitre" si vous voulez)
o <h4> </h4> : titre encore moins important.
o <h5> </h5> : titre pas important.
o <h6> </h6> : titre vraiment pas important du tout.
Initiation au XHTML
Page 10
Attention !
Il existe diff€rents types d’alignement d’un titre (gauche, droite, centr€, justifi€)
On retrouvera toute la mise en forme et en page directement dans une feuille de
style CSS
Travail € faire
Editez votre fichier page2.html. Appliquer une taille de niveau 3 ‡ votre texte.
Testez puis enregistrez votre travail
II. Compl•ments sur les paragraphes et les polices
de caract„re
Dans la fiche 1 nous avons vu que les balises <p>… </p> repr€sentent les balises de
paragraphes. Comme pour la gestion du texte, un paragraphe peut-†tre centr€, align€ ‡ droite
ou ‡ gauche ou justifi€ (travail ‡ r€aliser dans la feuille de style).
Exemple : <p> r€alisation d’un saut de paragraphe </p>
Il en sera de m†me au niveau de la police de caract…res, de sa taille, sa couleur
Travail € faire
- Reprise de l’exercice, faites un saut de paragraphe apr…s le texte "dans l’Oise" et ajoutez le
texte "deux sp€cialit€s"
- Testez puis enregistrez votre travail
Initiation au XHTML
Page 11
III. Les listes
D’une mani…re g€n€rale il existe trois types de liste :
o les listes ordonn€es (num€rot€es)
o les listes non ordonn€es (non num€rot€es)
o les listes de d€finitions
Balises XHTML
<ul> … </ul>
<ol> … </ol>
<li> … </li>
<dd> … </dd>
<dl> … </dl>
<dt> … </dt>
Description
Permet de cr€er une liste non ordonn€e
Permet de cr€er une liste ordonn€e
Permet de cr€er un €l€ment dans une liste ordonn€e ou non ordonn€e
Permet de faire une tabulation
Permet de cr€er une liste de d€finitions (definitions list)
Permet de d€finir un terme dans une liste de d€finitions
 Exemple 1 : les listes ordonn€es (liste num€rot€es)
<body>
<ol>
<li>Titre 1</li>
<li>Titre 2</li>
<li>Titre 3</li>
</ol>
</body>
 Exemple 2 : les listes non ordonn€es (liste ‡ puce)
<body>
<ul>
<li>Titre 2</li>
<li>Titre 1</li>
<li>Titre 3</li>
</ul>
</body>
Les balises acceptent parfois des caract€ristiques suppl€mentaires (nomm€es attributs)
permettant de les distinguer ou de les personnaliser. Ces options s’inscrivent ‡ l’int€rieur de la
balise et sont appel€es attributs. Leur valeur est toujours entour•e d'apostrophes (') ou
guillemets (").
Ainsi, il est possible de changer la puce ou le style de num€ro d'une liste. Quelque soit le
choix, on ajoutera un attribut type="…" ‡ l’int€rieur des balises <ul> ou <ol>
Initiation au XHTML
 Exemple 3 : changement de puces et de style de num€rotation
<strong>Voici une liste non
ordonn€e</strong>
<ul>
<li>Un</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<strong>Changement de puce (un
carr€)</strong>
<ul type="circle">
<li>Un</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<strong>Voici une liste
ordonn€e</strong>
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ol>
<strong>Changement de num€rotation
(utilisation des lettres de
l'alphabet)</strong>
<ol type="A">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ol>
Page 12
Initiation au XHTML
Page 13
 Exemple 4 : changement de puces et de style de num€rotation, tabulations
Il est €galement possible de faire des listes imbriqu€es
<strong>Listes imbriqu€es</strong>
<ol type="I">
<li>Un</li>
<ul type="circle">
<li>sous-titre 1</li>
</ul>
<li>Deux</li>
<ul type="circle">
<dd><li>sous-titre 2</li></dd>
</ul>
<li>Trois</li>
<ul type="circle">
</ul>
</ol>
 Exemple 5 : les listes de d€finitions
<strong>Listes de définitions</strong>
<dl>
<dt>Porte</dt>
<dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
<dt>Théâtre</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
Initiation au XHTML
Page 14
Travail € faire
Reprise de l’exercice et ajouter deux listes :
- Administrateur de R€seaux Locaux des Entreprises
- D€veloppeur d’Applications
Enregistrez votre travail
IV. Les traits
Pour tracer un trait horizontalement on utilisera la balise <hr />
Travail € faire
- Reprise de l’exercice et ajoutez une ligne en dessous de la liste ‡ puces.
- Testez et enregistrez votre travail
Remarque
Il est possible de param€trer au niveau d'une feuille de style CSS cette balise. On peut y
trouver diff€rentes propri€t€s CSS comme : color, background-color, border, height, width et
background-image. Cette tŽche sera r€alis€e un peu plus tard.
Initiation au XHTML
Page 15
FICHE 3
Objectifs
Etre capable de cr€er des liens dans une page xhtml
Ressources
Fichier Page2.html (TP pr€c€dent)
Un des int€r†ts du langage XHTML r€side dans la possibilit€ de d€finir des liens permettant la
navigation dans un document ou entre plusieurs documents.
La syntaxe de base est simple :
<a href="url de destination"> Cliquez ici… </a>
Ce code fera apparaŠtre un lien sur le texte "Cliquez ici …" de la page.
Ce lien permettra ‡ l'utilisateur d'atteindre l’URL de destination.
I.
Le lien local
Un site est constitu€ d'un ensemble de pages, donc de plusieurs fichiers XHTML. Si ces pages
sont situ€es dans un m†me r€pertoire, alors leurs adresses seront simplement constitu•es
de leur nom.
Lien1.html
<a href="lien2.html">Page 2 du site</a>
Lien2.html
<a href="lien1.html">Page 1 du site</a>
Remarque : Les fichiers peuvent •galement …tre situ•s dans un sur ou sous-r•pertoire
du site
../ indique que l’on ˆ remonte ‰ dans le dossier parent
du dossier contenant la page.
Ici, la page est dans le dossier ˆ Mes pages ‰.
On remonte dans le dossier parent, soit ˆ Mon site ‰.
Puis l’on ˆ descend ‰ dans le dossier ˆ images ‰
Initiation au XHTML
Page 16
Il est possible de faire apparaŠtre une bulle d’information sous le lien lorsque la souris passe
dessus. Pour cela il faut ajouter un attribut title="…"
II. Compl•ments
 L'attribut target
Un lien peut mentionner le nom d'un cadre ‡ utiliser pour afficher le document destination :
Ce point sera revu lors de la cr€ation des frames (cadres)
 Les ancres
Une ancre, c'est une sorte de point de rep…re qu’on peut utiliser sur une grosse page
XHTML. En effet, si votre page est tr…s grande il peut †tre utile de faire un lien amenant
plus bas dans la m†me page pour amener le visiteur directement ‡ la partie qui l'int€resse.
Pour cr€er une ancre, il suffit de rajouter l'attribut id ‡ une balise qui va alors servir de
rep…re. Ce peut †tre n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom ‡ l'ancre, ce qui va vous servir ensuite pour faire le
lien vers cette ancre. Par exemple :
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra
un di…se (#) suivi du nom de l'ancre. Exemple :
Normalement, si vous cliquez sur le lien, cela vous am…nera plus bas dans la m†me page (‡
condition que la page comporte suffisamment de texte pour que les barres de d€filement se
d€placent automatiquement).
Si vous d€sirez vous diriger vers une ancre se situant sur une autre page il suffira de taper
le nom de la page, suivi d'un di…se (#), suivi du nom de l'ancre.
Initiation au XHTML
Page 17
III. Lien externe
Mis ‡ part un document local un lien peut r€f€rencer :
 Un document html situ€ quelque part sur le Web
<a href="http://www.wanadoo.fr">Wanadoo</a>
 Un fichier situ€ sur un serveur FTP
<a href="ftp://serveurFtp/pub/unFichier.txt">T€l€charger</a>
Le navigateur proposera le t€l€chargement ou affichera le contenu du fichier en fonction de
son param€trage
 Un r€pertoire situ€ sur un serveur FTP
<a href="ftp://serveurFtp/pub/">Lister le r€pertoire</a>
Le navigateur affichera le contenu du r€pertoire, ce qui permettra l'affichage ou le
t€l€chargement de ses fichiers.
 Une adresse m…l
<a href="mailto:[email protected]">Envoyer un message</a>
Un clic sur ce lien ouvre le logiciel de messagerie install€ sur le poste client et permet
l'envoi d'un m€l.
Remarque
Lorsqu'un utilisateur clique sur un lien, le contenu de la fen†tre du navigateur est en g€n€ral
remplac€ par la destination du lien.
<a href="pageDestination.html" target="valeur">Cliquez ici…</a>
Valeur
_self
_parent
_blank
_top
Affiche
Affiche
Affiche
Affiche
la
la
la
la
cible
cible
cible
cible
dans
dans
dans
dans
Action
le m†me cadre que le lien
le cadre de niveau sup€rieur
une nouvelle fen†tre
la fen†tre enti…re du navigateur
Initiation au XHTML
Page 18
Travail € faire
Reprise de l’exercice : vous allez cr€er deux liens
- un lien vers le moteur de recherche google (http://www.google.fr) avec un affichage dans
une nouvelle page
- un lien vers votre adresse de messagerie (votrenom@votre fournisseur d’acc…s)
Enregistrez
Initiation au XHTML
Page 19
FICHE 4
Objectifs
Etre capable d'ajouter des images
Ressources
Fichiers Page2.html, ordi.gif et mel.gif bienvenue.html
I.
La gestion des images
Le format d’une image doit †tre GIF ou JPEG ou PNG.
Pour ins€rer une image, on doit utiliser la balise <img />.
C'est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs mais 2 d'entre eux sont indispensables :
 src : il permet d'indiquer o„ se trouve l'image que l'on veut ins€rer.
<img src="images/bastia.png"/>
 alt : il faut toujours indiquer un texte alternatif ‡ l'image c'est-‡-dire un court texte qui
d€crit ce que contient l'image. Ce texte sera affich€ ‡ la place de l'image si celle-ci ne peut
pas †tre t€l€charg€e (‹a arrive), ou sur les navigateurs de personnes handicap€es (nonvoyants) qui ne peuvent malheureusement pas "voir" l'image.
<img src="bastia.png" alt="Image du club de foot de Bastia" />
Une image peut tr…s bien servir de lien. Au lieu de mettre du texte entre les balises <a
href=….></a>, vous pouvez tr…s bien mettre une balise <img />
<a
href="http://www.atlavista.com"><img
alt="Moteur
de
recherche
atlavista"
l’image"/></a>
src="recherche.jpg"
title="cliquez
sur
Travail € faire
Reprise de l’exemple (page2.html). Vous allez ins€rer deux images :
- Ordi.gif (entre les textes ˆ dans l’Oise ‰ et ˆ Deux sp€cialit€s ‰)
- Mel.gif (en remplacement du lien et du texte ˆ Envoyer un message ‰)
Testez et enregistrez votre travail (page2.html)
Initiation au XHTML
Page 20
Derni„re petite chose
Avec Mozilla, Internet Explorer, …, il est possible maintenant d’avoir une petite ic•ne au niveau
de vos signets ou dans la barre d'adresse. Cela permet de faire ressortir votre site dans la
liste, c'est plut•t bien pour les fr€quentations.
Le format des ic•nes d€pend de votre navigateur. Un seul format est support€ par tous, c'est
le ICO.
Internet Explorer est ‡ la traŠne, c'est lui qui n'accepte que le ICO. Mais si vous utilisez un
autre navigateur vous pouvez utiliser tous les formats d'images support€s par ce dernier. Ce
qui donne les types JPEG, GIF, PNG, MNG, XBM, BMP et ICO.
L'ic•ne doit †tre au format 16x16 ou 32x32.
Vous devez mettre le lien suivant dans votre page entre les balises <head> et </head>.
Initiation au XHTML
Page 21
<link rel="icon" type="image/jpg" href="monIcone.jpg" />
Remarquez le type qui contient le type ou Mime Type de l'image. Voici les types que vous
pouvez utiliser pour les 4 classiques :
- image/png: image PNG.
- image/gif: image GIF.
- image/jpeg: image JPEG.
- image/x-icon: image de type icon, attention ce format n'est pas un format
standard.
Travail € faire
R€cup€rez une image de type ico (www.favicon.fr) et ins€rez votre image dans le fichier
page2.html
Testez sous Mozilla et enregistrez votre travail (page2.html)
Cas particulier de IE
Internet Explorer ne permet l’utilisation que des seuls fichiers au format ICO. Par ailleurs, il
faut n€cessairement passer par un serveur http. Un double-clic sur votre fichier html local ne
permet pas l’affichage de l’ic•ne.
Exemple avec utilisation avec un serveur web local :
<link rel="shortcut icon" type="image/x-icon"
href=" http://localhost/monRepertoire/monFichier.ico "/>
Exemple avec utilisation avec un serveur web distant :
<link rel="shortcut icon" type="image/x-icon"
href=" http://monDomain.com/monRepertoire/monFichier.ico "/>
Solution pour vos sites web
Il suffit de placer le fichier ic•ne directement ‡ la racine du site web. Ce fichier est
obligatoirement au format ICO et doit se nommer favicon.ico.
Dans ce cas, il n’est pas n€cessaire d’ajouter une balise <link> … </link> dans vos pages
html.
Initiation au XHTML
Page 22
FICHE 5
Objectifs
Etre capable de cr€er des tableaux
Ressources
I.
Les tableaux
Le d€but d’un tableau est signal€ par les balises <table>… </table>



<th>…</th> : indique une ligne d’en-t†te de colonnes
<tr>…</tr> : indique le d€but et la fin d'une ligne du tableau.
<td>…</td> : indique le d€but et la fin du contenu d'une cellule.
En XHTML, votre tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le
contenu des diff€rentes cellules (<td>).
Exemple : On d€sire r€aliser un tableau comportant deux lignes et deux colonnes
<table>
<tr>
<th>Nom</th>
<th>Prénom</th>
</tr>
<tr>
<td>Bernede</td>
<td>Béatrice</td>
</tr>
<tr>
<td>Cardoni</td>
<td>Jean-Marie</td>
</tr>
</table>
Initiation au XHTML
Page 23
Remarque
Si on veut ins€rer une l€gende au-dessus du tableau on utilise les balises <caption> …
</caption>. L’affichage obtenu peut diff€rer l€g…rement selon le navigateur utilis€.
<table>
<caption><h4>Liste des professeurs</h4></caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
</tr>
<tr>
<td>Bernede</td>
<td>Béatrice</td>
</tr>
<tr>
<td>Cardoni</td>
<td>Jean-Marie</td>
</tr>
</table>
R•sultat sous IE
R•sultat sous Firefox
Initiation au XHTML
Page 24
Remarque
En HTML il est possible d’ajouter des attributs directement ‡ l’int€rieur de la balise <table>.
Notamment :
Espacement entre les cellules
Espacement entre un caract„re et le bord de la cellule
Bordure (encadrement)
Alignement du tableau dans la page
cellspacing="3"
Cellpadding ="3"
border="2"
align="center"
<table border="1" alignalign="left" cellspacing="2" cellpadding="5">
<caption><h4>Profs d'info IG1</h4></caption>
<tr>
<th>Nom</th>
<th>Pr€nom</th>
</tr>
<tr>
<td>Bernede</td>
<td>B€atrice</td>
</tr>
<tr>
<td>Cardoni</td>
<td>Jean-Marie</td>
</tr>
</table>
Affichage
En XHTML on retrouvera toute la mise en forme directement ‡ l’int€rieur de la feuille de style.
Initiation au XHTML
Page 25
Travail € faire
Vous allez cr€er un premier fichier XHTML (arle.html) permettant d’obtenir l’image ci-dessous.
Le premier titre utilisera un format titre <h2> et le second <h3>.
Travail € faire
Cr€ez un second fichier XHTML (da.html) permettant d’obtenir l’image ci-dessous. Le premier
titre utilisera un format titre <h2> et le second <h3>.

FICHE 1

Transcription

Documents pareils

Hôpital de Chantilly Les Jockeys / 60500

Le design orienté objet - Jean

Carte nationale d`identité

O sortie chantilly - association jumelage compiegne arona - E

Structure de base d`un document XHTML 1.0 Strict (Balises de

Chantilly. Le château : la galerie de peinture

Son CV - David Marchesson

Carte nationale d`identité

La Course d`Orientation ou comment joindre nature, sport et réflexion

Intitulé de l`emploi Famille Webmestre Communication Code Autres