Introduction to Programming the WWW I CMSC 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 ~  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  All your homework will be turned in to ~ /html/cs101/hw, 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 files The commands cp and rm copy and delete files  Copy a file cp path must be specified for filenames default is current directory Example: cp foo.html foo_bak.html  Copy a directory cp –r  Delete a file/directory rm

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 ls 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 test.in

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 Where 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 Here

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 Each element in the list is Example:  Orderedlist1.html 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 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 unorderedlist.html

22 Definition lists Used for definitions and long descriptions Uses tag to begin and end list Rather than using to denote list items, has terms and definitions  Example: definitionlist.htmldefinitionlist.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.htmlnestlist.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 backgoundexample.html

26 Inline images Use the standalone 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.htmlimgexample.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 image-examples.html  Images.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 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.htmlimgexample_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.htmlgifdithering.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.gifcar-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, convertGiFFY

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-background.html  transparent-foreground.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 Animagic GIF Examples  Rolling Star Rolling Star  Traffic Light 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.htmllossy.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 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 OSXfink  Can reduce image quality, do interlacing  Example: convert -quality 10 foo.jpg foo.tn.jpg  More details about “convert”details

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  The href attribute is used to specify the link destination  Examples: this is a link label label

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: UChicago Any Web page can be referenced by an absolute URL as long as you have its correct address  Example: Linkexamples.htmlLinkexamples.html

48 Relative URLs A relative URL need only specify a file name for its link destination: alternative solution 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.htmlLinkexamples.html

49 Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute Good Lumber … some good lumber The href value is prefaced with the # character but the name value is not Example: Linkexamples.htmlLinkexamples.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 Some Good Lumber Just add a # followed by the anchor’s name to the end of the file name in the href value

51 Making anything a link You can enclose all sorts of elements inside  text  headings  pictures Making a picture a link: Example: imagelink.htmlimagelink.html

52 Control 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 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 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 and elements  defines the hot spots and the linked destinations (standalone tag)  Attributes: shape, coords, href  uses the “usemap” attribute to associate to certain map

55 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 Imagemap.html  course’s home page course’s home page