Introduction to Web-Based Systems HTML, XML, and JavaScript

Introduction to Web-Based SystemsHTML, XML, and JavaScript

© UW Business School, University of Washington 2004

2

Outline

• Client/Server Systems• HTML• XML• JavaScript


3

Client/Server Model

Based on the distribution of the three components,

N-tier client/server models have been developed

Presentation Logic

Business Logic

DBMS


4

Two-Tier Client/Server Architecture


5

Three-Tier Client/Server Architecture

Application ServerNT/Unix

PresentationPC/Workstation

Database Server


6

Client-Server Characteristics

• Strong emphasis on bringing user-friendliness– Familiar applications and interface to the

user

• Applications are distributed– Different software component on different

machines

• Data are usually centralized– Usually on a relational database platform


7

Client-Server Challenges

• Advantages– Scalability

– Flexibility

– User interface

• Challenges– Heterogeneous system components

• Many platforms, versions

• Quality: difficult to predict

– Vendor independence• Any choice will limit future options


8

Web-Based System Architecture

SOURCE: INTERSHOP


9

Traditional vs. Web-based Clint/Server Model

• User interface– Traditional: platform dependent– Web-based: universal

• Server– Traditional: server has to communicate

with different programs on different platforms

– Web-based: only need to generate HTML files


10

Edit Your HTML File

• PC– using Notepad

– If you have ProntPage, use HTML editor

• UNIX – Use Pico or vi


11

HTML

• A type of SGML (standard generalized markup language)

• HTML uses paired tags to markup different elements of a page

• Tags are not case sensitive


12

A Simple HTML File

<html><head><TITLE>A Simple HTML Example</TITLE></head><body><H1>HTML is Easy To Learn</H1>Welcome to the world of HTML.This is the first paragraph.<P>And this is the second paragraph.

</body></html>

http://faculty.washington.edu/mfan/ebiz509/class3_example1.html


13

Paragraphs in HTML

Carriage return in an HTML file is not interpreted – Use <br> to change line– Use <p> to start a new paragraph

Any number of white-spaces are compressed into a single one


14

Lists

Unnumbered Lists:

<UL>

<LI> apples

<LI> bananas

<LI> grapefruit

</UL>

Numbered Lists:

<OL>

<LI> oranges

<LI> peaches

<LI> grapes

</OL>


15

Inline Image

Syntax:<IMG SRC=ImageName aligh=top height=50 width=40>

Attributes:SRC="image_url"

ALIGN="bottom", "middle", "top" – ALIGN tells the browser how to align the image with the

neighboring text.

HEIGHT="n", WIDTH="n"– HEIGHT and WIDTH specify the display height and width

(in pixels) for the image.


16

Hyperlinks

The most important capability of HTML Both text and image can serve as anchors

for the link

<a HREF=“http://www.washington.edu”>University of Washington</a>

<a HREF=“http://www.washington.edu”> <IMG SRC=“uw.gif”></a>


17

Control the Font

Text <FONT SIZE= +2>resize the text</FONT> text

Text <FONT SIZE= -2>resize the text</FONT> text

<FONT SIZE=2>define the font size</FONT>

<FONT size=2 face=“arial” color=“red”>define the fond face</FONT>

<FONT FACE="arial,helvetica">browser will try arial first, then elvetica of arial is not present</FONT>

<B>Bold</B>

<I>Italic</I>

<center>center</center>

<br> line break


18

Table

Basic tags<TABLE> defines a table in HTML</TABLE> <CAPTION>the title of the table</CAPTION><TR>a row within a table</TR><TH>a table header cell</TH><TD>a table data cell with the text aligned left and centered vertically</TD>

AttributesBORDER - appearing in the TABLE tagALIGN - can appear in CAPTION, TR, TH, or TD

- values: left, center, and right, e.g. align=center. VALIGN - can appear inside a TR, TH, or TD

- values: top, middle, bottom. WIDTH=<value_or_percent>


19

A Table Template <TABLE border=1>

<CAPTION><b> Table Name </b> </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>



20

XML

• eXtensible Markup Language • Derived from SGML – Standard Generalized

Markup Language • HTML is also a special SGML


21

What’s Wrong with HTML

• Presentation-oriented publishing• Lack of structure • HTML does not allow you to define your own

tags• Functions of XML

– Enable structured data interchange

– Distributed processing


22

An Example

<?xml version=“1.0”?>

<book><title>XML</title>

<author><FirstName>Sean</FirstName>

<LastName>McGrath</LastName>

</author>

<KeyWord>XML, Internet</KeyWord>

</book>

http://faculty.washington.edu/mfan/ebiz509/class3_example3.xml


23

JavaScript

• Scripting language• JavaScript has nothing to do with Java.• JavaScript runs on the web browser - client-

side.


24

JavaScript: What It Can and Cannot Do

• Control document appearance and content

– Generate documents from scratch

• Control the browser

– Window object has methods to pop up dialog boxes & get inputs

– Create & open new windows

– Control over which Web pages are displayed

• Interact with document content– Form verification


25

Objects

• JavaScript is object-oriented• Two basic objects

– window: browser windows– document: HTML documents

• Objects have properties– object_name.property_name– e.g. image.width, image.height

• Methods • Even handlers


26

JavaScript Example 1

<HTML><HEAD><TITLE>Example 4</TITLE></HEAD><BODY> <SCRIPT LANGUAGE="JavaScript">document.write("Hello World!")</SCRIPT></BODY> </HTML>



27

JavaScript Example 2: Open a New Window

<HTML><HEAD><TITLE>Example 5</TITLE> <SCRIPT language="JavaScript">function new_window() { win2 = window.open("ex1.html", "", "resizable=yes,height=60,width=60");

} </SCRIPT>

<BODY><a href="#" OnClick="new_window();">Open a new window</a>.</BODY></HTML>



28

JavaScript Example 3: Alert Window

<HTML><HEAD><TITLE>Example 6</TITLE><SCRIPT language="JavaScript">function sayHi() { win2 = window.alert("Hi there");}</SCRIPT>

<BODY onLoad="sayHi();"> An alert window will show up when you load this page. </BODY></HTML>



29

Additional Resources for JavaScript

• http://www.webteacher.com/javascript/

Documents

Introduction to Web-Based Systems HTML, XML, and JavaScript