Download htmllesson5

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
HTML Lesson 5
TBE 540
Prerequisites

The user must be able to…
– Create basic web pages with a text editor
and/or a web page editor.
Objectives

After completing all activities related to
this lesson, the learner will be able to…
– Describe the use of relative addressing.
– Insert a table in a web page.
– Format the table and fill it with information.
– Create a frameset document and
accompanying pages.
– List advantages and disadvantages of
tables and frames.
Relative Addressing
Though putting all web site files in the
same folder is the simplest method, it is
more common to organize the file into
folders.
 For example, all graphics (especially
those common to several pages) might
be placed in a folder called IMAGES

Relative Addressing
Relative addressing means that you will
specify a “path” when you specify file
names.
 Here are two IMG tags that show
graphic files in a location other than the
folder that contains the page:
<IMG SRC=“IMAGES/cow.gif”>
<IMG SRC=“../IMAGES/cow.gif”>

Relative Addressing
<IMG SRC=“IMAGES/cow.gif”> means
that there is a folder called IMAGES
inside the folder where the page is. The
image cow.gif will be there.
 <IMG SRC=“../IMAGES/cow.gif”>
means to “go up one level” (../) then
look for a folder called IMAGES. The
image cow.gif will be there.

Relative Addressing

Here is a sample site organization:
MySite
home.htm
IMAGES
animals
farm.htm
cow.gif
sheep.gif
back.gif
arrow.gif
Relative Addressing
To put back.gif into home.htm, the IMG
tag in home.htm would be:
<IMG SRC=“IMAGES/back.gif”>
 To put back.gif into farm.htm, the IMG
tag in farm.htm would be:
<IMG SRC=“../IMAGES/back.gif”>

Tables
A web page table is very much like a
table in word processing or a
spreadsheet.
 It has rows, columns and cells.

Number
10
Cost
$1,000
Total
$10,000
5
$25,000
$125,000
Tables
When tables are created, most web
editors will ask for the number of rows
and columns.
 You can change these settings later.
 You may also want to set the border (0
= “invisible”, 3 or more gives a 3-D
effect).

Tables
Tables are often used to line up text
and/or graphics.
 These tables often have a border of 0.

border=1
border=0
Tables
Most commercial web pages use tables
to arrange graphics and text exactly as
the designer planned it.
 Many pages use tables within tables (a
larger table with smaller tables inside its
cells).

Tables (CSUDH Homepage)
Click to see the tables
Tables (CSUDH Homepage)
Frames
In web pages, frames are areas into
which whole web pages can be loaded.
 Though frames are not commonly used
(most sites use tables instead),
Blackboard is a good example of the
use of frames.
 Click to see examples of Blackboard
frames.

Frames - Blackboard
stays here all the time
stays while you
are in a class area
changes when you
click the buttons
Frames
The Blackboard page you just looked at
is made from four web page documents.
 Each of the three frames is a separate
web page file.
 There is a FRAMESET document (also
a web page file) that sets up the frames.

Frames

A FRAMESET document uses <FRAMESET>
and </FRAMESET> instead of <BODY> and
</BODY>.
 The type of frames (rows or columns) must
be specified, and each frame must be
described with a <FRAME> tag like this:
<FRAME SRC =”content1.htm" border="0"
NORESIZE >
FRAMESET Sample

Here is the FRAMESET
code for the example -->
<HTML>
<HEAD></HEAD>
<FRAMESET COLS=“100,*”>
<FRAME SRC=“left.htm”>
<FRAME SRC=“right.htm”>
</FRAMESET>
</HTML>
WELCOME!
Links
•One
•Two
•Three
Join us..etc.
left.htm
right.htm
FRAMESET Sample
Two “column” frames - the
first (left) is 100 pixels
wide. The right frame
takes up whatever space
is left over (*) on the
screen.
left.htm is the web page
file for the left frame.
 right.htm fills the right
frame.

<HTML>
<HEAD></HEAD>
<FRAMESET
COLS=“100,*”>
<FRAME SRC=“left.htm”>
<FRAME
SRC=“right.htm”>

</FRAMESET>
</HTML>
Try this!

For more information on frames and
tables, see the links from the class page:
http://www.csudh.edu/fisher/tbe540/540html.htm

Try the hands-on exercise to experiment
with tables.
Self Check HTML Lesson 5

You are working on a web page in the
HOME folder, and you want to include a
picture called me.jpg that is stored in
the PIX folder (inside the HOME folder).
Which is the correct pathname?
<IMG SRC=“../PIX/me.jpg”>
<IMG SRC=“PIX/me.jpg”>
<IMG SRC=“IMAGES/me.jpg”>
Self Check HTML Lesson 5

You are working on a web page in the
HOME folder, and you want to include a
picture called me.jpg that is stored in
the PIX folder (inside the HOME folder).
Which is the correct pathname?
<IMG SRC=“../PIX/me.jpg”>
<IMG SRC=“PIX/me.jpg”>
<IMG SRC=“IMAGES/me.jpg”>
Self Check HTML Lesson 5

What is the format of the table below?
3 rows, 2 columns, border=2
2 rows, 3 columns, border=0
2 rows, 3 columns, border=2
Self Check HTML Lesson 5

What is the format of the table below?
3 rows, 2 columns, border=2
2 rows, 3 columns, border=0
2 rows, 3 columns, border=2
Self Check HTML Lesson 5

Does the display below show the use of
tables or frames? How can you tell?
LEFT
RIGHT SIDE
SIDE
1
2
3
4
5
Self Check HTML Lesson 5

Does the display below show the use of
tables or frames? How can you tell?
Right side moves, but left side stays as is.
LEFT
RIGHT SIDE
SIDE
1
2
3
4
5