Cours Web no1 - Pierre Senellart's Webpagepierre.senellart.com/.../ifips1web/cours1/cours1.pdfInternetetleWeb Généralités Qu’est-cequeleWeb(ouWorldWideWeb,Toile,WWW,W3)? I Systèmehypertextepublic:systèmecontenantdesdocumentsliés

Internet et le Web

Cours Web no1Introduction au World Wide Web et XHTML

Pierre Senellart ([email protected])

14 et 17 septembre 2007

P. Senellart (IFIPS) Web et XHTML 14/09/2007 1 / 37

Internet et le Web

Plan du cours

1 Internet et le Web

2 Le langage XHTML

3 XHTML et HTML

4 Rferences

5 Application


Internet et le Web Gnralits

Quest-ce que le Web (ou World Wide Web, Toile, WWW, W3) ?I Systme hypertexte public : systme contenant des documents lis

entre eux par des hyperliens permettant de passer automatiquementdun document lautre.

Diffrence entre le Web et Internet ?I Internet : rseau mondial dordinateurs permettant aux utilisateurs de

communiquer (courrier lectronique), de publier des informations(Web), de transfrer des donnes (FTP), de travailler distance (telnetet ssh). . .

I Web : un aspect dInternet.


Internet et le Web Architecture distribue

Le client (navigateur : Internet Explorer, Mozilla, Firefox. . .)demande au serveur des informationsaffiche des pages pour lutilisateur

Le serveur (Apache, Microsoft IIS. . .)reoit en permanence les requtes du clientrenvoie les documents correspondants

Le rseau Internetbas sur le protocole TCP/IPchaque machine dispose dun numro IP et dun nomassoci grce aux serveurs de nom du domaine (DNS)

ExempleNom de machine www.ifips.u-psud.frAdresse IP 129.175.250.38


Internet et le Web HTTP

Protocole Ensemble normalis de rgles dcrivant la manire detransmettre des informations, par exemple sur un rseaucomme Internet entre un client et un serveur.

HTTP HyperText Transfer Protocol, le plus utilis des protocolesde communication sur le World Wide Web. Permet unclient Web dindiquer quelle page il veut obtenir, et auserveur Web de lui rpondre en lui donnant cette page.


Internet et le Web Les URL

URL : Uniform Resource LocatorIdentifie lendroit o se trouve une ressource sur le Web.Dans le cas du Web, ressource = document ou fragment

http://lea-linux.org/reseau/secu/firewall.html #introprotocole machine rpertoire fichier fragment

Principaux protocoles utiliss dans les URL : ftp, http, https, news,nntp, mailto, telnet, etc.


http://lea-linux.org/reseau/secu/firewall.html#intro

Internet et le Web Clients Web

Navigateurs graphiquesI Internet Explorer (version 7 sortie fin 2006)I Moteur Gecko : Firefox, Mozilla, Camino, SeaMonkey (libres)I Opera (gratuit)I Moteur KHTML : Konqueror (libre), Safari

Navigateurs textuels : w3m, lynx, links (libres)Autres navigateurs : navigateurs auditifs, etc.Mais aussi : robots des moteurs de recherche, logiciels de traductionautomatique. . .

En thorie, tout site Web devrait tre test sur chacun de ces navigateurs,dans leurs diffrentes versions. Pour simplifier, on testera un site (aumoins) :

Avec des validateurs, pour vrifier que le code est correct.Avec 2 ou 3 des navigateurs les plus courants (p.ex. IE, Firefox,Opera).Si possible, avec un navigateur en mode texte.


Internet et le Web Clients Web

Navigateurs graphiquesI Internet Explorer (version 7 sortie fin 2006)I Moteur Gecko : Firefox, Mozilla, Camino, SeaMonkey (libres)I Opera (gratuit)I Moteur KHTML : Konqueror (libre), Safari

Navigateurs textuels : w3m, lynx, links (libres)Autres navigateurs : navigateurs auditifs, etc.Mais aussi : robots des moteurs de recherche, logiciels de traductionautomatique. . .

En thorie, tout site Web devrait tre test sur chacun de ces navigateurs,dans leurs diffrentes versions. Pour simplifier, on testera un site (aumoins) :

Avec des validateurs, pour vrifier que le code est correct.Avec 2 ou 3 des navigateurs les plus courants (p.ex. IE, Firefox,Opera).Si possible, avec un navigateur en mode texte.P. Senellart (IFIPS) Web et XHTML 14/09/2007 6 / 37

Internet et le Web Vocabulaire

Un serveur Web : hte sur lequel fonctionne un serveur HTTP. Il hbergeles ressources quil sert.

Un navigateur Web : logiciel client HTTP conu pour accder auxressources du Web. Sa fonction de base est de permettre laconsultation des documents HTML disponibles sur lesserveurs HTTP.

Une page Web : document destin tre consult avec un navigateurWeb. Elle est constitue dune ressource centrale etdventuelles ressources lies automatiquement.


Internet et le Web Vocabulaire

Un site Web : ensemble de pages Web et dventuelles autres ressources,lies dans une structure cohrente, publies par unpropritaire (une entreprise, une administration, uneassociation, un particulier, etc.) et hberges sur un ouplusieurs serveurs Web.

Un hbergeur Web : entreprise de services informatiques hbergeant(mettant en ligne) sur ses serveurs Web les ressourcesconstituant les sites Web de ses clients.

Hyperlien : lien logique, unidirectionnel (cod par une balise HTML)reliant une page Web une autre.

Surfer, Naviguer : parcourir le Web en suivant les hyperliens, de page Weben page Web.


Le langage XHTML

Plan du cours


2 Le langage XHTML

3 XHTML et HTML

4 Rferences

5 Application


Le langage XHTML eXtended HyperText Markup Language

Caractristiques :successeur de HTML (langage simple utilis pourgnrer des documents portables),conforme aux normes XML (eXtended MarkupLanguage),dvelopp par le W3C (World Wide Web Consortium)regroupant industriels (Microsoft, IBM, Apple. . . ) etacadmiques (INRIA, MIT. . . )

Principes :format ouvert : lecture possible dans des conditionscorrectes sans contrainte matrielle ou logicielledescription de la structure dun document, accent surlaccessibilit

Consquence :votre code doit pouvoir tre valid par un validateur tel quehttp://validator.w3.org/


http://validator.w3.org/

Le langage XHTML eXtended HyperText Markup Language

XHTML permet de dcrire la structure dun document. Ne paschercher dcrire la prsentation (ce sera fait avec CSS) !XHTML est un langage qui alterne texte et balises ( ou )

I Les balises dfinissent les proprits de chaque partie du document etsont analyses par le navigateur pour raliser la mise en page dudocument.

Les fichiers XHTMLI sont des fichiers texteI ont (conventionnellement) pour extension .htmlI sont structurs en deux parties principales : len-tte

... ) et le corps ... )En XHTML, les blancs (espace, tabulations, retours la ligne) sonten gnral quivalents et servent juste dlimiter mots, balises. . .Leur nombre na pas dimportance.


Le langage XHTML Les balises

Leur syntaxe est (balises ouvrante et fermante)contenu

ou (balise sans contenu)

o :balise mot cl associ une proprit particulire

contenu peut reprsenter du texte ou dautres balisesattributs reprsente les diffrents paramtres associs la balise,

sous la forme dune liste de nom="valeur" ounom=valeur , spars par des espaces

Les noms des balises et les types des attributs sont toujours crits enminuscule.Les balises sont ouvertes et refermes dans lordre ( et non ).Des rgles strictes dterminent quelles balises peuvent tre mises lintrieur de quelles balises.P. Senellart (IFIPS) Web et XHTML 14/09/2007 12 / 37

Le langage XHTML Les balises

Exemples
pour obtenir un saut de ligne (en posie, par exemple)coucou pour attribuer le titre coucou au documentcuicui pour mettre en emphase le texte cuicui (cela serarendu, le plus souvent, par une mise en italique).cuicui pour indiquer que le texte cuicui estimportant (cela sera rendu, le plus souvent, par une mise en gras). pour ajouter un commentaire, ici zut., dans ledocument, qui ne sera ni affich ni interprt par le navigateur.

Contre-exemplebouh


Le langage XHTML Structure dun document

La dclaration prcise la version d(X)HTMLutilise.La langue du document est prcise avec les deux attributs(redondants !) lang et xml:lang de la balise principale .


Le langage XHTML En-tte dun document

Len-tte du document est dlimite par les balise ... qui nadmet pas dattributs.Len-tte contient des mta-informations concernant le documenttelles que son titre, son encodage, les fichiers annexes, etc. Pourcommencer, on indiquera :

I Le jeu de caractres de la page, mettre tout au dbut de len-tte

I Le titre de la page, linformation la plus importante (et la seulerequise) ; celui-ci sera par exemple affich dans la barre de titre dunavigateur, il napparat pas dans la page elle-mme.

Le site des adorateurs de la vache


Le langage XHTML Jeux de caractres

Unicode : rpertoire de caractres, assignant chaque caractre, dequelque langue que ce soit, un nombre entier.

ExemplesA 65 949 233 1488

Jeu de caractres : moyen de reprsenter concrtement, par une suite de 0ou de 1, un caractre Unicode.

Exemples ()iso-8859-1 11101001 Seulement pour certains caractresutf-8 11000011 10101001utf-16 11101001 00000000

On utilisera uniquement utf-8.


Le langage XHTML Le corps dun document

Les balises ... dlimitent le corps du document.Le corps est structur en sections, paragraphes, listes, etc.Il existe 6 balises permettant de reprsenter les titres de sections, parimportance dcroissante :

I Titre de la pageI Titre de section principaleI Titre de sous-sectionI Titre de sous-sous-sectionI . . .

Les balises

...

permet de dlimiter un paragraphe. Tousles paragraphes de texte doivent tre baliss ainsi.La balise (horizontal rule) indique une sparation majeuredans le document (rendue par exemple graphiquement par une lignehorizontale).


Le langage XHTML Les listes

XTHML possde plusieurs balises permettant de prsenter le textesous forme de listes.On en distingue trois types :

I les listes non numrotes,

1 les listes numrotes,

les listes de dfinitions (ou lexiques)Ces listes peuvent tre embotes les unes lintrieur des autres.


Le langage XHTML Les listes

Les listes classiques :I Les listes non numrotes dlimites par les balises ...

(unordered list).I Les listes numrotes dlimites par les balises ...

(ordered list).I Tous les lments dune liste numrote ou non sont dlimits par les

balises ... (list item)

Les lexiques sont dlimits par les balises ... (definitionlist) et leurs entres par les balises ... (term) et ... (definition).

Exemples

un deux

lapin rongeur oreilles


Le langage XHTML Les tableaux

Les tableaux sont dlimits par les balises ... .Les balises ... (table row) dlimitent les lignes.Les balises ... (table data) dlimitent les cellules.Attention ! On dclare les lignes lintrieur du tableau, les cellules lintrieur des lignes.

Exemple

l1, c1 l1, c2 l2, c1 l2, c2

Contre-exemple

c1, l1 c1, l2


Le langage XHTML Les tableaux

Ajouter de la structure un tableau en :donnant une lgende au tableau avec les balises... juste aprs la balise ouvrante .

remplaant les ... qui contiennent des en-ttes (deligne, de colonne) par des ... (table header).


Le langage XHTML Les images

Pour insrer une image dans un document XHTML, on utilise labalise .

I Lattribut src permet de prciser o se trouve limage.I Lattribut alt permet de remplacer limage par un texte quand elle

nest pas disponible. Il est obligatoire de lutiliser, pour que tout agent(malvoyants, navigateur texte, incidents techniques, robots) nepouvant voir votre image puisse avoir un texte alternatif.

Les formats autoriss sont :I Le JPEG (.jpg), un format adapt aux photosI Le GIF (.gif) et le PNG (.png), des formats adapts aux autres types

dimage ; le format GIF permet davoir des images animes ( utiliseravec parcimonie !), le PNG est utiliser sinon (transparence,profondeur de couleurs. . .).


Le langage XHTML Les liens

Ce qui diffrencie une page Web (page HyperTexte) dun banaldocument : ce sont les liens !Ils sont introduits par la balise ... .En cliquant sur un lien, on peut se dplacer vers :

I un autre serveur ou un fichier du mme serveurI une autre partie du mme document

Reprage dun hyperlien (texte ou graphique) dans un navigateur :I le curseur change de forme en passant sur le lienI le texte est en couleurs et soulign (la couleur change si le lien a dj

t visit)I limage est encadre

(mais tout cela est paramtrable avec CSS).


Le langage XHTML Les liens

Pour faire un lien, on utilise lattribut href de la balise dont lecontenu formera le lien :

Bioinformatique

Les ancres servent atteindre un endroit prcis dans le document.I On commence par dfinir les ancres, soit sur une balise existant dj

grce lattribut id , soit avec un :

Tutorials

I Ensuite, on fait le lien avec cette ancre.

tutorialstutorials


XHTML et HTML

Plan du cours


2 Le langage XHTML

3 XHTML et HTML

4 Rferences

5 Application


XHTML et HTML HTML

HyperText Markup LanguageDernire version : HTML 4.01Dcrit par un formalisme trs compliqu (SGML)En pratique : pages Web ne respectent pas ce formalisme =navigateurs ne respectent pas ce formalisme = soupe de balises !


XHTML et HTML Principales diffrences

Les balises sans contenus
, scrivent
en HTML.Certaines balises peuvent ne pas tre refermes( un deux ).Les valeurs des attributs peuvent ne pas tre entre guillemets( ).Les noms des balises et des attributs sont insensibles la casse( ).

}

Pas de xmlns , pas de xml:lang .Et quelques autres petites subtilits. . .


XHTML et HTML Avantages respectifs

Avantages de HTML 4.01Meilleur support par les navigateurs (Internet Explorer 6/7comprennent mal XHTML).Moins de contraintes. . .

Avantages de XHTML 1.0Plus de contraintes. . . (donc plus simple !).Syntaxe claire, sans ambigut.Familiarit avec XML, utile dans dautres contextes.Facilit dutilisation dans des contextes XML (p.ex. XSLT).


XHTML et HTML Rgles de compatibilit respecter

Thoriquement,

et

sont synonymes en XML, doncen XHTML. En pratique, on utilisera la notation uniquement pour les balises nayant jamais de contenu (p.ex.
, . . .).Thoriquement,
et
sont synonymes. En pratique, onutilisera toujours
.Thoriquement, un document XHTML peut commencer par une ligne . En pratique, onlomettra.cf. http://www.w3.org/TR/xhtml1/#guidelinesOn pourra utiliserhttp://qa-dev.w3.org/~bjoern/appendix-c/validator/ pourvrifier le respect de ces quelques rgles.


http://www.w3.org/TR/xhtml1/#guidelineshttp://qa-dev.w3.org/~bjoern/appendix-c/validator/

Rferences

Plan du cours


2 Le langage XHTML

3 XHTML et HTML

4 Rferences

5 Application


Rferences

Spcification de XHTML 1.0http://www.w3.org/TR/xhtml1/

Spcification de XML 1.0http://www.w3.org/TR/REC-xml/

Spcification de HTML 4.01http://www.w3.org/TR/REC-html40/

HTML et XHTML : La Rfrence, OReillyhttp://www.tuteurs.ens.fr/internet/


http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/REC-xml/http://www.w3.org/TR/REC-html40/http://www.tuteurs.ens.fr/internet/

Application

Plan du cours


2 Le langage XHTML

3 XHTML et HTML

4 Rferences

5 Application


Application Premiers pas

Allumez lordinateur et connectez-vous.Lancez le navigateur de votre choix.Allez sur le site du LRI : http://www.lri.fr/

I regardez le source de la page principaleAllez sur votre site prfr (ou http://www.w3.org/MarkUp/)

I regardez le sourceI comparez

Remarques ?


http://www.lri.fr/http://www.w3.org/MarkUp/

Application Premiers pas

Ouvrez un diteur de texteCrez la page donne en modleEnregistrez la sous le nom essai.htmlValidez laide de http://validator.w3.org/


http://validator.w3.org/

Application Listes

Rajoutez dans votre fichier essai.htmldans la rubrique Exemples :

I une liste non-numrote de 4 paysI pour chaque pays, une liste numrote de 2 villesI une liste numrote de 2 fruitsI pour chaque fruit, une liste non-numrote de 2 prix possibles au kilo

une rubrique Annexe, contenant un lexique de 5 balises dfinies depuisle dbut du cours.Validez !


Application Table

Rajoutez dans la rubrique Exemples de votre fichier essai.html unesous-rubrique contenant la table de multiplication de 1 4 (avec lgende).Validez !


Application Image et liens

Insrez une image la fin de essai.html pointant vershttp://pierre.senellart.com/ifips.jpg. Ne pas oubliez untexte alternatif appropri.Enregistrez ce fichier image dans le mme rpertoire que essai.html etinsrez nouveau une image pointant vers ce fichier local.Transformez cette image en lien pointant vershttp://www.ifips.u-psud.fr/.Ajoutez une ancre la rubrique Annexe, et un lien vers cette ancre autout dbut du document.


http://pierre.senellart.com/ifips.jpghttp://www.ifips.u-psud.fr/

Internet et le WebGnralitsArchitecture distribueHTTPLes URLClients WebVocabulaire

Le langage XHTMLeXtended HyperText Markup LanguageLes balisesStructure d'un documentEn-tte d'un documentJeux de caractresLe corps d'un documentLes listesLes tableauxLes imagesLes liens

XHTML et HTMLHTMLPrincipales diffrencesAvantages respectifsRgles de compatibilit respecter

RferencesApplicationPremiers pasPremire pageListesTableImage et liens

Documents

Cours Web no1 - Pierre Senellart's Webpagepierre.senellart.com/.../ifips1web/cours1/cours1.pdfInternetetleWeb Généralités Qu’est-cequeleWeb(ouWorldWideWeb,Toile,WWW,W3)? I Systèmehypertextepublic:systèmecontenantdesdocumentsliés