Scribd
Upload
161 views

Main HTML Project

The document discusses creating a registration form on an HTML page using various form elements like text fields, textarea, radio buttons, dropdown etc. It provides the code to: 1. Create a registration form with fields for name, email, address, college etc and a submit button. 2. Use form elements like text fields, textarea, select dropdown to accept user input. 3. Structure the form using table for proper layout.

Uploaded by

Puneet Gupta
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
161 views

Main HTML Project

The document discusses creating a registration form on an HTML page using various form elements like text fields, textarea, radio buttons, dropdown etc. It provides the code to: 1. Create a registration form with fields for name, email, address, college etc and a submit button. 2. Use form elements like text fields, textarea, select dropdown to accept user input. 3. Structure the form using table for proper layout.

Uploaded by

Puneet Gupta
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 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 HTML 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>

<Title>CPJ College</title>

</head>
Page | 2
WEB DESIGNING
<Body>

Hello Friends

</body>

</html>

EXERCISE-1
WAP to design <HTML> web page?

<Html>

Page | 3
WEB DESIGNING
<Head>

<Title> CPJ College </title>

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

(b.) <Pre>
Page | 4
WEB DESIGNING
(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

<Title> Cpj College </title>


Page | 5
WEB DESIGNING
</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>

<Title> Cpj College</title>

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

<Title>CPJ College</title>

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

Page | 7
WEB DESIGNING
</head>

<Body>

<h1> This is a header</h1>

</body>

</html>

Sol (e.) <Font>

<Html>

<Head>

<Title>CPJ College</title>

</head>

<Body>

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


Page | 8
WEB DESIGNING
</body>

</html>

EXERCISE-3

WAP to design the webpage using list?

(a.) Ordered List

(b) Unordered List

Sol (a):

<Html>
Page | 9
WEB DESIGNING
<Head>

<Title> CPJ College </title>

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

Page | 10
WEB DESIGNING
<ul>

<li>CPJ College</li>

<li>IIMT</li>

<li>JSS</li>

</ul>

</body>

</html>

EXERCISE-4
WAP to add a graphics image on the Web Page?

Sol:

<Html>

<Head>

<Title> CPJ College </title>

</head>

<Body>

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


Page | 11
WEB DESIGNING
</body>

</html>

EXERCISE-5

WAP to design the Web Page using <Table>?

Cell1 Cell2
Cell3 Cell4
Sol:

<Html>

<Head>

<Title> CPJ College </title>

</head>

Page | 12
WEB DESIGNING
<body style="background-color: lightgray ;">

<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
<Title> Cpj College </title>

</head>

<Body>

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

</body>

</html>

EXERCISE-7
WAP to create password field on an HTML page?

Sol:

<Html>

<Head>

<Title> Cpj College </title>


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>

<Title> Cpj College </title>

Page | 16
WEB DESIGNING
</head>

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

<Title> Cpj College </title>

Page | 17
WEB DESIGNING
</head>

<Body>

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>

<Title> Cpj College </title>

</head>

Page | 18
WEB DESIGNING
<Body>

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

</body>

</html>

EXERCISE-11

WAP to create a simple drop-down


button on an HTML page?

Sol:

<Html>

<Head>

<Title> Cpj College </title>

</head>
Page | 19
WEB DESIGNING
<Body>

<select name="college">

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

<Title> Cpj College</title>

</head>

<Body>

Address <text area>


Page | 20
WEB DESIGNING
< Input Type=”Text Area” name="address" rows="5" cols="10">

</text area>

</body>

</html>

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

Sol:

<Html>

<Head>

<Title> Cpj College</title>

</head>

<Body>

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

</body>

Page | 21
WEB DESIGNING
</html>

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

Page | 22
WEB DESIGNING
<table border="1">

<tr>

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

Page | 23
WEB DESIGNING
<td><select name="college">

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

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

<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
<Title>CPJ College</title>

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

<Title> CPJ College </title>


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>

<Title> CPJ College </title>

Page | 28
WEB DESIGNING
<Script>

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>
Page | 29
WEB DESIGNING
Function log()

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>

Page | 30
WEB DESIGNING
<tr>

<td align="center" colspan=2>

<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>
Page | 31
WEB DESIGNING
<Body>

<Script>

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

</script>

</body>

</html>

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

<Html>

<Head>

<Title> Cpj College </Title>

</Head>

<Body>

<Script>

Page | 32
WEB DESIGNING
document. Write (Math.ceil (15.45))

</script>

</body>

</html>

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

<Html>

<Head>

<Title> Cpj College </Title>

</Head>

<Body>

<Script>

Page | 33
WEB DESIGNING
Document.write(Math.pow(2,2))

</script>

</body>

</html>

EXERCISE-21

WAP a program to print the current date using JavaScript?

Sol:

<Html>

<Head>

<Title>CPJ College</title>

</head>

<Body>

Page | 34
WEB DESIGNING
<Script>

var x=new Date();

document.write(x);

</script>

</body>

</html>

Page | 35

You might also like