Programmation web origine document de formation


Télécharger Programmation web origine document de formation

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


 

M1 Architecture de l’Information

Remise à niveau en informatique Lionel Médini

 

Objectifs des cours et des TP (partie Web)

q  Découvrir ce qu’est le Web et comment ça marche

Ø  environnement réseau

Ø  mécanismes de base du Web

q  Ê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

q  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 »

q  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

Genèse du Web : la notion d’hypertexte

q  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

q  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

Naissance du Web (1989-1991)

q  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

Le premier serveur Web, un NeXT Cube

(source : Wikipédia)

q  Septembre 90 : 1er site Web fonctionnel (mode texte)

Ø  1er serveur Web :

Ø  1er navigateur Web : WorldWideWeb (rebaptisé plus tard Nexus), développé en Objective C

q  Août 1991 : publication du projet WorldWideWeb dans un message

sur UseNet

q  Décembre 91 : démonstration publique à la conférence Hypertext'91 (San Antonio)


Historique du Web

q   1993 : Mosaic : premier navigateur « grand public »

Ø   Marc Andreessen, NCSA : plateformes X, puis Mac et Windows Ø affichage d’images (GIF et XBM) dans les pages Web 

Ø   prise en charge de formulaires interactifs

q   01/10/1994 : création du W3C Ø à l’initiative du CERN (Genève) et du MIT (Boston) Ø président : Tim Berners-Lee

Ø   but : standardisation et développement du Web

q   1994 : Apparition des navigateurs privés

Ø   M. Andreessen crée Netscape Communications Corp.

q   1995 : Microsoft lance la « guerre des navigateurs »

Ø   Apparition d’Internet Explorer pour Windows 95

q   1995 : Altavista : premier « gros » moteur de recherche

q   1996 : Navigateur Opera

q   1998 : Apparition de Google

q   2003 : Apple lance Safari

q   2004 : Première version de Mozilla Firefox

q   2004 : première conférence « Web 2.0 » q 2008 : Google lance Google Chrome

q   Actuellement : explosion du Web mobile

q   En cours de développement : Web sémantique, de données, des objets…

Nombre de sites référencés

1990  : 1 (CERN)

1991  : premier site hors

d’Europe (SLAC, Stanford)

1992  : 26

Juin 1993 : 130

Juin 1994 : 2738

Juin 1995 : 23 500

Janvier 1996 : ~ 100 000

Avril 1997 : > 1 million

Février 2000 : > 11 millions

Février 2007 : > 100 millions

Février 2009 : ~ 216 millions


q  World Wide Web (WWW, Toile) 

q  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

q  Rappel : Web ? Internet 

Ø  Internet = support de communication

Ø  Web = une partie des contenus circulant sur l’Internet

Page Web

q  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)

q  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

q  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

q  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

q  Liens vers et à partir d’autres sites

Ø  permettent de naviguer d’un site à un autre

Ø  composent la « toile » mondiale (World Wide Web)

Ø  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)

q  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

q  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)

q  Exemples de sites « Web 2.0 »

Ø  Wikipédia, , Technorati, Flickr, Picasa Web album, Dailymotion, YouTube, Kartoo…


q  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 »)

q  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

Usages du Web (2008)

q  Consultation simple (Web 1.0)

Ø  Navigation

Ø  Recherche d’informations

q  Divertissement

Ø  TV, radio, musique, vidéo en ligne

Ø  Information

Ø  Jeux

q  Communication

Ø  Asynchrone (Webmail)

Ø  Synchrone (Web chat, Webconférence)

q  Web 2.0

Ø  Travail collaboratif : partage / édition de documents sur des intranets

Ø  Autres sites participatif (blogs…)

Ø  Réseaux sociaux

q  Consommation de services

Ø  Sites marchands, enchères

Ø  Autres services en ligne : banque, administration…

Sources : Journal du Net (), Ipsos (), Carrefour Numérique ()

Répartition des clients (2011)

Source

InternetExplorer

Safari

*

Mobile

Unknown

Net Applications

52.7%

21.5%

13.5%

8.1%

2.9%

5.5%

 

StatCounter

42.5%

28.0%

 

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%

 

q Fixes

                                               (*) certaines sources comptent deux fois les navigateurs mobiles

§  Source :  

 

§  Source :  


 

§  Source :


Les 3 mécanismes de base du Web

q  URL

Ø  Le Web permet d’accéder à un ensemble de ressources

Ø  Le mécanisme de localisation peut faire appel au protocole DNS

q  HTTP

Ø  Protocole de niveau applicatif

Ø  Paradigme client-serveur

Ø  Protocole sans état (pas de « mémoire » des transactions précédentes)

q  HTML

Ø  Langage de description de « pages Web »

Ø  Texte, images et autres objets

Ø  Liens hypermédias entre les pages

Ø  Programmation déclarative

Fonctionnement du Web en un schéma 


Internet

HTTP

Un internaute (utilisateur) utilise un client Web (navigateur)

Serveur  Web

Le nom du serveur dans l’URL Le serveur trouve (sur un disque) est transformé en adresse IP ou calcule (dynamiquement)

(résolution DNSHTML la ressource demandée.).  Le serveur Web est identifié.

Une requête HTTP est adressée au Le serveur renvoie la page (X)HTML

coserveur respondant à la reqvia Internet (routage).ête au client  par le même moyen.


Le client identifie la page par pour obtenir une ressource (page Web)nterprète la page                                  

son adresse (URL).Web et l’affiche à l’utilisateursur un serveur distant…                             

Autre client Web

          Navigateur  = Client Web                                 Ressource demandée

Les forces en présence Côté serveur Côté client


q  Serveur Web q

Ø  attend les requêtes HTTP et y répond

Ø  deux façons de fournir des ressources

§  statique : le serveur renvoie les ressources dont il dispose

§  dynamique : la ressource est générée à la réception de la requête

q  Machine serveur q

Ø  environnement contrôlé

Ø  doit être dimensionnée en fonction de la charge attendue

Ø  remarque : on parle de serveur Web q pour désigner la machine qui héberge le programme serveur (abus de langage)

q  Utilisateurs

Ø  Webmaster : administration

Ø  Web designer : conception et réalisation des contenus

Client Web

Ø  identifient les serveurs sur Internet

Ø  demandent les ressources aux serveurs

Ø  affichent les ressources aux utilisateurs

Ø  peuvent effectuer des traitements complémentaires (scripts, plugins)

Machines clientes

Ø  environnements variables

Ø  pas d’accès possible aux autres logiciels installés (sauf plugins)

Utilisateurs

Ø  « utilisateurs finaux »

§  Identifiés ou non

§  peuvent correspondre à des « profils » modélisés

§  objectifs : utiliser le service offert par l’application Web


Pages générées dynamiquement

q  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…) v le serveur considéré est le client d’autres serveurs

 

Comment choisir une solution logicielle ?

q  En fonction

Ø  du type d’application visé

Ø  de ses préférences (langage / environnement de développement)

q  Exemples

Ø  Site statique

§  Serveur « simple » : Apache,

Ø  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 »

v  PHP : Joomla!, Moodle

v  Java : OpenCMS, Alfresco

v  Python : Zope, Plone

v  Ruby on Rails : BrowserCMS

Navigateur Web (browser, butineur)

q  Fonctionnalités

Ø    de base    Fichier HTML Navigateur      Utilisateur

 

<html>

<head>

<title>Universit&eacute

; Claude Bernard Lyon 1</title>

<meta httpequiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

</html>

 

§  client HTTP(S)

§  moteur de rendu HTML

§  moteur de scripts

Ø    extensions

                                                                                                                                         Description                   Présentation 

§  support de pluginsdu document       à l’utilisateur

Ø    « cosmétiques »

§  historique, signets, onglets…

q  Offre logicielle

Ø    Mozilla Firefox, Google Chrome/Chromium, Opera, Apple Safari, Microsoft Internet Explorer

Ø    é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…)

q  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

q  Il est possible – mais pas recommandé – de désactiver l’interpréteur Javascript du navigateur

Exécution d’applets Java

q  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

q  Applet

Ø  élément de programme Java

Ø  restrictions de sécurité au niveau des

                            fonctionnalités autorisées                     Serveur Fichier

q  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

Ø  é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

q  Exemples 

Ø  Flash / Shockwave : documents multimédias 

Ø  Real Audio / Vidéo : sons ou vidéos Ø Acrobat : documents PDF

                                                                                                                                                                   Client              Serveur

 

affichage géré par le navigateur


Introduction aux langages à balises

q 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 »

q  Élément d’information

Ø  ensemble de données faisant « sens »

§  On parle aussi de « grains d’information »

q  Document

Ø  regroupement cohérent d’éléments d’information

§  Autour d’une thématique commune § Selon une structure donnée

Introduction aux langages à balises

q  Information structurée : bases de données

Ø  Éléments d’information stockés séparément

Ø  Accès par requêtes

Ø  Traitements facilités

q  Information non structurée : corpus documentaires

Ø  Éléments d’information stockés sous forme de textes

Ø  Accès par recherche d’information

Ø  Traitements complexes

q  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

Introduction aux langages à balises

q 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 »)

Introduction aux langages à balises

q  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)

q  Langage à balises : langage de description de documents utilisant ces techniques de balisage

q  Élément : une balise et son contenu

Introduction aux langages à balises

q 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

Introduction aux langages à balises

q Le langage Postscript

%!PS-Adobe-3.0

%%Title: Microsoft Word -

Document1

%%Creator:

Version 4.0

%%CreationDate: 03/02/02

10:47:00

%%EndComments

%%BeginProlog  %%BeginProcSet:

Pscript_Res_Emul 1.0 0

/defineresource where{pop}{userdict

begin/defineresource{userdict/R esources 2

}ifelse}bind readonly def end}ifelse

%%BeginResource: file

%%EndResource

%%EndProlog

%%BeginSetup

%%BeginFeature: *PageSize

A4

%%EndFeature

… 

%%EndSetup

%%Page: 1 1

%%BeginPageSetup

%%EndPageSetup

%%IncludeFont: Courier

… 

 (Courier) cvn /Type1

(Essai impression)S 

(%%[ Page: 1 ]%%)  =

%%PageTrailer

%%Trailer

%%DocumentNeededFonts: 

%%DocumentSuppliedFonts:  /Pscript_Win_Driver /ProcSet findresource dup /terminate get exec Pscript_Win_Compat dup /terminate get exec

%%Pages: 1

(%%[ LastPage ]%%)  =

%%EOF

%%EndProcSet


Introduction aux langages à balises

q 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 }}

                                                                                                     –PCI 2010 – CM 03

Ø  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) :

Ø  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

Les langages dédiés au Web

q  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)

Ø  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)

q  Restent en développement : CSS L3, DOM L3, XHTML 2.0…

Les langages dédiés au Web

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

 

Ø Autre version :  

                                                                                                     –PCI 2010 – CM 03

Introduction aux langages à balises

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

Ø  EcmaScript, JavaScript

Ø  TCP/IP

Ø  Unicode

Ø  …



 

HTML (HyperText Markup Language)

qPrincipe

Ø décrire des pages Web        

à programmation

     déclarative

Ø  dans des fichiers textuels  

Ø  sous forme d’un ensemble

à encodage

d’éléments                                

à arborescence

Ø en utilisant des balises        

à syntaxe, grammaire

HTML (HyperText Markup Language)

q Balise ouvrante

Ø avant le contenu de l’élément q Balise fermante

<title>

Ø après le contenu de l’élément

q Balise vide (balise d’élément vide)

</title>

                Ø pas de contenu                     

q Nom de balise

Ø mot-clé simple spécifiant 

<hr />

le type d’élément à délimiter  q Attribut de balise

title, img, p

Ø « morceau d’information »

permettant de préciser un élément

<a href="">

§  Toujours à l’intérieur de la balise ouvrante (ou vide)

§  Ne fait pas partie du contenu de l’élément § Structure : nom="valeur" 

HTML (HyperText Markup Language)

q  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

q  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="" alt="image de zèbre" />

q  Un élément peut contenir d’autres éléments

Ø  On parle de structure arborescente

HTML (HyperText Markup Language)

q 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>

Exemple de structuration arborescente

Prologue

<html>

Balise            ouvrante

<head>

 <title>Merveilles du monde</title> </head>

<body

 <p>Dans l’image ci-après

             <img src="" alt="Image de zèbre" /

Élément               nous présentons un zèbre vivant  avec    dans la savane. 

                           contenu           </p>

 <!-- Fin zèbre début lion -->

Commentaire                <p>Le lion n’est pas vraiment son ami.

                                                                          <img src="" alt="Image de lion" />   

Balise d’élément vide

(une seule balise)</p>

                                                             </body>                                  

</html>

Balise      Attributs de l’élément Image  fermante

Structure générale d’un document XHTML


q  Prologue      q

Ø  Déclaration XML

Ø  Déclaration de DTD 

q  Élément racine   q

Ø   Élément html q En-tête

Ø   Élément head

Corps

Ø   Élément body

Ø   dans html Commentaires

Ø   <!-- -->

Exercice

1) Écrivez cette structure dans un fichier texte et sauvegardez ce fichier (à « ») 2) Composez votre première page Web telle que :

-    le titre soit « Ma première page Web »

-    le corps de la page contienne « Bonjour, le monde ! »

3)  Enregistrez cette nouvelle page avec un autre nom

4)  Ouvrez-la dans votre navigateur

Ø   n’importe où


Ø   dans html

q  Titre

Ø Élément title

Ø dans head

q  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""">

q  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"

""> q Déclaration d’espace de noms dans la balise ouvrante html

<html xmlns=“”  xml:lang=“fr” lang=“fr”>

q  Pour des débutants : XHTML strict + CSS

q  Titre du document

Ø  <title></title>

q  Autre informations non affichées à l’écran, utilisées par le navigateur, les moteurs, etc.

Ø  <meta name=" " content=" " />

§  <meta http-equiv="Refresh"        content="4" ; " />

§  <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

q  Styles

Ø  <style /> àinclure une feuille de style CSS dans la page Ø <link />  àlier le document à une ressourse externe 

                                                                                             (typiquement, feuille de style)

q  Scripts 

Ø  <script /> àajouter un script à la page

q  Elément body

Ø  Toutes les informations visualisables

q  Structuration

Ø  <p> </p> àparagraphe Ø <h1> </h1> àtitre de niveau 1 Ø

Ø  <h6> </h6> àtitre de niveau 6

Ø  <hr /> àligne horizontale

Ø  <br /> àsaut de ligne



<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><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>

q  Emphase

Ø  <em> … </em> (emphasis)

q  Emphase forte

Ø  <strong> … </strong> 

q  Exposants et indices

Ø  <sup> … </sup> (superscript)

Ø  <sub> … </sub> (subscripted)

Extraits, citations et références

q Citer quelque chose : cite

Ø <cite>Discours de la méthode</cite> de <cite>Descartes</cite>  

q Citation courte : q

Ø Comme le disait <cite>Ronsard</cite> :

<q>Mignonne allons voir si la rose </q>  

q Citation longue : blockquote

Ø <h5><cite>Barbara</cite> de <cite>Jacques

Prévert</cite></h5>

 <blockquote cite=";>

<p>Rappelle-toi Barbara</p>    

 <p>Dont il ne reste rien.</p>

 </blockquote> 

Autres éléments de structuration

q Texte spécial

Ø  <pre> … </pre> (preformatted text)

Ø  <code> … </code> 

§ pour mettre du texte représentant du code informatique (par exemple du XML !)

q 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.

q  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

q  Exemple

Ø  <img src=""       alt="logo de l’UCBL"

width="40" height="30" lang="fr" />  q Images cliquables

Ø  <img src="" alt="Canada" usemap="#mymap" width="50" height="100" />

<map id="mymap">

     <area 

href="" alt="Route 20"

shape="rect" coords="0,0,49,49" />

     <area 

href="" alt="Route 35"

</map>

shape="rect" coords="0,49,49,99" />

¡  il faut trois ressources pour afficher cette page

÷  Fichier source HTML

÷  Fichier (chemin local : dans le même dossier que le fichier source HTML)

÷  Fichier (disponible sur la machine , en suivant le chemin

¡  trois requêtes HTTP en tout pour l’affichage

q  Principe général 

Ø  Un élément liste contient des élément items

q  Listes classiques Ø Liste à puces

§ <ul> … </ul> (unordered list)

Ø  Liste ordonnée

§  <ol> … </ol> (ordered list)

Ø  Item de list § <li> … </li>

q  Liste de définitions

Ø  Conteneur § <dl> … </dl> Ø Terme de définition § <dt> … </dt>

Ø  Description de définition (= définition elle-même)

§  <dd> … </dd>

<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>

q 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

q 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

<p>Quelques exemples de liens</p>

<p><a href="URL" title="serveur web de l'UCBL">Cliquezici</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=""><img src="" alt="Un pélican" height="100"/></a>

<!-- Remarque : on a ici un lien relatif -->

<p>Evidemment, on peut mettre <a href=" tml1/">pas mal de <em>contenu</em> (textuel <span style="backgroundcolor: #A234EE"> éléments)</span> dans une ancre</a></p>

q Principe

Ø  Un tableau contient des lignes, lesquelles contiennent des cellules q 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) Ø

<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>

q 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.

q Eléments inline

Ø  Dans le flux des caractères

Ø  « Semblables » à des caractères

Ø  Exemple

§  em, img, strong, a, etc.

q 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

q <span> … </span>

Ø  Élément de type inline

Ø  Contient du texte ou d’autres éléments inline

q <div> … </div>

Ø  Élément de type block

Ø  Contient du texte, d’autres éléments inline ou block Ø Retour chariot à la fin



 

Ø  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 

v  les informations passent par l’URL 

v  Ex. : ;ie=utf8&oe=utf-8&q=html+4.01

§  Méthode POST

v les informations sont échangées par le protocole HTTP

q 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

<form method="post" action="">

<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>

q 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

q En XHTML

Ø Le fichier principal obéit à la DTD frameset Ø Les autres sont en XHTML

q Remarque

Ø Ne pas utiliser car pose beaucoup de problèmes

§  gestion

§  indexation 


"">

<html>

<head>

<title>Texte du titre</title>

</head>

<frameset cols="200,*">

<frame src="" name="cadre1" scrolling="no">

<frame src="" name="cadre2" scrolling="yes">

<noframes>

<p>Ce projet utilise des cadres. Chez vous les cadres ne sont pas affichés.</p>

              </noframes>

</frameset>

</html>

q  Possibilité de valider ses documents

Ø 

q  Ce cours n’est pas une description complète des éléments et attributs de XHTML

Ø  Aller voir la référence

q 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 )

q  Ensemble de pages Web formant un réseau (ou une toile : web en anglais) sur lequel il est possible de naviguer 

q  WWW = World Wide Web q Navigateur

Ø outil permettant d’afficher des pages HTML et de passer d’une page à l’autre au moyen de liens hypertextes à navigation



10