designing a web page
Skip this Video
Download Presentation
Designing a Web Page

Loading in 2 Seconds...

play fullscreen
1 / 80

Designing a Web Page - PowerPoint PPT Presentation

  • Uploaded on

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)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Designing a Web Page' - Pat_Xavi

An Image/Link below is provided (as is) to download presentation

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
designing a web page

Designing a Web Page

Tutorial 3 & 4

Working with Fonts, Colors, and Graphics

Working with Table

  • 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)
working with color in html
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
using color values
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.
basic principles of color theory
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.
adding the three primary colors
Adding the Three Primary Colors

Primary color model for light

rgb red green and blue triplets
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.
rgb triplets examples
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.
a typical colors dialog box
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.
hexadecimal values
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.
hexadecimal values1
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.
using color values1
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
the 16 basic color names
The 16 Basic Color Names

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

partial list of extended color names
Partial List of Extended Color Names

Partial list of extended color names

defining foreground and background colors
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
defining foreground and background colors1
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”>
using the font tag
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
font styles and weights
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
decorative features
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
controlling image alignment
Controlling Image Alignment
  • The syntax for the float style is:

float: position

controlling image alignment1
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
alignment options




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
  • 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
a graphical table
A Graphical Table

This figure shows a graphical table

graphical tables defining a table structure
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.
using the table tr and td tags
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.
the graphical table syntax
The Graphical Table Syntax
  • The general syntax of a graphical table is:



<td> First Cell </td>

<td> Second Cell </td>



<td> Third Cell </td>

<td> Fourth Cell </td>



    • This creates a table with two rows and two columns.
a simple table

two rows

A Simple Table

The layout of a graphical table

two columns

html structure of a table

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.

creating headings with the th tag
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.
adding table headings to the table

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

creating a table caption
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
table captions
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
inserting a table caption

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

modifying the appearance of a table
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.
working with the table border
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.
tables with different borders values
Tables with Different Borders Values

The effect on a table’s border when the border size is varied

adding a 5 pixel border to a table
Adding a 5-Pixel Border to a Table

Only the outside border is affected by the border attribute; the internal gridlines are not affected

table frames and rules
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”
creating frames and rules
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”
sizing a table cell spacing
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.
tables with different cell spacing values
Tables with Different Cell Spacing Values

Different cell spacing values and a table’s appearance

setting the cell spacing to 0 pixels
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.

cell padding
Cell Padding
  • To control the space between the table text and the cell borders, add the cell padding attribute to the table tag.
  • The syntax for this attribute is:

<table cellpadding=“value”> … </table>

    • value is the distance from the table text to the cell border, as measured in pixels
    • the default cell padding value is 1 pixel
  • Cell padding refers to the space within the cells.
tables with different cell padding values
Tables with Different Cell Padding Values

The effect of changing the cell padding value for a table

setting the cell padding to 4 pixels
Setting the Cell Padding to 4 Pixels

A table with an increased amount of cell padding.

By increasing the cell padding, you added needed space to the table.

working with table and cell size
Working with Table and Cell Size
  • The size of a table is determined by the text it contains in its cells.
  • By default, HTML places text on a single line.
  • As you add text in a cell, the width of the column and table expands to the edge of the page.
    • once the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single line
  • You can insert a line break, paragraph or heading tag within a cell.
working with table and cell size1
Working with Table and Cell Size
  • When the browser can no longer increase or decrease the size of the column and table it wraps the text to a second line.
  • As more text is added, the height of the table expands to accommodate the additional text.
  • It is important to manually define the size of the table cells and the table as a whole.
defining the table size
Defining the Table Size
  • The syntax for specifying the table size is: <table width=“size” height=“size”>
    • size is the width and height of the table as measured in pixels or as a percentage of the display area
  • To create a table whose height is equal to the entire height of the display area, enter the attribute height=“100%”.
  • If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used.
  • Remember that some monitors display Web pages at a resolution of 640 by 480 pixels.
setting cell and column sizes
Setting Cell and Column Sizes
  • To set the width of an individual cell, add the width attribute to either the <td> or <th> tags.
  • The syntax is: width=“value”
    • value can be expressed either in pixels or as a percentage of the table width
    • a width value of 30% displays a cell that is 30% of the total width of the table
setting cell and column sizes1
Setting Cell and Column Sizes
  • The height attribute can be used in the <td> or <th> tags to set the height of individual cells.
  • The height attribute is expressed either in pixels or as a percentage of the height of the table.
  • If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text.
spanning rows and columns
Spanning Rows and Columns
  • To merge several cells into one, you need to create a spanning cell.
  • A spanning cell is a cell that occupies more than one row or column in a table.
  • Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag.
  • The syntax for these attributes is: <tdrowspan=“value” colspan=“value”> … </td>
    • value is the number of rows or columns that the cell spans in the table
spanning rows and columns1
Spanning Rows and Columns
  • When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row.
  • When a cell spans several rows, the rows below the spanning cell must also be adjusted.
example of spanning cells

This cell spans two columns and two rows

This cell spans three columns

This cell spans three rows

Example of Spanning Cells
a table structure with a row spanning cell

four table cells in the first row

only three table cells are required for the second and third rows

HTML code

resulting table

A Table Structure with a Row-Spanning Cell
aligning a table and its contents
Aligning a Table and its Contents
  • By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge.
  • You can specify a different horizontal alignment for a <td> or <th> element with:align=“position”
aligning a table on the web page
Aligning a Table on the Web Page
  • To align a table with the surrounding text, use the align attribute as follows: align=“alignment”
    • alignment equals “left”, “right”, or “center”
    • left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side
    • center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it
  • The align attribute is similar to the align attribute used with the <img> tag.
aligning the contents of a table
Aligning the Contents of a Table
  • By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge.
  • By using the align and valign attributes, you can specify the text’s horizontal and vertical placement.
  • To align the text for a single column, you must apply the align attribute to every cell in that column.
setting a background color
Setting a Background Color
  • Table elements support the bgcolor attribute.
  • To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the <table>, <tr>, <td>, or <th> tags as follows:

<table bgcolor=“color”>

<tr bgcolor=“color”>

<td bgcolor=“color”>

<th bgcolor=“color”>

    • color is either a color name or hexadecimal color value
applying a background image to a table row and cell

<tr background=“parch.jpg”>


<table background=“parch.jpg”>

<td background=“parch.jpg”>

Applying a Background Imageto a Table, Row, and Cell
working with column groups
Working with Column Groups
  • Tags allow you to manipulate the features of entire columns and groups of columns.
    • this feature is currently only supported by Internet Explorer 4.0 or above, and not at all by Netscape.
    • this feature shouldn’t be used if your page is to be viewed by multiple browsers and browser versions
  • To define a column, add the following tag to the top of the table structure: <col span=“value”>
    • value is the number of columns in the group
  • The <col> tag supports the align, bgcolor, valign, and width attributes.
the colgroup tag
The <colgroup> Tag
  • Another way of grouping columns is by using the <colgroup> tag.
  • The syntax of the <colgroup> tag is:

<colgroup span=“value”



    • value is the number of columns in the group, and columns are definitions for individual columns within the group (defined using the <col> tag.)
  • In the event of a conflict between the attributes in the <col> and <colgroup> tags, the <col> tag attributes take precedence.
using tables for layout
Using Tables for Layout
  • HTML tables are most often used to define the layout of an entire Web page.
  • If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool.
using tables for layout1
Using Tables for Layout
  • Columnar layout: page content is placed in columns
  • Sectional layout: page is broken into sections, placing each section into its own table
  • Jigsaw table or jigsaw layout: page content is broken into separate pieces to create almost any kind of layout
fixed width and fluid layouts
Fixed-width and Fluid Layouts
  • Fixed-width layout: Web designer defines exact size of every table element in absolute units such as pixels.
    • Gives designer precise control over appearance, but does not take into account the size of the browser window
  • Fluid layout: one or more table elements are sized as a percentage of the page width
    • Page content flows into blank areas as the size of the browser window increases, but sometimes results in long lines of text
creating a newspaper style layout
Creating a Newspaper-Style Layout
  • Create two tables inside another– nested tables.