Upload
corey-atkinson
View
222
Download
2
Embed Size (px)
Citation preview
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