HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11

HTML Tags and Their FunctionsIntroduced In Chapters 1-3

* R E V I E W *

Extra Credit Points For Participation

Review 1/11


The Main HTML Tags[The tags that are necessary for every HTML web page to contain.]

…know these well enough to recite them in your sleep…

* R E V I E W *

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>


Review 2/11


The Name Comment[The first tag that you must type on every page of HTML code you create.]

* R E V I E W *

<!- - Your First & Last Name - ->


Review 3/11


The Normal Text Formatting Tags[NOTE: Although it was not covered in the steps, it is noted in the chapter that text (a.k.a. Normal Text) can be formatted a variety of ways. The following formatting tags were pointed out (additional formatting tags are available).]

* R E V I E W *

heading tag

<strong> or <B>bold tag

<em> or <I>italic tag

<u>underline tag

font size tag <FONT SIZE=”?”> text </FONT>font style tag <FONT FACE=”Arial, Comic”>text

</FONT>font color tag<FONT COLOR=”?”>text</FONT>

<h1>text</h1> *1 through 6


Review 4/11


The Normal Text Formatting Tags CONT.

* R E V I E W *

paragraph tag<p>

paragraph alignment

tag

<h1 align=”center/left/right”>text</h1>

<p align=”center/left/right”>text</p>


Review 5/11


FORMATTING FONTS

* R E V I E W *

Increase Font Size in comparison to surrounding text

Decreases Font Size in comparison to surrounding

text<small> </small>

Designate a Long Quotation indents margins on section

of text<blockquote> </blockquote>

Sets Enclosed Text as Preformatted Material

<pre> </pre>

<big> </big>


Review 6/11


FORMATTING FONTS

* R E V I E W *

Subscript

Superscript

<sup></sup>

Teletype or Monospace Text

<tt> </tt>

<sub></sub>


Review 7/11

Additional Formatting Tags


<ol><li>text</li></ol>

* R E V I E W *

unordered list

tags

ordered list tags

without attributes with attributes<ul type=”figure2-

11”><li>text</li></ul>


<ul><li>text</li></ul>

<ol type=”figure2-

12”><li>text</li></ol>

Review 8/11

HTML Tags and Their FunctionsIntroduced In Chapters 1-3* R E V I E W

*Additional Formatting Tags

definition list

tags

<dl><dt>term</dt><dd>definition</dd></dl>

background color

tag<body bgcolor=”#6 digit no. code”>

horizontal rule tag <hr />


Review 9/11


*LINKS

Color Change <body link=“color” vlink=“color” alink=“color”>

<a href=“URL”>link text</a>

Adding an E-Mail

Link <a href=“mailto:[email protected]”>link text</a>


Adding a Text Link…

to Another Web Page within the Same Web

Site

Review 10/11


*IMAGE TAGS

<img src=“image.jpg” width=“308” height=“205” alt=“text” >


Adding an Image including width, height, &

alternative text

<img src=“image.jpg” width=“308” height=“205” alt=“text” align=“left/right/center>

Adding an Image with Wrapped Text

Review 11/11

HTMLConcepts and Techniques

Fifth Edition

CHAPTER 4:

Creating Tables in a Web Site

Chapter 4, 12/26

http://www.scseries.com/

Creating Web Pages with Tables

• Tables allow the developer to organize information on a Web page using HTML tags.

• Tables are useful for a variety of reasons:• to store information in a tabular form,

and• to create a layout on a Web page.*

*Layouts created with tables give the Web developer more flexibility and control over the placement of information and images. Many popular Web sites use tables today.

• Tables can be either complex [using attributes to span rows and columns with background colors in cells and

borders to provide formatting] or simple [with a basic grid format and no color]

Chapter 4, 13/26

Tables CONT.

• Tables consist of rows, columns, and cells (similar to an Excel Spreadsheet).

COLUMN

ROW

CELL

Chapter 4, 14/26

Tables include features such as:

• Table Border: the line that encloses the perimeter of the table

• Table Header: (the same as a heading cell) any cell with bold text that indicates the purpose of the row or column

• Table Caption: descriptive text located above or below the table that further describes the purpose of the table

• Rules Attribute: allows a Web developer to select which internal borders to show in a table

Tables CONT.

Chapter 4, 15/26

Planning tables for a Web page is a three-step process:

1)determining if a table is needed

2)planning the table

3)coding the table

Planning, Designing, and Coding a Table

Chapter 4, 16/26

As the eSurance commercial says…

Lets Code It and Load It!

http://images.google.com/imgres?imgurl=http://www.acecatfurniture.com/images/4step-mini-SkyHigh-blue_photo.jpg&imgrefurl=http://www.acecatfurniture.com/ps1.html&usg=__0sksSs24FY1YKRqB2luG3dAP5WA=&h=2029&w=1494&sz=272&hl=en&start=8&tbnid=AtkRK7_hkMo92M:&tbnh=150&tbnw=110&prev=/images?q=steps&gbv=2&hl=en&safe=active

HTML Tags and Their FunctionsIntroduced In This ChapterTABLES

Opening & Closing Tags all other tags are inserted within

<table> </table>

Row Tags consists of heading or data cells

<tr> </tr>

Column/Heading Tags defaults bold text & align center

<th> </th>

Cell Tags defaults normal text & align left

<td> </td>

Chapter 4, 17/26

HTML Tags and Their FunctionsIntroduced In This ChapterFORMATTING TABLES

Table Alignment within the main table tags

<table align=“left/right/center”> </table>

Cell Spacing the amount of space between the cells

Cell Padding the amount of space between content & borders

<table cellspacing=“#” cellpadding=“#”> </table>

Column Span the cells in a column merged together

<th colspan=“#”> </th>

Row Span the cells in a row merged together

<th rowspan=“#”> </th>

Chapter 4, 18/26

Identify How to Format Various Table Elements

Before inserting tables or graphical elements on a Web page, plan how to format them.

Consider the following formatting suggestions:

• Format tables to organize Web page content.[Sometimes it is better to have no border around the table, while other times borders enhance the look of the table, depending on the content and purpose of the table.]

• Effectively utilize graphics.[An important part of Web development is the use of graphics to call attention to a Web page.]

*PLAN AHEAD*

Chapter 4, 19/26

Navigational Table

• Determine what table formatting to use.[When using a table to organize text links, it is important to first decide how to format the table. Creating a borderless table with separators between the text links helps organize but not distract from the links.]

• Identify what links are needed. [Each Web page should have a link back to the home page of the Web site. There also should be links to the other pages in the Web site from each Web page. Placing these links in a table at the top of each page helps visitors navigate easily. If an individual Web page is very long, it is also a good idea to place the same table at the bottom of the page.]

*PLAN AHEAD*

Chapter 4, 20/26

Page Layout Table

• Determine what table formatting to use.[Borderless tables often are appropriate when the tables are used to position text and image elements. In other instances, such as when a table is used to structure columns and rows of information, borders are appropriate.]

• Identify what color schemes work and do not distract from the purpose. [It is important to add an element of color to the pages in order to make the appearance attractive. However, the developer must make sure that the color does not distract from the message of the content.]

*PLAN AHEAD*

Chapter 4, 21/26

Web Development Life Cycle* R E V I E W

*Planni

ng

Analysis

Design and Developme

nt

Testing

Implementation and

Maintenance

start

end

NOTE On Data Files & Saving While Completing The Steps

NOTE: We will not be using a USB/Flash/Thumb/Memory Stick to

save the steps. Instead save your work inside the HTML

Folder located in our class folder within your student folder on

the student server drive.

Data File

located

here!

Chapter 4, 23/26

Save yo

ur

work h

ere!

When chapter requests you to use a file, cut&paste it out of the chapter

folder into the HTML Data Files

NOTE On Viewing a Web Page in a Browser

NOTE: We will not be following the steps in the book

to view our code in browser view. Instead do the

following: • minimize Notepad

• double click the “My Computer” Icon on your

desktop

• navigate to the HTML folder where you saved your

work

• make sure it is saved with the .html extension

• double click on the icon to view it in browser view

* R E V I E W *

Chapter 4, 24/26

Validating HTML Code validator.w3.org

To use the Validating Website, follow the below steps:

• Go To validator.w3.org• Click the Validate by File

Upload tab• Click the Browse button• Navigate to the Web Page

Location• Double Click the Page• Click the Check button.

[The resulting validation should be displayed.]

* R E V I E W *

Chapter 4, 25/26

Don’t Ask For Help Until You Have

Less Than 10 Errors!

HTMLConcepts and Techniques

Fifth Edition

CHAPTER 4:

Creating Tables in a Web SiteEnd o

f

Follow Up Assignment:Complete one(1) of the “Learn It Online” activities found at the end of the Chapter. Print any summary/completion screens provided, verify your name is on the print outs, and submit for completion points.

Choose One(1) Of The Following:

-Flashcards [set to 15]

-Who Wants to Be a Computer Genius2?

-Wheel of Terms

-Crossword Puzzle ChallengeChapter 4, 26

/26

http://www.scseries.com/

Documents

HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11