Introduction to Programming the WWW I CMSC Winter 2003 Lecture 3

Today’s topics Fonts Lists Formatting Colors Image basics

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

Font faces Controlled with the face attribute. See HTML pp 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

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

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 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 More on colors later

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

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

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)

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

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

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:

Attributes for ordered lists We can set two attributes  The type of symbols used Arabic numerals capital or lower case letters capital or lower case Roman numerals  The start value Example: These attributes are deprecated and can be controlled better through CSS

Unordered lists Used for more general collection of items  list of links  ingredients for a recipe rather than instructions Be

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

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

Nonbreaking white space The code produces a single white space  The ampersand and semicolon are required  Useful for inserting spaces by hand  Save as…HTML in Microsoft Word litters the whole page with them and leads to unreadable HTML.

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

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

Preformatted text Useful for putting in computer code, “visual” poetry Typically appears in a monospaced font Usage: Example:

Colors Names: see HTML p. 43 Hexadecimal (base 16 instead of 10)  uses 0 through 9 plus A through F  “AB” = 10 * * 1 = 171; “13” = 1 * = 19  To make a color, use three two-digit numbers in sequence Web-safe colors: subset of RGB colors Example:

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

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:

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

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:

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: bagpipes page

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.