DHTML Tutorial

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:

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:

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:

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:

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

HTML Tutorial

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,

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:

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:

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 :

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

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

German Philospher's club
e mail directory

• Emmanuel Kant President
  

  manny@netletter.com

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:

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:

   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:

   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:

   Registration Form

   ---

   E-mail ID :
   

   Password :
   

   ---

   Name :
   

   Address :
   

   Occupation :

   Student

   Engineeer

   Businessman

   Computers

   
   
   

   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:

   NEW TIME TABLE AND FARE LIST

   NAMEOF TRAIN	PLACE	DESTINATION	ARRIVAL	DEPARTURE	FARE
   RAJDHANI EXPRESS	BOMBAY	DELHI	7:30	08:45	989.00
   MADRAS MAIL	BOMBAY	MADRAS	9:00	10:15	450.00
   KONYA EXPRESS	BOMBAY	BANGLORE	11:30	12:25	450.00
   KONKAN EXPRESS	BOMBAY	MANGLORE	13:30	14:45	645.00
   DECCAN EXPRESS	BOMBAY	MADRAS	13:30	14:45	756.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.

   simple graphic example

   

   Output Of The Web Page: