1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3

2. 2 Today’s Topics Text formatting  Fonts, colors  Control white space and special characters Images

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

4. 4 Fonts Basic tag:  formats contained text Attributes  face  size  color

5. 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. 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 for monospaced

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

8. 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 table216 Web-safe color table

9. 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 (2 24 ) (why?)  Example: colors.html bgcolorexample.html

10. 10 A note about fonts 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 HabitBreak the Habit

11. 11 Controlling white space HTML browsers do their own thing with white space  Example: whitespace.htmlwhitespace.html There are some ways around this:  nonbreaking white space:  line breaks:  block quotes:  preformatted text:  preformatted plain text: (obsolete)

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

13. 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 tableASCII table  entity reference consists of an ampersand (&), a character string, and a semicolon (;). for example, < is < Example: specialchar.htmlspecialchar.html

14. 14 Images Background images Inline images  specifying a source file  flowing text  size and other attributes

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

16. 16 Inline images Use the standalone 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. 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.htmlimgexample.html

18. 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 image-examples.html  Images.html Images.html

19. 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 Image-border-spacing.html

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

21. 21 Image File Formats GIF:  Graphics Interchange Format JPEG:  Joint Photographic Experts Group PNG:  Portable Networks Graphics

22. 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. 23 GIF (cont’d) GIF dithering in photos  Example: gifdithering.htmlgifdithering.html Image compression is lossless Coo features  Interlaced GIF  Transparent GIF  Animated GIF

24. 24 Interlaced GIFs Displays images incrementally  equals to progressive JPEG  example: car-interlaced.gifcar-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, convertGiFFY

25. 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-background.html  transparent-foreground.html transparent-foreground.html

26. 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 Animagic GIF Examples  Rolling Star Rolling Star  Traffic Light Traffic Light

27. 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.htmllossy.html  Lossy compression only supported by JPEG

28. 28 PNG (Portable Network Graphics) W3C free stand-in format for GIF Often smaller than GIF Lossless (like GIF) Does not support animation

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

30. 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. 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 OSXfink  can reduce image quality, do interlacing  convert -quality 10 foo.jpg foo.tn.jpg  More details about how to use “convert”details

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