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: 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, < 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, < 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