Web Tech Practicals

7/31/2019 Web Tech Practicals

1/24

Practical 1 :-

Practical 1

Block Level And Text Level Tags

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a Sample PARAGRAPH
This is a SUBSCRIPTThis is SUPERSCRIPT
This is anchor
tag.

"This is a Blockquote"


2/24

Font BoldFont

ItalicsFont Underline

This is a strong tag which is same as bold

This is a strike through tag

Sample Address Tag :

B-302, Kohinoor Park,

Manvelpada RoadVirar (E)

Output :-


3/24

Practical 2 :-

BG color,Text color , Horizantal Rules and SpecialCharacter

Background color,Text color , Horizantal Rules andSpecial Character

Special Characters

CopyRight

TradeMark

Register

Output :-


4/24

Practical 3 :-

Practical 3

Ordered List, UnOrdered List, Definite List and NestedList

Ordered List

Programming LanguagesCC++Java.Net

UnOrdered List

Programming LanguagesC

C++Java.Net

Definite List

IE

developed by Microsoft

Mozila

developed by Mozila


5/24


6/24

Practical 4 :-

Web Page

a. Local Page In Same Folder

b. Page In Different Folderc. Page On Web

d. Specific Location Within Document


7/24

Output :-


8/24

Practical 5 :-

Images With Different Alignment And Wrapped Text :-

Image width = 200 X 200 px

ASP.NET AJAXASP.NET AJAX is a free framework for building a new

generation of richer, more interactive,highly personalized cross-browser web applications.

This new web development technologyfrom Microsoft integrates cross-browser client script

libraries with the ASP.NET2.0 server-based development framework. In addition,

ASP.NET AJAX offers you thesame type of development platform for client-based

web pages that ASP.NET offers

for server-based pages. And because ASP.NET AJAX isan extension of ASP.NET, it

is fully integrated with server-based services.ASP.NET AJAX makes it possible to

easily take advantage of AJAX techniques on the weband enables you to create ASP.NET

pages with a rich, responsive UI and servercommunication. However, AJAX isn't

just for ASP.NET. You can take advantage of the richclient framework to easily

build client-centric web applications that integratewith any backend data provider

and run on most modern browsers.

Common Language Infrastructure (CLI)

The purpose of the Common Language Infrastructure

(CLI) is to provide a language-neutral


9/24

platform for application development andexecution, including functions for Exception

handling, Garbage Collection, security, andinteroperability. By implementing the

core aspects of the .NET Framework within thescope of the CL, this functionality

will not be tied to a single language but will beavailable across the many languagessupported by the framework. Microsoft's

implementation of the CLI is called theCommon Language Runtime, or CLR. The CIL code is

housed in CLI assemblies. As mandatedby the specification, assemblies are stored in

the Portable Executable (PE) format,common on the Windows platform for all DLL and

EXE files. The assembly consistsof one or more files, one of which must contain

the manifest, which has the metadatafor the assembly. The complete name of an

assembly (not to be confused with thefilename on disk) contains its simple text name,version number, culture, and public

key token. Assemblies are considered equivalentif they share the same complete

name, excluding the revision of the versionnumber.

Image width = 300 X 300 px


10/24

Output :-


11/24

Practical 6 :-

Practical 6

Table Formating Using Basic Table Tags & DifferentAttributes

Cricketer

Rankings

Team

Strike Rate

Sachin Tendulkar

1

MI

120

Chris Gayle

2

RC

180

Shane Watson


12/24

3

RR

150

MS Dhoni

11

CSK

140

Branden McCullum

15

KKR

135

Output :-


13/24

Practical 7 :-

Framesets

Output :-


14/24

Practical 8 :-

Example of Styles and Selectors(internal)

h3{

font-family: MaturaMTScriptCapitals;font-size: 20px;font-style: italic;font-weight: bold;text-align: right;color: Aqua;

}h4, h5{

font-family: MaturaMTScriptCapitals;font-size: 20px;font-style: italic;font-weight: bold;text-align: left;color: red;

}.abc{

font-family: MaturaMTScriptCapitals;

font-size: 20px;font-style: normal;font-weight: bold;text-align: right;color: Black;

}#xyz{

font-family: MaturaMTScriptCapitals;font-size: 20px;font-style: italic;font-weight: bold;text-align: left;

text-decoration: underline;color: Blue;

}*{

font-family: ArialBlack;font-size: 30px;color: White;

}


15/24

This is an example of styles and selectors(Internal)

Example on style sheets

Example on embedded styles

Example on grouping styles

Example on Selectors!!!

this is an example of a class selector

This is an example of Id selector

This is an example of universal selector

Output :-


16/24

Practical 9 :-

Practical 9

function validate(){

var username = document.getElementById("username").value;var password = document.getElementById("password").value;var confirmPassword =

document.getElementById("ConfirmPassword").value;var email = document.getElementById("Email").value;

if (username == ""){

alert('Username Required !');

document.getElementById("username").focus();returnfalse;

}

for (i = 0; i < username.length; i++){

if (username.charCodeAt(i) > 64 && username.charCodeAt(i)< 91 || username.charCodeAt(i) > 96 && username.charCodeAt(i) < 123|| username.charCodeAt(i) == 32)

{}else{

alert("Please Enter Valid Username !");document.getElementById("username").value = "";document.getElementById("username").value.focus();returnfalse;

}}

if (password == ""){

alert('Password Required !');document.getElementById("password").focus();returnfalse;

}

if (confirmPassword == ""){

alert('Confirm Password Required !');document.getElementById("ConfirmPassword").focus();returnfalse;

}if (password != confirmPassword){

alert('Password & Confirm Password Mismatch !');document.getElementById("password").value = "";document.getElementById("ConfirmPassword").value = "";document.getElementById("password").focus();returnfalse;

}if (email == ""){


17/24

alert('Email ID Required !');document.getElementById("Email").focus();returnfalse;

}}

Webpage Including Control Structures Using

Javascript

Registration Details

Username

:

Password

:

Confirm Password

:


18/24

Email Id

:

Gender

:

MaleFemale

Hobbies

:

cricketfootbalother


19/24

Output :-


20/24

Practical 10 :-

Practical 10

function validate(){

var productId = document.getElementById("productId").value;var productName =

document.getElementById("productName").value;var productQty = document.getElementById("productQty").value;var billingAddress =

document.getElementById("txtBillingAdd").value;

if (productId == "")

{alert('Product Id Required !');document.getElementById("productId").focus();returnfalse;

}

if (productName == "--(Select)--"){

alert('Product Name Required !');document.getElementById("productName").focus();returnfalse;

}

if (productQty == "--(Select)--"){

alert('Quantity Required');document.getElementById("productQty").focus();returnfalse;

}

if (billingAddress == ""){

alert('Billing Address Required !');document.getElementById("txtBillingAdd").focus();returnfalse;

}

}

function calculatePrice(){

var productQty = document.getElementById("productQty").value;var cost = document.getElementById("productName").value;

if (productQty == "--(Select)--"){

alert('Quantity Required!');document.getElementById("productPrice").value = "";document.getElementById("productQty").focus();returnfalse;

}elseif (isNaN(productQty)){


21/24

alert('Invalid Quantity!');document.getElementById("productQty").value = "";document.getElementById("productQty").focus();returnfalse;

}else

{ var qty = parseInt(productQty);var price = qty * cost;document.getElementById("productPrice").value = price;

}}

function ResetQuantity(){

document.getElementById("productQty").value = "--(Select)--";document.getElementById("productPrice").value = "";

}

function CopyAddress(){document.getElementById("txtShippingAdd").value =

document.getElementById("txtBillingAdd").value;}

Event Handling

Product Details

*Product Id

:


22/24

*Product Name

:

--(Select)--T-ShirtMuflerJEANSSareeTops

*Quantity

:

--(Select)--12345678910

Price

:

*Note: Price will beautomatically calculated

*Billing Address


23/24

:

Shipping Address

:

Pay Type

:

Credit Card

Cheque

Cash


24/24

Output :-

Documents

Web Tech Practicals