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

2. 2 Topics Today Review Basic techniques (cont’d) Hyperlinks More about images Introduction of image map

3. 3 A HTML TagTemplate (insert text for the browser’s title bar here) (insert visible Web page elements here)

4. 4 Heading Elements Headings come in six sizes is the largest heading is the smallest heading Headings break up text with titles and subtitles

5. 5 Tag Attributes Most HTML tags support their own set of tag attributes Each attribute contains an attribute name and an attribute value E.g. you can center a heading with an alignment attribute:

6. 6 Breaking Up Text The paragraph element begins a block of text after an empty line The break element begins a block of text on a new line The horizontal rule element inserts a horizontal line to emphasize a break in the text

7. 7 Standard Type Face Options It is best to specify type faces in groups since different computers use different type fonts: face=“Arial, Geneva, Helvetica” face=“Times New Roman, Times” face=“Courier New, Courier” Other useful font attributes include color and size

8. 8 Three Types of Lists Ordered list Unordered list Definition list

9. 9 White Space Management Browsers are programmed to ignore extraneous blank spaces and empty lines Controlling white space on a Web page requires special HTML elements:

10. 10 Background Colors The bgcolor attribute inside the body tag is used to specify a Web page’s background color: Bgcolor values can also be expressed in hexadecimal notation:

11. 11 Background Patterns The background attribute inside the body tag is used to specify a background pattern: All background patterns are repeated like tiles to fill up a Web page’s background

12. 12 Inline Images The src attribute inside the img tag is used to add an image to a Web page: GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats

13. 13 Image Attributes The align attribute positions the image and enables text to flow around an image The height and width attributes scale the image to any size you like The alt attribute allows you to describe the image in text for browsers that can’t display the image

14. 14 Text editors If you are working on your own Mac/Windows machine, you will need a text editor  Windows Notepad  Mac OS9 SimpleText (or OSX in Classic)  Mac OSX TextEdit Also good to know a Unix text editor - we’ll cover this later

15. 15 Homework 1 The web page should correctly uses HTML structure (head, title, body) The web page should correctly employs headings, paragraphs, line breaks, horizontal rules, and font markup to convey your ideas The web page should use one of the white-space controlling tags (,, etc) The web page should use at least one kinds of lists Set the web page background color or use a (tastefully done) background image on the page The web page should include at least one inline image related to the theme Validate your page through the W3C validator before you're done with the assignmentW3C validator

16. 16 Basic Techniques (cont’d)

17. 17 Using text editors Windows, Mac OS9 are easy - just type in the html, save as myfile.html, and view TextEdit for OSX is a little fussier Go to TextEdit-->Preferences… Select New Document Attributes --> Plain text radio button Deselect Saving --> “append.txt extension” check box

18. 18 Introduction to Linux Not so easy to begin learning as Win/Mac Very useful in networking, Web servers 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  See the Perl/CGI book for more information

19. 19 Directories Much like folders in Win/Mac. My home directory is referred to as ~hai  This is short for /home/hai or something like that (depends on the system) When you log in, you are in your home directory.

20. 20 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”

21. 21 Making a directory All your homework will be turned in to /home/ /html/cmsc10100/h w, where x is the number of the assignment. From “home”, type in  mkdir html (creates the html directory)  cd html (changes to the html directory)  mkdir cmsc10100  cd cmsc10100  mkdir hw1  cd hw1

22. 22 Now what? You are now “in” the directory for your first homework assignment.  Type pico  Type in a “hello world” html file.  Type control-o and then a name for the file. This saves the file.  Check other pico commands online. Here is a list Here  Type control-X to exit.

23. 23 File 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 28 2002 test.in

24. 24 Copying and deleting files The commands cp and rm copy and delete files  cp path must be specified for filenames default is current directory e.g. cp foo.html foo_bak.html  rm

25. 25 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)

26. 26 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

27. 27 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

28. 28 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.

29. 29 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

30. 30 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

31. 31 Another example: chmod 600 myfile.html  Gives you read, write  Shuts off file to the world

32. 32 Remote login and file transfer If you are not working directly on the CS Linux machines, you will need two things:  An SSH (not Telnet) client for logging in remotely  An SCP (not FTP) client for transferring files These tools may be freely downloaded These protocols are more secure than Telnet and FTP (and required by CS dept.)

33. 33 Information and links for downloading clients http://www.cs.uchicago.edu Follow the Computing Services, then Remote Access links This gives information for Windows, Mac OS, Linux machines My SSH&SCP page:  http://www.classes.cs.uchicago.edu/classes/a rchive/2003/summer/10100- 1/docs/ssh_scp.html http://www.classes.cs.uchicago.edu/classes/a rchive/2003/summer/10100- 1/docs/ssh_scp.html

34. 34 For Windows SSH client: PuTTY SCP client:  Command-line based: PSCP  GUI based: WinSCP How to use them? Where to get them?  PuTTY website PuTTY  WinSCP website WinSCP

35. 35 For Mac OSX Darwin comes with command line ssh, scp already installed:  ssh @.cs.uchicago.edu  scp : : Can move files either direction If is the present machine, : can be omitted scp ~/Documents/hello.html hai@union.cs.uchicago.edu:~/html Department’s login hosts

36. 36 Mac OSX, cont’d Commands can be done through the Terminal which can be found at Applications/Utilities You can also use MacSFTP located in Applications/Internet SimpleText can be found at Applications/TextEditing

37. 37 Hyperlink (link) Text plus links equals hypertext. Typically, you click on the hyperlink to follow the link Hyperlinks are the most essential ingredient of World Wide Web

38. 38 Different Types of Hyperlinks Absolute URLs 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

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

40. 40 Anchor Tags All hyperlinks are created with the anchor tag: this is a link label The href attribute is used to specify the link destination:

41. 41 Absolute URLs All absolute URLs use complete URL addresses for their link destinations: UChicago Any Web page can be referenced by an absolute URL as long as you have its correct address Example:

42. 42 Relative URLs A relative URL need only specify a file name for its link destination: tree houses 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

43. 43 Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute Some Good Lumber some good lumber The href value is prefaced with the # character but the name value is not

44. 44 Link Examles Linkexamples.html

45. 45 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

46. 46 Making anything a link You can enclose all sorts of elements inside  headings  text  pictures Making a picture a link:

47. 47 Examples Linkexample.html

48. 48 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

49. 49 Automated Link Checkers If you have a large number of links, you should automate the process of link testing You can subscribe to a Web-based service for link testing and weekly or monthly link reports You can obtain your own link testing software and run it yourself You could also write a Perl script…

50. 50 Inline Images The src attribute inside the img tag is used to add an image to a Web page: GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats

51. 51 Paths The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: If you want to retrieve an image from a different directory, you can add path information to the file name: You can also specify a URL to link an image from outside

52. 52 Image Attributes The align attribute positions the image and enables text to flow around an image The height and width attributes scale the image to any size you like The alt attribute allows you to describe the image in text for browsers that can’t display the image. Also helpful to text->voice conversion

53. 53 Flowing Text Use the align attribute to make text flow alongside an image: positions the image on the left side of the page and allows text to run down its right side