HTML – Design Goals

¨ simple Web Engineering § easy to author for non-computer-experts

Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt ¨ application independent § any application should be possible Universität Karlsruhe ¨ platform independent Fakultät für Informatik § focus on content not on presentation Institut für Telematik

¨ defined by means of SGML Wintersemester 2000/2001 § HTML DTD from version HTML 2.0 on

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 1 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 3

Example-Document

Web Engineering - Homepage< br> ...
Chapter 3: The Web – An Information System ....

Art der Veranstaltung: Vorlesung, 2 SWS

...   ... Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 2 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 4 HTML - Development HTML - HEAD

¨ 1990 HTML ¨ HEAD § CERN - first implementation § TITLE ¨ 1991 HTML+ § LINK § Implementation in the Arena Browser ¨ link to other documents, e.g. Style Sheet

¨ 1994 HTML 2.0 ¨ specifying relation to other Documents § Combined features from Mosaic, Arena and other browsers § META ¨ e.g. Forms § SCRIPT § then Netscape was founded – browser are ahead of definitions § STYLE ¨ 1997 HTML 3.2 ¨ embedded Style Sheet § when published far behind the state of the art § functionality

¨ z.B. tables, Applets, ... ¨ Dec 1997 HTML 4.0 [Raggetet al. 1998] ¨ Dec 1999 HTML 4.01 ¨ Jan 2000 XHTML 1.0 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 5 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 7

HTML 4.01 HTML - BODY ¨ Clear distinction between content and layout § „clearing out“ elements ¨ BODY § Cascading Style Sheets to describe presentation and layout § HEADING § Text ¨ 3 Document Type Definitions § Lists § The HTML 4.01 Strict DTD includes all elements and attributes that have ¨ unordered list

, ordered list
, definition list

not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: § TABLE § The HTML 4.01 Transitional DTD includes everything in the strict DTD § MAP plus deprecated elements and attributes (most of which concern visual ¨ client-side Image Map presentation). For documents that use this DTD, use this document type § Anchor, declaration: ¨ Source and target anchor § The HTML 4.01 Frameset DTD includes everything in the transitional § OBJECT DTD plus frames as well. For documents that use this DTD, use this ¨ replaces other tags, e.g. document type declaration:

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 6 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 8 HTML - FORMS HTML – Image Maps - Server-Side

¨ forms Image-Maps § INPUT ¨ Server-Side § BUTTON § IMG tag with ISMAP attribute § SELECT § position submitted to the server § RADIO-BUTTONS § server replies with the corresponding resource § OPTION § mapping of position to resource on the server § TEXTAREA ¨ connected to actions by URI § Action Attribute

¨ see CGI (later chapter)

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 9 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 11

HTML - Framesets HTML – Image Maps - Client-Side

¨ FRAMESET Image-Maps § DTD ¨ Client-Side § columns and rows of frames § IMG tag with USEMAP attribute, MAP definition § browser selects based on position the resource ¨ Interaction between Frames § browser request only this resource from the server example part 1 – example part 2 – file with frame definition: file list1.htm : name="right">

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 10 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 12 Document Type Definition I Document Type Definition III

Examples from the HTML 4.0 DTD ¨ Example: Declaration of HTML Tables sequence of characters with a name, e.g. caption header footer ... body … line ¨ Elements: header/data Cell components in the document structure, e.g. e.g.

Def. of HTML elements

...

,

…

, … start-tag and end-tag required

this is a 2*2-Table

top left	top right
down left	down right

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 13 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 15

Document Type Definition II Cascading Style Sheets

¨ Elements with attributes (example from HTML 4.0 DTD) ¨ formats and layouts for HTML documents § CSS level 1 (CSS1) [Lie et al. 1996] USEMAP %URI; #IMPLIED > ¨ color, font, layout, position ...

¨ inheritance of attribute values along the HTML e.g. document hierarchy

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 14 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 16 CSS Rule Syntax Using Styles ¨ Inline Styles ¨ External Style Sheets ¨ style sheets have one or more rules that describe the format of ¨ Embedded Styles ¨ Importing elements ¨ rules consist of selector and declaration ¨ the declaration consists of one or more pairs with property and ::= ":" [";" ":" ]* ::= ["," ]*

Headline is blue

While the paragraph is green. Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 17 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 19

CSS Selectors Using Styles ¨ Inline Styles ¨ External Style Sheets ¨ type selectors, ¨ Embedded Styles ¨ Importing HTML -elements § H1 { color: blue } § H1 { color: blue } text

¨ ID

And Again

text

Headline is blue

And Again

While the paragraph is green. Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 18 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 20 Using Styles CSS Inheritance ¨ Inline Styles ¨ External Style Sheets ¨ Embedded Styles ¨ Importing ¨ ascending hierarchy of Style Sheets with overriding § browser style sheet § user style sheet „special.css“ for specific designs on a certain topic § alternative designs ¨ e.g.: „big.css“ for workstation screens, „small.css“ for PDA screens

Headline is blue

While the paragraph is green. Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 21 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 23

Using Styles Positioning with CSS/XSL ¨ Inline Styles ¨ External Style Sheets ¨ Embedded Styles ¨ Importing ¨ position, layer ¨ example #p1 {text-align: right; margin: -150px 0 50px 0}

Headline is blue

While the paragraph is green. Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 22 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 24 XHTML 1.0 Differences - XHTML vs. HTML

¨ basically HTML 4.0 in XML ¨ „Well-Formed-Documents“ ¨ same semantic of elements and attribute as HTML 4.0 ¨ XHTML is case sensitive ¨ Advantage of XHTML ¨ end-tags are required (or <../>) § XHTML Documents are XML conform § XHTML allows the usage of the HTML or XML Document Object ¨ values in Attributes must be quoted Models ¨ markup minimizing is not allowed (attributes and tags) § processing is simplified § HTML 4.0 Browser can display XHTML 1.0 documents § Based on XHTML it is simple to add new elements

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 25 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 27

Valid XHTML 1.0 References Chapter 3 (I)

¨ criteria: ¨ Abrams, M.; 1998. World Wide Web: Beyond the Basics. Prentice-Hall, § according to one of the three DTDs Upper Saddle River. § root element is ¨ Berners-Lee, T.; 1989. Original Proposal at CERN. http://www.w3.org/pub/WWW/History/1989/proposal.html § the root element uses the XHTML name space ¨ Boutell, T.; 1997. PNG (Portable Network Graphics) Specification - § the includes a DOCTYPE Declaration Version 1.0. Internet Informational RFC 2083. ¨ example ¨ Bush, V.; 1945. As We May Think. Atlantic Monthly, 176(1), http://www.theatlantic.com/unbound/flashbks /computer/bushf.htm 89a. Columbus. xml:lang="en" lang="en"> ¨ Freed, N., and Borenstein, N.; 1996. Multipurpose Internet Mail Extensions (MIME) - Part One: Format of Internet Message Bodies. Internet Draft Standard RFC 2045. ¨ Freed, N., and Borenstein, N.; 1996. Multipurpose Internet Mail Extensions (MIME) - Part Two: Media Types. Internet Draft Standard

Moved to vlib.org.

RFC 2046.

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 26 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 28 References Chapter 3 (II) Selected URLs - Chapter 3 (I)

¨ Freed, N., Klensil, J., and Postel, J.B.; 1996. Multipurpose Internet Mail ¨ Extensible Markup Language (XML) 1.0, http://www.w3.org/TR/REC-xml Extensions (MIME) - Part Four: Registration Procedures. Internet best ¨ XML Linking Language (XLink) http://www.w3.org/TR/WD-xlink current practice RFC 2048. ¨ XML Pointer Language (XPointer) http://www.w3.org/TR/WD-xptr ¨ Freed, N., and Borenstein, N.; 1996. Multipurpose Internet Mail ¨ Extensible Stylesheet Language (XSL) http://www.w3.org/Style/XSL/ Extensions (MIME) - Part Five: Conformance Criteria and Examples. Internet Draft Standard RFC 2049. ¨ XHTML 1.0: The Extensible HyperText Markup Language http://www.w3.org/TR/xhtml1/ ¨ Hoschka, P.; 1998. Synchronized Multimedia Integration Language. W3C Recommendation, http://www.w3.org/AudioVideo ¨ The SGML/XML Web Page http://www.oasis-open.org/cover/ ¨ XML Path Language (XPath) Version 1.0 http://www.w3.org/TR/xpath ¨ ISO; 1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML). ISO/IS 8879. ¨ XSL Transformations (XSLT) Version 1.0 http://www.w3.org/TR/xslt ¨ ISO; 1993. Information Technology - Digital Compression and Coding ¨ Microsoft XML developer Center http://msdn.microsoft.com/xml/default.asp of continuous-tone still Images. ISO/IEC IS 10918. ¨ SOAP: Simple Object Access Protocol ¨ ISO; 1996. Information Technology - Processing Languages - http://msdn.microsoft.com/xml/general/soapspec-v1.asp Document Style and Specification Language (DSSSL). ISO/IS 10179. ¨ Lennon, J.A.; 1997. Hypermedia Systems and Applications - World Wide Web and Beyond. Springer, Berlin.

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 29 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 31

References Chapter 3 (III) Selected URLs - Chapter 3 (II)

¨ Lie, H.W., and Bos, B.; 1996. Cascading Style Sheets, level 1. W3C ¨ http://www.w3.org/XML/Linking.html Recommendation. ¨ http://www.w3.org/TR/xlink/ ¨ Moore, K.; 1996. Multipurpose Internet Mail Extensions (MIME) - Part ¨ http://www.w3.org/XML/ Three: Message Header Extensions for non-ASCII Text. Internet Draft ¨ http://www.sun.com/software/xml/developers/xlink.html Standard RFC 2047. ¨ http://www.w3.org/TR/xpath ¨ Nelson, T.H.; 1965. A File Structure for the Complex, the Changing, and the Intermediate. ACM 20th National Conference. ¨ http://www.w3.org/XML/Schema.html ¨ Nelson, T.H.; 1987. Literary Machines. Mindful Press, Sausalito. ¨ http://www.oasis -open.org/cover/schemas.html ¨ Online-Hilfe zu HTML und CSS, www.htmlhelp.com ¨ http://www.w3.org/TR/xptr ¨ Powell, T.A., Jones, D.L., and Cutts, D.C.; 1998. Web Site Engineering ¨ http://msdn.microsoft.com/library/periodic/period00/xml0500.htm - Beyond Web Page Design. Prentice Hall, Upper Saddle River. ¨ http://msdn.microsoft.com/code/default.asp?URL=/code/sample.asp ¨ Ragget, D., Le Hors, A., and Jacobs, I.; 1998. HTML 4.0 Specification. ?url=/MSDN-FILES/026/000/329/msdncompositedoc.xml W3C Recommendation. ¨ http://www.zvon.org/xxl/XPathTutorial/General/examples.html ¨ Steinmetz, R.; 1998. Multimedia-Technologie. Springer, 2. Auflage, ¨ http://www.zvon.org/xxl/XMLTutorial/General/book_en.html Berlin. ¨ http://www.w3.org/TR/html4/struct/global.html ¨ Wilde, E.; 1999. Wilde´sWWW . Springer, Berlin.

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 30 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 32 Basics of Web Applications

¨ distributed software (client-server)

¨ server holds user interface description, program, or Web Engineering software ¨ user interface description, program, or software is transmitted to the client on request Chapter 4: Architecture and Platform ¨ the client interprets and displays user interface description or executes the program or the software

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 33 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 35

Table of Content Basic Architecture

1. Architecture ¨ client and server § basic client server relationship 2. Web Server § synchronous request-reply model § protocol is HTTP

3. Web Client Web Client Web Server

4. Performance and Efficiency HTTP request blocking serve request HTTP reply

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 34 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 36 Request and Reply Static Resources

¨ client requests a specific (unique) identify resource, .e.g. ¨ static documents and files § path and filename in a GET-request § e.g. HTML-pages, images, audio files, video files § ID of an object

¨ browser script ¨ server § e.g.ECMAScript, JavaScript, JScript, VBScript, ... § Server analysis the request (URI + Header) § identifies the requested resource § locates the resource ¨ executable software § Processes the request and the resource (e.g. HTTP-Header, § e.g. Java Applet, ActiveX DB-access) § sends reply back to the client

¨ client analyses and interprets the resource § e.g. display, run, execution, save,

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 37 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 39

Server holds Resources Static Resources - Process

¨ resources have unique identifiers on the server ¨ client requests a resource ¨ static resources § files are stored on the server ¨ server identifies the resource on the server (e.g. file § HTML-pages, image files, scripts, applets, programs, ... system)

¨ dynamic resources ¨ server accesses loads the resource and sends it back § resources are dynamically generated on the server to the client § e.g. generated HTML-pages, image files, scripts § continuous data (e.g. Audio, Video) ¨ Client analyses the content and presents it to the user, § access to other systems (e.g. Database) e.g. § HTML visualize/render § JavaScript interpret § Java Applet, ActiveX execute

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 38 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 40 Static Resources - Architecture Dynamic Resources - Process

¨ client requests a resource

Web HTTP ¨ server identifies the resource and recognizes that it is a Web resource that is dynamically generated Client Server

¨ the server generates the resource § parameters may be given by the client § often there are side effects on the server, e.g.save a file on the static server, save a record in a database, control a device resources in the file system ¨ The generated resource (often the output of a program) is sent back to the client

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 41 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 43

Dynamic Resources Dynamic Resources - Architecture

¨ server holds the description how to generate a resource § e.g. SSI, CGI, Server-Side-Script, ISAPI, NSAPI, Servlet CGI Web HTTP Web Application Browser Server CGI ¨ the description (usually a program) is executed on Gateway Data the server and only the output is sent to the client base

Application ¨ dynamic resources can have any content , e.g. ISAPI/NSAPI § HTML § images File system § scripts code

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 42 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 44 Table of Content How Does a Web Server Look Like?

http://www.sony .de 1. Architecture

2. Web Server

3. Web Client

4. Performance and Efficiency http://www.dell.de

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 45 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 47

How Does a Web Server Look Like? How Does a Web Server Look Like?

http://www.brodel.de/ http://www.ibm.com

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 46 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 48 How Does a Web Server Look Like? How Does a Web Server Look Like?

http://www.margherita2000.com/

http://www.earthcam.com/Solutions/ether.html

http://www.axis.com/products/cam_2100/

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 49 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 51

How Does a Web Server Look Like? How Does a Web Server Look Like?

http://www.palm.com/ http://wearables.stanford.edu/

http://www.handspring.com

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 50 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 52 How Does a Web Server Look Like? Web Server – Functional Units http://world.std.com/~fwhite/ace/ http://world.std.com/~fwhite/ace/ ¨ waiting for an HTTP request § server socket

U Mass ¨ analyzing of HTTP Request Hewlett Packard § parser

WebACE ¨ process request § access to file system or resources http://www -ccs.cs.umass.edu/~shri/iPic.html § delegation to other system

¨ answer with HTTP Reply § generate HTTP-header § send resource to client http://www.ibutton.com/TINI/ http://www.mycal.net/wsweb/ Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 53 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 55

Common Properties of Web Servers Server - Basics

¨ Communication ¨ connection oriented transport system § e.g.ethernet, modem, serial line, GSM § e.g. TCP/IP § permanent line § connection on demand ¨ iterative server

¨ server initiated § One request after another

¨ client initiated § no concurrency

¨ communicates using the HTTP-Protocol ¨ concurrent server § § accepts requests multi process server ¨ new process per request (e.g. fork()) § sends replies § multi threaded server ¨ new thread per request (e.g. new_thread.run()) ¨ has access to resources § thread pool § e.g. HTML, images, etc. ¨ fixed number of threads § potentially manipulation of resources, side effects ¨ dispatcher/worker-model

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 54 Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 56 Single Thread/Process Server

Server-Loop:

¨ wait for connection request

¨ accept connection

¨ extract resource name from request (e.g. path and file name)

¨ access resource (e.g. read file from file system)

¨ send HTTP-Header

¨ send resource (e.g. sent byte stream)

¨ close connection Goto Server-Loop

Prof. Dr. Dr. h.c. mult . Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS00/01 page 57