HTML Intro

Introduction to Website Design
christ is lord
Introduction to Website Construction
• In 1990 and 1991,Tim Berners-Lee created the
World Wide Web at the European Laboratory for
Particle Physics (CERN) in Geneva, Switzerland
• The original purpose of the World Wide Web
(WWW) was to provide easy access to cross-
referenced documents that existed on the CERN
computer network
• Hypertext linking allows you to quickly open
other Web pages
christ is lord
(continued)
• A document on the Web is called a Web page
• A Web page is identified by a unique address
called the Uniform Resource Locator (URL)
• A URL is also commonly referred to as a Web
address
• A URL is a type of Uniform Resource Identifier
(URI)
• A Web site refers to the location on the Internet
of the Web pages and related files
christ is lord
(continued)
• Web pages are displayed using a program called

a Web browser
• A Web server is a computer that delivers Web
pages
• The most popular Web server software is
Apache HTTP Server (Apache)
• The second most popular Web server is
Microsoft Internet Information Services (IIS) for
Windows
christ is lord
HTML Documents
• Web pages are created using Hypertext Markup
Language (HTML)
• Web pages are commonly referred to as HTML
pages or documents
• A markup language is a set of characters or
symbols that define a document’s logical
structure
• HTML is based on an older language called
Standard Generalized Markup Language (SGML)
christ is lord
HTML Documents (continued)
• Recently, HTML has evolved into a
language that defines how elements should
appear in a Web browser
• Understanding HTML is critical in learning
how to write a web application along with
the server programming
christ is lord
Web Communication Protocols
• A Web page is identified by a unique address
called the URL
• Each URL consists of two basic parts:
– A protocol (usually HTTP) and
– Either the domain name for a Web server or a Web
server’s Internet Protocol address
• Hypertext Transfer Protocol (HTTP) manages
the hypertext links that are used to navigate
the Web
christ is lord
(continued)
• A host refers to a computer system that is being
accessed by a remote computer
• A domain name is a unique address used for
identifying a computer such as a Web server on
the Internet
• The domain identifier identifies the type of
institution or organization (.biz, .com, .edu, .org)
• An Internet Protocol, or IP address, is another
way to identify computers or devices connected
to the Internet
christ is lord
(continued)
• An IP address consists of a series of four groups of
numbers separated by periods
• Each Internet domain name is associated with a
unique IP address
• HTTP is a component of Transmission Control
Protocol/Internet Protocol (TCP/IP)
• Hypertext Transfer Protocol Secure (HTTPS)
provides secure Internet connections for
transactions that require security and privacy
christ is lord
Web Communication Protocols (continued)
http://www.google.com/help/index.html
Protocol Domain name Directory Filename
Sample URL
christ is lord
Publishing Your Web Site
• Web Hosting:
– The publication of a Web site for public access
– Internet access (cable modem, DSL, satellite, dial-
up modem, ISP)
• Internet Service Provider (ISP):
– Provides access to the Internet along with other
types of services such as e-mail
christ is lord
Publishing Your Web Site (continued)
• ISP advantages to hosting a Web site:
– Extremely fast Internet connections using
advanced fiber-optic connections
– Large and powerful Web servers and the expertise
and manpower to maintain and manage them
• A domain name is a unique address used for
identifying a computer, such as a Web server
on the Internet
christ is lord
(continued)
• Domain name registration
– Pick a domain name that is similar to your business
name or that describes your Web site
– You cannot use a domain name that is already in use or
a trademarked name
– Contact a domain name registrar to find out the
availability of a domain name and register it
– Domain names are stored in a master database that is
maintained by the InterNIC (internet network
information center)
christ is lord
(continued)
• Domain name registration (continued)
– For a fee, domain names can be registered for a
specified period of time
– Most hosting sites provide registration service for
you
– After you register your domain name, notify your
ISP of your domain information
christ is lord
(continued)
• File Transfer Protocol (FTP)
– Is a TCP/IP protocol used for transferring files
across the Internet
– Transfers files between an FTP client (your
computer) and an FTP server (a server capable of
running FTP)
– The vehicle that allows you to get your Web page
files to the Web server
christ is lord
(continued)
• File Transfer Protocol (continued)
– Your ISP provides a username and password to log
on to the FTP site and upload files to the FTP
server
– Examples of FTP clients include Firefox and
Internet Explorer and WinScp
• Use your browser to log on to an FTP server and upload
your files
christ is lord
Understanding Website Construction
• Website Construction, or Web programming,

refers to the design of software applications for a
Web site
• The Webmaster is responsible for:
– The day-to-day maintenance of a Web site
– Monitoring Web site traffic and ensuring that the Web
site’s hardware and software are running properly
– Knowledge of Web page design, authoring, and
development
christ is lord
Summary
• In 1990 and 1991,Tim Berners-Lee created the
World Wide Web at the European Laboratory for
Particle Physics (CERN)
• Transmission Control Protocol/Internet Protocol
(TCP/IP) is a large collection of communication
protocols used on the Internet
• A Document Type Definition (DTD) defines the
elements and attributes that can be used in a
document
christ is lord
BASIC HTML
christ is lord
Introduction to HTML
• Introduction to HTML
• Start, Programs, Accecories, Notepad.
• <HTML>
</HTML> Each one of those is called a tag. There

is a starting tag and a closing tag.
• Tags as “talk” to the browser, or give it instructions.
christ is lord
Basic html
• Every HTML document needs a pair of HEAD tags.
• <HTML> <HEAD> </HEAD> </HTML>
• The only thing we have to concern ourselves with in
the HEAD tags (for now) are the TITLE tags.
• <HTML><HEAD><TITLE></TITLE></HEAD>
christ is lord
Basic html
• And the bulk of the page is going to be within
the BODY tags.
• <HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY> </BODY>
</HTML>
christ is lord
Basic html
• <HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>Hello Joe!</BODY>
</HTML>
 Now save it, not as a text document, but as a
html document.
christ is lord
Basic html
 <HTML>: tells the Web browser that this is the
beginning of an HTML document
 <HEAD>: tells that Web browser that this is the
header for the page (you'll learn later what goes
between "HEAD" tags)
 <TITLE>: tells the Web browser that this is the title of
the page
 <BODY>: tells the Web browser that this is the
beginning of the Web page content -- everything you
want to say and see on your page will follow this tag.
christ is lord
Saving
• File then Save As.

You will be presented with a dialog box.
• Make a new folder
Name it whatever you want. Then double click on it to open it
up.
• Where it says File name: type in "page1”.html Where it says
Save as type: make sure it says All Files(*.*)
• You should be able to double click on it now and see the results
christ is lord
Basic html
• Find the icon of the html file you just made and
double click on it
• Or In Internet Explorer, click on File/Open File In
Browser and browse to the file
• What you made is a skeleton HTML document. This is
the minimum required information for a web document
and all web documents should contain these basic
components.
• And, the document title is what appears at the very top
of the browser window.
christ is lord
Colours
• To change background colors.
• NB. Keep the other lines written
• <BODY BGCOLOR="#CCFFCC"> My first
web page </BODY>
• If a background color is specified that is not
one of the known colors, then Netscape will
usually pick the closest of these colors to use.
christ is lord
Colours
• You can specify a background image instead. (Note,

the image should be in the same folder as your
HTML file. More on this below.)
• <BODY BACKGROUND="swirlies.gif"> My first
web page </BODY>
• Right click on the image and choose Save Image As
(or some variant thereof).
• Browse to wherever your folder is then save.
• Remember the file extension of the image
christ is lord
Formatting tags
• We can make things bold.
• <BODY>Something really
<B>cool</B></BODY>
• Cool
• What we are telling the browser is: at the
<B> start making things bold,
• and at the </B> stop making things bold.
christ is lord
Formatting tags
• The same principle applies to italics...
• <BODY>Something <I>really</I>
<B>cool</B></BODY>
• really
• ...and underlining.
• <BODY><U>Something</U> <I>really</I>
<B>cool</B></BODY>
• Something really cool

christ is lord
Formatting tags
• We can use tags in combination if we want to.
• <BODY>Something really <I><B>cool</B></I></BODY>
• Something really Cool
• This is an example of nested tags. If you are going to use tag
pairs, avoid confusing the browser, they should be nested, not
overlapping
• <THIS><THAT></THIS></THAT> Overlapping tags....
bad
• <THIS><THAT></THAT></THIS> Nested tags.... good
christ is lord
Font
• can change the font size too

• First add the <FONT> tags...
• <BODY>Something really
<FONT>cool</FONT></BODY> Then specify a SIZE
attribute.
• <BODY>Something really <FONT
SIZE=6>cool</FONT></BODY>
christ is lord
Font
• Try it out
• Change the font sizes from 1 to 7 and observe the
effect
• NB. First, a <TAG> tells the browser to do something.
An ATTRIBUTE goes inside the <TAG> and tells the
browser how to do it.
• <FONT SIZE=6> …
• Second, , the default value is a value that the browser
assumes if you have not told it otherwise.
christ is lord
Font
• A good example is the font size. The default font size is
3 (usually). If you say nothing it will be 3.
• Every browser has a default font setting - font name,
size and color. Unless you have messed with it the
default is probably Times New Roman 12pt (which
translates into 3 for our purposes) and it's black.
• we can specify font names other than the defaults. Like
ARIAL and COMIC SANS.
christ is lord
Font

FACE="ARIAL">cool</FONT></BODY>
• The font will only display if your viewer has that
font installed on their computer. Otherwise,
they will only see the default font
• Arial and Comic Sans MS are pretty widely
distributed with Windows.
christ is lord
Font
• Can specify more than one font. Just do one of these...
<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee
Ho</FONT>.
• The browser looks for ARIAL. If it finds it, it uses it. If not, it
goes on to HELVETICA. If it can't find that, it looks for
LUCIDA SANS. And if it can't find that it uses the default
font.
• Go try out different fonts like Comic Sans MS,
Courier New Times Rew Roman, Georgia
Impact Trebuchet, Verdana
christ is lord
Font
• Missing or misplacing quotation marks or a missing

space or a missing greater than > sign can make our
page screwed up .
• Someday we will be separated from this kind of coding,
but for now we just have to be careful.
• Tags stand out more when using all caps. You could just
as well use <font> instead of <FONT>. You can even use
<fOnT> if that's what you want.
christ is lord
Font
• You can change the font color if you like.

COLOR="#FF0000">cool</FONT></BODY>
• Check what this color looks like
• We can, of course use more than one ATTRIBUTE in a
<FONT> tag...
COLOR="#FF0000" FACE="ARIAL"
SIZE="7">cool</FONT></BODY>
christ is lord
Font
• <BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT
COLOR="#FF0000" FACE="ARIAL"
SIZE="7">cool</FONT></B></I></U>
</BODY>
 Cool will appear red etc…
 Note: Multiple tags should be nested.
 <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></
TAG3>
christ is lord
Font
• It doesn't matter which tag is first. It's not like if you

want to make something red and bold you have to do
one or the other first. You can do them in any order
you want. Such as...
• <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></
TAG2>
• The fastest way to confuse the browser, not to mention
yourself is to overlap the tags...
• <TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></
TAG2>
christ is lord
Font
• Another occasionally useful tag worth mentioning are
section headings. They come in sizes 1-6.
• <H1>Something really cool<H1>
• NB H1 is bigger than H2, H2 greater than H3.. in that
order. Try them out.
christ is lord
Alignment
• A useful heading attribute is ALIGN... fairly self-

explanatory.
• <H2 ALIGN="left">Something really cool<H2>
• <H2 ALIGN="center">Something really cool<H2>
• <H2 ALIGN="right">Something really cool<H2>
christ is lord
Defaults
• The browser has default settings for text color, link
color, active link color and visited link color in addition
to the background color. The defaults are...
• Text is usually black
Links are usually blue
Active link is usually red
Visited link is usually purple
• You can change these if you NEED to.
christ is lord
Defaults
• You can change these defaults for the entire

document in the <BODY> tag.
• <BODY BGCOLOR="#00000"
TEXT="#FFFF66" LINK="#00FF66"
VLINK="#00BB33"
ALINK="#00CCFF">Something really
cool</BODY>
christ is lord
Source code
• You can view the HTML code of any page you
happen to be viewing by choosing
View/Document Source in your browser.
• So, as you surf along and you run into a really
neat page and you find yourself thinking
"How'd they do that?", the answer is only a
couple clicks away.
• View its source!
christ is lord
Basic formatting, line
breaks, paragraph aligning
Line breaks
christ is lord
Line breaks
• <BODY>
We are web
designers.
Aren’t we?
</BODY>
Out put: We are web designers aren’t we?
christ is lord
Line breaks
• The browser doesn't recognize formatting.
Unless you tell it otherwise, it just displays
the characters in a steady stream.
• If you want to start a new line you have to
use a line break.
christ is lord
Line breaks
• OUTPUT
<BODY>
Hey
Hey!
What’s
going
<BR> What's
on
<BR>
here??
going
<BR>on
<BR>here??
</BODY>
christ is lord
Line breaks
OUTPUT
<BODY> Learning
<BR>Learning a language
<BR> a language
takes
<BR>
<BR>takes time
<BR> Practice
<BR>time
<BR>Practice.
</BODY>
christ is lord
Line breaks
• <BR> basically says - start a new line.
• Can use the <BR> tag to skip a line or even
many lines if there is need.
• E.g.
christ is lord
Line breaks
<BODY>
<BR>Practice Practice
<BR>day
day
<BR>
<BR>
<BR>
<BR>and
<BR> and
<BR>
<BR>night
</BODY>
night
christ is lord
Paragraphs and Alignment
• <P> is the paragraph tag. Think of a paragraph as a
block of text.
<BODY>
<P>God is good</P>
</BODY>
• By itself it doesn't do much. Although with most
browsers, starting a new paragraph does have the
effect of skipping a line.
christ is lord
• This <P> tag is good for aligning stuff.
<BODY>
<P ALIGN="left"> God is good.
<BR> To every person</P>
<P ALIGN="center">To you also! <BR>You may
not know </P>
<P ALIGN="right">Indeed to all.</P>
</BODY>
Try this out on your own. [Can center, left align, right
align all page contents]
christ is lord
• Although we used a closing tag (</P>), it is

not entirely necessary.
• Nearly all browsers will assume that when a
new <P> paragraph has begun, the old one
must have ended.
• <P>Some stuff <P>More stuff
is the same as...
• <P>Some stuff</P><P>More stuff</P>
christ is lord
Special characters
<BODY>God is good</BODY>
[ Output: God is good ]
• The browser won't recognize more than 1
space.
• There is a nifty little code that means
"space" to the browser ->
• Try this instead...
christ is lord
Special characters
• The space code
• <BODY>
Something &nbsp
;really &n
bsp;cool
</BODY>
[Output: Something really cool]
christ is lord
Special characters
• There are quite a few of these special characters. Here
are six more.
• (Note- these should always be lower case)
• non-breaking space,
< < less-than symbol,
> > greater-than symbol,
& & ampersand
" " quotation mark,
soft hyphen
christ is lord
Special characters
• You don't need to use them all the time, just when
typing the real character would confuse the browser.
• How do you know when that is? No hard and fast
'rule'.
• It will just come with a little practice. Try them out
even if you make mistakes, don’t give up, don’t be
afraid of trying something new. Mistakes are our
friends but we should not make the same mistakes a
number of times!
christ is lord
Tag position
• <BODY>Something<B • Something
> really
really<BR>cool<BR>li cool
ke<BR>an<BR>icecub like
e!</BODY>
an
It does not matter on icecube
which line you put your
tags, if they are proper,
they will be interpreted
wherever they are! christ is lord
Inserting images, relative
paths
christ is lord
Images
• The image must already been saved before we
can use it, preferably in the same folder as the
HTML code.
• Can specify image with the <IMG> (image) tag.
• <BODY> <IMG> </BODY>
• We must also specify the source and the size.
• <BODY><IMG SRC="chef.gif" WIDTH=130
HEIGHT=101 > </BODY>
• You can use Microsoft Paint to get the exact size
of the image.
christ is lord
Images
• The browser can figure out how big the image is
all by itself. But we give the dimensions then
because then, the browser can simply reserve a
space for the image, then load the rest of page.
• Once the entire page loads it can go back and fill
in the images. Without dimensions, when it runs
into an image, the browser has to pause loading
the page, load the image, then continue loading the
page.
• So, the browser functions much better with image
dimensions.
christ is lord
Images
• <BODY>
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
• We can however adjust the dimensions until the image
appears the way we want it on the web page.
• <BODY><IMG SRC="chef.gif" WIDTH=40
HEIGHT=200>
</BODY>
The same image has now been changed in size!
christ is lord
Images
• Well, look at this little red dot -> .
• It's a 1x1 square. We can change its appearance
greatly.
<BODY> <P ALIGN="center"><IMG
SRC="red_dot.gif" WIDTH=500 HEIGHT=1>
<P ALIGN="center"><IMG SRC="red_dot.gif"
WIDTH=500 HEIGHT=2>
WIDTH=500 HEIGHT=8>
WIDTH=2 HEIGHT=200> </BODY> Try it out.
christ is lord
Links, image links,
email links
christ is lord
Links
• A URL is just an address.
• <BODY>Go to <A
HREF="http://www.yahoo.com/">Yahoo!</A></
BODY>
• Go to yahoo!
• <BODY>Go to <A
HREF="http://www.google.com/">
google</A></BODY>
• Go to google
christ is lord
Links
• An email link works the same way. We just use
an email address instead of a page address.
• <BODY>Send me <A
HREF="mailto:emma@yahoo.com">Mail!</A
></BODY>
• [ Output: Send me Mail ]
christ is lord
Links
• We can make an image a link if we want. We
simply substitute an <IMG> tag for the words!
• <BODY>Go to <A
HREF="http://www.google.com/"><IMG
SRC="chef.gif" WIDTH=130
HEIGHT=101></A>
</BODY>
• Include links if you think it adds value, but try to
refrain from having a page that consists of nothing
more than links and links that link to even more
links!
christ is lord
Links
• To get rid of the blue border around an image
link, Add BORDER=0 to the IMG tag.
• Let's suppose you have a few Microsoft Word
documents that you would like to offer. Just link to
them as below
• <A HREF="myresume.doc">Download my
resume</A>
• <BR><A HREF="mybio.doc">Download my
autobiography</A>
Download my resume
Download my autobiography
christ is lord
Links
• Remember that images contain a lot of data and
therefore can be slow to load.
• We can reduce the size (Kb) by reducing the
dimensions. Also you can reduce the number of
colors.
• A picture with many colors is nice to look at but
slow to load. Remember we want others(visitors)
to see it but if your page takes forever to load,
your visitors will probably leave and they won't
see anything.
christ is lord
Links
• To make a link open in a new browser window
• Can be done easily by right clicking on the link
and choose "Open In New Window".
• However we can force this action by adding
TARGET="_blank" to the link...
• Go to <A HREF="http://www.yahoo.com/"
TARGET="_blank"> yahoo </A>
christ is lord
Links
• Another option that can be used if you want to
offer a lot of imagery is to provide thumbnails that
link to larger versions of the image. Let's suppose
that I want to offer three very nice pictures of let's
say a few of my cars (I wish).
christ is lord
Links
• Making a smaller version of the picture is very
important. Create a smaller copy of the image and
use that as a link to the big image.
• Put the full sized image and the small image in
your working folder. Right-click & Save Image
As.
• Start with your <IMG> tag.
<BODY><IMG SRC="car1-sm.gif" WIDTH=90
HEIGHT=62></BODY>
christ is lord
Links
• Add your <A> tags.
• <BODY><A><IMG SRC="car1-sm.gif"
WIDTH=90 HEIGHT=62></A></BODY>
• And add the URL of the big picture then you're
done!
• <BODY><A HREF="car1.jpg"><IMG
SRC="car1-sm.gif" WIDTH=90
HEIGHT=62></A></BODY>
• Can get rid of the blue border. <BODY><A
HREF="car1.jpg"><IMG SRC="car1-sm.gif"
WIDTH=90 HEIGHT=62 BORDER=0> </A>
</BODY>
christ is lord
Links
• Another way to link is to link not just to a page,
but to a specific part of a page.
• First start with the spot you want people to be
transported to. Pick a word and wrap it in the <A>
tags. <A>Add</A> the URL and you're done!
• Next give that spot a NAME.
• <A NAME="upabit">Add</A> the URL and
you're done! What you have done is marked that
spot. Now that spot can be referenced and linked
to.
christ is lord
Links
• Start building the link. Click <A>here</A> to be
magically transported...
• Add the document to be referenced...
• Click <A HREF="lesson06.html">here</A> to be
magically transported...
• And lastly, add the anchor NAME like so...
• Click <AHREF="lesson06.html#upabit">
here</A> to be magically transported... And that's all
there is to it!
christ is lord
Ordered/unordered lists,
definition lists, more
formatting
christ is lord
More formatting
• One of the available formatting tags is the
<BLOCKQUOTE>. In most browsers it pulls your
margins in from both sides. However different
browsers may render the text in block quote
differently.
• <BODY><BLOCKQUOTE>
WE THE DCIS students of MTAC are
hardworking and determined. Nothing can take us
astray in as far as our studies are concerned.
</BLOCKQUOTE></BODY>
christ is lord
Lists
• Another useful tool is a LIST. There are
ORDERED lists and UNORDERED lists.
This is an ordered list An unordered list

1. Uganda • red
2. Kenya • blue
3. Tanzania • black
4. Rwanda • yellow
christ is lord
unordered list tags
<BODY>
The following are districts
<UL>
<LI> Kampala Output
<LI> Masaka • Kampala
<LI> Kabaale • Masaka
• Kabaale
<LI> Iganga
• Iganga
</UL>
</BODY>
christ is lord
Ordered list tags
<BODY> Output
What I want: 1. A big red truck
<OL> 2. A fast boat
<LI>A big red truck 3. A drum
<LI>A fast boat 4. A piano
<LI>A drum set
<LI> A piano
</OL></BODY>
christ is lord
Definition list
• Another type of list is a definition list.
add a definition title…, And a definition item.
<BODY> <DL><DT> 10th Amendment
<DD>The powers not delegated to the United States
by the Constitution, nor prohibited by it to the
States, are reserved to the States respectively, or
to the people.</DL></BODY>
• You can bold the definition title…..
<DT><B>10th Amendment</B><DD>The powers
not delegated to the………
christ is lord
The Horizontal Rule.
• <BODY> <HR> </BODY>

(a horizontal ruler will be drawn across the page)
• <BODY> <HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100> </BODY>
christ is lord
• <BODY><HR WIDTH=60% ALIGN="left">
<HR WIDTH=60% ALIGN="right">
<HR WIDTH=60% ALIGN="center">
</BODY>
• Try it out and see the effect.
christ is lord
• We can control the thickness of the line...
• <BODY><HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
</BODY>
christ is lord
• It can be made a solid line.
• <BODY><HR WIDTH=60% SIZE=1
NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
</BODY>
christ is lord
<PRE> (preformat) tag
• Remember, browser doesn't understand formatting,
it just displays text in a steady stream! But we can
order the browser to show the contents the way we
write them. The <PRE> (preformat) tag is used.
• <BODY> <PRE>
We put
the
comments the way we want.
</PRE>
</BODY>
christ is lord
A comment tag
• The comment must start with 
• You can (usually) even put other html tags in a
comment and they will be ignored. The browser will
just keep ignoring everything until it sees a -->
• This is helpful especially if you want to include
messages of specific importance to the readers of
the source code.
christ is lord
A comment tag
• <BODY>
• 
<P>A comment can be placed anywhere in the
document and the browser will ignore everything
inside the brackets. You can insert hidden messages,
 notes to yourself,
or write a helpful message to someone looking at the
source of your page.</BODY>
christ is lord
Tables
• <TABLE>
The main tag. Used to tell the browser "this is a
table", along with some attributes like size, border
width and a few other things.
• <TR>
Table Row defines a horizontal row of <TD> (Table
Data) cells.
• <TD>
Specifies an individual block or cell in a table row.
christ is lord
Tables
Basically a table is made up of rows which in
turn are made up of cells...
<TABLE>
<TR>
<TD>Ed</TD>
</TR></TABLE>
Try it out and see the effect.
christ is lord
Tables
• <TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
• How about a bigger border?
<TABLE BORDER=5>
<TR> <TD>Ed</TD>
</TR>
</TABLE>
christ is lord
Tables
• Now change the boarder to “0”
• Then to 25
• Add the following words in the Table data
“Can I see the effect”
• Then we can specifying a table size
christ is lord
Tables
• <TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
• Now change the width to 75%
• Then to 50% and see the effect
• Now specify a width of 50 instead of 50%.
<TABLE BORDER=3 WIDTH=50>
<TR> <TD>Ed</TD> </TR>
</TABLE>
christ is lord
Tables
• Each of the two ways to specify the table width
has its advantages and you can choose what you
feel comfortable with.
• We can also change the height.
• <TABLE BORDER=3 WIDTH=100
HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
christ is lord
Tables
• Note - Controlling a table's height is fairly simple.
Controlling the height of individual cells in the table
is a little unreliable, especially across different
browsers.
• We can control the alignment of the cell data.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="center">Ed</TD>
</TR>
</TABLE>
christ is lord
Tables
• We can left align the cell data or right align.
• The default value is (usually) ALIGN="left".
You probably already know, by the way, that
the default value is the value that the browser
assumes if you have not told it otherwise.
christ is lord
Tables
• We can also control where data will appear vertically
in a cell.
• <TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="top">Ed</TD>
</TR>
</TABLE>
christ is lord
Tables
<TR><TD ALIGN="left"
VALIGN="bottom">Ed</TD>
</TR></TABLE>
• Default is usually middle
<TR><TD ALIGN="left" VALIGN="middle">
Ed</TD>
</TR>
</TABLE>
christ is lord
Tables
• Images can also be used and manipulated in a
table data cell.
HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle"><IMG
SRC="ed.gif" WIDTH=32 HEIGHT=32
ALT="Ed">
</TD> </TR>
</TABLE>
christ is lord
Tables
HEIGHT=75> <TR><TD>Ed</TD>
<TD>Tom</TD> </TR> </TABLE>
We are now getting two columns and putting the
data in each.
• WIDTH attributes can also be expressed as a
percentage.
HEIGHT=75><TR><TD WIDTH=50%>
Ed</TD>
<TD WIDTH=50%>Tom</TD></TR></TABLE>
christ is lord
Tables
• The browser may not follow the strictly specific table
cell dimensions. Often the browser doesn't render a
table exactly how we've specified. It is therefore
better to design “rubber bands” than a rigid
framework.
• Design your table in such a way so that minor
differences in the way a browser renders it won't
destroy what you're trying to do.
christ is lord
Tables
• The attributes in the first row can be carried on to
the second row
HEIGHT=75>
<TR>
<TD WIDTH=60%> Edward </D>
<TD WIDTH=20%>Tom</TD>
<TDWIDTH=20%> Rick </TD>
</TR>
<TR><TD>Larry</TD><TD>Curly</TD><TD>
Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• If we leave out one element, the table will remain
in shape (second row last column)
• <TABLE BORDER=3 WIDTH=300 HEIGHT=75
>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD></TR>
<TR>
<TD>Larry</TD> <TD>Curly</TD>
</TR>
</TABLE>
christ is lord
Tables
• To keep the browser from guessing, we can leave
that empty cell there and just put a blank space in it
( ).
• Normally for a simple table this isn't necessary,
however as your tables become more complex, the
less guessing the browser has to do, the better off
you'll be.
• How? Can put <TD> </TD> before closing
the last </TR>
christ is lord
Tables
• Let's put Moe back and remove all attributes except
BORDER.
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR> <TD>Larry</TD> <TD>Curly</TD>
<TD>Moe</TD>
</TR> </TABLE>
• See the effect
christ is lord
Tables
• Next are a couple of attributes called
CELLPADDING and CELLSPACING.
• Both are used up front in the <TABLE> tag.
• CELLPADDING is the amount of space
between the border of the cell and the contents
of the cell.
christ is lord
Tables
• <TABLE BORDER=3
CELLPADDING=12>
<TR>
<TD>Ed</TD> <TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR><TD>Larry</TD><TD>Curly</TD>
<TD>Moe</TD></TR> </TABLE>
• Try it out
christ is lord
Tables
• The default value for this attribute is normally 1.
The reason it is 1 and not 0 is so that any text in
the cells won't be banging up against the borders.
(Although you could specify 0 if you wanted to).
• If we substitute CELLSPACING for
CELLPADDING we get a slightly different effect.
• The default value for the CELLSPACING
attribute is usually 2.
christ is lord
Tables
• <TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Ed</TD><TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR> </TABLE>
• Try it out. Yes that is what it means to practice!
christ is lord
Tables
• We can, of course, use these attributes in
combination.
• <TABLE BORDER=3 CELLSPACING=12
CELLPADDING=12>
<TR>
<TD>Rick</TD></TR> <TR><TD>Larry</
TD><TD>Curly</TD><TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• And, to see what it would look like, we can set them
both to 0.
• <TABLE BORDER=3 CELLSPACING=0
CELLPADDING=0>
<TR><TD>Ed</TD><TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR><TD>Larry</TD><TD>Curly</TD>
<TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• Some HTML authors are omitting closing cell
</TD>, row </TR> and table </TABLE> tags.
Even the W3C's(WWW Consortium) html
recommendation suggests that at least the closing
cell and row tags can be left out.
• The idea is that the browser should know that
when another cell begins, the last one must have
ended.
• But for complex tables, some browsers don't
always understand this and the table goes goofy.
It is therefore a good practice to always include
those closing tags.
christ is lord
Tables
• Whenever a whole page, or large portions of a
page just "disappear", the culprit is usually
one or more missing </TABLE> tags.
• Make sure all closing tags are there (especially
/TABLE) and then the problem disappears.
christ is lord
Tables
• We can decide to put a back ground colour in our
table
• <TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Rick</TD></TR>
<TR>
<TD>Larry</TD><TD>Curly</TD>
<TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• It can be a different colour for each row. <TABLE
BORDER=3>
<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Moe</TD>
</TR> </TABLE>
• Try it out and see the effect please.
christ is lord
Tables
• We can even give different colours to different
calls.
<TR BGCOLOR="#FFCCFF">
<TD>Rick</TD></TR>
<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Moe </TD>
</TR> </TABLE>
christ is lord
Tables
• <TD> bgcolor will override a <TR> bgcolor and a
<TR> bgcolor will override a <TABLE> bgcolor
e.g.
• <TABLE BORDER=3
BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD><TD>Rick</TD>
</TR>
<TR><TD>Larry</TD><TD>Curly</
TD><TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• NB. A browser has to interpret the instructions you
give it the best way it can. If something has not been
specified one way or another, most browsers will try
to come up with an attractive solution
• Nevertheless you need to avoid the mistakes as
much as possible just incase you use another
browser that is not as tolerant as the one that
corrects your mistakes.
christ is lord
Tables
• COLSPAN (Column Span) and ROWSPAN (Row
Span maybe??) can also be looked at now. See below
<TR>
<TD>Ed</TD><TD>Rick</TD> </TR>
<TR>
<TD>Moe</TD></TR>
</TABLE>
• Try it out.
christ is lord
Tables
• We can make two cells down or whatever occupy
the same space as one cell above.We have to use
the COLSPAN attribute like so
<TR>
<TD COLSPAN=2>Ed</TD><TD>Rick</TD>
</TR>
<TR>
<TD>Moe</TD>
</TR> </TABLE>
• Try it out
christ is lord
Tables
<TR><TD COLSPAN=3
ALIGN="center">Ed</TD>
</TR> <TR><TD>Larry</TD><TD>Curly</
TD><TD>Moe</TD>
</TR> </TABLE>
• [One cell up spans the equivalent of three cells
down ]
christ is lord
Tables
• All other html coding can be used in a cell. We can
make letters bold as an example.
<TR>
<TD COLSPAN=3 ALIGN="center">
<B>Ed</B></TD></TR>
<TR>
<TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• We'll make words in a given cell a link to my
other pages.
<TR>
<TD COLSPAN=3 ALIGN="center"><A
HREF="http://www.google.com/">Ed</A>
</TD></TR>
<TR>
<TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• <ROWSPAN> is just like <COLSPAN> except you
will span rows instead of columns.
<TR><TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD><TD>Rick</TD>
</TR>
<TR><TD>Curly</TD><TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• We can use the two in combination
<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>
<TR>
<TD>Curly</TD><TD>Moe</TD>
</TR> </TABLE>
christ is lord
Tables
• We can create a table of one row and column.
• <TABLE
BORDER=3><TR><TD>Edward</TD>
</TR>
</TABLE>
christ is lord
Tables
• Can replace Edward with an unordered list.
<TR><TD>Items for shopping
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar<LI>
lemon</UL>
</TD>
</TR>
</TABLE>
christ is lord
Tables
• Remember, in the absence of other
instructions, the table will make itself just big
enough to contain the data.
• So in this instance, a size attribute is not
needed to accomodate the list. The table
simply expands to the proper size.
christ is lord
Tables
• We can expand the table the full width of the browser
window.
<TR>
<TD>Items for shopping
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar<LI>Lemon</UL>
</TD>
</TR></TABLE>
christ is lord
Tables
• We can place the image in the first cell
<TR>
<TD WIDTH=40%>
<IMG SRC=“footballer.gif" WIDTH=150
HEIGHT=138>
</TD>
<TD WIDTH=60%>Items for shopping<UL>
<LI>Apples<LI>Flour<LI>Sugar<LI>Lemon
</UL></TD></TR></TABLE>
christ is lord
Tables
• We can align the image to the right side of the cell
and turn off the border attribute.
<TR>
<TD WIDTH=40% ALIGN="right">
<IMG SRC=“footballer.gif" WIDTH=150
HEIGHT=138></TD>
<TD WIDTH=60%>Items for shopping
<UL><LI>Apples<LI>Flour<LI>Sugar
<LI>Lemon</UL>
</TD></TR></TABLE>
christ is lord
Tables
• We can have a table within a table
<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
christ is lord
Tables
• Our table can also be centered very easily.
• <CENTER>
<TR>
<TD>
<TABLE BORDER=3>
<TR><TD>Ed</TD></TR></TABLE>
</TD></TR>
</TABLE>
</CENTER>
christ is lord
FORMS
christ is lord
FORMS
• With the form tag you can add to your web pages
a guestbook, order forms, surveys, get feedback or
whatever.
• The basic construction of a html form is this...
• <FORM> begin a form
<INPUT> ask for information in one of several
different ways...
<INPUT> ...there can be as many input areas as
you wish
</FORM> end a form
christ is lord
FORMS
• Remember the general format, and our activity will
remain between the body tags.
• HTML>
<HEAD>
<TITLE>
Joe's the handsomest guy I know
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
christ is lord
FORMS
• CGI form handling (Common Gateway Interface)
• The most reliable way to process your form data is to
send it to a script on a server for processing.
• The most obvious place to look for such a script is
your own ISP or web host. Most have a form mail
script that you can send the data to.
• ISP normally give directions on using their script.
christ is lord
FORMS
• The most common TYPE of form <INPUT> is
TEXT.
• <FORM>
<INPUT TYPE="text">
</FORM>
• Every input needs a NAME.
• <FORM>
<INPUT TYPE="text" NAME="ADDRESS">
</FORM>
christ is lord
FORMS
• When the user types in his address (for example
254 Masaka), it will become the input's value and
be paired with ADDRESS so the end result after
processing will be ADDRESS=254 Masaka
• We can if we want, type in a VALUE.
• <FORM><INPUT TYPE="text"
NAME="ADDRESS" VALUE="44 Kabale">
</FORM>
• This will bring the words “44 Kabale” in the area
where one was to type the words.
christ is lord
FORMS
• This will automatically pair the value 44 Kabale with
the name ADDRESS, unless the user changes it.
• Note - be sure to use quotes where I've specified.
• We can specify the size of the text input box.
• <FORM><INPUT TYPE="text"
NAME="ADDRESS" VALUE="44 Kabale"
SIZE=10>
</FORM>
christ is lord
FORMS
• See the effect if you change the value to 30
• <FORM>
<INPUT TYPE="text" NAME="ADDRESS"
VALUE="44 Kabale" SIZE=30>
</FORM>
• The default value is (usually) 20. You probably
already know, by the way, that the default value is the
value that the browser assumes if you have not told it
otherwise.
christ is lord
FORMS
• Note - A text box is not always the same size
between browsers. Author a form with one
browser, then view it in another browser, and
you'll see them rendered a little differently.
• We can specify how many characters a user can
input.
<FORM>
<INPUT TYPE="text" NAME="ADDRESS"
SIZE=30 MAXLENGTH=10>
</FORM>
• This can be done if you think people will send a
lot of words
christ is lord
FORMS
• Very similar to the TYPE=TEXT is the
TYPE=PASSWORD. It is exactly the same,
except it displays *** instead of the actual
input. The browser will send you the input, it
just won't display it.
• <FORM>
<INPUT TYPE="password">
</FORM>
christ is lord
FORMS
• Remember that each <INPUT> must have a NAME.
• <FORM>
<INPUT TYPE="password" NAME="USERPASS">
</FORM>
• SIZE, VALUE, and MAXLENGTH attributes work
here also.
• N.B. A <TAG> tells the browser to do something. An
ATTRIBUTE goes inside the <TAG> and tells the
browser how to do it.
christ is lord
FORMS
• Next up are Radio Buttons and Check Boxes. Radio
buttons allow the user to choose one of several
options.
• Check Boxes allow the user to choose one or more or
all of several options.
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>
christ is lord
FORMS
• We can have three or more buttons
• <FORM>
</FORM>
christ is lord
FORMS
• We can add breaks.
• <FORM>
<INPUT TYPE="radio" NAME="BEST
FRIEND">
<BR>
FRIEND">
<BR>
FRIEND">
</FORM>
christ is lord
FORMS
• Note that each input has the same name. The
reason will become apparent very shortly.
• Each of the Radio Buttons must be assigned a
VALUE.
• <FORM>
FRIEND" VALUE="Eva"><BR><INPUT
TYPE="radio" NAME="BEST FRIEND"
VALUE=“Jim"><BR><INPUT TYPE="radio"
NAME="BEST FRIEND" VALUE="Tom">
</FORM>
christ is lord
FORMS
• N.B. The neater and more organized you write
your code, the easier it is to work with.
• Also, when you go back to make changes,
having an orderly layout is half the battle.
christ is lord
FORMS
• We can label each button.
• <FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND"
VALUE="Ed">Eva Akello<BR>
VALUE="Rick">Joe Nakato<BR><INPUT
TYPE="radio" NAME="BEST FRIEND"
VALUE="Tom">Tom Babigumira</FORM>
christ is lord
FORMS
• You can tidy things up by adding a statement above
the buttons, and if you want, choose a default
selection
• <FORM>Who is your best friend? <BR>
VALUE=“Eva" CHECKED>Eva Akello<BR>
VALUE=“Joe">Joe Nakato <BR>
VALUE="Tom">Tom Babigumira
</FORM>
christ is lord
FORMS
• The user of course can only choose 1 option.
• Their choice will be returned to you as the
name/value pair BEST FRIEND=Eva (or
whoever they pick).
christ is lord
FORMS
• Building Check Boxes is pretty much the same
thing.
• <FORM>
<INPUT TYPE="checkbox" NAME="Eva">
</FORM>
christ is lord
FORMS
• Add 3 more, but this time give each one a different
NAME. (Also add in line breaks if you want)
• <FORM>
<INPUT TYPE="checkbox" NAME="Ed">
<BR><INPUT TYPE="checkbox"
NAME=“Rose"><BR>
<INPUT TYPE="checkbox" NAME="Tom">
<BR>
<INPUT TYPE="checkbox" NAME="Bob">
</FORM>
christ is lord
FORMS
• Each Check Box gets the same VALUE.
• <FORM>
<INPUT TYPE="checkbox" NAME="Ed"
VALUE="YES"><BR>
<INPUT TYPE="checkbox" NAME="Rick"
VALUE="YES"><BR>
<INPUT TYPE="checkbox" NAME="Tom"
VALUE="YES"><BR>
<INPUT TYPE="checkbox" NAME="BM"
VALUE="YES">
</FORM>
christ is lord
FORMS
• Note - For Check Boxes the NAME changes
and the VALUE stays the same
• AND
• with Radio Buttons, the VALUE changes but
the NAME stays the same.
christ is lord
FORMS
• We can label each box.
• <FORM>
<INPUT TYPE="checkbox" NAME="Eva"
VALUE="YES">Eva Akello<BR>
<INPUT TYPE="checkbox" NAME=“Joe"
VALUE="YES">Joe Nakato<BR>
VALUE="YES">Tom Babigumira<BR>
<INPUT TYPE="checkbox" NAME="Becky"
VALUE="YES">Becky Namale
</FORM>
christ is lord
FORMS
• You can add something on top of the buttons
• FORM>Which of these students are your friends?
<BR>
<INPUT TYPE="checkbox" NAME="Eva"
VALUE="YES" CHECKED>Eva Akello<BR>
<INPUT TYPE="checkbox" NAME=“Joe"
VALUE="YES" CHECKED>Tom
Babigumira<BR>
<INPUT TYPE="checkbox" NAME="Becky"
VALUE="YES">Becky Namale</FORM>
christ is lord
FORMS
• The user can choose 1, 2, none or all of the options.
Their choices will be returned to you as the
name/value pairs...
• Eva=YES
Tom=YES
• (or whatever they choose... if they choose nothing,
nothing will be returned to you)
• Suppose you want to ask 3 different questions about
the same group of students.
christ is lord
FORMS
• <FORM>
<TABLE BORDER=1><TR><TD WIDTH=33%>
Which of these guys are your friends?<BR>
<INPUT TYPE="checkbox" NAME="Friend?..Eva"
VALUE="YES">Eva Akello<BR>
<INPUT TYPE="checkbox" NAME="Friend?..Joe"
<INPUT TYPE="checkbox" NAME="Friend?..Tom"
VALUE="YES">Tom Babigumira<BR><INPUT
TYPE="checkbox" NAME="Friend?..Becky"
VALUE="YES">Becky
christ is lord
FORMS
• </TD><TD WIDTH=33%>Which of these guys would
you lend money to?<BR>
<INPUT TYPE="checkbox" NAME="Lend
money?..Eva" VALUE="YES">Eva
Akello<BR><INPUT TYPE="checkbox" NAME="Lend
money?..Joe" VALUE="YES">Joe Nakato<BR>
money?..Tom" VALUE="YES">Tom Babigumira<BR>
money?..Becky" VALUE="YES">Becky Namale
christ is lord
FORMS
• </TD><TD WIDTH=34%>Which of these guys would
you trust with your property?<BR>
<INPUT TYPE="checkbox" NAME=“Entrust
property?..Ed" VALUE="YES">Eva Akello<BR>
<INPUT TYPE="checkbox" NAME=" Entrust
property?..Joe" VALUE="YES">Joe Nakato<BR>
<INPUT TYPE="checkbox" NAME=“Entrust
property?..Tom" VALUE="YES">Tom
Babigumira<BR><INPUT TYPE="checkbox"
NAME=“Entrust property?..Becky"
VALUE="YES">Becky Namale</TD></TR>
</TABLE></FORM>
christ is lord
FORMS
• After checking some options, something similar to the

following name/value pairs will be sent.
• Friend?..Eva=YES
Friend?.. Joe=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...Becky=YES
Entrust property?...Eva=YES
Entrust property?...Tom=YES
Entrust property?...Becky=YES
christ is lord
FORMS
• You can also use images instead of words in a form
e.g for presidential candidates, we can create a form
containing pictures on candidates below which we
put buttons.
• As a matter of fact, you can use just about anything in
a form or a form in anything.
• Just watch your html syntax and avoid overlapping
tags.
christ is lord
FORMS
• The next type of input is a Pull Down List. With this
type you use <SELECT> instead of <INPUT> and it
has a closing tag. Let's make one.
• <FORM>
<SELECT>
</SELECT>
</FORM>
• Try it and see the result.
christ is lord
FORMS
• Don't forget to give it a name.
• <FORM>
<SELECT NAME="BEST FRIEND">
</SELECT>
</FORM>
• Next add a few options.
• <FORM> <SELECT NAME="BEST FRIEND">
<OPTION>Eva<OPTION>Joe<OPTION>Tom<O
PTION>Becky</SELECT>
</FORM>
christ is lord
FORMS
• And give each <OPTION> a VALUE.
• <FORM>
<OPTION VALUE="Eva">Eva
<OPTION VALUE=“Joe">Joe
<OPTION VALUE="TOM">Tom
<OPTION VALUE=“Becky">Becky
</SELECT>
</FORM>
• The default option is the one that is listed first.
christ is lord
FORMS
• We can specify a default other than the first option in
the list.
• <FORM>
<OPTION VALUE="TOM" SELECTED>Tom
</SELECT>
</FORM>
christ is lord
FORMS
• A Scrolling List is very similar in construction to a Pull
Down List. Let's add a few more names first.
• <FORM>
<OPTION VALUE="Tom">Tom
<OPTION VALUE="HORACE">Horace
<OPTION VALUE="REGGIE">Reggie
<OPTION VALUE="MYRON">Myron
</SELECT></FORM>
christ is lord
FORMS
• To turn it into a Scrolling List, we add a SIZE
attribute to the <SELECT> tag.
• <FORM>
<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="ED">Eva
<OPTION VALUE="TOM">Tom
</SELECT></FORM>
christ is lord
FORMS
• The SIZE is simply how many options show in
the window.
• Again, the default value is the first
<OPTION>, and again we can change that by
selecting one.
christ is lord
FORMS
• <FORM>
<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="TOM" SELECTED>Tom
</SELECT>
</FORM>
christ is lord
FORMS
• A very useful type of input is <TEXTAREA>.
• <FORM>
<TEXTAREA NAME="COMMENTS">
</TEXTAREA>
</FORM>
• Try and see how it looks like.
christ is lord
FORMS
• You control the size of the box like so...
• <FORM>
<TEXTAREA NAME="COMMENTS"
ROWS=6 COLS=50>
</TEXTAREA>
</FORM>
• ROWS is the height, COLS is the width.
christ is lord
FORMS
• A good attribute to include in <TEXTAREA> is
WRAP.
• Some browsers do not understand it, but if that's
the case, they will just ignore it.
• <FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3
COLS=30 WRAP="soft">
</TEXTAREA></FORM>
• WRAP="soft" means that the text in the box
wraps, but it is sent as one long continuous string.
christ is lord
FORMS
• <FORM>
<TEXTAREA NAME="COMMENTS"
ROWS=3 COLS=30 WRAP="hard">
</TEXTAREA>
</FORM>
• WRAP="hard" means that the text in the box
wraps, and it is sent that way too.
christ is lord
FORMS
• <FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3
COLS=30 WRAP="off">
</TEXTAREA>
</FORM>
• This is normally the default.
WRAP="off" means that the text in the box does not
wrap, although it is sent exactly the way it was typed
in.
christ is lord
FORMS
• Yet another type of input is HIDDEN input.
• <INPUT TYPE="hidden"
NAME="LOCATION" VALUE="USA
Form">
• A HIDDEN input is a name/value pair that is
returned to you but does not show up
anywhere on the web page.
christ is lord
FORMS
• An occasionally useful input is the File Upload
input. With it your visitors can send you a file
right off their hard drive.
• <FORM>
<INPUT TYPE=FILE NAME="myfile">
</FORM>
• N.B. Some browsers do not support this kind
of input.
christ is lord
FORMS
• The SUBMIT and RESET buttons.
• <FORM>
<INPUT TYPE="submit">
</FORM>
• SUBMIT of course, sends the data...
• Try it and see
• RESET, clears the form.
• <FORM><INPUT TYPE="reset"></FORM>
• Try it also
christ is lord
FORMS
• We can easily change what the buttons say.
• <FORM>
<INPUT TYPE="submit" VALUE="Send it away data!">
<INPUT TYPE="reset" VALUE="Clear the form
Norm!">
</FORM>
• Try it out
• If necessary, the SUBMIT button can also have a NAME.
You would need this if, for whatever reason, you had
more than one SUBMIT button.
christ is lord
FORMS
• Can we use an image for a Submit button?
• <FORM>
<INPUT TYPE="image" SRC="submit.gif">
</FORM>
christ is lord
FORMS
• Add WIDTH & HEIGHT so your browser can load

your page quickly and efficiently.
• Add an ALT attribute so if someone is running without
images they can still submit your form.
• And add BORDER=0 if you want the little link colored
box to go away.
• <FORM><INPUT TYPE="image"
SRC="images/submit.gif" WIDTH=94 HEIGHT=26
BORDER=0 ALT="Submit"></FORM>
christ is lord
FORMS
• Note that the INPUT TYPE="image" is, by default, a
Submit button only. You can't make a Reset image
button.
• Can I make a simple button that just takes the user to
another page?
• <FORM ACTION="../tables/index.html">
<INPUT TYPE="submit" VALUE=“My new page">
</FORM>
• Try it
christ is lord
Frames
christ is lord
Frames
• The basic concept goes like this: Each frame is a
regular, complete html document.
• If you wanted to divide your page into 2 side by
side frames, then you would put one complete
html document in the left frame and another
complete html document in the right frame
• If you need to write a third html document. This
MASTER PAGE contains the <FRAME> tags that
specify what goes where. As a matter of fact,
that's about its only function.
christ is lord
Frames
• There are only two main frame tags:
<FRAMESET> and <FRAME>.

Note: only used in html 4
• In html 5 use <iframe> tag
• Using them will clearly tell what they are
other than explaining them here.
christ is lord
Frames
• We shall use html files so we should create and
name them.
• <HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
This is to use for trying.
</BODY>
</HTML>
Call this file “Start"
christ is lord
Frames
• Create another one and call it yoga.html
• <HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>Another page here</BODY>
</HTML>
• Save the two in the same folder.
christ is lord
Frames
• Create other four and give them names. Noe you
have 6 independent files in one folder.
• Now create your master gage by starting with this.
• <HTML>
<HEAD>
<TITLE>My Framz Page- The Master
Page</TITLE>
</HEAD> <BODY></BODY> </HTML>
christ is lord
Frames
• Remove the <BODY> tags. The master page doesn't
use them!
• <HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page
</TITLE>
</HEAD>
</HTML>
christ is lord
Frames
• We use <FRAMESET> tags instead.
• <HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page
</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
christ is lord
Frames
• To keep things a little cleaner, I'm going to stop
writing the <HTML>, <HEAD> and <TITLE> tags.
• Needless to say, keep them in your document.
• <FRAMESET>
</FRAMESET>
• Now's a good time to save it. Save it in your folder
• Opening it now will show a blank page. All you
have said so far is "This is my Master Page".
christ is lord
Frames
• Tell the browser to split the main window into
2 columns, each occupying 50% of the
window.
• <FRAMESET COLS="50%,50%">
</FRAMESET>
• This will still be blank, we have one more thing
to do before our 'system is operational'.
christ is lord
Frames
• We must tell the browser what to put in each
frame.
<FRAME SRC=“Start.html">
<FRAME SRC=“yoga.html">
</FRAMESET>
• Note that <FRAMESET> is a container tag, and
<FRAME> is not.
• A container tag has an opening <TAG> and a
closing </TAG>.
christ is lord
Frames
• The <FRAMESET> tag does all the dividing.
That's all it does... divide up windows.
• It specifies a few things regarding how to
divide them up, but remember, whenever you
want to do some dividing - use <FRAMESET>.
christ is lord
Frames
• Can we divide it into more than 2 pieces? Yes, just
make sure that you specify a page for each section
or lest the browser gets confused.
• <FRAMESET COLS="20%,20%,20%,20%,20%">
<FRAME SRC=“aminah.html">
<FRAME SRC="tina.html">
<FRAME SRC=“gloria.html">
</FRAMESET>
christ is lord
Frames
• We can make the frames of differents sizes. Just
make sure your arithmetic is correct or the browser
will come up with its own interpretation.
• <FRAMESET COLS="10%,20%,30%,15%,25%">
</FRAMESET>
christ is lord
Frames
• If we specify dividing into ROWS instead of COLS we
get something else entirely.
• <FRAMESET ROWS="10%,20%,30%,15%,25%">
</FRAMESET>
christ is lord
Frames
• Let's go back down to 2 frames, divided equally into
columns.
• <FRAMESET COLS="50%,50%"> <FRAME
SRC=“Start.html">
</FRAMESET>
• We can specify 50 pixels instead of 50%. And, we can
use * instead of a number. The * means whatever is
left over.
christ is lord
Frames
• <FRAMESET COLS="50,*">
<FRAME SRC=“Start.html"> <FRAME
SRC="terri.html">
</FRAMESET>
• A popular frame layout is a narrow directory
window on the left and a larger main window
on the right
christ is lord
Frames
• If you divide up the windows using percentages
(such as <FRAMESET COLS="15%,85%">) everything
will probably look just good to you. But... to
someone with a different screen resolution it might
look different.
• The reason this happens is because you have
specified that the left window should be 15%. 15%
of what? 15% of whatever their horizontal screen
resolution is. That means that that left window
might look a little different to different people.
christ is lord
Frames
• To fix that problem, just use an absolute
dimension for the left window and make the right
window elastic (such as <FRAMESET
COLS="120,*">).
• N.B 120 pixels.
• We can have more than one leftover frame and
specify a size relationship between them.
• <FRAMESET COLS="50,*,2*">
</FRAMESET>
christ is lord
Frames
• We were going to divide the given frame into
half horizontally.
• <FRAMESET COLS="50,*,2*"> <FRAME
SRC=“Start.html">
<FRAME SRC=“yoga.html"> <FRAMESET
ROWS="50%,50%"> </FRAMESET>
</FRAMESET>
christ is lord
Frames
• We'll put Aminah back in on the top and Tina on the
bottom. And that's that.
• <FRAMESET COLS="50,*,2*"> <FRAME
SRC=“start.html">
<FRAMESET ROWS="50%,50%"> <FRAME
SRC=“aminah.html">
</FRAMESET>
</FRAMESET>
christ is lord
Frames
• We can divide more
• FRAMESET COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
</FRAMESET>
<FRAMESET ROWS="50%,50%"> <FRAME
SRC=“yoga.html">
</FRAMESET></FRAMESET>
christ is lord
Frames
• N.B. It is a good practice not to have more than 3
frames on your page. If you can avoid them
altogether, that's even better.
• We can put pictures in the frames if we want to.
Save the picture into your working folder as
world.gif.
<FRAME SRC="world.gif" WIDTH=146
HEIGHT=162>
</FRAMESET>
christ is lord
Frames
• Remember it is always good practice to include
HEIGHT & WIDTH attributes for any image tag.
• Let's try to frame the picture nice and neat.
HEIGHT=162>
</FRAMESET>
christ is lord
Frames
• Can divide the left frame horizontally into 2
sections. The top section to be 162 pixels high and
the bottom section to be whatever is left over. We
will put in world.gif and aminah respectively.
<FRAMESET ROWS="162,*">
HEIGHT=162>
<FRAME SRC=“aminah.html"> </FRAMESET>
</FRAMESET>
christ is lord
Frames
• The scrollbars that you see can be specified as
YES, NO or AUTO.
• YES means the window gets scrollbars - whether
they're needed or not.
• NO means there will be no scrollbars, even if your
frame contents are big the browser will simply
display as much as it can.
• AUTO is the default. If scrollbars are needed, they
appear, if they are not needed they stay
conveniently out of the way. Let's get rid of our
scrollbars.
christ is lord
Frames
• <FRAMESET COLS="146,*"> <FRAMESET
ROWS="162,*"> <FRAME SRC="world.gif"
WIDTH=146 HEIGHT=162 SCROLLING=NO>
<FRAME SRC=“aminah.html"> </FRAMESET>
</FRAMESET>
• Keep in mind, that you should be very careful about
turning off the scrollbars.
christ is lord
Frames
• The browser automatically gives each

frame some empty space around its
contents.
• This is normally necessary for asthetics. You
can control the size of these margins by
using MARGINWIDTH and
MARGINHEIGHT.
• They control the left & right and top &
bottom margins respectively
christ is lord
Frames
• We will set them both to 1. (1 is the minimum)
HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
</FRAMESET>
<FRAME SRC=“tina.html">
</FRAMESET>
christ is lord
Frames
• we can change the thickness of the borders.
• <FRAMESET COLS="154,*" BORDER=20>
<FRAME SRC=“yoga.html"> </FRAMESET>
<FRAME SRC=“tina.html"></FRAMESET>
christ is lord
Frames
• We can change the color of the borders.
• <FRAMESET COLS="154,*" BORDER=20
BORDERCOLOR="#FFOOOO"> <FRAMESET
ROWS="170,*"> <FRAME SRC="world.gif"
WIDTH=146 HEIGHT=162 SCROLLING=NO
<FRAME SRC=“tina.html"></FRAMESET>
christ is lord
Frames
• We can turn off borders for individual
<FRAMESET>s with FRAMEBORDER.
• <FRAMESET COLS="154,*" BORDER=20
ROWS="170,*" FRAMEBORDER=NO>
<FRAME SRC="tina.html"></FRAMESET>
christ is lord
Frames
• We can prevent the viewer from resizing a frame
<FRAMESET COLS="154,*" BORDER=20
ROWS="170,*" FRAMEBORDER=NO >
<FRAME SRC=“tina.html" NORESIZE>
</FRAMESET>
christ is lord
Frames
• Let us try to put a banner across the top of the
window
• <HTML><HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET> </HTML>
• This is the master page to be saved as index.html
christ is lord
Frames
• Divide the screen horizontally.
• <HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
</FRAMESET>
</HTML>
christ is lord
Frames
• Next specify banner.html to go in the top frame Also
throw in a <FRAMESET> tag pair because we are
going to divide that bottom portion further.
• <HTML><HEAD><TITLE>A Practice
Page</TITLE></HEAD> <FRAMESET
ROWS="83,*"> <FRAME SRC="banner.html">
<FRAMESET> </FRAMESET>
</FRAMESET> </HTML>
christ is lord
Frames
• We shall divide the lower frame into 2 and put files
therein.
<FRAMESET COLS="20%,80%"> <FRAME
SRC="directory.html"> <FRAME
SRC="home.html">
</FRAMESET></FRAMESET> </HTML>
christ is lord
Frames
• Our directory will be on the left and pages will load
into the right hand frame, so we name that frame. Its
the only one that will have stuff loaded into it so its
the only one we really need to name.
<FRAMESET COLS="20%,80%"> <FRAME
SRC="home.html" NAME="MAIN-WINDOW">
christ is lord
Frames
• Lets make banner.html. Start with the following and
save it.
• <HTML><HEAD><TITLE>Practice Page-
Banner</TITLE></HEAD><BODY
BGCOLOR="#0000FF"></BODY></HTML>
• Pop in the image and center it
Banner</TITLE></HEAD><BODY
BGCOLOR="#0000FF"><CENTER><IMG
SRC="framz1.gif" WIDTH=500
HEIGHT=75></CENTER></BODY></HTML>
christ is lord
Frames
• Turn off the scroll bars and get rid of the margins.
ROWS="83,*"> <FRAME SRC="banner.html"
SCROLLING=NO MARGINWIDTH=1
MARGINHEIGHT=1> <FRAMESET
COLS="20%,80%"> <FRAME
SRC="home.html" NAME="MAIN-WINDOW">
christ is lord
Frames
• Now let's make our Directory page. Start with
the following and save it as directory.html.
Directory</TITLE></HEAD><BODY
BGCOLOR="#FFFFFF"></BODY></HTML
>
christ is lord
Frames
• Give it a heading and write in the text of all the links.
BGCOLOR="#FFFFFF"> <H3>Directory
</H3> Home <P>Go here<BR>or there <P>or
visit<BR>Yahoo<BR>Netscape </BODY></HTML>
christ is lord
Frames
• Now add the link information.
BGCOLOR="#FFFFFF"> <H3>Directory</H3> <A
HREF="home.html">Home</A> <P><A
HREF="here.html">Go here</A><BR>or <A
HREF="there.html">there</A> <P>or visit<BR><A
HREF="http://www.yahoo.com/">Yahoo
</A><BR><A HREF="http://home.netscape.com/">
Netscape</A> </BODY></HTML>
christ is lord
Frames
• Save the following as home.html

• <HTML><HEAD><TITLE>A Practice Page-
Home</TITLE></HEAD><BODY
BGCOLOR="#FFFFFF"><H1 ALIGN=center>You
are home.</H1>Welcome to my homepage! This page
should be attractive and easy to navigate because my
teacher has taught me the right way to build Frames!
<P><CENTER>Enjoy your
stay!</CENTER></BODY></HTML>
christ is lord
Frames
• Save this as here.html
Here</TITLE></HEAD><BODY
BGCOLOR="#FFFFFF"><H1
ALIGN=center>Here</H1>Welcome to here. Here is
where everything happens. Here you'll find more neat
stuff than you can shake a stick
at.</BODY></HTML>
christ is lord
Frames
• And of course this one as there.html.

There</TITLE></HEAD><BODY
BGCOLOR="#FFFFFF"><H1 ALIGN=center>This
is There</H1>I would like to make a proposal. We
have all seen that little arrow on signs that say"You
are here". Wouldn't it be better if there were also
another arrow that says "Youshould be there". It
would make things so much
easier.</BODY></HTML>
christ is lord
Frames
• So open up directory.html and add the necessary
TARGETS.
BGCOLOR="#FFFFFF"> <H3>Directory</H3> <A
HREF="home.html" TARGET="MAIN-
WINDOW">Home</A> <P><A HREF="here.html"
TARGET="MAIN- ><A HREF="there.html"
TARGET="MAIN-WINDOW">or there</A> <P>or
visit<BR><A HREF="http://www.yahoo.com/"
WINDOW">
christ is lord
Frames
Go here</A><BRTARGET="_top">
Yahoo</A><BR>
<A HREF="http://home.netscape.com/"
TARGET="_top">Netscape</A>
</BODY>
</HTML>
christ is lord

HTML Intro

Uploaded by

Copyright:

Available Formats

HTML Intro

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Intro

Uploaded by

Copyright:

Available Formats

Introduction to Website Design

• Web pages are displayed using a program called

Protocol Domain name Directory Filename

• Website Construction, or Web programming,

</HTML> Each one of those is called a tag. There

• File then Save As.

• You can specify a background image instead. (Note,

• Something really cool

• <THIS><THAT></THAT></THIS> Nested tags.... good

• can change the font size too

• <BODY>Something really <FONT

• Missing or misplacing quotation marks or a missing

• You can change the font color if you like.

• It doesn't matter which tag is first. It's not like if you

• A useful heading attribute is ALIGN... fairly self-

• You can change these defaults for the entire

• Although we used a closing tag (</P>), it is

[Output: Something really cool]

This is an ordered list An unordered list

• <BODY> <HR> </BODY>

• After checking some options, something similar to the

• Add WIDTH & HEIGHT so your browser can load

<FRAMESET> and <FRAME>.

• The browser automatically gives each

• Save the following as home.html

• And of course this one as there.html.

You might also like