1 / 55

Introduction to Programming the WWW I

Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 3 Today’s Topics Linux introduction List, images, hyperlinks, image maps Reminder Hw1 released and due next Wednesday Introduction to Linux Very useful in networking, Web servers

paul2
Download Presentation

Introduction to Programming the WWW I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related