Hypertext Markup Language is a markup

language that lets people create onscreen

documents for the Internet that can easily be
linked by words and pictures to other documents.
HTML documents are plain text (also known as
ASCII, pronounced AS-KEY) files that can be
created using any text editor (e.g. Notepad).
It is also a type of code that embeds simple
commands within standard ASCII text documents
to provide an integrated, two-dimensional display
of text and graphics. In other words, a
document created in any word processor and
stored in ASCII format can become a web page
with the addition of a few HTML commands.

HTML was invented by Tim Berners-Lee while at

CERN, the European Laboratory for Particle
Physics in Geneva.
Hypertext as implemented by the CERN group
involves jumping from one document to
another on computers scattered all over the
world.
Hypertext links enable you to display another
web document on your current screen. One
document may contain links to many other
related documents. The related documents
may be on the same server as the first
document, or they may be on a computer
halfway around the world. A link may be a
word, a group of words or a picture.

Internet
The Internet, sometimes called simply "the
Net," is a worldwide system of computer
networks - a network of networks in which
users at any one computer can, if they
have permission, get information from any
other computer (and sometimes talk
directly to users at other computers).

Also called the Web

A worldwide collection of electronic documents

Each electronic document is called a Web page

Can contain text, graphics, audio, video, and built-in connections

A Web site is a collection of related Web pages

 HTML

Short for HyperText Markup Language,

the authoring language used to create
documents on the World Wide Web.
HTML is similar to SGML (Standard
Generalized
Markup
Language),
although it is not a strict subset.

Hypertext

Hypertext links enable you to display another web

document on your current screen.
In most Web sites, certain words or phrases
appear in text of a different color than the rest;
often this text is also underlined. When you select
one of these words or phrases, you will be
transferred to the site or page that is relevant to
this word or phrase.
Sometimes there are buttons, images, or portions
of images that are "clickable." If you move the
sparrow over a spot on a Web site and the
sparrow changes into a hand, this indicates that
you can click and be transferred to another site.

What is a Web browser?

Program that allows you to view Web pages

Microsoft
Internet
Explorer

Opera

Firefox
Netscape

Safari

How

does a Web browser display a home

page?
Step 2.
Web browser
looks up the home
page setting

Step 3.

Step 1.
Click the Web browser
program name

Step 4.
The home page
displays in the Web
browser

The Web browser

communicates with the
access providers
server to retrieve the
IP address. The IP
address is sent to your
computer.

What is a home page?

What is downloading?

The process of a computer receiving information

Depending upon connection speed, downloading can
take from a few seconds to several minutes

What is tabbed browsing?

p. 55

The first page that a Web site displays

Often provides connections to other Web pages

The top of the browser displays a tab for each Web

page you open

What is a URL?

Unique address for a

Web page
A web server delivers
the Web page to your
computer

p. 56 Fig. 2-6

What is a hyperlink (link)?

Built-in connection to another

related Web page

p. 57

Item found elsewhere

on same Web page
Different Web page
at same Web site
Web page at a
different Web site

HTML documents are structured into two parts,

the HEAD, and the BODY. Both of these are
contained within the HTML element -- this
element simply denotes this as an HTML
document.

The head contains information about the

document that is not generally displayed with
the document, such as its TITLE. The BODY
contains the body of the text, and is where
you place the document material to be
displayed. Elements allowed inside the HEAD,
such as TITLE, are not allowed inside the BODY,
and vice versa.

<HTML>
<HEAD>
<TITLE> Environmental Change Project </TITLE>
</HEAD>
<BODY>
<h1> Environmental Change Project </h1>

Welcome to the home page of the Environmental

Change Project. This project is different from other
projects with similar names. In our case we actually
wish to change the climate. For example, we would
like hot beaches in Northern Quebec, and deserts
near Chicago.
</BODY>
</HTML>

Beginning and Ending Tags

Most HTML tags consist of a beginning tag and an

ending tag. For example:
<HTML> </HTML>

Beginning and Ending Tags

Notice the / in the second tag. All ending tags contain a /.

This slash is very important, it tells the browser that what you
wanted done has ended. At the top of every HTML
document before anything has been typed, put:
<HTML>
This signifies the start of your HTML document. At the end of
your HTML document after everything has been typed, put:
</HTML>
This signifies the end of your HTML document. Notice the / in
the second tag, always remember to put the / in the end
tag, otherwise your page will not turn out right.

Beginning and Ending Tags

Under <HTML> comes this tag:

<HEAD> </HEAD>

This indicate the body of the HTML documents

Then we start the body of the document

<BODY> </BODY>

Beginning and Ending Tags

Below <HEAD> put this tag:

<TITLE>

Beside it type the name of your web page, for instance

"Practice Page". At the end of "Practice Page" type this:
</TITLE>
Remember the / in the end tag? So this is what it looks like:

<TITLE>Practice Page</TITLE>
The <TITLE> tags designate what will appear in the title bar at
the top of the browser.

<HTML>
<HEAD>
<TITLE> Environmental Change Project </TITLE>
</HEAD>
<BODY>
Welcome to the home page of the Environmental
Change Project. This project is different from other
projects with similar names. In our case we actually
wish to change the climate. For example, we would
like hot beaches in Northern Quebec, and deserts
near Chicago.

</BODY>
</HTML>

 Headings

are important in HTML

documents.
Headings are defined with the
<h1> to <h6> tags.
<h1> defines the largest heading.
<h6>
defines
the
smallest
heading.

Headings Are Important

Use the HTML heading tags for headings only.

Don't use headings to make something BIG or
bold.

Search engines use your headings to index the

structure and content of your web pages.

Since users may skim your pages by its headings, it

is important to use headings to show the
document structure.

H1 headings should be used as main headings,

followed by H2 headings, and less important H3
headings, and so on.

A heading is no good if it does not have

anything under it so let us put something
down. To make a paragraph, start typing the
text you want to appear on your web page.
At the point where you want the paragraph
to end put:

<P>

This is a single tag requiring no end tag,

although at times it can be used as a
beginning tag and an end tag but never
mind about that now. The "P" stands for, you
guessed it, paragraph. It makes the text that
follow skip down two lines. Here is how it is
used in our HTML example:

Example :

<HTML>
<HEAD>
<TITLE>Practice Page </TITLE>
</HEAD>
<BODY>
< CENTER > <H1> HTML is Easy To Learn </H1> </CENTER>
<H3> Step One </H3>
The key in learning HTML is practice. I know you all can do
it <P> So, let us give a try.
</BODY>
</HTML>

Hitting the "Enter" key will have no effect on

your web page. If you want to start a new line
in a certain place within a paragraph, you
need to use this tag:
<BR>
It means "break". It is a single tag requiring no
end tag and acts like the <P> tag except it
skips one line instead of two. You do not need
to use it at the end of each sentence in a
paragraph, just use it if you want to start a
new line in a particular place within a
paragraph. Example:

 Example:

The key in learning HTML is

practice.<BR> I know you can all
do it.<P>So let us give a try.

 To

make a word or several words

bold like this, use these tags:
<B> </B>
The text that you want bold is
enclosed between these tags like
this:
Only one word here will be bold.
<B> Guess </B>which one?

How about an underlined word like

this? Use these tags:
<U> </U>

What about italicized words? No

problem, this is what to use:
<I> </I>

You can use any or all combinations of

these tags depending on the effect
you want to have on your text:

You can use any or all

combinations of these tags
depending on the effect you
want to have on your text:

Example:
The<I>key</I>in learning to make
web pages is
<B><U><I>practice.</I></U></B>

Telling Tags What To Do

You

probably noticed that the

text on your web page is very
small. We are about to change
that with a new tag:
<FONT> </FONT>

Telling Tags What To Do

Inside this tag we are going to put

what is called an attribute. Attributes
tell tags how or where they are to
display the stuff that is between them.
To change the size of text we will use
the SIZE attribute inside the FONT tag
like this:
<FONT SIZE="+3">practice</FONT>

Color

Another attribute that can be used with the FONT

tag is COLOR:
<FONT COLOR="#FF0000">practice</FONT>
"#FF0000" is the code for red. Notice the # in front
of the code; do not forget to include it inside the
quotes. You can use the name of the color
instead but it's better to use the code since some
older browsers will not understand color names. A
list of color codes and their names can be found
at the end of Unit 3.
http://www.w3schools.com/tags/ref_colornames.asp

Style

To change The style of text add the FACE attribute to the

FONT tag:
<FONT FACE="arial">practice</FONT>

Keep in mind that the style of font the viewers of your web
page see depends on the style fonts they have installed on
their computer. If they do not have the style you are using
for your web page, they will get the default setting of their
browser.

You can use any combination or all attributes in the font tag
like this:

<FONT SIZE="+6" COLOR="red" FACE="arial">practice</FONT>

 HTML

supports unnumbered,
numbered and definition lists. You
can nest lists too, but remember
to use this feature sparingly
because too many nested items
can get difficult to follow.

Unnumbered Lists

To make an unnumbered or bulleted list, start

with an opening list <UL> (for unnumbered list)
tag. Enter the <LI> (list item) tag followed by
the individual item; and no closing tag is
needed. End the entire list with a closing list
</UL> tag. Below is an example of a threeitem list:
My hobbies include:
<UL>
<LI> Reading
<LI> Swimming
<LI> Traveling
</UL>

Unnumbered Lists
Result:
My hobbies include:
Reading
Swimming
Traveling

Numbered Lists

A numbered list (also called an ordered list,

from which the tag name derives) is identical
to an unnumbered list, except it uses <OL>
instead of <UL>. The items are tagged using
the same <LI> tag. Below is an example of
this:
My hobbies include:
<OL>
<LI> Reading
<LI> Swimming
<LI> Traveling
</OL>

Numbered Lists
Result:
1. Reading
2. Swimming
3. Traveling

Definition Lists

A definition list (coded as <DL>) usually consists of

alternating a definition term (coded as <DT>) and a
definition definition (coded as <DD>). Web browsers
generally format the definition on a new line.

The following is an example of a definition list:

<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing
Applications, is located on the campus of the University of
Illinois at Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in
Ithaca, New York.
</DL>

Definition Lists
Result:
NCSA
NCSA, the National Center for
Supercomputing Applications, is located
on the campus of the University of Illinois
at Urbana-Champaign.

Cornell Theory Center

CTC is located on the campus of Cornell
University in Ithaca, New York.

Definition Lists

The <DT> and <DD> entries can contain multiple

paragraphs, each containing a nested list, in a single list
item. Here is a sample nested list:

<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Michigan
<LI> Indiana
</UL>

Definition Lists
Result:
A few New England states:
Vermont

New Hampshire
Maine

Michigan
Indiana

A Line across The Page

Let me introduce you to another single
tag (Single tags do not need end tags):
<HR>

It means "horizontal reference" and this

is what it does:

So how is it done? By using the WIDTH

attribute in the <HR> tag like this:
<HR WIDTH="50%">

Increase or decrease the percentage

to get the length you want. Having no
attribute in the <HR> tag will make the
line go right across the page.

The tag for putting a picture on your web

page is:
<IMG SRC="graphicfilename.gif">

It is a single tag, requiring no end tag. The

IMG means "image" and SRC means
"source". SRC is an attribute of IMG, it tells
the browser where to find the graphic. The
stuff in the quotation marks is the file name
of your graphic.

Do Not Forget Format

The majority of graphic formats supported

on the web are either in gif or jpg format.

When putting your graphic name in the

IMG SRC tag always include the format it is
in and always enclose it in quotation
marks. Example:"button.gif" Note the dot
between the name and format and that
there are no spaces. This is very important,
so do not forget.

Putting Your Files In The Same Place

Put your graphics in the same folder

(directory) as the HTML file, for instance if
you keep your HTML document in a folder
called "my pages", keep your pictures in
that folder too otherwise they won't show
up on your web page because the
browser will not be able to find them.

The same thing goes with other web pages

that are linked together; keep them in the
same place.

Each Graphic Has Its Own IMG SRC

Each graphic you want to put on a
page will have its own IMG SRC tag:

Result:

<IMG SRC="button.gif"> <IMG RC="button2.gif">

Result:

To put the graphics further apart from

each other add this: &nbsp; between
the two tags:

<IMG SRC="button.gif">&nbsp;<IMG
SRC="button2.gif">

Result

Result:

See the little space between the buttons?

This is what &nbsp; (non-breaking space)
does. It is a space equivalent to one
character or letter. The more you use the
wider the space will be. You can also use it
to indent your sentences or for a larger
space between words or letters.

To put a graphic on a new line use

either the <BR> or <P> tags:

<IMG SRC="button.gif"> <P>

<IMG SRC="button2.gif">

Result:

BACKGROUND is an attribute which

goes in the beginning <BODY> tag.

If all you want is to change the color of

the web page use the BGCOLOR
attribute in the BODY tag:

<BODY BGCOLOR="#00FFFF">

To add a textured background on your

web page you will need background
wallpaper which is actually a graphic
repeated over and over until the screen is
filled. There are a lot of places on the web
where you can get backgrounds for free.
Now that you have a background this is
how to put it on your page:
<BODY BACKGROUND="graphicname.jpg">

Substitute "graphicname with the file name

of the graphic, do not forget the format or
to enclose it in quotes.

Alignment Text
To

align your text to center, use

the following tag:
<center>

Attributes Alignment

Attributes work the same way in other tags. Remember the

heading tag <H>? You can have it on the right side of your
web page like this by using the ALIGN attribute in the
beginning heading tag:
<H3 ALIGN="right"> your text </H3>

The stuff between the beginning and end tag will be on the
right side of the page. Notice again that the attribute is only
required for the beginning tag. You can also put text to the
right of the page using the ALIGN attribute in the <P> tag,
but this time you will need an end </P> tag:
<P ALIGN="right">practice, practice, practice</P>

Aligning Text With Graphics

If you tried to align a paragraph with a picture

you know how frustrating it can be. After the first
line the text jumps right down and underneath the
picture. To stop that from happening use the
ALIGN attribute in the IMG SRC tag:
<IMG SRC="graphicname.gif" ALIGN="left">

This makes the text flow down the side of the picture.

Example:

<IMG ALIGN="left" SRC="pups.jpg"> <I> See how

the text here is going down the picture?<BR>The
align attribute makes this possible.</I>

Result:
See how the text here is going down the picture?
The align attribute makes this possible.

Example:
<IMG ALIGN="left" SRC="pups.jpg">
<P>&nbsp;</P> <I> See how far down the text
here starts?<BR>The space in the P tags make it
happen. <BR CLEAR="all"> See how this line of text
starts below the picture? The CLEAR attribute did
it. </I>
Result:

See how the text here is going down the picture?

The align attribute makes this possible.

Links, this is what the web is all about and

it's simple to do by using the anchor tags:
<A> </A>

The anchor tag has an attribute: HREF It

means "Hypertext Reference". This attribute
tells the browser where to find the link. A
link on the same website would look like
this:
<A HREF="filename.html">here goes text or
image to be clicked </A>

The beginning <A> tag includes the attribute with

the file name of the web page you want to link to.
Notice that the file name has the HTML extension,
separated by a dot and that it's enclosed in
quotation marks. Keep all your pages in the same
folder (directory) otherwise you would have to
type in the whole path, something like
"foldername/filename.html" So keep it simple.
After the beginning anchor tag put the text or
graphic you want people to click. This becomes
the link to another page. The end </A> finishes the
link. Here's how to turn a graphic into a link:

<A HREF="filename.html"> <IMG SRC="graphicname.jpg"> </A>

Do not forget to put these things: < >

around the IMG tag and remember the
quotes around the graphic file name
together with its format, usually either jpg
or gif.
You now have a graphic that is linked to
another page. By default a linked graphic
has a border around it, you can remove it
by putting a BORDER attribute set to "0" in
the IMG tag:

<IMG SRC="graphicname.gif" BORDER="0">

Linking To Another Site

To link to another website you have to type
in the entire URL (internet address). For
instance to link to this website you would
put:
<A HREF="http://www.yahoo.com">click
here</A>
The beginning <A> tag contains the entire
web address of this site enclosed in quotes.
The stuff between the anchor tags is what
people will click.

Sending Email
For visitors to be able to send you email
from your site, do the same thing but
instead of the web address, put your email
address after mailto: Example:

<A HREF="mailto:web@get-2.com">here
goes stuff to be clicked</A>

There are no spaces between the mailto:

and the email address. See where the
quotation marks are in my example? Do
not forget them.

Tables can be used as page layouts to

help better control the placement of
things on your web page, so it's worth
getting to know how to make one.

First is:

<TABLE> </TABLE>

The stuff between these tags will make up your

table. After the beginning TABLE tag comes:
<TR> </TR>
It means "Table Row" The stuff between them will
make up one row across the table.

After the beginning <TR> tag comes:

<TD> </TD>
It means "Table Data". The stuff between them will
make one box, called a cell, in the one row of the
table.

Example:

<TABLE>
<TR>
</TR>
<TR>
</TR>
</TABLE>

<TD> parrot</TD>
<TD> kingfisher </TD>

<TD> eagle </TD>

<TD> sparrow </TD>

Can you see that this table will have two

rows and that each row will have two
cells? You can have as many rows and
cells as you want but make sure that each
cell and row have an end tag.

Here's the result:

parrot kingfisher
eagle sparrow

That is not a table, where are the lines? So, let us

put borders around it. The beginning <TABLE> tag
has a BORDER attribute:
<TABLE BORDER="1">

The higher the number the thicker the lines will be

and do not forget the quotation marks around the
number.

Result:
parrot
eagle

kingfisher
sparrow

A couple of other attributes that can go into the <TABLE> tag are
CELLSPACING and CELLPADDING.

CELLSPACING defines how far apart the cells are from each other.
Example:
<TABLE BORDER="1" CELLSPACING="5">

CELLPADDING defines how far away from the cells' edges the stuff
inside them will be. Example:
<TABLE BORDER="1" CELLPADDING="5">
You can use any combination of attributes in a <TABLE> tag, just
make sure each attribute is separated by a space (by using the
spacebar on your keyboard).

Aligning Data
By default everything in the cell will be to the left. You can
center it or move it to the right by using the ALIGN attribute
in the <TD> tag:
<TD ALIGN="right"> parrot </TD>

There is also the VALIGN attribute. It makes stuff in the cell

line up at the top or the bottom but there has to be enough
space in the cell for it to work. This can be done by using
the HEIGHT attribute in the <TD> tag:
<TD VALIGN="top" HEIGHT="50">kingfisher</TD>

Aligning Data
By default everything in the cell will be to the left. You can
center it or move it to the right by using the ALIGN attribute
in the <TD> tag:
<TD ALIGN="right"> parrot </TD>
Result:

parrot
eagle

kingfisher
sparrow

Aligning Data
There is also the VALIGN attribute. It makes stuff in the cell
line up at the top or the bottom but there has to be enough
space in the cell for it to work. This can be done by using
the HEIGHT attribute in the <TD> tag:
<TD VALIGN="top" HEIGHT="50">kingfisher</TD>
Result:

parrot
eagle

kingfisher
sparrow

Putting Color In Cells

You can have your cells be a different
color by using the BGCOLOR attribute:
<TD BGCOLOR="#87CEFA">eagle</TD>

parrot
eagle

kingfisher
sparrow

HTML frames allow authors to present

documents in multiple views, which may
be independent windows or subwindows.

Multiple views offer designers a way to

keep certain information visible, while
other views are scrolled or replaced.

For example, within the same window, one

frame might display a static banner, a
second a navigation menu, and a third
the main document that can be scrolled
through or replaced by navigating in the
second frame.

You can see that this page has two

frames, the top frame containing the page
with the title and horizontal navigation bar,
and the bottom frame containing the
page with the sidebar and main section.

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="title.html">
<FRAME SRC="main.html">
</FRAMESET>
</HTML>

You can see that this page has two

frames, the left frame containing the page
with the title and vertical navigation bar,
and the right frame containing the page
with the sidebar and main section.

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="title.html">
<FRAME SRC="main.html">
</FRAMESET>
</HTML>

Next comes the FRAME tag with the

attribute SRC.
The SRC in the IMG tag tells the browser
which graphic is to display on the page.
Well here it's telling the browser which
page is to be displayed in the frame.
In this case the first frame will hold a
page with the file name "title.html" and
the second frame will hold a page with
the file name "main.html".

title.html

main.html

Top frame containing the file title.html.

Bottom frame containing the file
main.html.

side.html

title.html

main.html

Divided the page into two horizontal frames

with the top frame being only 25%.
Then divide each frame into vertical frames. It
is like having frames within a frame.

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAMESET COLS="100%">
<FRAME SRC="title.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="sidebar.html">
<FRAME SRC="main2.html">
</FRAMESET>
</HTML>

If you use a regular link the page will

end up in the frame which contains the
link.

Sometimes that is alright but sometimes

it is not. So you have to give a name to
your frames.

Frame Names
To make the linked page go into a frame
other than the one which contains the link,
you need to name your frames like this:
<FRAME NAME="A" SRC="main.html">

You can name your frame whatever you

want and please note that the file name in
the SRC attribute is NOT the name of the
linked page but of the page that would
normally be there.

Making the link

To make the link, go to the page which
contains the link and in the anchor tags
add the TARGET attribute like this:

<A HREF="practicepage.html"
TARGET="A">your link</A>

"Practicepage" is the page which will end

up in the frame named "A" when the link is
clicked.

Breaking Out of Frames

To break out of frames completely, put
TARGET="_top" in the anchor tags like
this:
<A HREF="index.html" TARGET="_top">

This will free other pages or sites from

being trapped in your frames. Click
anyone of the Units in the sidebar to see
the result.

No Borders
To get rid of borders just put the BORDER
attribute in the FRAMESET tags like so:
<FRAMESET ROWS="35%,65%" BORDER="0">