The Internet, World Wide Web and

HyperText Markup Language

(HTML)

Prof. Sarah Jean A. Gavile

College of Computing Education
University of Mindanao
 Introducing the Internet

 The Internet is a gigantic collection of millions of computers, all linked

together on a computer network.
 This network allows all computers to connect and share data with one
another.
 A computer can be connected to the Internet through an Internet
Service Provider such as a telephone company.
 ISPs connect to larger ISPs and maintain fiber-optic backbones for an
entire region. Regions maybe connected through fiber-optics,
undersea cables or satellites.

2
 Structure of the Internet
This figure shows the physical structure of the Internet, which uses fiber-optic
cables, satellites, phone lines, and other telecommunications media to send data
back and forth.

3
The Development of the World
Wide Web

 In 1989, Timothy Berners-Lee and other researchers at the

CERN nuclear research facility, laid the foundation of the
World Wide Web, or the Web.
 created an information system that would make it easy for
researchers to locate and share data
 required minimal training and support
 developed a system of hypertext documents, electronic files
that contain elements that you can easily select

4
Hypertext Documents

 Hypertext offers a better way of locating information.

 When you read a book, you follow a linear progression,
reading one page after another.
 With hypertext, you progress through pages in whatever
way is best suited to you and your objectives.
 Hypertext lets you skip from one topic to another.

5
Linear Versus Hypertext
Documents
This figure shows how topics can be related in a hypertext fashion,
as opposed to a linear fashion.

6
Hypertext Documents
Continued

 The key to hypertext is the use of links, which you

activate to move from one topic to another.
 a link can open a document on a computer anywhere in the
world
 Hypertext has become the dominate method of sharing
and retrieving information on the Internet, becoming
known as the World Wide Web, or the Web.
 Documents on the Web are known as Web pages.

7
Web Pages and Web Browsers

 A Web page is stored on a Web server, which makes the

page available to users of the Web.
 To view a Web page, the user runs a Web browser, a
software program that retrieves the page and displays it.
 A Web browser can either be text-based, or graphical.

8
Using a Browser to View a Web
Document on a Server
This figure shows to view web pages, the user runs a Web browser,
a software program that retrieves the page and displays it.

9
What is HTML?

 HTML is the common language for publishing

hypertext on the World Wide Web.
 Can be created and processed by a wide range
of tools, from simple plain text editors - you type it
in from scratch- to sophisticated WYSIWYG
authoring tools.
Hypertext Markup Language
(HTML)

 HTML allows Web authors to create documents that can

be displayed across different operating systems.
 HTML code is easy to use, that even nonprogrammers can
learn to use it.
 HTML describes the format of Web pages through the use
of tags.
 it’s the job of the Web browser to interpret these tags and
render the text accordingly

11
Hypertext Markup Language
(HTML)

 HTML has a set of rules, called syntax.

 syntax are a set of standards or specifications developed by a
consortium of Web developers, programmers, and authors
called the World Wide Web Consortium (W3C)
 HTML extensions have been added to support new features,
which have been adopted in subsequent sets of standards
released by the W3C.
 these extensions have provided Web page authors with more
options

12
Tools for Creating HTML
Documents

 HTML documents are text files, which a text editor such as

Windows NotePad can be used to create.
 You can also use an HTML converter or an HTML editor.
 an HTML converter like Microsoft Word takes text in one
format and converts it to HTML code
 an HTML editor helps you create an HTML file by inserting
HTML codes for you as you work

13
HTML Syntax

 Document content is what the users sees on the page, such

as headings and images.
 Tags are the HTML codes that control the appearance of
the document content.
 tag is the name of the HTML tag
 attributes are properties of the tag
 document content is actual content that appears in the
Web page

14
HTML Tags
 Tags can be one-sided or two-sided.
 two-sided tags contain an opening tag <tag> that tells
the browser to turn on a feature and apply it to the
contact that follows, and a closing tag </tag> that turns
off the feature
 one-sided tags are usually used to insert noncharacter
data into the Web page, such as a graphic image

 Tags are not case sensitive. The current

standard is to display all tags in lowercase
letters.
15
HTML Basics
 HTML tags are enclosed by brackets < > for
example <HTML>
Most tags require a closing tag <HTML> </HTML>
 Tags must be nested correctly
<B><I>My Library Web Site</I></B>
first tag on, last tag off
 HTML treats all white space as a single blank
space
HTML Document Basic
Structure

Tells the browser that you

<html> are loading an HTML File
Gives information
<head> about your
webpage
<title> Text that appears in
the title bar of the
</title> browser
</head>
Content of the webpage
<body>
</body>
</html>
HTML Document Structure

 Line breaks and indentation exist only for human

readability
 Comments can be written as
<!-- this is a single-line comment -->
<!--
also multi-line comment
-->
Example
<html>
<head>
<title>head/title</title>
</head>
<body> all elements of document
<h1> big heading </h1>
<h6> small heading </h6>
<p> a paragraph of text comes here </p>

</body>
</html>
Creating Heading Tags

 HTML supports six levels of headings, numbered

<h1> through <h6>, with <h1> being the largest
and most prominent.
 Headings are always displayed in a bold font.

20
Six Heading Levels

This figure
illustrates the
general appearance
of the six heading
styles. Your
browser might use
slightly different
fonts and sizes.

21
Basic Tags
 <center>: to position a certain block in the middle of the
web page
 <hr>: horizontal ruler, splits the webpage by a graphical
horizontal ruler, has no closing tag, includes attributes:
 color: presented in hexadecimal code or name, like
color=“#FFFFFF” or color=“white”.
 width
 Align
 size
Basic Tags

 <p></p>: will automatically format a new

paragraph, thus leaving an empty line before it.
 If you don’t want a new paragraph, just want a new
line, use <br> (called line break, has no closing tag)
 Has attributes like “Align” to align the text in the
paragraph
Creating Character Tags

 HTML also lets you format individual characters.

 A tag that you apply to an individual character is called a
character tag. There are two types of character tags:
 logical character tag
 physical character tag

24
Common Logical Character
Tags

Tag Description
<em></em> Indicates that characters should be
emphasized
<strong></strong> Indicates a text in bold font
<code></code> Indicates a sample code
<kbd></kbd> Indicates a text in monospace font
<var></var> Indicates a variable
<cite></cite> Indicates a short quote or citation

25
Common Physical Character
Tags

Tag Description
<b></b> Bold Text
<i></i> Italicized Text
<u></u> Underlined Text
<tt></tt> Typewriter Text in monospace
font
 Subscript Text
 Superscript Text

26
Logical Character Tags as They
Appear in the Browser

examples of
individual
tags

example of
combined
tags

27
Physical Character Tags as
They Appear in the Browser

Underline text can

sometimes be
confused with
hyperlinked text
(which is usually
underlined), and
for that reason,
use of the <u> tag
is discouraged.

28
Special Characters

 Occasionally you will want to include entities or special

characters in your Web page that do not appear on
your keyboard. For example:
 registered trademark symbol ®
 copyright symbol ©
 HTML supports the use of character symbols that are
identified by a code number or name.

29
Special Characters and Codes

30
Creating a Hypertext
Document
 Hypertext documents contain hypertext links,
items that you can select to view another topic or
document, often called the destination of the
link.
 These links can point to:
 another section to the same document or another document
 the same document
 to a different document
 to a different Web page
 to a variety of other Web objects

31
Adding Hypertext Links

You can place

hypertext links at
the top of a web
page to make it
easier for the user
to navigate to a
particular section
of the document
instead of
scrolling.

32
 Creating Anchors
 The <a> tag creates an anchor, text that is specially marked so
that you can link to it from other points in a document.
 Text that is anchored is the destination of a link; it is not the text
you click on.
 Each anchor has its own anchor name, using the “name”
attribute i.e.
<a name=“cc”>Classes</a>.
 An anchor doesn’t have to be text. You can mark an inline
image as an anchor.
 Adding an anchor does not change your document’s
appearance in any way. It merely creates locations in your Web
page that become destinations of links. 33
Creating Hyperlinks
To create a link to an anchor, use the same <a> tag you
used to create the anchor.
The <a> tags used to create links are sometimes called link
tags.
Use the href attribute, which is short for Hypertext
Reference, to indicate the location to jump to.
href can refer to an anchor that you place in the document or to a
different Web page or a resource anywhere on the Internet
it is important to note that the href attribute is case sensitive

You link to an anchor using the anchor name preceded

by a pound (#) symbol i.e. <a href=“#cc”>Classes</a>.
34
Creating Hyperlinks Continued
You should be careful to make each
After you create anchor name unique within a
the anchors that document.
serve as
destinations for
your links, you
need to create
the links
themselves.
The <a> tag you
use to create the
anchor and the
href attribute to
indicate the
location to jump
to.

35
Text Links in the Browser

If the headings do
not appear as text
links, check your
code to make sure
that you are using the
<a> and </a> tags
around the
appropriate text, the
href attribute
within the tag, and
the quotes and #
symbols.

Text formatted as
links

36
Linking to another document

 To create a link to a document, use the same <a> tag with

the href attribute i.e. <a href=“contact.htm”>Contact
me</a>.
 In order for the browser to be able to locate and open
contact.htm, it must be in the same folder as the document
containing the link.

37
HTML Code that
Links to Other Documents

<a> tags to
point to
other
documents

38
Linking to a Section of a
Document

 To navigate to a specific location elsewhere in a document,

rather than the top, you can set anchors and link to an
anchor you create within the document.
 for example, to create a link to a section in the Web page
home.htm marked with an anchor name of “interests,” you create
an anchor in home.htm in the section on Interests, and then enter
the following HTML code in the current document:
<a href=“home.htm#interests”> View my interests </a>
 the entire text, “View my interests,” is linked to the Interests section in the
home.htm file, via the anchor name “interests”

39
Linking to Documents
in Other Folders

 Browsers assume that if no folder information is given, the file

is in the same folder as the current document.
 When referencing a file located in a different folder than
the link tag, you must include the location, or path, for the
file.

40
Linking to Documents on the
Internet
To create a hypertext link to a document on the Internet, you need
to know its URL.
A URL, or Uniform Resource Locator, specifies a precise location on
the Web for a file.
You can find the URL of a Web page in the Location or Address box
of your browser’s document window.
Once you know a document’s URL, you can create a link to it by
adding the URL to the <a> tag along with the href attribute in your text
file i.e.
<a href http://www.mwu.edu/course/info.html>Course
Information</a>.
41
Displaying Linked Documents
in a New Window

 By default, each Web page you open is displayed in the main

browser window, replacing the one you were viewing last.
 To force a document to appear in a new window, instead of the
main browser window, you would use the target attribute in the href
tag i.e.
<a href=“url” target=“_blank”>Hypertext</a>
 url is the URL of the page, and new_window is a name assigned to the
new browser window
 the value use for the target attribute is used by the browser to identify
the different open windows in the current browser session

42
Linking to E-mail
 Many Web designers include their e-mail addresses on
their Web pages, so that users who access the page
can send feedback.
 You can identify e-mail addresses as hypertext links.
when a user clicks the e-mail address, the browser starts a mail program
and automatically inserts the e-mail address into the “To” field of the
outgoing message

 The URL for an e-mail address is mailto:e-mail_address.

 To create a link to the e-mail address davis@mwu.edu,
the following code would be entered
<a href=“mailto:davis@mwu.edu”>davis@mwu.edu</a>
43
HTML Code for using
Color in a Web Page
 In most cases, the default browser scheme involves:
 black text on a white or gray background
 hypertext links highlighted in purple and blue
 To use different colors than these, modify the attributes of the
page, defined within the <body> tag.
 The <body> tag can be used to indicate the colors on a Web
page.
 The syntax for controlling a page’s color scheme through the
<body> tag is: <body bgcolor=“color” text=“color”
link=“color” vlink=“color” alink=“color”>

44
HTML Code for using
Color in a Web Page Continued
 bgcolor attribute sets the background color
 the value of color will be either one of the accepted color names or
the color’s hexadecimal value
 if you use the hexadecimal value, you must preface the
hexadecimal string with the pound symbol (#) and enclose the
string in double or single quotation marks i.e. <body
bgcolor=“#FFC088”>

 text attribute controls text color

 link attribute defines the color of hypertext links
 vlink attribute defines the color of links that have been visited
by the user
 alink attribute determines the color of an active hyperlink (the
color of the link as it is clicked by the user) 45
HTML Code for using
Color in a Web Page Continued

active hyperlink color

text color previously followed hyperlink color

background color hyperlink color

46
The Page with the New Color
Scheme

The Arcadium Web page now

has dark blue text on a light
blue background.

Hypertext links are red and

dark blue.

By adding the color scheme to

the <body> tag of the HTML
file, you’ve superseded the
browser’s default color scheme
with one of your own.

47
Modifying Text

 Specifying the text color in the <body> tag of a Web page

changes the color of all the text on the Web page.
 Occasionally, you may want to change the color of individual
words or characters.
 Changing the color of text is an effective way to make specific
sections of text stand out.

48
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

49
Examples of Different Font Sizes

This figure shows a representation of the various font sizes for a typical browser.

50
Examples of Heading Tags
and Font Sizes
This figure shows a complete comparison of header tags and font sizes.

51
Changing the Font Color
 The color attribute of the <font> tag allows you to
change the color of individual characters or words.
 Specify the color in the <font> tag by using either a
color name or color value.
 for example, to change the color of the word “Aracadium”
to the hexadecimal color value 8000C0, you would enter
the following HTML tag: <font
color=“#8000C0”>Arcadium</font>
 If there is no color specified in the <body> tag, the
default colors of the Web browser is used.

52
Changing the Font Face

 The face attribute is used to specify a particular font for a section

of text.
 The face attribute overrides the browser’s font choice.
 You must specify a font that is installed on the user’s computer or
use one of the following five generic font names:
 serif
 sans-serif
 monospace
 cursive
 fantasy
53
Examples of Generic Fonts
This figure shows some of the possible ways each of these generic fonts could be displayed.

54
Fonts and Browsers

 The face attribute allows you to specify a list of potential font

names.
 the browser tries to use the first font in the list; if it fails, it will try the
second font, and so on.
 A generic font name should be listed last for the browser to fall
back on.
 for example to display the word “Arcadium” in a sans-serif, enter the
following HTML tag: <font face=“Arial, Helvetica, sans-
serif”> Arcadium</font>

55
Applying a Sans-
Serif Font to a
Section of Text text will appear in a
sans-serif font

This figure shows

an example of
applying a sans-
serif font to a
section of text.

56
Creating Lists
 HTML supports three kinds of lists:
 an ordered list, which is used to display information in a
numeric order
 an unordered list, which list items are not listed in a
particular order i.e. bullets
 a definition list, which is a list of terms, each followed by
a definition line that is typically indented slightly to the
right

57
Ordered Lists

To generate ordered lists we use <ol> </ol> and to

list an item we use <li> </li>
Example:
<ol>
<li>DB-9</li>
<li>DB-12</li>
<li>DB-25</li>
</ol>
To change the kind of numbering for an ordered
list, an attribute type with values a, A, i , I or 1 can
be used.
Unordered Lists
To generate unordered lists we use <ul> </ul> and
to list an item we use <li> </li>
Example:
<ul>
<li>DB-9</li>
<li>DB-12</li>
<li>DB-25</li>
</ul>
To change the kind of bullets for an unordered list,
an attribute type with values circle, disc or square
can be used.
Definition List
To generate definition lists, we use <dl> </dl>.
To list a term we, use <dt></dt> and <dd> </dd> to list its definition.
Example:
<dl>
<dt>HTML</dt>
<dd>It is the language of the web used to create the structure
of a hypertext document</dd>
<dt>CSS</dt>
<dd>It is a language of the web used to format the structure
and content of a hypertext document</dd>
</dl>
Tables on the World Wide
Web

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

graphical format.
A graphical table:
A text table:
 is displayed using
 contains only text, evenly graphical elements
spaced on the Web page
in rows and columns  can include design
elements such as
 uses only standard word background colors, and
processing characters colored borders with
shading
 allows you to control the
size of tables cells, rows,
columns and alignment of
text within the table

61
A Text Table

This figure shows a text table.

62
A Graphical Table
This figure shows a graphical table

63
Considerations for
Text and Graphical Tables

 Graphical tables are more flexible and attractive, however there

are some situations when a text table is needed.
 the text-based Lynx browser used on many UNIX systems, can display
only text characters
 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

64
Using 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.

65
Using Proportional Fonts

 Proportional fonts assign a different amount of space for

each character depending on the width of that character.
 for example, since the character “m” is wider than the character “1,”
a proportional font assigns it more space
 Proportional fonts are more visually attractive, and typically
easier to read, than fixed-width fonts.
 Proportional fonts in a text table can cause errors when the
page is rendered in the user’s browser.

66
Column Alignment
Problems
with Proportional Columns look
Fonts aligned

This figure shows how a

text table that uses a
proportional font loses
alignment when the font
size is increased or
decreased. Columns lose
alignment

Columns lose
alignment

67
Column Alignment
with Fixed-Width
Fonts Columns align
regardless of font
This figure shows fixed- size
width fonts, which the
columns remain aligned
regardless of font size.

Different browsers and

operating systems may
use different font sizes to
display your page’s text,
so you should always use
a fixed width font to
ensure that the columns
in your text tables
remain in alignment.

68
Using the <pre> Tag

 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.
69
Text Table Created
with the <pre> Tag

This figure shows

the complete
preformatted text
as it appears in
the file.

text will appear

in the browser as
it appears here

70
Text Table as it Appears
in the Browser

This figure shows

the page as it
appears in the
browser.

table text
appears in a
fixed width
font

71
Defining 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

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

73
The Graphical Table Syntax
 The general syntax of a graphical table is:
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table> 74
A Simple Table

This figure shows

the layout of a
graphical table.

two rows

two columns

75
Columns within a Table

 HTML does not provide a tag for table columns.

 In the original HTML specifications, the number of columns is
determined by how many cells are inserted within each row.
 for example, if you have four <td> tags in each table row, that table has
four columns

76
HTML Structure of a Table
beginning of the
table structure
table cells
You do not need to
indent the <td> tags
or place them on
first row of six separate lines, but you
in the table 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.

end of the table

structure

77
Completed HTML Table Tags

This figure shows the

completed text for the
body of the table.

With the text for the

body of the table
entered, the next step
is to add the column
headings.

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

79
Adding Table Headings to the
Table

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

80
Result of Table Headings
as Displayed in the Browser

table headings
appear bold and
centered over their
columns

81
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>
 alignment indicates 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

82
Inserting a Table Caption

caption text

Placing the caption

text within a pair of
<b> tags causes the
caption will be
caption to display as
centered above the
bold.
table

83
Result of a Table Caption

table caption

This figure shows a

table with a caption.

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

85
Adding a 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”>
 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.

86
Tables with Different Borders
Values

This figure shows the effect on a table’s border when the border size is varied.

87
Adding a 5-Pixel
Border to a Table

Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.

88
Controlling Cell Spacing

 The cellspacing attribute controls the amount of space inserted

between table cells.
 The syntax for specifying the cell space is: <table
cellspacing=“value”>
 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.

89
Tables with Different
Cell Spacing Values

This figure shows how different cell spacing values affect a table’s appearance.

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

91
 Defining Cell Padding

 To control the space between the table text and the cell borders,
add the cellpadding attribute to the table tag.
 The syntax for this attribute is: <table cellpadding=“value”>
 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.

Creating Web Pages with HTML, 3e

Prepared by: C. Hueckstaedt, Tutorial 4 92
Tables with Different
Cell Padding Values

This figure shows the effect of changing the cell padding value for a table.

93
Setting the Cell
Padding to 4 Pixels

This figure shows the

table with the
increased amount of
cell padding.

By increasing the cell

padding, you added
needed space to the
table.

94
Table Frames and Rules
 Two additional table attributes introduced in
HTML 4.0 are the frames and rules attributes.
 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”>
 type is either “box” (the default), “above”,
“below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void”

95
Values of the Frame Attribute
This figure describes each of the values of the frame attribute.

96
Effect of Different Frame Values
This figure shows the effect of each of the frame values on the table grid.

97
Creating Frames and Rules
Continued

 The rules attribute lets you control

how the table gridlines are drawn.
 The syntax of the rules attribute is:
<table rules=“type”>
 type is either “all”, “rows”, “cols”, or “none”

98
Effect of Different Rules Values
This figure shows the effect of each of the rules attribute values on a table.

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

100
Working with Table
and Cell Size Continued

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

101
An Example of
Changing
a Table and Cell
Size

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

103
Defining 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

104
Defining Cell and
Column Sizes Continued

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

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

106
Results of a Right-
Aligned Table

This figure
shows a right-
aligned table.

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

108
Values of the Align
and Valign
Attributes

This figure shows

how the combination
of the align and
valign attributes
can affect the
position of the cell
text in relation to the
cell borders.

109
Right-Aligning the
Values
in a Column

right-aligned column

110
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: rowspan=“value”
colspan=“value”
 value is the number of rows or columns that the cell spans in the table

111
Spanning Rows and
Columns Continued

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

112
Example of Spanning Cells
This figure shows a table of opinion poll data in which some
of the cells span several rows and/or columns.
This cell spans
two columns this cell
and two rows spans three
columns

This cell spans

three rows

113
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

114
Results of a Table with
Spanning Cells
This figure shows a table with spanning cells.

spanning cells

115
Applying 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

116
Results of a Table
with a Colored Background

This figure shows a table with a colored background.

117
The bordercolor Attribute

 By default, table borders are displayed in two shades of

gray that create a three-dimensional effect.
 The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
 color is an HTML color name or hexadecimal color value

118
Applying a Table Background

 Add a background image to your tables using the background

attribute.
 A background can be applied to the entire table, to a single row
or to an individual cell.

119
Applying a Background Image
to a Table, Row, and Cell
This figure shows examples of the background attribute applied to three sample tables.

parch.jpg <tr background=“parch.jpg”>

<table background=“parch.jpg”> <td background=“parch.jpg”>

120
Images

Use the tag <img> to include images (or animated GIFs) in

your HTML document (no closing tag), example:
<img src=“myphoto.jpg” >
Attributes:
src: the source file of the image
width and height: specify the dimensions of the image, you
might want to display it in different dimensions like thumbnails.
border: border thickness in pixels around the image.