23/01/2012

Cration de site web XHTML

Plan gnral

Prsentation prliminaire

Master 1 Lacise Bastien WAGENER

Prsentation prliminaire Outils Construire des documents pour le web XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte

Internet & Sites Web

2/94

Quest-ce quun site Internet

Le site Internet

Sites Statiques

4/94

Une maison (site) comporte plusieurs pices (pages HTML), lies entre elles. La ville hberge ce site et la rend disponible par le rseau Internet (rseau ferr). Ladresse de la maison correspond ladresse Internet vers laquelle on se dirige pour accder au site Internet. Un aiguilleur, le serveur DNS dirige vers lhbergeur (ville) puis le site (maison). Le rseau Internet correspond ici au rseau ferr
5/100

Un site Internet est un rpertoire de pages HTML lies entre elles Plusieurs faons de fabriquer des pages HTML:

Sites Statiques Sites dynamiques

Les pages sont cres priori et dposes chez lhbergeur par le webmestre lavance. Les pages affiches sont les mmes pour tous les visiteurs.

6/100

23/01/2012

Sites dynamiques

Protocole TCP/IP

Protocole TCP/IP

Ct client:

Deux protocoles de communication sont utiliss

Programme (Javascript) qui rend la page active Menu droulants, vrification de formulaires, calculs, etc. Programme (PHP, ASP, etc.) qui construit les pages avant envoi. Permet la personnalisation.
8/100

Ct serveur:

IP (Internet Protocol) : assure la traverse du rseau. Chaque machine a une adresse IP sur le rseau qui permet dacheminer les informations un endroit prcis. LIP permet dacheminer les paquets cres par le TCP. TCP (Transmission Control Protocol): assure la fiabilit de la transmission. Les informations sont dcoupes en paquets, contenant chacun (entre autres) ladresse de la machine mettrice et celle de la machine du destinataire. Les paquets sont numrots.

Chaque paquet est trait indpendamment. Les paquets passent par des machines particulires appeles routeurs (nuds du rseau). Un routeur qui reoit un paquet regarde ladresse IP du destinataire et fait suivre un autre routeur choisi en fonctione de ladresse, de la charge du rseau, etc. Pas de chemin unique Les paquets empruntent souvent des chemins diffrents

7/100

9/100

Protocole TCP/IP

Services Internet
FAI

Serveur DNS

Chaque paquet reu est vrifi Les paquets sont rordonns et le message est recompos. Le message est redirig vers lapplication dsire (lapplication est donc rfrence dans les paquets).

Internet = infrastructure de communication De nombreux services utilisent Internet

E-mail WWW (World W ide Web) : Systme dinformation hypermdia rparti trop souvent confondu avec Internet Usenet (news, forums) IRC (chat) FTP (transfert de fichiers) VoIP (tlphonie par Internet)

Modem/Routeur

10/100

11/100

12/100

Ordinateur local (Client)

Site Internet (Serveur)

23/01/2012

Hbergeur Internet

Domaine Internet

Transfert de fichiers FTP (File Transfert Protocol)

Organisme qui :

Hberge des pages HTML Gre les doms de domaines Internet Fournit dautres services :

Compos de deux parties:

Le corps Lextension (.fr, .com, .org, .net, .co.uk, etc.)

Messagerie, sauvegarde des pages, etc.

Certains FAI font office dhbergeurs (Orange, SFR, Free, Noos, etc.) Liste dhbergeurs:

Protocole de communication permettant le transfert de fichiers entre deux machines. Permet de dposer des pages web sur un serveur web pour publier un site

http://www.hebergementweb.org/ http://www.infowebmaster.fr/hebergeur_gratuit_sans_pub.p hp

13/100

14/100

15/100

Le Web

Pour rsumer

Les outils

Un systme dinformation hypermdia rparti

Hypertexte (liens) Multimdia (texte, image, son vido, ) Rparti (information sur plusieurs serveurs web) Par lintermdiaire de navigateurs (clients web) Avec le protocole HTTP (HyperText Transfer Protocol)
17/100

Accessible par le rseau Internet

Cration de sites Internet statiques Dfinir qui sera lhbergeur Dfinition (Administration) de lenvironnement dhbergement Rdaction/Cration des pages en local Envoi des pages par le protocole FTP chez lhbergeur pour les rendre disponibles sur le web Modification dans le temps

16/100

23/01/2012

Plan introduction

diteurs de pages HTML

dition dimages

Prsentation prliminaire Outils Construire des documents pour le web

Les basiques en mode texte

Bloc-Notes Notepad ++ (windows) / TextWrangler (Mac) Commerciaux: DreamWeaver, Frontpage Libres: Amaya, Kompozer, BlueFish, SeaMonkey, etc.

Les spcialiss (WYSIWYG)

Commerciaux : Paint, Adobe photoshop, etc. Libres: Gimp Manipulations avec Paint:

Formats BMP, JPG et GIF

Copie dcran Appareil photo numrique

19/100

20/100

21/100

Envoi des pages HTML (upload)

Filezilla Microsoft DOS ftp (ligne de commande) Core FTP FTP Voyager FTP accessibles par navigateur Internet (Net2FTP, etc.)

Construire des documents pour le web

Plan introduction

Prsentation prliminaire Outils Construire des documents pour le web

22/100

24/100

23/01/2012

Introduction

Introduction (2)

Principe du couplage XHTML/CSS

Document XHTML Document CSS

HTML (HyperText Markup Language)

XHTML

Invent en 1992 par Tim Berners-Lee Devenu peu rigoureux et non standard cause de la concurrence entre les navigateurs Mta-langage (langage pour crer des langages) Norme pour les langages du web

Extensible HyperText Markup Language Mise en conformit de HTML avec les normes dfinies dans XML Langage dcriture de feuilles de styles XHTML 1.1 CSS 3.0

Contenu structur dun document

Feuille de styles

XML (eXtensible Markup Language)

CSS (Cascading Style Sheet)

Versions actuelles

Fichier .html

Fichier .css

25/100

26/100

27/100

Principe du couplage XHTML/CSS (2)

Sparation entre

XHTML Principes gnraux du langage

Plan XHTML

30/100

Le contenu dun document web, structur selon le langage XHTML (fichier .html)

Le fond structur

Les mises en forme appliquer aux diffrents lments du document web, dfinies en langage CSS dans une feuille de styles (fichier .CSS)

La forme

Exemple : http://www.csszengarden.com

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte

28/100

23/01/2012

Document XHTML valide

Document XHTML valide (2)

Inclusion des lments

Existence dune DTD (Document Type Definition) pour le XHTML. Document dfinissant des rgles prcises respecter par tout document XHTML valide.

W3C (World Wide Web Consortium) : organisme charg de dfinir des normes pour les langages du web. Validateur : outil permettant de vrifier la conformit de tout document xhtml avec la DTD associe Validation de pages xhtml:

Tout lment a:

Des lments parents : les lments dans lesquels il peut tre inclus. Des lments enfants : les lments quil peut contenir. Parents : blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th Enfants : li

Ex : <ol> </ol> (liste ordonne)

http://validator.w3.org
33/100

31/100

32/100

Inclusion des lments (2)

XHTML lments de structuration du contenu

Plan XHTML

Descriptif de tous les lments (rle, attributs, parents, enfants, etc.)

http://giminik.developpez.com/xhtml/

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte

34/100

36/100

23/01/2012

Installation Amaya

Code gnr automatiquement

Header

Code gnr automatiquement lors de la cration de documents sur Amaya. Indispensable pour tout document

<?xml version="1.0" encoding="iso-8859-1"?> <!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">

Indications de compatibilit. Type de document (le dtd: grammaire du langage qui permet la vrification du document). Balise html qui se ferme la fin du coument, contient le code html.

37/100

38/100

39/100

Header (2)

Exemples de balises meta

Balise Body

<head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Nouveau</title> <meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" /></head>

Toutes non obligatoires.

<META NAME="Author" CONTENT= "Wagener Bastien">

Auteur de la page web

Version du langage de la page & encodage des caractres. Balise <title> : titre qui apparat dans la barre de titre du navigateur. Meta name : pub pour amaya. On peut ventuellement ajouter dautres balises meta name.
41/100

<META NAME="Description" CONTENT="Rle et description des balises Meta">

Entre 100 et 1000 caractres, le contenu de cette balise est souvent repris par les annuaires, il peut donc tre trs utile de le renseigner

<body></body> Tout le contenu de votre page se trouvera insr entre ces balises. Il ne peut y avoir quune balise body par document.

40/100

42/100

23/01/2012

Paragraphe

Titres

Bloc de citation

<p></p> Prcd et suivi de sauts de lignes. Contenu:

6 niveaux de titres indiqus par les lments

<hn> </hn>, n compris entre 1 et 6

Balise <blockquote> </blockquote> Contenu :

Texte Objets multimdia (images, vido, etc.) Objets de formulaires

Balise <h1> </h1> : niveau le plus haut. Balise <h6> </h6> : niveau le plus bas. lments suivis dun saut de ligne. Taille de police dgressive de h1 h6.

Paragraphes, titres, images, listes, etc.

Contenu en retrait par rapport aux bords gauche et droit du document (pour le mettre en vidence). lment suivi dun saut de ligne.

43/100

44/100

45/100

Citation courte

Adresse

Acronyme

Balise <cite> </cite> Citation courte dans le texte. Mise en vidence avec la police en italique. Pas de saut de ligne aprs.

Balise <address> </address> Gnralement plac en fin de document pour indiquer les coordonnes de lauteur de la page. Mise en vidence par une police italique.

Balise <acronym> </acronym> Acronyme dans un texte Mise en vidence par un soulignement en pointills Ncessite la prsence de lattribut title.

46/100

47/100

48/100

23/01/2012

Exemple

Liste non ordonne

Liste ordonne

Balise <samp> </samp> Pour afficher un extrait de code, le plus souvent. Mise en vidence par une police Courier.

Liste puces Balise <ul> </ul> pour dlimiter la liste. Balises <li> </li> pour indiquer les composants de la liste. Ex.: <ul>
<li>Composant 1</li> <li>Composant 2</li> <li>Composant 3</li> </ul>

Mme principe que pour la liste non ordonne mais la balise est la suivante : <ol> </ol> Ex.: <ol>
<li>Composant 1</li> <li>Composant 2</li> <li>Composant 3</li> </ol>

Chaque composant de la liste est prcd dune puce graphique

51/100

Chaque lement de la liste est prcd dun n dordre.

49/100

50/100

Imbrication de listes

Liste de dfinitions

Liste de dfinitions (2)

<dl> <dt>terme 1</dt> <dd>dfinition du terme 1</dd> <dt>terme 1</dt> <dd>dfinition du terme 1</dd> <dt>terme 1</dt> <dd>dfinition du terme 1</dd> </dl>
54/100

Un lment <li> </li> peut contenir une liste. <ul> Ex. :

<li>Composant 1</li> <li>Composant 2 <ol> <li>Composant 2.1</li> <li>Composant 2.2</li> </ol> </li> <li>Composant 3</li> </ul>

Liste de termes avec une dfinition pour chacun de ces termes. Balise <dl> </dl> pour dlimiter la liste. Balise <dt> </dt> pour indiquer un terme. Balise <dd> </dd> pour indiquer sa dfinition. Une dfinition est indente par rapport au terme.

52/100

53/100

23/01/2012

Blocs ou divisions

Blocs ou divisions (2)

Balise <div> </div> Regroupement dans un seul bloc dun ensemble dlments auxquels on veut appliquer des styles spcifiques. Contenu plus vari quun paragraphe (<p></p>):

Texte. Objets multimdia. Titres, listes, formulaires, etc.

Balise <span> </span> Cration de blocs sans saut de ligne, on peut donc crer des blocs lintrieur mme dun texte, sur un seul mot par exemple. Intrt identique div : appliquer des styles spcifiques sur ces blocs.

XHTML Attributs communs tous les lments

Liste non exhaustive

55/100

56/100

Plan XHTML

58/100

Attribut id

Attribut title

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte
59/100

Rle : identification dun lment prcis dans un document (usage unique). Objectif : pouvoir manipuler cet lment dans un script. Chaque lment identifi doit avoir un nom unique. Ex. : <p id=intro>
Contenu du paragraphe intro </p>
60/100

Rle : indiquer un texte qui apparat dans une bulle lors du positionnement du curseur sur llment. Ex. : <p id=intro title=Ceci est une introduction>
Contenu du paragraphe intro </p>

10

23/01/2012

Attribut class

Attribut style

Rle : indiquer un style CSS appliquer ponctuellement sur llment. Ex. : <p id=intro title=Ceci est une introduction
class=paragraphe_justifie> Contenu du paragraphe intro, dont lalignement est justifi. </p>

Rle : dfinir localement un style appliquer sur llment. Le style ne sera plus connu en dehors de llment. Ex. : <p id=intro title=Ceci est une introduction
style=color:red> Contenu du paragraphe intro, dont la couleur est rouge. </p>

XHTML Codage des caractres et des couleurs

Liste non exhaustive

61/100

62/100

Plan XHTML

64/100

Entits de caractres

Entits de caractres (2)

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte
65/100

Rle : faire figurer dans un document un caractre non disponible sur le clavier. 2 type dentits : XHTML et Unicode Ex. :

Une liste non exhaustive ladresse :

http://www.usewisdom.com/computer/internet/htm l/chars.html

Symbole :&euro; :&#156; : &Eacute;

66/100

11

23/01/2012

Code des couleurs

Code des couleurs (2)

XHTML Insertion dimages

Une couleur peut tre rfrence par :

Visualisation de chaque couleur sur:

Un nom Un code hexadcimal (prcd de #) Un code RGB Nom : lavender Code hexadcimal : #E6E6FA Code RGB : rgb(230,230,250)
68/100

http://www.medsyn.fr/perso/g.perrin/webmaster/a stuces/16.htm

Ex. : la couleur lavande

Liste non exhaustive

67/100

Plan XHTML

70/100

Format dimages

Insertion dans un document

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte
71/100

3 formats sont utiliss:

GIF (Graphics Interface Format)

Icnes, dessins, bandeaux Possibilit danimation Possibilit de transparence Photographies Taille plus importante (rsolution meilleure possible, temps de chargement plus long) Format le plus rcent Photographie et graphiques Possibilit de transparence
72/100

JPEG (Joint Photographic Experts Group)

Balise <img /> A inclure dans un paragraphe, un bloc, une liste, etc. Attributs :

PNG (Portable Network Graphics)

src : adresse (chemin relatif ou URL) de limage afficher (attribut obligatoire) Chemin relatif : en partant du document, chemin parcourir dans larborescence des fichiers pour atteindre le fichier contenant limage.

12

23/01/2012

Insertion dans un document (2)

XHTML Insertion de tableaux

Plan XHTML

Attributs (suite)

alt : texte de substitution en cas dimpossibilit daffichage de limage. height : hauteur dans la fentre width : largeur dans la fentre Valeurs en :
Nombre de pixels Pourcentage par rapport aux dimensions de llment qui la contient

Liste non exhaustive

75/100

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte

73/100

Insertion dun tableau

Insertion dun tableau (2)

Insertion de cellules

Balise <table> </table> Attributs :

Attributs (suite) :

rules : choix des bordures internes :

border : largeur des bordures internes et externes (en pixels) width : largeur occupe par le tableau dans la fentre (en pixels ou %) frame : choix des bordures externes afficher:
Valeur void : pas de bordure Valeur above : bordure suprieure uniquement, etc.

Valeur void : pas de bordure Valeur rows : bordures horizontales uniquement, etc.

Insertion dune ligne avec la balise <tr> </tr> Insertion dune colonne dans une ligne

Ajout dune lgende :

Balise <caption> </caption> Premier lment placer dans llment table Apparat par dfaut au-dessus du tableau
78/100

Balise <th> </th> pour une cellule de titre Balise <td> </td> pour une cellule normale

76/100

77/100

13

23/01/2012

Exemple de tableau rgulier

<caption>Un tableau lmentaire</caption> <tr> <th>Titre Colonne 1</th><th>Titre Colonne 2</th><th>Titre Colonne 3</th> </tr> <tr> <td>Ligne Colonne 1</td><td>Ligne Colonne 2</td><td>Ligne Colonne 3</td> </tr> <tr> <td>Ligne Colonne 1</td><td>Ligne Colonne 2</td><td>Ligne Colonne 3</td> </tr> </table>

Groupement de lignes

Groupement de colonnes

Regrouper des lignes adjacentes pour :

Structurer son tableau en diffrentes parties. Appliquer un style diffrent chaque partie. <thead> </thead> : lignes places en en tte <tfoot> </tfoot> : lignes places en pied de tableau <tbody> </tbody> : un groupe de ligne (hors en-tte ou pied de tableau)
81/100

Balises :

Balise <colgroup> </colgroup> Regroupement de colonnes adjacentes identiques A mettre imprativement avant tbody, tfoot et thead. Attributs :

span : nombre de colonnes du groupe width : largeur commune de chaque colonne du groupe (en % par rapport au tableau ou en nombre de pixels)

79/100

80/100

Groupement de colonnes (2)

Fusion de colonnes

Fusion de lignes

Cration de sous-groupes lintrieur dun groupe dj dfini. Ajout de balises <col /> en tant quenfants de colgroup. Attributs :

span : nombre de colonnes du sous-groupe. width : largeur commune de chaque colonne du sous-groupe (en % par rapport au tableau ou en nombre de pixels).
83/100

Fusion de plusieurs cellules adjacentes dune mme ligne. Ajout de lattribut colspan un lment th ou td. Valeur : nombre de cellules fusionner ( partir de la gauche).

Fusion de plusieurs cellules adjacentes dune mme colonne. Ajout de lattribut rowspan un lment th ou td. Valeur : nombre de cellules fusionner ( partir du haut). Si vous avez spar votre tableau en thead, tbody et tfoot, le rowspan ne fonctionnera que dans les limites de chaque section.

82/100

84/100

14

23/01/2012

Imbrication de tableaux

XHTML Insertion de liens hypertexte

Plan XHTML

Une cellule dun tableau peut contenir un autre tableau. Un lment td ou th peut donc contenir un lment table. Liste non exhaustive

XHTML Principes gnraux XHTML lments de structuration XHTML Attributs XHTML Caractres et couleurs XHTML Images XHTML Tableaux XHTML Liens hypertexte

85/100

87/100

Forme gnrale dun lien

Lien vers un document distant

Lien vers un document local

Balise <a> </a> pouvant contenir :

Un texte. Une image. Href : adresse du document li (chemin relatif ou URL), avec ventuellement indication dune marque spcifique dans le document (ancre).

Attribut obligatoire:

Document li situ sur un serveur distant, localis laide de son URL. Valeur de href : URL du document li. Ex. : <a href=http://www.monsite.fr/index.html>
Voici le lien vers mon site </a>

Document li situ sur le mme support que le document (faisant gnralement partie du mme site web) Valeur de href : chemin relatif vers le document li. Chemin relatif : en partant du document, chemin parcourir dans larborescence des fichiers pour atteindre le document li.

88/100

89/100

90/100

15

23/01/2012

Lien vers un document local (2)

Lien vers une ancre spcifique

Lien vers une ancre spcifique (2)

Ex. :

<a href=ressources/article1.html> Voici un lien vers larticle n1, situ dans le rpertoire ressources </a>

Ancre : marque ou repre que lon place dans un document (invisible dans la fentre). galement appele signet. Placement de lancre avec la balise <a> </a> Attribut :

Insertion dun lien vers lancre :

URL ou chemin relatif du document li

id : nom permettant didentifier lancre

<h1 id=titre1> Titre 1 </h1>
93/100

<a href= #titre1> Voici un lien dans un document, vers lancre nomme titre1</a>

Ex. :

91/100

92/100

Lien provoquant lcriture dun message

Toujours avec la mme balise <a> </a> Valeur de href : mailto: suivi de ladresse lectronique du destinataire du message. Ex. :

<a href=mailto:bastienwagener@hotmail.com> Contactez-moi pour tout renseignement. </a>

94/100

16