Présentation  Partie I: Internet: un ensemble de systèmes d'information en ligne  Partie II: Sites web avec HTML / XHTML et CSS.

Présentation au sujet: "Présentation  Partie I: Internet: un ensemble de systèmes d'information en ligne  Partie II: Sites web avec HTML / XHTML et CSS."— Transcription de la présentation:

1

2 Présentation  Partie I: Internet: un ensemble de systèmes d'information en ligne  Partie II: Sites web avec HTML / XHTML et CSS

3 1980 Internet à la fin des années 1980 était un ensemble de réseaux qui peuvent communiquer les uns avec les autres dans le cadre du protocole TCP / IP. Son utilisation était encore largement limité à l'éducation, le gouvernement et les organismes scientifiques. Deux développements ont déterminé la croissance explosive de l’Internet dans 1990. Le premier a été l'augmentation rapide des PC (en privé et business). L'autre a été la conception et le développement du World Wide Web. Curtis, G. Business Information Systems, Addison Wesley 1998

4 Dates  1992: 1,000,000 utilisateurs de Web connectés a l’Internet et WWW  1993: White House, UK Government, United Nations, World Bank en ligne  1993/94 Utilisation commerciale: transactions par carte de crédit  1995: Netscape, Internet Explorer – video, audio etc.  1995: 40-50,000,000 utilisateurs

5 Systèmes d'information en ligne …  Web: Système d'information en ligne  Impact sur tous les aspects de notre vie: Travail Education Shopping Divertissement Voyager etc etc

6 Qu'est-ce que l'information?  Information Les données traitées Les données qui sont organisées, significatives et utiles L'information dans l'ordinateur :  Stockée  Traitée  Sous une forme qui « peut être » utile

7 Qu'est ce qu'un système d'information?  Systèmes d'information Système informatique qui gère et fournit l'accès à l'information  Systèmes d'information grande échelle: Systèmes bancaires Système de réservation hôtel  Systèmes de gestion de l'information Systèmes informatiques dans une entreprise qui fournissent des informations sur les activités

8 Les sites Web sont des systèmes d'information  World-Wide Web [WWW] N'est pas l'Internet, seulement une partie WWW est un service d'information hypermédia Toutes les ressources accessibles par le protocole de transfert hypertexte [http] Hypertexte: référencement  “The World Wide Web is the universe of network- accessible information, an embodiment of human knowledge” Sir Tim Berners Lee.

9 Web Information Systems Systèmes d'information ont toujours utilisé le modèle client-serveur. Client: navigateur Web standard Réseau: Internet (ou un intranet local) Serveurs: serveurs Web internet

10 Web  Omniprésent, accessible partout. PC frigo PDA DTV

11 Quelle technologie derrière?  La clé du succès de l'Internet - les normes:  Normes: TCP / IP (Transmission Control Protocol / Internet Protocol) DNS (Domain Name System)  Key Web standards: HTTP (Hypertext Transfer Protocol) URL / URI (Uniform Resource Locator / Identifier) HTML (Hypertext Markup Language)

12 Protocoles  TCP/IP: Transmission Control Protocol/Internet Protocol Définissent les règles pour l'échange de données de base sur l’Internet La plupart des autres protocoles s'appuient sur le protocole TCP / IP pour la transmission de leurs données Pour se connecter à l'Internet, un ordinateur a besoin d'un logiciel qui implémente les protocoles TCP / IP internet

13 TCP/IP  TCP/IP- deux couches:TCP / IP est un programme de deux couches:  La couche supérieure: Transmission Control Protocol gère le découpage d'un message ou un fichier en petits paquets qui sont transmis sur Internet et reçues par une couche TCP qui rassemble les paquets dans le message original  La couche inférieure: Internet Protocol gère la partie adresse de chaque paquet (adresse IP). Chaque ordinateur sur le réseau vérifie cette adresse pour transmettre le message.

14 Adresses IP  Chaque machine sur l'Internet - une adresse unique appelée adresse IP  Les adresses IP: nombres de 32 bits, normalement exprimée sous forme de 4 octets dans un nombre décimal à points 216.27.61.137

15 Domain Name Service [DNS]  DNS Domain Name Service: Chaque ordinateur sur Internet a un nom unique, utilisée pour référer à l'ordinateur: Www.amazon.co.uk, www.abdn.ac.uk Www.amazon.co.ukwww.abdn.ac.uk Chaque ordinateur sur Internet possède également une adresse IP unique, utilisé par TCP / IP pour transmettre ces données DNS (DNS Software)

16 DNS & IP internet http://www.iutmontp.univ-montp2.fr/ www.amazon.com 162.38.221.50 204.016.127.04 Host Name Internet Protocol [IP] Address

17 Standards I  HTTP Hyper Text Transfer Protocol  Utilisé pour la communication entre les clients Web et serveurs Web  Pour demander une page Web, un navigateur envoie un message HTTP GET  Pour envoyer des données vers un serveur Web, un navigateur peut utiliser un message HTTP POST

18 Standards II  URL=Uniform Resource Locator  URI=Uniform Resource Identifier: Une manière commune de se référer à n'importe quelle page Web, n'importe où  Format… Protocol://web_server_name/page_name  Example…http://www.iutmontp.univ- montp2.fr/index.html  URL / URI sont utilisés en conjonction avec HTTP pour obtenir soit une URL soit des données POST sur une URL

19 Tim Berners-Lee's Browser http://inventors.about.com/od/computersoftware/a/html.htm

20 Le plus ancien HTML sur le web  13 Novembre 1990 "Last-Modified: Wed, 13 nov 1990 15:17:00 GMT".  La page est encore fonctionnelle dans la plupart des navigateurs Web modernes, et contient même un HyperLink fonctionnel! http://infomesh.net/html/history/early/

21 Le plus ancien HTML sur le web

22 HMTL  Des balises pour le contenu d'une page web.  Head / body:

23 Balises?  Utilisées pour marquer le début et la fin d'un élément en HTML  Toutes les balises ont le même format: commencent par un signe inférieur "<" terminent par un signe supérieur ">".  Deux types de tags balise d'ouverture: balises de fermeture:.  Différence entre une balise d'ouverture et une balise de fermeture est la barre oblique "/".

24 Balises (tags) pour: Page Title Headings Paragraphs Bold & italic text Lists Images Links

25 First (not very interesting) Page

26 Your First Page

27 Add a page title… This is a page title

28 Now with a title…

29 Add a Heading… This is a page title A heading On My First Webpage

30 Here’s A Heading…

31 Some content… Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph

32 Some content…

33 Write paragraphs without ? Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph

34 Write paragraphs without ?

35 Bold and italic text to paragraphs? Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph

36 Bold and italic text to paragraphs?

37 Nested tags Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph

38 Adding a list to your page Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph First item Second item Third item

39 Adding a list to your page

40 What about an ordered list? Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph First item Second item Third item

41 What about an ordered list?

42 HTML can be more than just text Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph First item Second item Third item

43 HTML: more than just text

44 Links to other pages How to specify a link: LINK TEXT

45 Links to other pages Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph First item Second item Third item CSD Homepage

46 Links to other pages

47 Adding in a line break Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph First item Second item Third item CSD Homepage

48 Links to other pages

49 Some more text effects Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph CSD Homepage some underlined text Typewriter type text some small text

50 Some more text effects

51 Space between pieces of text? Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph CSD Homepage some underlined text Typewriter type text I want a space between here and here

52 Space between pieces of text?

53 Use Non-Breaking space Example A heading On My First Webpage Here is some text in a paragraph Here is the next paragraph CSD Homepage some underlined text Typewriter type text I want a space between here and here

54 Use Non-Breaking space

55 Taking control of your text aligned to left aligned to centre aligned to right  Note the American spelling of center is used. Note that … is now used in favour of the old [and deprecated]

56 Taking control of your text

57 Manipulating images on page  The tag is used to display an image. There are several attributes that the user can define. src source image [URI or the filename] alt alternative text height in pixels width in pixels align to the left, right, top, middle or bottom.  Specifying the height and width attributes enables faster downloads

58 HTML below

59 Not very well written! This bit goes in the titlebar This is the heading of the page This is a paragraph This is another paragraph No closing tag CAPITALSTags not nested properly No opening tag

60 W3C  W3C: Industry consortium to promote standards for the web  XHTML 1.0: Introduced in January 2000 XHTML – based on XML, not SGML Same strict syntax as XML

61 Previous HTML example… This bit goes in the titlebar This is the heading of the page This is a paragraph This is another paragraph

62 …redone as XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This bit goes in the titlebar This is the heading of the page This is a paragraph This is another paragraph

63 So what it means is…  Your well-defined XHTML document Can be read correctly by a multitude of browsers PC based, palm, mobile phone etc. Be read and interpreted by users with disabilities etc.  You’ve written some nicely formed documents!

64 In the content itself  In the actual HTML code itself: XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element Attribute Names Must Be In Lower Case Attribute Values Must Be Quoted

65 How do I know if is good XHTML?  http://validator.w3.org/ http://validator.w3.org/  Check your XHTML for errors