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 LANGUAGEb) OBJECT ORIENTED PROGRAMMING LANGUAGE

• Procedural programming languageProcedure 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. HyperTextMarkupLanguage

HyperYou 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.

TextWe 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 0HTML 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.0The 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 graphicsDave 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.0HTML 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.0HTML 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-pathService 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 tagThe 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 tagThe 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

• • ContentAssigns 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-EQUIVThis 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 =fileBgcolor=”#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>

• • BackgroundSpecifies 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.

• • TextSpecifies 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.

• • LeftmarginSpecifies 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

Paragraph

<P> Indicates paragraph break<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

Character

<I>…</I> Italicizes text

<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>.. </ADDRESS>

Indicates information about the author 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.

• • IDAssigns 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.

• • STYLESpecifies style sheet commands that apply to the heading.

<H1 STYLE=”background: red”>

• • TITLESpecifies 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><H5> THIS IS H5</H5><H6> THIS IS H6</H6><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

• • CLASSIndicates 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.

• • TYPEIndicates the kind of button to create.

• • NAMEGives a name to the value you pass to the form processor.

• • STYLESpecifies style sheet commands that apply to the element.

• • TITLESpecifies text assigned to the tag.

• • TABINDEXSpecifies 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 documents\suni.htm” >click </A>

The text click word is used for linking.ii)<A href=”c:\my documents\suni.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 listsTYPE=”1”TYPE=”a”TYPE=”A”TYPE=”i”TYPE=”I”

2. 2. For bulleted listsTYPE=”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:\windows\bubbles.bmpAlign=top/middle/bottomWidth=100Height=100Vspace=30 (vertical space in pixels)Hspace=30> (horizontal space in pixels)

Other attributes:

Border=nIsmapUsemapAlt (“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 DescriptionBorder=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 cellsBordercolorlight=”#RRGGBB” or

“..”Specifies the lighter color used to draw 3-D borders around the

table cellsCellpadding=n Indicates space between

border & contents of cellCellspacing=n Indicates spacing between cells

Align=LEFT/CENTER/RIGHT Positions the table according to the alignment value in the

windowBackground=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 DescriptionTitle=” …” Specifies text

assigned to the tagVAlign=TOP/MIDDLE/BOTTOM/

BASELINEAligns the contents 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 cellsClass=”…” Indicates which

style class applies to the <TH> element.

<TH> tag

Contains table cell heading.

ATTRIBUTES

DESCRIPTION

Title=” …” Specifies text assigned to the tag

Bordercolor=”#RRGGBB” or “..” Specifies the color of the border of the table heading cell



table heading cellsBordercolorlight=”#RRGGBB” or


table heading cellsColspan=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.

ATTRIBUTES

DESCRIPTION

VAlign=TOP/MIDDLE/BOTTOM/BASELINE

Aligns the contents of a cell with the top, bottom, middle or

baseline of the cellBackground=URL Specifies the absolute or

relative location of a graphic image file loaded as a

background image for the table cell

Bgcolor=”#RRGGBB” or “..” Specifies the background color within a table cell

Class=”…” Indicates which style class 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.

ATTRIBUTES DESCRIPTION

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

Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table row will line up with the edges of the table


cellsBgcolor=”#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/BASELINE

Specifies the vertical 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.

ATTRIBUTES

DESCRIPTION

Bordercolor=”#RRGGBB” or “..” Specifies the color of the border of all the table cells



table cellsBordercolorlight=”#RRGGBB” or


table cellsColspan=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/

BASELINEAligns the contents of a cell

with the top, bottom, middle or baseline of the cell

Background=URL Specifies the absolute or relative location of a graphic

image file loaded as a background image for the table

cell

ATTRIBUTES

DESCRIPTION

Bgcolor=”#RRGGBB” or “..” Specifies the background color within a table cell

Class=”…” Indicates which style class 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.



footer will line up with the edges of

the table cellsVAlign=TOP/MIDDLE/BOTTOM/

BASELINESpecifies vertical alignment of the

contents of the table body.

Title=”…” Specifies text assigned to the tag

Class=”…” Indicates which style class applies to the <TBODY> element.

<TFOOT> tag

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



footer will line up with the edges of


the table cellsVAlign=TOP/MIDDLE/BOTTOM/

BASELINEAligns the contents of the table footer

with the top, bottom, or middle of the footer container.

Title=”…” Specifies text assigned to the tag

Class=”…” Indicates which 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

ATTRIBUTES DESCRIPTIONTitle Specifies text assigned to the tagName 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.

ATTRIBUTES DESCRIPTIONNAME Uniquely identifies <Select> tagSIZE 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.

ATTRIBUTES DESCRIPTIONSELECTED 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

ATTRIBUTES DESCRIPTIONNAME Specifies the name of the TEXTAREAROWS Specifies the number of rowsCOLS Specifies the number of cols

<FIELDSET>…. </FIELDSET> TAG: Groups related form elements

ATTRIBUTES DESCRIPTIONTITLE Specifies text assigned to the tag.

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

ATTRIBUTES DESCRIPTIONALIGN 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 controlSize 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 selectedName Name applies to the collection of

buttonsValue Value of the specific button

Checked If the button is checked, it will remain checked from the very beginning.

<INPUT TYPE=CHECKBOX>

Creates a checkbox, two-stated field, 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 TYPE=PASSWORD >

Displays asterisk in the fieldName Label of the controlSize Size of the control

Maxlength Maximum no of characters taken by the control

<INPUT TYPE=HIDDEN>

The field will not be visible.Name Name of the hidden controlValue Value of the hidden control

<INPUT TYPE=BUTTON>

Creates a button, other than SUBMIT/RESET button.

Name Name of the button controlValue Text which will be displayed on the

button<INPUT TYPE=SUBMIT>

Creates a button, which passes data to the Web server.

Value Text which will be written on the face of the button

<INPUT TYPE=RESET>

Creates a button, which resets all the 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 buttonName 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 controlSize Specify the visible length of the

controlAccept Specify which file types can be

uploadedMaxlength 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>

<input type="text" name="T1" size="20" maxlength="30">

</p> <p align="left"> <font color="#800080">PASSWORD : <input type="password" name="T3" size="20"> </font> </p> <p align="left"> <font color="#800080">ADDRESS : <textarea rows="2" name="S1" cols="20"></textarea> </font> </p> <p align="left"> <font color="#800080">PHONE <input type="text" name="T2" size="8" maxlength="16"> </font> </p> <p align="left"> <font color="#800080">SEX : 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                             LISTENING MUSIC <input type="checkbox" name="C1" value="ON" checked></font></p> <p align="left">    <font color="#800080">                         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">                          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>…</FRAMESET>

Divides pages into frames.

COLS Divides documents intoColumns

ROWS Divides documents intoRows

<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>…</NOFRAME>

Specifies that the HTML 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%”>

<FRAME scrolling=”yes”><FRAME scrolling=”yes”>

</ 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%”}

Cas.htm<HTML><HEAD><TITLE>Sample Example</TITLE><LINK REL=Style Sheet HREF="sty.css" type="text/css"></HEAD><BODY><H2>This heading has been created for external style sheet</H2><P> CASCADING STYLE SHEET.</P></BODY></HTML>

Output:

IMPORTANT ATTRIBUTES USED IN STYLE SHEETS

ATTRIBUTE SAMPLE VALUES DESCRIPTIONColor Any html color name or

valueSets font color

color : redBackground Any html color name or

value, can also use images.

Displays background color or image behind

html element background: yellow

background : url (file.gif)Font Bold 14pt “Verdana” font: 38pt “Times Roman”

font: light 18pt ArialFont – family Times, Palatino, etc. Font-family: Garamond

Font-family: Arial,” Sans Serif”

Font –size 12pt(points); 1”(inches);.5cm; 200px(pixels) etc.

font –size: 48ptfont –size: .25in

Font –weight Bold, normal, light font –weight: boldFont –style Italic font –style: italic

Text-decoration Underline or none text-decoration: underlinetext-decoration: none

Line-height 150%, 75px, 1.08in,etc. line-height: 90%line-height: 1.5in

Text-indent .25in, 3cm, 24pt, 50px, 3cm etc

text-indent: .25in

Margin-left .25in, 3cm, 24pt, 50px, 3cm etc

margin-left: 1inmargin-left: -4em

Margin-top .25in, 3cm, 24pt, 50px, 3cm etc

margin-top: 48ptmargin-top: -1.5in

Text-align Center, left, right text-align: center

INTRODUCTION TO DHTML

With the explosion of interest in the Internet that is in the World Wide Web HTML has assumed a prominent place in the computer world. HTML has evolved to meet the increasing demand for attractive web sites. But the end products, static web pages that often required repeated time-consuming round trips between client and server machines, clearly showed that a new direction is in order. DYNAMIC HTML is that new direction.

What is DHTML?

Dynamic HTML (DHTML) is a Microsoft enhancement to HTML version 4.0 that lets you create special effects such as text that flies off the page one word at a time, or rotating billboard-style transition effects between pages. However, some Web browsers don't support DHTML, so pages containing DHTML might not be displayed properly or might contain errors when viewed by some site visitors.

Use of DHTML

You can create special effects that are displayed when a site visitor enters or leaves your site, or browses to or from a specific page. By applying transition effects consistently and judiciously throughout your web, you can create slide-show-style presentations with professional-looking transitions between pages.Such as

• When you point to this paragraph, the font changes to bold. • When you click this paragraph, a border and shading are added to it.

DHTML combines HTML with cascading style sheets (CSS) and scripting languages. So, actually what it does?

• HTML specifies a Web page’s elements, like a form, table, heading, paragraph, or a bulleted list.

• CSS enables you to decide how a Web browser renders those elements: so CSS can be used to determine an element’s color, position, size etc.

• Scripting languages enables you to manipulate the web page’s elements.

What are the scripting languages can be used?

JavaScript and VBScript, either of them can be used as a scripting language. VBScript is a subset of Microsoft’s popular Visual Basic. The second one JavaScript, has some syntax of Java, but is very different from Java. Both VBScript and JavaScript work with software structures called OBJECTS.

Unlike programming languages that can create applications that run by themselves, a scripting language requires a piece of software called an interpreter to run its programs. Internet Explorer has its built-in interpreter for VBScript and JavaScript, and Navigator has a built-in interpreter for JavaScript.

Script languages are written like this:

<SCRIPT Language=”VBScript”><! ------</SCRIPT>

The core of DHTML object model is its object hierarchy. The object hierarchy is where all the objects that you will need to access and modify the state of the browser and the HTML page are stored.

A collection is a set of things grouped together by the DHTML object model. For example, it can be a collection of links, frames, forms, and other elements such as images. What is XML?

XML - EXtensible Markup Language is a Meta language that means it is used to define languages. Here you can create your own tag and you can apply that according to your requirement following some rules. So, XML is a standard for the creation of tagging languages and it is the advantage that it allows you to define your own data structures.

MORE EXAMPLE PROGRAMS

1. <HTML>

<HEAD><TITLE>HOT WATER SAFETY</TITLE></HEAD><BODY><PRE>Hot water is dangerous.

Turn down the hot water heater thermostat.Always supervise children in the bathtub.

Don’t encourage children to play around the tub. </PRE></BODY>

</HTML> 2. <HTML>

<HEAD><TITLE> Sample HTML Page </TITLE></HEAD><BODY><H1>This is the main heading</H1><P> Here is a bulleted list: </P><HR><UL>

<LI>Item1</LI><LI>Item2<UL><LI>Item 2A</LI><LI>Item 2B</LI></UL></LI><LI>Item3</LI><LI>Item4</LI>

</UL><HR><P>………and the page continues…</P></BODY></HTML>

3. <HTML>

<HEAD><TITLE>BASIC CPR</TITLE></HEAD><BODY>

BASIC CPR<OL><LI>Use Body Substance Isolation Precautions<p>

If available, be sure to use latex or vinyl gloves, goggles and a barrier device with one-way valve. <BR><EM> BSI is crucial to your safety and the safety of your patient. </EM><LI>Determine Unresponsiveness<LI>Open Airway<LI>Look, Listen and Feel for breathing<LI>Ventilate Twice</OL><P>Look for chest rises and listen for exhalation while ventilating. If no air enters, reposition the airway and try again. </P><H3>CIRCULATION</H3><OL><LI>Check for Pulse<LI> If No Pulse, Begin Compressions</OL></BODY></HTML>

4. <HTML>

<HEAD><TITLE>PATIENT ASSESSMENT</TITLE></HEAD><BODY>

<OL TYPE=A><LI>Safety Considerations<OL TYPE=1> <LI>Body Substance Isolation <LI>Scene safety <LI>Initial Size-up</OL><LI>INITIAL PATIENT ASSESSMENT<OL TYPE=1> <LI>General Impression <LI>Unresponsiveness <OL TYPE=i>

<LI>Alert to person, place and time<LI>Verbal response to audible stimuli<LI>Pain evokes verbal or physical response<LI>Unresponsive to all stimuli

</OL></OL><LI>PATIENT CRITICAL NEEDS<UL>

<LI TYPE="square">Use oxygen if needed

<LI TYPE="square">Consider use of assisting with bag valve mask

</UL><LI>MEDICATIONS<UL>

<LI TYPE="circle">Oral Glucose<LI TYPE="disc">Activated Charcoal

</UL><MENU><LI>ListItem1<LI>ListItem2</MENU>

</BODY></HTML>

5. <HTML>

<HEAD><TITLE>TABLE OF INFORMATION</TITLE></HEAD><BODY><TABLE border=3 width=75%><TR>

<td colspan = 2>Cell 1.1 <td>Cell 1.2 <td>Cell 1.3<TR>

<td>Cell 2.1 <td>Cell 2.2 <td>Cell 2.3<TR>

<td>Cell 3.1 <td>Cell 3.2 <td>Cell 3.3</TABLE></BODY></HTML>

6. <HTML><HEAD><TITLE>EXAMPLE OF TABLE</TITLE></HEAD><BODY><TABLE COLS="7">

<COLGROUP SPAN="3" WIDTH="20%"><COLGROUP SPAN="4" WIDTH="10%"><TR> <TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3

<TD>CONTENT1<TD>CONTENT2<TD>CONTENT3<TD>CONTENT4<TR> <TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3<TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3

<TD>CONTENT4</TABLE>

</BODY></HTML>

7. <HTML>

<HEAD><TITLE>INCIDENT LOG</TITLE></HEAD><BODY><H1>Volunteer Time Record</H1><TABLE BORDER="0" WIDTH="75%" CELLSPACING="0" CELLPADING="0">

<CAPTION ALIGN="TOP">Prepared for the month of February 1997</CAPTION>

<TR ALIGN="CENTER" VALIGN="CENTER"><TD WIDTH="50%" NOWRAP="NOWRAP">Firefighter ID: 294</TD><TD WIDTH="50%" NOWRAP="NOWRAP">Report Date: 11-Mar-97</TD></TR><TR><TD COLSPAN="2"><P><CENTER>F=Fire E=Emergency Medical H=HazMat T=Training</CENTER></P></TD></TR></TABLE><HR><TABLE COLS="3"><THEAD><TR>

<TH>Incident Date<TH>Incident Time<TH>Incident Type

</THEAD><TBODY ALIGN="LEFT" VALIGN="TOP"><TR ALIGN=LEFT>

<TD>Feb 01, 1997<TD>09:00<TD>T

<TR ALIGN=LEFT><TD>Feb 01, 1997<TD>22:00<TD>E

<TR ALIGN=LEFT><TD>Feb 03, 1997<TD>19:00<TD>T

<TR ALIGN=LEFT><TD>Feb 05, 1997

<TD>19:00<TD>T

<TR ALIGN=LEFT><TD>Feb 06, 1997<TD>15:10<TD>F





<TR ALIGN=LEFT><TD>Feb 17, 1997<TD>12:30<TD>E

</TBODY></TABLE><HR></BODY></HTML>

8. <HTML><HEAD><TITLE>MORE ABOUT TABLE</TITLE></HEAD><BODY><TABLE border="0" cellspacing="20" bgcolor="#CCCCCC">

<CAPTION>ALBUMBS AND SINGLES</CAPTION><TR><TD><TABLE border="10" cellpading="4"> <CAPTION>ALBUMBS </CAPTION><TR><TD><I>Little Earthquakes</I><TD>82358-2<TR><TD><I>Under The Pink</I><TD>82567-2<TR><TD><I>Boys For Pele</I><TD>82862-2</TABLE></TD>

<TD><TABLE border="10" cellpading="4"> <CAPTION>SINGLES </CAPTION><TR><TD>"Crucify"<TD>82399-2<TR><TD>"God"<TD>85687-2<TR><TD>"Cornflake Girl"<TD>85655-2<TR><TD>"Caught A Lite Sneeze"<TD>85519-2</TABLE></TD></TR></TABLE></BODY></HTML>

9. <HTML>

<HEAD><TITLE>A TWO-COLUMN LAYOUT EXAMPLE</TITLE>

<BODY><TABLE width=100% cellspacing=15 border=0>

<TR valign="top"><TD width=33%></TD><TD width=67% id="tblTitle"><H1>Backcountry Travel</H1></TD><TR valign="top"><TD><DL>

<DT><STRONG><A href="#intro" alt="Introduction">Introduction</A></STRONG>

</DL><DL>

<DT><STRONG><A href="#prepare" alt="Preparation">Before You Travel</A></STRONG>

<DD><EM>How far can you go? <BR>What should you wear? <BR>What should you carry? <BR>What else should you do? </EM></DL><DL>

<DT><STRONG><A href="#lost" alt="In To Travel">When things go wrong</A></STRONG>

<DD><EM>Stay! <BR>Think! <BR>Observe! <BR>Plan! </EM>

</DL></TD><TD>

<P><A name="intro.">Walking in the woods, </A> whether as a hiker, camper, backpacker or hunter, provides plenty of opportunities to practice the skills of a backcountry traveler...</P><BLOCKQUOTE><EM>This is in no way intended to be a course in backcountry safety or survival. It's you against the wall, and we are not talking any responsibility for the outcome. </EM></BLOCKQUOTE>

<H2><A name="prepare"> Before you travel</A></H2><H3>How far can you go? </H3>

<P>When choosing a location and route, take into account your physical condition, the reason for hiking, and the terrain and weather you could possibly encounter.........</P>

<H3> What should you wear? </H3><P>Proper footgear is one of the most important parts of your journey. Sturdy running shoes are good for hiking, on relatively smooth surfaces, such as maintained trails...</P> <H3>What should you carry? </H3><P>For short trips, a fanny pack or day pack should include at least one quart of water per person, map, flashlight, first aid kit, rain gear, high-energy snack, toilet paper.........</P> <H2><A name="lost">When things go wrong</A></H2><BLOCKQUOTE><EM>The worst thing you can do is to get frightened. The truly dangerous enemy is not the cold or the hunger, so much as the fear. It robs the wanderer of his judgement and of his limb power; it is fear that turns the passing experience into a final tragedy.........keep cool and all will be well.... Use what you have, where you are, right now. </EM><BR><CITE>Ernest Thompson Seton, 1906</CITE></BLOCKQUOTE><P>So, you've planned, you've prepared, and now you are on the trail and the worst part is, you don't know where you are. There is a four step process to follow, and all you have to do is STOP</EM>--- <STRONG>S</STRONG>tay.<STRONG>T</STRONG>hink. <STRONG>O</STRONG>bserv.<STRONG>P</STRONG>lan. </P>

<EM>............More stuff here...........</EM></TD></TR></TABLE></BODY>

</HTML> 10. <HTML>

<HEAD><TITLE>PICTURE</TITLE></HEAD><BODY>

<H1>Birthday Cake </H1><P>

It's not for me. It's not my birthday. But I like this very much. It’s my favorite.

<IMG SRC="Cake.jpg" align="middle" ALT="[A birthday party cake.]">This is for my best friend. She likes this type of cake very much. That's why I like this very much. I will give it to her. When she will get it, I think she will be happy.

</P><HR><P>

To find out so many types of cakes you visit Internet, and you can see so many things.

</BODY></HTML>

11. <HTML> <HEAD><TITLE>FORM</TITLE></HEAD>

<BODY bgcolor=CYAN><FORM name=form method=post>

<FIELDSET> <LEGEND><H2>BUILD YOUR PIZZA</H2></LEGEND><LABEL><H3>PICK YOUR TOPPINGS: </H3> <INPUT type="checkbox" name="topping" value="cheese" checked>Cheese<BR><INPUT type="checkbox" name="topping" value="pepperoni">Pepperoni<BR><INPUT type="checkbox" name="topping" value="shrooms">Mushrooms<BR><INPUT type="checkbox" name="topping" value="clams">Smoked Clams<BR>

</LABEL> <H3>PICK A CRUST: </H3><INPUT type="radio" name="crust" value="deep dish" checked>Deep-Dish<BR><INPUT type="radio" name="crust" value="hand tossed">Hand Tossed<BR>

<INPUT type="radio" name="crust" value="whole wheat">Whole Wheat<BR><H3>Where should the pizza go:</H3>NAME: <INPUT type="text" name="name" size="20"><BR>ADDRESS: <INPUT type="text" name="address" size="40"><BR>APT #: <INPUT type="text" name="apartment" size="6"><BR> CITY, STATE ZIP: <INPUT type="text" name="city" size="40">

: <INPUT type="text" name="state" size="2">: <INPUT type="text" name="zipcode" size="10">

<TEXTAREA name="instructions" cols="40" rows="10">Are there any special instructions to get to your place?</TEXTAREA>

<H3>how fast do you want it: </H3><SELECT name="DeliverySpeed" multiple><OPTION> Super Fast, the kids are revolting</OPTION><OPTION>Fast, I just woke up and I'm starving</OPTION><OPTION selected> Just make sure It's warm when it gets here</OPTION><OPTION> Please deliver before stuff starts growing on it</OPTION></SELECT></FIELDSET></FORM></BODY></HTML>

12. <HTML>

<HEAD><TITLE>FORM2</TITLE></HEAD><BODY bgcolor=pink><FORM><H2> INFORMATION REQUEST</H2><BR>FIRST NAME: <INPUT type=text name=t1 size=15 maxlength=30><BR>LAST NAME: <INPUT type=text name=t2 size=15 maxlength=30><BR>E-MAIL ADDRESS: <INPUT type=text name=t3 size=20 maxlength=30><BR>ADDRESS: <INPUT type=text name=t4 size=30 maxlength=50><BR>CITY<INPUT type=text name=t5 size=10 maxlength=25>STATE: <INPUT type=text name=t6 size=15 maxlength=30><BR>COUNTRY: <INPUT type=text name=t7 size=20 maxlength=30><BR><BR>PLEASE CHOOSE THE MOST APPROPRIATE STATEMENT.<BR><INPUT type="radio" name="buying" value="regular">I regularly purchase items online.<BR><INPUT type="radio" name="buying" value="sometimes">

I have on occasion purchased item online.<BR><INPUT type="radio" name="buying" value="might" checked>I have not purchased anything online, but I would consider it.<BR><INPUT type="radio" name="buying" value="willnot">I prefer to shop in real stores.<br><br><P> I'm interested in (choose all that apply):<BR><INPUT type="checkbox" name="Hiking" value="Hiking"> Hiking<BR><INPUT type="checkbox" name="MBiking" value="MBiking"> Mountain Biking<BR><INPUT type="checkbox" name="Camping" value="Camping">Camping<BR><INPUT type="checkbox" name="RClimbing" value="RClimbing">Rock Climbing<BR><INPUT type="checkbox" name="4WD" value="4WD">Off-Road 4WD<BR><INPUT type="checkbox" name="ccskiing" value="ccskiing">Cross-country skiing<BR><BR> I learned about this site from: <BR><SELECT name="referral" size=2><OPTION value="print" selected>Print Ads<OPTION value="visit">In-Store Visit<OPTION value="rec">Friend's Recommendation<OPTION value="internet">Sources on the Internet<OPTION value="other">Other</SELECT><BR><BR><TEXTAREA name="comments" COLS="40" ROWS="5">Please type any additional comments here. </TEXTAREA><BR><BR>Please paste this photo I took into your gallery!<INPUT type="file" name="filenew" size="20" accept="image/*"><BR><BR><CENTER><INPUT type="submit" value=submit> <INPUT type="reset" value=reset> </FORM></BODY></HTML>

13. <HTML> <HEAD><TITLE>FRAME</TITLE></HEAD>

<FRAMESET cols=”50%, *”><FRAMESET rows=”50%, *”>

<FRAME src=”frame1.htm”><FRAME src=”frame2.htm”>

</FRAMESET>

<FRAME src=”frame3.htm”><FRAME src=”frame4.htm”><FRAME src=”frame5.htm”>

</FRAMESET></HTML>

14 <HTML>

<HEAD><TITLE>FRAME</TITLE></HEAD><BODY>

<H1>This is your city reference</H1><P><A href="ny.htm" target="cities">Go to the New York Page.

</A></P><P><A href="paris.htm" target="cities">Go to the Paris Page. </A></P><P><A href="tokyo.htm" target="cities">Go to the Tokyo Page. </A></P>

</BODY></HTML> ny.htm <HTML><HEAD><TITLE>NY</TITLE></HEAD><BODY>

<H1>Welcome to the New York Page</H1>How about a Broadway show?

</BODY></HTML> Paris.htm <HTML><HEAD><TITLE>Paris</TITLE></HEAD><BODY>

<H1>Welcome to the Paris Page</H1>Very fine.

</BODY></HTML> Tokyo.htm <HTML><HEAD><TITLE>Tokyo</TITLE></HEAD><BODY>

<H1>Welcome to the Tokyo Page</H1>Very Interesting.

</BODY></HTML>

15. <HTML> <HEAD><TITLE>STYLE SHEET1</TITLE></HEAD>

<STYLE> P {background-color: blue; position: absolute; left: 40px; top: 40px; width: 300px; height: 260px; z-index: 1}BLOCKQUOTE {background-color: yellow;

position: absolute; left: 80px; top: 80px; width: 300px; height: 260px; z-index: 2}

</STYLE></HEAD><BODY>

<BLOCKQUOTE><FONT size=7>Do you want to play hide and seek?</FONT></BLOCKQUOTE><P><FONT size=7>Count to ten. </FONT></P>

</BODY></HTML>

16. <HTML>

<HEAD><TITLE>IMG EXAMPLE</TITLE></HEAD><BODY BGCOLOR=GRAY><IMG SRC="bgmc.jpg" align=left WIDTH=150 HEIGHT=150 border=1>MASTER CARD<BR><IMG SRC="bgjcb.jpg" align=left WIDTH=150 HEIGHT=150 border=3>JCB INTERNATIONAL<BR><IMG SRC="bgvisa.jpg" align=left WIDTH=150 HEIGHT=150 border=5>VISA CARD<BR></BODY></HTML>

17. <HTML><HEAD><TITLE>NAMED FRAMES</TITLE></HEAD>

<FRAMESET COLS="1*, 3*"><FRAME src="ny.htm" NORESIZE FRAMEBORDER=1><FRAME src="ex17.htm" name="IMG EXAMPLE"><NOFRAMES><BODY>YOUR BROWSER DOES NOT DISPLAY FRAMES. <A href="ex12.htm">go there</A></BODY></NOFRAMES>

</FRAMESET></HTML>

18. <HTML>

<HEAD><TITLE>TV SCHEDULE</TITLE></HEAD><BODY bgcolor=pink><TABLE border="5" align=center cellpadding=7 bgcolor=pink><CAPTION>Television Schedule for Monday</CAPTION><COLGROUP align=center width=75><! -- first column: headings --><COLGROUP>

<COL align="center" width="75"><COL align="left" width="*">

<COLGROUP><COL align="center" width="75"><COL align="left" width="*">

<THEAD VALIGN="bottom" align="center"><TR>

<TH rowspan="3">Channel</TH><TH colspan="4">Time</TH>

<TR><TH colspan="2">6 AM</TH><TH colspan="2">7 AM</TH>

<TR><TH>Show</TH><TH>Description</TH><TH>Show</TH><TH>Description</TH>

<TBODY align="CENTER"><TR>

<TD>3<TD>CHIPS<TD>Ponch discovers some stolen Pentium processors.<TD>The Munsters

<TD>Herman creates a family home page. The cops confiscate his computer.

<TR><TD>7<TD>I love Lucy

<TD>Lucy surfs the web and accidentally charges $50,000 to her VISA.

<TD>The X-files<TD>Scully and Mulder investigate some alien-infested table

cells.</TABLE></BODY></HTML>

19. <HTML>

<HEAD><TITLE>BUILDING A CAKE</TITLE></HEAD><STYLE type="text/css"><!--

BODY {font-family: "Times Roman" serif;font-size: 18pt;color: black;background: white url(bgcc.jpg) repeat fixed right top;margin: 10px 15px}

H1 {font-size: 24pt; color: white; background color: blue; padding: 5px; border: 2px double black}

---!></STYLE></HEAD><BODY>

<H1> HELLO...........WELCOME</H1><BR><FONT face=arial size=6 COLOR=RED>WINSERV TECHNOLOGY</FONT>

</BODY></HTML>

20. <HTML>

<HEAD><TITLE>ELEMENT BOX WIDTH EXAMPLE</TITLE></HEAD><STYLE><!--BODY (font-family: "Arial Black", Impact, sans-serif;

font-size: 16pt}P.twenty {width: 20%;

border: 4px solid blue}P.fifty {width: 50%;

border: 6px blue}P.eighty {width: 80%;

border: 10px solid blue}P.hundred {width: 100%;

border: 12px solid blue}--!></STYLE><BODY>

<P CLASS="twenty">This paragraph has a style sheet width of 20%</P><P CLASS="fifty">This paragraph has a style sheet width of 50%</P><P CLASS="eighty">This paragraph has a style sheet width of 80%</P>

<P CLASS="hundred">This paragraph has a style sheet width of 100%</P>

</BODY></HTML>

21.

<HTML><HEAD><TITLE> WORKING WITH DIVs </TITLE></HEAD><BODY><DIV ID=box1 style=”background-color: red; position: absolute; left:

300; top: 150; width: 50”><IMG SRC=images/SCT-LOGO.JPG></DIV><DIV ID=box2 style=”background-color: red; position: absolute; left: 380;

top: 150; width: 50”><IMG SRC=images/SCT-LOGO.JPG></DIV><DIV ID=box3 style=”background-color: red; position: absolute; left: 300;

top: 190; width: 50”><IMG SRC=images/SCT-LOGO.JPG></DIV><DIV ID=box4 style=”background-color: red ; position: absolute; left: 380;

top: 190; width: 50”><IMG SRC=images/SCT-LOGO.JPG></DIV></BODY></HTML>