Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 3

Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-1

Summer 2004

Lecture 3

2

Today’s TopicsToday’s Topics

• Linux introduction

• List, images, hyperlinks, image maps

3

ReminderReminder

• Hw1 released and due next Wednesday

4

Introduction to LinuxIntroduction to Linux

• Very useful in networking, Web servers

• Not so easy to begin learning as Win/Mac

• We’ll cover some basics directory structure and navigation copying, deleting files permissions getting files from home or lab to the right

place on the network

5

DirectoriesDirectories

• Much like folders in Win/Mac• Directory is hierarchical and organized as tree

structure Different levels are distinguished by “/” Two special directory notations

• “..” denotes the parent directory• “.” denotes the current directory

• You home directory is referred as ~<your cs account> When you log in, you are in your home directory E.g.: My home directory is ~hai and it is same as /home/hai

6

Basic directory commandsBasic directory commands

• The command ls tells you what is in the current directory

• The command pwd tells you what directory you are in

• The command cd followed by a directory name changes your current directory cd ..

• goes “up” one directory in the tree cd

• takes you “home”

7

Creating directoriesCreating directories

• Command: mkdir <directory path&name> All your homework will be turned in to

~<yourhome>/html/cs101/hw<x>, where x is the no of the assignment.

From your home directory, type in • mkdir html (creates the html directory)• cd html (changes to the html directory)• mkdir cs101• cd cs101• mkdir hw1• cd hw1 (you are now “in” the directory for your first

homework assignment)

8

Copying and deleting filesCopying and deleting files

• The commands cp and rm copy and delete files Copy a file

• cp <source> <destination>

• path must be specified for filenamesdefault is current directory

• Example: cp foo.html foo_bak.html

Copy a directory• cp –r <sourcedir> <destdir>

Delete a file/directory• rm <filename/dirname>

9

File/directory permissionsFile/directory permissions

• Type in ls -l This pulls up a listing with more information You should see something like:

The letters on the left are the permissions of each file

More about ls command

drwxr-xr-x 2 hai student 512 May 12 15:48 tcltklib/drwxr-xr-x 2 hai student 512 Jan 16 13:32 temp/-rw-r--r-- 1 hai student 12 Oct 28 2002 test.in

10

Permissions cont’d.Permissions cont’d.

• This information tells who can read write execute

• The first entry is d or - (is it a directory?)

• The others list the permissions for you (the owner) your “group” the “world” (everybody else)

11

Reading the permissionsReading the permissions

• Columns 2 through 4 are for you• Columns 5 through 7 are for your group• Columns 8 through 10 are for the world• A letter means you have that permission• A dash means you don’t• Examples:

-rw-r--r-- drwxr-xr-x

12

Some informationSome information

• Directories must be executable and readable to be entered

• You must have world read permissions set for the grader to grade for the world to browse

13

How do I set permissions?How do I set permissions?

• Use the command:chmod <permissions> <filename>

• Where <permissions> is a three digit number encoding the new permissions The first digit is for you, the second for your

group, and the third for the world

14

What are the numbers?What are the numbers?

• Each number is 0 through 7 that is sum of three read: 4 write: 2 execute: 1

• Some important numbers: 7: read, write, execute 6: read, write, not execute 5: read, execute, but not write 4: read but neither execute nor write 0: neither read, write, nor execute

15

ExamplesExamples

• chmod 644 myfile.html Allows you to read and write and the world to read but

not write Use this for all your Web pages

• chmod 755 html/ Do this from your home directory Allows you to read, write, execute Allows everyone else to enter, read but not write Use this for all your homework directories

16

Another exampleAnother example

• chmod 600 myfile.html Gives you read, write Shuts off file to the world

17

Using a Linux EditorUsing a Linux Editor

• Some popular editors: emacs, vi, pico, etc

• Example of using pico In command line, type pico Type in the codes of the html file Type control-o and then a file name to save to a

file Type control-x to exit Check other pico commands online

• Here is a list

18

ListsLists

• One advanced text based structure and often used to Set out big ideas Display the table of contents List links, etc

• Three kinds of lists: Ordered Unordered Definition lists

19

Ordered listsOrdered lists

• Used to specify a sequence of things top-ten list set of instructions outline

• Begun and ended with <ol></ol>• Each element in the list is <li></li>• Example:

Orderedlist1.html

20

Attributes for ordered listsAttributes for ordered lists

• We can set two attributes The type of symbols used

• Arabic numerals (type=1, default)• capital or lower case letters (type=A or type=a)• capital or lower case Roman numerals (type=I or type=i)

The start value

• Example: Orderedlist2.html

• Note: these attributes can be controlled better through CSS

21

Unordered listsUnordered lists

• Used for more general collection of items list of links ingredients for a recipe rather than

instructions

• Attribute type could be: disc, circle, square

• Example unorderedlist.html

22

Definition listsDefinition lists

• Used for definitions and long descriptions

• Uses <dl></dl> tag to begin and end list

• Rather than using <li></li> to denote list items, has terms and definitions <dt></dt> <dd></dd>

• Example: definitionlist.html

23

Nested ListNested List

• Lists can be nested within other lists The indent from the left is cumulative,

however The deeper you go, the thinner the indent

margin will become

• Example: nestlist.html

24

ImagesImages

• Background images

• Inline images specifying a source file flowing text size and other attributes

25

Background imagesBackground images

• Set with the background attribute of body• Can be used along with bgcolor• The picture is tiled to fill the screen

Make sure the tiling looks nice Make sure the image doesn’t conflict with text

• Make the file be small for fast downloads

• Example: backgoundexample.html

26

Inline imagesInline images

• Use the standalone <img> tag with attributes to control: image file to include (required) alternate text if image is not displayed

(required) Border and spacing image alignment within text height and width of image

27

Including the fileIncluding the file

• src attribute specifies the image file and can be: URL for online file (this can be risky!) local file with absolute or relative path

• alt attribute gives alternate text: text-only browser error loading image voice-text converter

• Example: imgexample.html

28

Image alignmentImage alignment

• The align attribute To control over the alignment of images with the

surrounding text since the default alignment is typically ugly

“left” and “right” push image to edge and flow text around it

“bottom”, “top”, “middle” are used if image appears within the text

• Example: image-examples.html Images.html

29

Image border and spacingImage border and spacing

• The border attribute Control the thickness of the border The value is an integer in pixels (default is 0) Useful when rendering image as hyperlink

• The hspace and vspace attributes Specify the number of pixels of extra space to leave

between the image and the text on its left and right sides

• Example: Image-border-spacing.html

30

Resizing the imageResizing the image

• The height and width attributes This affects the size the image appears, not

the size of the file Preserve the aspect ratio Use Photoshop or other tool to create smaller

image file with coarser resolution, etc

• Example: imgexample_resize.html

31

Image File FormatsImage File Formats

• GIF: Graphics Interchange Format

• JPEG: Joint Photographic Experts Group

• PNG: Portable Networks Graphics

32

GIF (Graphics Interchange Format)

GIF (Graphics Interchange Format)

• Uses an adaptive 8-bit color palette 256 colors at most

• Especially suitable for line art and cartoons• Can work well for some photographs• Patent issues

LZW algorithm for image compression

33

GIF (cont’d)GIF (cont’d)

• GIF dithering in photos Example: gifdithering.html

• Image compression is lossless

• Cool features Interlaced GIF Transparent GIF Animated GIF

34

Interlaced GIFs Interlaced GIFs

• Displays images incrementally equals to progressive JPEG example: car-interlaced.gif

• Gives users something to look at while the image is still downloading

• Any GIF image can be converted to an interlaced GIF Tools: photoshop, GiFFY, convert

35

Transparent GIFs Transparent GIFs

• Transparent regions in an image allow the background color or pattern of a Web page to show through

• Any GIF image can be made transparent by specifying one color in the image that defines its

transparent regions

• Examples transparent-background.html transparent-foreground.html

36

Animated GIFs Animated GIFs

• The GIF file format supports cartoon animations

• An animated GIF is stored in a single GIF file

• Use same rule to display an animated GIF

• Tools to create animated GIF images Animagic GIF

• Examples Rolling Star

Traffic Light

37

JPEG (Joint Photographic Experts Group)

JPEG (Joint Photographic Experts Group)

• Uses a fixed 24-bit color palette (millions of colors)

• Especially suitable for high-resolution photographs

• Uses lossy file compression trades image quality for memory savings very good for minimizing bandwidth you control the trade-off when you save the image

• Example: lossy.html Lossy compression only supported by JPEG

38

PNG(Portable Network Graphics)

PNG(Portable Network Graphics)

• W3C free stand-in format for GIF

• Often smaller than GIF

• Lossless (like GIF)

• Does not support animation

39

Thumbnail previews Thumbnail previews

• Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Usually make the thumbnail sketch a link to a

big sized image (bandwidth intensive) Users can decide if they want to click through

to the original image

• Example thumbnail.html

40

How to make thumbnailsHow to make thumbnails

• Load image in a program (e.g. Photoshop)

• Reduce the image quality under the save options

• Set a small height and width in the page

• Will be covered in the Maclab’s PhotoShop tutorial ??

41

Convert image filesConvert image files

• Can achieved through many tools Photoshop, Acdsee, etc

• You can use the “convert” tool in Linux Part of Image Magic Installed in our department Linux system Can get (via fink) version for Mac OSX Can reduce image quality, do interlacing Example:

• convert -quality 10 foo.jpg foo.tn.jpg

More details about “convert”

42

Battling bandwidth limitationsBattling bandwidth limitations

• Images consume more bandwidth than text files, so use images no larger than 30-40KB whenever possible dial-up users have to wait for image files >= 100KB

• Always specify height and width attributes for images so the browser can “work around” each image while it is downloading

• Don’t put any large images at the top of a Web page

• Use interlaced GIFs and progressive JPEGs

43

Hyperlink (link)Hyperlink (link)

• Hypertext = text + links Typically, you click on the hyperlink to follow

the link

• Hyperlinks are the most essential ingredient of WWW Link documents with other collections around

the world

44

All Hyperlinks Have Two Parts

All Hyperlinks Have Two Parts

• The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images)

• The Link Destination is the location that the link takes you to when you click on the link

• Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors

45

Anchor Tags Anchor Tags

• Hyperlinks are created with the anchor tag <a></a> The href attribute is used to specify the

link destination Examples:• <a>this is a link label</a>• <a href=“dest.html”>label</a>

46

Different Types of HyperlinksDifferent Types of Hyperlinks

• Absolute URLs usually point to Web pages on other Web

servers

• Relative URLs point to Web pages on the same Web

server

• Named Anchors point to a different location on the current

Web page

47

Absolute URLs Absolute URLs

• All absolute URLs use complete URL addresses for their link destinations Example format: <a href=“http://www.uchicago.edu/”>UChicago</a>

• Any Web page can be referenced by an absolute URL as long as you have its correct address Example: Linkexamples.html

48

Relative URLs Relative URLs

• A relative URL need only specify a file name for its link destination:

<a href=“sol2.html”>alternative solution</a>

• This assumes the destination file is in the same directory as the HTML file containing the link

• If the file is in a different directory, pathing information must be added to the href value

• Example: Linkexamples.html

49

Named Anchors Named Anchors

• A named link destination specifies a location that has been marked by an anchor tag with a name attribute

<a name=“lumber”>Good Lumber</a>

…

<a href=“#lumber”>some good lumber</a>

• The href value is prefaced with the # character but the name value is not

• Example: Linkexamples.html

50

Named Anchors Combined with Other Links

Named Anchors Combined with Other Links

• A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor <a href=“treehouse.html#lumber”>Some Good Lumber</a>

• Just add a # followed by the anchor’s name to the end of the file name in the href value

51

Making anything a linkMaking anything a link

• You can enclose all sorts of elements inside <a></a> text headings pictures

• Making a picture a link: <a href= “foo.html”><img src=“foo.jpg”></a>

• Example: imagelink.html

52

Control Link StatesControl Link States

• link, vlink and alink Attributes of body tag All three accept color values• Either hexadecimal RGB triplet or color name

Determine the color of all unvisited, already visited, and currently visiting hyperlinks

53

Link Maintenance Link Maintenance

• An absolute link that works today may not work tomorrow

• Dead links frustrate visitors and detract from your Web pages

• To keep all of your links operational, you have to test them periodically and update any that have died

54

Image maps Image maps

• An image with different clickable regions (hot spots) Each region can link to different document Typically used in navigational menus and bars

• It is the joint-work of <img> and <map> elements <map> defines the hot spots and the linked destinations

• <area> (standalone tag) Attributes: shape, coords, href

<img> uses the “usemap” attribute to associate to certain map

55

Image maps Image maps

• Image maps can be created manually with the “ISMAP trick” or with the help of an image mapper

• Best created with software

• Example: Imagemap.html

course’s home page