WEB DESIGNING
TABLE OF CONTENTS
[Link]. 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/[Link]" 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="[Link]">
Page | 22
WEB DESIGNING
<table border="1">
<tr>
<td>First name</td>
<td><input type="text" name="[Link]"></td>
</tr>
<tr>
<td>Last name</td>
<td><input type="text" name="[Link]"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="[Link]"></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;
[Link](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++)
[Link](ar[i]);
[Link]("<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()
[Link]("[Link]")
</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()
[Link]("[Link]")
</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="[Link]">
<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>
[Link] ([Link](-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 ([Link] (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
[Link]([Link](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();
[Link](x);
</script>
</body>
</html>
Page | 35