Raju html

1
Introduction about HTML & DHTML
History of HTML:
Where did HTML – and for that matter, web pages –come from? It’s
worth taking a look at HTML’s history, and I’ll dothat inoverview here. The
first person to actually use the word hypertext was Ted Nelson in the 1960s.
Was he a computer expert? No, his specialities were philosophyand
sociology. Ted Nelson originally came up within idea for a system he called
Xanadu (www.xanadu.net), which allowednon sequential text access.
We all know the result as implemented in modern Web browsers with
hyperlinks you can move from location to location just byclicking a link.
Although it took a long time to catch on, there’s simply no doubting its
tremendous success. I can still remember the time I firstsaw anearly version
of the National Center for Supercomputing Aplplications (NCSA) Mosaic
browser atwork at Cornell University. It was shown to me by a memberof
the anthropology deartment who clicked a link, waited for a few minutes,
and then saw new text appear. “That,” he said with great satisfaction, “came
fromCalifornia.”Iwas comletelyamazed andknew I had toget intothisstuff.
Tim Berners Leewho created the first web server, came upwith the
term HTML , theterm HTTP (Hypertext Transport Protocol,whichspecifies
how hypertext is sent on theInternet), and the term URL(Uniform
ResourceLocator) to represent a World Wide Web address (more on URLs
in a few pages).
To create HTML, Tim Berners-Lee knew that we would need a
markup language, so he chose SGML (Standard Generalized Markup
Language), which wasa general markuplanguagethathad been aroundfor a
longtime andwasalreadyin use on computers forspecialized applications.
Using SGML, you can define markup languages, specifying their rules and
grammar. Tim Bernerrs-Lee createda DTDfor HTML specifying the early
syntax of HTML, and so HTML and therefore web pages, were born.
What’s HTML All About?
HTML (Hypertext Markup Language) is the language you use to
create Web pages. Left to themselves, Web browsers would take the text and
images in your Web page and wrap them up into what looks like a single

2
aragraph without any line breaks. With HTML, youact much like an editor
does, marking you an age to indicateits format, telling the Web
browserwhere you want a new line to begin or how you want text or images
aligned a more. In other words, HTML is all about specifying thestructure
and format of your Web page.
Before seeing any Web pages, we’re going toget right to the HTML.
ThisWeb page is a simple one. It displays the text “Web page number one!”
in a Web browser’s title bar and the text “Welcome to HTML~” in theWeb
browser itself.
<HTML>
<HEAD>
<TITLE>
Web age number one!
<TITLE>
</HEAD>
<BODY>
<H1>
Welcome toHTML
</H1>
</BODY>
</HTML>
The results of this HTML appear in Microsoft internet Explorer.
Browser Wars:
The Browsers available today are Netwscape Navigator and Microsoft
internet Explorer. Both of them deviate to some degree from the HTML,
standard as set by W3C. For example, there are quite a few tag attributes that
W3C has defined as standard that neither Netscape Navigator nor Internet
Explorer implement. And there are quite a few attributes and even tags (like
the Netscape Navigator <LAYER> tag and the Internet Explorer
<MARQUEE> tag) that are not part of the HTML standards at all, but are
implemented by one or the other of the big browsers. In fact, things differ by
browser version some attributes only appear in Internet Explorer 5, for
example.

3
Creating a Web Page:
We’ve already seen an example Web page.
<HTML>
<HEAD>
<TITLE>
Web page number one!
</TITLE>
</HEAD>
<BODY>
<H1>
Welcome to HTML!
</H1>
</BODY>
</HTML>
All you have to do is enter this HTML into a fle, and then open that
file in your web browser. To create that file, you can use common editors
like Windows Wordpad or Notepad if you save the page in text format. You
can even use a word processor like Microsoft Word, but note that you cannot
save normal Web pages in .doc format (Which includes many special
formatting characters that Web browsers won’t understand) they must be
saved in text format from the Save As dialog box.
The name you give the web page doesn’t matter as long as long as you
give it the extension .html to indicate that it’s an HTML document. For
example, you might enter the previous text into a file named one.html.
Because of the fact that MS-DOS used to only recognize three –letter
extenstions, you can also use the extension .htm and not have a problem
with most browsers.
That’s the process; just enter the previous HTML in a file and save the
file in text format, giving it the extension .html, such as one.html.
Copngratulations you’ve just created your first Web page!
In fact, there are many tools called HTML editors to help you with the
process many of which will even write the HTML for you. I’ll take a look at
some of these in the next section (note that for this book, all you need is a

4
simple text editor like Windows Wordpad or Notepad, or VI or emacs in
UNIX).
What HTML Editors Are Available?
There is great number of HTML editors available for you to use in
creating Web pages. Here’s starter list:
• Adobe PageMill (http://adobe.com) an editor that helps automate the
whole process of site design and implementation.
• Allaire’s HomeSite (www.allaire.com) A simple, but powerfuil, editor
• American Cybernetics Multi-Edit (www.amcyber.com) An HTML
editor that works well for programmers.
• Microsoft Frontpage (www.microsoft.com) an editor contained in a
powerful package than integrates directly with your web site.
• Netscape Composer (www.netscape.com) and editor that comes with the
Netscape communicator, more or less WYSIWYG. It is easy to use, but
somewhat limited.
Installing a Web Page:
To install a Web page like one.html on the World Wide Web you use
an Internet Service Provider (ISP) such as America Online (AOL),
Compuserve, or any one of thousands of local companies (including,
increasingly, phone companies that let you connect through fiber optics).
You can also use Web sites like GeoCities (www.geocities.com) that let you
install Web pages free webpage and be prepared for many matches. I got
53,113 matches), the actual installation process depends on your ISP, but I’ll
go over the process in general here.
What’s My URL?
ISPs have their own ways of shorting Web pages, and only they will
be able to tell you what your page’s web address, its URL, will be. For
example, if your ISP is named “starpowder.com” and your account’s name is

5
“steve”, your Web page’s URL, when you install it may be
http://ww.starpowder.com/steve/one.html.
Note the parts of this URL: It begins with “http” indicating that we’re
using HTTP, the web browser protocol, which is what you see to look at
web pages in browsers. Next is the name of the ISP followed by the name of
your account and then the name of the actual page itself, “one.html”? What
your Web page’s actual URL will be depends on the ISP; for example, it’s
common to place a tilde (-) before the account name like this:
http://www.starpowder.com/-steve/one.html. You might even end up with
something like this. http://www.starpowder.com/customers/steve/one.html.
This is something only your ISP can tell you, so make sure you ask it.
Viewing a web page:
You use a web browser to view your new Web page. There are two
ways to view a Web page: locally and from the internet. Local pages are on
your own computer. To open them, you just use the Open item in the Web
browser’s File menu. For example, say on.html was stored in the File menu.
In addition, both Netscape Navigator and Internet Explorer let yuou enter the
loction of Web page by typeing it directly into a box. You can type
c:wwwone.html directly into that box. On the other hand, if you want to
open a web page from the Internet, you connect to the Internet and enter the
URL of that page page directly into that box.
As you might expect, there are quite a few browser availble for you to use.
Here’s a partial list:
 Hotjava (http://java.sun.com/products/hotjava/) /sun microsystem’s
browsers which are well integrated with current jave versions.
 Lynx (www.lynx.browser.org) a text based Web browser, popular in
UNIX shell accounts.
 Microsoft Internet Explorer (www.microsoft.com/ie/) Microsoft’s
browser, now in Release 5. Internet Explorer is trying hard to become the
king of browser.s Free and huge, it’s become the choice of many. One of
the two top browsers.
 Netscape Navigator (www.netscape.com, part of the Nescape
Communicator suite) the original big browser; now in competition with
Internet Explorer; Navigator was the first one to come up with dynamic
HTML and many other innovations. One of the two top browsers.

6
Links and Lists:
LISTS IN HTML DOCUMENT:
Html 4 defines three kinds of lists:
 Ordered lists: typically labeled with numbers, alphabets, roman
numbers.
 Unordered lists: typically labeled with bullets, circle, or square.
 Glossary lists: in which each item in the list has a term and a
definition for that term, arranged so that term, arranged so that the
term is somehow highlighted or drawn out from the text.
Image element:
HTML provides for a way of aligning the text with relation to the
graphic. Simply add the ALIGN attribute to the IMG element. This
attribute can take one of three values: TOP, MIDDLE, or BOTTOM. If
you use the TOP value for the ALIGN attribute, the browser aligns the
top first line of the text even with the top of the graphic. The MIDDLE
value puts the baseline of the current line of the text even with the middle
of the image. The BOTTOM value aligns the baseline of the text with the
bottom of the graphic. By default, the BOTTOM value is used with the
IMG element.
<IMG SRC=”test.gif” HEIGHT=100 WIDTH=50>
CLICKABLE IMAGES:
Many home pages on the web contain clickable graphics. That is, you
can click on some images on a home page, and you go to a new URL.
You don’t want to change the URL, just the apprearance of the hyperlink.
Instead of using
<A HREF= “http://www.mysite.com”><IMG SRC=”mylog.gif”></A>
HTML LINKS:
If you are going to use a document that creates as a home page, you
need to add some hyperlinks so that you can jump to other pages. You
can jump to other pages that you create locally or you can link to pages
on other web servers. These links, also created in your HTML document,
enable you to click a word, a phrase, or even an image to connect with
other web resources.

7
You may recall that hyperlinks on web pages use underlying address
called URLs. It is short for universal resource locater. URLs are the
mechanism used by the web to find a particular page, image, or sound.
Basically, you can think of a URL as the address by which you find a
page.
URLs are either of two types. The first is an absolute URL. This URL
is a complete address, and nothing more is needed to find the
information. The second type of URL is a relative URL. A relative URL
is one that contains only the necessary address to find what you want
from where you currently are.
HTML TABLES:
Tables were one of the first extensions to HTML that were proposed
as part of HTML. Tables almost immediately revolutionized web page
design because tables can be used not just for presenting data in a tabular
form, but also for page layout and control over placement of various
HTML elements on a page.
The < TABLE> TAG to create a table in HTML, use the <
TABLE>………< /TABLE> tags, ehich contain the code for a caption
and then contents of the table itself. The most common attribute to the <
table> tag is the BORDER attribute. BORDER causes the table to be
drawn with a border around it, which can be a fancy border in a graphical
browser or just a series of dashes and pipes (|) in a text-based browser.
CAPTION:
Table caption tell your reader what the table is for. The <
CAPTION > tag goes inside the < TABLE > tag just before the
table rows, and it contains the title of the table. It closes with the
< /CAPTION > tag.
<CAPTION> employee table < /CAPTION>
ROWS AND CELLS:
Each table row is indicated by the <TR> tag and ends with the
appropriate closing </TR>. Each row, in turn, has a number of table cells,

8
which are indicated using the <TH>… </TH> (for heading cells) and
<TD>…</TD>tags (for data cells).
<TABLE>
<TR>
<TH>heading</TH>
<TD>data </TD>
<TD>data</TD>
</TR>
</TABLE>
DEFINING TABLE AND COLUMN WIDTHS:
TABLE WIDTHS:
The width attribute to the <TABLE> tag defines how wide the table
will be on the page. WIDTH can have a value that is
Either the exact width of the table (in pixels) or a percentage (such as 50
percent or 75 percent) of the current screen width, which can therefore
change if the window is resized. If width is specified, the width of the
columns with in the table can be compressed or expanded to fit the
required width.
COLUMN WIDTHS:
The WIDTH attribute can also be used on individual cells (<TH> OR
<TD>) to indicate the width of individual columns. As width tag in cells
can be an exact pixel width or apercentage (which is taken as a
percentage of the full table width).
Tables
Creating a Table
To create a table to use the <table> element which is the ease part?
Then it’s up to you to structure the table using the elements like <TR> to
create a table row.
<TD> to insert the data into the table, and <TH> to create the table
headings.
Example:
<TABLE>
<TR>
.

9
.
.
</TR>
.
.
.
</TABLE>
DIFFERENT TYPES OF TAGS
There are two different types of tags are available in HTML: They are:
1. Paired Tags
2. Unpaired Tags
1. PAIRED TAGS:
The tags which close corresponding to the given tags are called paired
tags.
Ex: <HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE>
</TITLE>
<BODY>
</BODY>
<A> </A>
2. Unpaired Tags:
The tags which doen’t has the closed corresponding tags are called
unpaired tags.

10
Ex: for the unpaired tags are
<p> <Br> etc
IMAGES:
We have been dealing exclusively with text. In this images concept ,
we can also include images with different attributes.Like we can give images
with width attribute , height attribute, center alignment of the image,
ATTRIBUTES
Width,
Center alignment,
Height
Border
Example of the images attributes
<HTML>
<HEAD>
<TITLE>IMAGES</TITLE>
</HEAD>
<BODY BACKGROUND=”background.gif”>
<CENTER>
<IMG SRC=”example.gif” border=”1” height=”144”
width=”200”>
</CENTER>
</BODY>
</HTML>
.

11
FORMATTING TEXT WITH <FONT>:
We have seen how to make pages visually richer using background
and images.
We demonstrate the common methods of formatting lines 15 through
17.
<p><font color=”red” size=”+1” face=”arial” > we have designed this
site to teach about the wonders of <EM>HTML</EM>.</FONT>
Here several attributes of the font elements are demonstrated .The first
attribute is COLOR,which indicates the colour of the formatted text in the
same manner in which you indicate a background colour:You enter either a
preset colour name or a hex colour code remember to include the quotation
marks around the color name.
Note that you can set the font color for the whole document by putting
a TEXT attribute into the body element indicating the color in the same
manner as above.
<HTML>
<HEAD>
<TITLE>FONT</TITLE>
</HEAD>
<BODY BGCOLOR=”BLUE”>
<FONT COLOR=”red” SIZE=”+1” FACE =”ARIAL” >
</font>
In this text can be appears in the red color with font face arial.
<FONT COLOR=”green” SIZE=”+1” FACE =”helvectica” >
In this you will get the text with color green with font face helvectica.
</font>
</BODY>
</HTML>

12
<FRAMESET>Tag
All of the Web pages we have designed so far have the ability to
link to other pages but can display only one page at a time.Which can help
you display more than one HTML file at a time Frames, when used properly,
can make your site more readable and usable for your users.
<HTML>
< HEAD>
<TITLE>FONT</TITLE>
</HEAD>
<FRAMESET COLS=3”>
<FRAME NAME=”XYZ”>
<FRAME NAME=”ABC”>
</FRAMESET>
</HTML>
HEADERS:
Headers are simple form of text formatting that varies text size
based on the headers level. The 6 header elements H1 through H6 are often
used to delineate new sections and sub sessions of the page.
They are used and their relative display sizes.Note that the
actual size of the text of each header element is selected by the browser &
can infact very significantly between the browsers.Later to discuss how you
can take control on sprcifying the text sizes and the text attributes as well.
Summary:
HTML is not a procedural programming languagelike C, FORTRAN,
Cobal.It is a markup language that identifies the elements of a page so that a
browser can render the page on the screen.
HTML is used to format text & information.This marking up of
information is different from the intent of traditional programming
languages, which is to perform actions in the designated order.

13
In HTML text is markup with elements, delineated by tags that are
key words contrain in pairs of angle brackets.
Create HTML files also called HTML document using a text editor. A
text editor called Notepad is built into windows. Tou can alsodownload an
HTML share ware sourcecode editororuse Microsoft’s Visual interDev.
All HTML files reqire either the .htm or the .html file name
extensions
Comments in HTML always begin with <!—and end with & can
span across the several source lines. The browser ignores any text & or tags
placed inside a comment.
Every HTML file is separated into a header section & a body.
Includiong a title is for every HTML document.Use the
<TITLe>……..</TITLE>
Tags to do so.They are placed inside a header.
<Body>opens the body element the body of an HTMLdoc is the area
where you place all content you would like browser to display.
All text between the <p>…</p> tags one paragraph. The paragraph
will be set a part from all other material on the page by aline vertical of
space both before & after the paragraph.
The center elementcauses all material with lists <center> and
</center> tags to be placed horizontal in the browser window.
DHTML
Introduction:
In this DHTML topic there are mainly draging and dropping, data
binding and behaviours. Netscape Navigator does not support these topics,
unfortunately except for draging and dropping, and of course you implement
it differently than you would in internet explorer.

14
Dragging and Dropping:
There are two ways to implement dragging and dropping in internet
explorer First one is Simple Dragging and dropping using obsolute position
in with styles, and the second one is dragging and Dropping of the data.
Simple Dragging and Dropping using mouse clicks and settings an elements
position to match mouse moments. Dragging and dropping of data, on the
other hand, involves specialized data transfer: you can even dragg and drop
data across applications. In Nestscape Navigator you use layers to
implement dragging and dropping.
These dragging operations being then the mouse button are pressed
when the mouse is on the image. Because there are two images the code
needs to determine which one of being dragged, and I do that with the event
objects srcElement properties. Note that I also check to make sure that a
type of element being dragged is in deed an image before allowing it to be
dragged, and then I stored the dragged images id in a variable names .
Data Binding:
Another important aspect of dynamic HTML, in internet Explorer is
dta binding, Using binding, you can connect you can connect HTML
elements in a web page to a data source. There are two aspects to this
process using data source objects object (DSOs) and blinding to HTML
elements.
Data Source Objects:
There are a variety of DSOs in internet explorer, including the
Microsoft HTML (MSHTML) control, the tabular data control (TDC), and
the extensible Markup Language (XML) data source control. I’ll take a look
at all of them in this chapter. I’ll also take a look at the more complex
remote remote data service (RDS) DSO, which you use to connect to data
base application son web servers. It uses RDS to connect to the Microsoft
SQL, server on a web server.
DSOs are invisible in the webpge, but you can bind them to HTML
elements and control their behaviour with buttons and other controls. Using
the MSHTML control makes this process easy. For example, say that you
have Web page with data about various employess, employee.htm, which

15
looks like the following example where a <SPAN> element is used to
identify the fields of your database NAME ID, HIRE_DATE, nd
DEPARTMENT each group of such elements forms a record.
Internet Explorer Behaviors:
As of internet explorer 5, dynamic HTML supports behaviours. As the
name indicates, behaviours set the behaviours of HTML elements. For
example, you can create behaviour that applys a different filter to HTML
elements. Each time it’s invoked. You can think of behaviours much like
styles, which you can code using java script or other scripting languages.
To create behaviour, you write HTML components (HTC) which is a
separate HTML file that holds the script for the behaviour. Microsoft‘s
motivation in creating HTC was to separate code from data, which has
become a big moment in HTML programming these days (and its one of the
reason the www consortium would not make the <LAYER> element into an
official element).
You can use HTC to implement behaviors that do the following:
 Access the containing pages Dynamic HTML object model you can use
the element object in HTCs to accesss the actual element that has the
behaviour attatched. Using this object, you can access properties,
methods and events of containing document.
 Expose custom events you can create events with the Events element.
These events will be sending to the containing page with the element’s
fire method.
 Expose properties and methods You can creates properties and methods
with the PROPERTY and METHOD elements, respectively
 Reeceive Notifications You can use the ATTACH element to make sure
that the browser will pass on standard events to the HTC.

16
Features of DHTML:
Dynamic HTML isn’t radically different from regular HTML.
All the old tags are still supported, and scripts inside the page can exploit an
expanded object model that’s compatible with the previous version, so
they’ll continue to work as before. In a sense and at the risk of
oversimplifying, we can say that the real difference between regular HTML
and Dynamic HTML is in how the page is interpreted by the browser when
the page is being downloaded from the remote server.
Among the new features of DHTML, the following ones
deserve special mention:
Dynamic redrawing of the page, which means that you
can change the style, the color or any other attribute of an element
of the page.
The DHTML object model gives you access to any element of
the page, including tags, images and paragraphs.
Styles and style sheets have been expanded with more
attributes, a so they give you more control over the page elements.
The new event model adds flexibility in how a user’s actions
can be processed by scripts in the page.
DHTML includes many other improvements over traditional
HTML, such as better control over the creation of tables and support for
additional graphic formats.

17
CONCLUSION:
HTML is used to format text & information. This marking up of
information is different from the intent of traditional programming
languages, which is to perform actions in the designated order. HTML
provides for a way of aligning the text with relation to the graphic. You use
a web browser to view your new Web page. There are two ways to view a
Web page: locally and from the internet. Local pages are on your own
computer. To open them, you just use the Open item in the Web browser’s
File menu. HTML (Hypertext Markup Language) is the language you use to
create Web pages. Left to themselves, Web browsers would take the text and
images in your Web page and wrap them up into what looks like a single
Paragraph without any line breaks.
REFERENCE:
DYNAMIC HTML REFERENCE AND SOFTWARE
DEVELOPMENT
- FRANCESCO BALENA.

Raju html

More Related Content

What's hot

Similar to Raju html

More from Shiva Krishna Chandra Shekar

Recently uploaded

Raju html