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

2. 2 Today’s topics Fonts (cont’d) Lists Formatting Colors Image basics Some basic techniques Links

3. 3 Fonts Basic tag:  formats contained text Attributes  face,size,color Presentational and informational elements Browsers font issues Deprecated elements and attributes

4. 4 Font faces Controlled with the face attribute. See HTML pp. 26-27 for a discussion, list of safe fonts Fonts installed on browsers varies widely:  age, platform, user preferences Best to stick with “safe” fonts and use other features for effect

5. 5 More on font faces Arial is a sans-serif font Times is a serif font sans-serif vs. serif  Webopedia explanation Webopedia explanation Suggestion: serif for body, sans for title You should specify a list of fonts for  Windows, Mac, others Browsers select a default if none of the faces are found See “Web Design” Chapter 3 for guidelines

6. 6 Font sizes Size is controlled by the size attribute  Can specify an “absolute” size value of “1” through “7” depends on browser and font face  Can specify a “relative” size value of “+n” or “-n” for some n This is relative to the current font size Example:  font_example.html font_example.html

7. 7 Font color Controlled with the “color” attribute  Most browsers recognize a list of text names aqua, black, blue, fuchsia, etc See HTML p. 43 for a list  Also recognize RGB codes in hexadecimal  There are 216 “Web safe” colors that are fairly consistent across platforms 216 Web-safe color table More on colors later

8. 8 Presentation and Information HTML provides two ways of emphasizing (bold and italic) text:  Presentational elements for bold for italic  Informational elements is usually bold is usually italic Gives more information to text-voice conversion

9. 9 Issues with browsers and fonts Choice of fonts installed on browsers varies widely based on:  Age of browser  Platform (Mac, Win, Linux)  Overriding user preferences To avoid difficulties it is best to:  Stick to safe fonts  Not rely too much on fonts for effect

10. 10 Deprecated elements is deprecated  Still part of HTML standard  Could be removed at some (unspecified) time in the future  There is now a better way to do it: CSS (Cascading Style Sheets) CSS helps with separating document organization from document display

11. 11 Why learn/use deprecated elements Easier to “get going” than CSS Will still be around and recognized by browsers for a good while Lots of existing HTML uses them, so you should be able to read/understand that code We’ll switch to CSS later in the quarter

12. 12 Lists Three kinds of lists:  Ordered  Unordered  Definition lists Frequently used in Web programming  Sets out big ideas  Table of contents  List of links

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

14. 14 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 These attributes are deprecated and can be controlled better through CSS

15. 15 Unordered lists Used for more general collection of items  list of links  ingredients for a recipe rather than instructions Example  Unorderedlist.html Unorderedlist.html

16. 16 Definition lists Not just for definitions Can be for longer descriptions, etc Uses tag to begin and end list Rather than using to denote list items, has terms and definitions  Example: definitionlist.htmldefinitionlist.html

17. 17 Some more formatting HTML browsers do their own thing with white space There are some ways around this:  nonbreaking white space:  line breaks:  block quotes:  preformatted text:  Preformatted plain text:

18. 18 Nonbreaking white space The code produces a single white space  The ampersand and semicolon are required  Useful for inserting spaces by hand

19. 19 Line break We’ve seen already It can be used to add multiple sets of spaces Use this rather than to add spaces

20. 20 Block quotes Sets off a quotation, important note, etc. Should be contained within Usage: Example:  Blockquote.html Blockquote.html

21. 21 Preformatted text Useful for putting in “visual” poetry or computer code Typically appears in a monospaced font Usage: Example:  Preexample1.html Preexample1.html  Same code without Same code without

22. 22 Preformatted plain text Obsolete already! Replaced by, since it's behavior can be very odd on some browsers

23. 23 Colors Names: see HTML p. 43 Hexadecimal (base 16 instead of 10)  uses 0 through 9 plus A through F  “AB” = 10 * 16 + 11 * 1 = 171; “13” = 1 * 16 + 3 = 19  To make a color, use three two-digit numbers in sequence  In total, we have 16,777,216 colors (2 24 ), why? Web-safe colors: subset of RGB colors Example: colors.htmlcolors.html

24. 24 Images Background images  including the file  some tips Inline images  specifying a source file  flowing text  size and other attributes

25. 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 small for fast downloads Can use with Example:  backgoundexample.html backgoundexample.html  bgcolorexample.html bgcolorexample.html

26. 26 Inline images Use the standalone tag with attributes to control:  image file to include  alternate text if image is not displayed  image alignment within text  height and width of image Customize the size of the image

27. 27 Including the file src attribute specifies the image file 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. 28 Image alignment Default alignment is typically ugly The align attribute helps  “ 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.htmlimage-examples.html

29. 29 Resizing the image Specify the height and width Preserve the aspect ratio This affects the size the image appears, not the size of the file  Use Photoshop or other tool to create smaller image file with coarser resolution, etc. Example: imgexample_resize.htmlimgexample_resize.html

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

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

32. 32 Introduction to Unix 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

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

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

35. 35 Making a directory All your homework will be turned in to ~ /html/cmsc10100/hw, 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

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