Html Tutor

Home | HTML | ASP | JAVA | VB | OFFICE 2000 | .NET | C#

HTML
INTRODUCTION TO MARKUP LANGUAGE

What is programming language?

A language is a system of communication. With our natural language such as
English, we communicate to one another our ideas and emotions. Similarly, a
computer language is a means of communication used to communicate between
people and the computer. With the help of a computer language, a programmer
tells a computer what he wants it to do. Unlike natural language, most computer
languages use a very limited or restricted vocabulary. This is mainly because a
programming language by its very nature and purpose does not need to say too
much.

Classification of programming language

Normally programming language can be classified as
a) PROCEDURAL PROGRAMMING LANGUAGE
b) OBJECT ORIENTED PROGRAMMING LANGUAGE

• Procedural programming language
Procedure is nothing but a sequence of statements, which perform some specific
task and it should return some value after performing that function. Some
languages follow or work with procedures like BASIC, PASCAL, and C etc.

• Object oriented programming language
Before discussing the object-oriented approach, first we have to define the
object. For now, we will consider the object to be a package of information
together with the operation that can be performed on that information. In other
words, an object supports data abstraction, and can be considered as an entity,
which encapsulates the object data, and provide the user with a set of predefined
operations to manipulate and access the object data. The object data can only be
accessed by the operations defined on the object. Some programming languages
like C++, Java etc follows this Object Oriented approach and these languages
are called Object Oriented Programming Languages,

What is Markup Language?

A markup language is a set of conventions for the linear encoding of information
structures. There are nonlinear ways to structure information, most notably
relational databases. Database schemas and markup languages do the same
job. They express the structure of data. So a markup language is only useful if
you know what it means.

INTRODUCTION TO HTML

What is html?

Hyper Text Markup Language

HTML stands for Hyper Text Markup Language.
Hyper
Text
Markup
Language

Hyper
You may have heard the expression "hyper" in describing someone. In simplest
terms, it means active, kind of "all over the place". The word "Hyper" as part of
HTML is similar in context. It simply means that when you are on the Internet
using a browser such as Netscape Navigator or Internet Explorer, you can in fact;
go "all over the place". In browsing through the World Wide Web (WWW), if you
see something you like, you can go immediately to it. There is no set order to do
things in. Hyper is the opposite of "linear". Linear means that there is a certain
order you must follow such as "you must do this before you can do that".
Programming languages such as BASIC and FORTRAN are linear. HTML does
not hold to that and allows you to jump to any page on the WWW and at any
time. Thus the word HYPER refers to the idea that the text in HTML is not linear.
Text
We are working with text only files.
Markup
"Markup" comes from the fact that in order to create web pages, we will be typing
in the text and then "marking up" the text.

Language

"Language" means that we are using a language with all its syntax. Note that
HTML is not a programming language such as BASIC or FORTRAN. These are

linear programming languages and are based on a whole different set of rules
and are far more complicated to learn. The HTML language is easy to learn.

History Of HTML

After companies started using computers for document processing, it soon
became obvious that a storage format should contain not only formatting codes
interpreted by computer itself, but also descriptive, human-legible information
about the nature and role of every element in a document.

The first working system that used these concepts was the Generalized Markup
Language (GML) developed by Charles Goldfarb, Edward Mosher, and Raymond
Lorie at IBM. This system was the direct predecessor of SGML.

SGML stands for Standard Generalized Markup Language. SGML is a general-
purpose tool for developing documents of any kind. It originated in the 1960s. It
was developed to overcome problems while moving documents across hardware
platforms and operating systems. As SGML is used for defining and creating
descriptive markup languages and hence it is known as Metalanguage. SGML is
platform independent, requiring only a computer and the appropriate software to
analyze the documents to make sense of the data. Before HTML, a document’s
author didn’t have to care how the document would appear on someone’s
monitor.

Different versions of HTML

HTML Level 0
HTML was at level 0 in its first implementation in 1990. At that time, the means of
communication over the Internet included email, Ftp (File Transfer Protocol), and
Telnet, all using TCP/IP (Transmission Control Protocol/Internet Protocol).
Berners-Lee & his colleagues used SGML to implement HTML.

HTML 1.0
The original version of HTML was HTML 1.0. It had very limited features, which
greatly limited what you could do in designing your web pages.

HTML+ & the advent of graphics
Dave Raggett proposed another extension of HTML called HTML+, which
incorporated graphical & display elements into HTML. For that reason HTML+
was able to advantage of graphics based browsers.

HTML 2.0
HTML 2.0 then arrived and included all the features of HTML 1.0 plus several
new features for web page design. Until January 1997, HTML 2.0 was the
standard in web page design.
HTML 3.0
HTML 2.0 served its purpose very well, but many people designing web pages
(called HTML authors or webmasters) wanted more control over their web pages
and more ways to mark up their text and enhance the appearance of their
websites. Netscape, the leading browser at that time, introduced new tags and
attributes called the Netscape Extension Tags. Other browsers tried to
duplicate them but Netscape did not fully specify their new tags and so these
extension tags did not work in most other browsers. It led to considerable
confusion and problems when HTML authors used these tags and attributes and
then saw that they didn't work as expected in other browsers. At about that time,
an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft,
which included many new and useful enhancements to HTML. However, most
browsers only implemented a few elements from this draft. The phrase "HTML
3.0 enhanced" quickly became popular on the web but it more often than not
referred to documents containing browser specific tags (discussed below in "The
Netscape Problem" section), instead of referring to documents adhering to the
HTML 3.0 draft. This was one of the reasons why the draft was abandoned.
HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it
was because it was so "big". Future versions were now to be introduced in a
more "modular" way so that browsers can implement them modular-by-modular
or bit-by-bit.

HTML 3.2 (WILBUR)
As more browser-specific tags were introduced, it became obvious that a new
standard was needed. For this reason, the Word Wide Web Consortium (W3C),
founded in 1994 to develop common standards for the evolution of the WWW,
drafted the WILBUR standard, which later became known as HTML 3.2. HTML
3.2 captures the recommended practice as of early 1996 and became the official
standard in January 1997. Most, if not all, popular browsers in use today fully
support HTML 3.2.

HTML 4.0 (COUGAR)
HTML 4.0 is the current version of HTML. In the early days it was code-named
COUGAR. This version introduces new functionality, most of which comes from
the expired HTML 3.0 drafts. This version became a recommendation in
December 1997 and is now the official standard as of April 1998. Explorer has
done a very good job in implementing the many features of HTML 4.0.
Unfortunately, Netscape has not kept pace. The latest version of Netscape
Communicator still does not recognize the many tags and attributes introduced
with HTML 4.0. This means that a web page that involves HTML 4.0 specific tags
will look great in Explorer, but can look disastrous in Netscape.

Why we use HTML?

HTML allows the assignment of characteristics of text, such as font size, style
and type. It also allows the creation of new structural elements such as objects
and the definition of characteristics of those objects.

• LANGUAGE is COMMON
HTML was meant to be a common language that could be used to tie together
information from widely different sources.

• SIMPLE
HTML was meant to be simple for both HTML authors and programmers to
use.

• PLATFORM INDEPENDENCE
It is popular for its platform independence.

HTML follows the general philosophy of the web, which is to “be conservative in
what is produced and liberal in what is accepted”. This means that the servers try
to maximize the correctness and conformance of the HTML output and the Web
browsers strive to make sense out of what the server sends.

Uniform Resource Locator (URL)

Uniform Resource Locator (URL) is the primary naming scheme, which is used to
identify Web resources that can either be HTML, documents or other services
present in the Web. These Web resources are identified with special names
called Uniform Resource Identifier (URI). The URL is the standard method used
to identify any resource. Mostly it consists of Service, Hostname and Directory
path.
Service:// hostname: port/directory-path
Service indicates the name of the protocol used to access data present on the
other end of the link.
Hostname indicates the domain name for the web server where the web page
resides. In most cases specification of the port address is not required as the
servers themselves have a default port address.
Directory-path specifies the name of the HTML file.

World Wide Web (WWW)

The World Wide Web is a vast amorphous blob of text, images, audio and video
scattered across networks and computers worldwide. Hence the name World
Wide Web has came. It is shortly referred to as “Web” or “W3”. It is a software

invention, which aids users to explore the Internet facility. World Wide Web is a
part of the Internet comprising of Web pages and Web sites.
Web is a collection of files known as Web pages. These Web pages can contain
hyperlinks to link other Web pages. A hyperlink can be any text or image which
when clicked would display another web page. There may be one or more pages
in the Home page, which is the initial Web page present in a Web site.

Browsers

A Web browser is a special type of parsing engine that evaluates the tags and
content of an HTML file and displays it according to the capabilities and rules of
the file’s own capabilities and platform. For example-a text-only browser displays
the alternative text for an image, but a graphical browser displays the actual
image. The major browser used to surf the Internet is, Microsoft Internet Explorer
and another browser, which is the product of Sun Micro system is Netscape
Navigator.
Hardware Requirement

MINIMUM PREFERRED

a) 286PC a) 133 MHz Pentium PC

b) 16MB of RAM b) 32 MB of RAM

c) 500-MB Hard Disk c) 1.2 GB Hard Disk

Software Requirement

• • Microsoft Windows 95 (Standard Installation),
Windows NT, Unix, Linux etc.
• • Microsoft Internet Explorer 3.0 or higher.
• • Netscape Navigator 3.0 or higher.
• • Internet Connection (optional, it is applicable for live project)

What do I need to begin designing a Home Page?
• • You need a directory (also called a FOLDER)
You should set up a directory or folder to hold only your HTML files (also called
documents) for the web pages you are designing. Work in that directory only. If
you are doing all these lessons, you may also wish to set up a separate directory
to hold all the examples for testing in your browser. You need some place to put
your work.

• • You do not need to have your modem connected
You do not need to be connected by modem to your server. You can write and
design your HTML pages off-line. If all you are doing is designing web pages, you
have no need to go on the Internet. Besides, if you are paying by the hour, you
don't want to pay any more than you have to. Also, if you have only one
telephone line to your house and you are connected by phone, there is no need
to tie up the line for hours at a time. How do you disconnect the modem? Well, in
most cases, when you load the browser, a little window opens up to dial the
server. Simply click CANCEL, and choose to work off-line. If you are using an old
version of a browser and this method doesn't work, you may need to call on
someone to help you. So remember, you do not need to be connected by modem
to design your web pages.

• • You need a browser
Netscape Navigator (also called Netscape Communicator) and Internet Explorer
are among today's most popular browsers and there are different versions of
each of these. Netscape, as of version 4.0, is called Netscape Communicator.
Before version 4.0, it was called Netscape Navigator. There are other browsers
also but they are not nearly as popular as Netscape and Explorer. Most likely you
already have a browser or you wouldn't be reading this.

• • You need a word processor
You need a word processor such as WordPerfect or Microsoft Word or Microsoft
Works. Better use NOTEPAD, which can be found in the ACCESSORIES
directory (also know as the ACCESSORIES "GROUP"). In Windows 95, for
example, NOTEPAD is found by choosing
"START"à"PROGRAMS"à"ACCESSORIES"à”NOTEPAD”.
Notepad is a simple "text editor" that loads almost instantly. A text editor is a very
simple word processor. NOTEPAD also quickly loads any file and quickly saves
the file. As we will see later in this lesson, there are other reasons as well for
using a text editor such as NOTEPAD.
Sometimes a web page can become so big that it will no longer fit into
NOTEPAD. In this case, you will need to switch to another text editor or to your
word processor to complete the page.

In summary, you basically:

1. 1. Do your work in a text editor such as NOTEPAD (typing in all the text
and tags)

2. 2. Save your work in an HTML file using any appropriate name
3. 3. Load the HTML file into the browser to see how your web page looks
and works
4. 4. Switch back to NOTEPAD to make any corrections, changes, etc.

Naming your text only file
You need to give your file (that is, your web page) a name. You not only have to
give it a name but you also need to add a suffix to the name.
THE NAME: If you are using an IBM or IBM compatible computer and not
running Windows 95 or higher, your file name is limited to a maximum of 8
characters. Otherwise the name can be longer.
THE SUFFIX: The suffix is an extension to the name and declares the kind of
document that it is. In HTML, the suffix is either
". htm" or ".html". "Htm" or "html" tells the browser you are working with HTML
files - that is, an HTML document.

Saving your html file (or document)

IF YOU ARE USING ONLY NOTEPAD or similar text editor:
Simply type in a suitable file name (along with an extension) and click on "OK".

Loading your html document into the browser

Once you have saved your HTML file or document, you need to SWITCH over to
your browser, which is running in the background. Once you activate your
browser, choose File from the menu bar, and then choose Open ... or Open File
... or Open File in Browser ... (one of them should be in the File menu). You will
then need to locate your file, click on the file name and then click the Okay
button. Your HTML file will appear in the browser. You can only observe your file
in the browser - you cannot edit in the browser. Once you have seen how your
HTML file looks in the browser, you can then SWITCH back to NOTEPAD to
continue working and editing.

Note:

(1) (1) If you want to LOAD a new HTML file into NOTEPAD, and the name
does not show up in the correct directory in the dialog window, choose to
show All Files (*.*) in the Files of type line and the name should then
appear. Click on the name and then on the Open button.

(2) (2) If you use a word processor other than NOTEPAD, you may first need to
CLOSE the HTML file before it can be loaded into your browser. With
NOTEPAD this is not necessary.

HTML ELEMENTS

HTML comprises of three major elements that render a well-structured look for a
document.
• • Head
• • Body
• • Footer

HTML tags
HTML works in a very straightforward manner. You type in your text and your
tags. To get large print, centered text, bold text, text in italics, indented
sentences, colored text, etc., is nothing more than inserting tags around your
text. These tags are more accurately called ELEMENTS and you should think of
these elements as describing the meaning of the text they contain, rather than
how the enclosed text should be displayed. This concept is called content-
based markup, as opposed to presentational markup. Because we don't want
the tags (elements) to appear in the browser, we need a way to tell the browser
that something is a tag - and this is easy to do. To tell the browser that something
is a tag, you simply place "less than" and "greater than" symbols around them.
The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These
symbols are also called "Angle Brackets". Thus we have an opening angle
bracket "<" and a closing angle bracket ">" around each tag.
Correct use of tags
We have "beginning" or "opening" tags (such as <HTML>) and we have "ending"
or "closing" tags (such as </HTML>). Many elements consist of an opening tag
and a closing tag. An element that has an opening and closing tag is referred to
as a container element because anything contained between these tags are
affected by the element.
Closing Tags cannot be placed just anywhere. Use the "Last In = First Out"
principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out".
Another way of stating this is that the last tag activated must be the first tag
terminated? An example of a correct sequence of tags is:
<tag1><tag2> statements </tag2></tag1>
In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be
terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In
other words, tags are closed in reverse order to the way they are opened. Thus
the first tag opened must be the last tag closed.
An example of an incorrect placement of tags is:
<tag1><tag2> statements </tag1></tag2>
In this example, the last tag opened (<tag2>) is not the first tag closed. That is,
these tags overlap. </tag2> must come before </tag1>. Therefore this example
does not satisfy the LIFO principle. Container tags cannot overlap each other. If
you do not place tags properly, your web page simply won't work.

The following is another example of a correct use of tags:
<tagA><tagC><tagB><tagD>statements </tagD></tagB></tagC></tagA>

Classification of html tags

A markup tag is defined by the markup element and an optional set of attributes.
Tags are divided into two groups, non-empty and empty. There are mainly two
types of tags in HTML.

i) Empty tag
The tags, which are not required to close (i.e. starting tag will be there but
closing tag is not there) are called empty tag. Example: <BR>, <IMG>. As
<BR> is an empty tag, that’s why </BR> is not required. It is similar for
<IMG> also.

ii) Non-empty tag
The tags, which are required to close (i.e. starting tag will be there as well
as closing tag will be there) are called non-empty tag. Example: <BODY>.
</BODY>, <TITLE>.. </TITLE> etc.

There is one special tag <P>, which can be said as an empty tag or non-empty
tag. Sometimes it can be used with only starting tag i.e. <P> or sometimes it may
be used with ending tag also (normally for formatting a paragraph), i.e. <P> …
</P>.

Basic tags

TAG DESCRIPTION
<HTML>…</HTML> Indicates the beginning of HTML
document
<HEAD>…</HEAD> Indicates the beginning of document
header
<BODY>…</BODY> Indicates the beginning of document
text
<TITLE>…</TITLE> Indicates title for the web page

<HTML> and </HTML> tags
We first need to learn how to set things up properly in an HTML document (or file
as it is also called). Every HTML document should first be declared that it is in
fact an HTML document. When the document is completed we also need to
indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML
stands for Hyper Text Markup Language, which is the language of web page
design. <HTML> is the beginning tag and </HTML> is the ending tag. The
forward slash before the tag (</ >) cancels the effect of the tag. This is true for all
tags that affect text. Thus <HTML> tells the browser that what follows is an HTML
document and </HTML> tells the browser that the HTML document is completed.

You can therefore think of the <HTML> and </HTML> tags as "containers",
containing the entire HTML document. Therefore HTML is called a container
tag. You should use the HTML element for each of your web pages.

<HEAD> and </HEAD> tags
Each page of your web pages should have these tags. Statements (or tags) that
give information to a person visiting your website, or information such as those
needed for a Search Engine are placed between the <HEAD> and </HEAD>
tags. Thus the HEAD part of a document provides information about the
document. You do not see this information displayed on the browser screen. It
can be seen by choosing DOCUMENT SOURCE from the VIEW menu of your
browser. The HEAD tag must not contain any text or normal markup tags. If it
does, the browser will assume that it is in the BODY part of the document
(studied below). The HEAD tag can actually be omitted, but only if you group all
the tags that go in it at the top of the document. To avoid any potential problems,
I would suggest that you include the HEAD tag in your own documents.

<TITLE> and </TITLE> tags

One of the statements that must included between the <HEAD> and </HEAD>
tags is the TITLE of your web pages. The title in our example is " THIS IS OUR
FIRST DOCUMENT". Notice that this title is placed by the browser at the very top
of the screen - above the menu choices. In Netscape it reads:
Netscape- [THIS IS OUR FIRST DOCUMENT]
Thus Netscape has added its name to the title. The TITLE of your website or of
your web page must occur between the <TITLE> and </TITLE> tags and you are
only allowed one TITLE element per page. The information you provide in the title
is also used to label the bookmark entry for your web page and is also a caption
in search engine results. Therefore you should take time to make up a good
descriptive title for each of your web pages. You will notice that each of our
lessons has its own title that describes in general the content of the lesson.
Because we do not want the title to be displayed on the browser screen, the
<TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD>
tags.

<META> tag

This tag specifies information about the document to browsers, applications and
search engines. With <meta> tag, we can instruct the browser to load a new
document after the specified time (client-pull) or you can specify key-words for
search engines to associate with your document.

Attributes

• • Content
Assigns values to the HTTP header fields when using REFRESH
HTTP header, assign a number along with a URL to the content
attribute, the browser then loads the specified URL after the specified
number of seconds.

• • HTTP-EQUIV
This attribute indicates the HTTP header value you want to define,
such as REFRESH, EXPIRES or CONTENT LANGUAGE.

• • Name
This attribute specifies the name of the association you are defining,
such as, keywords or description.

<BODY> and </BODY> tags
After the title comes the main body of your Web page. It contains all the text and
tags. It is the part that will be displayed on the browser screen. Thus the BODY
element contains the actual contents of the document. Of course the tags will not
be displayed on the browser screen. The tags only tell the browser how to
display the information. The body of each of your Web pages should be declared
with BODY tags. <BODY> tells your browser that what follows is to be the body
of the Web page and </BODY> tells the browser that the body part of the page
has ended. Thus the <BODY> and </BODY> tags are container tags, containing
the body of your document. The BODY tag is also an optional tag. If you place all
the HEAD elements first, the browser will know where the actual document body
begins. The idea is good of declaring things for what they are. This way there will
be no confusion for any early or ancient browser that relies on these
declarations.

Attributes

Background =file
Bgcolor=”#RRGGBB”
Text =”blue”
Link=”red”
Vlink=”blue”
Alink=”black”
Topmargin=”70%”
Leftmargin =”60%”

Example

<HTML>
<HEAD><TITLE>THIS IS OUR FIRST DOCUMENT</TITLE> </HEAD>

<BODY background=”image.gif” bgcolor=”#624840” text=”red”
link=”green” alink=”magenta” vlink=”blue”>
FIRST HTML DOCUMENT
</BODY>
</HTML>

• • Background
Specifies as an image to be used to tile on the document background. Do not
use with BGCOLOR.

• • Bgcolor
Specifies a solid color to be used for the document background.

• • Text
Specifies the text color. Text is black by default.

• • Link
Specifies the hypertext link color. The default color for the hypertext link color is
light blue.

• • Alink
Specifies the “activated” hypertext link color. The default is red. The link changes
to this color when the mouse button clicks on the link and before the mouse
button is released.

• • Vlink
Specifies the “visited“ hypertext link color. The default is dark purple. This is the
color that indicates that the link has been previously visited.

• • Topmargin
Specifies the top margin of the displayed area in the browser below which the
text will be displayed.
• • Leftmargin
Specifies the left margin of the displayed area in the browser from the right of
which the text will be displayed.

Formatting tags

FORMAT TAGS DESCRIPTION

<P> Indicates paragraph break
Paragraph <BR> Indicates line break
<PRE>…</PRE> Indicates preformatted text
<BLOCKQUOTE>...</BLOCKQUOTE> Marks up quotes that take
more than a few lines
<HR> Draws a horizontal line
across the page
<CENTER>……….</CENTER> Helps to make center all the
elements in the document.

<P > and attributes

Use the paragraph tag to mark the beginning of a new paragraph; the ending tag,
</P>, is optional. You could include the ALIGN attribute to specify whether the
paragraph should be centered or right aligned in the page (left-aligned is the
default).

<BR> tag

It tells the browser to wrap the text that follows onto a new line without inserting
any extra space between the lines.

<PRE>..</PRE> tags

This tag is effective for formatting program code or similar information. Usually
appears in a fixed-width font with ample space between words and lines.

<BLOCKQUOTE>..</BLOCKQUOTE> tags

The BLOCKQUOTE element marks up quotes that take more than a few lines.
You use this tag when you are quoting one or more paragraphs from another
source. In HTML 4.0 the <BLOCKQUOTE> tag can take an optional CITE
attribute to indicate where the quote came from.
It is written like this-
<BLOCKQUOTE CITE=http://www.levity.com/brooklyn/index.html>…
</BLOCKQUOTE>
<HR> and attributes

Used for drawing horizontal lines in the display page.
• • Noshade –indicates solid black bar.
• • Width=n (default is 100%)
• • Size=n (default is 2 pixels)
• • Align =left/right/center (default is center)

It can be written like this.
<HR SIZE=”4” NOSHADE WIDTH=”40%” ALIGN=”RIGHT”>

<CENTER>…</CENTER> tags

Helps to position the text in an equal distance between the left and right edges
of the document which is given within the starting <CENTER> tag and ending
</CENTER> tag.

FORMAT TAGS DESCRIPTION
<I>…</I> Italicizes text
Character <U>…</U> Underlines the text
<B>…</B> Indicates text that should appear in
boldface
<TT>…</TT> Indicates “typewriter” font i.e. displays
text in monospace format
<EM>…</EM> Emphasizes the text (usually italics)

<ADDRESS>.. Indicates information about the author
</ADDRESS> who has created the Web page in a
unique font
<S> OR <STRIKE> Indicates a Strikethrough text style
<BIG>…</BIG> Indicates that text display in larger font
<SMALL>…</SMALL> Indicates that text display in Small font
<STRONG>…</STRONG> Indicates strong emphasis. The
browser will probably display the text
in a boldface font
<CODE>…</CODE> Used to enclose program codes.
Header <H1>…</H1> First Level Heading
<H2>…</H2> Second Level Heading
<H3>…</H3> Third Level Heading
<H4>…</H4> Fourth Level Heading
<H5>…</H5> Fifth Level Heading
<H6>…</H6> Sixth Level Heading

<Hn> and Attribute (n=1 to 6)

• • ALIGN
Positions the heading in the left, right or center of a document.
<H3 align=”right”>

• • CLASS
Indicates which style class applies to the <Hn> element.

• • ID
Assigns a unique ID selector to an instance of the <Hn> tag. When you then
assign a style to that ID selector, it affects only that one instance of the <Hn> tag.

• • STYLE
Specifies style sheet commands that apply to the heading.
<H1 STYLE=”background: red”>

• • TITLE
Specifies text assigned to that tag.
<H1 TITLE=”Headline”>

Example:

<HTML>
<HEAD><TITLE>DOCUMENT</TITLE></HEAD>
<BODY>
<STRONG>HELLO!!</STRONG><BR>
<B>
<U><I>HEADINGS WILL BE: </I></U>
</B>
<BR>
<H1 >THIS IS H1</H1>
<H2 > THIS IS H2</H2>
<H3> THIS IS H3</H3>
<H4 > THIS IS H4</H4>
<P> THESE ARE ALL ABOUT HEADINGS
<BR>
<P> Now come to the next part of HTML
<BR>
<EM>DETAILS</EM>
<ADDRESS> Winserv Technology
<BR>center: A.J.C Bose Road
</ADDRESS>
<BLOCKQUOTE>
<p>Omit needless words</p>
<p>Vigorous writing is concise. A sentence should contain no
unnecessary words, a paragraph should contain no unnecessary
sentences, for the same reason that a drawing should have no
unnecessary lines & a machine should not have any unnecessary parts.
</p>-William Sturunk </ BLOCKQUOTE >
<PRE>A guide to HTML</PRE>
</BODY>
</HTML>

Output:

<BASE> tag

A <BASE> tag tells the browser the correct absolute URL of the document, which
might fix the relative URLs used on that page.
<BASE>…</BASE>

<BUTTON> tag

Sets up a button to submit or reset a form as well as to activate a script. Use the
<IMG> tag between the opening and closing <BUTTON> tag to specify a
graphical button.
<BUTTON TYPE=”BUTTON” VALUE=”Run program” onClick=doit> Click
it </BUTTON>

Attributes of button tag

• • CLASS
Indicates which style class applies to the <BUTTON> element.

• • DISABLED
Denies access to the input method. Not applicable for Netscape.
<BUTTON TYPE=”SUBMIT” NAME=”PASS” DISABLED>

• • ID
Assigns a unique ID selector to an instance of the <INPUT > tag.

• • VALUE
Sets the default value for the button face.

• • TYPE
Indicates the kind of button to create.

• • NAME
Gives a name to the value you pass to the form processor.

• • STYLE
Specifies style sheet commands that apply to the element.

• • TITLE
Specifies text assigned to the tag.

• • TABINDEX
Specifies where the input method appears in the tab order.
<BUTTON type=”button” class=casual value=”Click To Run” title=”ABC”
style=”background: red” tabindex=3 name=”run prog” disabled>

Special tags

1. <MARQUEE>………….</MARQUEE> tags

A marquee displays a scrolling text message. You can customize a marquee to
achieve exactly the effects you want. It is only applicable for Internet Explorer

Marquee attributes

• • Behavior=Slide/Flash/Alternate/Scroll
• Direction=Right/Left (Default)
• Height=30%
• Width=200
• Loop=-1 (-1 represents infinite looping)

2. <BLINK>…</BLINK> tags

This tag is only applicable for Netscape Navigator.

3. <DIV>…</DIV> tags

The W3C (WORLD WIDE WEB CONSORTIUM) has been trying to standardize
HTML tags so they all match a similar pattern. One of the great frustrations was
Netscape’s introduction of the <CENTER> tag, which had no <LEFT> or
<RIGHT> alignment equivalents. To standardize this tag, the W3C supplied the
<DIV> tag, which separates documents into separate divisions for formatting
purposes. So, a web page can be divided into segments or division called DIVs.
Each segment starts with <DIV> and ends with </DIV>. These segments can be
positioned anywhere on the page. The <DIV> tag has a position attribute that can
take one of the two values, Absolute and relative.
Absolute positions the segment with respect to the top/left edge of the browser
window. In contrast with Absolute, Relative positions the segment in relation to
other elements on the page.

<DIV ALIGN=”center”>
HTML code to align to center, including headings, text. tables and images.
</DIV>

<FONT> tag

This tag helps to alter or set font characteristics of the font the browsers uses to
display text.
Syntax:
<Font attributes>content to be displayed</font>

Attributes

• • Face
Specifies a comma-separated list of font names the browser uses to render text.
If the browser does not have access to the first named font, it tries the second,
then the third and so forth.

• • Color
Indicates the color the browser uses to display text. Color names can substitute
for the RGB hexadecimal values.

• • Size
Specifies the size of the text affected by the FONT tag. You can specify the size
relative to the base font size (see the <BASEFONT> tag), which is normally 3.
You can also specify the size as a digit in the range 1 through 7.

Example:

<BASEFONT size=4>
<FONT size=+2 face=”Avant Guard”> THIS IS A FONT OF SIZE 6. </FONT>

<FONT size=1 color=#FF0000> THIS IS A FONT OF SIZE 1. </FONT>

<BASE FONT> tag

Provides a font setting for normal text within a document. Font settings within the
document are relative to settings specified with this tag. Use this tag in the
document header (between the <HEAD> tag).
<BASEFONT SIZE=3>

LINKING

There are two major categories of links: external links which are links to files not
on your own site (created by someone else) and internal links, which are links
to files that are part of your site (created by you).
With HTML tags we can create links both internal and external.
<A>…</A> ‘A’ stands for Anchor.

The anchor elements take several attributes.

• • Href

HREF indicates Hyperlink REFerence. The HREF attribute must point to a URL
and the URL should appear in quotes, like this:
<A HREF=http://www.construct.net/> Construct </A>

• • Title

One anchor attribute that provides more information about a link is the TITLE
attribute. The TITLE attribute allows an “advisory title” that explains the resource
in more detail.
<P> we are learning LINKING <A HREF=http://www.abc.com/ TITLE=”abc”> in
details </A>
Browsers may choose different methods of showing the advisory TITLE attribute,
such as displaying the title in a tool tip or balloon help, or the title might appear
on the status bar. Currently the only popular browser that makes use of the
TITLE attribute in a link is Internet Explorer 4, which displays it as a tool tip.
Navigator should soon support these attributes.

• Name (‘text’)

It labels a section of an HTML document with a specific reference name. The
NAME attribute enables links to point to a specific section within a document.
<A NAME=”directions”> Here is the direction to my office: </A>
Once you have added this code, you can link to the directions by taking a normal
link tag and adding a number sign (#) and the name assigned to the URL. If the

normal URL for the page is http://www.abc.com/, then you would specify the link
for the directions name like this:
The <A HREF=http://www.abc.com/#directions> direction to my office </A> is
available.

• • Target

The TARGET attribute is normally used with frames. However, you can use the
TARGET attribute even if you don’t use frames. When you specify a TARGET for
your links, you indicate the name of a window where you’d like the linked page to
appear.
A link can be specified like this:
<A HREF=http://www.abc.com/~PC/ TARGET =”window2”> XYZ </A>
When this link is followed, a new window (named internally “window2”) is
created, containing the XYZ page.

• • Rel

This attribute and its value indicate the relationship of the current document to
the document referenced in HREF. Possible values include Contents, Index,
Glossary, Copyright, Next, Previous, Style Sheet, Bookmark and Help.
<LINK rel=Glossary href=”glossary.html”>.
This attribute is also used to specify linked style sheets. Another possible value is
Alternate, which indicates an alternate version of the document.

• Rev

This attribute is similar to rel, except it indicates a reverse relationship between
the document and the URL.
<LINK rev=Glossary href=”chapter1.htm”>
It accepts the same values as rel.

So, for linking we can use

i)<A href=”c:my documentssuni.htm” >click </A>
The text click word is used for linking.
ii)<A href=”c:my documentssuni.htm”><img src=”bubbles.bmp” width=100
height=100></A>
The image bubbles.bmp is used for linking.

Example:

<Html>

<Body bgcolor=pink>
<A href="sec.htm"><b>This is Winserv Technology. </b></A>
<BR><BR><BR>

<A href="third1.htm"><img src="earth.gif" width=100 height=100></a>
</body>
</html>

Output:

LIST AND IMAGE

List

HTML has special sets of tags just for displaying lists with a host of special
attributes to give you greater control over their appearance. Lists are a great way
to provide information in a structured, easy-to-read format. A list is a good form
for a procedure. At the most basic level, lists are divided into two categories.

• Ordered lists
These lists are typically used to indicate a sequence of events or priorities. They
are also used to specifically identify sections and relationships when creating
outlines.

• Unordered lists

These lists are typically used to display a group of items that are somehow
related, but necessarily in a hierarchical fashion.

LIST TAG EFFECT
<OL> Specifies that the information appear as an ordered
(numbered) list
<UL> Specifies that the information appear as an unordered
(bulleted) list
<LI> Specifies a line item in either ordered or unordered lists

Type attributes can be included
1. 1. For numbered lists
TYPE=”1”
TYPE=”a”
TYPE=”A”
TYPE=”i”
TYPE=”I”
2. 2. For bulleted lists
TYPE=”DISC”
TYPE=”SQUARE”
TYPE=”CIRCLE”

Ordered lists have additional attributes that you can use to specify the first
number in the list, as well as to create hierarchical information. The name of that
attribute is VALUE.

Using definition lists

Finally, one special list variant, definition lists, can be useful for providing two
levels of information. <DL> is used to create a glossary-style listing, which is
handy for items such as dictionary listings and Frequently Asked Questions
pages. The <DL> tag is used similarly to the unordered list tag, except that it
doesn’t use the <LI> tag to mark its entries because a definition list requires two
items for every entry, a term and its definition. Marking these two items is done
with the corresponding <DT> and <DD> tags.

This is the syntax of the <DL> tag.

<DL>
<DT>Term1<DD>Definition 1
<DT>Term 2<DD>Definition 2
…
….
……..

…………
………..
<DT>Term n<DD>Definition n
</DL>

In this tag, Term is the word requiring a definition, and Definition is the block of
text that supplies the definition.

LIST TAG EFFECT
< DL>----</DL> Specifies that the information appear
as a definition list

<DT> Indicates definition term
<DD> Identifies definitions

Example:

<html>
<head><title>two shopping lists</title></head>
<body bgcolor=cyan>
<ul>
<li>EGGS
<li>MILK
<li>APPLES
<li>RAZOR BLADES
</ul>
<ul type="square">
<li> HAMMER
<li>SCREWDRIVER
<li type="disc">SCREWS
<li type="circle">CHAINSAW
</ul>
<ul>
<li>A
<ul>
<li>AA
<li>AB
<ul>
<li>AAA
<li>ABA
</ul>

<li>AC
</ul>
</ul>
<ol>
<li>BREAD
<li>TURKEY BACON
<li value="10">DARKCHOCOLATE
<li>AVOCADOS
</ol>
<DL>
<DT>Term A
<DD>Definition of term A
<DT>Term B
<DD>Definition of term B
</DL>
</body>
</html>

Output:

Placing images on web page

You can include images (pictures or other nontext objects) in any Web page to
provide information or to make the page more attractive. An image that you
include in a Web page is called an inline image, as opposed to an image that is
viewed separately in your browser, such as when the image file is the target of a
link.

• Alternate Text

When a browser cannot display graphic images, perhaps because the image file
cannot be found or because the browser’s image-loading capabilities have been
turned off to save download time, you can include the ALT attribute in an image
tag to have text displayed in place of the image.

• Sizing

By default, your browser loads an image from the top down and displays the
image in as large a box as needed. You can specify an exact size for the image
by including the WIDTH and HEIGHT attributes within the HTML tag.

• Aligning

You can use the ALIGN attribute with the LEFT, CENTER, or RIGHT options to
position the image either left, centered, or right in the browser window. You can
also use the TOP, BOTTOM, or MIDDLE attributes to align text with the top,
bottom, or middle of the image.

How to include image in the browser using its attributes ?

<IMG SRC=file :///c:windowsbubbles.bmp
Align=top/middle/bottom
Width=100
Height=100
Vspace=30 (vertical space in pixels)
Hspace=30> (horizontal space in pixels)

Other attributes:
Border=n
Ismap
Usemap
Alt (“text”) specifies the text, which would be displayed, if the
browser does not support graphics.

• Src
“URI” specifies the location of the image to load into the document.

• Align
“top | middle | bottom | left | right” Aligns the object with respect to context.

• Width
“length” sets the display width of the image.

• Height
“length” sets the display height of the image.

• Vspace
“pixels” sets the amount of space to be inserted to the top and bottom of the
element.

• Hspace
“pixels” sets the amount of space to be inserted to the left and right of the
element.

• Border
sets the border width of the image.

• Ismap
used to define a server-side image map.

• Usemap
“URI” Associates an image map as defined by the MAP element with this image.

• • Alt
“TEXT” Alternate text to be displayed if the user agent cannot render the
element.

Image as a link

The map element (<MAP> and </MAP>) is used for imagemaps. An imagemap
is an image that contains hotspots can take a surfer to different URLs. So an
imagemap is simply an image that can be used to take a surfer to different
places, depending on where they click in the image. So, an imagemap is an
extended version of hyperlink. Instead of having an image represent only one
link, the image can represent several different links depending on where in the
image you click.

Example:

<MAP name=”sportsmap”>
<AREA shape=”circle” cords=”65,129,57”
href=http://www.sportgoods.com/baseball.html>
<AREA shape=”rect” cords=”165,157,200,120”
href=http://www.sportgoods.com/golf.html>
<AREA shape=”default” href=http://www.sportgoods.com/index.html>
</MAP>

<MAP> elements are contained within the body of the document and have only
one attribute name. The name attribute identifies the particular MAP element
referenced with the usemap attribute. The AREA element is used within the
MAP to delineate a hyperlink and the shape and coordinates of its corresponding
hot spot in the image.

<AREA shape=value coords=”shape dependent” href=”hyperlink_URL”>
There are three different shapes that can be defined with the shape attribute:
rect, circle and poly.

If it is written like the following
<img src=”sporting_goods.gif” usemap=”#sportsmap”>

The usemap attribute tells the browser that it’s dealing with an imagemap and
then directs the browser to where coordinate and the URL information for this
imagemap can be found.

HTML’S SPECIAL CHARACTER CODE

CHARACTER ENTITY DESCRIPTION
& OR & Ampersand
< Less than
&gt Greater than
ñ Small n, tilde
" Quote
<!………> Comment
  Space
® Circled R, registered sign
© Circled C, copyright sign
¬ Negation sign
° Degree sign

HEXADECIMAL CODE FOR COLORS

Color Code
Black “Black” or “#000000”
Green “Green” or “#008000”
Silver “Silver” or “#C0C0C0”
Lime “Lime” or “#00FF00”
Gray “Gray” or “#808080”
Olive “Olive” or “#808000”
White “White” or “#FFFFFF”
Yellow “Yellow” or “#FFFF00”
Maroon “Maroon” or “#800000”
Navy “Navy” or “#000080”
Red “Red” or “FF0000”
Blue “Blue” or “#0000FF”
Purple “Purple” or “#800080”
Aqua “Aqua” or “#00FFFF”
Cyan “Cyan” or “#00FFFF”
Sea green “#2E8B57”
Violet “#EE82EE”
Khaki “#F0E68C”
Brown “#A52A2A”
Orange “#FFA500”
Pink “#FFC0CB”
Gold “#FFD700”
Ivory “#FFFFF0”
Tomato “#FF6347”

WORKING WITH TABLE

The table as the name indicates aligns contents in a row and column format .The
table can contain any kind of data, i.e. it can include links, paragraphs, all header
levels, another table, preformatted text, images and so on.

Attributes

<TABLE> tag

Attributes Description
Border=n Indicates border for the table.
Bordercolor=”#RRGGBB” or “..” Specifies the color of the
border of all the table cells
Bordercolordark=”#RRGGBB” or Specifies the darker color used
“..” to draw 3-D borders around the
table cells
Bordercolorlight=”#RRGGBB” or Specifies the lighter color used
table cells
Cellpadding=n Indicates space between
border & contents of cell
Cellspacing=n Indicates spacing between cells
Align=LEFT/CENTER/RIGHT Positions the table according to
the alignment value in the
window
Background=URL Specifies the absolute or
relative location of a graphic
image file loaded as a
background image for the
entire table
Bgcolor=”#RRGGBB” or “..” Specifies the background color
within all table cells
Class=”…” Indicates which style class
applies to the <Table> element.
Cols=n Specifies the no. Of columns in
the table
Width=n Indicates width of the table

<CAPTION> tag

Align----top/bottom/left/right

<THEAD> tag

Defines a table header section. At least one table row must go within <THEAD>.

Attributes Description
Title=” …” Specifies text
assigned to the tag
VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents
BASELINE of table header with
respect to the top
and bottom edges of
the header
container.
Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text
within the table
header will line up
with the edges of
the table cells
Class=”…” Indicates which
style class applies
to the <TH>
element.

<TH> tag

Contains table cell heading.

ATTRIBUTES DESCRIPTION

Title=” …” Specifies text assigned to the
tag
border of the table heading cell
table heading cells
table heading cells
Colspan=n Indicates that a table cell
occupy more columns than the
default of one.
Rowspan=n Indicates that a table cell
occupy more rows than the
default of one.


VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents of a cell
BASELINE with the top, bottom, middle or
baseline of the cell
background image for the table
cell
within a table cell
applies to the <TH> element.
Nowrap Disables default word-wrapping
within a table cell, maximizing
the cell’s horizontal space.
Width=n Specifies the horizontal
dimension of the cell in pixels
or as a percentage of the table
width.

<TR> tag

Contains a row of cells in a table. You must place the <TR> tags inside the
<TABLE> container, which can contain <TH> and <TD> tags.


Title=” …” Specifies text
assigned to the tag
Bordercolor=”#RRGGBB” or “..” Specifies the color of
the cell borders within
the row.
Bordercolordark=”#RRGGBB” or “..” Specifies the darker
color for the 3-D
borders around the
table row
Bordercolorlight=”#RRGGBB” or “..” Specifies the lighter
color for the 3-D
borders around the
table row
within the table row
will line up with the
edges of the table


cells
Bgcolor=”#RRGGBB” or “..” Specifies the
background color of
the table cells in the
row.
Class=”…” Indicates which style
class applies to the
<TR> element.
Nowrap Indicates that text
within table cells in
the row not wrap.
VAlign=TOP/MIDDLE/BOTTOM/ Specifies the vertical
BASELINE alignment of the
contents of the cells
within the row.

<TD> tag

This tag is the data cell tag, used for the body of the table.


border of all the table cells
table cells
table cells
Colspan=n Indicates that a table cell
occupy more columns than the
default of one.
Rowspan=n Indicates that a table cell
occupy more rows than the
default of one.
VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents of a cell
BASELINE with the top, bottom, middle or
baseline of the cell
background image for the table
cell


within a table cell
applies to the <TD> element.
Nowrap Disables default word wrapping
within a table cell, maximizing
the cell’s horizontal space.
Width=n Specifies the horizontal
dimension of the cell in pixels
or as a percentage of the table
width.

<TBODY> tag

Defines the table body within a table. This tag must follow <TFOOT> tag.


within the table
footer will line up
with the edges of
the table cells
VAlign=TOP/MIDDLE/BOTTOM/ Specifies vertical
BASELINE alignment of the
contents of the table
body.
Title=”…” Specifies text
assigned to the tag
style class applies
to the <TBODY>
element.

<TFOOT> tag

Defines table footer within a table. It must precede the <TBODY> tag.


within the table
footer will line up
with the edges of


the table cells
VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents
BASELINE of the table footer
with the top, bottom,
or middle of the
footer container.
Title=”…” Specifies text
assigned to the tag
style class applies
to the <TFOOT>
element.

Example1:

<html>
<head>
<title>glossary</title>
</head>
<body bgcolor=pink>
<center>
<font color="white">
<table border=4 background="clouds.jpg" width=75%
bordercolorlight="blue" cellpading=7 cellspacing=10 >
<caption><b>DETAILS OF BOOKS</b></caption>
<thead align=CENTER>
<td><b>TITLE</b></td><td><b>AUTHOR</b></td>
</thead>
<tr align=CENTER>
<td>HTML</td><td>BPB publication</td>
</tr>
<tr align=CENTER>
<td>JAVA</td>
<td>PATRIC</td>
</tr>
<tr align=CENTER>
<td>LET US C</td>
<td>BPB Publication</td>
</tr>
</table>
</font></body>

</html>

Output:

Example2:

<html>
<head>
<title>example of attributes</title>
</head>
<body bgcolor=cyan>
<center>
<table border=6 bgcolor=white width=75%>
<caption>example of rowspan</caption>
<tr align=CENTER>
<td rowspan=2>CELL 1,1</td>
<td >CELL 1,2</td> </tr>
<tr align=CENTER>
<td>CELL 2,2</td> </tr>
<tr align=CENTER>

<td>CELL 3,1</td>
<td>CELL 3,2</td>
</tr></table>
<table border=6 bgcolor=white width=75%>
<caption>example of colspan</caption>
<tr align=CENTER>
<td colspan=2>CELL 1,1</td>
<td >CELL 1,2</td> </tr>
<tr align=CENTER>
<td>CELL 2,1</td>
<td>CELL 2,2</td>
<td>CELL 2,3</td>
</tr><tr align=CENTER>
<td>CELL 3,1</td>
<td>CELL 3,2</td>
<td>CELL 3,3</td>
</tr></table>
</body>
</html>

Output:

WORKING WITH FORM TAG

Here we will be able to capable of utilizing a dazzling feature that enables the
user to interact with the Web server through a tag named <FORM>. With this
special feature, users can enter information in a web page and send it to the
server. Forms, which help visitors to your site to give you input, are used for a
variety of purposes. It can be used for order processing on a retail site or they
can be set up to get customer feedback by email. The form element consists of
several other elements, called controls.

<FORM>…</FORM> TAG: Creates a container for the controls

Title Specifies text assigned to the tag
Name Specifies the name of the form
Action=FILE/URL Specifies the location where FORM data
is passed
Method=GET/POST Specifies the method by which the data
is sent to the server.

<SELECT>. …</SELECT> TAG: Creates a pull-down menu.

NAME Uniquely identifies <Select> tag
SIZE Specifies the number of items visible at a
time.
MULTIPLE Allows multiple items to be selected

<OPTION> TAG: Defines items of the pull-down menu. It is written within
<SELECT> tag.

SELECTED Specifies the default item among the list
VALUE Provides the content associated with the
NAME=attribute

<TEXTAREA>… </TEXTAREA> TAG: Text areas are places within a form
for extensive text input

NAME Specifies the name of the TEXTAREA
ROWS Specifies the number of rows
COLS Specifies the number of cols
<FIELDSET>…. </FIELDSET> TAG: Groups related form elements

TITLE Specifies text assigned to the tag.

<LEGEND>…. </LEGEND> TAG: Assigns a caption to a FIELDSET.

ALIGN Indicates whether the legend appears at
the top, bottom, left, or right of the
fieldset.
TITLE Specifies text assigned to the tag.

<INPUT> TAG: It is the basis for data entry.

TAGS ATTRIBUTES DESCRIPTION
<INPUT TYPE=TEXT> Specifies the single line text
Name Label of the control
Size Size of the control
Maxlength Maximum no of characters taken by
the control
Value The default text the text box is going
to display
<INPUT TYPE=RADIO> Creates a radio button two-stated
field, selected or unselected, usually
only one can be selected
Name Name applies to the collection of
buttons
Value Value of the specific button
Checked If the button is checked, it will remain
checked from the very beginning.
<INPUT Creates a checkbox, two-stated field,
TYPE=CHECKBOX> selected or unselected, usually more
than one can be selected
Name Label of the item
Value Value of the specific item
Checked To specify the default selection
<INPUT Displays asterisk in the field
TYPE=PASSWORD > Name Label of the control
Size Size of the control
Maxlength Maximum no of characters taken by
the control
<INPUT The field will not be visible.
TYPE=HIDDEN> Name Name of the hidden control
Value Value of the hidden control

<INPUT Creates a button, other than
TYPE=BUTTON> SUBMIT/RESET button.
Name Name of the button control
Value Text which will be displayed on the
button
<INPUT Creates a button, which passes data
TYPE=SUBMIT> to the Web server.
Value Text which will be written on the face
of the button
<INPUT Creates a button, which resets all the
TYPE=RESET> fields of the form.
Value Text which will be written on the face
of the button
<INPUT TYPE=IMAGE> An image is used for Submit button
Name Specifies that the x, y coordinates
where the mouse is located will be
returned to the server when the image
is clicked.
Src URL of the image
Border Border of the image
<INPUT TYPE=FILE> File field allows uploading files.
Name Specify the name of the control
Size Specify the visible length of the
control
Accept Specify which file types can be
uploaded
Maxlength Specify the maximum length of the
control

Example:

Formex.htm

<html>
<head>
<title>FORM EXAMPLE</title>
</head>
<body bgcolor=lightcyan>
<Form method="POST">
<B><p align="center">
<Font color="#800000">
<i><b>EXAMPLE OF FORM</b></i>
</font> </p>
<p align="left">
<font color="#800080">NAME</font>

          &nb
sp;          
   
<input type="text" name="T1" size="20" maxlength="30">
      
</p>
<p align="left">
<font color="#800080">PASSWORD
          &nb
sp;          
    :   
<input type="password" name="T3" size="20">
</font>
</p>
<p align="left">
<font color="#800080">ADDRESS
          &nb
sp;          
    :  
<textarea rows="2" name="S1" cols="20"></textarea>
</font>
</p>
<p align="left">
<font color="#800080">PHONE
          &nb
sp;          
       
<input type="text" name="T2" size="8" maxlength="16">
</font>
</p>
<p align="left">
<font color="#800080">SEX :
          &nb
sp;          
           
MALE <input type="radio" value="V1" checked name="R1">
FEMALE <input type="radio" name="R1" value="V2">
</font>
</p>
<p align="left">
<font color="#800080">EDUCATIONAL QUALIFICATION
:   
<select size="1" name="D1">
<option>UNDER GRADUATE</option>
<option selected>GRADUATE</option>
<option>POST GRADUATE</option>

<option>B.E.</option>
</select>
</font>
</p>
<p align="left">
<font color="#800080">HOBBIES
          &nb
sp;          
       
LISTENING MUSIC <input type="checkbox" name="C1" value="ON"
checked>
</font></p>
<p align="left">    <font color="#800080">
          &nb
sp;          
    READING STORY BOOKS <input type="checkbox"
name="C2" value="ON">
</font> </p>
<p align="left">   
<font color="#800080">
          
     PLAYING <input type="checkbox"
name="C3" value="ON">
</font> </p>
<p align="left"><font color="#800080">
          &nb
sp;          
   
WATCHING MOVIES <input type="checkbox" name="C4"
value="ON">     
</font></p>
<p align="center">
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
<p align="left"> </p>
</form>
</body>
</html>

Output:

FRAME

A frames page is a special kind of HTML page that divides the browser window
into different areas called frames, each of which can display a different page.
When you click a hyperlink on a page displayed in one frame, the page pointed
to by that hyperlink can be displayed in another frame.

The frames page itself contains no visible content: It's just a container that
specifies which other pages to display and how to display them.

When you create a frames page using one of the frames page templates, the
navigation between frames is already set up for you. In the Contents frames

page template, for example, clicking a hyperlink in the Contents frame on the left
displays a page in the Main frame (called the target frame) on the right.

Frames allow a single Web browser window to be divided into several different
areas. Each area can display a different Web page. Thus frames add flexibility to
a site. To define frame, first define a page that gives the frame layout. Second,
specify a web page put in each frame. A page that gives a frame layout does not
have <BODY>; instead, <FRAMESET> tag, you break the window into columns
or rows. Each column or row then may be used as frame, or broken up into
smaller frames by using another <FRAMESET> tag. Like <BODY> the
<FRAMESET> container must end with </FRAMESET> tag.

TAGS ATTRIBUTES DESCRIPTION

<FRAMESET>… Divides pages into
</FRAMESET> frames.
COLS Divides documents into
Columns
ROWS Divides documents into
Rows
<FRAME> Specifies the file to be
displayed in each frame.
SRC Specifies URL of the
HTML file
NAME Specifies the name of
the frame
BORDER Specifies the thickness
of the border around the
frame in pixels.
BORDERCOLOR Specifies the bordercolor
of the frame
NORESIZE Specifies that the size of
the frame is fixed, i.e. it
cannot be altered by
users.
SCROLLING Specifies scroll bars. It
can take values YES,
NO or AUTO.
<NOFRAMES>… Specifies that the HTML
</NOFRAME> codes within these tags
are displayed by non-
Netscape browser.

To place a frameset within a frameset (nested frameset)

<FRAMESET rows=”20%, 80%”>

<FRAME scrolling=”yes”>
<FRAMESET cols=”25%, 75%”>
</ FRAMESET>
</ FRAMESET>

Display A Page In A Frame

When a frames-compatible browser downloads a frames page, it reads the frame
information and then displays an initial page in each frame. When a site visitor
clicks a hyperlink on a page in one frame, the page pointed to by that hyperlink
usually opens in another frame on the same frames page. When you click a
hyperlink on a page that's displayed in one frame of a frames page, the page
pointed to by that hyperlink usually opens in another frame (called the target
frame).

On frames pages that you create using frames page templates (suppose in
FrontPage), the navigation between frames is already set up for you. In the
Contents template, for example, any hyperlinks you create on the page in the
Contents frame automatically display a page in the Mainframe.

Example:

FARMEEX.HTM

<HTML>
<HEAD><TITLE>frame example</TITLE></HEAD>

<FRAMESET cols="20%, 80%">
<FRAME scrolling="yes" src="first.htm">
<FRAMESET rows="35%, 65%">
<FRAME scrolling="yes"
src="third.htm">
<FRAME scrolling="yes" src="sec.htm">
</ FRAMESET>
</ FRAMESET>
</Html>

FIRST.HTM

<HTML>
<HEAD><TITLE>THIS IS OUR FIRST DOCUMENT</TITLE>
<base target="rtop"></HEAD>
<BODY>FIRST HTML DOCUMENT</BODY>
</HTML>

SEC.HTM

<HTML>
<HEAD><TITLE>two shopping lists</TITLE>
<base target="rbottom"></HEAD>
<BODY bgcolor=cyan>
<ul>
<li>EGGS
<li>MILK
<li>APPLES
<li>RAZOR BLADES
</ul>
<img src="earth.gif" height=120 width=150 vspace=20 hspace=50>
<ul type="square">
<li> HAMMER
<li>SCREWDRIVER
<li type="disc">SCREWS
<li type="circle">CHAINSAW
</ul><ul>
<li>A
<ul>
<li>AA
<li>AB
<ul>
<li>AAA
<li>ABA
</ul>
<li>AC

</ul>
</ul>
<ol>
<li>BREAD
<li>TURKEY BACON
<li value="10">DARKCHOCOLATE
<li>AVOCADOS
</ol>
<DL>
<DT>Term A<DD>Definition of term A
<DT>Term B<DD>Definition of term B
</DL>
</BODY>
</HTML>

THIRD.HTM

<HTML>
<HEAD>
<TITLE>DOCUMENT</TITLE>
</HEAD>
<BODY>
<STRONG>HELLO!!!!!!!</STRONG>
<B><U><I>
HEADINGS WILL BE:
</I></U></B>
<BR>
<H1 align="center">FIRST LEVEL HEADING</H1>
<H2 >SECOND LEVEL HEADING</H2>
<H3>THIRD LEVEL HEADING</H3>
</BODY>
</HTML>

Output :

Floating Frame

Floating frames are scrollable areas that appear in a file on a web page. Unlike
regular frames, they cannot be resized. You can place a floating frame anywhere;
you can place an image or other element on an ordinary web page.

The <IFRAME> tag is used to create a floating frame.
Attributes

• Src
”URI” specifies the URI containing the initial contents of the frame.

• Name
names the current frame.

• Frameborder
”1 | 0” Toggles borders to be drawn around the frame.
1 represents a border is drawn.
0 represents a border is not drawn.

• Marginwidth
”pixels” Sets the margin between the contents of the frame and its left and right
borders.

• Noresize
Prohibits the user agent from resizing the frame.

• Scrolling
”auto | yes |no” determines whether the user agent provides scrolling devices for
the frame.

The syntax for the <IFRAME> tag is:
<IFRAME WIDTH=400 HEIGHT=300 SRC=”anypage.htm”> </IFRAME>

Example:

<HTML>
<head>
<title>example of inline frame</title>
</head>
<body bgcolor="pink" text="blue">
<p>
DIFFERENT FILES
<center>
<IFRAME src="first.htm" marginheight="0" frameborder="10" width="300"
height="100">
<P>
The <A href="first.htm">first</A> first file is available.
</IFRAME>

<IFRAME src="sec.htm" marginheight="0" frameborder="10" width="300"
height="100">

<P>
The <A href="sec.htm">sec</A>second file is available.
</IFRAME>

<IFRAME src="third.htm" marginheight="0" frameborder="10" width="300"
height="100">

<P>
The <A href="third.htm">third</A>third file is available.
</IFRAME>
</center>
</body>
</HTML>

Output:

STYLE SHEET

A style is a set of formatting instructions for any given HTML element specified by
the W3C. Many webmasters are already using styles in their web pages because
of their usefulness. For example, the heading <H> tags represent various styles:
Heading level one is bold, times new roman, and 24 points by default; Heading
level four is bold, times roman, and 12 points by default; Using style sheet
features, you can change these default attributes. You can also control margins,
line spacing, and placement of design elements, as well as specify colors, fonts,
and point sizes.

There are three ways you can use style sheets on pages in your web:
• Link a page to an external style sheet.
• Create an embedded style sheet on a page.
• Apply inline styles to individual page elements.

Each method has advantages and disadvantages:

Use an external style sheet when you want to apply the same styles consistently
across some or all pages in your web. By defining styles in one or more external
style sheets and linking them to pages, you ensure consistency of appearance
throughout those pages. If you decide to change a style, you need only make
one change — in the external style sheet — and the change will be reflected in

all of the pages linked to that style sheet. Typically, an external style sheet uses
the .css file name extension, such as Mystyles.css.

Use an embedded style sheet when you want to define styles only for the current
page. An embedded style sheet is a type of cascading style sheet that's
"embedded" within the <HEAD> tags of a page. Styles in an embedded style
sheet can be used only on that same page.

Use inline styles to apply cascading style sheet properties to individual elements
on a page.

If a page is linked to an external style sheet, the embedded or inline styles that
you create for that page will either extend or override properties specified in the
external style sheet.

Note: Linked and inline style sheets are ignored by non-style sheet capable
browsers.

Example of INLINE STYLE SHEET
<SPAN STYLE=”font-size: 14pt; color: red”>

Example of EMBEDDED STYLE SHEET

Suppose you want to create a page like the following
• • Create a light gray background for the page
• Center all <H3> headings and display their text in white.
• Indent the first line of all paragraphs.

So the HTML code will be
<HTML>
<HEAD><TITLE>Sample Example</TITLE>
<STYLE>
BODY {BACKGROUND: pink}
H3 {TEXT-ALIGN: “center”; COLOR: “RED”}
P {TEXT-INDENT: “+10%”}
</STYLE></HEAD>
<BODY>
<H3>This heading has been created for style sheet</H3>
<P> This is a normal paragraph. </P>
</BODY>
</HTML>

Output:

Cascading style sheet

Cascading style sheets refers to the use of multiple, overlapping style definitions
in a single document. A style sheet file can link to every document in a web site,
thus controlling the overall look and feel of the site. The HTML 3.2
recommendation for Cascading Style Sheets specifies four ways to apply style
variations. The first two methods provide ways to reference external style sheets
(text files with .css extensions), which allow you to use styles across multiple web
pages.
The third method defines styles for a single page. The fourth method is used to
make quick temporary style changes to existing HTML text, such as spanning a
background color or an image behind words.

Working with cascading style sheets

Cascading style sheets give you more control over the appearance and
presentation of your pages. Using cascading style sheets, you can extend the
ability to precisely specify the location and appearance of elements on a page
and create special effects. You can also make your site more accessible for
visitors with specialized browsers or output devices.

The contents of a style sheet

A cascading style sheet (CSS) defines the styles that you can apply to pages or
page elements. Each style definition, or style rule, consists of a selector followed
by the properties and values for that selector. The following are simple examples
of style rules defined in a style sheet:

H1 {font-size: x-large; color: green}

H2 {font-size: large; color: blue}
. Note {font-size: small}
#Footer {font-family: serif}

In the example, H1 and H2 are selectors that modify the formatting properties of
standard HTML tags. The selectors' properties and values are contained within
the curly braces { } — font-size is a property, and x-large is the value of the font-
size property. You can specify multiple properties for a selector by separating
each with a semi-colon (;). In this example. note is a class selector, and #footer is
an ID selector.

Using cascading style sheets, you can set a wider range of properties than using
standard HTML alone, including:

• Font effects, such as small caps and expanded character spacing.
• Paragraph properties, such as indentation, line spacing, and spacing
before or after.
• Borders and shading properties, such as boxes and background colors.
• Positioning properties, such as text wrapping around page elements,
absolute or relative positioning of page elements, and z-order (front to
back layering) of page elements.

Linking to style sheets from your html file

<LINK REL=STYLESHEET TYPE=”text/css”
HREF=”http:// www.domain.com/styles.css”>
To set the color of all the tags to blue, you write in the HEAD tag (or right
below the TITLE tag):
<STYLE TYPE="text/css">
H3 {color: yellow;}
FONT {color: blue;}
</STYLE>

In the CSS code below, FONT is known as the sector and color: blue or anything
else that goes within the brackets is known as the declaration. Every HTML tag
that fits under the specifications of the sector are given the declarations listed. In
this case, any FONT tag in the document is given the color blue.

Example of inserting a .css file into .htm file

Sty.css
BODY {BACKGROUND: cyan}
H2 {TEXT-ALIGN: "center"; COLOR: "RED"}
P {TEXT-INDENT: "+20%”}

Html Tutor

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (17)

Semelhante a Html Tutor

Semelhante a Html Tutor (20)

Mais de Sachin MK

Mais de Sachin MK (20)

Último

Último (20)

Html Tutor