introduction to programming the www i cmsc 10100-01 winter 2003 lecture 3

Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-01

Winter 2003

Lecture 3

Today’s topicsToday’s topics

• Fonts

• Lists

• Formatting

• Colors

• Image basics

FontsFonts

• Basic tag: <font></font> formats contained text

• Attributes face,size,color

• Presentational and informational elements

• Browsers font issues

• Deprecated elements and attributes

Font facesFont 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

More on font facesMore 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 sizesFont 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 colorFont 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 InformationPresentation 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

Issues with browsers and fonts

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 elementsDeprecated 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)

Why learn/use deprecated elements

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

ListsLists

• Three kinds of lists: Ordered Unordered Definition lists

• Frequently used in Web programming Sets out big ideas Table of contents List of links

Ordered listsOrdered 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:

Attributes for ordered listsAttributes 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 listsUnordered lists

• Used for more general collection of items list of links ingredients for a recipe rather than

instructions

• Be

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

Some more formattingSome 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 spaceNonbreaking white space

• The code &nbsp; 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 breakLine break

• We’ve seen <br> already

• It can be used to add multiple sets of spaces

• Use this rather than <p> to add spaces

Block quotesBlock quotes

• Sets off a quotation, important note, etc.

• Should be contained within <p></p>

• Usage: <blockquote></blockquote>

• Example:

Preformatted textPreformatted text

• Useful for putting in computer code, “visual” poetry

• Typically appears in a monospaced font

• Usage: <pre></pre>

• Example:

ColorsColors

• 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

• Web-safe colors: subset of RGB colors• Example:

ImagesImages

• Background images including the file some tips

• Inline images specifying a source file flowing text size and other attributes

Background imagesBackground 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:• Example:

Inline imagesInline 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

Including the fileIncluding 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 alignmentImage 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 imageResizing 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.