main html project

8/8/2019 Main HTML Project

http://slidepdf.com/reader/full/main-html-project 1/35

WEB DESIGNING

TABLE OF CONTENTS

S.NO. TOPICS PAGE NO. REMARKS

1 Create HTML Web Page 2

2 Create Formatted Text 3-7

3 Ordered List and Unordered List 7-9

4 Insert Graphics Image 10

5 Insert Table 11-13

6 Simple Text Field 14

7 Create Password Field 15

8 Create Radio Button 16

9 Create Check Button 17

10 Create Submit Button 18

11 Create Drop-Down Button 19

12 Create Text area 20

13 Create Button 21

14 Create Registration Form 22-25

15 Create Variable using JavaScript 26

16 Create array of Size 10 27

17 Open a window 28

18 Close a window 29

19 Validate the user login 30-32

20 Create Math Object 33-34

21 Print the current date 35

BASIC INFORMATION ABOUT HTML

Page | 1



WEB DESIGNING

HTML: Hyper Text Markup LANGUAGE: - The Language used to develop

web pages is called Hyper Text Markup Language (HTML). HTML is the

language interpreted by a Browser. Web Pages are also called HTML

documents. HTML is a set a special codes that can be embedded in text to

add formatting and linking information. HTML is specified as TAGS in an HTM

document (i.e. Web page)

HEAD: Information placed in this section is essential to the inner workings of

the document. It has nothing to do with contents of the document. All

information placed within <HEAD></HEAD> tags is not displayed in the

browser, with the exception of information contained within the

<TITLE></TITLE> tags. The HTML tags used to indicate the start and end of

the head section are:

<HEAD>

<TITLE>---</TITLE>

</HEAD>

TITLE: A Web page could have a title that describes what the page is about

without being too wordy. This can be done by using the TITLE tag. Text

included between the <TITLE>---</TITLE> tag shows up in the title bar of the

browser window.

<Html>

<Head>

<Title> CPJ College </title>

</head>

</html>

BODY: The tag is used to indicate the start and end of the main body of textual information are:

<Html>

<Head>

Page | 2



WEB DESIGNING

<Title>CPJ College</title>

</head>

<Body>

Hello Friends

</body>

</html>

EXERCISE-1

WAP to design <HTML> web page?Page | 3



WEB DESIGNING

<Html>

<Head>


</head>

<Body>

<h4>Web Page</h4>

<table border="4" width="50 %">

<tr align="center">

<td colspan=3>Header</td>

</tr>

<tr align="center">

<td>Left</td>

<td>Body</td>

<td>Right</td>

</tr>

<tr align="center">

<td colspan=3>Footer</td>

</tr>

</table>

</body></html>

EXERCISE-2

WAP to design the formatted the text on the Web page?

(a.) <P> Tag

Page | 4



WEB DESIGNING

(b.) <Pre>

(c.) <em>

(d.) <Base Font>

(e.) <Font>

Sol (a): <html>

<Head>

<Title> Cpj College</title>

</head>

<Body>

<p>All the text is contained by the

Which causes the browser</p><p> to display

Between exactly as it finds it. </p>

</body>

</html>

Sol (b):<Pre>

<Html>

<Head

Page | 5



WEB DESIGNING

<Title> Cpj College </title>

</head>

<Body>

<Pre>

All the text is contained by the

Which causes the browser to display

Between exactly as it finds it.

It also uses font for presentation.

</pre>

</body>

</html>

Sol (c) :< Em>

<Html>

<Head>


</head>

<Body>Page | 6



WEB DESIGNING

<h4>Emphasized Tag</h4>

<Em>

All the text is contained by the

Which causes the browser.

</em>

</body>

</html>

Sol (d.) <Base Font>

<Html>

<Head>


<base font color="red" size="5" >

</head>

Page | 7



WEB DESIGNING

<Body>

<h1> This is a header</h1>

</body>

</html>

Sol (e.) <Font>

<Html>

<Head>


</head>

<Body>

<font size="12" color="red">Cpl college</font>

</body>

Page | 8



WEB DESIGNING

</html>

EXERCISE-3

WAP to design the webpage using list?

(a.) Ordered List

(b) Unordered List

Sol (a):

<Html>

<Head>

Page | 9



WEB DESIGNING


</head>

<Body>

<b>An Ordered List</b><br>

<h4>List of Colleges</h4>

<ol>

<li>CPJ College</li>

<li>IIMT</li>

<li>JSS</li></ol>

</body>

</html>

(b)

<Html>

<Head>

<Title> CPJ College</title>

</head>

<Body>

<b>An Unordered List</b><br>

<h4>List of Colleges</h4>

<ul>

<li>CPJ College</li>

Page | 10



WEB DESIGNING

<li>IIMT</li>

<li>JSS</li>

</ul>

</body>

</html>

EXERCISE-4

WAP to add a graphics image on the Web Page?

Sol:<Html>

<Head>


</head>

<Body>

<image src="/D: /VIVEK/HQ wallpapers/hin1v.jpg" width="180

height="180">

</body>

</html>

Page | 11



WEB DESIGNING

EXERCISE-5

WAP to design the Web Page using <Table>?

Sol:

<Html>

<Head>


</head>

<body style="background-color: lightgray ;">

Page | 12

Cell1 Cell2Cell3 Cell4



WEB DESIGNING

<b>Design a table</b></br></br>

<table border="5" style="text-align:center" width="50%">

<tr>

<td>cell1</td>

<td>cell2</td>

</tr>

<tr>

<td>cell3</td>

<td>cell4</td>

</tr>

</table>

</body>

</html>

Page | 13



WEB DESIGNING

EXERCISE-6

WAP to create simple text field on an HTML page?

Sol:

<Html>

<Head>

Page | 14



WEB DESIGNING


</head>

<Body>

Username <input type ="text" name="user">

</body>

</html>

EXERCISE-7

WAP to create password field on an HTML page?

Sol:

<Html>

<Head>


Page | 15



WEB DESIGNING

</head>

<Body>

Password<input type="password" name="pass">

</body>

</html>

EXERCISE-8

WAP to create radio button on an HTML page?

Sol:

<Html>

<Head>


</head>

Page | 16



WEB DESIGNING

<Body>

Male <input type ="radio" name="radio">

Female <input type ="radio" name="radio">

</body>

</html>

EXERCISE-9

WAP to create check button on an HTML page?

Sol:

<Html>

<Head>


</head>

<Body>

Page | 17



WEB DESIGNING

Friends<input type="checkbox" name="a">

Best Friends <input type="checkbox" name="b">

</body>

</html>

EXERCISE-10

WAP to create submit button on an HTML page?

Sol:

<Html>

<Head>


</head>

<Body>

<input type="submit" name="submit" value="login">

</body>Page | 18



WEB DESIGNING

</html>

EXERCISE-11

WAP to create a simple drop-

down button on an HTMLpage?

Sol:

<Html>

<Head>


</head>

<Body>

<select name="college">

Page | 19



WEB DESIGNING

<option value="1">CPJCHS</option>

<option value="2">JSS</option>

<option value="3">IITM</option>

</select>

</body>

</html>

EXERCISE-12

WAP to create a text area using JavaScript on an HTML page?

Sol:

<Html>

<Head>


</head>

<Body>

Address <text area>

< Input Type=”Text Area” name="address" rows="5" cols="10">

</text area>

Page | 20



WEB DESIGNING

</body>

</html>

Q. 13 WAP to create a text area on an HTML page?

Sol:

<Html>

<Head>


</head>

<Body>

<input type="button" name="submit" value="Cancel">

</body>

</html>

Page | 21



WEB DESIGNING

EXERCISE-14

WAP to create a registration form on an HTML page?

Sol:

<Html>

<Head>

<Title>Registration</title>

</head>

<Body>

<h1>Submit Your Form</h1>

<form name="form1" method="get" action="abc.html">

<table border="1">

<tr>

Page | 22



WEB DESIGNING

<td>First name</td>

<td><input type="text" name="F.name"></td>

</tr>

<tr>

<td>Last name</td>

<td><input type="text" name="L.name"></td>

</tr>

<tr>

<td>Email</td>

<td><input type="text" name="E.mail"></td>

</tr>

<tr>

<td>Address</td>

<td>

<text area rows=5 cols=10 name="address">

</textarea>

</td>

</tr>

<tr>

<td>college</td>

<td><select name="college">

<option value="1">CPJCHS</option>

<option value="2">JSS</option>

Page | 23



WEB DESIGNING

<option value="3">IITM</option>

</select>

</td>

</tr>

<tr>

<td colspan=2 align="center">

<input type="submit" name="submit" value="login">

</td>

</tr>

</table>

</body>

</html>

Page | 24



WEB DESIGNING

Q.15 WAP to create a variable using JavaScript on an HTML page?

Sol:

<Html>

<Head>

Page | 25



WEB DESIGNING


</head>

<Body>

<h1>Variable is :</h1>

<Script>

var x=2;

document.write(x);

</script>

</body>

</html>

EXERCISE-16

WAP to create an array of size 10 on an HTML page?

<html>

<head>

<title>CPJ College</title>

Page | 26



WEB DESIGNING

</head>

<body>

<script>

var ar=new Array(5);

ar[0]=1;

ar[1]=2;

ar[2]=3;

ar[3]=4;

ar[4]=5;

for(var i=0; i<5; i++)

{

document.write(ar[i]);

document.write("<br>");

}

</script>

</body>

</html>

EXERCISE-17

WAP to open a window using JavaScript on an HTML page?

Sol:

<Html>

<Head>


Page | 27



WEB DESIGNING

<Script>

Function win open()

{

window.open("abc.html")

}

</script>

</head>

<body>

<input type="button" name="window" value="open" onclick="winopen();">

</body>

</html>

EXERCISE-18

WAP to close a window using JavaScript on an HTML page?

Sol:

<Html>

<Head>


<Script>

Page | 28



WEB DESIGNING

function winclose()

{

window.close("abc.html")

}

</script>

</head>

<Body>

<input type="button" name="window" value="close" onclick="winclose();">

</body>

</html>

EXERCISE-19

WAP to validate the user login using JavaScript on an HTML page?

Sol:

<Html>

<Head>

<Title>Login</title>

<Script>

Function log()

Page | 29



WEB DESIGNING

{

Alert ("thanku for login");

}

</script>

</head>

<Body>

<h1>Login your Id</h1>

<form name="form1" method="get" action="abc.html">

<table border="1">

<tr>

<td>Name</td>

<td>

<input type="text" name="user">

</td>

</tr>

<tr>

<td>Password</td>

<td>

<input type="password" name="pass">

</td>

</tr>

<tr>

<td align="center" colspan=2>

Page | 30



WEB DESIGNING

<input type="submit" name="sub" value="login” onclick=”log();”>

</td>

</tr>

</table>

</body>

</html>

EXERCISE-20

WAP to create a web page using Math object in JavaScript?

(a.) abs () (b.) Ceil () (c.) pow ()

Sol: (a) abs () – Calculates the absolute value of the number

<Html>

<Head>

<Title> Cpj College </Title>

</Head>

<Body>

Page | 31



WEB DESIGNING

<Script>

{

document.write (Math.abs(-15))

}

</script>

</body>

</html>

(b.) ceil () – Returns the next integer greater than or equal to a number

<Html>

<Head>


</Head>

<Body>

<Script>

{

document. Write (Math.ceil (15.45))

}

</script>

Page | 32



WEB DESIGNING

</body>

</html>

(c.) pow () – Calculates the value of one number to the power of a second

number – takes two arguments.

<Html>

<Head>


</Head>

<Body>

<Script>

{

Document.write(Math.pow(2,2))

}

</script>

</body>

Page | 33



WEB DESIGNING

</html>

EXERCISE-21

WAP a program to print the current date using JavaScript?

Sol:

<Html>

<Head>


</head>

<Body>

<Script>

var x=new Date();

document.write(x);

</script>

</body>

Page | 34



WEB DESIGNING

</html>

main html project

Documents