Web Designing and Publishing Practical Questions

Html program to display a table with 5 rows and 4
columns. Provide appropriate heading to the form
Write a HTML program to display a table with 5 rows and 4 columns. Provide
appropriate heading to the form.
Solution
<table border="1" width="600px" align="center">

<tr>
<th>Sr. No</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Output
HTML Page to display the following table
Create an HTML Page to display the following table:
Solution
<table border="a" width="600px" cellpadding="0">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Point</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
HTML page to demonstrate a Clickable image
Create an HTML page to demonstrate a Clickable image.
Solution
Option 1:
<a href="http://google.com"><img src="logo.png"/></

a>
Option 2:
<button type="submit"><img src=“logo.png"/></button>

Design a html form using eldset and legend
<html>
<head>
<title>APPLICATION FORM </title>
</head>
<body leftmargin="200px">
<center><h3>APPLICATION FORM </h3></center>
<form>
<fieldset>
<legend>Personal Details</legend>
<table width="100%" cellpadding="10px">
<tr>
fi
<td>Applicant's full name </td>
<td>
<select >
<option>--Select --</
option>
<option>Mr.</option>
<option>Ms.</option>
<option>Others</option>
</select>
<input type="text"
size="20"/>
</td>
<td>Care Of </td>
<td><label>Parents</label><input
type="radio" name="care" checked/><label>Guardian </
label><input type="radio" name="care"/></td>
</tr>
<tr>
<td>Father's Name </td>
<td>
<select disabled >
</select>
<input type="text"
size="20"/>
</td>
<td>Mother's Name </td>
<td>
<select disabled >
<option>Mrs.</option>
</select>
<input type="text"
size="20"/>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<label>Male</label><input
type="radio" name="Gender"/>
<label>Female </label><input
<label>Others </label><input
</td>
<td>Date of Birth</td>
<td>
<input type="date"/>
</td>
</tr>
<tr>
<td>Marital Status</td>
<td>
<select>
<option>--Select--</
option>
<option>Single</option>
<option>Married</option>
<option>Divorced</
option>
<option>Widowed</option>
</select>
</td>
<td>Category </td>
<td>
<select>
option>
<option>General</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
</select>
</td>
</tr>
<tr>
<td>Handicapped </td>
<td><label>No</label><input
type="radio" name="Handicapped" checked/
><label>Yes</label><input type="radio"
name="Handicapped"/></td>
<td>Ex-Serviceman </td>
type="radio" name="Serviceman" checked/><label>Yes</
label><input type="radio" name="Serviceman"/></td>
</tr>
<tr>
<td>EWS </td>
type="radio" name="EWS" checked/><label>Yes</
label><input type="radio" name="EWS"/></td>
<td>Religion </td>
<td>
<select>
option>
<option>Hindu</option>
<option>Muslim</option>
<option>Jain</option>
<option>Christianity</
option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<tr>
<td>Mobile Number</td>
<td><input type="tel"/></td>
<td>Email ID</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>Address Line 1</td>

<td><input type="text"/></td>

</tr>
<tr>
<td>City</td>
<td>State</td>
<td>
<select>
option>
<option value="Andhra
Pradesh">Andhra Pradesh</option>
<option value="Andaman
and Nicobar Islands">Andaman and Nicobar Islands</
option>
<option value="Arunachal
Pradesh">Arunachal Pradesh</option>
<option
value="Assam">Assam</option>
<option
value="Bihar">Bihar</option>
<option
value="Chandigarh">Chandigarh</option>
<option
value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and
Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and
Diu">Daman and Diu</option>
<option
value="Delhi">Delhi</option>
<option
value="Lakshadweep">Lakshadweep</option>
<option
value="Puducherry">Puducherry</option>
<option
value="Goa">Goa</option>
<option
value="Gujarat">Gujarat</option>
<option
value="Haryana">Haryana</option>
<option value="Himachal
Pradesh">Himachal Pradesh</option>
<option value="Jammu and
Kashmir">Jammu and Kashmir</option>
<option
value="Jharkhand">Jharkhand</option>
<option
value="Karnataka">Karnataka</option>
<option
value="Kerala">Kerala</option>
<option value="Madhya
Pradesh">Madhya Pradesh</option>
<option
value="Maharashtra">Maharashtra</option>
<option
value="Manipur">Manipur</option>
<option
value="Meghalaya">Meghalaya</option>
<option
value="Mizoram">Mizoram</option>
<option
value="Nagaland">Nagaland</option>
<option
value="Odisha">Odisha</option>
<option
value="Punjab">Punjab</option>
<option
value="Rajasthan">Rajasthan</option>
<option
value="Sikkim">Sikkim</option>
<option value="Tamil
Nadu">Tamil Nadu</option>
<option
value="Telangana">Telangana</option>
<option
value="Tripura">Tripura</option>
<option value="Uttar
Pradesh">Uttar Pradesh</option>
<option
value="Uttarakhand">Uttarakhand</option>
<option value="West
Bengal">West Bengal</option>
</select>
</td>
</tr>
<tr>
<td>Pin Code</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Qualification Details</legend>
<tr>
<th>Sr No.</th>
<th>Qualification</th>
<th>Board/University</th>
<th>Passing Year</th>
<th>Max Marks</th>
<th>Marks Obtain</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>
<select>
option>
<option>10th</option>
<option>Graduate</
option>
<option>Post Graduate</
option>
</select>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="number"
min="1990" max="2022"/>
</td>
<td>
<input type="number" min="0"
max="10000"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="100"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select>
option>
<option>Graduate</
option>
option>
</select>
</td>
<td>
</td>
<td>
min="1990" max="2022"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="100"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select>
option>
<option>Graduate</
option>
option>
</select>
</td>
<td>
</td>
<td>
min="1990" max="2022"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="100"/>
</td>
</tr>
<tr>
<td>4</td>
<td>
<select>
option>
<option>Graduate</
option>
option>
</select>
</td>
<td>
</td>
<td>
min="1990" max="2022"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="10000"/>
</td>
<td>
max="100"/>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Language Knowledge</legend>
<table width="100%">
<tr>
<td>Language</td>
<td>Reading</td>
<td>Writing</td>
<td>Spoken</td>
</tr>
<tr>
<td>Hindi</td>
<td><input type="checkbox"/></
td>
td>
td>
</tr>
<tr>
<td>English</td>
td>
td>
td>
</tr>
<tr>
<td>Urdu</td>
td>
td>
td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Identification Details</legend>
<table>
<tr>
<td>Aadhar Card Number</td>

<td><input type="text"
maxlength="12"/></td>
<td>PAN Card Number</td>
</tr>
<tr>
<td>Upload Photo</td>
<td><input type="file"/></td>
<td>Upload Signature</td>
<td><input type="file"/></td>
</tr>
</table>
</fieldset>
<br/>
<center>
<input type="submit" value="Submit"/>
<input type="reset" value="Back"/>
</center>
</form>
</body>
</html>
HTML page to demonstrate target attribute in Frames
Create an HTML page to demonstrate target attribute in Frames.
Solution
index.html
<frameset rows="20%,80%">
<frame src="menu.html"></frame>
<frame src="home.html" name="main"></frame>
</frameset>
menu.html
<ul>
<li><a href="home.html" target="main">Home</a></
li>
<li><a href="about.html" target="main">About
Us</a></li>
<li><a href="course.html"
target="main">Courses</a></li>
</ul>
HTML code to display country name in red color
Write HTML code to display country name in red color
Solution
<font color=“red">INDIA</font>
Create html web page for Gateway of India
Create an html page with following speci cations : Title should be about
Gateway of India. Place City name at the top of the page in large text and in
blue color. Add pictures taken from different angles/views, add label and
caption with each picture. Give Alternate Text on each image. Use a different
color, style and typeface in the text. One of the landmark, Mumbai should be
blinking. Add scrolling text with a message of your choice.
fi
HTML program segment that contains hypertext links
from one document to another
Write an HTML program segment that contains hypertext links from one
document to another?
Solution
<a href="about.html">About Us</a>

Create a hyperlink in html which when clicked links to
www.google.com in a new window
Create a hyperlink in html which when clicked links to www.google.com in a

new window.
Solution
<a href="http://www.google.com" target="_blank">Open

Google Website</a>
Html code to design multiple list
<!doctype html>
<html>
<head>
<title>HTML Assignment 4</title>
</head>
<body topmargin="50px" leftmargin="200px">
<center>
<u>
<h4>List of Courses</h4>
</u>
</center>
<h4>Certificate Courses</h4>
<ul type="square">
<li>CCA</li>
<li>DTP</li>
<li>TALLY</li>
</ul>
<h4>NIELIT Courses</h4>
<ol type="I">
<li>CCC</li>
<li>O Level</li>
<li>A Level</li>
</ol>
<h4>Diploma Courses</h4>
<ol type="A">
<li>DCA</li>
<li>ADCA</li>
<li>DFA</li>
<li>DDNT</li>
</ol>
<h4>Programming Courses</h4>
<ol start="11">
<li>PYTHON</li>
<li>Java</li>
<li>C Programming</li>
<li>C++</li>
<li>Data Structure using C</li>
</ol>
<h4>Web Designing Courses</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li value="11">Java Script</li>
<li>JQuery</li>
<li value="21">MySQL</li>
<li>PHP</li>
</ol>
</body>
</html>
HTML code for creating the following output
Write an HTML code for creating the following output
Solution
<table>
<tr>
<th><u>Online Courses</u></th>
</tr>
<tr>
<td>
<ol>
<li>
Web Programming
<ul type="square">
<li>HTML 5</li>
<li>CSS 3</li>
<li>JavaScript</li>
</ul>
</li>
<li>
PHP Framework
<ul type="square">
<li>Laravel</li>
<li>Cupcake</li>
<li>Slim</li>
</ul>
</li>
</ol>
</td>
</tr>
<tr>
<td>20% Dicount for the ten Student Contact
us on 9900990000</td>
</tr>
</table>
Html code to design complex nested list
<!doctype html>
<html>
<head>
<title>Example of Nested List</title>
</head>
<body leftmargin="200px" topmargin="50px">
<h1>Nested List</h1>
<ol type="I">
<li>
Background Skills
<ol type="A">
<li>Unix Commands</li>
<li>Vim Test Editors</li>
</ol>
</li>
<li>
HTML
<ol type="A">
<li>Minimal Page</li>
<li>Headings</li>
<li>Elements</li>
<li>
Lists
<ol type="i">
<li>Unordered</li>
<li>Ordered</li>
<li>Definition</li>
<li>Nested</li>
</ol>
</li>
<li>
Links
<ol type="i">
<li>Absolute</li>
<li>Relative</li>
</ol>
</li>
<li>Images</li>
</ol>
</li>
<li>
CSS
<ol type="A">
<li>Anatomy</li>
<li>Basic Selectors
<ol type="i">
<li>Element</li>
<li>Class</li>
<li>ID</li>
<li>Group</li>
</ol>
</li>
<li>The DOM</li>
<li>Advanced Selectors</li>
<li>Box Model</li>
</ol>
</li>
<li>
Programming
<ol type="A">
<li>Python</li>
<li>JavaScript</li>
</ol>
</li>
<li>
Database
<ol type="A">
<li>Flat File</li>
<li>Relational</li>
</ol>
</li>
</ol>
</body>
</html>
HTML Code design Time Table using rowspan and
colspan
<!doctype html>
<html>
<head>
<title>Table Assignment 2 </title>
</head>
<body>
<table border="1" align="center" width="60%"
cellpadding="10px">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<th colspan="5"
align="center">LUNCH</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td rowspan="2">Project</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
</tr>
</table>
</body>
</html>
HTML Code design complex Time Table using rowspan
and colspan
<!doctype html>
<html>
<head>
<title>Table Assignment 3 </title>
</head>
<body>
<center><h2>TIME TABLE</h2></center>
cellpadding="10px">
<tr>
<th>Day/Period</th>
<th>I <br/>9:30-10:20</th>
<th>II <br/>10:20-11:10</th>
<th>III<br/>12:00-12:40</th>
<th>12:00-12:40</th>
<th>IV<br/>12:40-1:30</th>
<th>V<br/>1:30-2:20</th>
<th>VI<br/>2:20-3:10</th>
<th>VII<br/>3:10-4:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Eng</td>
<td>Mat</td>
<td>Che</td>
<td rowspan="6">LUNCH</td>
<td colspan="3">LAB</td>
<td>Phy</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td>SPORTS</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Mat</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan="3">LIBRARY</td>
</tr>
<tr>
<td>Thursday</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
</tr>
<tr>
<td>Friday</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
</tr>
</table>
</body>
</html>
HTML Code to Design Basic Table
<!doctype html>
<html>
<head>
<title>Table Assignment </title>
</head>
<body>
<center><h4>Basic Course</h4></center>
cellpadding="10px" cellspacing="3px" bgcolor="pink"
bordercolor="green">
<tr bgcolor="maroon">
<th>Sr. No</th>
<th>Course Name</th>
<th>Fees</th>
<th>Duration</th>
<th>Eligibility</th>
</tr>
<tr>
<td>1</td>
<td>CCC - Course on Computer
Concept</td>
<td>2000</td>
<td>3 Months</td>
<td>10<sup>th</sup></td>
</tr>
<tr>
<td>2</td>
<td>CCA - Course on Computer
Application</td>
<td>2000</td>
<td>3 Months</td>
</tr>
<tr>
<td>3</td>
<td>Tally</td>
<td>3000</td>
<td>3 Months</td>
</tr>
<tr>
<td>4</td>
<td>O Level</td>
<td>15,000</td>
<td>1 Year</td>
</tr>
</table>
</body>
</html>
Html code to design the complex table with rowspan
and colspan
<!doctype html>
<html>
<head>
<title>HTML Table Assignment 4 - Complex
Table designing work</title>
</head>
<body>
<center><h4>Web Infomax IT Solutions</h4></
center>
<table border="1" width="800px"
align="center" height="400px" cellspacing="0"
cellpadding="10px">
<tr>
<td rowspan="2" align="center">Sr.
NO</td>
<td rowspan="2"
align="center">Details of the Services Provided</td>
<td rowspan="2" align="center">Qty</
td>
<td colspan="2"
align="center">Service Period</td>
<td colspan="4"
align="center">Service Performance Details</td>
</tr>
<tr>
<td align="center">From</td>
<td align="center">To</td>
<td align="center">S.No</td>
<td align="center">Service ID No:</
td>
<td align="center">Gap in Service
(in days)</td>
<td align="center">Overall
Performance Remarks (Satisfactory/ un-
satisfactory)</td>
</tr>
<tr>
<td rowspan="3" align="center"
valign="top">1</td>
<td rowspan="3" align="center"></td>
<td></td>
<td></td>
<td></td>
<td align="center" >1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2" align="center"
valign="top">2</td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td align="center">1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td align="center">2</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Html table for Indian Tourist Spots
Using HTML
(a) Create a 4x3 table
(b) Within table, place 12 images of Indian Tourist Spots, in each box
(c) Each image should link to the corresponding Website of the Tourist Spot
(d) Each Image must be at least 100x100 in size

Write a HTML code using CSS to create a job
application form having following details
Write a HTML code using CSS to create a job application form having
following details :
(I) Personal Information ( First Name, Middle Name, Last Name, Gender,
address & phone number)
(II) Education Details ( 10th, 12th, Graduation & others)
(III) Experience (in months)

Write a HTML program to create a form for the
subscription of a magazine
Write a HTML program to create a form for the subscription of a magazine.

The form should contain Name, Address, City, State, Pin Code. Magazine
should be selected from 5 different magazines using checkbox. Subscription
is available for 1 year or two years. Radio buttons shall be used to select
subscription period. The page should have a submit button.
Solution
<!doctype html>
<html>
<heaD>
</head>
<body>
<form>
<h3 align="center"> Magazine
Subscription Form</h3>
<table align="center" cellpadding="5px"
border="1" cellspacing="0" width="40%">
<tr>
<td>Name</td>
placeholder="Enter Name"/></td>
</tr>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>City</td>
placeholder="Enter City"/></td>
</tr>
<tr>
<td>State</td>
placeholder="Enter State"/></td>
</tr>
<tr>
<td>Pin Code</td>
placeholder="Enter Pin"/></td>
</tr>
<tr>
<td valign="top">Select
Magazine</td>
<td>
<input type="checkbox"/
><label>Magazine A</label><br/>
><label>Magazine B</label><br/>
><label>Magazine C</label><br/>
><label>Magazine D</label><br/>
><label>Magazine E</label>
</td>
</tr>
<tr>
<td valign="top">Subscription
Period</td>
<td>
<input type="radio"
name="period" value="1"/><label>1 Year</label><br/>
<input type="radio"
name="period" value="2"/><label>2 Year</label>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit"
value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>
Output
Design a html from for o level registration
Create a NIELIT O Level Registration Form

Solution
<html>
<head>
<title>REGISTRATION APPLICATION FORM FOR
COURSE – O LEVEL</title>
</head>
<body>
<center><h3>REGISTRATION APPLICATION FORM
FOR COURSE – O LEVEL</h3></center>
<form>
<table align="center" width="80%"
border="1" cellpadding="5px" cellspacing="0">
<tr bgcolor="#0090b8">
<td colspan="3"><font
color="white"><b>1. Registration Form</b></font></
td>
</tr>
<tr>
<td>1.0</td>
<td>Have you got online
reference number for enrolment with<br/> NIELIT/
Accreditation/Extension Center </td>
type="radio" name="enroll"/><label>Yes</label><input
type="radio" name="enroll"/></td>
</tr>
<tr>
<td>1.1</td>
<td>Registration sought for</td>
<td>
<select disabled>
<option>O LEVEL</option>
</select>
</td>
</tr>
<tr>
<td>1.2</td>
<td>Applied As</td>
<td><label>Direct Candidate</
label><input type="radio" name="type" checked/
><label>Through Institute</label><input type="radio"
name="type"/></td>
</tr>
<tr>
<td>1.3</td>
<td>Exam Cycle </td>
value="July, 2022" readonly/></td>
</tr>
<tr>
<td>1.4</td>
<td>Registration Fee Will Be
Paid By? </td>
value="Candidate Direct to NIELIT" disabled/></td>
</tr>
<td colspan="3"><font
color="white"><b>2. Applicant's Personal Details</
b></font></td>
</tr>
<tr>
<td>2.1</td>
<td>Applicant's full name </td>
<td>
<select >
<option>--Select --</
option>
<option>Ms.</option>
<option>Others</option>
</select>
<input type="text"
size="20"/>
</td>
</tr>
<tr>
<td>2.2</td>
<td>Care Of </td>
<td><label>Parents</label><input
type="radio" name="care" checked/><label>Guardian </
label><input type="radio" name="care"/></td>
</tr>
<tr>
<td>2.2.1</td>
<td>Father's Name </td>
<td>
<select disabled >
</select>
<input type="text"
size="20"/>
</td>
</tr>
<tr>
<td>2.2.2</td>
<td>Mother's Name </td>
<td>
<select disabled >
<option>Mrs.</option>
</select>
<input type="text"
size="20"/>
</td>
</tr>
<tr>
<td>2.3</td>
<td>Gender</td>
<td>
<label>Male</label><input
<label>Female </label><input
<label>Others </label><input
</td>
</tr>
<tr>
<td>2.4</td>
<td>Date of Birth</td>
<td>
<input type="date"/>
</td>
</tr>
<tr>
<td>2.5</td>
<td>Marital Status</td>
<td>
<select>
option>
<option>Single</option>
<option>Married</option>
<option>Divorced</
option>
<option>Widowed</option>
</select>
</td>
</tr>
<tr>
<td>2.6</td>
<td>Category </td>
<td>
<select>
option>
<option>General</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
</select>
</td>
</tr>
<tr>
<td>2.7</td>
<td>Handicapped </td>
type="radio" name="Handicapped" checked/
><label>Yes</label><input type="radio"
name="Handicapped"/></td>
</tr>
<tr>
<td>2.8</td>
<td>Ex-Serviceman </td>
type="radio" name="Serviceman" checked/><label>Yes</
label><input type="radio" name="Serviceman"/></td>
</tr>
<tr>
<td>2.9</td>
<td>EWS </td>
type="radio" name="EWS" checked/><label>Yes</
label><input type="radio" name="EWS"/></td>
</tr>
<tr>
<td>2.10</td>
<td>Religion </td>
<td>
<select>
option>
<option>Hindu</option>
<option>Muslim</option>
<option>Jain</option>
<option>Christianity</
option>
</select>
</td>
</tr>
<td colspan="3">3. Contact
Details</td>
</tr>
<tr>
<td>3.1</td>
<td>Mobile Number</td>
<td><input type="tel"/></td>
</tr>
<tr>
<td>3.2</td>
<td>Email ID</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>3.3</td>
</tr>
<tr>
<td>3.4</td>
</tr>
<tr>
<td>3.5</td>
<td>City</td>
</tr>
<tr>
<td>3.6</td>
<td>State</td>
<td>
<select>
option>
<option value="Andhra
Pradesh">Andhra Pradesh</option>
<option value="Andaman
and Nicobar Islands">Andaman and Nicobar Islands</
option>
<option value="Arunachal
Pradesh">Arunachal Pradesh</option>
<option
value="Assam">Assam</option>
<option
value="Bihar">Bihar</option>
<option
value="Chandigarh">Chandigarh</option>
<option
value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and
Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and
Diu">Daman and Diu</option>
<option
value="Delhi">Delhi</option>
<option
value="Lakshadweep">Lakshadweep</option>
<option
value="Puducherry">Puducherry</option>
<option
value="Goa">Goa</option>
<option
value="Gujarat">Gujarat</option>
<option
value="Haryana">Haryana</option>
<option value="Himachal
Pradesh">Himachal Pradesh</option>
<option value="Jammu and
Kashmir">Jammu and Kashmir</option>
<option
value="Jharkhand">Jharkhand</option>
<option
value="Karnataka">Karnataka</option>
<option
value="Kerala">Kerala</option>
<option value="Madhya
Pradesh">Madhya Pradesh</option>
<option
value="Maharashtra">Maharashtra</option>
<option
value="Manipur">Manipur</option>
<option
value="Meghalaya">Meghalaya</option>
<option
value="Mizoram">Mizoram</option>
<option
value="Nagaland">Nagaland</option>
<option
value="Odisha">Odisha</option>
<option
value="Punjab">Punjab</option>
<option
value="Rajasthan">Rajasthan</option>
<option
value="Sikkim">Sikkim</option>
<option value="Tamil
Nadu">Tamil Nadu</option>
<option
value="Telangana">Telangana</option>
<option
value="Tripura">Tripura</option>
<option value="Uttar
Pradesh">Uttar Pradesh</option>
<option
value="Uttarakhand">Uttarakhand</option>
<option value="West
Bengal">West Bengal</option>
</select>
</td>
</tr>
<tr>
<td>3.7</td>
<td>Pin Code</td>
</tr>
<td colspan="3">4. Educational /
Qualification Details</td>
</tr>
<tr>
<td>4.1</td>
<td>Highest Educational
Qualification</td>
<td>
<select>
option>
<option>Graduate</
option>
option>
</select>
</td>
</tr>
<tr>
<td>4.2</td>
<td>Year of Passing</td>
</tr>
<td colspan="3">5.
Identification Details</td>
</tr>
<tr>
<td>5.1</td>
<td>Aadhar Card Number</td>
</tr>
<tr>
<td>5.2</td>
<td>Upload Photo</td>
<td><input type="file"td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit"
value="Submit"/>
<input type="reset"
value="Back"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Html code to develop a web page having two frames
that divide the page into two equal rows and divide the
rst row into equal columns
Write HTML code to develop a web page having two frames that divide the
page into two equal rows and divide the rst row into equal columns. Fill each
of the different background color.
Solution
<!DOCTYPE HTML>
<html>
<head>
</head>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="" style="background:red"></
frame>
<frame src="" style="background:green"></
frame>
</frameset>
<frame src="" style="background:orange"></frame>
</frameset>
</html>
fi
fi
Create a webpage divide the webpage into six frames
In one frame create ve links that will display different
HTML forms in the remaining ve frames respectively
Create a webpage, divide the webpage into six frames. In one frame create
ve links that will display different HTML forms in the remaining ve frames
respectively.
fi
fi
fi
fi
Create a page with two frames using HTML
Create a page with two frames using HTML:
a) The left frame of page contains the list of names and images of the Indian
national leaders.
b) On the left frame when u click on the image, the details will be shown on
the right fame
Css code to design a circle using div with following
speci cations
Write a HTML and CSS Code to Design a Circle with Following

Speci cations:
Width - 200px Height - 200px Background - Red Border - 2px Double Line
and Black Color Change the background color as Yellow when mouse is
move over to the Circle.
Solution
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.circle{
width:200px;
height:200px;
border-radius:50%;
background:red;
border:2px double black;
}
.circle:hover{
background:yellow;
}
fi
fi
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Css code to change the square into circle when mouse
is over to the square shape
Write a CSS Code which change the Shape of Square into Circle when User
Move the mouse over square.
Solution
<!DOCTYPE HTML>
<html>
<head>
.circle{
width:200px;
height:200px;
background:red;
border:2px double black;
}
.circle:hover{
background:yellow;
border-radius:50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Css code to create 3 different colors box which partially
overlapped to each other
Solution
<!DOCTYPE HTML>
<html>
<head>
div{
width:150px;
height:150px;
position:absolute;
opacity:.5;
}
.box1{
background:red;
}
.box2{
background:green;
top:50px;
left:50px;
}
.box3{
background:blue;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
Css code to design a box using div with following
speci cations
Write CSS code to design a box using div with following speci cations:
Width: 300px Height:300px Background color: Green Border: 3px solid style
and Red color
Solution
<!DOCTYPE HTML>
<html>
<head>
.box{
width:300px;
height:300px;
background:green;
border:3px solid red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
fi
fi
AngularJS Program to nd the Simple Interest
Write a AngularJS Program which accept the Principal Amount, Rate, Time
from user and Find the Simple Interest.
Solution
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<table cellpadding="3px" align="center"
style="border:2px solid red;padding:10px;border-
radius:20px;">
<tr>
<th colspan="2">Simple Interest
Calculator</th>
</tr>
<tr>
<td>Principle Amount</td>
<td><input type="text" ng-model="pa"></
td>
</tr>
<tr>
fi
<td>Rate of Interest</td>
<td><input type="text" ng-
model="rate"></td>
</tr>
<tr>
<td>Time</td>
model="time"></td>
</tr>
<tr>
<td>Simple Interest</td>
<td><h4>{{((pa*rate*time)/100)}}</h4></
td>
</tr>
</table>
</div>
</body>
</html>
Angular JS program to convert Temperature Fahrenheit
to Degree Celsius
Write a Angular JS Program to Convert the Temperature Fahrenheit to

Degree Celsius
Solution
<!doctype html>
<html>
<head>
<script language="javascript"
src="angular.min.js"></script>
</head>
<body>
<h1>Temperature Fahrenheit to Degree <br/
>Celsius Converter using Angular JS</h1>
<div ng-app="" ng-init="f=32">
Temperature in Fahrenheit: <input
type="text" ng-model="f"><br/><br/>
Temperature in Degree Celsius:
{{(f-32)*(5/9)}}
</div>
</body>
</html>
AngularJS Program to change the background color of
box
Write a AngularJS Program to change the background color of box by user

input.
Solution
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Background Changer</h1>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:
{{myCol}}" ng-model="myCol">
</div>
</body>
</html>
AngularJS Program for Dollar to Indian Rupee
Conversion
Write a AngularJS Program to Convert Dollar to Indian Rupee

Solution
<!doctype html>
<html>
<head>
<title>Dollar to Indian Rupee Converter
using Angular JS</title>
</head>
<body>
<h1 style="font-size:18px">Dollar to Indian
Rupee Converter using Angular JS</h1>
<div ng-app="">
<table>
<tr>
<td>United States Dollar: </td>
model="dollar" value="1"></td>
</tr>
<tr>
<td>Indian Rupee:</td>
value="{{dollar*76.09}}"/></td>
</tr>
</table>
</div>
</body>
</html>
Angular JS program to change the size of circle using
range bar
Write Angular JS program to change the size of circle using input type range
Solution
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.9/angular.min.js"></script>
<style>
.circle
{
width:300px;
height:300px;
background:red;
border-radius:50%;
}
</style>
<body>
<div ng-app="">
100<input type="range" min="100" max="500"
step="50" ng-model="size"/>{{size}}<br/>
<br/>
<br/>
<div class="circle" style="width:{{size}}
px;height:{{size}}px"></<div>
</div>
</body>
</html>

Web Designing and Publishing Practical Questions

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing and Publishing Practical Questions

Uploaded by

Copyright:

Available Formats

Html program to display a table with 5 rows and 4

columns. Provide appropriate heading to the form

<table border="1" width="600px" align="center">

Create an HTML page to demonstrate a Clickable image.

<a href="http://google.com"><img src="logo.png"/></

<button type="submit"><img src=“logo.png"/></button>

<td>Address Line 1</td>

<td>Address Line 2</td>

<td>Aadhar Card Number</td>

Create an HTML page to demonstrate target attribute in Frames.

Write HTML code to display country name in red color

<a href="about.html">About Us</a>

Create a hyperlink in html which when clicked links to www.google.com in a

<a href="http://www.google.com" target="_blank">Open

Write an HTML code for creating the following output

(a) Create a 4x3 table

(d) Each Image must be at least 100x100 in size

(II) Education Details ( 10th, 12th, Graduation & others)

(III) Experience (in months)

Write a HTML program to create a form for the subscription of a magazine.

Create a NIELIT O Level Registration Form

Create a page with two frames using HTML:

Write a HTML and CSS Code to Design a Circle with Following

Write a Angular JS Program to Convert the Temperature Fahrenheit to

Write a AngularJS Program to change the background color of box by user

Write a AngularJS Program to Convert Dollar to Indian Rupee

You might also like