Internet programming, notes for lecture 1

Table of Contents
Introduction to the World Wide Web, 15.3. . . . . . . . . Contents: . . . . . . . . . . . . . . References: . . . . . . . . . . . . . . What is Internet programming? . . . . . . . . . . Puzzle x Lego . . . . . . . . . . . . . . Is the web development like putting a puzzle together? . . . . Examples: . . . . . . . . . . . . . . If not a puzzle, what then? . . . . . . . . . . What is web application? . . . . . . . . . . . Web application examples . . . . . . . . . . . A straight HTML request - the most basic example of a web application A slightly more complex example . . . . . . . . . Much more complex example . . . . . . . . . . Technologies for web applications . . . . . . . . . . Goal of the lecture . . . . . . . . . . . . . Historical remarks . . . . . . . . . . . . . History of the World Wide Web . . . . . . . . . . History of Hypertext . . . . . . . . . . . . Data on the Web . . . . . . . . . . . . . . Some data types . . . . . . . . . . . . . HTML - HyperText Markup Language . . . . . . . . . HTMLs childhood . . . . . . . . . . . . The Challenges facing HTML . . . . . . . . . . W3C HTML Activity . . . . . . . . . . . . SGML - Standard Generalized Markup Language . . . . . . SGML basics - elements . . . . . . . . . . . SGML basics - attributes . . . . . . . . . . . SGML basics - entities . . . . . . . . . . . . SGML Document Type Definition (DTD) . . . . . . . MathML, an example of SGML application . . . . . . . Basics HTML tags . . . . . . . . . . . . . Document head . . . . . . . . . . . . . Document body . . . . . . . . . . . . . Block-level elements . . . . . . . . . . . . Block-level elements - examples . . . . . . . . . . Tables . . . . . . . . . . . . . . . Tables - example . . . . . . . . . . . . . Text-level elements . . . . . . . . . . . . Linking to other HTML documents . . . . . . . . . . URI - Universal Resource Identifier . . . . . . . . . URL . . . . . . . . . . . . . . . . Including objects, images, and applets into HTML . . . . . . Including an image . . . . . . . . . . . . . Including an applet . . . . . . . . . . . . . Including generic object . . . . . . . . . . . Note . . . . . . . . . . . . . . . Examples of included objects . . . . . . . . . . Extending functionality of the Browser . . . . . . . . . Java . . . . . . . . . . . . . . . . Active-X . . . . . . . . . . . . . . . Exposing the Browser API, Client-side Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 1 1 2 2 2 2 2 3 3 3 3 3 4 5 5 6 7 7 7 8 8 8 9 9 9 9 10 10 10 11 12 13 13 15 16 16 16 17 17 18 18 18 19 19 19 19 20 20 21

notes.html

-i-

15 Mar 2001

JavaScript VBScript

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

. .

21 21

- ii -

Introduction to the World Wide Web, 15.3.

Contents:
What is Internet programming? (p. 1) Technologies for web applications (p. 3) Goal of the lecture (p. 4) Historical remarks (p. 5) Data on the Web (p. 7) HTML - HyperText Markup Language (p. 7) SGML - Standard Generalized Markup Language (p. 8) Basics HTML tags (p. 10) Linking to other HTML documents (p. 16) Including objects, images, and applets into HTML (p. 18) Extending functionality of the Browser (p. 19)

References:
World Wide Web: Beyond the Basics Abrams, Marc. Prentice-Hall, 1998, ISBN 0-13-954785-1 (draft is available at http://ei.cs.vt.edu/~wwwbtb/book/) Internet and the World Wide Web How to Program Deitel, Harvey M., Deitel, Paul J., Nieto, T. R. Prentice-Hall, 2000, ISBN 0-13-016143-8 Opeta itsellesi WWW -ohjelmointi Kykk, S. wwwohjel.pdf W3C - World Wide Web Consortium A reference material for latest developments and recommendations for the WWW. There you find, among others: HTML 4.01 Recommendation. [LUT copy: HTML, postscript, PDF] Introduction to HTML and URLs A comprehensive introduction to HTML, that can be used also as a light tutorial. This introduction is kept very up to date, and discusses HTML 4.0, XHTML, and CSS. A Beginners Guide to HTML [LUT copy: HTML, PDF] Brief but contentful guide from one of originators of WWW, NCSA.

What is Internet programming?

Internet programming includes broad variety of technologies spanning such diverse areas such as protocools for communication networks, interfacing to databases, programming of graphical user interfaces, or structuring information. Thus to no surprise, one of most frequently asked questions about internet programming could be like this one: I am interested in becoming a web developer, but I dont know where to begin. There seems to be so many technologies in the field of web development that I feel lost. How do all these technologies relate to each other, which ones do I need to learn in order to be considered a serious professional, and which one should I learn first? How shall we answer this question?

notes.html

-1-

15 Mar 2001

1. We take only part of this vast number of technologies - we will concentrate on technologies related to World Wide Web. 2. We step back from the realm of specific technologies and and focus on a general survey of web application development. Due to the first restriction, rather than Internet programming, the lecture should bear the title Web application development.

Puzzle x Lego

Is the web development like putting a puzzle together?

No! Puzzle pieces fit together in specific, "correct" ways. n web application development however, there is no right way to solve a problem and no truly unique technology. Rather, there are multiple possible configurations of essentially redundant tools, each which solves the same set of problems.

Examples:
1. CGI, ASP and Servlets all serve the same basic function. They perform server-side processing. 2. Similarly CORBA, DCOM and enterprise Java Beans specify how to talk to distributed objects. 3. Likewise XML, HTML, SGML, XSL and CSS are all similar tools for marshaling and displaying data across a network.

If not a puzzle, what then?

Rather than using a puzzle metaphor, we can think of web application development in terms of legos. With legos, there is no overarching "right" way to solve a problem. There are just a whole bunch of block categories (6 hole, 4 hole, 2 hole) which can be put together in an infinite number of ways. There is variety within the categories, but all lego blocks are still equivalent as members of their category.

What is web application?

Essentially, all web applications do pretty much the same things: 1. Provide a Query Interface - Web Applications provide users with an interface for entering data. 2. Transmit User-Defined Query - Once collected, the user-data is sent to a web server. 3. Perform Server Side Processing - The web server processes the user-data using some sort of "middleware". 4. "Massage" Data - Processing almost always involves playing with data on the server. 5. Transmit Query Results - The processed data is now returned to the client. 6. Perform Client Side Processing - Finally, the returned data is displayed to the user. Display might be as simple as interpreting HTML, or as complex as performing calculations, sorting, or other manipulations of the data.

-2-

A web application can be conceptually described by following workflow diagram.

Web application examples

A straight HTML request - the most basic example of a web application
1. 2. 3. 4. 5. 6. User instructs a web browser to contact a web server using the HTTP protocol, and ask it for a specific HTML document which the server returns to be displayed by the web browser.

A slightly more complex example

1. 2. 3. 4. 5. 6. A user supplied search parameters via an HTML form that the web browser sent to a web server using an SSL connection. The web server might process that data with a CGI script by connecting to a data file, searching it based upon the user query, and sending back the results to be displayed in the web browser window as a table.

Much more complex example

1. 2. 3. 4. 5. 6. Suppose we have a Java client which sends an encrypted request to a Java Web Server which processes the request with a Java Servlet that uses a CORBA object to systemically generate financial trade data in the form of XML with an associated XSL style sheet that is sent back to the Java client to be parsed into an XML Tree and displayed according to the XSL.

Technologies for web applications

notes.html

-3-

15 Mar 2001

You could see from previous examples that myriad of technologies can be used to perform various tasks. There are literally hundreds of technologies and tools used throughout this simple process. However, regardless of how many technologies are involved in a project, for the most part they can all be placed into one of four conceptual categories. 1. 2. 3. 4. The display layer (usually a web browser) The communication layer The middleware layer The data layer

As such, web technologies within the same categories can be used interchangeably in MOST situations. Choosing one or the other may often be more of a bureaucratic/administrative/standards decision than a technical one. Rather than understanding each technology on its own, we need only understand the categories into which individual technologies fall. So when you confront a new web development technology and you can place it in one of these categories, you will immediately understand what it is, what it does, and probably most of how it does it.

Goal of the lecture

Consider the sections in the typical web application and what tools fall into the categories.

-4-

During the lecture you will get a framework in which to understand all existing technologies you come across and all future technologies which come out. We will survey technologies in terms of which categories they fit into and how to understand the requirements and functions of those categories. We will also pick some of the most used technologies and look at them in more detail (circled in red).

Historical remarks
History of the World Wide Web
1858 The Atlantic cable of was established to carry instantaneous communications across the ocean for the first time.

notes.html

-5-

15 Mar 2001

... 1957 President Dwight D. Eisenhower saw the need for the Advanced Research Projects Agency (ARPA) after the Soviet Unions launch of Sputnik. ... 1989 Tim Berners-Lee, a researcher of European Particle Physics Laboratory (CERN), conceives idea of World Wide Web resulting from "a need for a collaborative knowledge-sharing tool" to support scientific work in an international context 1991 CERN releases the World Wide Web globally; Minnesota University releases Gopher as a rival to the WWW 1992 First version of the HTML 1993 Development of first graphical browser Mosaic in National Center for Supercomputing Applications (NCSA) 1994 Former Mosaic developer Marc Andersen left NCSA to establish a new company - Netscape was born Version 2.0 of the HTML - first HTML standard World Wide Web Consortium (W3C) has been established in order to promote standards of the Web 1995 SUN Microsystems releases the platform-independent Java language and the HotJava browser written using it. 1996 Version 3.2 of the HTML - tables, applets, text-flow around images, superscripts and subscripts SUN releases its JavaStation network computer 1997 Version 4.0 of the HTML - includes multimedia features, UNICODE support, for displaying the worlds various languages, and features that help people with disabilities use the Net 1998 W3C releases the specifications for XML (Extensible Markup Language) version 1.0, which will make it easy to expand future web pages. 1999 HTML 4.01 Recommendation. The last version of HTML, development of HTML has ended. 2000 XHTML 1.0 Specification released. HTML rewriten as XML application. XHTML Modularization, a further step to make HTML more flexible.

History of Hypertext
WWW is a hypertext or, more precisely, hypermedia system. Hypertext has been conceived long time before the Web was born. Underlying notion of hypertext as multi-sequentially read text is perfectly embodied by any scholarly text. Medieval System of marginalia 1945 Memex, a photo-electrical-mechanical device, which could make and follow links between documents on microfiche 1965 Ted Nielsen coined the terms hypertext and hypermedia to describe links to other texts embedded in a text 1967 A team of researchers led by Dr. Andries van Dam at Brown University develop the first working hypertext-based system called Hypertext Editing System

-6-

1981 Xanadu: Ted Nielsen conceived the idea of universal document database that allow addressing of any substring of any document from any other document. Unfortunately, it has never been implemented 1985 Xerox released NoteCards, a LISP-based hypertext system 1986 OWL-Guide, a hypertext system developed for the Macintosh 1987 Bill Atkinson of Apple Computers introduced HyperCard

Data on the Web

The most basic part of a web application is the data itself. All web applications allow a user to submit instructions on how the web application should massage a bit of data on the web server. This might involve searching a database, creating a shopping cart of products, or emailing some information to someone, or simply do nothing as in presenting an ordinary text file. Regardless, the data which is being manipulated all has some basic characteristics. 1. 2. 3. 4. Data have values Data have types Data have descriptions Data have formats

All of the web technologies at the Data Layer define, describe, or standardize one or more of these characteristics.

Some data types

Raw Data Raw data is perhaps the most basic form of data and often the best choice. As raw data are considered a plain ASCCI text, images, sound, etc. HTML A markup language. It is an essence of world wide web. XML Another markup language.

HTML - HyperText Markup Language

HTML has a central role in the Web A simple format for describing the structure of hypertext or hypermedia documents - plain text (ASCII) files with embedded codes for logical markup Not designed to be the language of a WYSIWYG word processor such as Word or WordPerfect Formally an SGML (Standard Generalized Markup Language) application From nothing to a global information utility in just 8 years We are seeing an explosion of new ways to get connected: Digital TVs, Handhelds, Phones, Cars, ...

notes.html

-7-

15 Mar 2001

Demand for richer pages and reduced costs

HTMLs childhood
The genesis of HTML was firmly rooted in simplicity NCSAs Mosaic popularized the Web Most people dont think structurally Tags as formatting instructions Tag Soup Standardization efforts attempt to stem the tide

The Challenges facing HTML

Prevalence of sloppy markup practices Patchy implementations of stylesheet support New kinds of browsers: Digital TVs, handhelds, phones and cars Pressure to subset HTML for simple clients Pressure to extend HTML for richer clients Call for improvements to HTML Forms Combining HTML with other tag sets: Vector Graphics, Animation, Multimedia, E-commerce, Math, Metadata, ... XHTML, Modular HTML, XML Cascading Style Sheets (CSS) for separating structure and content

W3C HTML Activity

Earlier work in IETF on HTML 2.0, tables, internationalization and file upload Failure to make progress on HTML 3.0 (ne HTML+) Fall 95 W3C brings vendors together, HTML working group set up Jan 97 W3C releases HTML 3.2 Recommendation Dec 97 W3C releases HTML 4.0 Recommendation, HTML working group closes May 98 W3C workshop on Future of HTML, leads to new HTML working group

-8-

SGML - Standard Generalized Markup Language

Provides: a (meta)syntax for describing logical structure of documents document types or styles Does NOT provide: layout information semantics An SGML application provides a document type and semantics Applications: HTML XML (Extensible Markup language) MathML (Mathematics Markup language)

SGML basics - elements

Document is a hierarchy of logical elements Each element is marked by a start tag and an end tag:
<title>What is SGML?</title>

Elements must be properly nested:

<owner> <name>Bill Gates</name> <address>$$$@$$$.com</address> </owner>

SGML basics - attributes

Start tags may contain attributes to supply information which is not part of the normal document content.
<doc language="French"> <chapter st="Pascal pointers"> <report ref="hb/v3.4" status="draft">

Attributes have a type, but the values have no meaning in SGML (they are given a meaning by the SGML application)

SGML basics - entities

References to special characters and strings can be made by entity references User-defined - for variable strings:
<!ENTITY PM "Massimo DAlema">

... The Prime Minister of Italy, &PM;, will ... Built-in - for unusual characters
&copy; &Ccedil; &THORN; Publishing Languages Mathematics

notes.html

-9-

15 Mar 2001

External - to reference external data Parameter - to assist document type design

SGML Document Type Definition (DTD)

Defines elements which may occur in a document Example:
<!ELEMENT <!ELEMENT <!ATTLIST align > <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT Part Title Title CDATA Author Sect Subtitle Par (Title,Author?,Sect+)> (#PCDATA)> #IMPLIED (#PCDATA)> (Subtitle,Par+)> (#PCDATA)> (#PCDATA)>

Sample document:
<Part> <Title align="center">Hypertext</Title> <Author>Ted Nielsen</Author> <Sect> <Subtitle>Xanadu</Subtitle> <Par>Universal document database that allow ...</Par> <Par>... </Sect> </Part>

MathML, an example of SGML application

Example: MathML content markup for x 2 +6x+4=0
<mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mn>6</mn> <mi>x</mi> <mo>+</mo> <mn>4</mn> <mo>=</mo> <mn>0</mn> </mrow>

Basics HTML tags

In HTML, the document is structured into elements, marked up by tags that are keywords contained in pairs of angle brackets. Each document is structured into two parts - <head> and <body>. The head contains the information which is information about the document that is not generally displayed with the document, such as its <title>. The body contains the actual text that is made up of paragraphs, lists, and other elements. The contents of the body is displayed in a browser window.

- 10 -

Every HTML document should contain certain standard elements. The required elements are: <html></html> encloses the entire document and defines it as HTML document. <head></head> comes after the opening <html> tag and contains the <title>. <title></title> contains the name of the document and must be enclosed by <head> tags. <body></body> contains all the rest of the document. The minimal HTML document could contain just those elements (such document, however, will remain empty on screen, since its body is empty) Example 1: Minimal HTML document
<html> <head> <title>Internet programming</title> </head> <body> </body> </html>

Document head
The head element contains general information, or meta-information, about the document. What element can appear in the head depends on HTML version. Some elements: <title> The title of the document. All document must have a title. <base> A record of the original URI of the document: this allows you to move the document to a new location and have relative URIs access the appropriate place with respect to the original URI. <link> Defines the relationship(s) between this document and another or others. A document can have several <link> elements. <meta> A container for document metainformation. <style> Stylesheet instructions, written in a stylesheet language. Stylesheet instructions specify how the document should be formatted for display. <script> A code of client-side script in the document. Example languages are JavaScript and VBScript. ...

notes.html

- 11 -

15 Mar 2001

Example 1: Sample head of HTML document

<head> <title>Internet programming</title> <base href="http://www.it.lut.fi/index.html"> <link rel="stylesheet" type="text/css" href="courses.css"> <link href="toc.html" rel="contents"> <link href="slide2.html" rel="next"> <style> BODY,TD,TH,UL,DL,OL,H1,H2,H3,H4 { font-family: Arial, Helvetica, sans-serif; } .smaller { font-size: 9pt; } </style> <script type="text/javascript" src="foo.js" charset="ISO-8859-1"> <!-// embedded script, only executed if foo.js is unavailable document.write("foo is gone"); // --> </script> </head>

Document body
The body element contains the actual content of the page, in other words, that what we want to show on the page. There are several basic types of elements: block-level elements describing a structure of the document, as for example <hn> for headings, <p> for marking paragraphs, ... text-level elements for marking a style of the text, either logical (e.g. <em>, <strong>,...) or physical (<i>, ...) Character-level elements and character references. Character references or entities have two functions: escaping special characters (e.g. write &lt; to get "<" on the screen) displaying other characters not available in the plain ASCII character set (e.g. write &yen; to get japanise currency symbol , or &deg; for degree symbol ) hypertext anchors

- 12 -

Example 1: Simple HTML document

<html> <head> <title>Internet programming</title> </head> <body> <h1>Internet programming</h1> <p>Welcome!</p> <p>And this is the second paragraph.</p> </body> </html>

Internet programming
Welcome! And this is the second paragraph.

Block-level elements
<hn> 6 levels of headings <p> Paragraphs <pre> Generates text in a fixed-width font. This element also preserves spaces, new lines, and tabs. <blockquote>, <q> Lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text. Wrongly used to indent text! <br>, <hr> Forced line breaks and horizontal lines. <sub>, <sup> Subscripts and superscripts. <ul>, <ol>, <dl>, <li> Unnumbered, numbered, and definition lists. You can nest lists too. <table> ...

Block-level elements - examples

notes.html

- 13 -

15 Mar 2001

Example 1: Lists
<ol> <li> A few New England states: <ul> <li> Vermont <li> New Hampshire <li> Maine </ul> <li> Two Midwestern states: <ul> <li> Michigan <li> Indiana </ul> </ol>

1. A few New England states: Vermont New Hampshire Maine 2. Two Midwestern states: Michigan Indiana

Example 2: Definition list

<dl> <dt> NCSA <dd> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. <dt> Cornell Theory Center <dd> CTC is located on the campus of Cornell University in Ithaca, New York. </dl>

NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York.

- 14 -

Example 3: Blockquote
<p>Do not misuse quotations.</p> <blockquote> <p>Blockquote is intended for lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text. </p> <p>Do not use them to merely indent text. Indenting does not need to hold in general.</p> </blockquote>

Do not misuse quotations. Blockquote is intended for lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text. Do not use them to merely indent text. Indenting does not need to hold in general.

Tables
Tables have been included into HTML specification in version 3.2. Until then, authors had to carefully format their tabular information within <pre> tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages, despite using tables for layout is not recommended. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. Table Elements Element <table> ... </table> Description defines a table in HTML. If the border attribute is present, your browser displays the table with a border.

<caption> defines the caption for the title of the table. The default position of the ... title is centered at the top of the table. The attribute </caption> align="bottom" can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption. <tr> ... </tr> specifies a table row within a table. You may define default attributes for the entire row: align (left, center, right) and/or valign (top, middle, bottom). See Table Attributes at the end of this table for more information. defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information. defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

<th> ... </th>

<td> ... </td>

notes.html

- 15 -

15 Mar 2001

Tables - example
Example 1: Simple table
<table> <caption> caption contents </caption> <tr> <th> first header cell contents </th> <th> last header cell contents </th> </tr> <tr> <td> first row, first cell contents </td> <td> first row, last cell contents </td> </tr> <tr> <td> last row, first cell contents </td> <td> last row, last cell contents </td> </tr> </table>

caption contents first header cell contents last header cell contents

first row, first cell contents first row, last cell contents last row, first cell contents last row, last cell contents

Text-level elements
Logical: <dfn> for a word being defined. Typically displayed in italics.(WWW stands for World Wide Web) <em> for emphasis. Typically displayed in italics. <cite> for titles of books, films, etc. Typically displayed in italics. <code> for computer code. Displayed in a fixed-width font. <kbd> or user keyboard entry. Typically displayed in plain fixed-width font. (Enter password:) <strong> for strong emphasis. Typically displayed in bold. <var> or a variable, where you will replace the variable with specific information. Typically displayed in italics. (rm filename deletes the file) Physical: <b> bold text <i> italic text <tt> typewriter text, e.g. fixed-width font

Linking to other HTML documents

The most important capability of HTML, which make HTML a language for creating hypertext, is its ability to create hyperlinks to text elsewhere in the same page, to another page on the server or on different server. The links to another piece of text or object (for example image) are marked by anchor element <a>. The target or start of hyperlink is specified by an attribute of element <a>. Several types of anchors can be used:

- 16 -

<a href="whereto">anchor</a> for linking to an object with URI "whereto" <a name="thistext> where the identifier "thistext" is used to name the anchored text as the possible target of a hypertext link. Named anchors can be targeted, from within the same or other document using <href> prepending a #. From the same document:
<a href="#thistext">Poisonous mushrooms</a>

From another document:

<a href="http://www.snakes.com/poisonous.html#thistext">Poisonous snakes</a>

URI - Universal Resource Identifier

Specify the location of files on other servers (URL are only subset of URI):
_______________________________________________________ | ________________ | | | ftp: | | | | gopher: | | | | http: __|____________ | | | etc | | urn: | | | |_____________|__| | | | URLs | | | | |_______________| | | URNs | |_______________________________________________________| URIs

URI Uniform Resource Identifier. The generic set of all names/addresses that are short strings that refer to resources. URL Uniform Resource Locator. The set of URI schemes that have explicit instructions on how to access the resource on the Internet. URN Uniform Resource Name. 1. An URI that has an institutional commitment to persistence, availability, etc. Note that this sort of URI may also be a URL. See, for example, PURLs. 2. A particular scheme, urn, intended to serve as persistent, location-independent, resource identifiers.

URL
A URL includes the type of resource being accessed (e.g., Web, gopher, FTP), the address of the server, and the location of the file. The syntax of URL is:
protocol://host.domain[:port]/path/filename

where protocol is one of file a file on your local system ftp a file on an anonymous FTP server

notes.html

- 17 -

15 Mar 2001

http a file on a World Wide Web server gopher a file on a Gopher server WAIS a file on a WAIS server news a Usenet newsgroup telnet a connection to a Telnet-based service The protocol is sometimes called scheme. The port number can generally be omitted.

Including objects, images, and applets into HTML

HTMLs multimedia features allow to include images, applets (programs that are automatically downloaded and run on the users machine), video clips, and other HTML documents in their pages. For example, to include a JPG image in a document, you may write:
<body> <p>Heres a closeup of the Grand Canyon: <img src="canyon.jpg" alt="This is a closeup of the Grand Canyon."> </body>

Including an image
In addition to src attribute, you should include two other attributes on <img> tags to tell your browser the size of the images it is downloading. The height and width attributes let your browser set aside the appropriate space for the images as it downloads the rest of the file. Some web browsers -- primarily the text-only browsers such as Lynx -- cannot display images. HTML provides a mechanism to tell readers what they are missing on your pages if they cant load images. The alt attribute lets you specify text to be displayed instead of an image. For example:
<img src="UpArrow.gif" alt="Up">

Including an applet
All Java-enabled browsers support the APPLET element, which allows designers to embed a Java applet in an HTML document. It has been deprecated in favor of the OBJECT element.
<applet code="HelloWorld.class" width="150" height="100"> Java applet that draws Hello world string </applet>

or
<object codetype="application/java" classid="HelloWorld.class" width="150" height="100"> Java applet that draws Hello world string </object>

Initial values may be supplied to the applet via the PARAM element.

- 18 -

Including generic object

Earlier versions (prior to version 4) of HTML allowed to include images (via IMG) and applets (via APPLET) only. These elements have several limitations, like problematic inclusion of new and future media types, and the APPLET element only works with Java-based applets. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The OBJECT element is supposed to replace both IMG and APPLET elements. The OBJECT element allows to specify everything required by an object for its presentation by a web browser: source code, initial values, and run-time data. For example, the image of Grand Canyon would be included using OBJECT as:
<body> <p>Heres a closeup of the Grand Canyon: <object data="canyon.jpg" type="image/jpg"> This is a <em>closeup</em> of the Grand Canyon. </object> </body>

Another element used to include objects into web pages is EMBED element. The element is used to embed a plugin into a document. It has been introduced by Netscape in version 2.0. It is also supported by Internet Explorer version 3.0 and higher.

Note
Despite the OBJECT element is specified in W3C recommendation, even new versions of major browsers do not seem to support it. Thus, in practice, you have to use "traditional" IMG, APPLET and EMBED elements.

Examples of included objects

HTML is not suitable for systematic describtion of molecular structures. Multiple formats have been developed for such a purpose independently of HTML, such as XYZ, CML, PDB. In order to show so described molecure, one have to use some external application. This is the case where included objects come to help. Following example shows Java applet viewing some molecules described in CML (Chemical Markup Language), and PDB (Protein Data Bank). Caffeine Bacteriorhodopsin

Extending functionality of the Browser

Though browsers are powerful with their ability to display HTML and gather and send user data to a web server, they are a bit too limited to satisfy demands for more and more resources and freedoms for web applications. How do we display included object of such and such a kind, like the molecular structures in previous example? Why cant we drag and drop excel files into our browsers? Why cant we have more powerful animation, font, and layout tools? Why ... In order to keep browsers quick and manageable they need to stay simple and lean. Early web pioneers discovered that they could extend browsers not by building bigger browsers, but by plugging in smaller components into the browser as needed. Pug-ins were born.

notes.html

- 19 -

15 Mar 2001

Plug-ins are proprietary software tools that are browser aware and of which the browser is aware. They can be executed by the browser when needed and can take advantage of the HTTP pipeline that the browser maintains. Some of the most notable plug-in packages include Java, Real Audio, Real Video, Shockwave, and Acrobat

Java
One plug-in that was actually integrated into the browsers almost as soon as it was released, was Java from Sun Microsystems. The Java plugin run the molecule showing Java applet. Java is a programming language that can be used by anyone to code add on features that would be executed within the context of the browser as so called applets. The browsers added Java Virtual Machines to interpret the Java code downloaded from web servers. We will have a closer look to Java in later lecture, when we will talk about client-side programming.

Active-X
To a certain degree, we can also think of client-side Active-X components as plug-ins. Active-X technology allows web browsers on Microsoft systems to leverage the vast resource of Windows. Like Java applets, Active-X components can be instantiated within the context of the web browser itself making it appear that the web browser is providing the functionality when in fact the Active-X component is simply piggy-backing off the browser. Since any COM (Component Object Model) object in Windows can be an Active-X control, almost every Windows resource can thus be embedded in the browser window. Controls can be as simple as a custom stock ticker or as complex as an application like Microsoft Excel.

Beware that Active-X is a Microsoft-specific technology so it may not ever work on Netscape or on Macintosh.

- 20 -

Exposing the Browser API, Client-side Scripting

Adding all add-on features to the web browsers may cause problems. Specifically, distributing functionality in the form of Active-X controls, plug-ins, or Java applets can mean unacceptable download times for users. In some cases, users wanted a less complex solution. Granted, the solution should be more complex than HTML forms, but not necessarily as complex as Java.

JavaScript
Netscape 2.0 introduced JavaScript (initially LiveScript), a distant cousin of the Java language, as a means for achieving some special effects in the web browser without actually having to resort to a plug-in technology. Soon after the release of JavaScript by Netscape, Microsoft released their own semi-compatible version called JScript in Internet Explorer 3.0. We will be more concerned with JavaScript later.

VBScript
Microsoft released VBScript that leveraged the Visual Basic programming language to do the same thing as JavaScript. Last update: Thu Mar 15 12:11:33 EET 2001

notes.html

- 21 -

15 Mar 2001