Overview of Web Programming Fundamentals of Static Web Programming (HTM

L)

Brian KwanIEE, MCSE, MCSE+I, MCDBA

briankwan@iee.org

Table of Contents

Overview of web programming What is web programming? What are the languages used for web

programming?

Basics of HTML Adjusting Text size and alignment Creating links and mailto links Placing an image to the page

Table of Contents

Creating tables Setting Page’s Body properties Creating frames Enabling with Sound

How to publish your pageLab sessionsReference URL

What is Web Programming?

Internet Explorer

Netscape

•Web browsing becomes our usual practice

What is Web Programming?

Http://www.yahoo.com

For example: search engines

Http://www.altavista.com

What is Web Programming?

For examples: online newspaper

Http://www.the-sun.com.hk

Http://www.appledaily.com.hk

What is web programming?

Other services and information source

Hong Kong Yellow Page:

Http://www.yp.com.hk

Hong Kong government:

Http://www.info.gov.hk

What is web programming?

From the web pages, you may observe: Textual information Scrolling text box Graphics (JPEG, GIF, Animated GIF…) Query Form (asking for users’ input for authentication or

whatever) Information organized in table form, …. ...

What is behind the scene?

When you key in the address...

HTML/DHTML Request:

Http://www.hkma.org.hk/

Web Server Database

Web browser

submit

write

read

Submit queryWeb browser

HTML/DHTML page

HTML/DHTML page

Static

Interactive

The roles of web server and client

Web Server: provides static homepage access (retrieve, and store) information from/to the

database and generate dynamic homepage to web clients

Web Client: reads in the homepage (HTML page), parse it and

display it with appropriate layout

So, what is web programming?

Write programs to enable interactions between web clients and web servers

To be more concrete, your programs are responsible for: deciding the layout of the page in advance creating web pages on-the-fly in responding users’

input recording/retrieving users’ information to/from the

database

Common terminology (命名 )

Web server: HTTP (Hyper-text Transfer Protocol) server

Web client: HTTP client, web browsers, Netscape, Internet Explorer, Opera…etc

Web page : HTML (Hyper-text Markup Language) page, home page, website, …etc

Web address: URL (Universal Resource Locator), link

What programming languages are used?

Many programming languages could be used for web programming: Operate on the client side:

HTML (Hyper-text Markup Language)DHTMLJava appletJava ScriptVB Script...

What programming languages are used?

Operate on the server side:ASP (Active Server Pages)CGIPerlJava ApplicationDatabase Access ObjectCOM Object…

We start with the most basic one…. HTML

Introduction: HTML

HTML: HyperText Markup LanguageIt works in a very simple, logical formatIt is written with TEXT and is saved as a HT

ML file (with extension .html or .htm) The browser reads the HTML file just like you

reads it: top to bottom, left to right

Introduction: HTML

Remember what you have observed in the first few web pages? They are mostly formed with HTML What you use to set certain sections apart bigger

text, smaller text, bold text, … is a series of flag!

Flag (or tag) is the heart of HTML language!

Flags in HTML

Think of flags as commands For example, you want a line of text to be bold Put a flag at the exact point before the letter you

want to bold Put another flag to indicate the end of the bold

command Setting italic fonts, bigger fonts,….are all like this!

Flag format

Flags begin with a less-than sign < and end with a great-than sign >

Inside the < > side is the flagLearning HTML is learning that flag to perfor

m whatever command you want to doExample:<B> HelloWorld </B>

Some simple flags

<HR> This command gives you a line across the page

<BR> This BReaks the text and starts it again on the next line

<P> This stands for Paragraph. It does the exact same thing as the <BR> above except this flag skips a line

Writing your first page

Two items are important to every page: <HTML>: denoting that this is an HTML document <TITLE> … </TITLE>: writing the Title of your page

here </HTML>: end the page with the pair-up of the initial

<HTML>

Writing your first page

So, your sample first page could be like this:

<HTML>

<TITLE>My first page</TITLE><B>HelloWorld</B>

<I>A very nice page </I>

</HTML>Save this as a .html (or .htm) file, and open it with a

web browser to see the effect

Manipulating text in HTML: size

Heading commands: <H1> to <H6> <H1>: The largest heading size <H6>: The smallest heading size

Font size commands: <FONT SIZE> There are 12 font size commands available to you: +6

through +1 and -1 through -6 +6 is the largest, while -6 is the smallest Use like this: <Font Size=“+3”> … </Font> We call “Size” the attribute of the Font command Two other attributes related to the Font command: Color

and Face

Manipulating text in HTML: alignment

Centering text: <Center> … </Center> Example: <Center> This is a statement in the center of the line

</Center>

Aligning to the right: Use <P> with ALIGN attribute <P ALIGN=“Right”> …. <P>

Creating links to other pages

Example:<A HREF=“http://www.hkma.org.hk/”> Click here t

o go to HKMA homepage </A>A: Stands for anchorHREF: Stands for Hypertext referencehttp://www.hkma.org.hk/: Full address of the li

nk to goClick here…. : the Text you want to display out /A: Ends the entire link command

Creating page links

When you want to jump within a page by a simple click, you can use page links

Two steps involved: 1. Set a point for click (source)

<A HREF=“#bottom”> Click here to scroll down</A>

2. Set a point for destination<A NAME=“bottom”>..... Other html codes

Creating page links

Notes: 1. We call the word followed by HREF the codew

ord 2. There is a # sign in the front of the codeword. Y

ou need to denote it as an internal link. 3. Try to keep your codeword short.

Page that uses page links: e.g. Guestbook ....

Allow people to reach you by email

Example:<A HREF="mailto:hkma@hkma.org.hk">Click Here

To Write Me</A> Similar to the link created to other pages Change the “http://” to “mailto”

Placing images on the page

Example:<IMG SRC="image.gif”> IMG: Stands for image. It tells the browser that an i

mage will be hereSRC: Source. This is an attribute of the IMG comma

nd. It tells the browser where to find the image image.gif: This is the name of the image

A note on Image Format

Three basic formats in WWW: .gif: The format is invented by Compuserve, and it is

very popular. It is a series of colored picture elements, or dots, known as pixels, that line up to make a picture.

.jpeg or .jpg: There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Join Photographic Equipment Group, which is the organization that invented the format.

A note on Image Format

.bmp: This is a bitmap. You are not supposed to put a bitmap as an image although Internet Explorer supports this.

A general feel on the size of these three formats:BMP > GIF > JPEG

Putting link and image together

Image link? Actually, just put the <A> and <IMG> together lik

e this example: <A href=“http://www.hkma.org.hk/”> <IMG SRC

=“logo.gif”> </A>

More on images

Align an image to the right: <IMG ALIGN="right" SRC="image.gif">

When text goes along with images, you can specify the text alignment to the image top: <IMG ALIGN="top" SRC=”1.gif"> top text middle: <IMG ALIGN=”middle" SRC=”1.gif"> middle te

xt bottom: <IMG ALIGN=”bottom" SRC=”1.gif"> bottom te

xt

More on images

Change the size of the images: Image is made up of pixels: 100 x 100 pixels You can view the image’s information in any image editor You can specify a new Height x Width combination to the

image to display out <IMG HEIGHT = “##” WIDTH = “##” SRC=“1.gif>

A little bit advanced….

Starting from this page, some advanced skills in HTML are introduced Table Background Frame Sound

Tables in HTML

Use the <TABLE> … </TABLE> command A simple table could be like this: 2 x 2 table

<TABLE>

<CAPTION> This is the table caption</CAPTION>

<TR>

<TD> Row 1, Col 1 </TD> <TD> Row 1, Col 2</TD>

</TR>

<TR>

<TD> Row 2, Col 1 </TD> <TD> Row 2, Col 2</TD>

</TR>

</TABLE>

Tables in HTML <TABLE> .. </TABLE>: Starts and ends the table <TR> .. </TR>: Starts and ends a table row <TD> .. </TD>: Starts and ends a cells in the table

Some attributes with TABLE command: <TABLE Border = “1” CellSpacing=“1” CellPadding=“1”> ..

</TABLE> Border: How large the border should be CellSpacing: Amount of space between cells CellPadding: Amount of space between cell border and cell co

ntent

Effects with Table

A calendar in Table form

A table in another table

Effects with Table

Image in the cells of the table

Putting colors to the table

Background in HTML

The command <BODY> to change the background immediately follows the <TITLE> command

Change the background color with: <BODY BGCOLOR=“#FF0000”> .. </BODY>

Change the background wallpaper with: <BODY BACKGROUND=“image.gif”> .. </BODY>

Frame

What is a frame? See this obvious example:

Frame

Using frame, you could represent several HTML files in one page

To coordinate the individual HTML files, you need a main HTML file telling the browser how many frames and in what orientation they are

Frame<HTML>

<TITLE>First Frame Page</TITLE>

<FRAMESET COLS="50%,50%">

<FRAME SRC=”left.htm">

<FRAME SRC=”right.htm">

</FRAMESET>

</HTML>

FRAMESET: starts a frame page COLS: Set the coming specified frames in columns FRAME SRC: denotes the source of the frame pages Similarly, you can have ROWS for horizontal splitting

Do you know how to make the demo page now?

More on Frame

Suppose we have two frames (left frame and right frame). We want to display a page on the right frame upon a click on the left frame (with the <A> command)

We have to set the NAME in the <FRAME> and set the TARGET in the <A> command

More on Frame

<HTML>

<TITLE>First Frame Page</TITLE>

<FRAMESET COLS="50%,50%">

<FRAME NAME=“LEFT” SRC=”left.htm">

<FRAME NAME=“RIGHT” SRC=”right.htm">

</FRAMESET>

</HTML> In the anchor command on the left page, we specify what to display on the RIGHT

Frame upon the mouse click:

<A HREF="http://www.hkma.org.hk” TARGET=”RIGHT">

Common homepages with Frame

Http://www.mingpao.com/

Common homepages with Frame

Http://www.easyfinder.com.hk

Common homepages with Frame

Htttp://www.freethemes.com

Enable your page with Sound

Sounds on the Net are a great thing!At least two ways in offering sounds to your

page: helper application embedding

EMBED is not standard HTML, it can only be understood by Netscape browser

Enable your page with Sound

Helper application programs that are attached to the Netscape browser Options -> Preference -> Helper Applications

When a specified file type is enabled, the steps are like: 1. The browser get the sound file and downloads entirely 2. Once the download is complete, the helper application is

invoked 3. The browser loads the sound file into the application 4. The application plays the sound file

Enable your page with Sound

So, with the helper application, you can add code like:<A HREF="http://www.yoursite.com/filename.wa

v"> Click Here</A>

It is actually a simple link! If you use this method (helper application), you assu

me that the user has the appropriate player

Enable your page with Sound

Embedding a sound means Include sound commands in the HTML page Use a plug-in to run it

Plug-ins are programs that help your browser to perform at a higher level

Similar to helper application, except that it launches within the browser, and not a separate application

Enable your page with Sound

MIDI: Musical Instrument Digital InterfaceFormat for embedding: <EMBED SRC="peanuts.mid" AUTOSTART=FALSE

LOOP=FALSE WIDTH=145 HEIGHT=55 ALIGN="CENTER">

</EMBED> After embedding, you will see a control like this:

What you can create so far?

On general layout: Display in frames Display with a particular background color or a specified wallpaper

image

On the page content: Display textual information with different font sizes, font color, and

font faces Display image (JPEG, GIF) Provide links to other pages or provide links to mail information to a

specified email address Display information (either image or textual information) in table form

How to publish your page?

How? Just copy your HTML files (and other resource files like .jpg, .gif, ... ) to the appropriate directory of the Web Server

This process is called uploading Use software like WSFTP32, ... for uploading

You can publish your pages to your account in an ISP. The ISP will charge you some price in hosting the pages.

Learn more from your browsers!

View the source code of the web site by: If you are a Netscape user:

Menu --> View --> Document Source

If you are a Internet Explorer user:Menu --> View --> View Source Code

Lab sessions

L1: Familiar yourself with the web browsers. Configure your web browsers (Internet Explorer or Netscape). What options to set?

L2: View the source code of several websites: http://www.yahoo.com/ http://www.appledaily.com.hk/ http://www.the-sun.com.hk/

L3: Open a text editor and type in the key-body of a HTML page. This includes <HTML> <TITLE>. Enter some texts to adjust the size of the words/paragraph inside.

Lab sessions

L4: Create a page with links to the following sites:http://www.info.gov.hk/

http://www.yp.com.hk/

http://www.the-sun.com.hk/ L4: Create Image links to a JPEG file, to a GIF file, adjust the

size of the Image to see the effect in the browser L5: Create a table of 5 x 5, adjust the Border, CellSpacing, Ce

llPadding to see the effect in the browser L6: Create a table of 2x2 within the (row1, col1) of another ta

ble of 5x5

Lab sessions

L7: Put images into each of the cells in a table of 2x2. Provide the images with links to other pages.

L8: Create a frame page with two columns (left and right). In the left column, create another frame page with three rows. In the right column, create another frame page with two rows.

Reference URL

For demonstration: HKMA homepage: http://www.hkma.org.hk/ Microsoft homepage: http://www.microsoft.com/ Yahoo: http://www.yahoo.com/ Altavista: http://www.altavista.com/ Appledaily: http://www.appledaily.com.hk/ The-Sun: http://www.the-sun.com.hk/ YellowPages: http://www.yp.com.hk/ Hong Kong government: http://www.info.gov.hk/

Reference URL

Useful HTML links and resources: How the web works:

http://www.webdeveloper.com/html/html_how_the_web_works.html

HTML and others: http://www.htmlgoodies.com/

Reference software to download

Web browsers Netscape: http://netscape.home.com/ Internet Explorer: http://www.microsoft.com/ Opera: http://www.opera.com/