What Is An HTML File?

Chapter 2: Introduction to HTML
What is an HTML File?

 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor
Do You Want to Try It?

If you are running Windows, start Notepad.
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "mypage.htm".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your
browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file
you just created - "mypage.htm" - select it and click "Open". Now you should see an address in
the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will
display the page.
The first tag in your HTML document is <html>. This tag tells your browser that this is
the start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in
your browser's caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
You can easily edit HTML files using a WYSIWYG (what you see is what you get)
editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
However, if you want to be a skillful Web developer, we strongly recommend that you use a
plain text editor to learn your primer HTML.
Web browser
A web browser is a software application which enables a user to display and interact
with text, images, videos, music and other information typically located on a Web page at a
website on the World Wide Web or a local area network. Text and images on a Web page can
contain hyperlinks to other Web pages at the same or different website. Web browsers allow a
user to quickly and easily access information provided on many Web pages at many websites by
traversing these links. Web browsers format HTML information for display, so the appearance of
a Web page may differ between browsers.
Some of the Web browsers currently available for personal computers include Mozilla
Firefox, Safari, Konqueror, Opera, Flock, Internet Explorer, Epiphany and AOL Explorer. Web
browsers communicate with Web servers primarily using HTTP (hypertext transfer protocol)
to fetch webpages. HTTP allows Web browsers to submit information to Web servers as well as
fetch Web pages from them.
Pages are located by means of a URL (uniform resource locator), which is treated as an
address, beginning with http: for HTTP access. Many browsers also support a variety of other
URL types and their corresponding protocols, such as gopher: for Gopher (a hierarchical
hyperlinking protocol), ftp: for FTP (file transfer protocol), rtsp: for RTSP (real-time
streaming protocol), and https: for HTTPS (an SSL encrypted version of HTTP).
HTML tags vs. elements vs. attributes

When talking (or writing) about HTML, it is common for many people to refer to just
about everything as “tags” instead of using the proper terms: “tag”, “element”, and “attribute”.
A lot of the time what the author really means can be figured out by looking at the context, but
sometimes it can be confusing.
Using the correct terminology is not very difficult. It will also make it easier for others to
correctly interpret what you mean, not to mention lend more credibility to what you have to say.
This is pretty basic knowledge, but in case you need to refresh your memory I’ve written a quick
explanation of tags, elements, and attributes in HTML.
HTML Elements
HTML documents are text files made up of HTML elements. An element in HTML
represents some kind of structure and generally consists of a start tag, content, and an end tag.
The following is a paragraph element:
<p>
This is the content of the paragraph element.
</p>
In this example the HTML element starts with a start tag: <p>
The content of the HTML element is: This is the content of the paragraph element.
The HTML element ends with an end tag: </p>
HTML Tags
Tags are elements of the HTML document used to specify how the document should be
displayed by the browser. In HTML, each tag has its own specific meaning, which is (in general)
common across all different browsers. Tags are used to mark up the start and end of an HTML
element.
A start tag consists of an opening angle bracket (<) followed by the element name, zero
or more space separated attribute/value pairs, and a closing angle bracket (>).
A start tag with no attributes:
<p>
A start tag with an attribute:
<p class="info">
End tags consist of an opening angle bracket followed by a forward slash, the element
name, and a closing angle bracket:
</p>
There are also some elements that are empty, meaning that they only consist of a single
tag and do not have any content. In HTML, such tags look just like opening tags:
<br>
 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>
Attributes of the tag

Attributes are associated with each tag to further define the tags. Or it defines a property
for an element, consists of an attribute/value pair, and appears within the element’s start tag. The
general syntax is as follows:
<tag attribute 1 = "value" attribute 2 = "value" ... >
e.g. <img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's
foobar.">
Why do we Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. If
you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their
source code. We always use lowercase tags. Why?
If you want to follow the latest web standards, you should always use lowercase tags. The
World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4
recommendation, and XHTML (the next generation HTML) demands lowercase tags.
Structure of HTML code

An HTML 4 document is composed of three parts:
1. a line containing HTML version information,
2. a declarative header section (delimited by the HEAD element),
3. a body, which contains the document's actual content. The body may be implemented by
the BODY element or the FRAMESET element.
White space (spaces, newlines, tabs, and comments) may appear before or after each section.
Sections 2 and 3 should be delimited by the HTML element. Here's an example of a simple
HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line
breaks.
The best way to learn HTML is to work with examples. We have created a very nice
HTML editor for you. With this editor, you can edit the HTML source code if you like, and click
on a test button to view the result.
The <html> tag

The <html> tag delimits the beginning & end of an HTML document. It is often called as root
element, as it is the root of an inverted tree structure containing the tags & content of a
document. The <html> tag, however, directly contains only the <head> tag, the <body> tag, and
potentially the <frameset> tag instead of the <body> tag.
The <head> tag

The <head> element can contain information about the document. The browser does not
display the "head information" to the user. The following tags can be in the head section: <link>,
<meta>, <script>, <style> and <title>.
The <body> tag

The body element defines the documents' body. It contains all the contents of the document
(like text, images, colors, graphics, etc.).
Attributes of body tag are: <body bgcolor="black" text="red" link="yellow"
alink="orange" vlink="white" background="image.gif">
The <title> tag

This element defines the title of the document. It will be viewable in the title bar of the
browser.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn't
make any sense.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will
be ignored by the browser. You can use comments to explain your code, which can help you
when you edit the source code at a later date.


Note that you need an exclamation point after the opening bracket, but not before the
closing bracket.
Exercise 1:
Design a simple page ‘hello.html’ with the title “First Page” and displays following messages as
headings:
Hello World.
This is first HTML page.
With paragraph that describe some information about HTML tags and write proper comments,
heading in it.
Using Lists in HTML

List tags, like paragraphs and preformatted text, are generally HTML containers that are
capable of accepting other container and empty tags within their boundaries. These list tags are
responsible for affecting the spacing and layout of text, not the emphasis, so they are applied to
groups of text, and allow individual formatting tags within them.
Most HTML lists are created following the form:
<LIST TYPE>
<ITEM> First item in list
<ITEM> Second item in list
<ITEM> Third item
</LIST TYPE>
Each of the items appears on its own line, and the <ITEM> tag itself is generally
responsible for inserting either a bullet point or the appropriate number, depending on the type of
list that's been defined. It's also possible that the <ITEM> tag could insert no special characters
(bullets or otherwise), as is the case with definition listings.
Types of List
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles) using the attribute ‘TYPE’.
TYPE = DISC | CIRCLE | SQUARE
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers using the
attribute ‘TYPE’.
TYPE = 1 | A | a | I | i type of numerals
START: where to start counting
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.
The important attribute of definition list is ‘COMPACT’
COMPACT: take up less space
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.
Nested Lists
A nested list is nothing but not a list of items. This is a list of terms and explanation of
the terms. The important attribute of definition list is ‘COMPACT’
COMPACT: take up less space
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Block Level Tags

The short definition is that block-level elements are elements that create blocks or large
groupings of text. Block-level elements have some specific distinctions from inline elements:
 Block-level elements generally can contain text, data, inline elements, or other block-
level elements.
 Block-level elements generally begin new lines of text.
 Block-level elements inherit directionality information differently from inline elements.
Examples:
<address> </address>
The <ADDRESS> tag is used for information such as addresses, authorship and so forth. The
text is usually italicized and in some browsers it is indented.
<address>
Author: of this document:<br />
<a href="mailto:donald@disneyland.com">Donald Duck</a>
</address>
<blockquote> </ blockquote >

The <blockquote> tag is used to set off long quotes or citations by usually indented the
enclosed text on both sides. Some browsers italicize the text as well. Whereas <q> is used for
short quote.
Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a
long quotation. This is a long quotation. This is a long
quotation.
</blockquote>
Here comes a short quotation:
<q>This is a short quotation</q>
<p>With the block quote element, the browser inserts line breaks
and margins, but the q element does not render as anything
special.</p>
<h1> </h1> to <h6> </h6>

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1 align="center"> This is a heading1</h1>
<h2>This is a heading</h2>
HTML automatically adds an extra blank line before and after a heading.
<pre> </pre>
The pre element defines preformatted text. The text enclosed in the pre element usually
preserves spaces and line breaks. The text renders in a fixed-pitch font. The width attribute
defines the maximum number of characters per line (usually 40, 80, or 132)
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<font> </font>
The <font> tag specifies the font face, font size, and font color of text.
<font size="3" color="red">
This is some text!
</font>
<font size="1" color="blue" face="arial">
This is some text!
</font>
<font color="red">
You may have read that the <font> tag has been deprecated. This means that the tag is no
longer a part of the HTML specification. While browsers will still support it as it is used for long
time. Alternative way is to use CSS. CSS can do all the same things that the <font> tag can do,
plus a lot more.
<span style="font-family : garamond, times;">this font is
not sans-serif</span>
<span style="color : #9933ff;">this font is purple</span>
<span style="font-size : x-large;">this text is extra
large</span>
One thing CSS can do that the font tag cannot, is CSS can change the background color
behind the text. <span style="background-color : #9933ff;">The background behind
this text is purple</span>
Finally, there are some other tricks you can do with CSS that the font tag cannot do:
<span style="text-decoration : underline;">this text is

underlined</span>
<span style="text-align : right;">this text is aligned to the
right</span>
<span style="text-indent : 15px;">this text is indented 15
pixels</span>
<span style="text-transform : capitalize;">this text is
capitalized</span>
<span style="text-transform : uppercase;">this text is
uppercase</span>
Text Level Tags

Text Level Tags do not insert breaks before and after themselves, but instead can be
inserted inline and flow with the text. Text Level Tags mark content to affect appearance and/or
denote lexical importance, meaning, function, or role. Text level tags are divided into five sub-
groups:
1. Text Markup Tags: The Text Markup Tags affect appearance of text.
2. Phrase Markup Tags: Phrase Markup Tags denote lexical importance. Visually
some appear similar to some Text Markup Tags.
3. Special Markup Tags
4. Client-side Image Map Tags
5. Form Control Text Tags
Text Markup Tags

b Bold style text. <b>Bold words </b>indeed!
big Large style text. <big>Big words </big>too!
i Italic style text.
What does <i>HTML</i> mean?
s Strike-through style text.
Scratch the <s>last words</s>.
smal Small style text.
l I'm getting <small>smaller</small>.
tt Teletype, mono-spaced, or typewriter
style text. Give me some <tt>type</tt>.
sub places text in subscript style
The fox <sub> red </sub> jumped over
the dog.
sup places text in superscript style
The fox <sup>quick</sup> jumped over
the dog.
u Underlined style text. Looks too much
like a hyperlink Don't use <u>underline</u>!
Phrase Markup Tags

abbr Indicates an abbreviated form, like <p>A, B, C, <abbr
"Inc.", "etc.". By marking up title="etcetera">etc.</abbr></p>
abbreviations you can give useful
information to browsers, spell checkers,
translation systems and search-engine
indexers.
acrony The <acronym> tag defines the start of The <acronym title="Central
m an acronym, like "NATO". By marking
up acronyms you can give useful Intelligence
information to browsers, spell checkers, Agency">CIA</acronym>.
translation systems and search-engine
indexers.
em Renders as emphasized text Emphasize <em>this</em>!
strong Renders as strong emphasized text Emphasis <strong>this even
more</strong>!
Special Markup Tags

a Anchor (details r given below table) Visit <a href = "index. htm">home page
</a>.
applet Java applet. Use <object> instead.
An applet could run here:
<applet code = "myapp.class" width="100"
height="100"> …..</applet>.
br Forced line break (inline)
This is above, <br>while this is below.
img Embedded image (inline)
<img border="0"
src="../../images/logos/GHLogo.gif"
alt="Shows this line if images are

disabled."
width="34" height="61">
noscrip Alternate content container for non
t script-based rendering. Creates inline <script language="JavaScript">
content for browsers that don't accept
script. 
</script>
<noscript> OFF. </noscript> </p>

script The <script> tag can also create scripts
in the <head>, so <script> can also be script></script>
span Generic language/style container. Marks
a section of a document. <span> is text <div class="Great Books">
level tag and flows inline with text,
whereas <div> is a block level tag and <span class="Title">The Hobbit</span>
inserts breaks before and after itself. by
<span class="Author">J.R.R.
Tolkien</span>.
</div> but not around the spans.</p>
More about <a> tag:

An anchor can serve either or both of these functions:
1. Use the href attribute to enclose a hyperlink and defines what it points to.
2. Use the name/id attribute to defines a "bookmark" on a page that other hyperlinks can
point to. An <a> tag cannot be nested.
The NAME attribute specifies the current anchor as a potential bookmark target of other
links. The NAME attribute must be unique on the document. The ID attribute may be used
instead.
The HREF attribute specifies the target of the current anchor. The target is usually an
absolute URL (eg http:\\yadayada) or a relative URL (dogs/nice.htm). The URL may also point
to a specific bookmark on the page with the syntax of URL#bookmark. The bookmark is usually
an <a> tag with its NAME attribute specified. The TARGET attribute names the frame where a
document will be opened.
AttributeValue Description
href URL The target URL of the link
name section_name Names an anchor. Use this attribute to create a bookmark in a
document.
In future versions of XHTML the name attribute will be replaced by
the id attribute!!
target _blank Where to open the target URL.
_parent _self
_top  _blank - the target URL will open in a new window
 _self - the target URL will open in the same frame as it was
clicked
 _parent - the target URL will open in the parent frameset
 _top - the target URL will open in the full body of the window
Example
Visit the <a href="index.htm">home page of this directory</a>.
Visit the home page of this directory.
Clicking <a href="#THERE">HERE</a> takes you to

<a name="HERE">HERE</a>, but HERE could really be any place on
any page.
Clicking HERE takes you to THERE, but THERE could really be any place on any page.
<a href="javascript:myFunction()">This link calls a JavaScript

function.</a>
This link calls a JavaScript function.
Send e-mail to
<a href="mailto:a@b.com?
cc=y@z.com&bcc=1@2.com&subject=test&body=world">
a@b.com
</a>
with cc as y@z.com</a>,
bcc as 1@2.com,
subject as hello, and
body as world.
Send e-mail to a@b.com with cc as y@z.com, bcc as 1@2.com, subject as hello, and body as
world.
<a href="anypage.htm" target="_top">Outa here!</a>

The link above would open a page on the top of other.
Inserting Images in Your Documents

Graphic file formats
Because of the bandwidth issues surrounding networked delivery of information and
because image files contain so much information, Web graphics are by necessity compressed.
Different graphic file formats employ varying compression schemes, and some are designed to
work better than others for certain types of graphics.
Neither HTML nor XHTML prescribes an official format for images. However, the
popular browsers specifically accommodate certain image formats: GIF and JPEG, in particular.
A third format, PNG, has been available since 1995 but has been little used because of poor
browser support.
Most other multimedia formats require special accessory applications that each browser
owner must obtain, install, and successfully operate to view the special files (e.g. Flash player is
needed to run flash movies/clips). So it's not too surprising that GIF and JPEG are the de facto
image standards on the Web.
Both image formats were already in widespread use before the Web came into being, so there's
lots of supporting software out there to help you prepare your graphics for either format.
However, each has its own advantages and drawbacks, including features that some browsers
exploit for special display effects.
Understanding Image Formats
GIF
The Graphics Interchange Format (GIF) was first developed for image transfer among
users of the CompuServe online service. The format has several features that make it popular for
use in HTML and XHTML documents.
Its encoding is cross-platform, so that with appropriate GIF-decoding software (included
with most browsers), the graphics you create and make into a GIF file on a Macintosh, for
example, can be loaded into a Windows-based PC, decoded, and viewed without a lot of fuss.
The second main feature is that GIF uses special compression technology that can
significantly reduce the size of the image file for faster transfer over a network.
GIF compression is "lossless," too; none of an image's original data is altered or deleted,
so the uncompressed and decoded image exactly matches its original.
Also, GIF images can be easily animated and used to make excellent icons, reduced color
images, and drawings.
Even though GIF image files invariably have the .gif (or .GIF) filename suffix, there
actually are two GIF versions: the original GIF87 and an expanded GIF89a, which supports
several new features — including transparent backgrounds, interlaced storage, and
animation — that are popular with web.
Transparency allows the background that an image is placed upon to show through,
making a variety of complex effects possible. Interlacing allows an image to load in a venetian-
blind fashion rather than from top to bottom a line at a time. (shadow shading effect). The
interlacing effect allows a user to get an idea of what an image looks like before the entire image
has downloaded. Animation contains a series of GIF images. The browser displays each image in
the file, one after the other that give effect of moving clip.
The currently popular browsers support both GIF versions, which use the same encoding
scheme that maps 8-bit pixel values to a color table, for a maximum of 256 colors per image.
Most GIF images have even fewer colors; there are special tools to simplify the colors in more
elaborate graphics.
By simplifying the GIF images, you create a smaller color map and enhance pixel
redundancy for better file compression and, consequently, faster downloading.
However, because of the limited number of colors, a GIF-encoded image is not always
appropriate, particularly for photorealistic pictures.
JPEG
The Joint Photographic Experts Group (JPEG) is a standards body that developed what is now
known as the JPEG image-encoding format.
Like GIFs, JPEG images are platform-independent and specially compressed for high-
speed transfer via digital communication technologies.
Unlike GIF, JPEG supports tens of thousands of colors for more detailed, photorealistic
digital images.
And JPEG uses special algorithms that yield much higher data-compression ratios. It is
not uncommon, for example, for a 200-KB GIF image to be reduced to a 30-KB JPEG image. To
achieve that amazing compression, JPEG does lose some image data.
Although JPEG is an excellent choice for photographs, it's not a particularly good choice
for illustrations.
The algorithms used for compressing and uncompressing the image leave noticeable
artifacts when dealing with large areas of one color. Therefore, if you're trying to display a
drawing, the GIF format may be preferable.
The JPEG format, usually designated by the .jpg (or .JPG) filename suffix, is nearly
universally understood by today's graphical browsers.
When to Use Images

Most pictures are worth a thousand words. But first and foremost, think of your document
images as visual tools, not gratuitous trappings. They should support your text content and help
readers navigate your documents.
Use images to clarify, illustrate, or exemplify the contents. Content-supporting
photographs, charts, graphs, maps, and drawings are all natural and appropriate candidates.
Product photographs are essential components in online catalogs and shopping guides, for
example. And link-enabled icons and dingbats, including animated images, can be effective
visual guides to internal and external resources.
If an image doesn't do any of these valuable services for your document, throw it out
already!
One of the most important considerations when adding images to a document is the
additional delay they add to the retrieval time for a document over the network. While a common
text document might run, at most, 10 or 15 thousand bytes, images can easily extend to hundreds
of thousands of bytes each. And the total retrieval time for a document get increase.
When to Use Text

Text hasn't gone out of style. For some users, it is the only accessible portion of your
document. We argue that, in most circumstances, your documents should be usable by readers
who cannot view images or have disabled their automatic download in their browsers to improve
their connections. Or you should create text-only documents when access speed is critical.
Documents being converted to the Web from other formats rarely have embedded
images. Reference materials and other serious content often are completely usable in a text-only
form.
Text is most appropriate if your documents are to be readily searchable by any of the
many web indexing services. Images are almost always ignored by these search engines. If the
major content of your pages is provided with images, very little information about your
documents will find its way into the online web directories.
Speeding Image Downloads

There are several ways to reduce the overhead and delays inherent with images, besides
being very choosy about which to include in your documents:
Keep it simple
A full-screen, 24-bit color graphic, even when reduced in size by digital compression
with one of the standard formats, such as GIF or JPEG. Acquire and use the various image-
management tools to optimize image dimensions and number of colors into the fewest number of
pixels.
Simplify your drawings. Avoid large, empty backgrounds in your images, as well as
gratuitous borders and other space-consuming elements.
Also avoid dithering (blending two colors among adjacent pixels to achieve a third
color); this technique can significantly reduce the compressibility of your images.
Strive for large areas of uniform colors, which compress readily in both GIF and JPEG
formats.
Reuse images
This is particularly true for icons and GIF animations. Most browsers cache incoming
document components in local storage for the very purpose of quick, network-connectionless
retrieval of data. For smaller GIF animation files, try to prepare each successive image to update
only portions that change in the animation, rather than redrawing the entire image (this speeds up
the animation, too).
Divide up large documents

This is a general rule that includes images. Many small document segments, organized
through hyperlinks and effective tables of contents, tend to be better accepted by users than a few
large documents.
One accepted rule of thumb is to keep your documents under 50 KB each, so even the
slowest connections won't overly frustrate your readers.
Isolate necessarily large graphics
Provide a special link to large images, perhaps one that includes a thumbnail of the
graphic, thereby letting readers decide if and when they want to spend the time downloading the
full image.
Specify image dimensions
Finally, another way to improve performance is by including the image's rectangular
height and width information in its tag. By supplying those dimensions, you eliminate the extra
steps the extended browsers must take to download, examine, and calculate an image's space in
the document.
JPEG or GIF?
You may choose to use only JPEG or GIF images in your HTML documents if your
sources for images or your software toolset prefers one over the other format. Both are nearly
universally supported by today's browsers, so there shouldn't be any user-viewing problems.
Nevertheless, we recommend that you acquire the facilities to create and convert to both
formats to take advantage of their unique capabilities. For instance, use GIF's transparency
feature for icons and dingbats. Alternatively, use JPEG for large and colorful images for faster
downloading.
Adding image to document

When your graphics are created, cropped, resized, and saved in the appropriate formats,
you're ready to add them to your Web pages. One of the most compelling features of HTML and
XHTML is their ability to include images with your document text, either as an intrinsic
components of the document (online images), as separate documents specially selected for
download via hyperlinks, or as a background for your document.
To add graphics, you use an empty tag called the <IMG> (image) tag, which you insert
into the body section of your HTML document as follows:
<IMG SRC="image URL">
or
<IMG SRC="path/filename">
Some important attributes of <IMG> tag:

 SRC: Accepts the name of the file that you want to display, and image URL (or
path/filename) is the absolute (full URL) or relative path (for a local file or a file in the
current directory) to the image.
 ALT: The ALT attribute is designed to accept text that describes the graphic, in case a
particular browser can't display the graphic.
 ALIGN: specifies how graphics appear relative to other elements (like text or other
graphics). Using the ALIGN attribute, you can align other elements to the top, middle, or
bottom (default setting) of the graphic.
 HEIHGT: specifies the image’s height.
 WIDTH: specifies the image’s width.
Images are measured in pixels (picture elements), which represent dots of color on the
screen. Users can create images using specialized software, such as Adobe Photoshop Elements,
Macromedia Fireworks and Paint Shop Pro etc.
Examples:
1> <p>An image: <img src="constr4.gif" width="144" height="50">
</p>
<p>A moving image:<img src="hackanm.gif" width="48"
height="48"></p>
<p>Note that the syntax of inserting a moving image is no
different from that of a non-moving image.</p>
2> Inserting image from different location:

<p> An image from another folder:
<img src="/images/netscape.gif" width="33" height="32">
</p>
<p>An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif"> </p>
3> Adding image to background of page.

<html> <body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML
backgrounds.</p>
<p>If the image is smaller than the page, the image
will repeat itself.</p>
</body> </html>
4> How to align an image within the text. (if text is large paragraph then image will float
accordingly.)
<p> An image
<img src="hackanm.gif" align="bottom" width="48"
height="48"> in the text</p>
<p>An image
<img src ="hackanm.gif" align="middle" width="48"
height="48"> in the text</p>
<p>An image
<img src ="hackanm.gif" align="top" width="48"
height="48"> in the text </p>
<p>Note that bottom alignment is the default alignment</p>
<p> An image
<img src ="hackanm.gif" width="48" height="48"> in the
text </p>
<p> <img src ="hackanm.gif" width="48" height="48"> An image
before the text </p>
<p> An image after the text <img src ="hackanm.gif"
width="48" height="48"> </p>
5> This example demonstrates how to display an alternate text for an image & image as a
hyperlink.
<img src="goleft.gif" alt="Go Left" width="32" height="32">
<p> Text-only browsers cannot display images and will only
display the text that is specified in the "alt" attribute
for the image. Here, the "alt"-text is "Go Left".</p>
<p> Note that if you hold the mouse pointer over the image,
most browsers will display the "alt"-text. </p>
<p>You can also use an image as a link:

<a href="lastpage.htm"> <img border="0" src="buttonnext.gif"
width="65" height="38"> </a> </p>
Example of image map.(std)

<html> <body>
<p> Click on one of the planets to watch it closer: </p>

<img src="planets.gif" width="145" height="126"
usemap="#planetmap">
<map id="planetmap" name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury"
href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm">
</map>
<p><b>Note:</b> The "usemap" attribute in the img element
refers to the "id" or "name" (browser dependant) attribute in
the map element, therefore we have added both the "id" and
"name" attributes to the map element.</p>
</body> </html>
Adding Tables to Your Documents

Tables work a lot like HTML list tags, in that you must use the table container tag to hold
together a group of tags that define each individual row. The main container is the <TABLE>
tag, which uses enclosing tags for table rows (<TR>) and table data (<TD>). Most tables will
also use an element for table headers (<TH>) which is generally used as the title text for rows
and columns. Tables take the following format:
<TABLE>
<CAPTION>Caption text for table</CAPTION>
<TR><TH>column1</TH><TH>column2</TH><TH>column3</TH>
<TR><TD>row1data1</TD><TD>row1data2</TD><TD>row1data3</TD>
<TR><TD>row2data1</TD><TD>row2data2</TD><TD>row2data3</TD>
... </TABLE>
The <TABLE> Tag

Some of the most important attributes of the <TABLE> tag are:
 ALIGN. The ALIGN attribute is used to determine where the chart will appear relative to
the browser window.
 WIDTH. The WIDTH attribute sets the relative or absolute width of your table in the
browser window. Values can be either percentages or absolute values.
 COLS. The COLS attribute specifies the number of columns in your table, allowing the
browser to draw the table as it downloads.
 BORDER. The BORDER attribute defines the width of the border surrounding the table.
Default value is 1 (pixel).
 CELLSPACING. The CELLSPACING attribute tells the browser how much space to
include between the walls of the table and between individual cells. (Value is a number in
pixels.)
 CELLPADDING. The CELLPADDING attribute tells the browser how much space to
give data elements away from the walls of the cell. (Value is a number in pixels.)
The <CAPTION> tag

The CAPTION tag gives the headings to the table. The CAPTION element is only
permitted immediately after the TABLE start tag. A TABLE element may only contain one
CAPTION element. User can quickly grasp the structure of the table from the headings as well
as the caption.
<CAPTION ALIGN="BOTTOM">Favorite <I>Ice Cream</I> Flavors</CAPTION>
The <TH> Tag

This tag is used to define a table header cell in a table. The text within the <TH> element
usually renders in bold. Some of the most important attributes of the <TH> tag are:
 ALIGN: horizontal alignment of cell contents
 BGCOLOR: background color
 COLSPAN: indicates the number of columns the cell spans.
 NOWRAP: Whether to disable or enable automatic text wrapping in this cell.
 ROWSPAN: Indicates the number of rows this cell should span.
 WIDTH: Specifies the width of the table cell. Deprecated.
The <TR> Tag

This tag is used to define a table row. The tag is a container tag and the tag pair <TR>
</TR> should contain a sequence of <TD> and <TH> containers. The <TR> tag can only
meaningfully appear within a <TABLE> </TABLE> container.
The <TD> Tag
<TD> and </TD> set a single table cell. The attributes ROWSPAN & COLSPAN varies
the span of rows and columns in a table and can be helpful for grouping information, adding
emphasis, or eliminating empty cells.
Some of the most important attributes of the <TD> and <TR> tags are:
 ALIGN: horizontal alignment of cell contents
 VALIGN: vertical alignment of cell contents
 WIDTH: width of cell
 HEIGHT: height of cell
 COLSPAN: number of columns to cover
 ROWSPAN: number of rows to cover
 NOWRAP: don't word wrap
 BGCOLOR: color of the background
 BORDERCOLOR: color of border around the table
 BORDERCOLORDARK: color of "dark" part of border around the table
 BORDERCOLORLIGHT: color of "light" part of border around the table
 BACKGROUND: picture to use as background
Example:
1> This example demonstrates how to create tables in an HTML document.
<html><body>
<h4>One row and three columns:</h4>
<table border="1">
<tr> <td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>With a normal border:</h4>
<table border="1">
<tr> <td>First</td>
<td>Row</td>
</tr>
<tr> <td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>

<table border="8">
<tr> <td>First</td>
<td>Row</td>
</tr>
<td>Row</td>
</tr>
</table>
</body></html>
2> This example demonstrates how to display table caption & headers. (& 2 rel)
<html><body>
<h4>Table headers:</h4>

<table border="1">
<caption>My Caption</caption>
<tr> <th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr> <td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>\
<table border="1">
<tr> <th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr> <th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr> <th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body></html>
3> This example demonstrates how to define table cells that span more than one row or one
column.
<html><body>

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr> <th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr> <td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1">
<tr> <th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr> <th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr> <td>555 77 855</td>
</tr>
</table>
</body></html>
4> This example demonstrates cellspacing & cellpadding

<html><body>
<h4>Without cellspacing & cellpadding:</h4>
<table border="1">
<tr> <td>First</td>
<td>Row</td>
</tr>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr> <td>First</td>
<td>Row</td>
</tr>
<td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr> <td>First</td>
<td>Row</td>
</tr>
<td>Row</td>
</tr>
</table>
</body></html>
Exercise: Create table with background.
Frames
The use of frames splits the browser window into a group of distinct sub-windows or
panes. By dividing the page into different parts-each of which can be updated separately-there
becomes a number of different interface elements you can offer. Even a simple use of the frame
specification lets you add interface graphics or a corporate logo to a site, while the rest of your
page scrolls beneath it.
Using frames in this way takes you one step closer to the ideal Web interface, because it
makes it as intuitive and universal as possible. Frames are ideal for the following:
 Table of Contents (TOC). By placing the TOC in a "column" on your Web page, people
can click around your site or your documentation pages without being forced to
constantly move "back" to the contents page. Instead, users simply click a new content
level in the static frame.
 Fixed interface elements. As mentioned previously, you can force clickable graphics,
logos, and other information to stay in one fixed portion of the screen, while the rest of
your document scrolls in another frame.
 Better forms and results. Frames also enable you to create a form in one frame and
offer results in another frame. This is something we're beginning to see extensively with
Web search. With the search text box always available, you're free to change search
phrases or pinpoint your search more quickly, without moving back in the hierarchy of
the Web pages.
An HTML document that describes frame layout (called a frameset document) has a
different makeup than an HTML document without frames. A standard document has one HEAD
section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the
BODY.
The FRAMESET section of a document specifies the layout of views in the main user
agent window. In addition, the FRAMESET section can contain a NOFRAMES element to
provide alternate content for user agents that do not support frames or are configured not to
display frames.
Elements that might normally be placed in the BODY element must not appear before the first
FRAMESET element or the FRAMESET will be ignored.
On a typical page, <FRAMESET> is added like this:
<HTML>
<HEAD>
...HEAD markup...
</HEAD>
<FRAMESET>
...Frames and other HTML markup...
<NOFRAMES>
...No frames markup...
</NOFRAMES>
</FRAMESET>
</HTML>
The <FRAMESET> tag can accept two attributes: ROWS and COLS. Both attributes
accept either numerical values (size in pixels) or percentages, or a combination of both. The
value * can also be used to suggest that a particular row or column should take up the rest of the
page. The number of rows or columns is suggested by the number of values you give the
attribute. These attributes take the following format:
<FRAMESET ROWS="numbers,percentages,*" COLS="numbers,percentages,
*">
The <FRAME> Tag

The <FRAME> tag is used within the <FRAMESET> container to determine what will
actually appear in a particular frame.
Attributes for <FRAME>
 MARGINWIDTH: Used to control the right/left margins of the text and graphics within
a frame. Each takes a numerical value in pixels.
 MARGINHEIGHT: Used to control the top/bottom margins of the text and graphics
within a frame. Each takes a numerical value in pixels.
 SCROLLING: It accept the values yes, no, and auto and is used to determine whether or
not scroll bars will appear in the frame window.
 NORESIZE: attribute doesn't require a value assignment, and is used to keep the user
from resizing a frame window.
 NAME: This attribute assigns a name to the current frame. This name may be used as the
target of subsequent links.
Targeting Frame Windows

1. First, you need to name your frame windows-at least, you have to name the
windows you might want to change. This is accomplished with the NAME
attribute to the <FRAME> tag, which takes the following format:
<FRAME SRC="original URL" NAME="window_name">
2. The TARGET attribute of a <A> anchor tag is used to target the specific frame. It
follows this format:
<A HREF="new_URL" TARGET="window_name">link text</A>
1>This example demonstrates how to make a vertical frameset with three different documents.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</html>
2> This example demonstrates how to make a horizontal frameset with three different
documents.
<html>
<frameset rows="25%,50%,25%">
<frame noresize="noresize" src="frame_a.htm">
</frameset>
</html>
3> This example demonstrates how to make a frameset with three documents, and how to mix
them in rows and columns.
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">

</frameset>
</frameset>
</html>
4> Navigation Frame.

This example demonstrates how to make a navigation frame. The navigation frame
contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm"
contains three links. The second frame will show the linked document.
Code for tryhtml_contents.htm:

<html><body>
<a href ="frame_a.htm" target ="showframe">Frame
a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame
b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
</body></html>
Code for Frame page

<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm" name="showframe">
</frameset>
</html>
Working with Forms

An HTML form is a section of a document containing normal content, markup, special
elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
Users generally "complete" a form by modifying its controls (entering text, selecting menu items,
etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail
server, etc.)
An Overview of HTML Forms Tags

The HTML tags you use to display forms are straightforward. There are three types of tags
for creating fields: <TEXTAREA>, <SELECT>, and <INPUT>. You can put any number of
these tags between the <FORM> and </FORM> container tags. The following is a brief
description of each tag:
 <TEXTAREA>-This tag defines a field in which the end user can type multiple lines of
text.
 <SELECT>-This tag enables the end user to choose among a number of options in either
a scroll box or pop-up menu.
 <INPUT>-This tag provides all of the other types of input: single lines of text, radio
buttons, check boxes, and the buttons to submit or clear the form.
<FORM> Tag
The <FORM> element comes at the beginning of any form. When you create a <FORM>
element, you also define the script it uses and how it sends data, using the ACTION and
METHOD attributes:
 ACTION-This attribute points the form to a URL that will accept the form's information
and do something with it. If you don't specify an ACTION, it sends the information back
to the same URL the page came from.
 METHOD-This attribute tells the form how to send its information back to the script.
The most common method is POST, which sends all the information from the form
separately from the URL. The other option for METHOD is GET, which tacks the
information from the form to the end of the URL.
The fundamental differences between "GET" and "POST"

With the POST method, the browser sends the data in two steps: the browser first contacts the
forms-processing server specified in the action attribute and then, once contact is made, sends the
data to the server in a separate transmission.
On the server side, POST-style applications are expected to read the parameters from a
standard location once they begin execution. Once read, the parameters must be decoded before
the application can use the form values.
As a simplification, we might say that "GET" is basically for just getting (retrieving)
data whereas "POST" may involve anything, like storing or updating data, or ordering a product,
or sending E-mail.
POST or GET?
Which one should you use if your forms-processing server supports both the POST and
GET methods? Here are some rules of thumb:
For best form-transmission performance, send small forms with a few short fields via the
GET method.
Because some server operating systems limit the number and length of command-line
arguments that can be passed to an application at once, use the POST method to send forms that
have many fields or that have long text fields.
If you are inexperienced in writing server-side forms-processing applications, choose
GET. The extra steps involved in reading and decoding POST-style transmitted parameters,
while not too difficult, may be more than you are willing to tackle.
If security is an issue, choose POST. GET places the form parameters directly in the
application URL, where they easily can be captured by network sniffers or extracted from a
server log file. If the parameters contain sensitive information like credit card numbers, you may
be compromising your users without their knowledge. While POST applications are not without
their security holes, they can at least take advantage of encryption when transmitting the
parameters as a separate transaction with the server.
If you want to invoke the server-side application outside the realm of a form, including
passing it parameters, use GET, because it lets you include form-like parameters as part of a
URL. POST-style applications, on the other hand, expect an extra transmission from the browser
after the URL.
<TEXTAREA> Tag
With <TEXTAREA>, you can provide a field for someone to enter multiple lines of
information. By default, a <TEXTAREA> form shows a blank field four rows long and 40
characters wide. You can make it any size you want by using the ROWS and COLS attributes in
the tag. You can also specify some default text by simply entering it between the <TEXTAREA>
and </TEXTAREA> tags.
The options for the <TEXTAREA> tag are as follows:
 NAME-This is required. It defines the name for the data.
 ROWS-This sets the number of rows in the field.
 COLS-This sets the width of the field in characters.
 Default text-Any text between the <TEXTAREA> and </TEXTAREA> tags is used as
default text and shows up inside the field.
<SELECT> Tag
The <SELECT> element shows a list of choices in either a pop-up menu or
a scrolling list. It's set up as an opening and closing tag with a number of choices listed in
between. Just like the <TEXTAREA> element, the <SELECT> tag requires you to define a
name. You can specify how many choices to show at once, using the SIZE attribute.
The options for the <SELECT> element are as follows:
 NAME-This is required. It defines the name for the data.
 SIZE-This attribute determines how many choices to show. If you omit SIZE or set it to
1, the choices are shown as a pop-up menu. If you set it to 2 or higher, it shows the
choices in a scroll box. If you set SIZE larger than the number of choices you have within
<SELECT>, a "nothing" choice is added. When the end user chooses this, it's returned as
an empty field.
 MULTIPLE-This allows multiple selections. If you specify multiple, a scrolling window
displays-regardless of the number of choices or the setting of SIZE.
You present the choices the end user will make within the <SELECT> and </SELECT> tags.
The choices are listed inside the <OPTION> tag and don't allow any other HTML markup.
The options for the <OPTION> tag are the following:
 VALUE-This is the value to be assigned for the choice, which is what is sent back to the
script and doesn't have to be the same as what is presented to the end user.
 SELECTED-If you want one of the choices to be a default, use the SELECTED option
in the <OPTION> tag.
<INPUT> Tag
<INPUT>, unlike <TEXTAREA> and <SELECT>, is a single tag option for gathering
information. <INPUT> contains all of the other options for acquiring information, including
simple text fields, password fields, radio buttons, check boxes, and the buttons to submit and
reset the form.
The attributes for the <INPUT> tag are the following:
 NAME This defines the name for the data. This field is required for all the types of
input except SUBMIT and CLEAR.
 SIZE This is the size of the input field in number of characters for text or password.
 MAXLENGTH This specifies the maximum number of characters to be allowed for a
text or password field.
 VALUE For a text or password field, it defines the default text displayed. For a check
box or radio button, it specifies the value that will be returned to the server if the box or
button is selected. For the SUBMIT and RESET buttons, it defines the text inside the
button.
 CHECKED This sets a check box or radio button on. It has no meaning for any other
type of <INPUT> tag.
 TYPE This sets the type of input field you want to display. (See the types in the
following section.)
INPUT TYPE
The possible values for the INPUT TYPE attribute:
 TEXT TEXT, the default input type, displays a simple line of text
 PASSWORD PASSWORD, a modified TEXT field, displays typed characters as
bullets instead of the characters actually typed.
 CHECKBOX CHECKBOX displays a simple check box that can be checked or
empty; use a check box when the choice is yes or no and doesn't depend on anything.
 RADIO RADIO is a more complex version of a check box, allowing only one of a set
to be chosen. You can group radio buttons together using the NAME attribute; keep all
buttons in the same group under one NAME.
 RESET RESET displays a push button with the preset function of clearing all the data
in the form to its original value.
 SUBMIT SUBMIT displays a push button with the preset function of sending the data
in the form to the server to be processed.
Example:
1> This example demonstrates how to create check-boxes, radio button and simple drop down
box with pre-selected item on an HTML page.
<html><body>
<form action="">
I have a bike: <input type="checkbox" name="vehicle"
value="Bike">
<br>
I have a car: <input type="checkbox" name="vehicle"
value="Car">
<br>
I have an airplane: <input type="checkbox"
name="vehicle" value="Airplane">
<br>
Male: <input type="radio" checked="checked" name="Sex"

value="male">
<br>
Female: <input type="radio" name="Sex" value="female">
<br>
<textarea rows=”10” cols=”30”> The cat was playing in

the garden. </textarea>
<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="submit" value="Submit">
</form>
</body></html>
Extra Code
<FORM NAME="display">
<A HREF="Forms.htm"
onMouseOver="document.display.msgbox.value='To the Form Examples
Main Page'" onMouseOut="document.display.msgbox.value=' ';">To
the Form Examples Main Page</A><BR> <A HREF="htmtitle.htm"
onMouseOver="document.display.msgbox.value=' To the Title Page'"
onMouseOut="document.display.msgbox.value=' ';">Title
Page</A><BR> <P> <INPUT TYPE="text" NAME="msgbox" SIZE="40">
</FORM>
REDIRECT VIA SUBMIT TO SECOND WINDOW

<FORM onSubmit="window.open ('index.htm')">
<INPUT TYPE="submit" VALUE="To Title Page"> </FORM>
REDIRECT WITHOUT SUBMIT BUTTON

<FORM>
Select a destination:<P>
<SELECT MULTIPLE onChange=
"window.location=this.options[this.selectedIndex].value;"
SIZE="3">
<OPTION VALUE="index.htm">Title Page
<OPTION VALUE="sound.htm">Sound Tags Page
<OPTION VALUE="forms.htm#TOC">Table of Contents
<OPTION VALUE="text.htm">Text Tags Page
</SELECT>
</FORM>
Exercise: Create following page layout:

An Introduction to DHTML
DHTML stands for Dynamic HTML.
DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML
is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4.x
generation browsers would support. DHTML is a combination of technologies used to create
dynamic Web sites. To most people DHTML means a combination of HTML 4.0, Style Sheets
and JavaScript.
W3C once said: "Dynamic HTML is a term used by some vendors to describe the
combination of HTML, style sheets and scripts that allows documents to be animated."
There are four parts to DHTML:

 Document Object Model (DOM)
 Scripts
 Cascading Style Sheets (CSS)
 XHTML
DOM
A standard object model for HTML it defines the objects and properties of all HTML
elements, and the methods (interface) to access them. In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.
Every part of a Web page is specified by the DOM and using its consistent naming
conventions you can access them and change their properties.
Scripts
Scripts written in either JavaScript or ActiveX are the two most common scripting
languages used to activate DHTML. You use a scripting language to control the objects specified
in the DOM.
Cascading Style Sheets

CSS is used in DHTML to control the look and feel of the Web page. Style sheets define
the colors and fonts of text, the background colors and images, and the placement of objects on
the page. Using scripting and the DOM, you can change the style of various elements.
XHTML
XHTML or HTML 4.x is used to create the page itself and build the elements for the CSS
and the DOM to work on. There is nothing special about XHTML for DHTML - but having valid
XHTML is even more important, as there are more things working from it than just the browser.
Features of DHTML
There are four primary features of DHTML:
1. Changing the tags and properties
2. Real-time positioning
3. Dynamic fonts (Netscape Communicator)
4. Data binding (Internet Explorer)
Changing the tags and properties

This is one of the most common uses of DHTML. It allows you to change the qualities of
an HTML tag depending on an event outside of the browser (such as a mouse click, time, or date,
and so on). You can use this to preload information onto a page, and not display it unless the
reader clicks on a specific link.
Real-time postioning
When most people think of DHTML this is what they expect. Objects, images, and text
moving around the Web page. This can allow you to play interactive games with your readers or
animate portions of your screen.
Dynamic Fonts
This is a Netscape only feature. Netscape developed this to get around the problem
designers had with not knowing what fonts would be on a reader's system. With dynamic fonts,
the fonts are encoded and downloaded with the page, so that the page always looks how the
designer intended it to.
Data binding
This is an IE only feature. Microsoft developed this to allow easier access to databases
from Web sites. It is very similar to using a CGI to access a database, but uses an ActiveX
control to function. This feature is very advanced and difficult to use for the beginning DHTML
writer.
Cross-browser DHTML
Cross-browser refers to the ability for a website, web application, HTML construct or
client-side script to support all the web browsers. The term cross-browser is often confused with
multi-browser. Multi-browser means something works with several web browsers. Cross-
browser means something works with all version of all browser to have existed since the web
began. Thus cross-browser DHTML support all version of all browsers.
Example of cross-browser coding

Consider this snippet of HTML code:
<div id="sample" style="position : absolute; top : 100px; left : 100px;">some text</div>
The code describes a block of text, which should be displayed 100 pixels from the top and to the
left from the top-left corner of the browser window.
In a Netscape Navigator 4 browser, you would move it right with the following JavaScript code:
document.layers['sample'].left = 200;
However, to accomplish the same thing in Internet Explorer 4 you need to do this:
document.all['sample'].style.left = 200;
In order for the code to work in both browsers and thus be cross-browser compatible, it needs to
written like this:
if (document.all)
document.all['sample'].style.left = 200;
else if (document.layers)
document.layers['sample'].left = 200;
Example of DHTML program:
1> Example to demonstrate moveover event.

<html><body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse over this text</h1>
</body></html>
Thank You

What Is An HTML File?

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is An HTML File?

Uploaded by

Copyright:

Available Formats

Chapter 2: Introduction to HTML

What is an HTML File?

Do You Want to Try It?

Save the file as "mypage.htm".

HTML tags vs. elements vs. attributes

Attributes of the tag

Why do we Use Lowercase Tags?

Structure of HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Basic HTML Tags

The <html> tag

The <head> tag

The <body> tag

The <title> tag

Using Lists in HTML

Block Level Tags

<blockquote> </ blockquote >

Here comes a long quotation:

<h1> </h1> to <h6> </h6>

<span style="text-decoration : underline;">this text is

Text Level Tags

Text Markup Tags

Phrase Markup Tags

Special Markup Tags

alt="Shows this line if images are

<noscript> OFF. </noscript> </p>

</div> but not around the spans.</p>

More about <a> tag:

Clicking <a href="#THERE">HERE</a> takes you to

<a href="javascript:myFunction()">This link calls a JavaScript

<a href="anypage.htm" target="_top">Outa here!</a>

Inserting Images in Your Documents

When to Use Images

When to Use Text

Speeding Image Downloads

Divide up large documents

Adding image to document

Some important attributes of <IMG> tag:

2> Inserting image from different location:

3> Adding image to background of page.

<p>You can also use an image as a link:

Example of image map.(std)

<p> Click on one of the planets to watch it closer: </p>

<map id="planetmap" name="planetmap">

Adding Tables to Your Documents

The <TABLE> Tag

The <CAPTION> tag

The <TH> Tag

The <TR> Tag

The <TD> Tag

<h4>With a thick border:</h4>

<h4>Table headers:</h4>

4> This example demonstrates cellspacing & cellpadding

Exercise: Create table with background.

The <FRAME> Tag

Targeting Frame Windows

<frameset cols="25%,75%">

4> Navigation Frame.

Code for tryhtml_contents.htm:

Code for Frame page

Working with Forms