Introduction to Programming the WWW I

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

2. Today’s Topics • Linux introduction • List, images, hyperlinks, image maps

3. Reminder • Hw1 released and due next Wednesday

4. Introduction 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. Directories • 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 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 directories • Command: mkdir <directory path&name> • All your homework will be turned in to ~<yourhome>/html/cs101/hw<x>, where xis 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 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 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

10. 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 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 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? • 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? • 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. Examples • 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 example • chmod 600 myfile.html • Gives you read, write • Shuts off file to the world

17. Using 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. Lists • 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 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 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 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 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 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. Images • Background images • Inline images • specifying a source file • flowing text • size and other attributes

25. Background 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 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 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 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 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 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 Formats • GIF: • Graphics Interchange Format • JPEG: • Joint Photographic Experts Group • PNG: • Portable Networks Graphics

32. 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 dithering in photos • Example: gifdithering.html • Image compression is lossless • Cool features • Interlaced GIF • Transparent GIF • Animated GIF

34. 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 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 • 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) • 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) • W3C free stand-in format for GIF • Often smaller than GIF • Lossless (like GIF) • Does not support animation

39. 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 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 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 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) • 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 • 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 • 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 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 • 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 • 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 • 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 • 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