Wednesday 24 October 2012

Use of Scripting as Language support:

The web is by nature client/server environment. The server stores information, client does processing. With VB script, you can add small programs to your pages that are executed on the server.
Web pages are by definition interactive, each time when we click hyperlink, we are taken to another page. This type of interaction requires trip to server at each step. The web page cant response to events, such as click of button because HTML is not a programming language. It cannot display date or simple calculations.
            The latest trend in web design is to make pages active. A active page behaves like an application. It has its own interface, composed of common windows element & interacts to visitors in manner similar to windows application.
            SCRIPT is an embedded application. Script are simple programs, embedded in HTML pages as ASCII text, When the page is downloaded, the script is downloaded with it and is executed by browser on client computer.
            VB script is lightweight version of Visual Basic. You can insert  script in HTML document.
<SCRIPT>tag:
The VB script can be placed in <SCRIPT> start tag & </SCRIPT> end tag. You need to mention attribute LANGUAGE=”VBScript” as shown below.
<SCRIPT LANGUAGE=”VBScript”>
Your scripting code
</SCRIPT>
When browser hits <SCRIPT >tag ,it calls VB script interpreter to compile & execute the code.
EXCERSIZE 9:
Write a HTML code for VB Script DEMO
HTML code:
<HTML>
<HEAD>
<TITLE> VB SCRIPT DEMO</TITLE>
<SCRIPT LANGUAGE=”VBScript”>
Document.fgcolor=”h ff 0000”
Document.bgcolor=”h 00 ffff”
Msgbox “WELCOME TO VB SCRIPT”
</SCRIPT>
</HEAD>
<BODY>
<H1>VB SCRIPT DEMO</H1>
</BODY>
</HTML>


EXCERSIZE 10:
Write a HTML code for VB Script TO display local time & day.
HTML code:
<HTML>
<HEAD>
<TITLE> LOCAL TIME & DAY</TITLE></HEAD>
<BODY>
<H1> LOCAL TIME & DAY </H1><HR>
The local time is now
<SCRIPT LANGUAGE=”VBScript”>
Document. Write Time() & “on” & -
Month Name(Month(Now),False)&””&Day(Now)-
&”,”&Year(Now)
</SCRIPT>
</BODY>
</HTML>

EXCERSIZE 12:
Write a HTML code with VB script for a webpage which greets “Good Morning” if time is 12:00am to 12:00 pm else greets “Good Afternoon”
HTML code:
<HTML>
<HEAD>
<TITLE> Greeting</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”VBScript”>
Function Greeting()
If time()>=#12:00 AM # And Time()_
            <#12:00:00PM# Then_
            Greeting=”GOOD MORNING!!!”_
ELSE_
            Greeting=”GOOD AFTERNOON!!!”_
EndIf
End Function
Document.write.greeting()
</SCRIPT>
<BR>
</BODY></HTML>

Table tag in HTML with programs


Tables:
HTML tables mark up data that should be organized in table structure,instead of in paragraph or other block level structure.with table you can present data organized in rows & columns.
<TABLE>tag:
In html table can be created by start tag <TABLE> & end tag </TABLE> .with <TABLE> tag you can determined the following formatting options for your table.
All table related tags with different table elements can be inserted within <TABLE> & </TABLE>.
ATTRIBUTES:
1.    ALIGN:
It controls the alignment to left,right & center.
2.    BORDER:
It sets the table border in the form of pixels.
3.    CELLPADDING:
It controls the distance between data & boundries of cell.
4.    CELLSPACING:
In controls the distance between. Adjacent cells
5.    COLSPAN:
This attributes is used when we want to merge no. of columns
6.    ROWSPAN:
This attributes is used when we want to merge no. of rows
7.    WIDTH:
It sets the width of table.
8.    VALIGN:
VALIGN controls the vertical alignment of the cell content to top, middle or bottom.

<CAPTION>tag:
<CAPTION>tag is used to create a caption on top of or below the table.
It requires <CAPTION>start tag & </CAPTION>end tag.
It can be used with ALIGN attribute.
For example:
<CAPTION ALIGN=”TOP”>Yesterday’s weather</CAPTION>
<TR>:
<TR>tag is used to define a row within table.<TR>tag ends with </TR>.
<TR> is a row tag.
It creates a horizontal row of cells and contains table heading & table data.
Each use of a table row element begins a new table row.
ATTRIBUTES:
1.    BGCOLOR: Background color
2.    ALIGN: left, Right & center alignment
3.    VALIGN: Vertical alignment
<TH>tag:
These tag can be inserted inside the <TR> tag.
<TH> tag is used to provide the table heading.
<TD>tag:
<TD>tag describes data in the table.
ATTRIBUTES:
1.    ALIGN: left, Right & center alignment
2.    VALIGN: Vertical alignment
3.    Width: Set the width
4.    Hight:  Set the hight
5.    COLSPAN: This attributes is used when we want to merge no. of columns
6.    ROWSPAN: This attributes is used when we want to merge no. of rows



EXCERSIZE 6:
Write a HTML code for display the following table:
City
High
Low
Wind
Aurangabad
30
20
South
Latur
32
21
South
Osmanabad
35
22
west
Nanded
39
25
West
Jalna
33
20
south
<HTML>
<HEAD>
<TITLE> EXCERSIZE 6</TITLE>
</HEAD>
<BODY>
<TABLE><CAPTION> Yesterday’s weather</CAPTION>
<TR>
            <TH>City</TH>
            <TH>High</TH>
            <TH>Low</TH>
            <TH>Wind</TH>
</TR>
<TR>
            <TD>Aurangabad</TD>
            <TD>30</TD>
            <TD>20</TD>
            <TD>south</TD>
</TR>
<TR>
            <TD>Latur</TD>
            <TD>32</TD>
            <TD>21</TD>
            <TD>south</TD>
</TR>
<TR>
            <TD>Osmanabad</TD>
            <TD>35</TD>
            <TD>22</TD>
            <TD>west</TD>
</TR>
<TR>
            <TD>Nanded</TD>
            <TD>39</TD>
            <TD>25</TD>
            <TD>west</TD>
</TR>
<TR>
            <TD>Jalna</TD>
            <TD>33</TD>
            <TD>20</TD>
            <TD>south</TD>
</TR>
</BODY>
</HTML>


EXCERSIZE 7:
Write a HTML code for display the following table:


<HEAD>
<TITLE>Merit List</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
<TH ROWSPAN ="2">Sr.No.</TH>
<TH ROWSPAN="2"> Student Name</TH>
<TH COLSPAN="3"> Marks Obtained</TH>
<TH ROWSPAN="2"> TOTAL</TH>
</TR>
<TR>
<TD> TEST 1</TD>
<TD> TEST 2</TD>
<TD> TEST 3</TD>
</TR>
<TR>
<TD> 1</TD>
<TD>Rahul</TD>
<TD>150</TD>
<TD>150</TD>
<TD>150</TD>
<TD>450</TD>
</TR>
<TR>
<TD> 2</TD>
<TD>Sachin</TD>
<TD>129</TD>
<TD>130</TD>
<TD>131</TD>
<TD>390</TD>
</TR>
<TR>
<TD> 3</TD>
<TD>Mahendra</TD>
<TD>125</TD>
<TD>115</TD>
<TD>120</TD>
<TD>360</TD>
</TR>
</TABLE>
</BODY>
</HTML>

EXCERSIZE 8:
Write a HTML code for display the following table:

Pav Bhaji
Without Cheese
700 calories
With Cheese
750 calories

<HTML>
<HEAD>
<TITLE>Nutritian Data</TITLE>
</HEAD>
<BODY>
<TABLE>
 <TR>
<TD ROWSPAN=”2”>Pav Bhaji</TD>
            <TD>Without Cheese</TD>
            <TD>700 calories</TD>
</TR>
<TR>
            <TD>With Cheese</TD>
            <TD>750 calories</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Listing Tags


<LI>tag:
<LI> is a list tag. There are three main types of list.
  1. Unordered list
  2. Ordered list
  3. Definition list
v  Creating Unordered list:
Both ordered and unordered lists required start and end as well as the use of special element to indicate where each list item begins, i.e. the <LI>tag.
Unordered lists can be preceded by one of the several bullet style like a closed circle an open circle or square. The tags for unordered lists are <UL> & </UL>.

For example:<TITLE>Shopping List<TITLE>
<BODY>
<UL>
<LI>Eggs
<LI>Milk
<LI>Apples
</UL>
The list will be displayed as:
·         Eggs
·         Milk
·         Apples
Observe that the list-item element uses <LI> tag and actual content of list.
Both <UL> and <LI> have same set of attributes:
TYPE=”CIRCLE”
TYPE=”DISC”
TYPE=”SQUARE”
The CIRCLE attribute values are used for a hollow bullets, the DISC creates a solid bullet and SQUARE value renders a solid block. The default appearance for a list is with disc.
The </UL> tag is always require at the end of unordered lists. You can also use </LI>end of each list item.
For example,
<UL TYPE=”SQUARE”>
<LI>Hammer
<LI>Screwdriver
<LI TYPE=”CIRCLE”>screws
</UL>
It will displayed as:
  • Hammer
  • Screwdriver
o   Screws

One important aspect of lists is that you can nest one list inside another to create a sub list. The default operating of sub list .The default operating of sub list will vary from main list.
For example:
<UL>
<LI>Body
<UL>
<LI>Head
<LI>Hand
<UL>
<LI>Finger
<LI>Thumb
</UL>
</UL>

The display will be:
  • Body
o   Head
o   Head
§  Finger
§  Thumb
Creating ordered Lists:
Ordered lists can be preceded by Arabic numerals, upper case or lower case Roman numerals, or uppercase or lowercase alphanumeric characters. The tags for an ordered list are <OL>and </OL>.
For example:
<OL>
<LI>Milk
<LI>Bread
<LI>Cheese
</OL>
The list will appear as:
1.    Milk
2.    Bread
3.    Cheese
Here are the attributes that you can use with ordered lists:
TYPE=”I” (Arabic numbers)
TYPE=”a”(lowercase alphanumeric)
TYPE=”A” (Uppercase alphanumeric)
TYPE=”i” (Lower case Roman numbers)
TYPE=”I” (Lower case Roman numbers)
START=”X”
The START attribute allows you to establish the beginning of list’s number sequence.
For example:
<OL START =”5”> would start your ordered list’s numbering with the number five. when we are using ordered lists, the <LI> tag can use the VALUE attribute to make a particular list item have a certain number.
For example:
<LI VALUE = “10”>chocolate
It will be displayed as: 10.chocklate
You can make paragraphs, list of links and list of images also.

DEFINITION LIST:
The definition list element uses <DL> start tag and </DL> end tag to create a definition list. This list is rendered without bullets.<DT> tag is used for definition terms i.e.name or title of the item you are defining. The <DD>tag is used for the definition themselves.
For example:
<DL>
<DT>Term A
<DD>Definition of term A
<DT>Term B
<DD>Definition of term B
</DL>

This will be displayed as:
Term A
            Definition of term A
Term B
            Definition of term B

Excersize On HTML program


EXCERSIZE1:
Create a webpage to display your personal information such as Name, Address, Phone number and date of birth.
HTML code:
<HTML>
<HEAD>
<TITLE> EXCERSIZE1</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=”CENTER”>PERSONAL INFORMATION</H1>
<HR>
My name is<B>R.A.SHINDE</B><BR>
My Address  I,<BR>Teachers colony<BR>Bagal Plot
<BR>Osmanabad<BR>Pin code:413501<BR>
<I>Telephone:</I>242424
<HR>
<CENTER>
Contact to<A HREF=”rrohini.shinde@gmail.com”></A>
</CENTER>
</BODY>
</HTML>

EXCERSIZE2:
Create a webpage of college consisting information such as Name, Address, Phone & course offered by the college.
HTML code:
<HTML>
<HEAD>
<TITLE> EXCERSIZE2</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=”CENTER”>K.T.PATIL,COLLEGE</H1>
<H2 ALIGN=”CENTER”>Address: Barshi Road,<BR>
<BR>Osmanabad<BR>Pin code:413501<BR>
<I>Telephone:</I>242424<H2>
<HR>
<H3 ALIGN=”CENTER”>COURSES: M.B.A,B.E.,M.C.A,M.C.M</H3>
</BODY>
</HTML>

EXCERSIZE 3:
Write a HTML code to Create a webpage for birthday invitation.Make use of color attributes.
<HTML>
<HEAD>
<TITLE> BIRTH DAY</TITLE>
</HEAD>
<BODY BGCOLOR=”YELLOW” TEXT=”BLUE” LINK=”MAROON”
ALIGNK=”GREEN” VLINK=”BROWN”>
<CENTER>
<H1>THE BIRTHDAY EVENT</H1>
<FONT SIZE=”+5” FACE=”MONOTYPE CORSIVA”>
 <B><I> YOU ARE INVITED</I></B>
</FONT>
</CENTER>
<P>Please come to my
 <FONT COLOR=””PURPLE”><B>Celebration of the Birthday</B></FONT>
To be held on 5th nov.at 7:00 pm.Anyone Reading this page is invited,send me mail using the link below for more details.
</P>
<center>
<FONT COLOR=”BLUE” SIZE=4>
<B>Look Out !!!</B>
PLEASE BRING A SWEET GIFT 4 ME!!</FONT>
<HR>
<SMALL>
<A HREF=”MAIL TO:rrohini.shinde@gmail.com”>
Ras</A>
</SMALL>
</BODY>
</HTML>