Dr. Chen, Management Information Systems - HTML Chapter 4: Creating Tables in a Web Site Using an...

Dr. Chen, Management Information Systems - HTML

Chapter 4:Creating Tables in a Web Site Using

an External Style Sheet

Jason C. H. Chen, Ph.D.Professor of MIS

School of Business AdministrationGonzaga UniversitySpokane, WA 99258

[email protected]

Dr. Chen, Management Information Systems - HTML2

Chapter Objectives

• Define table elements• Describe the steps used to plan, design, and

code a table• Create a borderless table for a horizontal

menu bar with text links• Create an external style sheet to define styles

across a Web site• Utilize classes to give you more control over

styles• Link an external style sheet to Web pages

where you want its styles applied


Chapter Objectives

• Copy and paste HTML code to a new file• Create a table with borders and insert text• Alter the spacing between and within cells

using the cellspacing and cellpadding attributes

• Utilize inline styles to alter the style of individual elements on a Web page

• Add background color to rows and cells• Insert a caption below a table• Create headings that span rows using the

rowspan and colspan attributes


Three Parts for Chapter 4

• Make sure you follow the two Parts for studying this chapter:

• Part I: study and practice basic tables (not in the text) thoroughly.– Do not skip Parts I and II.

• Part II: study and practice advanced (challenging) examples (not in the text) for creating attractive tables for your HWs, and, ultimately, enhance your Personal Web Page.

• Part III: study and practice text examples then you are ready for working on the HW.


Type the following URLs

Click the following link and get some ideas about what we will learn and achieve in Chapter 4:

http://barney.gonzaga.edu/~chenta/html04/exercise/sabatinas.html


1. select “Slide Show” for this slide2. Click this “Link”3. The result will be displayed on the

browser4. Right click Windows and select

“View Page Source” to show the HTML codes

Use the same way for the rest of examples.








Creating Table in the Web Site

Topics to learn:Table creation with external css:1. heading color <th>2. background-color3. caption (bottom)

Table with 5-px border and header with background color and whit text

cellpadding (5px) and cellspacing (10px) added to enhance style of table

rowspan used twice to span three rows each Caption inserted

beneath table to clarify information

Table with borderless menu


Part I …

• Before you move to the text examples, make sure you study and practice the following examples on creating different (and good) tables.


A text table:• contains only text, evenly

spaced on the Web page in rows and columns

• uses only standard word processing characters

A graphical table:• is displayed using graphical

elements • can include design elements

such as background colors, and colored borders with shading

• allows you to control the size of tables cells, rows, columns and alignment of text within the table

• A table can be displayed on a Web page either in a text or graphical format.

Tables on the World Wide Web


Text and Graphical Tables

Figure Extra 4.1 - A text table.

Figure Extra 4.2 - A graphical table


Considerations for Text and Graphical Tables

• Graphical tables are more flexible and attractive, however there are some situations when a text table is needed

• Working with tags for graphical tables can be complicated and time-consuming– for these reasons, you might want to create two

versions of a Web page: one that uses only text elements, and another that uses graphical elements


1. Text TablesUsing Fixed-Width Fonts

• When you create a text table, the font you use is important

• A text table relies on space and the characters that fill those spaces to create its column boundaries

• Use a fixed-width, or mono-space, font so that the columns align properly

• Fixed-width fonts use the same amount of space for each character


Using Preformatted Text

• The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.– preformatted text is text formatted in ways that HTML would

otherwise not recognize

• The <pre> tag displays text using a fixed-width font• By using the <pre> tag, a text table can be displayed by

all browsers, and the columns will retain their alignment no matter what font the browser is using

• Most of the time, the <table> tag will be used to insert tables into a Web page


Text Table Created with the <pre> Tag

text will appear in the browser as it appears here

The complete preformatted text as it appears in the file.


Text Table as it Appearsin the Browser

table text appears in a fixed width

font

The page as it appears in the browser.


<html> <head><title>Local Woman Wins Marathon</title></head><body><h1 style="text-align: center; font-family: Arial, Helvetica, sans-serif"> Local Woman Wins Marathon </h1>

<p>Park City native, <b>Laura Blake</b>, won the 27<sup>th</sup> Front Range Marathonover an elite field of the best long distance runners in the country. Laura's time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course record set last year by Sarah Rawlings. Kathy Lasker and Lisa Peterson finished second and third, respectively. Laura's victory came on the heels of her performance at the NCAA Track and Field Championships, in which she placed second running for Colorado State.</p><pre>Group Runner Time Origin===== ====== ==== ======Men 1. Peter Teagan 2:12:34 San Antonio, TexasMen 2. Kyle Wills 2:13:05 Billings, MontanaMen 3. Jason Wu 2:14:28 Cutler, Colorado

Women 1. Laura Blake 2:28:21 Park City, ColoradoWomen 2. Kathy Lasker 2:30:11 Chicago, IllinoisWomen 3. Lisa Peterson 2:31:14 Seattle, Washington</pre>

<p>In an exciting race, <b>Peter Teagan</b> of San Antonio, Texas, used a finishing kick to win the men's marathon for the second straight year, in a time of 2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, Montana, finished second, when he could not match Teagan's finishing pace. Jason Wu of Cutler, Colorado, placed third in a very competitive field.</p><p>This year's race through downtown Boulder boasted the largest field in themarathon's history, with over 9500 men and 6700 women competing. Race conditionswere perfect with low humidity and temperatures that never exceeded 85°.</p><title>Local Woman Wins Marathon</title></head><body><h1 style="text-align: center; font-family: Arial, Helvetica, sans-serif"> Local Woman Wins Marathon </h1>

<p>Park City native, <b>Laura Blake</b>, won the 27<sup>th</sup> Front Range Marathonover an elite field of the best long distance runners in the country. Laura's time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course record set last year by Sarah Rawlings. Kathy Lasker and Lisa Peterson finished second and third, respectively. Laura's victory came on the heels of her performance at the NCAA Track and Field Championships, in which she placed second running for Colorado State.</p><pre>Group Runner Time Origin===== ====== ==== ======Men 1. Peter Teagan 2:12:34 San Antonio, TexasMen 2. Kyle Wills 2:13:05 Billings, MontanaMen 3. Jason Wu 2:14:28 Cutler, Colorado

Women 1. Laura Blake 2:28:21 Park City, ColoradoWomen 2. Kathy Lasker 2:30:11 Chicago, IllinoisWomen 3. Lisa Peterson 2:31:14 Seattle, Washington</pre>


<p>In an exciting race, <b>Peter Teagan</b> of San Antonio, Texas, used a finishing kick to win the men's marathon for the second straight year, in a time of 2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, Montana, finished second, when he could not match Teagan's finishing pace. Jason Wu of Cutler, Colorado, placed third in a very competitive field.</p><p>This year's race through downtown Boulder boasted the largest field in themarathon's history, with over 9500 men and 6700 women competing. Race conditionswere perfect with low humidity and temperatures that never exceeded 85°.</p><br/> <br /><i> This document was last updated on:<script type="text/javascript"> document.write(document.lastModified);</script> </i></body> </html>

race1.html (continued)

Required for all HTML assignments


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

• 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


HTML Structure and Syntax ofa Table

first row of three in the

table

beginning of the table structure

end of the table structure

table cells

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.

The general syntax of a graphical table is:

second row of three in the

table

third row of three in the

table


A Simple Table and HTML Structure of a Table:filename:demo_table_1.html

demo_table_1

The layout of a graphical table

two rows

two columnsbeginning of the table structure

first row of two in the table


<table> <tr> </tr> <tr> </tr></table>

Second row of two in the table

http://barney.gonzaga.edu/~chenta/html04/class_demo/demo_table_1.html


A Simple Table and HTML Structure of a Table:filename:demo_table_1.html

demo_table_1The layout of a graphical table

two rows

two columnsbeginning of the table structure

first row of two in the table


table cells

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.

<table> <tr>

</tr> <tr>

</tr></table>

Second row of two in the table

<td>First Cell</td><td>Second Cell</td>

<td>Third Cell</td><td>Fourth Cell</td>



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


• We will start with a simple table …


caption

heading

table data/ description (td)

three rows

Second row of three in the

table

<table>

. . . . . . <tr>

</tr> <tr>

</tr></table>

Third row of three in the table

<td>G#1</td><td>John DOE </td><td>Terry Smith</td><td>Warren King</td>

<td>G#2</td><td>Steve Pullman </td><td>Mary Waterman</td><td>Allison Power</td>

<caption>GROUP MEMBERS</caption> We will insert values in the first row for “heading’ in the next slide



table

<table>

<tr>

</tr> <tr>

</tr></table>




<caption>GROUP MEMBERS</caption>

heading

<tr>

</tr>

“Heading” (First) row of

three in the table

<td>GROUP #</td><td>MEMBER 1</td> <td>MEMBER 2</td> <td>MEMBER 3</td>

<td><b>GROUP # </b></td>Not an efficient wayWhat is the right way?How

right way?



table

<table>

<tr>

</tr> <tr>

</tr></table>




<caption>GROUP MEMBERS</caption>

heading

<tr>

</tr>

“Heading” (First) row of

three in the table

<th>GROUP #</th><th>MEMBER 1</th> <th>MEMBER 2</th> <th>MEMBER 3</th>


<table style="border-color:brown" border="5" cellspacing="0" cellpadding="4"> <caption>GROUP MEMBERS</caption> <tr> <th>GROUP #</th> <th>MEMBER 1</th> <th>MEMBER 2</th> <th>MEMBER 3</th> </tr> <tr> <td>G#1</td> <td>John DOE</td> <td>Terry Smith</td> <td>Warren King</td> </tr> <tr> <td>G#2</td> <td>Steve Pullman</td> <td>Mary Waterman</td> <td>Allison Power</td> </tr></table>

demo_table_1.htmldemo_table_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>A SAMPLE TABLE</title><style type="text/css"></style></head><body>

……</body></html>



• The following good/attractive examples are not available in the text. Make sure you study and

practice thoroughly.


Adding Table Headings to the Table

Text in cells formatted with the <th> tag is bold and centered above each table column

Row of table headings

table headings appear bold

and centered over their columns

race2a.htmlrace2a.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2a.html


Inserting a Table Caption

caption will be centered above the table

caption text

Placing the caption text within a pair of <b> tags causes the caption to display as bold

table caption

- a value of “top” or “center” centers the caption above the table- a value of “bottom” centers the caption below the table- a value of “left” or “right” place the caption above the table to the left or right

race2b.htmlrace2b.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2b.html


Identifying the Table Heading,Body, and Footer

• HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags– <thead> is used for the table heading– <tbody> is used for the table body– <tfoot> is used for the table footer

• These tags do not format the table (and therefore, they are optional), but they do contain collections of rows called row groups


<table> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> <tbody> <tr> <td>Men</td> <td>1. Peter Teagan</td> <td>2:12:34</td> <td>San Antonio, Texas</td> </tr> <tr> <td>Men</td> <td>2. Kyle Wills</td> <td>2:13:05</td> <td>Billings, Montana</td> </tr> <tr> <td>Men</td> <td>3. Jason Wu</td> <td>2:14:28</td> <td>Cutler, Colorado</td> </tr>

<! – continued for Women Row --><tr> <td>Women</td> <td>1. Laura Blake</td> <td>2:28:21</td> <td>Park City, Colorado</td> </tr> <tr> <td>Women</td> <td>2. Kathy Lasker</td> <td>2:30:11</td> <td>Chicago, Illinois</td> </tr> <tr> <td>Women</td> <td>3. Lisa Peterson</td> <td>2:31:14</td> <td>Seattle, Washington</td> </tr> </tbody></table>

table caption

race2b.htmlrace2b.html

How many rows are needed in this table?

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2b.html


Modifying the Appearance of a Table

• You can modify the appearance of a table by adding:– gridlines– borders– background color

• 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 pixel

• By default, browsers display tables without table borders


Appearance of a Table

1. Border

2. Cellspacing: amount of the space inserted between table cells

3. Cellpadding: amount of the space between the table text and the cell boarders


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

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

<table style="border-color: brown" border="5" > <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> <tr> …

race2c.htmlrace2c.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2c.html


Sizing a Table Cell 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

Different cell spacing values and a table’s appearance


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.

race2d.htmlrace2d.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2d.html



Compare with Two Tables

Setting the cellspacing to 0 reduces the width of the borders between individual table cells.

This will not remove the border between the cells.

Only set <table style=“…” border="5“> No cellspacing is set.

race2c.htmlrace2c.html

race2d.htmlrace2d.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2c.html




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

The effect of changing the cell padding value for a table


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.

table style= "bordercolor: brown" border="5" cellspacing="0“ cellpadding="4" width="70%“> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead>

race2e.htmlrace2e.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2e.html


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

• 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


Setting the Width of theTable to 70% of the page width

table style= "bordercolor: brown" border="5" cellspacing="0“ cellpadding="4" width="70%“> <caption style="font-weight: bold">Race Results</caption> <thead> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead>

race2e.htmlrace2e.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2e.html


Part IICreate Attractive Tables

• Next, we will learn how to create more “advanced” and “attractive” tables for your Personal Web Page and your career in the future.


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: <td rowspan=“value” colspan=“value”> … </td>– value is the number of rows or columns that the cell spans in

the table


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

• It is a very interesting and powerful way to create your tables.

• It will be included in the quiz and next Exam.


Example of Spanning Cells

This cell spans two

columns and two rows

This cell spans three columns

This cell spans three

rows

Let’s study several simple examples then come back to work on this one.


A Table Structure with a Row-Spanning Cell

HTML code

resulting table

four table cells in the first row

only three table cells are required

for the second and third rows

(How many rows in the table?)

<table> <tr> </tr> <tr> </tr> <tr> </tr></table>

<td rowspan=”3”>1: This cell spans three rows</td><td>2</td><td>3</td><td>4</td>

<td>5</td><td>6</td><td>7</td>

<td>8</td><td>9</td><td>10</td>


Adding Spanning Cells to a Table

spanning cells

<table><caption style="font-weight: bold">Race Results</caption> <tr> <th colspan="2">Runner</th> <th>Time</th> <th>Origin</th> </tr> <tr> <td rowspan="3">Men</td> <td>1. Peter Teagan</td> <td> … </td> <td> …</td> </tr> <tr> <td>2. Kyle Wills</td> <td> … </td> <td> … </td> </tr> <tr> <td>3. Jason Wu</td> <td> … </td> <td> … </td> </tr> <tr> <td rowspan="3">Women</td> <td> 1. Laura Blake</td> <td>…</td><td> …</td> </tr> <tr> <td>2. Kathy Lasker</td> <td> … </td> <td> … </td> </tr> <tr> <td>3. Lisa Peterson</td> <td> … </td> <td> … </td> </tr></table>

How many rows in the table?

(with rowspan rows (i.e., 1), they have FOUR table cells, i.e., <td>…</td> blocks)(not the rowspan rows (i.e., 2 and 3), they have THREE table cells.

See details on the next slide.

colspan


Adding Spanning Cells to a Table

this cell spans two columns

these cells span three

rows

spanning cells

race2f.htmlrace2f.html

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2f.html


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

• 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 style=“border-color:color; background-color=color”>

<tr bgcolor=“color”><td bgcolor=“color”><th bgcolor=“color”>– color is either a color name or hexadecimal color

value


Results of a Table with a Colored Background

<table style= "border-color: brown; background-color: white" border="5" cellspacing="0" cellpadding="4" width="70%"> <caption style="font-weight: bold">Race Results</caption> <thead> <tr bgcolor=“yellow"> <th colspan="2">Runner</th> <th>Time</th> <th>Origin</th> </tr> </thead> <tbody style="font-size: 80%"> <tr> <td rowspan="3" valign="top" bgcolor=“lightblue">Men</td> <td>1. Peter Teagan</td> <td align="right">2:12:34</td> <td>San Antonio, Texas</td> </tr> <tr> <td>2. Kyle Wills</td> <td align="right">2:13:05</td> <td>Billings, Montana</td> </tr> <tr> <td>3. Jason Wu</td> <td align="right">2:14:28</td> <td>Cutler, Colorado</td> </tr> <tr> <td rowspan="3" valign="top" bgcolor=“lightgreen">Women</td> <td>1. Laura Blake</td> <td align="right">2:28:21</td> <td>Park City, Colorado</td> </tr> … </tbody></table>

Table border’s unshaded edge

race2g.htmlrace2g.html

Anything new (added) in this table?

http://barney.gonzaga.edu/~chenta/html04/class_demo/race2g.html



After you study and practice the above examples on creating tables, you now return to the text examples - Sabatina’s Pizza Web Site Project (p.158)

Then you should be ready for working your next HTML hw.

Read HTML#4 assignment for both exercise and HW.

We now move to Part III:Examples in the HTML text


Create tables for Sabatina’s Pizza project

• We will study how to create two tables in Chapter 4:– sabatinas (the driver)– pizza– salads

• You need to figure out how to create the last table to complete the project:– appetizers


html01[folder for HTML#1]

H: [root directory] |

public_htm [web folder] |


index.htmlmyself.pptmyresume.doc

images[images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif

myhungerfight.html images [images folder]

hungerfightlogo.jpg

For your personal Web Page

images [folder]

hw(new folder)

For html04

sabatinaslogo.jpg

images [folder]

mask.jpg

exercise(new folder)

sabatinas.htmlappetizers.htmlpizza.htmlsalads.htmlstyles1.css

…

voyttkovich_antiquities .htmlvoyt_antiquities_pricing.html

Fig. 1-a: The following is the Directory Structure for HTML#4 Assignments


“sabatinas” Home Page (driver)

We will start with the followings (company logo and menu bar):

menu bar of links to four Web pages including current page (bold, italic) will appear on the all pages in Web site.

It is actually a “table”


<div style="text-align: center"><img src="images/sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /> </div>

First, to include “company logo “

<table class="menu"> <tr> <td class="menuwordselect"><a href="sabatinas.html">Home</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="appetizers.html">Appetizers</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="salads.html">Salads</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="pizza.html">Pizza</a></td> </tr></table>

It is actually a “table” with one row and seven columns

“class” are defined in the css file (next slide) HTML, p.176


body {font-family: Arial, Verdana, Garamond; font-size: 12 pt}p {margin-left: 50pt;

margin-right: 50pt}a {text-decoration: none; color: black}table {width: 65%; margin-left:auto; margin-right:auto}

.menu {text-align: center; width: 60%}

.menuword {width: 23%}

.menuwordselect {width: 23%; font-weight:bolder; font-style: italic}

.menupipe {width: 1%}border-color {color: brown}th {color: white; background-color: red}caption {caption-side: bottom; font-style: italic}

A style sheet used for menu bar (styles1.css); HTML, p.178, 181

<table class="menu"> <tr> <td class="menuwordselect"><a href="sabatinas.html">Home</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="appetizers.html">Appetizers</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="salads.html">Salads</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="pizza.html">Pizza</a></td> </tr> </table>

It displays the “selected” menu with “bold” and “italic”


Creating an External Style Sheet

• If necessary, click the Notepad++ button on the taskbar to display sabatinas.html. Click File on the menu bar and then click New

• Enter the CSS code, as shown in Table 4–7, using the TAB key to align text, as shown

• With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles1.css in the File name text box. If necessary, navigate to the H:/html04/exercise/ folder. Click the Save button in the Save As dialog box to save the file as styles1.css

• Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box to print a hard copy of the style sheet



body {font-family: Arial, Verdana, Garamond;font-size: 12 pt}

p {margin-left: 50pt;margin-right: 50pt}

a {text-decoration: none;color: black}

table {width: 65%;margin-left:auto; margin-right:auto}

.menu {text-align: center;width: 60%}

.menuword {width: 23%}

.menuwordselect {width: 23%; font-weight: bolder; font-style: italic}

.menupipe {width: 1%} th {color: white;

background-color: red}caption {caption-side: bottom;

font-style: italic}

External style sheet: styles1.css

See details on Table A-2; APP9,10


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sabatina's Pizza Home</title><link rel="stylesheet" type="text/css" href="styles1.css" /></head><body><div style="text-align: center"><img src="images/sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /></div><table class="menu"><tr> <td class="menuwordselect"><a href="sabatinas.html">Home</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="appetizers.html">Appetizers</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="salads.html">Salads</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="pizza.html">Pizza</a></td></tr></table>

A complete sabatinas.html file (Part 1 of 2)

add a “link” to an external css file

“rel” indicates the relationship going from the current page to the target (see APP 6)

What happens if you do not include <link> tag (no css link)?sabatinas_no_link.htmlsabatinas_no_link.html

sabatinas.html (w/link)sabatinas.html

http://barney.gonzaga.edu/~chenta/html04/exercise/sabatinas_no_link.html




<p>Sabatina's Pizza recently opened in the Highlands. It has already become a popular place for family and friends to meet and have a great meal. Sabatina's offers many kinds of pizza, both thin and thick crust. They also have delicious appetizers and salads. There is ample seating on the inside of the restaurant and more seating on our lovely shaded patio outside. We have carry-out orders and also make deliveries.</p>

<p>Please look through our Web site to learn more about our menu. Want to place a carry-out order? Call us at (999) 555-SABAS or e-mail us at <a href="mailto:[email protected]"><span style="text-decoration: underline">[email protected]</span></a>.</p>

<br/>This document was last updated on:<script type="text/javascript">document.write(document.lastModified);</script></body></html>

A complete sabatinas.html file (Part 2 of 2)


Next … we will learn how to create “pizza” page

We will start with creating the “pizza” table


spanning cells

Create “pizza” table (how many rows and columns?)

four columns

six rows

<table border="5" cellpadding="5" cellspacing="10“><tr> <th rowspan="3">Thin Crust <br />Pizza </th> <td style="font-weight: bold">Cheese</td> <td>Medium - $7.95</td> <td>Large - $9.95</td></tr><tr> <td style="font-weight: bold">Sausage</td> <td>Medium - $8.95</td> <td>Large - $10.95</td></tr><tr> <td style="font-weight: bold">Veggie</td> <td>Medium - $8.95</td> <td>Large - $10.95</td></tr>

<tr> <th rowspan="3">Thick Crust <br />Pizza</th> <td style="font-weight: bold">Cheese</td> <td>Medium - $9.95</td> <td>Large - $11.95</td></tr> <tr> <td style="font-weight: bold">Sausage</td> <td>Medium - $10.95</td> <td>Large - $12.95</td></tr><tr> <td style="font-weight: bold">Veggie</td> <td>Medium - $10.95</td> <td>Large - $12.95</td></tr></table>


Next, we will include the menu log and caption in the “pizza” page

<table class="menu"> <tr> <td class=" menuword "><a href="sabatinas.html">Home</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="appetizers.html">Appetizers</a></td> <td class="menupipe">|</td> <td class="menuword"><a href="salads.html">Salads</a></td> <td class="menupipe">|</td> <td class=" menuwordselect"><a href="pizza.html">Pizza</a></td> </tr></table> It is about the same as we created

for“sabatinas” page except the menuewordselect is “Pizza” page


Finally, we will display the “caption” at the bottom of “pizza” page

“Caption” is displayed at the bottom of the page with “italic” font. How?

<table border="5" cellpadding="5" cellspacing="10“><caption>Additional ingredients include mushrooms, olives, pepperoni - $2.00 per item</caption>

Add <caption> tag below <table> tag and it will be handled automatically by the css file.caption {caption-side: bottom; font-style: italic} is defined in the css file.

Q: Why (and How) these two cells are with “RED”

A: It is defined in the css file:th {color: white; background-color: red}


A complete pizza.html file (Part 1 of 3)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sabatina's ~ Pizza</title><link rel="stylesheet" type="text/css" href="styles1.css" /></head><body><div style="text-align: center"><img src="images/sabatinaslogo.jpg" width="735" height="195" alt="Sabatina's logo" /></div><table class="menu"><tr>

<td class="menuword"><a href="sabatinas.html">Home</a></td><td class="menupipe">|</td><td class="menuword"><a href="appetizers.html">Appetizers</a></td><td class="menupipe">|</td><td class="menuword"><a href="salads.html">Salads</a></td><td class="menupipe">|</td><td class="menuwordselect"><a href="pizza.html">Pizza</a></td>

</tr> </table>

It is about the same as we created for“sabatinas page except the menuewordselect is “Pizza” page


A complete pizza.html file (Part 2 of 3)

<table border="5" cellpadding="5" cellspacing="10"><caption>Additional ingredients include mushrooms, olives, pepperoni - $2.00 per item</caption><tr>

<th rowspan="3">Thin Crust<br />Pizza </th><td style="font-weight: bold">Cheese</td><td>Medium - $7.95</td><td>Large - $9.95</td>

</tr><tr>

<td style="font-weight: bold">Sausage</td><td>Medium - $8.95</td><td>Large - $10.95</td>

</tr><tr>

<td style="font-weight: bold">Veggie</td><td>Medium - $8.95</td><td>Large - $10.95</td>

</tr>


A complete pizza.html file (Part 3 of 3)

<tr><th rowspan="3">Thick Crust<br />Pizza</th><td style="font-weight: bold">Cheese</td><td>Medium - $9.95</td><td>Large - $11.95</td>

</tr><tr>

<td style="font-weight: bold">Sausage</td><td>Medium - $10.95</td><td>Large - $12.95</td>

</tr><tr>

<td style="font-weight: bold">Veggie</td><td>Medium - $10.95</td><td>Large - $12.95</td>

</tr></table><br/>This document was last updated on:<script type="text/javascript">document.write(document.lastModified);</script> </body> </html>


We will create the (third) “salads” page

The top “menu logo” is the same as previous two pages, we will study how to create the table for “salads” page. Easy now. Right?


Plan: 1) How many rows and 2) how many columns in this table?

five rows

three columns

<table><tr> <th>Item</th> <th>Medium</th> <th>Large</th></tr><tr> <td>Caesar</td> <td>$4.95</td> <td>$8.95</td></tr><tr> <td>Mediterranean</td> <td>$4.95</td> <td>$6.95</td></tr>

<tr> <td>Greek</td> <td>$4.95</td> <td>$8.95</td></tr><tr> <td>Japanese</td> <td>$4.95</td> <td>$7.95</td></tr></table>


A complete salads.html file (Part 1 of 2)Company Logo and Menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sabatina's ~ Salads</title><link rel="stylesheet" type="text/css" href="styles1.css" /></head><body><div style="text-align: center"><img src="images/sabatinaslogo.jpg" width="735" height="195" alt="Sabatina's logo" /></div><table class="menu"><tr>

<td class="menuword"><a href="sabatinas.html">Home</a></td><td class="menupipe">|</td><td class="menuword"><a href="appetizers.html">Appetizers</a></td><td class="menupipe">|</td><td class="menuwordselect"><a href="salads.html">Salads</a></td><td class="menupipe">|</td><td class="menuword"><a href="pizza.html">Pizza</a></td>

</tr> </table> <br />

It is about the same as we created for“sabatinas page except the menuewordselect is “Salads” page


<table border="5" cellpadding="5" cellspacing="10"><tr> <th>Item</th> <th>Medium</th> <th>Large</th></tr><tr> <td>Caesar</td> <td>$4.95</td> <td>$8.95</td></tr><tr> <td>Mediterranean</td> <td>$4.95</td> <td>$6.95</td></tr> <tr> <td>Greek</td> <td>$4.95</td> <td>$8.95</td></tr><tr> <td>Japanese</td> <td>$4.95</td> <td>$7.95</td></tr> </table>


A complete salads.html file (Part 2 of 2)Table

1. add two properties: “cellpadding” and “cellspacing”

2. color is displayed with “red” as it is defined in the css file:th {color: white; background-color: red}


Finally, create “appetizers” table

Hint: it is about the same as “salads” table.A template of “appetizers.html” can be downloaded from the Bb. You then add additional HTML codes (as described in

salads.html).

Your Turn …


Starting Notepad++

• Click the Start button on the Windows taskbar to display the Start menu

• Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list

• Click Notepad++ in the All Programs list• Click Notepad++ in the list to display the Notepad++

window• If the Notepad++ window is not maximized, click the

Maximize button on the Notepad++ title bar to maximize it• Click View on the menu bar• If the Word wrap command does not have a check mark

next to it, click Word wrap


Viewing a Web Page

sabatinas.htmlsabatinas.html

Sabatinas_no_link.htmlSabatinas_no_link.html


http://barney.gonzaga.edu/~chenta/html04/exercise/sabatinas_no_link.html


Validating a Web Page

• Open Firefox and navigate to the Web site validator.w3.org

• Click the Validate by File Upload tab• Click the Browse button• Locate the sabatinas.html file on your storage

device and click the file name• Click the Open button in the Choose File to

Upload dialog box and the file name will be inserted into the File box

• Click the Check button


Saving, Validating, and Printing the HTML File

• If necessary, activate the Notepad++ window• Click File on the menu bar, and then Save on the File menu to

save the HTML file as greenhome.html• Open a new browser window and go to validator.w3.org• Click the Validate by File Upload tab, browse to the

gettinggreener.html or greenhome.html Web page, and then click Open

• See p. 73-77 for more details.• Click the Check button to determine if the Web page is valid.

If the file is not valid, make corrections, re-save, and revalidate• Click the Notepad++ button on the taskbar to display the

sabatinas.html code. Click File on the menu bar, click Print on the File menu, and then click the Print button in the Print dialog box to print the HTML code


Exercise and HW

• By now, you should complete all examples (both text and additional ones in this pptx (if not, you should go back to study them again), you are ready to do exercise and HTML#4 hw.– Read html04 assignment– Exercise for (sabatinas.html) and Homework html04

(voytkovich_antiquities.html)


HW – Exercise for (sabatinas.html) and Homework HTML#4 (voytkovich_antiquities.html)

Please note that you need to not only read the chapter 4 thoroughly but also understand (many additional) examples of tables creations (what and how) described in the poowerpoint file.

Part I. Chapter exercise (Complete this exercise first) Follow the instructions:1. Read and complete the chapter exercise – Sabatina’s Pizza Web Site Project (pp.158-206)2. Create the following two new folders:a. a folder of html04 under public_html directoryb. a folder of images under html04 folder (i.e., under publich_html/html04/) your directory structure should be like those in Figure 1-a and the complete HTML HWs directory structure is shown in Figure 1-b. 3. Copy (download) the following four html files: sabatinas.html, appetizers.html, pizza.html and salads.html) and an external css file of styles1.css (see Figure 3-e) from the Blackboard (html04/exercise) and save them under appropriate folder (i.e., /html04/exercise).


3. (cont.) Please note that sabatinas.html and appetizers.html only contain the basic structure and you need to complete the rest of html codes based on the chapter (read HTML pp.171-178 for sabatinas.html and see Figure 3-a). The details for creating appetizers.html can be found on HTML pp.189-196 (also see Figure 3-b for partial code). The rest of two html files (pizza.html and salads.html) are almost complete for you to use. You need to add “link” statement, caption and rowspan heading. See the codes in Figure 3-c and 3-d.4. Next, copy (download) the sabatinaslogo.jpg file from the Blackboard (html04/exercise) and save them under appropriate folder (i.e., /html04/exercise/images/ folder) 5. Test the Sabatina’s Pizza web page by entering your URL (http://barney.gonzaga.edu/~your_userID/html04/exercise/sabatinas.html) on the Web Browser 6. Sample Web Pages can be found in the HTML text (Fig. 4-1; p.159 and Figure 2 on the handout)7. It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML p.73-77 for details)








book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif

myhungerfight.html images [images folder]

hungerfightlogo.jpg

For your personal Web Page

images [folder]

hw(new folder)

For html04

sabatinaslogo.jpg

images [folder]

mask.jpg

exercise(new folder)

sabatinas.htmlappetizers.htmlpizza.htmlsalads.htmlstyles1.css

…

voyttkovich_antiquities .htmlvoyt_antiquities_pricing.html

Fig. 1-a: The following is the Directory Structure for HTML#4 Assignments


images [images folder]

All other *.jpg image files

All other *txt.htm files






book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif images

[images folder]

All other *.jpg image files

All other *.html files



images [images folder]

hungerfightlogo.jpg

myhungerfight.html

Fig. 1-b: The following is the Directory Structure for All HTML Assignments


Figure 3-a: sabatinas.html (HTML pp.171-178) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sabatina's Pizza Home</title><!—you need to include the link to an external CSS (HTML, pp.186-187) --> </head><body> <div style="text-align: center">

<img src="images/sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /></div>


<table class="menu"><tr>

… …

…

</tr></table> <p>Sabatina's Pizza recently opened in the Highlands. It has already become a popular place for family and friends to meet and have a great meal. Sabatina's offers many kinds of pizza, both thin and thick crust. They also have delicious appetizers and salads. There is ample seating on the inside of the restaurant and more seating on our lovely shaded patio outside. We have carry-out orders and also make deliveries.</p> <p>Please look through our Web site to learn more about our menu. Want to place a carry-out order? Call us at (999) 555-SABAS or e-mail us at <a href="mailto:[email protected]"><span style="text-decoration: underline">[email protected]</span></a>.</p>




HTML#4 HW

• The next slide illustrates the web pages you should complete for your HW assignment (see also HTML 215)


Part II. HW: HMTL#4; Lab Problem 1 (Lab#2, pp.214-215)

• Do NOT work on the assignment until you complete html04 exercise stated above.

• Changes should be made for HTML#4:– change lab4-2asolution.html into voytkovick_antiquitiquities.html– change lab4-2bsolution.html into voyt_antiquitiquities_pricing.html– change lab4-2styles.css into styles2.css

1. Download the mask.jpg file: from the Blackboard (under the folder of html04/hw) or simply follow step 3 (c) stated above.

2. Follow the instructions listed on Lab Problem 2 (Lab#2, pp.152-153)

3. Two important tasks you need to accomplish in this assignment are:• a) create a new styles sheet (i.e., styles2.css not styles2.css.css) using

Notepad or Notepad++ (step 4 in the HTML text). Make sure you need to rename it to styles2.css (not lab4-2styles.css).

• b) Create two tables as described in Steps 2 (a one-row, two-column borderless table) and 5 (five-row, two column table). They are shown in Figure 4-47 (HTML, p. 214-215, or Figure 4-a, b in this handout).


Part II. HW: HMTL#4 (cont.)

4. A sample web page is shown in HTML text, Figure 3-53; p.152 and Figure 4-a, b in this handout.

5. It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML p.73-77 for details)

6. What/How you should turn in: email me with the following information (Fail to provide me with ALL information, you will lose major points)

Submit the HTML#4 via Blackboard (not via email):

Message :

Dr. Chen,

Here is my HTML#4 (chapter 4) assignment.

http://barney.gonzaga.edu/~your_userID/html04/hw/voytkovick_antiquitiquities.html

<Your Full Name> bmis235-03 (or bmis235-04 or bmis235-05)

so that I can record/grade your homework directly on the Bb

Make the URL linkable


Figure 4-a: voytkovick_antiquitiquities.html

Figure 4-b: voyt_antiquitiquities_pricing.html

one-row, two-column borderless table

five-row, two-column table with a five-pixel border, cellpadding of 15 and cellspacing of 5


MORE EXERCISES …

Wait until finishing the html_04


Create a Table (a challenging one)

This cell spans two

columns


rows

How many rows in the table?Answer: _______4


Write a HTML to produce the following table: HTML_poll_1.html (poll_1)

<table style=border-color:"brown“ border="5" " cellspacing="0“ cellpadding="4"> <caption style="font-weight: bold">Poll Results </caption>

<tr> <td colspan="2“ >Poll on Wage Increase</td> <td>Democrat</td> <td>Republican</td> <td>Independent</td> </tr><tr> <td rowspan="3">Your choice</td> <td>Favor</td> <td>70%</td> <td>35%</td> <td>55%</td></tr>

<tr> <td>Oppose</td> <td>25%</td> <td>60%</td> <td>30%</td> </tr><tr> <td>Unsure</td> <td>5%</td> <td>5%</td> <td>15%</td> </tr></table>

This cell spans two columns

This cell spans three rows

http://barney.gonzaga.edu/~chenta/html04/class_demo/HTML_poll_1.html


Create a Table (even more challenging!)

This cell spans two

columns and two rows

This cell spans three columns


rows

How many rows in the table?Answer: _______5


Chapter Summary

• Define table elements• Describe the steps used to plan, design, and

code a table• Create a borderless table for a horizontal

menu bar with text links• Create an external style sheet to define

styles across a Web site• Utilize classes to give you more control

over styles


Chapter Summary

• Link an external style sheet to Web pages where you want its styles applied

• Copy and paste HTML code to a new file• Create a table with borders and insert text• Alter the spacing between and within cells

using the cellspacing and cellpadding attributes


Chapter Summary

• Utilize inline styles to alter the style of individual elements on a Web page

• Add background color to rows and cells• Insert a caption below a table• Create headings that span rows using the

rowspan attribute


Chapter 4 Complete

Creating Tables in a Web Site Using an External Style Sheet

Date post:	25-Dec-2015
Category:	Documents
Upload:	rosaline-skinner
View:	215 times
Download:	1 times

Dr. Chen, Management Information Systems - HTML Chapter 4: Creating Tables in a Web Site Using an...

Documents