Tuesday, August 12, 2008

DHTML Tutorial

© Moreniche

1. INTRODUCTION TO DHTML:

DHTML stands for Dynamic Hyper Text Markup Language. It is also a scripting language that is used for developing attractive and catchy web pages. With the help of DHTML we can combine html with cascading style sheets and other scripting languages. “css” feature in DHTML is used to determine an element ‘s size color, position and a number of other features. The working of DTHML is same as that of html that is writing the coding in the notepad and saving the document as html file.

Cascading Style Sheets:

Cascading style sheets allow you to specify the style of your page element (font, spacing, margin, etc) separated from the structure of your document (section header, body text, links, etc). Cascading style sheets enforce standards and uniformity throughout a web site and provide numerous attributes to create dynamic effects. Css can make global changes to all documents from a single location.

This separation of structure from content allows greater manageability and makes changing the style of your document easier. The style assigned process is accomplished with the tags. Between the tags are written within the …. tags.

Syntax:-

Ø Design A Web Page Using Cascading Style Sheet:

</p> <p class="MsoNormal" style="text-align: justify;">Working with cascading style sheets</p> <p class="MsoNormal" style="text-align: justify;">



Vision 2000

Computer Education

Authorised software user of Microsoft

Output Of The Web Page:

The SPAN Tag:

…….. TAG:-

SPAN is a generic grouping element it doesn’t apply any inherent formatting to it s contents SPAN tag plays a prominent role in style sheets its main use is to apply styles or ID attribute to a block of text.

It is displayed inline a so called in line – level element with other text. With no liner breaks a similar element is the div element.

In the body of the document …….. is used to set the boundaries of the rules styling specifications.

Ø Design A Web Page Using SPAN Tag:

</p> <p class="MsoNormal" style="text-align: justify;">SPAN</p> <p class="MsoNormal" style="text-align: justify;">

Garments Sale

We are giving a sale on all types of garments. You will get here suits, shirts, pants, jeans, cotton pants, leather jackets, T-shirts, casual wear, sarees, salwar suits etc.

Special offer for Children

For childrens you will get a huge range of collection of frocks, pants, shirts, T-shirts, Baba-suit, gallies, ghagra, churidars etc. We are offering 10% discount if the purchase price is more than Rs.500.

Winter Special

Under one roof we are giving sale for winter garments too. Shawls, sweater, woolen jackets, blankets are available.

Output Of The Web Page:

The DIV Tag:

…..
TAG

A similar element is the div tag element which also applies no inherent style, but is displayed on its online with margins above and below also called block level element a web page can be divided into segments or divisions called DIV’s. 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, which are absolute or relative position the segment with respect to the top/ left edge of the browser window. In contrast with the absolute, relative position the segment in relation to the other element on the page.

Ø Design A Web Page Using DIV Tag:

</p> <p class="MsoNormal" style="text-align: justify;">USING DIV TAG</p> <p class="MsoNormal" style="text-align: justify;">

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, which are absolute or relative position the segment with respect to the top/ left edge of the browser window.

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, which are absolute or relative position the segment with respect to the top/ left edge of the browser window.

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, which are absolute or relative position the segment with respect to the top/ left edge of the browser window.

Output Of The Web Page:

Ø BORDER Attribute:

The border lies between the padding space and the margin space, and has numerous properties to adjust its appearance.

  • Design A Web Page Using BORDER Attribute:

</p> <p class="MsoNormal" style="text-align: justify;">Working with Borders</p> <p class="MsoNormal" style="text-align: justify;">


This text has a thick groove border


MEDIUM GROOVE”>This text has a medium groove border


This text has a thin groove border

CLASS=”THIIN BLUE INSET”>This text has a thin blue inset border


<P CLASS=”MEDIUM BLUE OUTSET”>This text has a medium blue outset border


Output Of The Web Page:

Note: - Keep in mind that the BORDER styles are available only for Macintosh systems.

The LIST Tag:

We can also create list in DHTML. Following are the attributes that can be specified with list.

Ø Design A Web Page Using LIST Tag:

LIST

Syllabus for 1st semister

Dear Students

We wish you all the best for your 1st semister exam. We are giving you the syllabus details and we going to declare the exam date on 25thNovember 2001.

Syllabus details:

  • Windows 98

  • Ms Office 2000

  • Internet

  • C++

  • Visual Basic

HTML Tutorial

© Moreniche

1. INTRODUCTION TO HTML:

The modern era is the era of the evolution of the communication and transmission technologies. Internet is emerging as the major communication tool for exchanging the thought, knowledge and the feelings of the Internet users. Internet opens the doors of the world of the knowledge and the emerging technologies. The internet uses the WEB SITE, or the WORLD WIDE WEB for the information exchange.

The World Wide Web is built of Web pages, and those pages are themselves created with HyperText Markup Language, or HTML. Though many folks talk about HTML Programming with a capital P (particularly recruiters), HTML is really not a programming language at all. HTML is exactly what it claims to be: a markup language. You use HTML to mark up a text document, just as you would if you were an editor using a red pencil. The marks you use indicate which format (or style) should be used when displaying the marked text.

The HTML stands for “HyperText Markup Language”. It is the collection of the platform independent styles that defines the various components of the www documents. HTML was invented by the TIM-BERNER-LEE. With the help of HTML and www, we have the ability to bring together text, graphics, picture, songs and links at one place or in a single page. HTML files are plain text files. So they can be composed and edited on any type of the computer. To publish the information for the global access or distribution, one needs a universally accepted and understood language that all the computers may potentially understand.

HTML gives the information to publish online documentation with heading text, labels, lists, photos etc. To retrieve the online information we can use the hypertext links.

Structure Of HTML Documents:

HTML documents are essentially plain text files. They contain no image, no song, no video and no animation. How they can include “pointer” or “links” to these to other file types .HTML itself is a system of codes made up of tags and attributes that serves to identify parts and the characteristics of the HTML document. HTML tags identify logical document parts that is the major structural components are the parts of the HTML document such that headings, lists and paragraphs. The tags and browsers work together to identify the document parts and tell the browser how to display them?

The structure of a HTML document includes the following parts:

HTML…../HTML

The opening and closing statement of the HTML syntax.

HEAD…../HEAD

This tag contains all the document header information.

TITLE…../TITLE

This container is placed within the HEAD Structure between title tag we must have the title of the document. This will appear as the top of browser title bar.

BODY…../BODY

Body comes after the HEAD structure. Between the body tags we find all of the staff that gets displayed in the browser window. All the text graphics and link are used in the body tag.

2. A SIMPLE WEB PAGE:

Introduction To A Web page:

The HTML pages are the standard interface to the Internet. These pages are in turn are collection of the various tags. These tags enable the web page to perform the required task. A simple web- page is shown as follows. It contains the tag which tells the start of the web page,tag is the next one which inform the heading of the page to the interpreter, tag defines the name of the page which is shown on the title bar of the explorer, the<body>tag is the area where the whole of the information about the web page is stored and displayed .<h1>tag defines the topic of the page. The following code displays a simple page.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><b><u><span style="font-size: 14pt; color: black;">Designing A Simple Web page:</span></u></b><b><u><span style="color: black;"><o:p></o:p></span></u></b></p> <p class="MsoNormal" style="text-align: justify;"><u><span style="color: black;"><o:p><span style="text-decoration: none;"> </span></o:p></span></u></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><html><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><head><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><title>A Simple Sample HTML Document

Welcome to the World of HTML

HTML documents can be as simple as this Web page, which consists of just a single page of text and links, or as complex as a 10,000 page corporate intranet site replete with Java applets and CGI database access.

Output Of The Web page:

3. DESIGN A WEB PAGE USING HEADINGS, PARAGRAPH & BREAK TAGS:

Headings:

Headings are used in HTML documents to indicate different sections. There are six different Heading sizes, which range from very large to very small (smaller than the default body text). You should use headings judiciously, keeping them short and concise. The most common use for a heading is as the first line of a home page. In essence, it becomes a headline for your document. It is represented by

,

……..

tags in HTML document. These are closed by respective
tags.

Paragraph:

One of the most commonly used tags in HTML is the paragraph marker, which is used to break apart blocks of text into separate paragraphs. Any formatting that you perform in Notepad, such as placing carriage returns, extra spaces, or tab stops, will be ignored by Web browsers. The only way to indicate separate paragraphs is by using the paragraph marker. Unfortunately, despite its simplicity, the paragraph marker is also one of the most misunderstood tags in HTML. The paragraph tag is represented by the

tag in the HTML document and is closed by the

tag.

Line Breaks:

The line break tag is used to break the line in the paragraph. It is represented by the
tag. This tag does not have any opening tag.

Designing The Web Page With Heading, Paragraph & Break Tags:

General Officers of the <st1:country-region st="on"><st1:place st="on">US</st1:place></st1:country-region> Army in the Civil War

Union Generals of the American Civil War


This listing contains the names of the general officers of the Regular Army and of the Volunteer Army, as well as the date of their appointment to the rank.

In all cases only the full rank is given. Many officers had a rank that was often one or two ranks higher than the full rank.

Remember also, that it was possible for an officer to have rank in a state militia, the Volunteer Army, and the Regular Army; all at the same time.

With brevet ranks taken into account, it was possible for an individual to have as many as six ranks simultaneously, depending upon who he was dealing with.

Output Of The Web page:

DESIGN A WEB PAGE USING TEXT ALIGNMENT:

Aligning The Text In A Web Page:

Some HTML tags allow us to specify the alignment of the text in the HTML document. Using these tags the paragraphs can be justified according to the need i.e. left, right, or centrally aligned text. In HTML there are three tags that are used to justify the documents. These tags are align ‘left’, align ‘right’, or align ‘center’. These tags are used with the paragraph tag and they need not too be closed as they are applied only on the text written within the paragraph.

Designing An Aligned Text Web Page:

Align

TEXT ALIGNMENT

This is the left aligned text.

This is the right aligned text.

This is the centrally aligned text.


Output Of The Web Page:

5. DESIGN A WEB PAGE WITH FORMATTED TEXT & FONT CONTROL:

Introduction:

The text formatting helps us to give a specific look to our document and to make it more attractive and more users friendly. The text formatting in the HTML includes the following tags:-

...

This tag is used to show the text in the Boldface i.e. this tag shows the text as bolded.

This tag is used to set the font as the base font.

...

This tag is used to show the text larger.

This tag is used to show the text smaller.

...

This tag is used to show the text in the italic format.

This tag is used to underline the text.

This tag is used to change the font of the text. This tag also includes the sub-tags to change the font according to our need. These sub-tags include fontsize, fontcolor, fontface etc.

This tag is used to show the Superscript small.

This tag is used to show the subscript small.

This tag shows the Monospaced small type-Writer font.

Designing The Web Page With Formatted Text :

<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Text Test <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">

the Script

a text test

I typed a superscript

of small union strike rhymes

so my

preformatted

w o r d s

subpicketlines

Output Of The Web Page:

Designing The Web Page With Formatted Text And Font Control:

A History

A History Of

Everything


It starts with a bang

Then everything inflates like a super balloon tied up

with super stringd until the whole mess curldes into

millons of milky ways staright hits the

volcannic rocks and cooks upsome tasty double helix

treats.They get eaten by each other , the fiitest {and

least tasty} servive .a meteor kills the

big ones and when it all freezes over the growing grass.

The End

Output Of The Web Page:

Design A Web Page With Special Characters:

Punctuation Line

Q:What should you do when a British Banker picks a fight with you?

A:£some¢¢into him.


Q:What do you call it when a Judge tales part of a law off the books ?

A:§violence.


Q: What did the football coach gat from the locker room vending a

machine in the middle of the game?

A:A&frack14;back at &frack12;time.

Q:How hot did it when the police detective interrogated the mathmatician?

A:x³°


Q:What does a punctilious plagrist do?


A:©


Output Of The Web Page:

6. DESIGN A WEB PAGE WITH LINKING:

Linking To Other Web Pages:

Hypertext is a term we frequently hear associated with the Web. A hypertext document is a document that contains links to other documents, allowing us to jump between them by clicking the links.

Ø Understanding Links:

A link really has two different parts. First, there's the part we see on the Web page called an anchor. There's also the part--the URL reference--that tells the browser what to do if you click that link. When you click a link's anchor, the browser loads the file or document given by the link's corresponding URL reference. It executed by the linking tag i.e.

click here

  • Designing Linked Web Page:

    • File-1 Using the Link (Main Page):

History

History Quiz

Complete the following Sentences:-

1. Columbus Sailed the oecan blue in ...... .

2.the Spanish Armeda mt its fate in ......... .

3.London burnt like the rotten sticks ....... .

4.Tricky Dickie served his time in .......... .

5.Billy C. went on a spree in .......... .

Click Here for answers

o File- 2 To be Linked (Linking Page):

History Quiz

History Quiz Answers

.......... 1492.

.......... 1588.

.......... 1666.

.......... 1969.

.......... 1993.

click here for questions

Output Of Main Page:

Output Of Linking Page:

Linking To A Specific Part Of The Web Page:

The HTML provides us the facility of linking the web page to the specific part of the other page. This technique is used in indexes and where we have transfer between the pages instant shifting is required and we do not want to read whole of the document. This type of linking can be shown as follows:

Ø Designing The Web Page Linked Specifically To Other:

Alphabetical Shakespeare<title></head><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><body><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a name ="top"></a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><h2>First line of every Shakespearren Sonnet </h2><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">dont ya just here when u go a-couting and there <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">are u down<span style=""> </span>on one knee about to rattle off totally romantic <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Shakespeare Sonnet, and zap ! u space it .<i>"um .... it was<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">uh... I think it started with a b..."</i><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><p><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">The application layer contains a variety of protocols that are commonly needed. For example, there are hundreds of incompatible terminal types in the world. Consider the plight of a full screen editor that is supposed to work over a network with many different terminal types, each with different screen layouts, escape sequences for inserting and deleting text, moving the cursor, etc. <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">One way to solve this problem is to define an abstract network virtual terminal for which editors and other programs can be written to deal with. To handle each terminal type, a piece of software must be written to map the functions of the network virtual terminal onto the real terminal. For example, when the editor moves the virtual terminal's cursor to the upper left-hand corner of the screen, this software must issue the proper command sequence to the real terminal to get its cursor there too. All the virtual terminal software is in the application layer. <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"></p><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><h3 align ="center ">Alphabatical Index <br/><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">(click on the letter)<br/><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#A"> A</a> <a href ="#B"> B</a> <a href ="#C"> C</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#D"> D</a><a href ="#E"><span style=""> </span>E</a><a href ="#F"> F</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#G"> G</a><a href ="#H"> H</a><a href ="#I"> I</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#J"> J</a><a href ="#K"> K</a><a href ="#L"> L</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#M"> M</a><a href ="#N"> N</a><a href ="#O"> O</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#P"> P</a><a href ="#Q"> Q</a><a href ="#R"> R</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#S"> S</a><a href ="#T"> T</a><a href ="#U"> U</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#V"> V</a><a href ="#W"> W</a><a href ="#X"> X</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><a href ="#Y"> Y</a><a href ="#Z"> Z</a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"></p><hr/></p><a name ="A"></a><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><h2> A</h2><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Another application layer function is file transfer. <br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Different file systems have different file naming conve<br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">ntions, different ways of representing text lines, and so on. <br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Transferring a file between two different systems requires hand<br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">ling these and other incompatibilities. This work, too, belongs to the <br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">application layer, as do electronic mail, remote job entry, directory lookup<br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">, and various other general-purpose and special-purpose facilities. <br /><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><p><a href ="# top "><i>Return to Index<i></a></p><hr/><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"></body><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"></html><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><b><u><span style="color: black;">Output Of The Linked Page:<o:p></o:p></span></u></b></p> <p class="MsoNormal" style="text-align: justify;"><u><span style="color: black;"><o:p><span style="text-decoration: none;"> </span></o:p></span></u></p> <p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;"><span style="color: black;">When we click on the links designed i.e. A…..Z the following output arrives.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><b><u><span style="color: black;">Output Of The Link:<o:p></o:p></span></u></b></p> <p class="MsoNormal" style="text-align: justify;"><u><span style="color: black;"><o:p><span style="text-decoration: none;"> </span></o:p></span></u></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><b><u><span style="font-size: 14pt; color: black;">Adding An E-Mail Link To The Web Page:<o:p></o:p></span></u></b></p> <p class="MsoNormal" style="text-align: justify;"><u><span style="color: black;"><o:p><span style="text-decoration: none;"> </span></o:p></span></u></p> <p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;"><span style="color: black;">The e-mail links can be added to the Web Page, as follows:<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="margin-left: 0.5in; text-align: justify; text-indent: -0.25in;"><!--[if !supportLists]--><span style="font-family: Wingdings; color: black;"><span style="">Ø<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><!--[endif]--><b><u><span style="color: black;">Designing The Web Page To Add An E-Mail Link: <o:p></o:p></span></u></b></p> <p class="MsoNormal" style="text-align: justify;"><u><span style="color: black;"><o:p><span style="text-decoration: none;"> </span></o:p></span></u></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;"><html><head> <title>e mail

German Philospher's club
e mail directory

Output Of The Web Page:

When we click on the e-mail address given in the html document, the OUTLOOK Express of open the e-mail compose window, where the we compose the message.

7. DESIGN A WEB PAGE USING LISTS:

Using Lists In The HTML:

The HTML provides us the facility of list in the web page. The listing provides selective opportunity.

Types Of HTML Lists:

There are three basic types of HTML lists. These are:

The numbered list at the top is called an ordered list. It begins with the

    tag and ends with a closing
tag. Numbers and line breaks appear automatically at each
  • tag, and the entire list is indented.

    The bulleted list is called an unordered list. It opens with the

      tag and closes with
    . It looks just like an ordered list, except that bullets appear at each
  • tag instead of numbers.

    The list of terms and their meanings is called a definition list. It starts with the

    tag and ends with
    . The
    tag goes in front of each term to be defined, with a
    tag in front of each definition. Line breaks and indentation appear automatically.

    Designing A Web Page Using An Ordered List:

    Nested Ordered List Example Using Type

      Planets of the Solar System:

    1. Mercury

      1. 57.9 million kilometers from the sun

      2. no satellites

    2. Venus

      1. 108 million kilometers from the sun

      2. No satellites

    3. Earth

      1. 149.6 million kilometers from the sun

      2. one satellite: The Moon

    4. Mars

      1. 227.9 million kilometers from the sun

      2. two satellites

        1. Phobos

        2. Deimos

      Output Of An Ordered List:

      Designing A Web Page Using An Un-ordered List:

      Nested Unordered List Example

        Planets of the Solar System:

      • Mercury

        • 108 million kilometers from the sun

        • no satellites

      • Venus

        • 108 million kilometers from the sun

        • No satellites

      • Earth

        • 149.6 million kilometers from the sun

        • one satellite: The Moon

      • Mars

        • 227.9 million kilometers from the sun

          LI>two satellites

          • Phobos

          • Deimos

      Output Of An Un-Ordered List:

      Designing A Web Page Using The Definition List:

      Definition List Example

      Mercury

      The smallest of the planets and the one nearest the sun,

      having a sidereal period of revolution about the sun of 88.0

      days at a mean distance of 58.3 million kilometers (36.2

      million miles) and a mean radius of approximately 2,414

      kilometers (1,500 miles).

      Venus

      The second planet from the sun, having an average radius

      of 6,052 kilometers (3,760 miles), a mass 0.815 times that of

      Earth, and a sidereal period of revolution about the sun of

      224.7 days at a mean distance of approximately 100.1 million

      kilometers (67.2 million miles).

      Earth

      The third planet from the sun, having a sidereal period

      of revolution about the sun of 365.26 days at a mean distance

      of approximately 149 million kilometers (92.96 million miles),

      an axial rotation period of 23 hours 56.07 minutes, an average

      radios of 6,374 kilometers (3,959 miles), and a mass of

      approximately 29.11 x 10^24 kilograms (13.17 x 10^24 pounds).

      Output Of The Definition List:

      8. DESIGNING THE FORMS:

      Form Designing In HTML:

      HTML provides us the facility to interact with the HTML documents. The basic construction of a html form is this...

      begin a form
      ask for information in one of several different ways...
      ...there can be as many input areas as you wish
      end a form

      Design HTML Form In A Web Page:

      FORM

      Registration Form


      E-mail ID :

      Password :


      Name :

      Address :

      Occupation :

      Hobbies :

      Music

      Games

      Shopping

      Computers

      How did you get our site? :

      Search Engine

      Reference in a Book

      Other

      Output Of HTML Form:

      . DESIGN A WEB PAGE USING FRAMES:

      Frame Designing In HTML:

      Dividing a page into frames is actually quite simple. The basic concept goes like this: Each frame is a regular, complete html document. If you wanted to divide your page into 2 side-by-side frames, then you would put one complete html document in the left frame and another complete html document in the right frame. In addition you need to write a third html document. This MASTER PAGE (I'm coining a new phrase here folks) contains the tags that specify what goes where. As a matter of fact, that's about its only function.

      There are only two main frame tags to contend with: and . Frames are designed to use the multiple web pages as follows:

      Designing Frames In A Web Page:

      <o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">Your browser cannot display frames.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="color: black;">

      Output Of The Web Page:

      The tag does all the dividing. That's all it does... divide up windows. It specifies a few things regarding how to divide them up, but remember, whenever you want to do some dividing - use .

      If we specify dividing into ROWS instead of COLS we get something else entirely.

      Let's go back down to 2 frames, divided equally into columns.

      We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The * means whatever is left over.

      10. DESIGN A WEB PAGE USING TABLES:

      Table Designing With HTML:

      One of the most powerful tool for creative Web Page Design is the Table which allows us to arrange text and graphics into multiple columns and rows.

      The basic HTML table tags are as follows:

      These HTML tags are the containers for the rest of the table data.

      Each row in the table is contained by these tags. You can optionally leave off the closing tag.


      Defines a cell. Table data is contained within these tags. You can also nest additional tables within a single cell. You can optionally leave off the closing tag.

      These table header tags are used to define headers, usually in the first row or column of the table. You can optionally leave off the closing tag.

      Designing Table In A Web Page:

      RAILWAY TIMING

      NEW TIME TABLE AND FARE LIST
      NAMEOF TRAINPLACEDESTINATION ARRIVALDEPARTUREFARE
      RAJDHANI EXPRESSBOMBAY DELHI7:30 08:45989.00
      MADRAS MAILBOMBAY MADRAS9:00 10:15450.00
      KONYA EXPRESSBOMBAY BANGLORE11:30 12:25450.00
      KONKAN EXPRESSBOMBAY MANGLORE13:30 14:45645.00
      DECCAN EXPRESSBOMBAY MADRAS13:30 14:45756.00

      Output Of The Web Page:

      11. DESIGN A WEB PAGE USING GRAPHICS AND IMAGES:

      HTML provides us the facility of adding graphics and backgrounds to the document. This tool helps us to make our documents more presentable and good looking.

      graphic

      simple graphic example

      Output Of The Web Page:

  • Search

    My Blog List