0.comp1270/notes/w12part2.pdf · 2011-11-21 · raster graphics! raster graphics are produced by...

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<0

Graphics in HTML

W ki ith IWorking with Images

Textbook reference:

Pages 114-133 of Chapter 5

Graphics

1. Graphic File formats

2. Storing Graphics

3 Graphics Considerations3. Graphics Considerations

4. Graphic Formats for the Web

5. Obtaining Graphics

6. The <img> tag and attributes

7. Images and Links

1. Graphic File Formats

! Two Major graphics formats

! Vector or object-oriented

• e g the Office Drawing toolse.g. the Office Drawing tools

! Raster or bitmapped

• e.g Paint

! Formats are constantly being refined to

add functionality & produce higher picture

quality with smaller files

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<.

Vector graphics

! Vector Graphics typically are generated

using drawing or illustration programs

• e.g., Adobe Illustrator, Corel Draw g

• Pictures are composed of mathematically-

defined geometric shapes (objects)

• e.g. lines, rectangles, ovals

• Objects have easily changed properties

• size, position, line colour, fill colour, overlay

Raster Graphics

! Raster graphics are produced by digital

image capture devices

• e.g. digital scanners or digital cameras

! or by pixel editing programs

• e.g. Adobe Photoshop

! Composed of a matrix (grid) or bitmap of

picture elements (pixels)

• e.g. Windows Bitmap (.bmp), Graphics

Interchange Format (.gif)

Raster vs. Vector

! Raster:! easily shared across various platforms

! difficult to modify

! does not scale well; visible loss of quality as they

are made largerg

! Vector:! scales with no loss of quality

! does not support photographic imagery well

! problematic for cross-platform exchange

! We will use Raster graphics for the Web

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

2. Storing Graphics

! Raster Graphic images are made up of pixels -

picture elements

• Pixels are arranged in a rectangular grid

I i i ifi d idth h i ht• Image size is specified as width x height

! Raster files store information about the pixels

• Some formats use compression techniques

• smaller files, but you lose info about individual pixels

! Vector files store information about objects

• position, size, colour, etc.

• No compression is used

Storing Graphics! Each pixel is represented as a number or a set

of numbers• Grayscale (!black and white") needs a single

number for intensity

• Colour is represented as 3 numbers (RGB values)p ( )

! Graphics take up significant space • 100 x100 pixel image contains 10,000 pixels, each of

which takes 1–4 bytes to store - that#s 10KB at minimum (= 2 pages of text) for a small image like the one above

• Compression reduces this space usage

Displaying Graphics

! Two factors determine how large a

picture will look when it is displayed

• The picture size (width x height)p ( g )

• The display device resolution (pixels per inch)

! Typical resolution values for displays

• Computer display: 72-100 ppi

• Laser printer: 600 ppi

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

3. Graphics Considerations! Well thought-out graphics are invaluable

• But, if used excessively, they can be distracting and a waste of bandwidth

• Some users turn off graphics viewing to speed b iup browsing

• How will your page appear without the graphics?

! Which formats are supported by browsers?• Not all formats work with all browsers

! Which formats are best for the type of images I want in my web site?

Graphics Considerations

! Download times can be minimized by

keeping the file size small

• What are the tradeoffs?

You can reduce file size by:! You can reduce file size by:

• Reducing image size

• Tradeoff: a smaller picture

• Increasing file compression

• Tradeoff: reduced image quality

4. Graphic Formats for the Web

! Two formats are supported by many

browsers

• GIF

• Graphics Interchange Format

• JPEG

• Joint Photographic Experts Group

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

Bitmap graphics

! Windows BitMap (.bmp) format stores info about

each pixel

• large file sizes

BMP i th ti f t f th Wi d! BMP is the native format for the Windows

environment

! Web browser support has been limited, but most

newer versions of popular browsers will display them

GIF Images! Graphics Interchange Format

! can display ! 256 (8-bit) colours

! used for

• most graphics, line art, textg p , ,

! most suitable for

• bit-mapped graphics, non-photographic images with

modest color requirements, e.g., logos, buttons

! Two standards for GIF

• GIF87a (graphics) & GIF89a (graphics + other features)

GIF89a Features! Animation

• File contains a series of images

displayed in a loop

! Transparent background

• One colour is designated as the

AnimationFactory.com

• One colour is designated as the

background; underlying colour shows

through

! Interlacing

• Every second row of pixels is loaded

• Has the effect of quickly loading a

(lower quality) image at first

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

Animated gif images

Making animation

! There are several animation applications

you download

• freeware or free trial versions

• e.g. Advanced GIF Animator for Windows

• http://www.gif-animator.com/

JPEG Files

! Can display millions of colours in a compressed

format

! Most useful for graphics requiring

G• More colours than GIF can provide

• More precise colour reproduction

! Standard format for photographs taken with digital

cameras

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<5

When to use…GIFs

! Create animated

images

! Use transparent

JPEGs

! Display photographs

! Use images that

contain more than

colors

! Display logos or clip

art up to 256 colors

256 colors

! Reduce the file size

through "lossy"

compression.

PNG Graphic Types

! The PNG graphic type is becoming an increasingly popular graphic type

! It is sometimes used in place of gifs

Wh ?! Why?• Enhanced functionality

• Free…

! Downfalls• it doesn't support animation

• Not all browsers support PNG fully• although recent versions of IE and FireFox do support it

PNG vs GIF

! PNG formally stands for Portable Network Graphics format

• Informally: PNG's Not GIF

! Patent on compression method in GIF

1994 U i d it i t t t• 1994: Unisys announced it was going to start charging firms developing software to produce GIFs

• PNG was the resulting open-source response

• More colours, better compression, more configurable transparency, ...

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

5. Obtaining Graphics

! Easy to copy graphics from web pages

! Right click on the graphic

• Gives you a menu that will show the file type,

and let you save the graphic as a fileand let you save the graphic as a file.

! Check the site to see if you have copyright

permission to use the graphics.

! Google has an image search tool

Producing your own Images! It's also possible to make your own

graphic images

! Graphics tools (better ones than Paint)

• Adobe Illustrator

• CorelDraw

! Scanners and digital cameras capture

photographic images into JPEG files

• Cheap and getting cheaper

Using Word to produce Images

! Microsoft Word 2010 can be used to create

GIF or PNG images

a. Create images using Word's Picture tool

I t Sh N D i C• Insert - Shapes - New Drawing Canvas

• Insert - SmartArt

b. Copy the image and Do a Paste Special

• As a GIF or PNG image

c. Right-click on the pasted image and Do a Save as

Picture…

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<=

Using Word to produce Images

! Earlier versions of Word can also be used

• The procedure is different though

! Create images using Word's Picture tool

I t Sh N D i C• Insert - Shapes - New Drawing Canvas

• Insert - SmartArt

a. Do a Save as Web Page. Word will produce a web

page and a folder.

b. Inside the folder are your pictures saved as GIF

files (e.g. image001.gif, image002.gif, etc.)

c. Rename the image files, move them to your web

site and discard the rest

The image element

! The image element <img> places an

image in your page.

• The source attribute src specifies theThe source attribute src specifies the

location of the image file

• it must be present in the image tag

• e.g. place an image contained in oreo.gif

<img src="oreo.gif" />

The src attribute: relative path! The src attribute can specify a relative path

e.g. <img src="images/oreo.gif" />

• This will display a file called oreo.gif, located in a

subdirectory named images

e.g. <img src="../nav/back.gif" />

• This will display a file called back.gif. To find it, we go

up one directory and into a subdirectory called nav

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<0/

The src attribute: absolute path! The src attribute can also specify an

absolute path, though this is not commonly

used

• e.g.

<img src="http://aplace.ca/pics/mug.gif" />

• Web sites don't like people linking to images on their

site since it generates extra load on their web server

The alt attribute

e.g. <img src="oreo.gif" alt="my cat" />

• the alt attribute is important too - it gives a message

to display while the image is unavailable

i e while the image is loading if the user has image• i.e., while the image is loading, if the user has image

loading turned off, or if some error occurs so the

image can't be fetched

• It gives the user an idea of what is supposed to be

or will shortly be there

• Used by screen-readers for the visually impaired

and other non-graphical browsers

• XHTML Strict requires the alt attribute

height and width attributes

e.g. <img src="oreo.gif" alt="my cat"

height="400" width="600" />

! Specify height and width in pixels• Usually used to specify the actual size of the image

• It helps a browser load pages faster since it knows• It helps a browser load pages faster since it knows how much room to leave for the image

! You can stretch or shrink a graphic using these attributes

• But just making it appear smaller does not make the file size smaller!

• And it can distort the picture

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<00

Text wrap

! Browsers place images inline with text• i.e. an image is treated like another (possibly very large)

character in a line

• This is also how Word treats images

W CSS t t t d i! We use CSS to wrap text around images• float: left | right | none

• left places the image on the left margin and flows text along the right side of the image

• right places the image on the right margin and flows text along the left

• none places the image inline (the default)

• e.g. img.left{float: left} /* rule in a stylesheet */

<img src="oreo.gif" alt="my cat" class="left" />

Ending text wrap

! The CSS clear property specifies whether an element allows floated elements on its sides

• We can use it to stop an element from flowing beside an image

it will move the paragraph below the image• it will move the paragraph below the image

• clear: none | left | right | both

• none (default) continues wrapping around floated elements

• left moves the element below left floated images (but not right floated images)

• right moves the element below right floated images (but not left floated images)

• both move the element below both left and right floated images

Vertical alignment

! We can control the vertical alignment of inline images

! We use the CSS vertical-align propertyvertical align: baseline | top | bottom |• vertical-align: baseline | top | bottom | …

• baseline (default) aligns the bottom of the image with the "baseline" of the text

• top aligns the top of the image with the tallest element in the line

• bottom aligns the bottom of the image with the lowest element in the line

• many other values are possible

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<0.

7. Images and links! You can combine an image with a link

! Just put the image tag inside the link

<a href="../index.html">

<img src="home.gif" alt="home" />g g /

</a>

! This would place the graphic home.gif on your

page, and link it to the default page in a

directory above.

Images and Links

! A webpage with links to many images often shows them first as thumbnails

• Thumbnails are smaller images that will load quickly and give the user an idea of what the larger image looks likelooks like

• The user can then pick and download only the large images they want to see

! You can link to the large image directly, e.g.<a href="oreo.gif">

<img src="oreo_thumb.gif" alt="thumbnail" />

</a>

Video Content

! Use the object element

! Example from textbook, page 130

<div><object data="puppy.mpg" type = "video/mpeg"j p ppy pg yp / p gwidth = "600" height = "480"><param name = "src" value ="puppy.mpg" /><param name = "autoplay" value =!true" />

</object></div>

!"#$%&'( )&*+,"-./0.

1234-0.5/-167$8+,"-9(#:,-;; 5<0=

Audio Playback

! Example from textbook, page 131

<div><object data="test.wav" type = "audio/x-wav"j yp /width = "250" height = "30"><param name = "src" value ="test.wav" /><param name = "autoplay" value ="true" /><param name = "autoStart" value ="1" />

</object></div>

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?4

Introduction to UNIX and SFTP

Introduction to UNIX

1. What is it?

2. Philosophy and issues

3 Using UNIX3. Using UNIX

4. Files & folder structure

1. What is UNIX?

! UNIX is an Operating System (OS)• All computers require an OS

• The OS is a program that effectively controls a computer!s resourcescomputer s resources

• Memory

• Hard drive and files

• Peripherals

• Among other things, the OS allows you to launch programs, save files, and communicate with other computers

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?2

What is UNIX, cont!d

! UNIX comes in many flavours and typically runs

on larger, multi-user machines, or on the

machines of the technically savvy

O S hi S OS d S l i• Our Sun machines run SunOS and Solaris

• Mac OS X runs BSD Unix

• Many of our PCs run Linux

! UNIX is common on Internet-based machines

! You should already have an ACN UNIX account

2. Open Source/Free Software

! Which is better, Linux or Windows?

! Should we have to pay for an OS?

• Is it really the "Microsoft Tax#?Is it really the Microsoft Tax ?

! What are the advantages/disadvantages

of letting everyone have access to an

OS!s source code?

! Should you use Linux?

3. Using UNIX

! Recall that in COMP 1260, you used

claimid to claim your U of M mail account

• This is also your UNIX accounty

! Many of the computers that run UNIX on

campus are behind locked doors

• You can still use them; you don!t need a key,

just your password and a communications

client

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?@

Connecting with telnet! telnet is a communications client

• Available on some Microsoft Windows

platforms

• Acts as a client for a corresponding server on

another (remote) computer

Telnet

client

Your computer Remote computer

(running a

telnet server)

A Problem with telnet

! Telnet uses the Internet to communicate with the remote computer

• The protocols that are used on the Internet are very good at providing robust, flexible communicationcommunication

• They do not provide secure communication, though

! Telnet sends its packets in clear text form

• This means that information you type into telnet (like userid!s and passwords) is vulnerable to being intercepted by someone with malicious intent

! We want a communications client that encrypts (scrambles) our communications

SSH

! Short for Secure Shell

! It is a communications client that encrypts its information• If someone intercepts the packets, the

information will just be gibberish

! SSH Secure Shell for Workstations (and Windows) is available at Software Express• It also contains a secure FTP client

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?@

Using SSH client

! Choose File – Connect

! Enter Host Name and

UMnetID

• you get another dialog

for your password

! You can save this info

as a Profile so you

don!t need to type it

With OS X on a Macintosh

! Use Terminal (in Utilities)

! To connect, at the prompt enter

• ssh -l UMnetID Host

! You will be prompted for your password

Another Option

! SSH is a text-only program

• You type text commands, you get text

responses

! Recall from COMP 1260: there are

graphical user interfaces to UNIX

• Many are based on X (or X-Windows)

• There are X terminals in the labs, and X

programs available on Software Express

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?@

After Connecting

! OK, I can get in. Now what?

• Regardless of whether you are using X or SSH, you will have a window where UNIX commands can be executed

• This command line will have a prompt such as !pollux%" or !mira%"

• This is where you enter UNIX commands and launch programs (more later!)

• Your UNIX account will potentially allow you to do many things. In this class we will use it to host our personal web pages.

! The UNIX environment

• Among other things, your UNIX account is

used to store directories and files

• A UNIX directory is similar to a Windows folder

4. Files and Folder Structure

y

• Files consist of documents, applications, and

data ~

file1

file1 file2

file2

dir2

dir1

UNIX

• Every UNIX directory and file can be

identified by a unique path name

• ~/file1

/di 1/fil 1

~

file1

file1 file2

file2

dir2

dir1

• ~/dir1/file1

• ~/dir1/dir2/...

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?@

• The tilde (~) represents your home directory

• Every UNIX user has their own home

• Name matches user id

• At the top of the hierarchy is the root

UNIX

directory represented by /

/

umable

u2u1 u3

umbaker umchan

UNIX

! This means that all your files are on the

same computer (same hard drive) as

everybody else!sy y

• For privacy!s sake, files have permissions

• Can decide whether or not they are

accessible to others

UNIX

• When permissions allow, it is possible to

access files in another user!s home directory

• You don!t have to know exactly where; shortcut:

h /fil 2• ~umchan/file2

/

umable

u2u1 u3

umbaker umchan

file2

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?8

UNIX

• Making files available on the web will require

a directory known as public_html under your

home directory

A HTML fil i th ll d i d ht l ill b• An HTML file in there called index.html will be

the starting point (home page) of your site

~

index.html another.html some_dir

public_html

! Exercise: name the paths to all 6 files in

the following diagram

UNIX

~

dir3

dir2dir1 file1

file3 dir4

file6

file2

file4 file5

File Types and File Transferring

1. File types1. Platform Dependence (ASCII vs binary)

2. Transferring files between platforms

SFTP3. SFTP1. Uploading

2. Auto Select

3. Changing permissions

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?>

1. File types

! There are many types of files on a computer

• Executable (application) files

• Documents created by applications (word processor,

graphics, sound, video, etc.)

• OS files• OS files

• Library files (dll’s)

• Text files (txt, html, ps)

! Most of them are meant to be ‘read’ by the

computer or a program – these are referred to as

binary files

! Text files are meant to be read by humans

File Types!"!!!!""#!"!!!!!"#!"!"!"!!

$%&'() *&+,-./

01#0"#20%&'(#$3(4,5(6&7,'/

Application Text Editor

!"#$$%&'()*

8(6# 9(4# :&+,-.######;,'<(=2## 0"# !"!!!!!" >#=?# 01# !"!!!!""###@

A0## 20# !"!"!"!!###B

,55#CD#E$F,63&+(#G,+H<,H(&+IJ-<6J&K+/

@#>#B$>L@MM#B(4J/

pp Text Editor

Representing bytes

! All files consist of a series of bytes

• Recall a byte consists of 8 binary digits (bits)

! A byte is usually represented using

h d i l (h ) di ihexadecimal (hex) digits

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

• Each one represents 4 bits, so a byte is represented

by 2 hex digits

• Writing hex is often easier than writing binary

• e.g. 01011100 = 5C

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?@

Interpreting bytes! Since all files are just a series of bytes, what

is the difference between binary and text files?

• All files are made up of bytes

• In a sense, all files are binary, y

! It!s in the way they are interpreted• An application is interpreted as a series of

machine instructions

• An MS Word document is interpreted as a description of the document!s contents

• A text file is interpreted as a sequence of characters (typically ones from a keyboard)

ASCII! In order to interpret bytes as characters, we

use a code that maps bytes to characters

• The ASCII (American Standard Code for

Information Interchange) code is the most

common

• e.g. some characters and ASCII codes (in hex)

"0! (30), "1! (31), … "9! (39)

"A! (41), "B! (42), … "Z! (5A)

"a! (61), "b! (62), … "z! (7A)

"!! (21), "?! (3F), "(" (28), ")! (29), "{"(7B), "|!

(7C)

Collating sequence! The ASCII codes form a collating sequence

that is used to sort text alphabetically

1. We compare two strings byte by byte

2. When we find 2 bytes that are different, the text

string with the smaller byte is first alphabeticallystring with the smaller byte is first alphabetically

3. a string formed by adding to the end of another

string appears later alphabetically

! e.g. "cat! < "dog! (63 < 64)

"see Spot! < "see spot! (53 < 73)

"Gord! < "Gordy! (rule 3)

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?43

Whitespace! Some ASCII codes represent whitespace

• Characters that aren!t visible but control the layout of the text

• e.g. Tab (09), Space (20), Backspace (08),CR (carriage return – go to beginning of line) (0D),NL (new line – move down a line) (0A),NP (new page) (0C)

! In Unix, man ascii will give a table of all the ASCII codes

! ASCII tables are available on the web (see last slide)

Text editors

! A text editor like Notepad allows us to type text and store it as a sequence of ASCII bytes

! When we open a text file, the editor interprets the bytes as ASCII characters• Binary files can be opened in a text editor, but

the result would be mostly gibberish – most of the bytes aren!t aren!t likely meant to be interpreted as characters

Typing in a text editor

! What happens when we type the following into a text editor?

HelloGoodbyeGoodbye

! What is the sequence of bytes stored in the text file?

• Hello = 48 65 6C 6C 6F

• Goodbye = 47 6F 6F 64 62 79 65

• What about ?

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?44

Platform dependence

48 65 6C 6C 6F 0D 0A

47 6F 6F 64 62 79 65 0D 0ADOS/Windows

! Unfortunately, different computers deal with Enter in different ways

• When you type Enter, it is stored differently

47 6F 6F 64 62 79 65 0D 0A

48 65 6C 6C 6F 0D

47 6F 6F 64 62 79 65 0D

48 65 6C 6C 6F 0A

47 6F 6F 64 62 79 65 0A

Mac

UNIX

2. Transferring files

! Platform dependence is a problem when

we want to transfer files between

computers

• Binary files can be transferred without change

• Text files created on one platform cannot be

transferred to another platform without

changes

Transferring files

! The Internet is used to transfer millions of

files every day – both binary and text

• We don!t worry about platform dependence y p p

when using a browser because it performs

the conversion of text files automatically

! We will use Secure File Transfer

Protocol (SFTP) to transfer files from our

computer to a remote computer

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?42

3. SFTP

! SFTP is a secure Internet client used to transfer

files between computers

• It is aware of the platform dependence of text files

and performs the conversion for us when weand performs the conversion for us when we

transfer text files.

! We just have to tell it what sort of transfer to

use for a particular file

• Binary – transfer the bytes unchanged

• ASCII – substitute the correct character(s)

SFTP Terms! SFTP transfers files between a local

computer and a remote computer

• An SFTP client runs on the local computer

• It communicates with an SFTP server on the remote computerp

• Remote computer sometimes called a host

! SFTP has two transfer modes

• Binary and ASCII (text)

! Transfers to the local computer are called downloads

! Transfers to the remote computer are called uploads

Secure File Transfer Client

! Connect to a host just

like SSH

! Save as a profile

! Client has 2 fileClient has 2 file

navigation windows

• left is for local

computer

• right is for remote

computer

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?4@

SFTP with OS X on a Macintosh

! Use FileZilla (available from Software Express)

or

! TextWrangler for text or html files

• File / Open from FTP/SFTP Server (downloads• File / Open from FTP/SFTP Server … (downloads

file from server)

• File / Save to FTP/SFTP Server … (uploads file to

server)

• File / Save a copy to FTP/SFTP Server … (uploads

a copy of the file to server)

Transferring files and folders

! Drag and drop from

one window to the

other

Th b tt i d! The bottom window

shows the status of

the transfer

Auto Select! Secure File Transfer Client can automatically

choose between binary and ASCII transfer

mode

• Based on a file’s extension

Edit Settings File Transfer Mode! Edit – Settings – File Transfer - Mode

• Add extensions (e.g. .txt) to the list

• Any file with an extension from the list will be

transferred in ASCII mode

• All others are transferred in binary mode

• Be sure to choose Auto Select from the toolbar

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?4@

Using SFTP

! You!ll likely develop your web pages on a PC and transfer them when they!re ready for publication

! We can use Secure File Transfer Client to create a public html directory and transfercreate a public_html directory and transfer our web site to our Unix account

• Connect to ccu.umanitoba.ca (with your UMnetID)

• Tell the client to create public_html in your home directory

• Copy index.html and your other files into public_html

File Permissions with SFTP

! By default, no one can access your web page• Recall that we have to make our files

readable

! You can use Secure File Transfer Client to change the file permissions. • right click on the file or folder and choose

Properties (more on this later)

File naming conventions

! Windows and Unix differ in their rules for

naming files

• Windows file names are case insensitive

• e.g. index.html and Index.HTML are the same

• Unix file names are case sensitive

• e.g. index.html and Index.HTML are different

• Windows file names may contain blanks

• Unix file names may not contain blanks

!"#$%&#%&'"()&*"+&,-./ 0("#1$&2342

567/&4283&5%9:;#1$&'<*=1&!! >?4@


! Some older Windows applications may

be case destructive

• i.e. file names are converted to uppercasepp

! Keep these differences in mind when

constructing a web site offline

• Otherwise, a web site that works fine on your

Windows computer may be broken when

uploaded to a Unix web server


! File naming conventions for a web site

that will be uploaded to a Unix server:

• lowercase letters (a…z)( )

• digits (0…9)

• dash (-) and underscore (_)

• NO BLANKS!

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<2

Common UNIX Commands

Using UNIX

Unix! Unix has a command line interface

• Unix commands must be typed

• Similar to the DOS operating system for PC’s

! Compare to the Graphical User Interface (GUI)

used by Windows, Mac and X-Windows

• Most commands to a GUI OS are given using point

and click; no memorizing a long list of commands

! The command prompt indicates Unix is ready

to accept your commands

• e.g. pollux 1%

User Interfaces

! What’s better, GUI or command line interfaces?

• Which is easier to use:• For a beginnerFor a beginner

• For an experienced user

• Which is more efficient/powerful?

• Are there other types of interfaces?

! Why do Windows and Mac OS X include command line interfaces?

! Why does Unix have a GUI interface?

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<0

Shells! Your Unix commands are accepted and run

by an interactive program called a shell

! There are several shells• Korn Shell (ksh) - default shell for new users

B Sh ll ( h) l U i h ll• Bourne Shell (sh) - an early Unix shell

• C Shell (csh) - looks like the C programming language?

• Enhanced C Shell (tcsh)

! Use finger -m UMnetID to see the shell you are using (use your UMnetID)

Unix Command Format

! command-name [-options] [arguments]

• Options are preceded by a dash and are used with

Unix commands to modify their behaviour.

• Multiple options can be used; they are grouped together,

preceded by a single dashpreceded by a single dash

• Arguments are required with some commands;

optional with others.

• They give the command some specific information about

what they should operate on

• The [ ] are not typed; they are just there to show

parts of the command that may or may not be

present

Command Options! For example: ls (list contents of a directory)

• ls

• list files in current directory (no options)

• ls -l

• list files in current directory in long format

• ls -a• ls -a

• list all files in current directory including “invisible” ones

• ls -al

• list all files in current directory including “invisible” ones in long format

• ls -F

• mark directories with a trailing / and files with "execute permission" with a trailing *

• ls option list:

• a A c C d f F g i l L q r R s t u 1

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<=

Directory Shorthand

! Unix uses shorthand notation to make it easier to refer to certain directories

•. (dot) - current working directory

•.. (dotdot) - up one level (the parent

directory)

•~ (tilde) - your home directory

•~user (tilde-user) - user’s home directory

Command Arguments! For example: cd (change directory)

• cd

• move to your home directory (no argument)

• cd public_html

• move into public_html directory (located in the current directory)

• cd ..

• move up one level (the parent directory of the current directory)

• cd ../Graphics

• move up one level, then into the Graphics directory

• cd /

• move to the root directory

• cd ~

• move to your home directory (same effect as the first example)

• cd ~umchan01

• move to the home directory of user umchan01

Wildcard Characters! Wildcards are placeholders you can use

with command arguments• ? matches any single character

• * matches any number of characters (even none)

! e.g.• c?t matches cat, cut, cot but not cart

• car* matches car, cart, carry, carnations

! Use wildcards in a command argument to specify multiple files

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<=

Wildcard examples! For example: mv, cp and rm (move, copy and delete files)

• mv *.txt Documents

• move all files with the txt extension into the Documents directory

• mv UM*.gif ../Images

• move image files with names beginning with UM into the Images directory in the parent directorydirectory in the parent directory

• cp ~/public_html/Graphics/*.gif .

• copy image files in public_html/Graphics to current working directory

• rm *.tmp

• delete all files with the extension tmp

• rm XYZ???.txt

• delete all text files beginning with XYZ and containing 3 more characters

The mv and cp commands! mv and cp have two uses:

• Move or copy files to a new location

mv myPage.html A1

cp myPage.html A1• Move/copy myPage.html into A1 directory

• Move or copy files to a new name

mv myPage.html index.html

cp myPage.html index.html• Move/copy myPage.html to index.html

• The mv command is used to rename files/directories

More Unix Commands• passwd

• Change password

• whoami• “who am I” returns your userid

• not as silly as it sounds if you have several userids

l• clear• Clear the screen

• finger• Find out details about other users

• good for finding userids of other users

• quota• Find out how much disk space you have remaining

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<=

More Unix Commands• du

• ‘disk usage’ lists the size (in KB) of directories

• man

• Get a manual page on a command (help!)

• pwd• pwd

• Print working directory

• mkdir

• Make a directory

• rmdir

• Remove a directory

File Protection in Unix! Unix is typically a multi-user environment

• Your files are stored on a hard drive along with

many other users! files

! Normally we want to protect our files

other users should not be able to• other users should not be able to

change/copy/delete/run our files

! Sometimes we want other users to have

access to our files

• group work, web sites, etc.

File Protection in Unix! Unix divides users into 3 categories

• users (i.e. the owners of files)

• groups (users can belong to named groups)

• others (all other users)

Unix has 3 types of permissions that control! Unix has 3 types of permissions that control

what can be done with a file

• read permission

• write permission

• execute permission

! This gives 9 separate permissions that can

be granted/denied for each file/directory

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<=

File permissions

! Use the long listing to view permissions

• each file is listed on its own line, e.g.

castor 20% ls -l

total 68total 68

-rw-r--r-- 1 umchan01 student 8031 Jan 16 15:06 subject.txt

-rw-r--r-- 1 umchan01 student 3321 Jan 16 15:11 UMhorz15.gif

drwxr-xr-x 1 umchan01 student 512 Jan 16 15:11 public_html

These groups of characters specify permissions

a letter means permission is granted; a dash means it is denied

File permissions

drwxr-xr-x

There are actually 10 characters in the group used to

specify permissions

Characters 8-10 show

Character 1 is ‘d’ if the

file is a directory (folder),

or ‘-’ if it is a plain file

Characters 2-4 show

user (owner) permissions

Characters 5-7 show

group permissions

Characters 8-10 show

other user permissions

An example

! subject.txt (owned by user umchan)

-rw-r--r-- 1 umchan student 8031 Jan 16 15:06 subject.txt

-rw-r--r-- 1 umchan student 3321 Jan 16 15:11 UMhorz15.gif

drwxr-xr-x 1 umchan student 512 Jan 16 15:11 public_html

• Has access rights - r w - r - - r - -

• The owner has the right to read and write to this file

• Members of the student group can read and copy it

• All other users may also read and copy it

• You are not given permission to modify it

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<6

Permissions and directories! What do read, write and execute mean for a

directory?

• Granting read permission gives the ability to list

the contents of a directory

Granting write permission gives the ability to• Granting write permission gives the ability to

change the contents of a directory

• Add/Delete/Move files

• Granting execute permission gives the ability to

access the contents of a directory

! Important when we set up our web sites

The chmod command

! chmod allows you to change access permissions to files and directories

! chmod requires 2 argumentshi h i i b i h d• which permissions are being changed

• which file/files are having their permissions changed

• wildcards come in handy here

Changing Permissions

! To specify which permissions are being changed, we need (in order):

1) which user category or categories to change

2) whether permission is being granted or denied

3) which permission or permissions to change

! Letter codes specify category, permission• user, group, other, all

• read, write, execute

! Use +/- to grant/deny permission

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<=

chmod Exampleschmod o+r MyStuff.txt

For the file MyStuff.txtGrant to ‘other’ users

read permission

This command lets other users read (and copy) MyStuff.txt

chmod u-w MyStuff.txt

Deny to ‘user’ (yourself)

write permission For the file MyStuff.txt

This command “write-protects” MyStuff.txt (you can always grant

write permission to yourself again if you want to edit it)

(provided you have granted access to the directory containing it)

chmod Examples

! Can change access rights to your home directory as follows:chmod o+rx ~

• Add read and execute access for !other"users

• For home directory only

Recursive chmod

! Can apply chmod recursively - to a

directory and all files/directories

underneath it

chmod -R o+r ~/public_html

• -R option means recursive

• Will give others read access to public_html and

all files/directories contained inside, and

everything inside those directories, and so on…

• Try doing that with a GUI!

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<;

Web Publishing (the Unix way)

! We use sftp to transfer files to our Unix

account

! Use Unix commands to manage the filesUse Unix commands to manage the files

• Make directories if they’re not there (e.g. mkdir

public_html)

• To change to that directory, cd public_html

• Then if you do an ls -l, it will show you the files

in the directory (and their permissions)

Permissions! Files are granted read permission to all

• so a web server can send a copy of the file

• chmod a+r file-name

! public_html directory (and all sub-directories) must have read and execute access

• So a web server can see and access files

• chmod -R a+rx public_html

! We also have to do something special to give others limited access to the main level of your account (so they can go down into public_html but not see your other files)

One bit of Nastiness! To do this, you must at some point type the

following two commands:• chmod g-l ~ (that's an L, lowercase)

• chmod a+x ~

! These two commands allow the web server t t i t t i th fi t lto get into your account in the first place

• They don't let it (or or other people) change your files

! Note that these permissions may have already been set by default, so first check that you are able to view your website with a web browser

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<21

Archive files

! Archive files collect a set of files and folders

into a single file

• for backup purposes

• for easier portability

! Compression may also be applied to the files

in the archive

• to reduce the size of the archive

• the original files are retrieved by uncompressing and

extracting the archive file

Archive files

! You will create an archive file when

handing in web site design assignments

• It simplifies the hand in procedure (only 1 file)p p ( y )

• It preserves the structure of your web site

! You use an archiving utility to create an

archive

• We will look at Power Archiver, which is

available in the labs

Archiving utilities

! Power Archiver is installed in the Open Area Computers• It is available from Software Express for home

seuse

• This utility is integrated directly into Windows Explorer

• The Explorer bar (left pane) is set to display folders (View – Explorer Bar – Folders)

• You create a compressed archive by right-clicking on a folder in the Explorer Bar

!"#$%&'(()"*+ ,#"-./%0120

&345%2061%&'(78-./%!+)9.%:: ;<22

An archiving example! Stew Dent has created a

web site• It is contained in the folder

A03_umdent

• It contains a subfolder called images

Stew right clicks A03 umdent! Stew right-clicks A03_umdent

• Compress to A03_umdent.zip

• The archive A03_umdent.zip is created

! The archive file can be renamed

if needed

With OS X on a Macintosh

! Select a folder

! From the File menu, click on Compress “folder name”

!""#$%&'('%) *')(+,#-./-

!01$#/-2.#!%345(+,#6&78+#99 /.:/

Cascading Style Sheets

Part 2: Controlling Position

Textbook reference: Chapter 8

Positioning content

! How does a browser determine where to place the elements in your web page?

! The browser flows the elements into the web page in the order they appear in your document• left-to-right in a row

• top-to-bottom as rows fill up

! A lot like text flow in a word processor

Block and Inline elements

! Block elements are flowed into the window with

spacing above and below

• the top and bottom margins control the spacing

h1 h6 t bl l l di• e.g. <h1>…<h6>, <p>, <table>, <ol>, <ul>, <div>

! Inline elements flow immediately after the

previous element, without spacing

• e.g. <a>, <b>, <i>, <br>, <img>, <span>

!""#$%&'('%) *')(+,#-./-

!01$#/-2.#!%345(+,#6&78+#99 /.:-

<div> and <span>

! The <div> element is used to create a new block

•Its purpose is to allow you to apply styles to a block of elements without adding the formatting that is g gincluded with the other block elements

! The <span> element does the same thing for inline text

<div style="font-family:Arial">Arial text, <span style="background-color:green">green background</span>

</div>

Describing Position! CSS uses a box model to describe position

• Elements are contained in a rectangular area

• An element’s position is measured from the top

and left sides of the rectangle

e g an element may be 100 pixels down from the top• e.g. an element may be 100 pixels down from the top

side and 50 pixels right from the left side

! The document window of a browser is a box

containing your web page

! CSS allows us to define new boxes and to

position elements within them

The position property! The position property is used for 2 purposes

• to define a new rectangular region (box)

• to specify the position of an element within the box that contains it

! Position has three possible attributesPosition has three possible attributes

• position: relative

• position: absolute

• position: fixed

! They create a new box and allow you to specify its position within the box that contains it

!""#$%&'('%) *')(+,#-./-

!01$#/-2.#!%345(+,#6&78+#99 /.:;

Relative position

! Relative to what?

• Relative to the position it would have had if the element just flowed into its containing box, e.g.

p.newbox{position: relative;}p {p ;}

<p class="newbox">

This paragraph will be in its normal position, but it creates a new box which we can use to position other elements

</p>

Specifying a new position! Use the top and left properties

• The attribute specifies a distance from the top or left side of the enclosing box, e.g.

p.newbox{position: relative;}

.sub{position: relative; top: 0.5em}.sub{position: relative; top: 0.5em}

<p class="newbox">

The following 3 words <span class="sub">will be lower</span> than the rest.

</p>

• You can use negative positions too, e.g.

.super{position: relative; top: -0.5em}

Absolute position

! Absolute position places the element in exactly the specified position in its enclosing box• i.e. the element is taken out of the normal

flow

! This means an absolutely positioned element may overlap other elements in its enclosing box• Why would you want to do this?

• One example: 'shadowed' text

!""#$%&'('%) *')(+,#-./-

!01$#/-2.#!%345(+,#6&78+#99 /.:;

Absolute position example.logobox{position: relative; text-align: left; }

.shadow{position: absolute; top: 4px; left: 4px;

color: #AAAAAA;}

.logo{position: relative; color: #CC0000;}

<h1 class="logobox">h1 class logobox

<span class="shadow">Fancy Title</span>

<span class="logo">Fancy Title</span>

</h1>

! The logo text overlays the shadow text,

giving the logo text a floating effect

Fixed position

" Fixed position means fixed within the

browser window itself

• browser window is also called the viewportp

" Elements with fixed position stay in the

same position even as you scroll through

a page

• IE 6 does not support fixed position, but IE 7

does, as does FireFox

Fixed position example#nav{position: fixed; left: 0px; top: 0px;

background-color: #CCC; width: 100%; z-index: 3;

}

#content{position: relative; left: 0px; top: 50px;

width: 100%; z-index: 1;

}}

<div id="nav">

<a href="#section1">Section 1</a>



</div>

! The navigation links will always remain at the top

of the browser window

!""#$%&'('%) *')(+,#-./-

!01$#/-2.#!%345(+,#6&78+#99 /.:;

Controlling overlay! Elements with absolute or fixed position will

overlay other elements in the enclosing box

• You can control how elements are overlaid using the z-index property

• A higher z-index moves the layer of the element g y'closer' to the top, e.g.

.shadow{position: absolute; top: 4px; left: 4px; color: #AAAAAA; z-index: 1;}

.logo{position: absolute; top: 0px; left: 0px; color:#CC0000; z-index: 2;}

! Now the logo element will always be on top of the shadow element

Width and Height

! You can use the width and height

properties to specify the size of a box.

e.g.g

width: 200px;

! The margin properties also affect the

width and height of the box, e.g.

p.body{position: relative; margin-left: 200px;}

• This moves the left side of the box defined

by this element 200 pixels to the right

Another example

! Creating a paragraph with a margin and

adding text to the margin

p.body{position: relative; margin-left: 5.5em;}

.margin{position: absolute; left: -5.5em;

width:5em}

<p class="body">

<span class="margin">text in margin</span>

This text will appear in the body of the paragraph

</p>

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<2

Interactive Web Pages

Server-Side Interactivity:y

Forms and Server-Side Includes

Textbook reference:

Pages 154-180 of Chapter 6

Interactive Web pages

! So far our web pages have been static

• i.e. they don't change unless we change them

! Interactive pages change in response toInteractive pages change in response to

what the user does in the page

• e.g. search engines, e-commerce sites

! Interaction involves some processing by

a program

Client-side vs. Server-side

! These programs must run on a computer

! Which computer?• The computer running the client (browser)?

• The web page server?

! Both types may be used• Client-side programs (called scripts) run on

the client computer

• Server-side programs run on the web server

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<0

Client-side programs

! One example of a client-side script:

• the timestamp

! When you load a web site containing a client-

side script, you are letting somebody run a

program on your computer

• Is that safe?

! The short answer: Yes

• more later

Server-side programs

! The browser sends info entered by the

user to a program on the web server

• It is processed and (usually) some results p ( y)

returned to the client

• Is this safe?

! The short answer: Not nearly as safe as

client-side processing

• Why not?

Server-side program Safety

! Client-side programs are safe because the script processing engines in browsers have been extensively tested

• Malicious (or just plain badly written) scripts can't• Malicious (or just plain badly written) scripts can t compromise your computer

! Server-side programs are stand-alone • They don't have the extra security of being

processed by a separate program

• A clever hacker could exploit a flaw in a program to compromise a server

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

Server-side program Safety

! Because of the risks involved, the U of M

Home Page server permits only very

limited Server-side processingg

• You can use XBitHack

! We will also look at HTML Forms

Web-based Forms

! Forms allow the user of a web page to provide interactive feedback• Many of the controls that are familiar in

Windo s dialogs are a ailable in formsWindows dialogs are available in forms

• text boxes

• file browsing dialogs

• drop-down lists

• radio buttons and checkboxes

• submit and reset buttons

The form element

! The <form>…</form> element is used to

define a form

• It contains form input elements

• The form may also contain any other html elements

! The form element has one required attribute;

action

• It describes how the form input is to be processed

• More about this later

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

The input element

! Most input controls are specified with the

input element

• The type attribute specifies the type of controlyp p yp

• Others modify the behavior of the control

• name is used to identify the input (we will want to

name all our input controls)

• size specifies the number of input characters

• value sets a default value

XHTML and the Input element

! XHTML Strict requires that the input

element be contained in a block element

• It must be within (for example) a paragraph, ( p ) p g p

div, table, fieldset or list item

• Important to remember when we want to

validate our pages

Text input

! These allow the user to type text info

<input type="text" name="user" size="50" />• a single line text box (50 characters wide)

<input type="password" name="pwd" /><input type="password" name="pwd" />• a single line text box (all typing shows as '*')

• Note that the input element is an empty element (no closing tag)

• You can also type more characters than the size (use the left/right arrow keys to scroll)

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

Accessibility

! Associate a label with an input field

<label for="firstName"> First Name:</label>• Label for input element with id !firstName"

<input type="text" name="firstName" id="firstName" /><input type= text name= firstName id= firstName />

! Note• The value of the for attribute in the label element is

identical to the value of the id attribute in the input element

File navigation

! The input element may be used to select

a file on the user's computer

<input name="inputfile" type="file" />p p yp

• This displays a text box and a Browse button

• Click and a file navigation dialog appears

• Once the user selects a file the absolute path

and filename appear in the text box

Multi-line text input

! Use the textarea element (not the input

element)<textarea name="comments" rows="6" cols="80">

</textarea>

! Note textarea does have a closing tag

• Text contained in the tags will appear in the

text area (but can be edited)

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

Selection elements

! These elements allow the user to select

from predefined choices

• checkboxes to select one or more choices

• radio buttons to select one option exclusively

• drop-down lists to choose from a scrollable

list of choices

• They appear as a group of elements, all with

the same name attribute

Checkboxes

! Use input element with type = "checkbox"• Each input has a different value attribute

• Multiple boxes may be checked

• Use the checked="checked" attribute to preselect it ( l t th )items (user can unselect them)

<p>

What pets do you own? <br />

<input type="checkbox" name="pet" value="cat" />Cat<br />

<input type="checkbox" name="pet" value="dog" />Dog<br />

<input type="checkbox" name="pet" value="bird" />Bird<br />

</p>

Radio buttons

! Use input element with type = "radio"• Same as check boxes, but only one button

may be selected<p>p

What colour are your eyes?<br />

<input type="radio" name="eye" value="blue" />Blue<br />

<input type="radio" name="eye" value="green" />Green<br />

<input type="radio" name="eye" value="brown" />Brown<br />

</p>

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<7

Grouping input fields

! Enclose fields in a rectangle

! Identify group with a legend<fieldset>

l d F it t l d/<legend>Favourite pets<legend/>

<input type="checkbox" name="pet" value="cat" />Cat<br />

<input type="checkbox" name="pet" value="dog" />Dog<br />

<input type="checkbox" name="pet" value="bird" />Bird<br />

</fieldset>

Form Menus

! Use the select element to create the list

• The option element specifies list items

<p>Select your faculty</p>p y y p

<select name="faculty">

<option value="arts">Arts</option>

<option value="science">Science</option>

<option value="univ1">University 1</option>

</select>

Form Menus

! You can allow the user to select multiple

items from a menu list

• specify the multiple="multiple" attributep y p p

• Use Ctrl+click to select additional items

• You get a scrolling list rather than a drop-

down list

• specify the number of items that is displayed

with the size attribute

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

Group Menu Items! Use optgroup element to group menu items

<p>Select your department</p>

<select name="depts">

<optgroup label="Arts">

<option value="hist">History</option>

<option value="eng">English</option>

</optgroup>

<optgroup label="Science">

<option value="chem">Chemistry</option>

</optgroup>

</select>

Submit and Reset buttons

! Specified using the input element

• The value attribute specifies the button text

<input type="submit" value="Send form" />p yp

<input type="reset" value="Clear form" />

• The reset button clears the form back to any

specified default values

• The submit button sends the user input to the

web server to be processed

Submit button

! What happens when the user clicks the submit button?• The action attribute in the form tag indicates

ho the form's inp t is to be processedhow the form's input is to be processed

• It specifies the URL of the server side program

• may be absolute or relative<form action="/cgi-bin/process.cgi">

<form action="http://www.cs.umanitoba.ca/cgi-bin/form.cgi">

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<=

Processing form data

! What processing may be done?

• Storing or changing data in a database on the

server

• Searching a database

• Online order processing

• Creating a new web page based on the input

The method attribute

! An optional attribute in the form element

• It tells the browser how to send the data

• method="get" (the default value)

Thi d th d t b k t i ith th URL f th• This sends the data back as a string with the URL of the

page on the front

• Useful (for example) for bookmarking a page of search

results

• method="post"

• The post method sends the form contents back as

plain data, without the URL on the front

The mailto: action

! An action that does not involve server side

processing<form action="mailto:[email protected]">

The input is sent to the specified e mail address• The input is sent to the specified e-mail address

! This is no longer supported by the major

browsers

• Now, clicking the submit button simply starts an e-

mail client

• none of the form input is contained in the message

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<21

Server-Side Includes (SSI)

! A simple way to perform limited server-

side processing

• You can use it with your U of M Home pagesy p g

! You insert SSI commands in your pages

• The server reads the commands and inserts

content into the page before it is sent to the

client

Enabling SSI using XBitHack

! XBitHack uses a page's execute permission

to indicate that it contains SSI commands

• Grant owner execute permission on a page to

enable command processingenable command processing

• If permission is denied, the commands will be ignored

• Grant group execute permission if you want the

server to send the page's original last-modified time

Enabling SSI by file extension

! Another way to indicate the presence of

SSI commands is to change the

extension of your web pagey g

• e.g. index.html to index.shtml

• No changing of permissions is needed

! It may not be practical to change the

extensions for all pages in a large site

though

!"#$%&'()&**+ ,-(./#&0120

3456&2071&3"$89./#&:%';/&++ 22<22

SSI Commands

! An SSI command is enclosed in an

HTML comment

! They have the following form:They have the following form:

• The command name follows the # character

• Any required arguments follow that

! We will look at a few SSI commands

The flastmod command

! This command displays the last-modified

time of a file (i.e. its timestamp), e.g.

<p> Last update:



</p>

The include command

! This command inserts the contents of

another file into your web page, e.g.



• A good way to have a consistent

header/footer or navigation menu on a large

number of pages

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0

Interactive Web Pages

Client Side Interactivity:Client-Side Interactivity:

JavaScript

Textbook reference: Chapter 9

JavaScript

1. What is JavaScript?

2. Objects, Properties and Methods

3 Events and event handlers3. Events and event handlers

What is JavaScript?

! JavaScript is a Scripting Language

• Is that anything like a programming language?

! It does provide most of the features found in

programming languages

! We call a program written in a scripting

language a script

• Scripts consist of one or more statements

• Scripts typically are embedded directly into an

HTML document

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=.

What is JavaScript?

! JavaScript has had several names• It was originally developed by Netscape and was

called LiveScript

• Its name changed to JavaScript when Netscape Its name changed to JavaScript when Netscape partnered with Sun

• A standards organization called ECMA International developed a standard for the language, which it calls ECMAScript

• Microsoft's version is called JScript

! We'll just call it JavaScript

What does JavaScript do?

! JavaScript gives you the ability to change

the web page dynamically

! The web page can change based on theThe web page can change based on the

user!s interactions (called events)

• e.g. pointing, clicking, filling in forms

! It can also change the contents of the

page automatically

How does JavaScript Work?

! A script embedded in a web page is read

and interpreted by the browser

! Interpreting means the script is carriedInterpreting means the script is carried

out directly without first translating it into

the computer's machine language

! This is called client-side scripting

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

Where do Scripts appear?

! In the body of the web page• These scripts are interpreted once, as the page is

being loaded

! In the head of the web page! In the head of the web page• These scripts are usually used to respond to some

action (event) performed by the user

• They will be interpreted each time the event occurs• These scripts are called event handlers

• We will also use scripts in the head to pre-load images (more on this later)

Document Object Model

! A web browser looks at your web page as a collection of objects

! Examples of objectsthe browser itself (the navigator object)• the browser itself (the navigator object)

• the window containing the web page

• the web page itself (a document object)

• lists, tables, images, links, etc. are all objects in your document

! This is called the Document Object Model (DOM)

Objects

! An object is an item that exists in a web page

! Objects are described by Properties• properties describe some attribute of the object

• colour, appearance, purpose, source file, etc

! The behaviour of objects is described by their MethodsThe behaviour of objects is described by their Methods• Methods change an object or make it perform an action

• Method names are always followed by brackets

! e.g. the document object• has a lastModified property (a Date)

• has a write() method

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

Referring to Objects

! For objects like navigator and document

we can refer to them directly by name

• e.g. document.write("Hello");g ( )

! What about objects within the document?

! All the objects in the document are kept

in lists called arrays

• e.g. document.images, document.links

Referring to Objects

! Each object is entered into its array in the order in which they appear

! The arrays are numbered starting at zero (!)So to refer to the first image in your web page you• So, to refer to the first image in your web page, you would use document.images[0]

! Problems:• hard to remember which object is which

• if you add a new object before an existing one, the numbering of the existing object will change

Naming Objects

! An alternative to using the arrays to refer to objects

! Use the id attribute in the object!s tag

• e.g. <img src="button.gif" alt="button image" id="button" />

! Now you can refer to this object by its idNow you can refer to this object by its id

• e.g. document.getElementById("button")

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

JavaScript statements

! A statement is a single instruction in a

script

• They always end with a semicolony y

• Typically they are written one per line (though

they don't have to be)

! There are many kinds of statements

• For now we will look at statements that use

the properties and methods of objects

JavaScript and Objects

! JavaScript works by using the properties of

objects and calling their methods to have them

perform some action

! "• e.g. a !timestamp"

document.write(document.lastModified);

• e.g. changing the background colour

document.bgColor = "red";

! Properties and methods are case-sensitive

• i.e. bgcolor is not the same as bgColor

Useful Properties/Methods

! The document object:

• title, bgColor, fgColor, linkColor, lastModified

• write(), writeln()

! The history object:y j

• back(), forward()

• permits scripts to navigate for the user

! The navigator object:

• appName, appVersion

• provides info about the user's browser

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

Useful Properties/Methods

! The window object:• defaultStatus, status

• some text displayed in the status bar of the browserbrowser

• alert("message")

• pops up an alert box displaying the message

• The message is a string parameter to the method

• close()

• to close the window

Example: Timestamp

<p>

<script type="text/JavaScript">



</script>

</p> Script is contained inp

! Embedded in body

• runs when page loads

• user see the result, not

the script

! only one statement

• document object

• write method

• lastModified property

! Script is contained in an HTML comment

• so older browsers won't display the script itself in the page

! JavaScript comments

• second one is required• to 'remove' the end of the

HTML comment

Review: Example! Object: Document

! Properties of the Document Object:• Title

• bgColor

• linkColor

• lastModified

! Methods of the Document Object:• write

• writeln

! Demo: document.write;

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=5

Example: alert dialog

<p>



window.alert("Welcome to my web page");


</script></script>

</p>

! The alert method produces a

dialog box that displays the

parameter

! The OK button closes the

dialog

Review: Example! Object: Window

! Properties:

• defaultStatus

• status

! Methods

• alert

• prompt

! Demo:

• window.alert ("This is an alert box.");

Debugging JavaScript

! Debugging is the process of finding and

correcting mistakes in programs

• A frustrating and tedious processg p

! You can get browsers to give you

feedback on errors in scripts

• Normally this feedback is not displayed;

browsers just ignore scripts with mistakes

• Feedback occurs when the scripts are run

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

Enabling browser feedback

! for IE:

• Go to Tools > Internet Options

• Advanced tab, Browsing section

• Check 'Display a notification about every script

error'

! For FireFox:

• Go to Tools > Error Console

• you get a separate console window

3. Variables! A variable is a named data item with a value that

you can manipulate• print or change the value, use in calculations

• Variables can represent objects or their properties

• We can define and use variables in JavaScript

V i bl f d b! Variables are referenced by a name• A name must start with a letter or underscore (_)

• A name may contain only letters, digits or underscore

• Can’t use reserved words

• e.g. can't use document as a variable name

• Variable names are case-sensitive

• e.g. Result, RESULT and result are 3 different variables

Variables! Valid variable names:

• year

• name

• value1

• fred

• _me

! Invalid variable names:

• President Bush

• it contains a blank

• 8value

• it starts with a digit

• what?_• question mark not allowed

• images

• a reserved word

! You can define variables by…• Simply making a variable name and giving it a value

• e.g. name = "President Bush";

• 'Declaring' a variable using the var keyword

• e.g. var value2;

• useful when we want to share a variable between scripts

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=>

Data Types! Variables can contain data from these types

• Numeric

• 23, -765, 3.14159

• Boolean

• true or false

• String

• "why is this important?"

• Objects

• document.getElementById("button")

! Note that methods can use variables

• e.g. document.write(age) will print the contents of

a variable age

Operations on Numeric data

! arithmetic

• + addition

• - subtraction

lti li ti

! comparison• < less than

• <= less than or equal

• == equal• * multiplication

• / division

• % remainder

! Arithmetic operations

produce a numeric

result

• equal

• != not equal

• >= greater than or equal

• > greater than

! Comparisons produce a boolean (true/false) result

Numeric Data Methods

! Math methods

• Math.random()

• produces a random value

between 0…1

! Other methods• isNaN(value)

• tests if value is 'NaN' (Not a Number)

• Math.round(val)

• round to nearest integer

• Math.abs(val)

• absolute value

• Math.cos(val)

• trig cosine

! Plus many others

• e.g. division by zero produces a NaN result

! Constants• Number.MIN_VALUE

• Number.MAX_VALUE

• Number.PI

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0/

Operations on String data

! Concatenation (+)

• Joining 2 Strings together

• e.g. var name="Bobby"; document.write("Hello " + name);

! parseInt and parseFloat

• Extract numeric values from a String

• the Strings have to 'look' like numeric values

• e.g. var input = "123"; var value = parseInt(input);

• e.g. var input = "3.14"; var value = parseFloat(input);

! length

• a property of Strings; is set to the number of characters

• e.g. var S="18 characters long"; document.write(S.length);

Operations on Boolean data

! Called logical operations• && (and) works with two boolean values

• Both values must be true to return a true result

• e.g. var input = prompt("Enter a number");gvar OK = input >= 100 && input <= 200;

• || (or) works with two boolean values• Either value (or both) must be true to return true

• e.g. var Bad = input < 100 || input > 200;

• ! (not) works with one boolean value• Returns the opposite of the value

• e.g. var Bad = !OK;

Making decisions

! The if-else statement

• Perform different

statements depending on

a logical result

if (logical result)

{

statements done if

result is true a logical result

• If result is true, perform the

statements in the if-part

• If result is false, perform

the statements in the else-

part

• Each part is enclosed by

braces

• The else-part is optional

}

else

{

statements done if

result is false

}

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=00

Example: Prompt dialog<p>



var reply = window.prompt("What's your name?", "");

if(reply == null || reply == "") {

document.write("I'll just call you Joe");

} else {

document.write("Hello " + reply);

}}


</script>

</p>

! The prompt method produces

a dialog with a text box

• accepts text input

• The user's input is returned

by the method

! Note the if-else statement

• the value null means the user clicked the Cancel button

• the String "" is a String with no characters

Array Variables

! We have seen that the browser keeps

track of objects in your page in arrays

• An array is a named collection of objects of y j

the same type, e.g. document.images

• each object is called an element of the array

! It is convenient to be able to refer to a

collection of objects using a single name

• It can make scripts much easier to create

Creating Arrays

! We have to create an array before we

can use it

var months = new Array(12);y( )

• This creates an array called months with 12

elements

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0.

Indexing Arrays

! We use each element by indexing the array• index values start at 0

• they go up to (# of elements) - 1

• place the index value in square brackets after the array name

• a variable containing an integer value can also be used as an index

• e.g. our array of months

months[0], months[1], …months[11], months[month]

Using Array elements

! We can give values to the elements

months[0] = "Jan";

months[1] = "Feb"; …[ ] ;

months[11] = "Dec";

5. Variables and Objects

! We can define variables that refer to existing objects

• e.g., a variable could refer to "document"

! Two useful object types! Two useful object types• Date: an object that contains date information

• Image: an object for storing an image file

! To use one of these variables we have to create the object and assign it to a variable, e.g.var today = new Date();

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0>

Date Object

! We can create a date usingnew Date();

• Uses today’s date

D t ("D b 25 2001 14 30 00")new Date("December, 25, 2001, 14:30:00");

• String with month, date, year, time

new Date( 2001, 11, 25, 14, 30, 0 );

• year, month, day, hour, minute, seconds

• Months: 0=January, 11=December

• Hours: 0-23

Date Object methods! You can retrieve date fields using get methods

e.g. var today = new Date();var day = today.getDay(); (a number from 1…31)

var month = today.getMonth(); (a number from 0…11)

var year = today.getFullYear(); (the year as a 4-digit number)

var hours = today.getHours(); (a number from 0…23)

var mins = today.getMinutes(); (a number from 0…59)

! Use these variables to print a date in any desired format

document.write("Today is " + months[month] + " "

+ day + ", " + year);

Image Object

! An Image object contains attributes about an image, e.g.

• height and width (in pixels)

• border, hspace and vspace

src (i e the source file for the image)• src (i.e. the source file for the image)

! We create an image object by specifying its height and widthvar picture = new Image( 25, 128 );

! We can then assign a source file to itpicture.src = "me.gif";

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0>

Image preloading

! We can use Image objects to perform image preloading• A script in the document head creates Image

variables and assigns the source files

• This happens before the page is displayed

• In the document body we use the Image variables to specify the source of an image

<img src="picture.src" alt="my picture" />

• This will speed loading of image-intensive pages since the browser will know how much room to leave for images

Events and Event Handlers

! Events are actions performed by the user• e.g. pointing, clicking, opening a window

! Event handlers are code segments that execute in response to an event• their names always begin with 'on'

• e.g. onmouseover, onmouseout, onclick

! We can write our own code for event handlers

Event Handlers

! If the event handler consists of only a few

statements, they can be placed inline

with the element

• e.g. the Rollover example on next slide

! If it is more complex, a JavaScript

function can be written and placed in a

script in the head of the document

• The event handler then calls the function

!"#"$%&'() *'+),&-./0.

1234-0.5/-167(8),&-9:";,-<< 0.=0>

Example: Rollover using images<head>

<title>JavaScript Example 6</title>

<meta http-equiv="Content-Type" content="text/html;

charset=ISO-8859-1" />


var linkimg = new Image(200, 76);

var hoverimg = new Image(200, 76);

linkimg.src = "image001.gif";

hoverimg.src = "image002.gif";

</script>

/h d></head>

<body>

<p>

<a href="#foo"

onMouseOver = "document.getElementById('link').src=hoverimg.src; return true;"

onMouseOut = "document.getElementById('link').src=linkimg.src; return true;"

>

<img src="image001.gif" alt="Click me" border="0" id="link" />

</a>

<a name="foo" />

</p>

</body>

Example: JavaScript function<head>

<title>JavaScript Example 6</title>

<meta http-equiv="Content-Type" content="text/html;

charset=ISO-8859-1" />


function newQuestion(){

value1 = newValue();

value2 = newValue();

document.getElementById("v1").value = value1;

document.getElementById("v2").value = value2;

document.getElementById("ans").value = "";

document.getElementById("ansCell").bgColor = "#FFFFFF";

return true;

}// newQuestion

</script>

</head>

<body>

<p>

<form action = """

<input type="button" name="newQ" value="New Question"

onclick="newQuestion();" />

</form>

</p>

</body>

JavaScript Redux! We’ve only scratched the surface

! Hopefully we’ve hit on the most important/interesting/cool stuff

! Other standard programmingOther standard programming constructs are also available

• e.g. loops (for and while)

! There are a lot of objects and events we haven’t discussed

• Look to on-line resources for any details you may need