Introduction to Programming the WWW ICMSC 10100-1

Winter 2004Lecture 3

2

Today’s Topics

• Text formatting Fonts, colors Control white space and special characters

• Images

3

Reminder

• Hw1 due this Thurs.• MacLab tutorials• Register online• Make an appointment if you need help

4

Fonts

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

• Attributes face size color

5

Font faces

• The face attributes tells browser what font face (or "typestyle") to use for the text

• Fonts installed on browsers varies widely: age, platform, user preferences

• It is best to specify type faces in groups since different computers use different type fonts:

face=“Arial, Helvetica, Geneva, sans-serif” face=“Times, Courier, Courier New, serif”• Browsers select a default if none of the faces are

found

6

Font faces (cont’d)

• Best to stick with “safe” fonts and use other features for effect (HTML pp. 26-27)

• Generic font families sans-serif fonts: Arial, Helvetica, Geneva, etc serif fonts: Times, Times New Roman monospaced fonts: Courier, Courier New Suggestions

• serif for body, sans for title• use <tt></tt> for monospaced

7

Font sizes

• Size is controlled by the size attribute Can specify an “absolute” size

• value of “1” through “7”, “3” indicates normal• depends on browser and font face

Can specify a “relative” size• value from “-2” to “+4”• This is relative to the current font size

• Example: font_example.html

8

Font colors

• Controlled with the “color” attribute Most browsers recognize a list of text names

• aqua, black, blue, green, red, etc• See HTML p. 43 for a list

Also recognize RGB codes in hexadecimal Prefer to use 216 “Web safe” colors

• They are fairly consistent across platforms• Ref: 216 Web-safe color table

9

Hexadecimal Colors

• hexadecimal notation Base 16 instead of 10 (uses 0 - 9 plus A - F) “FF” = 15 * 16 + 15 * 1 = 255; “13” = 1 * 16 + 3 = 19 Use “#” followed by three two-digit numbers in

sequence for a color• E.g: red = #ff0000

In total, we have 16,777,216 colors (224) (why?) Example:

• colors.html• bgcolorexample.html

10

A note about fonts

• <font></font> is deprecated Still part of HTML standard but will be removed in the

future Cascading Style Sheets (CSS) is a better solution

• Why deprecated elements? Easier to “get going” than CSS Still be recognized by browsers for a good while Lots of existing HTML uses them, so you should be

able to read/understand that code• Ref: Break the <font> Habit

11

Controlling white space

• HTML browsers do their own thing with white space Example: whitespace.html

• There are some ways around this: nonbreaking white space: &nbsp; line breaks: <br> block quotes: <blockquote> preformatted text: <pre> preformatted plain text: <plaintext> (obsolete)

12

Text styles

• Styles bring better readability• Content-based text styles

The style tags have specific usage or meaning Can be rendered in different ways by browsers

• Physical styles Tell browser to display text in a particular physical

style

• Example: textstyle.html

13

Special Text Characters• Special characters include those

Can not be typed from keyboard. e.g: ® Have special meaning. e.g: <, >, &

• The solution is using character entity character reference

• consists of an ampersand (&), a pound sign (#), a numerical value, and a semicolon (;). for example, &#60; is <

• Numeric value is the character position number in ASCII table entity reference

• consists of an ampersand (&), a character string, and a semicolon (;). for example, &lt; is <

• Example: specialchar.html

14

Images

• Background images• Inline images

specifying a source file flowing text size and other attributes

15

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 be small for fast downloads• Example:

backgoundexample.html

16

Inline images

• Use the standalone <img> tag with attributes to control: image file to include (required) alternate text if image is not displayed

(required) Border and spacing image alignment within text height and width of image

17

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

18

Image alignment

• To control over the alignment of images with the surrounding text 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 Images.html

19

Image border and spacing

• The border attribute Control the thickness of the border The value is an integer in pixels (default is 0) Useful when rendering image as hyperlink

• The hspace and vspace attributes Specify the number of pixels of extra space to leave

between the image and the text on its left and right sides

• Example: Image-border-spacing.html

20

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

21

Image File Formats

• GIF: Graphics Interchange Format

• JPEG: Joint Photographic Experts Group

• PNG: Portable Networks Graphics

22

GIF (Graphics Interchange Format)

• Uses an adaptive 8-bit color palette 256 colors at most

• Especially suitable for line art and cartoons

• Can work well for some photographs• Patent issues

LZW algorithm for image compression

23

GIF (cont’d)

• GIF dithering in photos Example: gifdithering.html

• Image compression is lossless• Coo features

Interlaced GIF Transparent GIF Animated GIF

24

Interlaced GIFs

• Displays images incrementally equals to progressive JPEG example: car-interlaced.gif

• Gives users something to look at while the image is still downloading

• Any GIF image can be converted to an interlaced GIF Tools: GiFFY, convert

25

Transparent GIFs

• Transparent regions in an image allow the background color or pattern of a Web page to show through

• Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions

• How to make transparent GIFs? The background of a photograph can be made transparent

after some graphics editing

• Examples transparent-background.html transparent-foreground.html

26

Animated GIFs

• The GIF file format supports cartoon animations• An animated GIF is stored in a single GIF file• Use same rule to display an animated GIF• Tools to create animated GIF images

Animagic GIF

• Examples Rolling Star Traffic Light

27

JPEG (Joint Photographic Experts Group)

• Uses a fixed 24-bit color palette (millions of colors)

• Especially suitable for high-resolution photographs

• Uses lossy file compression trades image quality for memory savings very good for minimizing bandwidth you control the trade-off when you save the image

• Example: lossy.html Lossy compression only supported by JPEG

28

PNG(Portable Network Graphics)

• W3C free stand-in format for GIF• Often smaller than GIF• Lossless (like GIF)• Does not support animation

29

Thumbnail previews

• Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Usually make the thumbnail sketch a link to a

big sized image (bandwidth intensive) Users can decide if they want to click through

to the original image• Example

thumbnail.html

30

How to make thumbnails

• Load image in a program (e.g. Photoshop)• Reduce the image quality under the save

options• Set a small height and width in the page• Will be covered in the PhotoShop tutorial

31

Convert image files

• Use the command “convert” in Linux Part of Image Magic installed in our department Linux system Can get (via fink) version for Mac OSX can reduce image quality, do interlacing convert -quality 10 foo.jpg foo.tn.jpg More details about how to use “convert”

32

Battling bandwidth limitations

• Images consume more bandwidth than text files, so use images no larger than 30-40KB whenever possible dial-up users have to wait for image files >= 100KB

• Always specify height and width attributes for images so the browser can “work around” each image while it is downloading

• Don’t put any large images at the top of a Web page

• Use interlaced GIFs and progressive JPEGs