Introduction to Programming the WWW I

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

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

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

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. More on font faces • Arial is a sans-serif font • Times is a serif font • sans-serif vs. serif • 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. 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

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. Presentation and Information • HTML provides two ways of emphasizing (bold and italic) text: • Presentational elements • <b></b> for bold • <i></i> for italic • Informational elements • <strong></strong> is usually bold • <em></em> is usually italic • Gives more information to text-voice conversion

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. Deprecated elements • <font></font> 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. 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. 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. 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

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

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

16. Definition lists • Not just for definitions • Can be for longer descriptions, etc • 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

17. Some more formatting • HTML browsers do their own thing with white space • There are some ways around this: • nonbreaking white space: &nbsp; • line breaks: <br> • block quotes: <blockquote> • preformatted text: <pre> • Preformatted plain text: <plaintext>

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

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

20. Block quotes • Sets off a quotation, important note, etc. • Should be contained within <p></p> • Usage: <blockquote></blockquote> • Example: • Blockquote.html

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

22. Preformatted plain text • <plaintext></plaintext> • Obsolete already! • Replaced by <pre>, since it's behavior can be very odd on some browsers

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 (224), why? • Web-safe colors: subset of RGB colors • Example: colors.html

24. Images • Background images • including the file • some tips • 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 small for fast downloads • Can use with • Example: • backgoundexample.html • bgcolorexample.html

26. Inline images • Use the standalone <img> 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. 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.html

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

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

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. 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 fussierGo to TextEdit-->Preferences…Select New Document Attributes --> Plain text radio buttonDeselect Saving --> “append .txt extension” check box

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. 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. 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. Making a directory • All your homework will be turned in to ~<yourhome>/html/cmsc10100/hw<x>, 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. 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 • Type control-X to exit.