Designing a Web Page

1. Designing a Web Page Tutorial 3 & 4 Working with Fonts, Colors, and Graphics Working with Table

2. Objectives • Working with color in HTML • Working with Fonts and Text Styles • Aligning an Image • Tables on the WWW • Tips for Web page Design (pp. 159-160) • Tips for Effective Use of Tables (p. 230)

3. Working with Color in HTML • Using color will make your web pages: • visually interesting • eye-catching for the reader • HTML is a text-based language, requiring you to define your colors in textual terms. • HTML identifies a color in one of two ways: • by the color value • by the color name

4. Using Color Values • To have more control and more choices, specify colors using color values. • A color value is a numerical expression that precisely describes a color.

5. Basic Principles of Color Theory • Any color can be thought of as a combination of three primary colors: red, green, and blue. • This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen.

6. Adding the Three Primary Colors Primary color model for light

7. RGB (Red, Green, and Blue) Triplets • Software programs, such as your Web browser, define color mathematically. • The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity). • In this way, 2553, or more than 16.7 million, distinct colors can be defined. • Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components.

8. RGB Triplets Examples • White has a triplet of (255,255,255), indicating that red, green, and blue are equally mixed at the highest intensity. • Yellow has the triplet (255,255,0) because it is an equal mixture of red and green with no presence of blue.

9. A Typical Colors Dialog Box • In most programs, you make your color choices with visual clues, • usually without being aware of the underlying RGB triplet. • This figure shows a typical dialog box in which you would make color selections • based on the appearance of the color, rather than on the RGB values.

10. Hexadecimal Values • HTML requires color values be entered as hexadecimals. • A hexadecimal is a number based on base-16 mathematics rather than base-10 mathematics that we use every day. • in base 10 counting, you use combination of 10 characters (0 through 9) to represent numerical values. • hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15). • for values above 15, you use a combination of the 16 characters; 16 is expressed as “10”, 17 is expressed as “11”, and so forth. • Because of the popularity of the Web, most graphics programs will now display the hexadecimal value of the colors in their color selection dialog boxes.

11. Hexadecimal Values • To represent a number in hexadecimal terms, you convert the value to multiples of 16 plus a remainder. For example: • 21 is equal to (16 x 1) + 5, so its hexadecimal representation is 15. • the number 255 is equal to (16 x 15) + 15, or FF in hexadecimal format (remember that F = 15 in hexadecimal). • in the case of the number 255, the first F represents the number of times 16 goes into 255 (which is 15), and the second F represents the remainder of 15. • Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format.

12. Using Color Values • A palette is a selection of colors • When a browser encounters a color that is not in its palette, it attempts to render the color; this is called dithering

13. The 16 Basic Color Names The 16 basic color names that are recognized by all versions of HTML and XHTML.

14. Partial List of Extended Color Names Partial list of extended color names

15. Defining Foreground and Background Colors • Foreground color definition: • color: color coloris either the color value or the color name • Background color definition: • background-color: color • You can apply foreground and background colors to any page element

16. Defining Foreground and Background Colors • To define the background color for an entire page: • Add the bgcolor attribute to the <body> tag • To define the text color for an entire page: • Use the text attribute • An example of background and text color changes including the color’s hexadecimal value: • <body bgcolor=“yellow” text=“#99CCFF”>

17. Defining Foreground and Background Colors

18. Using the <font> Tag • The <font> tag allows you to specify the color, the size, and the font to be used for text on a Web page. • The syntax for the <font> tag is: <font size=“size” color=“color” face=“face”> text </font> • size attribute allows you to specify the font size of the text • color attribute allows you to change the color of individual characters or words • face attribute specifies a particular font for a section of text

19. Font Styles and Weights • To specify font styles, use the following style: • font-style: type • To control font weight for any page element, use the following style: • font-weight: weight • To change the appearance of your text, use the following style: • text-decoration: type

20. Decorative Features • Underline, overline: • text-decoration: underline overline • Capitalize: • text-transform: capitalize • Uppercase letters, small font: • font-variant: type • See the reference window on page HTML 127 for more information on setting font styles

21. Text Alignment

22. Controlling Image Alignment • The syntax for the float style is: float: position

23. Controlling Image Alignment • The align attribute can control the alignment of an image with the <img> tag. • The syntax for the align attribute is: <img align=“position” /> • alignment indicates how you want the graphic aligned in relation to the surrounding text

24. align= Description absbottom Aligns the bottom of the object with the absolute bottom of the surrounding text. The absolute bottom is equal to the baseline of the text minus the height of the largest descender in the text. absmiddle Aligns the middle of the object with the middle of the surrounding text. The absolute middle is the midpoint between the absolute bottom and text top of the surrounding text. baseline Aligns the bottom of the object with the baseline of the surrounding text. bottom Aligns the bottom of the object with the bottom of the surrounding text. The bottom is equal to the baseline minus the standard height of a descender in the text. left Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the object. middle Aligns the middle of the object with the surrounding text. right Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object. texttop Aligns the top of the object with the absolute top of the surrounding text. The absolute top is the baseline plus the height of the largest ascender in the text. top Aligns the top of the object with the top of the text. The top of the text is the baseline plus the standard height of an ascender in the text. Alignment Options

25. Margins • Control your margins with the following four styles: • margin-top: length • margin-right: length • margin-bottom: length • margin-left: length • Margin values can also be negative- this creates an overlay effect by forcing the browser to render one element on top of another • You can also combine the four margin styles into a single style

26. A Graphical Table This figure shows a graphical table

27. Graphical TablesDefining a Table Structure • The first step to creating a table is to specify the table structure: • the number of rows and columns • the location of column headings • the placement of a table caption • Once the table structure is in place, you can start entering data into the table.

28. Using the <table>, <tr>, and <td> Tags • Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure. • Each row of the table is indicated using a two-sided <tr> (for table row). • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells.

29. The Graphical Table Syntax • The general syntax of a graphical table is: <table> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> • This creates a table with two rows and two columns.

30. two rows A Simple Table The layout of a graphical table two columns

31. beginning of the table structure table cells first row of six in the table end of the table structure HTML Structure of a Table You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell.

32. Creating Headings with the <th> Tag • HTML provides the <th> tag for table headings. • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font. • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text.

33. table headings appear bold and centered over their columns Result of Table Headingsas Displayed in the Browser

34. Row of table headings Adding Table Headings to the Table Text in cells formatted with the <th> tag is bold and centered above each table column

35. Creating a Table Caption • HTML allows you to specify a caption for a table. • The syntax for creating a caption is: <caption align=“alignment”>caption text</caption> • alignmentindicates the caption placement • a value of “bottom” centers the caption below the table • a value of “top” or “center” centers the caption above the table • a value of “left” or “right” place the caption above the table to the left or right

36. Table Captions • Internet Explorer also supports the “center” value for a caption. Older browsers only support “top” and “bottom” because HTML 3.2 only specified these options. • The <caption> tag works only with tables, the tag must be placed within the table structure. • Captions are shown as normal text without special formatting. • Captions can be formatted by embedding the caption text within other HTML tags. • for example, place the caption text within a pair of <b> and <i> tags causes the caption to display as bold and italic

37. table caption Result of a Table Caption A table with caption

38. caption text caption will be centered above the table Inserting a Table Caption Placing the caption text within a pair of <b> tags causes the caption to display as bold

39. Modifying the Appearance of a Table • You can modify the appearance of a table by adding: • gridlines • borders • background color • HTML also provides tags and attributes to control the placement and size of a table.

40. Working with the Table Border • By default, browsers display tables without table borders. • A table border can be added using the border attribute to the <table> tag. • The syntax for creating a table border is: <table border=“value”> … </table> • value is the width of the border in pixels • The size attribute is optional; if you don’t specify a size, the browser creates a table border 1 pixel wide.

41. Tables with Different Borders Values The effect on a table’s border when the border size is varied

42. Adding a 5-Pixel Border to a Table Only the outside border is affected by the border attribute; the internal gridlines are not affected

43. Table Frames and Rules • The frame attribute was introduced in HTML 4.01- therefore might not be supported in older browsers. • With the frame and rule attributes you can control how borders and gridlines are applied to the table. • The frames attribute allows you to determine which sides of the table will have borders. • The frame attribute syntax is: <table frame=“type”> … </table> • type is either “box” (the default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void”

44. Values of the Frame Attribute

45. Effect of Different Frame Values

46. Creating Frames and Rules • The rules attribute lets you control how the table gridlines are drawn. • The syntax of the rules attribute is: <table rules=“type”> … </table> • type is either “all”, “rows”, “cols”, or “none”

47. Effect of Different Rules Values

48. Sizing a TableCell Spacing • The cell spacing attribute controls the amount of space inserted between table cells. • The syntax for specifying the cell space is: <table cellspacing=“value”> … </table> • value is the width of the interior borders in pixels • the default cell spacing is 2 pixels • Cell spacing refers to the space between the cells.

49. Tables with Different Cell Spacing Values Different cell spacing values and a table’s appearance

50. Setting the Cell Spacing to 0 Pixels Setting the cellspacing to 0 reduces the width of the borders between individual table cells. This will not remove the border between the cells.