Designing a Web Page. Tutorial 3 & 4. Working with Fonts, Colors, and Graphics Working with Table. 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)
Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
Tutorial 3 & 4
Working with Fonts, Colors, and Graphics
Working with Table
Primary color model for light
The 16 basic color names that are recognized by all versions of HTML and XHTML.
Partial list of extended color names
coloris either the color value or the color name
<font size=“size” color=“color” face=“face”> text </font>
<img align=“position” />
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.
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.
Aligns the bottom of the object with the baseline of the surrounding text.
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.
Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the object.
Aligns the middle of the object with the surrounding text.
Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object.
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.
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
This figure shows a graphical table
<td> First Cell </td>
<td> Second Cell </td>
<td> Third Cell </td>
<td> Fourth Cell </td>
The layout of a graphical table
first row of six in the table
end of the table structureHTML 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.
Text in cells formatted with the <th> tag is bold and centered above each table column
A table with caption
caption will be centered above the tableInserting a Table Caption
Placing the caption text within a pair of <b> tags causes the caption to display as bold
The effect on a table’s border when the border size is varied
Only the outside border is affected by the border attribute; the internal gridlines are not affected
<table frame=“type”> … </table>
<table rules=“type”> … </table>
Different cell spacing values and a table’s appearance
Setting the cellspacing to 0 reduces the width of the borders between individual table cells.
This will not remove the border between the cells.
<table cellpadding=“value”> … </table>
The effect of changing the cell padding value for a table
A table with an increased amount of cell padding.
By increasing the cell padding, you added needed space to the table.
This cell spans three columns
This cell spans three rowsExample of Spanning Cells
only three table cells are required for the second and third rows
resulting tableA Table Structure with a Row-Spanning Cell
these cells span three rowsAdding Spanning Cells to a Table
<td background=“parch.jpg”>Applying a Background Imageto a Table, Row, and Cell