World Wide Web

M1 Architecture de l’Information
Remise à niveau en informatique
Lionel Médini
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Objectifs des cours et des TP (partie Web)

 Découvrir ce qu’est le Web et comment ça marche
 environnement réseau
 mécanismes de base du Web
 Être capable de
 créer une page Web simple
 langage XHTML
 mettre en forme une page ou un ensemble de pages
 langage CSS niveaux 1 et 2
 rajouter des contenus dynamiques dans une page
 scripting côté client
 créer un site Web basique
 installation d’un serveur
 publication de contenus
 scripting côté serveur
Master AI – 2012-2013 – Remise à niveau World Wide Web 2
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

World Wide Web

 Principe original : accéder à des documents textuels

 situés sur des machines accessibles par Internet
 reliés entre eux par un mécanisme de lien « hypertexte »
 Actuellement : servir des ressources
 De différentes natures : texte, image, son, vidéo, contenu
applicatif…
 Hypermédia
 Interactives
 Permettant à l’utilisateur d’accéder à un service donné :
rechercher de l’information, acheter un objet, accéder à ses
mails, consulter ses comptes en banque…
 Nombreuses évolutions techniques
Master AI – 2012-2013 – Remise à niveau World Wide Web 3
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Genèse du Web : la notion d’hypertexte

 Principe
 S’abstraire de l’aspect linéaire du document textuel
 Mécanisme intellectuel permettant le cheminement d’une information
à une autre  navigation, butinage, transclusion
 Historique
 1945 : invention de la notion d’hypertexte
 Vannevar Bush, As We may think, Atlantic Monthly, 1945
 1965 : invention du terme d’hypertexte
 Ted Nelson, projet Xanadu
 Années 1960 : premier système hypertexte fonctionnel
 NLS (oNLine System), Douglas Englebart
 1987-2004 : diffusion du logiciel HyperCard
 Programme et environnement graphique de programmation, créé par
Bill Atkinson pour Mac OS, livré avec les Mac
 1987 : première conférence HyperText
 Sponsorisée par l’ACM
Master AI – 2012-2013 – Remise à niveau World Wide Web 4
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Naissance du Web (1989-1991)

 Mars 89 : projet de création d’un hypertexte documentaire distribué
sur le réseau du CERN
 Origine : Tim Berners-Lee, puis Robert Cailliau (1990)
 Choix des technologies TCP/IP et ouverture de la première connexion
du CERN avec Internet
 Mise au point des 3 technologies de base du Web : URL, HTML et
HTTP
 Septembre 90 : 1er site Web fonctionnel (mode texte)
 1er serveur Web : [Link]
 1er navigateur Web : WorldWideWeb (rebaptisé
plus tard Nexus), développé en Objective C
 Août 1991 : publication du projet
WorldWideWeb dans un message
sur UseNet
Le premier serveur Web,
 Décembre 91 : démonstration publique
un NeXT Cube
à la conférence Hypertext'91 (San Antonio) (source : Wikipédia)
Master AI – 2012-2013 – Remise à niveau World Wide Web 5
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Historique du Web
 1993 : Mosaic : premier navigateur « grand public » Nombre de sites référencés
 Marc Andreessen, NCSA : plateformes X, puis Mac et Windows
 affichage d’images (GIF et XBM) dans les pages Web 1990 : 1 (CERN)
 prise en charge de formulaires interactifs
 01/10/1994 : création du W3C 1991 : premier site hors
 à l’initiative du CERN (Genève) et du MIT (Boston) d’Europe (SLAC, Stanford)
 président : Tim Berners-Lee
 but : standardisation et développement du Web 1992 : 26
 1994 : Apparition des navigateurs privés Juin 1993 : 130
 M. Andreessen crée Netscape Communications Corp.
 1995 : Microsoft lance la « guerre des navigateurs » Juin 1994 : 2738
 Apparition d’Internet Explorer pour Windows 95
 1995 : Altavista : premier « gros » moteur de recherche Juin 1995 : 23 500
 1996 : Navigateur Opera
Janvier 1996 : ~ 100 000
 1998 : Apparition de Google
 2003 : Apple lance Safari Avril 1997 : > 1 million
 2004 : Première version de Mozilla Firefox
 2004 : première conférence « Web 2.0 » Février 2000 : > 11 millions
 2008 : Google lance Google Chrome
 Actuellement : explosion du Web mobile Février 2007 : > 100 millions
 En cours de développement : Web sémantique, de données, des
objets… Février 2009 : ~ 216 millions

Master AI – 2012-2013 – Remise à niveau World Wide Web 6

 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Le Web : première définition

 World Wide Web (WWW, Toile)

 Définition
 ensemble de données disponibles sur les serveurs accessibles
par Internet
 pouvant être visualisées et/ou utilisées avec un navigateur Web
 regroupées sous forme de pages et de sites
 Rappel : Web  Internet
 Internet = support de communication
 Web = une partie des contenus circulant sur l’Internet

Master AI – 2012-2013 – Remise à niveau World Wide Web 7

 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Page Web
 Une page Web, c’est
 un document multimédia
 textes, images, vidéo…
 possibilité d’interaction
 liens hypertextes
 décrit élément par élément
 titre, morceaux de texte, images...
 avec un langage de description
 HTML (1992) ou XHTML (2002)
 stocké dans un fichier
 .html (ou .htm, .xhtml)
 Une page Web
 est calculée et affichée par un navigateur
 est localisée sur Internet à l’aide d’une adresse (URL)
 permet d’accéder à d’autres pages en suivant des liens
Master AI – 2012-2013 – Remise à niveau World Wide Web 8
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Site Web
 Regroupement de pages Web
 autour d’une thématique commune
 reliées entre elles par des liens hypertextes
 émanant d’une même entité (organisation, entreprise, particulier…)
 accessibles à partir d’une page d’accueil commune
 accessibles à partir d’une URL de base commune
 en général, localisées sur un même serveur
 Organisation hiérarchique
 structure sous forme d’arborescence de dossiers et de fichiers (comme
un disque local)
 permet de définir des chemins relatifs
 exceptions (de plus en plus fréquentes) : pages générées
dynamiquement
 Liens vers et à partir d’autres sites
 permettent de naviguer d’un site à un autre
 composent la « toile » mondiale (World Wide Web)
Master AI – 2012-2013 – Remise à niveau World Wide Web 9
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Le « Web 2.0 »
 Principe du Web « classique »
 ce sont les organisations qui détiennent des sites qui décident de l’information
qui y figure
 Communication de type « one-to-many » (= diffusion)
 Principe du « Web 2.0 »
 donner le contrôle de l’information aux utilisateurs
 faire émerger des « réseaux sociaux »
 chacun peut déposer des contenus
 pour donner son avis sur un sujet donné (blogs)
 pour partager ses documents (images, vidéos…)
 pour étiqueter (« tagger ») des contenus existants
 Aspects techniques
outils (protocoles, clients, serveurs) identiques à ceux du Web classique
 nécessite plus de puissance de calcul (pages dynamiques)
 nécessite plus d’espace de stockage (contenus envoyés par les utilisateurs)
 Exemples de sites « Web 2.0 »
 Wikipédia, [Link], Technorati, Flickr, Picasa Web album, Dailymotion,
YouTube, Kartoo…
Master AI – 2012-2013 – Remise à niveau World Wide Web 10
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Popularité du Web

 Pour l’internaute
 Accessibilité « world-wide »
 Interfaces graphiques conviviales
 Interactivité et richesse des services
 Grande quantité d'informations disponibles (Web « 1.0 »)
 Possibilité de contribuer en tant qu’utilisateur (Web « 2.0 »)
 Pour le développeur
 Simplicité des développements (technologies de base…)
 Liens avec les outils applicatifs installés sur le serveur (shell,
Perl, Java…)
 Indépendance par rapport aux plateformes des clients

Master AI – 2012-2013 – Remise à niveau World Wide Web 11

 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Usages du Web (2008)

 Consultation simple (Web 1.0)
 Navigation
 Recherche d’informations
 Divertissement
 TV, radio, musique, vidéo en ligne
 Information
 Jeux
 Communication
 Asynchrone (Webmail)
 Synchrone (Web chat, Webconférence)
 Web 2.0
 Travail collaboratif : partage / édition de documents sur des intranets
 Autres sites participatif (blogs…)
 Réseaux sociaux
 Consommation de services
 Sites marchands, enchères
 Autres services en ligne : banque, administration…

Sources : Journal du Net ([Link]

Ipsos ([Link] Carrefour Numérique ([Link]

Master AI – 2012-2013 – Remise à niveau World Wide Web 12

 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Répartition des clients (2011)

Internet
Source Firefox Chrome Safari Opera * Mobile Unknown
Explorer
 Fixes Net Applications 52.7% 21.5% 13.5% 8.1% 2.9% 5.5%
StatCounter 42.5% 28.0% 22.1% 5.2% 1.7% 7.0%
W3Counter 35.6% 27.7% 19.6% 6.4% 2.3% 8.4%
Wikimedia * 36.8% 25.0% 16.8% 10.8% 4.2% 9.8%

(*) certaines sources comptent deux fois les navigateurs mobiles

 Source : [Link]

 Source : [Link]
Master AI – 2012-2013 – Remise à niveau World Wide Web 13
 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Évolution des clients (2012)

 Google Chrome rattrape

Microsoft IE et double
Mozilla Firefox

Source :
[Link]
browser

Master AI – 2012-2013 – Remise à niveau World Wide Web 14

 1. Introduction 1. Objectifs du cours
2. Aspects techniques 2. Historique
3. Langage HTML 3. Principes généraux
4. Conclusion 4. Usages

Répartition des clients (2012)

 Mobiles

 Source : [Link]
Master AI – 2012-2013 – Remise à niveau World Wide Web 15
 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Les 3 mécanismes de base du Web

 URL
 Le Web permet d’accéder à un ensemble de ressources
 Le mécanisme de localisation peut faire appel au protocole DNS
 HTTP
 Protocole de niveau applicatif
 Paradigme client-serveur
 Protocole sans état (pas de « mémoire » des transactions
précédentes)
 HTML
 Langage de description de « pages Web »
 Texte, images et autres objets
 Liens hypermédias entre les pages
 Programmation déclarative

Master AI – 2012-2013 – Remise à niveau World Wide Web 16

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Fonctionnement du Web en un schéma

Internet Serveur Web

Le nom duLe serveur

serveur dans
trouvel’URL
(sur un disque)
ou calcule
est transformé (dynamiquement)
en adresse IP
HTML la ressource
(résolution DNS). demandée.
Le serveur Web est identifié.
HTTP Le serveur
Une requêterenvoie
HTTP la estpage
adressée
(X)HTML
au
Un internaute (utilisateur) correspondant
serveur via Internet
à la requête
(routage).
au client
utilise un client Web (navigateur) par le même moyen.
Le client
pour interprète
identifie
obtenir unelalapage
pagepar (page Web)
ressource
Web
son et l’affiche
suradresse
un à distant…
(URL).
serveur l’utilisateur

[Link]

Autre
client Web
Navigateur = Client Web Ressource demandée

Master AI – 2012-2013 – Remise à niveau World Wide Web 17

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Les forces en présence

Côté serveur Côté client
 Serveur Web  Client Web
 attend les requêtes HTTP et y répond  identifient les serveurs sur Internet
 deux façons de fournir des ressources  demandent les ressources aux serveurs
 statique : le serveur renvoie les  affichent les ressources aux utilisateurs
ressources dont il dispose
 peuvent effectuer des traitements
 dynamique : la ressource est générée à complémentaires (scripts, plugins)
la réception de la requête
 Machines clientes
 Machine serveur
 environnements variables
 environnement contrôlé
 pas d’accès possible aux autres logiciels
 doit être dimensionnée en fonction de la
installés (sauf plugins)
charge attendue
 remarque : on parle de serveur Web  Utilisateurs
pour désigner la machine qui héberge le  « utilisateurs finaux »
programme serveur (abus de langage)
 Identifiés ou non
 Utilisateurs  peuvent correspondre à des « profils »
 Webmaster : administration modélisés
 Web designer : conception et réalisation  objectifs : utiliser le service offert par
des contenus l’application Web
Master AI – 2012-2013 – Remise à niveau World Wide Web 18
 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Pages générées dynamiquement

 Le serveur doit calculer la ressource avant de la renvoyer
 en exécutant des « modules » (programmes)
 sécurité, scripting, redirection…
 avec un langage de programmation côté serveur
 PHP, ASP, Java, Python…
 en fonction des données
 indiquées par le client (formulaires, cookies)
 présentes sur le serveur (fichiers de données, pages statiques)
 présentes sur d’autres serveurs (web, bases de données, mail…)
 le serveur considéré est le client d’autres serveurs
 Le mécanisme de requête/réponse reste le même Serveur
infos
Serveur Météo
Client Serveur
1- demande page
Serveur
Publicité
3- envoi
2- accès aux …
autres serveurs, Informations
calcul de la page client sur base
de données locale

Master AI – 2012-2013 – Remise à niveau World Wide Web 19

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Comment choisir une solution logicielle ?

 En fonction
 du type d’application visé
 de ses préférences (langage / environnement de développement)
 Exemples
 Site statique
 Serveur « simple » : Apache, [Link]
 Application « simple » (scripting côté serveur)
 Serveur simple + langage de scripts (PHP, Servlets/JSP…)
 Site éditorial
 Articles simples : Drupal, PHP nuke, SPIP, CMS Made Simple
 Wiki : WikiMedia, DokuWiki
 Blog : WordPress, Over-Blog
 Application complexe
 Système de gestion de contenus (CMS) + « frameworks Web »
 PHP : Joomla!, Moodle
 Java : OpenCMS, Alfresco
 Python : Zope, Plone
 Ruby on Rails : BrowserCMS

Master AI – 2012-2013 – Remise à niveau World Wide Web 20

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Navigateur Web (browser, butineur)

 Fonctionnalités
 de base Fichier HTML Navigateur Utilisateur
<html>
<head>
 client HTTP(S) <title>Universit&eacute
; Claude Bernard Lyon
1</title>
 moteur de rendu HTML <meta http-
equiv="Content-Type"

 moteur de scripts content="text/html;

charset=iso-8859-1">
Calcul
</head>

 extensions </html>

Présentation
Description
 support de plugins du document à l’utilisateur
 « cosmétiques »
 historique, signets, onglets…
 Offre logicielle
 Mozilla Firefox, Google Chrome/Chromium, Opera, Apple Safari, Microsoft
Internet Explorer

Master AI – 2012-2013 – Remise à niveau World Wide Web 21

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Interpréteurs de scripts
 Scripts
 éléments de programmes (identifiés par l’élément <script>)
 à l’intérieur des pages HTML ou dans des fichiers séparés
 écrits dans des langages de programmation spécifiques (JavaScript,
VBScript)
 exécutés (interprétés) par le navigateur de l’ordinateur client
 soumis à des restrictions de sécurité (pas d’accès aux fichiers du client,
pas d’exécution d’autres programmes…)
 Exemples
 gestion du navigateur (lancer des fenêtres, créer des info-bulles…)
 gestion de la navigation (vérifier qu’un formulaire est bien rempli avant
de l’envoyer…)
 documents plus interactifs et dynamiques qu’avec (X)HTML seul
 Il est possible – mais pas recommandé – de désactiver l’interpréteur
Javascript du navigateur
Master AI – 2012-2013 – Remise à niveau World Wide Web 22
 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Exécution d’applets Java

 Java
 langage de programmation qui peut
fonctionner sur tout type de machine La page L’applet
(matériels et systèmes d’exploitation Web est s’exécute
différents) calculée et
 doit être installé sur la machine avant de présentée
pouvoir exécuter des programmes
 Applet
 élément de programme Java
 restrictions de sécurité au niveau des
fonctionnalités autorisées Serveur
Fichier
 Utilisation HTML
 dans une page Web, on spécifie le nom de
l’applet à exécuter dans un élément <applet> Fichier
JAVA
 l’applet s’exécute dans une portion de la page
présentée à l’utilisateur

Master AI – 2012-2013 – Remise à niveau World Wide Web 23

 1. Introduction 1. Fonctionnement
2. Aspects techniques 2. Serveur Web
3. Langage HTML 3. Client Web
4. Conclusion

Plug-in
 Principe
 étendre les possibilités du navigateur pour présenter des éléments
HTML (décrits par l’élément <object>) non gérés par le navigateur
 le navigateur donne toute ou une portion de la page Web à un
programme « branché » (plug-in) qui prend en charge l’exécution ou
l’affichage (cf. applet Java)
 S’il n’est pas disponible, on peut en général le télécharger et l’installer
 Exemples
 Flash / Shockwave : documents multimédias
 Real Audio / Vidéo : sons ou vidéos
 Acrobat : documents PDF
Client Serveur
Fichier HTML
Oh ! le plug in…
+ fichier flash, PDF...
affichage géré par le plug-in
affichage géré par le navigateur

Master AI – 2012-2013 – Remise à niveau World Wide Web 24

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Donnée
 valeur associée à un type de données

 Décrite par des caractéristiques de forme

 Indépendante de son interprétation : donnée « brute »
 Élément d’information
 ensemble de données faisant « sens »

 On parle aussi de « grains d’information »

 Document
 regroupement cohérent d’éléments d’information

 Autour d’une thématique commune

 Selon une structure donnée

Master AI – 2012-2013 – Remise à niveau World Wide Web 25

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Information structurée : bases de données
 Éléments d’information stockés séparément
 Accès par requêtes
 Traitements facilités
 Information non structurée : corpus documentaires
 Éléments d’information stockés sous forme de textes
 Accès par recherche d’information
 Traitements complexes
 Information semi-structurée : langages à balises
 Éléments d’information stockés dans des documents
 Permet les deux types d’accès et de traitements

Master AI – 2012-2013 – Remise à niveau World Wide Web 26

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Balise : signe marquant une position particulière
 Signe = élément d’information
 Marquer = permettre la distinction
 Ex : fusée de détresse, signal radio, « tag » HTML
 Position = par rapport à l’espace considéré
 Ex : espace 3D (avion), 2D (bateau), 1D (document)
 Particulière = en général, la position d’un élément de l’espace
qu’on cherche à repérer
 Ex : aéroport, bateau, élément d’information
 Type d’information facilement repérable permettant
d’identifier d’autres éléments informationnels
(i.e. « méta-information »)

Master AI – 2012-2013 – Remise à niveau World Wide Web 27

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Balisage documentaire : utilisation de balises
 Pour marquer des points précis d’un document
 Pour marquer des zones (segments) de document
 Balisage de début et de fin de zone
 Pour structurer le document
 Utilisation de plusieurs types de balises
 En fonction du type d’élément à marquer
 En fonction du type de marquage (point, début, fin)
 Langage à balises : langage de description de
documents utilisant ces techniques de balisage
 Élément : une balise et son contenu

Master AI – 2012-2013 – Remise à niveau World Wide Web 28

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Quelques langages à balises

 Langages de balisage procédural : permettent de décrire la
mise en forme (formatage) d’un document
 Ex : PS, RTF, TeX, HTML
 Langages de balisage descriptif : se contentent de décrire
les données, sans but de traitement
 Ex : RDF, OWL, MathML
 Méta-langages de balisage : permettent de définir des
langages de balisage
 Ex : SGML, XML

Master AI – 2012-2013 – Remise à niveau World Wide Web 29

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Le langage Postscript
%!PS-Adobe-3.0
%%Title: Microsoft Word - %%BeginResource: file %%IncludeFont: Courier
Document1 … …
%%Creator: [Link] %%EndResource (Courier) cvn /Type1
Version 4.0 … …
%%CreationDate: 03/02/02 %%EndProlog (Essai impression)S
10:47:00 %%BeginSetup …
… … (%%[ Page: 1 ]%%) =
%%EndComments %%BeginFeature: *PageSize %%PageTrailer
%%BeginProlog A4 %%Trailer
%%BeginProcSet: … %%DocumentNeededFonts:
Pscript_Res_Emul 1.0 0 %%EndFeature %%DocumentSuppliedFonts:
/defineresource … /Pscript_Win_Driver /ProcSet
where{pop}{userdict %%EndSetup findresource dup /terminate get exec
begin/defineresource{userdict/R %%Page: 1 1 Pscript_Win_Compat dup /terminate
esources 2 %%BeginPageSetup get exec
… … %%Pages: 1
}ifelse}bind readonly def %%EndPageSetup (%%[ LastPage ]%%) =
end}ifelse … %%EOF
%%EndProcSet

Master AI – 2012-2013 – Remise à niveau World Wide Web 30

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Le langage RTF
{\rtf1\adeflang1025\ansi\ansicpg1252\uc1\adeff0\deff0\stshfdbch0\stshfloch0\stshfhich0\stshfbi0\deflan
g1036\deflangfe1036{\fonttbl{\f0\froman\fcharset0\fprq2{\*\panose 02020603050405020304}Times
New Roman;}{\f36\froman\fcharset238\fprq2 Times New Roman CE;}{\f37\froman\fcharset204\fprq2
Times New Roman Cyr;}…
{\f43\froman\fcharset186\fprq2 Times New Roman Baltic;}
{\f44\froman\fcharset163\fprq2 Times New Roman Vietnamese);}}
{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red2
55\green0\blue255; …;}
{\stylesheet{\qj \li0\ri0\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 …;} …
{\*\rsidtbl \rsid4480262\rsid8274010\rsid11750514\rsid15757863}
{\*\generator Microsoft Word 10.0.2627;}{\info{\title Bonjour}{\author Medini}
{\operator Medini}{\creatim\yr2004\mo2\dy25\min49}…{\*\company UCBL}…
\paperw11906\paperh16838\margl1417\margr1417\margt1417\margb1417\ltrsect \deftab708\widowctrl
…
{\rtlch \af0 \ltrch \insrsid8274010 Bonjour}
{\rtlch \af0 \ltrch \insrsid15757863 \par }}

Master AI – 2012-2013 –PCI

Remise – niveau
2010 à CM 03 World Wide Web 31
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Les langages dédiés au Web

 Historique 1/3
 1960-1986 : SGML (norme ISO) et DTD
 1989 : ODA (norme ISO, concurrent de SGML)
 Fin des années 80 : apparition/essor du web
 1992-1997 : HTML (versions 1.0 -> 4.01)
 Octobre 1994 : création du World Wide Web Consortium (W3C)
: [Link]
 Décembre 1996 : CSS Level 1 (fonctionnalités de base, rév.
01/99)
 Février 1998 : XML version 1.0
 Mai 1998 : CSS Level 2 (fonctionnalités supplémentaires, rév.
04/08)
 Octobre 1998 DOM Level 1 (supporte XML et HTML)
 Décembre 1999 : XHTML 1.0
Master AI – 2012-2013 – Remise à niveau World Wide Web 32
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Les langages dédiés au Web

 Historique 2/3
 1999 : RDF et RDF-Schema 1.0 (rév. 2004)
 Novembre 2000 : DOM Level 2 (support CSS & namespaces
XML)
 Mai 2001 : schémas XML 1.0
 Mai 2001 : XHTML 1.1 (module-based)
 Juillet 2001 : SVG 1.0
 Novembre 2001 : XSL 1.0
 Janvier 2003 : SVG 1.1
 Février 2004 : XML 1.1 (rév. août 2006 )
 Février 2004 : OWL 1.0
 Avril 2004 : DOM Level 3 Core
 Octobre 2004 : XML Schema (2e edition)
Master AI – 2012-2013 – Remise à niveau World Wide Web 33
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Les langages dédiés au Web

 Historique 3/3
 Janvier 2007 : XQuery 1.0
 Janvier 2007 : XPath 2.0
 Janvier 2007 : XSLT 2.0
 Avril 2007 : SOAP 1.2
 Juin 2007 : WSDL 2.0
 Juillet 2008 : XHTML 1.1 Basic
 Octobre 2008 : XHTML Modularization 1.1
 Septembre 2009 : CSS level 2.1 (normalisation de
fonctionnalités existantes)
 Septembre 2009 : HTML 5 (editor draft)
 Restent en développement : CSS L3, DOM L3, XHTML 2.0…
Master AI – 2012-2013 – Remise à niveau World Wide Web 34
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Les langages dédiés au Web

 Aperçu de quelques langages (source : W3C)

RDF-Schéma

OWL
Surcouches
RDF

SOAP/RPC
MathML
XHTML

SMIL
Applications

PICS

SVG
RDF
XSL

P3P
XML

XML
HTML

Applications
(DTD) SGML

SGML

 Autre version : [Link]

Master AI – 2012-2013 –PCI
Remise – niveau
2010 à CM 03 World Wide Web 35
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Introduction aux langages à balises

 Plus tout ce que vous ne trouverez pas sur le site du W3C

 EcmaScript, JavaScript
 TCP/IP
 Unicode
 …

Master AI – 2012-2013 – Remise à niveau World Wide Web 36

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Plusieurs façons de décrire un document

Description
Représenter un document
« par points »
–coordonnées
Ceci est du texte.
Ceci est du texte.
Ceci est du texte.
Ceci est du texte.
Ceci est du texte. –couleur

…
Document = titre + image + paragraphe Description
Titre = Texte + Position « par éléments »
Texte = "Le titre"
document
Position = Haut ET Centré
décomposé en
Paragraphe = Texte + Position
zones,
Texte = "Blablah… "
Position = Gauche puis zones
Image = Fichier + Position décrites en
Fichier = "[Link]" détaillant petit à
Position = ADroite Paragraphe petit les éléments

Master AI – 2012-2013 – Remise à niveau World Wide Web 37

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

HTML (HyperText Markup Language)

 Principe
 décrire des pages Web  programmation
déclarative
 dans des fichiers textuels  encodage
 sous forme d’un ensemble
d’éléments  arborescence
 en utilisant des balises  syntaxe, grammaire

Master AI – 2012-2013 – Remise à niveau World Wide Web 38

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

HTML (HyperText Markup Language)

 Balise ouvrante
 avant le contenu de l’élément <title>
 Balise fermante
 après le contenu de l’élément </title>
 Balise vide (balise d’élément vide)
 pas de contenu <hr />
 Nom de balise
 mot-clé simple spécifiant
le type d’élément à délimiter title, img, p...
 Attribut de balise
 « morceau d’information »
permettant de préciser un élément <a href="[Link]
 Toujours à l’intérieur de la balise ouvrante (ou vide)
 Ne fait pas partie du contenu de l’élément
 Structure : nom="valeur"

Master AI – 2012-2013 – Remise à niveau World Wide Web 39

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

HTML (HyperText Markup Language)

 Contenu d’un élément
 texte et/ou autres éléments entre une balise ouvrante et une balise
fermante
 Exemples
 <p>Un paragraphe...</p>
 <p>Un paragraphe avec un mot en <b>gras</b> (bold).</p>
 <p>Un paragraphe avec un<br/> saut de ligne</p>

Contenu
 Un élément est décrit par
 soit une balise ouvrante, un contenu et une balise fermante…
 …soit une balise vide
 Exemples
 <br />
 <img src="[Link]" alt="image de zèbre" />
 Un élément peut contenir d’autres éléments
 On parle de structure arborescente

Master AI – 2012-2013 – Remise à niveau World Wide Web 40

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

HTML (HyperText Markup Language)

 Entité
 Chaîne de caractères prédéfinie et fixe (constante)
 Possède un nom qui permet d’y faire référence
Caractères ISO Latin1 Noms ISO Noms Unicode Caractères
Noms ISO Noms Unicode Caractères agrave #224 à
Agrave #192 À … … …
Aacute #193 Á egrave #232 è
Acirc #194 Â … … …
Atilde #195 Ã igrave #236 ì
Auml #196 Ä … … …
Aring #197 Å ograve #242 ò
AElig #198 Æ … … …
Ccedil #199 Ç ugrave #249 ù
Egrave #200 È … … …
Eacute #201 É yuml #255 ÿ
… … … 1. Caractères de contrôle
Igrave #204 Ì amp #38 &
… … … apos #39 '
Ograve #210 Ò gt #62 >
… … … lt #60 <
Ugrave #217 Ù quot #34 "
… … … #91 [
Yacute #221 Ý #93 ]
 Utilisation : référence par son nom, précédé de ‘&’ et terminé par ‘;’
 Exemple : <nom>Lionel M&eacute;dini</nom>
Master AI – 2012-2013 – Remise à niveau World Wide Web 41
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Exemple de structuration arborescente

Prologue
<html>
Balise <head>
ouvrante <title>Merveilles du monde</title>
</head>

<body>
<p>Dans l’image ci-après
<img src="[Link]" alt="Image de zèbre" />
Élément nous présentons un zèbre vivant
avec dans la savane. html
contenu </p>
<!-- Fin zèbre début lion --> head body
Commentaire <p>Le lion n’est pas vraiment son ami.
<img src="[Link]" alt="Image de lion" /> title p p
Balise d’élément vide
(une seule balise)
</p>
</body> img img
</html>
Balise Attributs de l’élément Image
Arborescence
fermante

Master AI – 2012-2013 – Remise à niveau World Wide Web 42

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Structure générale d’un document XHTML

 Prologue  Corps
 Déclaration XML  Élément body
 Déclaration de DTD  dans html
 Élément racine  Commentaires
 Élément html  <!-- ... -->
 En-tête  n’importe où
 Élément head
Exercice
 dans html 1) Écrivez cette structure dans un fichier texte et
 Titre sauvegardez ce fichier ( « [Link] »)
2) Composez votre première page Web telle que :
 Élément title - le titre soit « Ma première page Web »
 dans head - le corps de la page contienne « Bonjour, le monde ! »
3) Enregistrez cette nouvelle page avec un autre nom
4) Ouvrez-la dans votre navigateur

Master AI – 2012-2013 – Remise à niveau World Wide Web 43

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

XHTML Strict et Transitionnel

 Transitionnal
 Les éléments de présentation de HTML sont encore autorisés
b, center, font, ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""[Link]
[Link]">
 Strict
 Séparation stricte du document XHTML de sa présentation 
utilisation de style CSS obligatoire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
 Déclaration d’espace de noms dans la balise ouvrante html
<html xmlns=“[Link] xml:lang=“fr”
lang=“fr”>
 Pour des débutants : XHTML strict + CSS

Master AI – 2012-2013 – Remise à niveau World Wide Web 44

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

En-tête : contenu de l’élément head

 Titre du document
 <title></title>

 Autre informations non affichées à l’écran, utilisées par le

navigateur, les moteurs, etc.
 <meta name="..." content="..." />
 <meta http-equiv="Refresh"
content="4" ; URL=[Link] />
 <meta name="author" content=""/>
 <meta name="Keywords" content="motcle1, motcle2,
motcle3"/>
 <meta name="language" content="fr"/>
 <base href="URL-de-base" />
 URL de base pour les URL relatives
 Styles
 <style />  inclure une feuille de style CSS dans la page
 <link />  lier le document à une ressourse externe
(typiquement, feuille de style)
 Scripts
 <script />  ajouter un script à la page

Master AI – 2012-2013 – Remise à niveau World Wide Web 45

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Corps

 Elément body
 Toutes les informations visualisables

 Structuration
 <p> ... </p>  paragraphe

 <h1> ... </h1>  titre de niveau 1

 ...
 <h6> ... </h6>  titre de niveau 6
 <hr />  ligne horizontale
 <br />  saut de ligne

Master AI – 2012-2013 – Remise à niveau World Wide Web 46

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Corps : exemple
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html>
<head>
<title>Le titre de la page</title>
</head>
<body>
<h1>Titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<hr /> <!-- Une ligne horizontale -->
<blockquote><p>Un autre paragraphe</p>
<p>Un autre paragraphe</p></blockquote>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<p>Un autre paragraphe</p>
</body>
</html>

Master AI – 2012-2013 – Remise à niveau World Wide Web 47

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Mise en évidence

 Emphase
 <em> … </em> (emphasis)

 Emphase forte
 <strong> … </strong>

 Exposants et indices
 ^… (superscript)
 _… (subscripted)

Master AI – 2012-2013 – Remise à niveau World Wide Web 48

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Extraits, citations et références

 Citer quelque chose : cite

 ... <cite>Discours de la méthode</cite> de
<cite>Descartes</cite> ...
 Citation courte : q
 Comme le disait <cite>Ronsard</cite> :
<q>Mignonne allons voir si la rose...</q>
 Citation longue : blockquote
 <h5><cite>Barbara</cite> de <cite>Jacques
Prévert</cite></h5>
<blockquote cite="[Link]
<p>Rappelle-toi Barbara</p>
...
<p>Dont il ne reste rien.</p>
</blockquote>

Master AI – 2012-2013 – Remise à niveau World Wide Web 49

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Autres éléments de structuration

 Texte spécial
 <pre> … </pre> (preformatted text)
 <code> … </code>
 pour mettre du texte représentant du code informatique (par
exemple du XML !)
 Indications sur le contenu textuel
 Utilisation dans une feuille de style pour mettre en forme
 defn (définition)
 acronym (acronyme)
 abbr (abbréviation)
 Utilisation par des logiciels pour connaître la sémantique du
contenu textuel (utilisé ?)
 Principe du web sémantique : généralisation, extériorisation des
vocabulaires, etc.

Master AI – 2012-2013 – Remise à niveau World Wide Web 50

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Images
 Principe
 Un élément image (img) est lié à un fichier image (attribut src)
 Une image est une ressource externe, désignée par une URL, qui doit
être chargée par le navigateur
 Exemple
 <img src="[Link]
alt="logo de l’UCBL"
width="40" height="30" lang="fr" />
 Images cliquables
 <img src="[Link]" alt="Canada" usemap="#mymap"
width="50" height="100" />
<map id="mymap">
<area href="[Link]" alt="Route 20"
shape="rect" coords="0,0,49,49" />
<area href="[Link]" alt="Route 35"
shape="rect" coords="0,49,49,99" />
</map>

Master AI – 2012-2013 – Remise à niveau World Wide Web 51

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Images : exemple
...
<img src="[Link]"
alt="L'eclipse du 12 janvier 1997"
width="120" />
<br />
<img src ="[Link]"
alt ="L'eclipse du 30 février 1986"
width="150" /> <!-- erreur ! -->
<br />
<img src ="[Link]
alt ="Soleil couchant"
height="100"/>
...

 Remarque importante
 il faut trois ressources pour afficher cette page
 Fichier source HTML
 Fichier [Link] (chemin local : dans le même dossier que le fichier source
HTML)
 Fichier [Link] (disponible sur la machine [Link], en
suivant le chemin /cim2/SAXaussois/[Link]
 trois requêtes HTTP en tout pour l’affichage

Master AI – 2012-2013 – Remise à niveau World Wide Web 52

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Listes
 Principe général
 Un élément liste contient des élément items

 Listes classiques
 Liste à puces
 <ul> … </ul> (unordered list)
 Liste ordonnée
 <ol> … </ol> (ordered list)
 Item de list
 <li> … </li>
 Liste de définitions
 Conteneur
 <dl> … </dl>
 Terme de définition
 <dt> … </dt>
 Description de définition (= définition elle-même)
 <dd> … </dd>

Master AI – 2012-2013 – Remise à niveau World Wide Web 53

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Listes : exemple
...
<ul type="square">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
<ol start="4">
<li>Quatre</li>
<li>Cinq</li>
<li>Six</li>
</ol>
<dl>
<dt>Sept</dt>
<dd>Le septième chiffre</dd>
<dt>Huit</dt>
<dd>Le huitième chiffre</dd>
</dl>
...

Master AI – 2012-2013 – Remise à niveau World Wide Web 54

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Liens hypertextes

 Principe
 une ancre contenant le texte ou les éléments sur lesquels on
peut cliquer
 le clic redirige vers une URL
 entraîne le chargement de la ressource désignée par l’URL

 Syntaxe
 <a href="URL" title="texte">
ancre
</a>
 href : URL de destination du lien
 title : texte qui apparaîtra dans une info-bulle si on survole
le lien

Master AI – 2012-2013 – Remise à niveau World Wide Web 55

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Liens hypertextes : exemple

<p>Quelques exemples de liens</p>

<p><a href="URL" title="serveur
web de l'UCBL">Cliquez-
ici</a> pour atteindre le
site de l'Université Claude
Bernard Lyon 1.</p>
<!-- Remarque : on a ici un lien
absolu (URL complète) -->
<p>Cliquez sur l'image pour lire
un joli poème.</p>
<a href="[Link]"><img
src="[Link]" alt="Un
pélican" height="100" /></a>
<!-- Remarque : on a ici un lien
relatif -->
<p>Evidemment, on peut mettre <a
href="[Link]
tml1/">pas mal de
<em>contenu</em> (textuel
<span style="background-
color: #A234EE">
éléments)</span> dans une
ancre</a> </p>

Master AI – 2012-2013 – Remise à niveau World Wide Web 56

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Tableaux

 Principe
 Un tableau contient des lignes, lesquelles contiennent des
cellules
 Eléments
 <table> … </table> (élément général)
 <tr> … </tr> (table row)
 <td> … </td> (table cell)
 <th> … </th> (table header)
 <caption> … </caption> (table caption)
 ...

Master AI – 2012-2013 – Remise à niveau World Wide Web 57

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Tableaux : exemple

<table summary="Ce tableau présente des balises xHTML et leur type." border="1">
<caption>Type de quelques balises xHTML</caption>
<thead>
<tr>
<th scope="col">Nom de la balise</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>div</td>
<td>block</td>
</tr>
<tr>
<td>span</td>
<td>inline</td>
</tr>
<tr>
<td>table</td>
<td>block</td>
</tr>
</tbody>
</table>

Master AI – 2012-2013 – Remise à niveau World Wide Web 58

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Deux types d’éléments en HTML

 Eléments block
 Définissent des blocs physiques (des « boîtes ») dans le
document
 Induisent un saut de ligne à la fin de leurs contenus
 Exemples
 p, h1-h6, div, ul, ol, li, pre, hr, table, etc.
 Eléments inline
 Dans le flux des caractères
 « Semblables » à des caractères
 Exemple
 em, img, strong, a, etc.

Master AI – 2012-2013 – Remise à niveau World Wide Web 59

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Les éléments span et div

 Utilité
 Regrouper des sous-parties de document
 Pour leur donner un nom
 Pour contenir du texte ou d’autres éléments XHTML
 Pour les traiter globalement en leur affectant des styles, des événements…
 Mais sans leur donner de sémantique particulière
 <span> … </span>
 Élément de type inline
 Contient du texte ou d’autres éléments inline
 <div> … </div>
 Élément de type block
 Contient du texte, d’autres éléments inline ou block
 Retour chariot à la fin
Master AI – 2012-2013 – Remise à niveau World Wide Web 60
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

div / span : exemple

<h1>Exemples avec <code>div</code> et
<code>span</code></h1>
<div id="premiere_strophe" style="color: purple ;
font-style: italic">
<p>Le Capitaine <span class="heros">
Jonathan</span>,</p>
<p>Etant âgé de dix-huit ans</p>
<p>Capture un jour un <span style="font-weigth:bold">
pélican</span></p>
<p>Dans une île d'Extrême-orient.</p>
</div><div style="text-align: right">
<p>Le pélican de <span class="heros">
Jonathan</span></p>
<p>Au matin, pond un oeuf tout blanc</p>
<p>Et il en sort un <span style="font-weigth:bold">
pélican</span></p>
<p>Lui ressemblant étonnamment.</p>
</div><div style="text-align: justified">
<p>Et ce deuxième <span style="font-weigth:bold">
pélican</span></p>
<p>Pond, à son tour, un oeuf tout blanc</p>
<p>D'où sort, inévitablement</p>
<p>Un autre, qui en fait autant.</p>
</div><div style="text-align: right">
<p>Cela peut durer <span style="text-align:
right">pendant</span> très longtemps</p>
<p>Si l'on ne fait pas d'omelette avant.</p></div>
Master AI – 2012-2013 – Remise à niveau World Wide Web 61
 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Formulaires
 Objectif
 Permettre à l’utilisateur d’envoyer des informations à un serveur
 Saisir les informations
 listes déroulantes, cases à cocher, zones de texte, etc.
 bouton pour remettre à zéro
 Envoyer les informations
 méthode GET
 les informations passent par l’URL
 Ex. : [Link]
8&oe=utf-8&q=html+4.01
 Méthode POST
 les informations sont échangées par le protocole HTTP
 Eléments
 <form> … </form>  définit un formulaire
 <input> … </input>  entrée de formulaire
 <textarea> …</textarea>  zone de texte
 <select> … </select>  liste déroulante
 <option> … </option>  option du select

Master AI – 2012-2013 – Remise à niveau World Wide Web 62

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Formulaires : exemple
<form method="post" action="[Link]

<p><input type="text" name="Champ_saisie" value="Texte"

/></p>

<p><select name="Liste_Choix" size="3">

<option value="Option_1">Option_1</option>
<option value="Option_2">Option_2</option>
<option value="Option_3">Option_3</option>
</select>

<textarea name="Zone_Texte" cols="30" rows="5">

Texte par défaut </textarea></p>

<p><input type="checkbox" name="case1" value="Case_1">

Case à cocher 1<br />
<input type="checkbox" name="case2" value="Case_2">
Case à cocher 2<br />
<input type="checkbox" name="case3" value="Case_3">
Case à cocher 3<br /></p>

<p><input type="radio" name="Case_Radio"

value="Case radio 1">Case radio 1<br />
<input type="radio" name="Case_Radio"
value="Case radio 2">Case radio 2<br />
<input type="radio" name="Case_Radio"
value="Case radio 3">Case radio 3<br /></p>

<input type="reset" name="Annulation" value="Annuler">

<input type="submit" name="Soumission" value="Soumettre">
</form>

Master AI – 2012-2013 – Remise à niveau World Wide Web 63

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Cadres (frames)
 Principe
 diviser la fenêtre d’affichage en frames
 afficher dans chaque frame une page HTML
 Nombre de fichiers concernés
 1 pour la déclaration du frameset + 1 pour chaque frame
 Ex : 3 frames  minimum 4 fichiers
 En XHTML
 Le fichier principal obéit à la DTD frameset
 Les autres sont en XHTML
 Remarque
 Ne pas utiliser car pose beaucoup de problèmes
 gestion
 indexation

Master AI – 2012-2013 – Remise à niveau World Wide Web 64

 1. Introduction 1. Définitions 5. Prologue
2. Aspects techniques 2. Historique 6. En-tête
3. Langage HTML 3. Syntaxe 7. Corps
4. Conclusion 4. Structure 8. Cadres

Cadres : exemple
Le fichier principal fait appel
à [Link] et [Link]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<html>
<head>
<title>Texte du titre</title>
</head>
<frameset cols="200,*">
<frame src="[Link]" name="cadre1" scrolling="no">
<frame src="[Link]" name="cadre2" [Link]
scrolling="yes">
<noframes>
<p>Ce projet utilise des cadres. Chez vous les
cadres ne sont pas affichés.</p>
</noframes> [Link]
</frameset>
</html>
Master AI – 2012-2013 – Remise à niveau World Wide Web 65
 1. Introduction
2. Aspects techniques
3. Langage HTML
4. Conclusion

Conclusion sur XHTML

 Possibilité de valider ses documents
 [Link]
 Ce cours n’est pas une description complète des éléments et
attributs de XHTML
 Aller voir la référence
 Non abordés ici
 Les scripts
 Javascript
 <script> ... </script>
 Les objets pris en charge par des plugins
 Applets JAVA, animations Flash, audio, vidéo, etc.
 <object> ... </object>
 Les sites web et leur gestion (conception, installation sur serveurs
web...)

Master AI – 2012-2013 – Remise à niveau World Wide Web 66

 1. Introduction
2. Aspects techniques
3. Langage HTML
4. Conclusion

World Wide Web : une description plus formelle

navigateur

le Web

un site Web

 Ensemble de pages Web formant un réseau (ou une toile : web

en anglais) sur lequel il est possible de naviguer
 WWW = World Wide Web
 Navigateur
 outil permettant d’afficher des pages HTML et de passer d’une
page à l’autre au moyen de liens hypertextes  navigation

Master AI – 2012-2013 – Remise à niveau World Wide Web 67