Techie Blogspot: Hypertext Markup Language

Hypertext Markup Language

INTRODUCTION

The largest network in the world is the Internet. This network is not used for phones, TVs, or electricity, but for computers. Any computer connected to this network can communicate with any of the others that are also connected. The internet has a number of different services but the most popular is the World Wide Web. The Web

network is the core of what many hope will become the electronic superhighway of the future. In addition to today's text, char, and sound and video clips, the internet will soon feature full screen TV and movies.

World Wide Web

The WWW is a series if interconnected documents stored on computer sites or Web sites. When you use your computer and a software program called a Browser to visit a site on the web, your screen displays a document called a Home Page.

Home Page

Generally a home page gives the name of the organization or individual sponsoring the web site and displays a list of highlighted words, buttons, or pictures.

The idea of the Wen was conceived by Tim Berners-Lee at CERN in 1989 to facilitate the collaboration among scientists working on high-energy physics research. He develop the three standards that made the Web possible. The first described a way for computers to talk to another over the internet - called HTTP (Hypertext Transfer Protocol). The second described how to format documents so that they can be transmitted over the Web - HTML (Hypertext Markup Language).

The third described a way to give each document a unique address so you can find it on the Web - URL (Universal Resource Locator).

Browser

The independent software programs such as those developed by Microsoft and Netscape. Others are integrated into application programs such as word processing programs, spreadsheets, and databases.

The browser provides a number of useful functions:

It allows U to enter the address of the site U want to jump to or to jump there by clicking highlighted words, buttons, pictures or icons called hyperlinks on your screen.

¨ It formats the web documents.

¨ It allows U to back up and go forward through pages U have already visited.

¨ It allows U to print the document U see on the screen.

¨ It allows U to send the receive e-mail and other Internet services.

¨ It makes it possible to transfer files - text, graphics, movies, animations, sounds, and programs - from other computers to your computer (called downloading).

HTML (Hypertext Markup Language) is a document layout in hyperlink specification language. It deadens the syntax and placement of special, embedded, direction that are not displayed by the browser but informs the user how to display the contents of the document including the text, the image and other supporting medias. The languages also helps the user to interact with other documents being currently working in a document by creating hyperlinks which connects the documents with other documents which are available in the local harddisk or may be on Internet.

The main purpose of HTML is use to define a structure and formatting a document so that the information in the document can be delivered quickly by easily to a user over a network for exchanging the ideas using different types of electronic devices.

HTML TAGS

? Basic elements (all HTML documents should have these)

? Structural definition (appearance controlled by the browser's preferences)

? Presentation formatting (author specifies text appearance)

? Links and graphics

? Divider

? Lists Backgrounds and colors

? Special characters

? Forms

? Tables

? Frames

BASIC ELEMENTS

Document Type <HTML></HTML> (beginning and end of file)

Title <TITLE></TITLE> (must be in header)

Header <HEAD></HEAD> (descriptive info, such as

Body <BODY></BODY> (bulk of the page)

STRUCTURAL DEFINITION

Heading <H?></H?> (the spec. defines 6 levels)

Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Division <DIV></DIV>

Align Division <DIVALIGN=LEFT|RIGHT|CENTER>

</DIV>

Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually displayed as

indented)

Emphasis <EM></EM> (usually displayed as italic)

Strong Emphasis<STRONG></STRONG> (usually displayed as bold)

Citation <CITE></CITE> (usually italics)

Code <CODE></CODE> (for source code listings)

Sample Output <SAMP></SAMP>

Keyboard Input <KBD></KBD>

Variable <VAR></VAR>

Definition <DFN></DFN> (not widely implemented)

Author's Address<ADDRESS></ADDRESS>

Large Font Size <BIG></BIG>

Small Font Size <SMALL></SMALL>

PRESENTATION FORMATTING

Bold <B></B>

Italic <I></I>

Underline <U></U> (not widely implemented yet)

Strikeout <STRIKE></STRIKE>(not widely implemented yet)

Strikeout <S></S> (not widely implemented yet)

Subscript <SUB></SUB>

Superscript <SUP></SUP>

Typewriter <TT></TT> (displays in a monospaced font)

Preformatted <PRE></PRE> (display text spacing as-is)

Width <PRE WIDTH=?></PRE> (in characters)

Center <CENTER></CENTER> (for both text and images)

Blinking <BLINK></BLINK> (the most derided tag ever)

Font Size <FONT SIZE=?></FONT> (ranges from 1-7)

Change Font Size<FONT SIZE="+|-?"></FONT>

Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)

Font Color <FONT COLOR="#$$$$$$"></FONT>

Select Font <FONT FACE="***"></FONT>

Multi-Column Text<MULTICOL COLS=?></MULTICOL>

Column Gutter <MULTICOL GUTTER=?></MULTICOL> (default is 10 pixels)

Column Width <MULTICOL WIDTH=?></MULTICOL>

Spacer <SPACER>

Spacer Type <SPACER TYPE=horizontal| vertical|block>

Spacer Size <SPACER SIZE=?>

Spacer Dimensions<SPACER WIDTH=? HEIGHT=?>

Spacer Alignment <SPACER ALIGN=left|right|center>

LINKS AND GRAPHICS

Link Something <A HREF="URL"></A>

Link to Target <A HREF="URL#***"></A> (if in another document)

<A HREF="#***"></A> (if in current document)

Target Window <A HREF="URL" TARGET="***

Define Target in Document <A NAME="***"></A>

Relationship <A REL="***"></A> (not widely implemented)

Reverse Relationship <A REV="***"></A> (not widely implemented)

Display Image <IMG SRC="URL">

Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|

MIDDLE|LEFT|RIGHT>

Alignment <IMG SRC="URL" ALIGN=TEXTTOP|

ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)

Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)

Border <IMG SRC="URL" BORDER=?> (in pixels)

Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?>(in pixels)

DIVIDERS

Paragraph <P></P> (closing tag often unnecessary)

Align Text <P ALIGN=LEFT|CENTER|RIGHT></P>

Line Break <BR> (a single carriage return)

Clear Text wrap <BR CLEAR=LEFT|RIGHT|ALL>

Horizontal Rule <HR>

Alignment <HR ALIGN=LEFT|RIGHT|CENTER>

Thickness <HR SIZE=? (in pixels)

Width <HR WIDTH=?> (in pixels)

Width Percent <HR WIDTH="%"> (as a percentage of page width)

Solid Line <HR NOSHADE> (without the 3D cutout look)

No Break <NOBR></NOBR> (prevents line breaks)

Word Break <WBR> (where to break a line if needed)

LISTS

Unordered List <UL><LI></UL> (<LI> before each list item)

Compact <UL COMPACT></UL>

Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)

<LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)

Ordered List <OL><LI></OL> (<LI> before each list item)

Compact <OL COMPACT></OL>

Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)

<LI TYPE=A|a|I|i|1> (this & subsequent)

Starting Number <OL START=?> (for the whole list)

<LI VALUE=?> (this & subsequent)

Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)

Compact <DL COMPACT></DL>

Menu List <MENU><LI></MENU> (<LI> before each list item)

Compact <MENU COMPACT></MENU>

Directory List <DIR><LI></DIR> (<LI> before each list item)

Compact <DIR COMPACT></DIR>

BACKGROUNDS AND COLORS

Titled Bkground <BODY BACKGROUND="URL">

Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)

Text Color <BODY TEXT="#$$$$$$">

Link Color <BODY LINK="#$$$$$$">

Visited Link <BODY VLINK="#$$$$$$">

Active Link <BODY ALINK="#$$$$$$">

SPECIAL CHARACTERS (these must all be in lower case)

Special Character &#?; (where ? is the ISO 8859-1 code)

< <

> >

& &

" "

Registered TM ®

Non-Breaking Space  

FORMS

Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>

File Upload <FORM ENCTYPE="multipart/form-data"> </FORM>

Input Field <INPUT TYPE="TEXT|PASSWORD |CHECKBOX|RADIO|

IMAGE|HIDDEN|SUBMIT|RESET">

Field Name <INPUT NAME="***">

Field Value <INPUT VALUE="***">

Checked? <INPUT CHECKED> (checkboxes and radio boxes)

Field <INPUT SIZE=?> (in characters)

Max Length <INPUT MAXLENGTH=?> (in characters)

Selection List <SELECT></SELECT>

Name of List <SELECT NAME="***"></SELECT>

# of Options <SELECT SIZE=?></SELECT>

Multiple Choice <SELECT MULTIPLE> (can select more than one)

Option <OPTION> (items that can be selected)

Default Option <OPTION SELECTED>

Input Box Size <TEXTAREA ROWS=? COLS=?>

</TEXTAREA>

Name of Box <TEXTAREA NAME="***"> </TEXTAREA>

Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>

TABLES

Define Table <TABLE></TABLE>

Table Border <TABLE BORDER=?></TABLE>

Cell Spacing <TABLE CELLSPACING=?>

Cell Padding <TABLE CELLPADDING=?>

Desired Width <TABLE WIDTH=?> (in pixels)

Width Percent <TABLE WIDTH="%"> (percentage of page)

Table Row <TR></TR>

Alignment <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

VALIGN=TOP|BOTTOM |MIDDLE>

Table Cell <TD></TD> (must appear within table rows)

Alignment <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

VALIGN=TOP|BOTTOM |MIDDLE>

No linebreaks <TD NOWRAP>

Columns to Span <TD COLSPAN=?>

Rows to Span <TD ROWSPAN=?>

Desired Width <TD WIDTH=?> (in pixels)

Width Percent <TD WIDTH="%"> (percentage of table)

Cell Color <TD BGCOLOR="#$$$$$$">

Table Header <TH></TH> (same as data, except bold centered)

Alignment <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM

VALIGN=TOP|BOTTOM |MIDDLE>

No Linebreaks <TH NOWRAP>

Columns to Span <TH COLSPAN=?>

Rows to Span <TH ROWSPAN=?>

Desired Width <TH WIDTH=?> (in pixels)

Width Percent <TH WIDTH="%"> (percentage of table)

Cell Color <TH BGCOLOR="#$$$$$$">

Table Caption <CAPTION></CAPTION>

Alignment <CAPTION ALIGN=TOP|BOTTOM> (above/below table)

FRAMES

Frame Document <FRAMESET></FRAMESET> (instead of <BODY>)

Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %)

Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size)

Column Width <FRAMESET COLS=,,,></FRAMESET> (pixels or %)

Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size)

Border Widths <FRAMESET BORDER=?>

Borders <FRAMESET FRAMEBORDER="yes|no">

Border Color <FRAMESET BORDERCOLOR="#$$$$$$">

Define Frame <FRAME> (contents of an individual frame)

Display Document <FRAME SRC="URL">

Frame Name <FRAME NAME="***"|_blank|_self| _parent|_top>

Margin Width <FRAME MARGINWIDTH=?> (left and right margins)

Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)

Scrollbar? <FRAME SCROLLING="YES|NO|AUTO">

Not Resizable <FRAME NORESIZE>

Borders <FRAME FRAMEBORDER="yes|no">

Border Color <FRAME BORDERCOLOR="#$$$$$$">

Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers)

-------------------------------------------------------------------

DEMO FOR SOME IMPORTANT TAGS

--------------------------------------------------------------------

<HTML>

<HEAD> <TITLE>USING BASIC HTML TAGS</TITLE> </HEAD>

<B>HELLO!</B><P>

<I>WELCOME COME TO</I><P>

<U> WEB TECHNOLOGIES</U><P>

AND INTERNET PROGRAMMING

</FONT>

<TT>THIS IS TELETYPE TEXT</TT><BR><BR>

<STRIKE>THIS IS &LT;STRIKE&GT;</STRIKE> <BR><BR>

<SMALL>THIS IS &LT;SMALL&GT;</SMALL><BR><BR>

<SUP>THIS<SUB>IS</SUB>SUPER AND SUB SCRIPT</SUP><BR><BR>

<ADDRESS>THIS IS &LT;ADDRESS&GT; </ADDRESS><BR><BR>

<PRE>

THIS IS USING &LT;PRE&GT;

IT IS AN IMPORTANT TAG

<BLINK>THIS WILL WORK ONLY IN NETSCAPE</BLINK>

</PRE>

<MARQUEE> THIS IS USING &LT;MARQUEE&GT;</MARQUEE>

</BODY>

</HTML>

-------------------------------------------------------------

PROGRAM USING ORDER LISTS

------------------------------------------------------------

<HTML>

<HEAD><TITLE> USING ORDERLIST</TITLE></HEAD>

<LI>FIRST<LI>SECOND<LI>THIRD

</OL>

<LI>ONE<LI>TWO<LI>THREE

</OL>

<LI>HTML<LI>JAVASCRIPT<LI>CGI

</OL>

<LI>JAVA<LI>JDBC<LI>SERVLETS

</OL>

<LI>JAVABEANS<LI>JFCSWING<LI>RMI

</OL>

</BODY></HTML>

---------------------------------------------------------------

PROGRAM USING UNORDER LISTS

----------------------------------------------------------

<HTML>

<HEAD><TITLE> USING UNORDERLIST</TITLE></HEAD>

<LI>FIRST<LI>SECOND<LI>THIRD

</UL>

<LI>ONE<LI>TWO<LI>THREE

</UL>

<LI>HTML<LI>JAVASCRIPT<LI>CGI

</UL>

</BODY>

</HTML>

-----------------------------------------------------------

PROGRAMS USING LINKS OR ANCHORS

-----------------------------------------------------------

Link1.html

<HTML>

<HEAD><TITLE>LINKS</TITLE></HEAD>

</FRAMESET>

</HTML>

LINK2.HTML

<HTML>

<HEAD><TITLE> LINKS </TITLE></HEAD>

<BODY>

<A HREF="TABLE.HTML" TARGET=F2>TABLE </A><P>

<A HREF="FRAME1.HTML" TARGET=F2>FRAME </A><P>

<A HREF="BASIC.HTML" TARGET=F2>BASIC</A><P>

</BODY>

</HTML>

-------------------------------------------------------------------

PROGRAM USING IMAGES

-------------------------------------------------------------------

<HTML>

<HEAD><TITLE> IMAGES </TITLE></HEAD>

<BODY>

HERE IS AN IMAGE <BR>

</BODY>

</HTML>

----------------------------------------------------------------------

PROGRAM USING FRAMES

---------------------------------------------------------------------

<HTML>

<HEAD><TITLE> FRAMES</TITLE></HEAD>

</FRAMESET>

</HTML>

PROGRAM USING NESTING OF FRAMES

<HTML>

<HEAD><TITLE> NESTING OF FRAMES</TITLE></HEAD>

</FRAMESET>

</FRAMESET>

</HTML>

-------------------------------------------------------------------------

PROGRAM USING TABLES

-------------------------------------------------------------------------

<HTML>

<HEAD><TITLE> USING TABLE</TITLE></HEAD>

<CAPTION>STUDENT DETAILS</CAPTION>

<TR>

<TH>ROLLNO</TH>

<TH>CLASS</TH>

</TR>

<TR>

<TD>1 </TD><TD>IQBAL</TD><TD>P.G</TD>

</TR>

<TR>

<TD>2</TD><TD>RAJU</TD><TD>DEGREE</TD>

</TR>

<TR>

</TR>

<TR>

<TD>4 </TD><TD>SRINU</TD><TD>P.G</TD>

</TR>

</TABLE>

</BODY>

</HTML>

PROGRAM DEMONSTRATING THE HTML FORM AND ITS CONTROLS

<HTML>

<HEAD><TITLE> USING FORM AND FORM COMPONENT</TITLE></HEAD>

BIO-DATA</H1></B></CENTER>

<FORM>

<PRE>

APPLICANT NAME: <INPUT TYPE="TEXTFIELD"

NAME=A VALUE=""SIZE=20 MAXLENGTH=20><P>

FATHER NAME: <INPUT TYPE="TEXTFIELD" NAME=B VALUE=""><P>

GENDER: <INPUT TYPE="RADIO" NAME=C VALUE="">MALE

<INPUT TYPE="RADIO" NAME=C VALUE="">FEMALE<P>

DATE OF BIRTH:

<OPTION>01 <OPTION>02 <OPTION>03

<OPTION>04 <OPTION>05 <OPTION>06

<OPTION>07 <OPTION>08 <OPTION>09

<OPTION>10 <OPTION>11 <OPTION>12

<OPTION>13 <OPTION>14 <OPTION>15

<OPTION>16 <OPTION>17 <OPTION>18

<OPTION>19 <OPTION>20 <OPTION>21

<OPTION>22 <OPTION>23 <OPTION>24

<OPTION>25 <OPTION>26 <OPTION>27

<OPTION>28 <OPTION>29 <OPTION>30

<OPTION>31

</SELECT>

<OPTION>JAN <OPTION>FEB <OPTION>MAR

<OPTION>APR <OPTION>MAY <OPTION>JUN

<OPTION>JUL <OPTION>AUG <OPTION>SEP

<OPTION>OCT <OPTION>NOV <OPTION>DEC

</SELECT>

<OPTION>1975 <OPTION>1976 <OPTION>1977

<OPTION>1978 <OPTION>1979 <OPTION>1980

<OPTION>1981 <OPTION>1982 <OPTION>1983

<OPTION>1984 <OPTION>1985

</SELECT>

</PRE>

<PRE>

<LEGEND>Educational Qualification</LEGEND>

<TR>

<TH>Degree

<TH>Board or University

<TH>Year of Passing

<TH>% of Marks

</TR>

<TR>

<TD>S.S.C

</TR>

<TR>

<TD>Inter    

<OPTION>M.P.C

<OPTION>B.P.C

<OPTION>C.E.C

<OPTION>H.E.C

<OPTION>M.E.C

</SELECT>

</TR>

<TR>

<TD>Degree

<OPTION>B.Sc(MSCs)

<OPTION>B.Sc(MPCs)

<OPTION>B.Sc(BZC)

<OPTION>B.Com(Comp)

<OPTION>B.C.A

</SELECT>

</TR>

<TR>

<TD>P.G     

<OPTION>M.C.A

<OPTION>M.B.A

<OPTION>M.A

<OPTION>M.Sc

</SELECT>

</TABLE>

</FIELDSET>

</PRE>

<PRE>

ADDRESS:<BR>

</PRE>

<PRE>

CITY: <INPUT TYPE=TEXT> PIN CODE: <INPUT TYPE=TEXT SIZE=7>

TEL NO: <INPUT TYPE=TEXT SIZE=10> S.T.D CODE:<INPUT TYPE=TEXT

SIZE=5>

COUNTRY: <INPUT TYPE=TEXT SIZE=10>

<LEGEND>HOBBIES</LEGEND>

READING <INPUT TYPE=CHECKBOX>

 MUSIC  

ENTERTAINMENT<INPUT TYPE=CHECKBOX>

BUSINESS<INPUT TYPE=CHECKBOX>

SPORTS <INPUT TYPE=CHECKBOX>

</FIELDSET>

</FORM>

</HTML>

VBSCRIPT

INRODUCTION:

VBScript is a subset of Microsoft Visual Basic used in the World Wide Web HTML documents to enhance the functionality of a web page displayed in a web browser. Web browser contains a VBScript engine that executes VBScript code. VBScript is particularly valuable when used with Active Server Pages(ASP) - a technology that allows a server side script to create dynamic content taht is sent to clients browser.

Datatypes in VBScript

VBScript has only one datatype called a variant. A variant is a special kind of datatype that can contain different kinds of information, depending on how it is used.

Variant Subtypes:

Beyond the simple numeric or string classifications, a variant can make further distinctions about the specific nature of numeric information. For ex. you can have numeric information that represents a date or time.The different categories of information that can be contained in a variant are called subtypes.

Declaring Variables:

We declare variables explicitly in our script using the Dim statement.

ex: Dim x

You declare multiple variables by separating each variable name with a comma.

ex: Dim x, y, z.

Constants:

A constant is a meaningful name that takes the place of a number or string and never changes.

ex: Const x=100.

Const Name="Nishitha"

for date MyDate=#05-03-05#.

OPERATORS

VBScript is a case-insensitive language that provides arithemetic operators, logical operators, concatenation operators, comparison operators and relationla operators.

CONTROL STRUCTURES

Basically control structures are divided into two types

1. Conditional Control Structure

2. Loop Control Statements.

Conditional Control Structure:

Using conditional statements, you can write VBScript code that makes decisions and repeats actions. The following conditional statements are available in VBScript.

1. If ... then ... End if

2. If/then/Else/End if

3. Select Case/End Select

DATA VALIDATION

One of the fundamental uses of VBScript is the Client-Side validation. By performing validation on the client side, we don't need to send the data to the server, have it checked, and then have any errors returned all the way back across the internet. With a little scripting on the client-side, we can quickly check and give feedback.

ERROR HANDLING

Error often occur when the user performs an action or combination of actions that leads to a state for which there are no

instructions.An error is a logical state that has no code to deal with

it. It is any situation that causes a program to cease functioning or

to function inappropriately.VBScript supplies a set of options to help

overcome the problem of error recognition.The error object and the

OnError statements both if work together, they will help you recognize

an error as it happens, prevent the machine from falling over, fix the

problem, and set the code off again.

The OnError statements are:

=> OnError GoTo

=> OnError Resume,

=> OnError Resume next

=> OnError Resumen labelname.

Arrarys:

A collection of items that are similar in some way are called

as Arrays. Arrays are data structures consisting of related item of

the same type. A fixed size array's size does not change during pro-

gram execution; a Dynamic array's size can change during execution. A

dynamic array is also called a redimmable array. Individual array

elements are referred to by giving the array name followed by the

element position number in parentheses, (). The first array element

is at position zero.

The position number contained within paranthesis is called an

Index. An Index number be in the range 0 to 2,147,483,648. The

declaration.

Dim name(2).

Instructs the interpreter to reserve three elements for array name.

The value 2 defines the Upperbound (i.e the highest valid index) of

numbers. The lower bound (the lowest valid index) of numbers is 0.

When an upper bound is specified in the declaration, a Fixed-Size

array is created

An Array can be either a Static Array or a Dynamic Array.

a) STATIC ARRAY(or Fixed-Size Array): It is an array whose size does not

change during program execution.

Eg. Dim a(10).

b) DYNAMIC ARRAY(or Redimable Array): It is an array whose size can be

changed during program execution such as array should be first declared

without specifying the size of it.

Eg. Dim a().

----

Redim a(n).

In a dynamic array the size is not defined initially. During program execution, we

set the size of array using Redim as in the above example. so the size of the

array is set to n later.

In case we want to resize the array further we have to use Redim with

Preserve Keyword. Preserve will save the contents of the existing array and

further resize it.

Based on the number of dimensions an array can be:

1. One dimensional Array

2. Two dimensional Array

3. Three dimensional Array.

DHTML

DHTML stands for dynamic HTML. It is used to create the dynamic effects of a web page.

STYLE SHEETS

A style sheet is a collection of rules that effect the appearance of a document. It represents the World Wide Web Consortium's(W3C's) effort to improve on the tag and attribute based style of formatting.

Style sheets provide a way of customizing all the pages at once and in much richer detail than the simple use of tags and attributes. The most common type of style sheet is cascading style sheet (CSS).

Cascading style sheets allows us to specify the style of your page elements separately from the structure of your document. This separation of structure from content allows greater manageability and makes changing the style of your document easier.

Style sheets use a different syntax than HTML, it also has a different terminology, instead of elements, tags and attributes, style sheets consist of rules, selectors, declaration, properties and values.

Syntax:

Selector{property:value;property:value}

eg: Body{background:black;color:red}

A "property" is a browser behaviour that can be affected by style sheet.

A "declaration" is a property and its value to create a declaration, start with the property name, followed by colon, followed by the value for the property. If there are more than one declaration,

separate them using semicolons.

A "selector” is the name of the HTML element to which you want to apply a declaration.

A "rule" is a selector plus a declaration.

Style sheets can be created in Three ways

1. Embedded Style Sheets

2. External Style Sheets

3. Inline Style Sheets.

Embedded style sheets are part of a web page itself. They are useful because they collect the style applied throughout the page and put them into one place i.e the <style> element in the page head. The Type attribute of <style> element is used to indicate what type of style sheet is included.

External style sheets are the style sheets stored separately from the web page. They are useful if we want to set common styles for an entire website i.e for all the pages in the website. When we change the styles in an external style sheet, we can change the styles of all

pages in it. In this case we have to create two text files.

1. An ordinary HTML file with .html extension.

2. An external style sheet file with .css extension which contains only CSS rules.

Inline styles are used when we want to apply style declarations to an individual elements in a particular HTML document. But this is not an efficient way of using style sheets. Style is declared using the STYLE attribute.

CREATING STYLE CLASSES:

A style class is a new style that user can apply to various elements throughout your page. When user create a class, he/she centralize the class's style definition with the rest of the styles in the <STYLE> element or external style sheet.

To create a class style sheet, use a period followed by the name user want for the class. This can be done in two ways. => User can create classes that only apply to particular HTML elements by specifying that elements.

=> User can create generic classes that can apply to every HTML element.

ADDING ID'S:

ID is another feature of style sheets which helps user with zero elements and add attribute values to them. User can assign a name to an element. Your assigned ID to an element and then use that ID to refer to the element in a script. In a style sheet, you attach an ID to a rule. Then user apply the rule to a specific element by assigning that ID to the element.

The ID can be attached to a CSS rule by preceding it with a #sign. This turns the selector into the "ID".

FILTERS AND TRANSITIONS

With DHTML, many visual effects are implemented directly in the client-side browser. User will be able to achieve a great variety of effects. User may transition between pages with random dissolves and horizontal and vertical blinds effect, among others. User can convert

colored images to gray in response to user actions; user can make letters glow, for emphasis. User can create drop shadows to give a text a 3-D appearance.

Applying Filters to text and images causes changes that are persistent. Transitions are temporary: applying a transition allows you to transfer from one page to another with a pleasant visual effect such as random dissolve. Filters and Transitions do not add content to pages-rather, they present existing content in an engaging manner to help hold the user's attention.

Each of the visual effects achievable with Filters and Transitions is programmable, so these effects may be adjusted dynamically by programs that respond to user-initiated events like mouse clicks and keystrokes. The DHTML filters and transitions are built into Internet Explorer.

Filters and Transitions are included with the CSS Filter Property. They give user the same kind of graphics capabilities user gets through MS-Powerpoint. User can have new pages or portions fade in and fade out, randomly dissolve, user can make transparent or semi transparent so that user can see what is behind them, etc.

Two ways of Transitioning Elements

1. Blend Trans: This filter types fades the image in view. It has only one parameter i.e. duration. The fade filter allows the user to control how long it takes the image into view or fade away.

2. Reveal Trans: This filter type allows the user to use the 24 transition types. It uses two parameters i.e duration and transition.

These transitions are applied by making a function called Triggered. By an event such as onload, onclick, onmouseover, on doubleclick, etc.

ACTIVE SERVER PAGES

An ASP is a standard HTML file hat is extended with additional features. Like a standard HTML file, an ASP contains HTML tags that can be interpreted and displayed by a web browser. Anything you could normally place in an HTML can be placed in an ASP. However, an ASP has three important features that make it unique.

1. An ASP can contain server-side scripts. By including serverside scripts in an ASP, you can

create web pages with dynamic content.

2. An ASP provides several built-in objects. By using the builtin objects accessible in an ASP,

you can make your scripts much more powerful. These objects enable you to both retrive

information from and send information to browsers.

3. An ASP can be extended with additional components. ASP comes bundled with several

standard, server-side ActiveX components. These components enable you to do such

things as work with databases, send email, and access the file system.

From the perspective of the web server, an ASP is very different from a normal HTML page. A normal HTML file is sent without processing to the browser. All the commands in an ASP, on the other hand, must first be executed to create an HTML page.

An ASP is primarily a scripting environment. By default, an ASP assumes you'll be using VBScript as your primary scripting language. This means that you don't need to do anything beyond using the <% and %> script delimiters to use this language.

The second way to create an ASP file is by specifying the primary scripting language for a particular page. To do this, place the LANGUAGE directive as the very first line in your ASP file.

The third alternative exists for including scripts in your ASP. i.e you can include Microsoft's extended <SCRIPT> HTML tag.

ASP OBJECTS

ASP include several built-in objects. These objects enable you to extend the power of your scripts. The built-in objects also provide you with control over user sessions and web-server applications. The following are the ASP built-in objects.

1. The Application Object.

2. The Request Object.

3. The Response Object.

4. The Server Object.

5. The Session Object.

6. The ObjectContext Object.

ASP COMPONENTS

Like the built-in objects, ASP components can be used to extend the power of your scripts. Components are used for more specialized tasks. The following are the components of ASP.

1. The Ad-Rotator Component.

2. The Browser Capabilities Component.

3. The Content Linking Component.

4. The Counters Component.

5. The Content Rotator Component.

6. The Page Counter Component.

7. The Permission Checker Component.

8. The Collaboration Data Objects Component.

9. The ActiveX Data Object Component.

DATA ACCESS TECHNOLOGY

Using the Active Data Objects(ADO), we can store and retrieve data from a variety of data providers. For example, we can use the ADO to access information from Microsoft Access and the Microsoft SQL and Oracle database servers. The ActiveX Data Objects consists of Seven independent Objects.

1. Connection Objects.

2. Recordset Objects.

3. Field Objects.

4. Command Objects.

5. Parameter Objects.

6. Property Objects.

7. Error Objects.

X M L

XML is known as "Extensible Markup Language" or "Meta Markup Language". That means the language, which is used to allow to describe another markup language in it.

=> The tags, which are written in XML are all user defined tags.

=> XML is an extensible language. No limit for tags.

ð XML is not for defining purpose, but it is for describing purpose. That means, the

information about tags is described in XML.

=> The languages, which are developed by XML are:

i. CML -> Chemical Markup Language.

ii. MathML -> Mathematical Markup Language.

=> XML works as Database.

=> XML is mainly used to add the data dynamically.

=> Constraints are added to the data by using the DTD or SCHEMAS.

=> The extension of XML documents is ".XML".

=> First tag of XML: < ? XML version="1.0"? >

DOCUMENT TYPE DEFINITION

<! Element >:

It is used to specify an element and describes the children of that element in ().

Syntax:

<! Element elementname (child1,child2,child3, ...) symbol>

Here the symbol value is ?/*/+/-/|

? -> once or nothing

* -> zero or more

+ -> one or more

- -> a-b -> a and b are 2 elements.

The set of strings represented by a but not represented

by b.

| -> a|b -> Here either a or b, but not both.

() -> (a,b,c,---) -> If one element consists of multiple sub

elements.

<! ATTLIST >:

By using this tag we are able to provide the attributes in an element.

Syntax:

<! ATTLIST elementname

Attname Type Restr

Attname Type Restr>

Here Restr will take the value DEFALUT/#IMPLIED/#REQUIRED.

Type will take the value CDATA/PCDATA.

CDATA -> Character Data.

PCDATA -> Parsed Character Data

Program to display a message :

<html>

<head><title> Hello VBScript </title>

document.write("<h1> Welcome to vbscript </h1>")

</script>

</head>

</html>

Program using the alert method:

<html>

<head><title> Hello VBScript </title>

window.alert(" Welcome to vbscript ")

</script>

</head>

<body>

<p> Click Refresh (or Reload) to run this script again. </P.

</body>

</html>

Program to perform arithmetic operations

<html>

<head>

dim a,b

sub arith()

x=f1.t1.value

a=inputbox("Enter an integer","0")

b=inputbox("Enter an integer","0")

select case x

case 1

cmdAdd()

case 2

cmdSub()

end select

End sub

sub cmdAdd()

tot=cint(a)+cint(b)

document.writeln("Total is ")

document.writeln(tot)

end sub

sub cmdSub()

diff=cint(a)-cint(b)

document.writeln("Difference is ")

document.writeln(diff)

end sub

</script>

</head>

<td>

Enter your choice<input type=textbox name=t1 size=1>

</form>

</table></center></body>

</html>

Program for demonstration of do loop

<html>

<head>

x=1

sum=0

do until(x=11)

sum=sum+x

x=x+1

loop

document.writeln("The sum is "&sum)

</script>

</head>

</html>

Program for demonstration of for loop

<html>

<body>

document.writeln("<center>")

for i=1 to 10

for j=1 to 25

document.writeln("*")

document.writeln("<br>")

document.writeln("</center>")

</script>

</body>

</html>

Program to find the factorial of a number using while loop

<html>

<head>

n=inputbox("Enter the number")

no=cint(n)

nfact=1

fact=1

while(fact<no)

fact=fact+1

nfact=nfact*fact

wend

document.writeln("The factorial of "&n&" is" &nfact)

</script>

</head>

</html>

Program for checking whether the given number is amstrong or not

<html>

<head>

n=cint(inputbox("Enter the a value"))

cube=0

m=n

while (n>0)

r=n mod 10

cube=cube+r^3

n=n\10

wend

document.write(cube)

if cube=m then

document.write("amstrong")

else

document.write("Not amstrong")

end if

</script>

</head>

</html>

Program to print the sum of given numbers using arrays

<html>

<head>

dim marks(10)

for i=0 to 4

marks(i)=cint(inputbox("Enter your marks"))

sum=0

for i=0 to 4

sum=sum+marks(i)

document.write(sum)

</script></head>

</html>

program to accept n numbers and displaying them using dynamic arrays

<html>

<head>

dim a,n

n=prompt("Enter how many numbers")

redim a(n)

for i=0 to n-1

a(i)=prompt("Enter numbers")

for i=0 to n

document.write(a(i)&"<br>")

</script>

</head>

</html>

Program to perform the square of the given number

<html>

<head>

sub math()

dim a

a=cint(inputbox("Enter any number"))

sq=fsquare(a)

msgbox(sq)

end sub

function fsquare(a)

a=a*a

fsquare=a

end function

</script>

</head>

<body>

</body>

</html>

Program using embedded style sheets

<html>

<head>

<title>Embedded style sheets</title>

body{background:black;color:red}

a:link{color:cyan}

a:visited{color:yellow}

a:active{color:green}

p{font-style:italic;font-size:24}

</style>

</head>

<body>

Welcome to Embedded Style Sheets

<p> Hello Embedded

<a href="vberr.html"> vberr</a>

</body>

</html>

Program using external style sheets :

<html>

<head>

<title>External Style Sheets</title>

</head>

<body>

<center><h1>External Style sheets</h1></center>

Welcome to Embedded Style Sheets

<p> Hello Embedded

<a href="vberr.html"> vberr</a>

</body>

</html>

Program for demonstration of Inline style sheet

<html>

<head>

<title>External Style Sheets</title>

</head>

<center><h1>External Style sheets</h1></center>

Welcome to Inline Style Sheets

<p style="font-size:30;color:green"> Hello Inline

</p>

</body>

</html>

Program using style classes

<html>

<head><title>Using style classes</title>

body{background:black;color:cyan}

p.Helloclass{font-color:cyan;color:green}

p.Haiclass{font-style:italic:font-size:30}

</style></head>

<body>

<p class="Helloclass">Helloclass</p>

<p class="Haiclass">Haiclass</p>

<p>

Here is <span class="byeclass"> generic class</span></p>

<h1>This <span class="byeclass">is heading one using a generic

</span>class </h1>

</body> </html>

Program for demonstration of class id's

<html>

<head><title>Using style classes ids</title>

#uid{font-size:20;color:blue}

#uid1{font-style:italic;color:red}

</style></head>

<body>

<ol>

<li>BcomI

<li><a id="uid">Bcom2

<li><u id="uid1">BcomIII

</ol>

</body>

</html>

Program for setting backgroundcolor dynamically

<HTML>

<HEAD><TITLE>Object Model</TITLE>

function start()

inputColor = Inputbox( "Enter a color name for the ")

document.body.style.backgroundColor = inputColor

end function

</SCRIPT>

</HEAD>

<P>Welcome to our Web site!</P>

</BODY>

</HTML>

Program for the demonstration of Flip filters

body{background-color:pink}

Table{font-size:50;font-family:arial,sans-serif;

background-color:yellow;border-style:ridge}

td{border-style:groove}

</style></head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Program for the demonstration of image masks

<html>

<body>

<div style="position:absolute;top:125;left:20;

filter:mask(color:magenta)">

AaBbCcDdEeFfGgHhIiJjKk<br>

LlMmNn

</h1>

</div>

</body>

</html>

Program for DHTML absolute positioning

<HTML>

<HEAD><TITLE>Absolute Positioning</TITLE></HEAD>

<IMG SRC = "begin.gif" STYLE = "position: absolute; top: 0; left: 0;

z-index: 4">

<H1 STYLE = "position: absolute; top: 50px; left: 150px; z-

index:3">Text Positioned</H1>

<IMG SRC = "raise.gif" STYLE = "position: absolute; top: 25px;left:

100px; z-index:2">

</BODY>

</HTML>

Program for DHTML relative positioning

<HTML>

<HEAD><TITLE>Relative Positioning</TITLE>

P { font-size: 2em;font-family: verdana}

SPAN { color: red;font-size: .6em;height: 1em }

.super { position: relative;top: -2ex }

.sub { position: relative;bottom: -1ex }

.shiftl { position: relative;left: -1ex }

.shiftr { position: relative;right: -1ex }

</STYLE></HEAD>

<BODY>

<P>

Text text text text <SPAN CLASS = "super">superscript</SPAN>

text text text text <SPAN CLASS = "sub">subscript</SPAN>

text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN>

text text text <SPAN CLASS = "shiftr">right-shifted</SPAN>

Text text text text text

</P>

</BODY>

</HTML>

Program for reveal transition

<html>

<head><title>Intra page transition</title>

sub window_onload()

pic1.filters(0).apply()

pic1.style.visibility="visible"

pic1.filters(0).play()

end sub

sub pic1_onclick()

pic1.filters(0).apply()

pic1.style.visibility="hidden"

pic1.filters(0).play()

end sub

</script>

</head>

<body>

<img src="cool12.jpg" id="pic1"

style="position:absolute;

top:100;left:100;height:400;width:400;visibility:hidden;

filter:revealtrans(duration=6 transition=12)">

</body>

</html>

Program for blend transition

<html>

<head><title>Intra page transition</title>

sub window_onload()

pic1.filters(0).apply()

pic1.style.visibility="visible"

pic1.filters(0).play()

end sub

sub pic1_onclick()

pic1.filters(0).apply()

pic1.style.visibility="hidden"

pic1.filters(0).play()

end sub

</script>

</head>

<body>

<img src="cool12.jpg" id="pic1"

style="position:absolute;top:100;

left:100;height:400;width:400;visibility:hidden;

filter:blendtrans(duration=6)">

</body>

</html>

Program for ASP demonstration

<html>

<head><title>ASP Script </title></head>

<body>

This is a

<% for i=1 to 10 %>

Very,

<% next %>

FINE long sentence.

</body>

</html>

Mixing multiple scripting languages within a single ASP

<% @ language="vbscript" %>

<html>

<body>

function sayhello()

{

response.write("Hello")

}

</script>

for i=1 to 10

sayhello()

next %>

</body>

</html>

Displaying the time using the VBScript time function

<html>

<head><Title>Asp Example</Title></head>

<body>

At the tone, the time will be: <%=time%>

</body>

</html>

Displaying the time using the VBScript time function

using response.write()method

<html>

<head><Title>Asp Example</Title></head>

<body>

At the tone, the time will be:<% response.write(time)%>

</body>

</html>

Using a loop to display the value of a variable

<html>

<body>

<% for i=1 to 10

myvar=myvar&"Very,"

response.write(i&":"&myvar&"<br>")

next %>

<hr>

This is a <%=myvar%> long sentence.

</body>

</html>

ASP Program to fetch the details of Drive

<html>

<body>

<% dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

Response.Write("Drive"& d&":")

Response.Write("Total size in bytes:"& d.Totalsize)

set d=nothing

set fs=nothing %>

</body>

</html>

ASP Program to fetch the details of Folder

<html>

<body>

<% dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

Set fo=fs.GetFolder("C:\c")

Response.Write("The folder was created on:" &fo.DateCreated)

set fo=nothing

set fs=nothing %>

</body>

</html>

ASP Program to check wheter the username and password is correct or not

<% response.buffer=true %>

<html>

<body>

<% uname=request.form("t1")

pwd=request.form("p1")

if uname="raghu" and pwd="veer" then

response.redirect("c:\my documents\formvalid1.html")

else

response.redirect("C:\My Documents\formvalid.html")

end if %>

</body>

</html>

A Simple HTML program containing the form elements and valid at valid.asp

<html>

<table>

<td>

UserName<input type=text name=t1>

<br>

Password<input type=password name=p1>

</form>

</td>

</table>

</body>

</html>

ASP Program using ADO's to fetch the details of the given table

<html>

<head><title>Show Table</title></head>

<body>

Table name:<input name="tablename" size=20>

</form>

<hr>

tablename=Trim(Request("tablename"))

if tablename<>" " then

Set Con=Server.CreateObject("ADODB.Connection")

Call Con.Open("raghu","scott","tiger")

Set RS=Con.Execute("Select * from " & tablename)

<tr>

<% for i=0 to RS.Fields.Count-1 %>

<% next %>

</tr>

<% while NOT RS.EOF %>

<tr>

<% for i=0 to RS.Fields.Count-1 %>

<% next %>

</tr>

RS.MoveNext

Wend

</table>

<% end if %>

</body>

</html>

A simple XML program

<?xml version = "1.0"?>

<title>Simple XML</title>

<date>February 16, 2004</date>

<fname>Raghu</fname>

</author>

<summary>XML is pretty easy.</summary>

<content>Once you have mastered HTML, XML is easily

learned. You must remember that XML is not for

displaying information but for managing information.

</content>

</article>

An XML Program to display the contacts

<?xml version = "1.0"?>

<FirstName>Raghu</FirstName>

</contact>

<LastName>Kumar</LastName>

<FirstName>Manoj</FirstName>

</contact>

<LastName>Kumar</LastName>

<FirstName>Ashok</FirstName>

</contact>

</contacts>

An XML DTD EXAMPLE

<?xml version = "1.0"?>

<!DOCTYPE letter SYSTEM "letter.dtd">

<city>Anytown</city>

<state>Anystate</state>

</contact>

<name>Joe Schmoe</name>

<city>Othertown</city>

<state>Otherstate</state>

</contact>

<paragraph>It is our privilege to inform you about our new

database managed with XML. This new system will allow

you to reduce the load of your inventory list server by

having the client machine perform the work of sorting

and filtering the data.</paragraph>

<paragraph>Sincerely, Mr. Doe</paragraph>

</letter>

4 comments:

Anonymous9 August 2012 at 03:21
This is a topic which is close to my heart... Many thanks!
Where are your contact details though? Check out my website to get more info
about work from home, if you like.
Also visit my homepage how to start a website
Anonymous12 November 2012 at 13:11
Just wish to say youг article is as astounding.

Τhe clarity to your publish іs simplу cool and i саn thіnk you're an expert in this subject. Fine together with your permission allow me to grab your RSS feed to keep updated with imminent post. Thanks one million and please continue the enjoyable work.
Feel free to surf my homepage - Best Baby
Anonymous10 September 2013 at 09:07
Courting is often of a great deal of exceptional sorts, and deciding on the adult
dating net net sheet accordingly is vital. You would possibly occur across world wide web websites
that transpire for being produced for authentic dating, which
may properly carry about associations. Then you are going to
have the option to locate all people that will supply you a chance to
go on casual dates, know-how illicit affairs, a
solitary night time time stands, no strings courting and considerably far more!
Really should you want to create good which you plainly uncover the suitable relationship circumstance you then must opt for the word broad net web sites accordingly a whole lot considerably much too.

Diverse web sites have exclusive forms of people today searching for to socialize.

Also visit my page; live webcams ()

Write your openion about my blog spot..To get automatic facebook updates like my Pagehttps://www.facebook.com/shivashankar4u ..It takes only 1 min to write the comment and to like the page.. Thanks.

Pages

Sunday, 5 August 2012

Hypertext Markup Language

4 comments: