WEB PAGE PUBLISHING

Document Sample
WEB PAGE PUBLISHING Powered By Docstoc
					                                       WEB PAGE PUBLISHING

                                     Lesson 16—More With Tables


USING A TABLE STRUCTURE FOR PAGE LAYOUT

Tables can also be used (with or without) borders to help you design the layout of your web
pages. Sometimes the formatting of certain blocks of material is made easier if you use a table
(for instance columns of information).

Look at the following portion of your school newspaper, which is divided into two justified
columns and has a title created using a large font. It would be difficult in a HTML Notepad
document to format the newspaper article as shown. However, if you create a table to hold the
two columns, the job will be much easier.

       ------------------------------------------------------------------------------------------------------

                  HOMECOMING TRADITION SURVIVES

Homecoming is a tradition in almost every                    Lord Preston was Wes Ridenour, and first
high school. This year Preston High almost                   runner-up to Lady Preston was Jamie
lost its tradition due to a simple voting issue.             Bishop. Second runner-up to Lord Preston
                                                             was Bobby Riley, and second runner-up to
“We wanted the voting to be as fair as                       Lady Preston was Suzanne Likins.
possible,” said Mrs. Phyllis McMillion, who
along with Mrs. Carolyn Welch has                            The court included freshman, sophomore,
organized homecoming since Preston High                      junior, and senior boys and girls from
began. When their idea of bringing each                      Preston High School. Homecoming turned
class into the theater to vote was approved,                 out to be a success for everyone. Chris
Mrs. McMillion and Mrs. Welch decided to                     Willis and Kendra Durst served as
take on the job once again.                                  announcers.      Mrs. Westbrook, Mrs.
                                                             Schoonover, and the PHS band provided the
Lord and Lady Preston 2000 were Zach                         musical entertainment for homecoming
Zinn and Tara Shipp. First runner-up to                      festivities.

       --------------------------------------------------------------------------------------------------------

Create a document in Notepad called “newspaper.html” and keep the document open on the
screen. Type in the tags to begin your HTML web page. Between the <title> and </title> tags,
put the name “Preston High School Newspaper.” Now type in the closing tags you need for your
page (</body> and </html>. Then read the rest of the directions starting below to complete your
formatting of the newspaper into your HTML document.




Web Page Publishing—Lesson 16                                                                             Page 1
The title of the newspaper article above is in a larger font than the rest of the text. You will need
to use a larger size when you type in the text for this title (like <h1> or <h2>).

Immediately after the beginning body tag, you need to begin your table. Type in the table tag
now as follows with the attributes shown (you learned about these attributes in Lesson 15).

<table border=“0” width=“100%”>

One other attribute we may want to add to our <table> tag is called “cellspacing.” This attribute
provides the amount of space to be left between our table cells (which in this case look like
columns). This space is often called the “gutter.” Add the following attribute (shown in bold) to
your tag.

<table border=“0” width=“100%” cellspacing=“20”>

Now you must define the rows for your table. You are going to have only two rows—one to
show the title of the newspaper article and one to display the columns. Each column of the
newspaper article is considered a “cell” of the row. Therefore, your table will have two rows
with two cells in each row (which means two “td” entries in your HTML document for the row
that holds the columns).

Type in the following tags to define the first row of your table.

<tr>
<td><h1>HOMECOMING TRADITION SURVIVES</h1></td>
</tr>

Save your document now that you have added several tags. Then open your Internet browser
(Internet Explorer or Netscape) and open your “newspaper.html” document. How does the title
of your newspaper article appear on the page? Is it displayed between the margins or only in one
cell (column)? If your tags were entered as shown above, the title will only show in one cell (the
one on the left). Usually a newspaper article title is centered over the columns of the article.
You need to add some attributes to your “table data” (<td>) tag to accomplish this task.
Minimize your browser screen and return to your Notepad document.

You have been taught the “align” attribute in previous lessons. This attribute will allow you to
center your title; however, you need something to cause the title to center over both columns of
the article. Never fear! An attribute exists that will let you do just that. The attribute is called
“colspan” (for “column span”). Add the attributes below (shown in bold) to the “table data” tag
that you added to your document.

<td colspan=“2” align=“center”><h1>HOMECOMING TRADITION SURVIVES</h1></td>

The “colspan” attribute above tells HTML to display the following text over two columns, and
there are only two columns in your article. Therefore, the title will display over both columns
(cells) and not only in one. The “align” attribute tells HTML to center the text over the column


Web Page Publishing—Lesson 16                                                                Page 2
span indicated. Now your title should be centered over both columns of your article (or between
the margins of the web page). Save your document again and then display it in your browser to
make sure the title has changed placement on the page. Minimize your browser and return to
your Notepad document.

After the “closing table row” tag (</tr>) in your document, you need to type in the next “table
row” tag to indicate that you want to add another row. This row will hold your actual newspaper
columns. Then you will type in the first column of information, beginning with a “paragraph”
tag. Type the tags and text as follows.

<tr>
<td><p>Homecoming is a tradition in almost every high school. This year Preston High almost
lost its tradition due to a simple voting issue.
<p>
“We wanted the voting to be as fair as possible,” said Mrs. Phyllis McMillion, who along with
Mrs. Carolyn Welch has organized homecoming since Preston High began. When their idea of
bringing each class into the theater to vote was approved, Mrs. McMillion and Mrs. Welch
decided to take on the job once again.
<p>
Lord and Lady Preston were Zach Zinn and Tara Shipp. First runner-up to Lord Preston was
Wes</td>

In the tags given above, notice that another paragraph tag was added to allow a change in
paragraphs in the first column of text.

Because you want your lines of text in your column to begin at the very top of the “cell,” you
need to use the “vertical alignment” attribute you learned in Lesson 15. The “vertical alignment”
attribute can have values of “top,” “bottom,” or “middle.” You will want to use “top” to assure
that your text begins at the top of the column (cell). Add the attribute shown below in bold to
your “table data” tag for the second row.

<td valign=“top”><p>Homecoming is a tradition in almost every high school. This year

Save your document again to make sure you have your revisions saved. If you look at the
newspaper article example on the first page of this assignment, you may notice something else
about the paragraphs in the text. The paragraphs are all “justified,” which means that each line
in the article begins at the same position on the left and ends at the same position on the right
(just like articles in a real newspaper). The “align” attribute can be added to your paragraph tags
and assigned the “justify” value in order to make your paragraphs look like those shown. Add
the attributes shown below in bold to your tags you added to create the first column of text.

<tr>
<td valign=“top”><p align=“justify”>Homecoming is a tradition in almost every high school.
This year Preston High almost lost its tradition due to a simple voting issue.
<p align=“justify”>



Web Page Publishing—Lesson 16                                                               Page 3
“We wanted the voting to be as fair as possible,” said Mrs. Phyllis McMillion, who along with
Mrs. Carolyn Welch has organized homecoming since Preston High began. When their idea of
bringing each class into the theater to vote was approved, Mrs. McMillion and Mrs. Welch
decided to take on the job once again.
<p align=“justify”>
Lord and Lady Preston were Zach Zinn and Tara Shipp. First runner-up to Lord Preston was
Wes</td>

Now all you need to do is use the same techniques you have just learned to finish the second cell
(column) of your table. Type the tags and attributes shown below to finish it. Remember that all
the tags and text should be above your closing </body> and </html> tags.

<td valign=“top”><p align=“justify”>Ridenour, and first runner-up to Lady Preston was Jamie
Bishop. Second runner-up to Lord Preston was Bobby Riley, and second runner-up to Lady
Preston was Suzanne Likins.
<p align=“justify”>The court included freshman, sophomore, junior, and senior boys and girls
from Preston High School. Homecoming turned out to be a success for everyone. Chris Willis
and Kendra Durst served as announcers. Mrs. Westbrook, Mrs. Schoonover, and the PHS band
provided the musical entertainment for homecoming festivities.</td>
</tr>
</table>

Save your document again and display it in your browser. Do the columns look okay? One
problem you could have is that too much or too little text is typed for the first column. If you
have this problem, you may need to adjust the amount of text in the column—take more from the
second column or add some to the second column. If you have problems with the text in your
columns, check with your instructor for help.

If your web page is displaying correctly, print a copy of the page from your browser and also a
copy of the Notepad document. Staple the printouts together and label them appropriately. Give
them to your instructor for evaluation.

LESSON ASSIGNMENT

On the next page is some text that needs to be typed into a web page (notice that the paragraphs
in this article are not justified). The techniques you learned above for using tables to determine
page layout will help you format the page. Create a Notepad document called “summary.html”
for the web page. The text between your title tags should be “Preston High Handbook
Summary” (without quotation marks). When your web page displays like the example shown,
print a copy of your Notepad document and your web page document. Staple them together,
label them, and give them to your instructor for evaluation.




Web Page Publishing—Lesson 16                                                               Page 4
                              HANDBOOK SUMMARY

Section I: RIGHTS AND                            Section IV: CO-CURRICULAR
RESPONSIBILITIES OF STUDENTS                     ACTIVITIES

Rights and responsibilities go hand in hand.     Regardless of race, color, religion, national
As a student in West Virginia, you have          origin, language, gender, disability, marital
basic rights and responsibilities. As a          status, parenthood, or pregnancy, you have
student, it is your responsibility to obey       the right to participate in extracurricular
rules and regulations and to cooperate with      activities.
school authorities who enforce these rules
and regulations.                                 Section V: PERSONAL APPEARANCE

Section II: A THOROUGH AND                       As a student, you have the right to choose
EFFICIENT EDUCATION                              reasonable styles of dress and hair.

Regardless of race, religion, national origin,   Section VI: PRIVACY
language, gender, disability, marital status,
parenthood, or pregnancy, you have the right     You have certain rights in your school
to an education and the responsibility to        records.
pursue it.
                                                 Section VII: CONTRABAND:
Section III: STUDENT INQUIRY AND                 ALCOHOL, DRUGS, TOBACCO,
EXPRESSION                                       DEADLY WEAPONS

The United States and West Virginia              You may not possess or use alcohol, drugs,
constitutions guarantee certain freedoms and     tobacco, or deadly weapons.
the responsibilities that go with them,
including freedom of religion, speech, the       Note: Complete copies of the Student
press, to assemble peaceably, and to petition    Handbook can be obtained through the West
the government.                                  Virginia Department of Education.




Web Page Publishing—Lesson 16                                                          Page 5

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:9/14/2012
language:English
pages:5