Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

LABORATORY MANUAL
Web Programming Lab [ 21CSL481]
21CSL481

Compiled by
Mrs. Ragini Krishna,
Asst. Professor

Name of the Student:

USN:

Branch/Semester:

Academic Year:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

GENERAL INSTRUCTIONS

The resource has been established as per requirement on need basis. In order to utilize the
resource effectively and efficiently we need to follow few guidelines.
Do’s
 Students must leave your foot footwear
wear outside the lab at designated place.
 Students must keep your belongings in the designated place.
 Students must maintain discipline & follow ethics in the lab.
 Students must indicate the Login & Logout time on the record.
 Students must come prepare wit
with Observation / Data sheet.
 Students must enter the lab and login to the allotted computer.
 Students must use the computer lab for Academic related activities.
 Students must use the computer lab for Academic related activities.
 Students must keep their wor
working area orderly & neatly.
 Students must turn off the computer and keep the chairs properly before leaving the
lab.

Don’ts
 Students must not eat food, chew gum in the lab.
 Students must not change the existing setup in the lab.
 Students must not disrupt, or trouble other students in the lab.
 Students must not interfere or tamper anyone else’s work.
 Students must not access any computer or data without permission.
 Students must not connect the external storage to avoid transfer of virus.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

WEB PROGRAMMING
(Practical based)
Course Code 21CSL481 CIE Marks 50
Teaching Hours/Week (L:T:P: S) 0:1:1:0 SEE Marks 50
Total Hours of Pedagogy 12T + 12P Total Marks 100
Credits 01 Exam Hours 02
Course Objectives:
CLO 1. Learn Web tool box and history of web browsers.CLO
2. Learn HTML, XHTML tags with utilizations.
CLO 3. Know CSS with dynamic document utilizations.
CLO 4. Learn JavaScript with Element access in JavaScript.
CLO 5. Logically plan and develop web pages..
Teaching-Learning Process (General Instructions)

These are sample Strategies, which teachers can use to accelerate the attainment of the various course outcomes.
1. Lecturer method (L) need not to be only a traditional lecture method, but alternative effective
teaching methods could be adopted to attain the outcomes.
2. Use of Video/Animation to explain functioning of various concepts.
3. Encourage collaborative (Group Learning) Learning in the class.
4. Ask at least three HOT (Higher order Thinking) questions in the class, which promotes critical
thinking.
5. Adopt Problem Based Learning (PBL), which fosters students’ Analytical skills, develop design
thinking skills such as the ability to design, evaluate, generalize, and analyze information ratherthan
simply recall it.
6. Introduce Topics in manifold representations.
7. Show the different ways to solve the same problem with different circuits/logic and encouragethe
students to come up with their own creative ways to solve them.
8. Discuss how every concept can be applied to the real world - and when that's possible, it helps
improve the students' understanding.

Module-1
Introduction to WEB Programming: Internet, WWW, Web Browsers, and Web Servers, URLs, MIME,
HTTP, Security, The Web Programmers Toolbox.

Textbook 1: Chapter 1(1.1 to 1.9)

Teaching-Learning Process Chalk and board, Active Learning, practical based learning
Module-2
HTML and XHTML: Origins of HTML and XHTML, Basic syntax, Standard XHTML document structure,
Basic text markup, Images, Hypertext Links, Lists, Tables.
Forms, Frames in HTML and XHTML, Syntactic differences between HTML and XHTML.

Textbook 1: Chapter 2(2.1 to 2.10)

Teaching-Learning Process Chalk and board, Active Learning, Demonstration, presentation,
problem solving
Module-3
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

CSS: Introduction, Levels of style sheets, Style specification formats, Selector forms, Property value forms, Font
properties, List properties, Color, Alignment of text, Background images, tags.

Textbook 1: Chapter 3(3.1 to 3.12)

Teaching-Learning Process Chalk and board, Demonstration, problem solving
Module-4
Java Script – I: Object orientation and JavaScript; General syntactic characteristics; Primitives,
Operations, and expressions; Screen output and keyboard input.

Textbook 1: Chapter 4(4.1 to 4.5)

Teaching-Learning Process Chalk and board, Practical based learning, practical’s
Module-5
Java Script – II: Control statements, Object creation and Modification; Arrays; Functions; Constructor;
Pattern matching using expressions; Errors, Element access in JavaScript.

Textbook 1: Chapter 4(4.6 to 4.14)

Teaching-Learning Process Chalk and board, MOOC
Course Outcomes (Course Skill Set):
At the end of the course the student will be able to:
CO 1. Describe the fundamentals of web and concept of HTML.
CO 2. Use the concepts of HTML, XHTML to construct the web pages.
CO 3. Interpret CSS for dynamic documents.
CO 4. Evaluate different concepts of JavaScript & Construct dynamic documents.CO
5. Design a small project with JavaScript and XHTML.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Assessment Details (both CIE and SEE)

The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%.
The minimum passing mark for the CIE is 40% of the maximum marks (20 marks). A student shallbe deemed
to have satisfied
ed the academic requirements and earned the credits allotted to each course. The student has to
secure not less than 35% (18 Marks out of 50) in the semester-end examination (SEE).
Continuous Internal Evaluation (CIE):
NOTE: List of experiments to be prepared by the faculty based on the syllabus mentioned above
CIE marks for the practical course is 50 Marks.
The split-up of CIE marks for record/ journal and test are in the ratio 60:40.
 Each experiment to be evaluated for conduction with observation sheet and record write-up.
write Rubrics for
the evaluation of the journal/write
journal/write-up
up for hardware/software experiments designed by the faculty who is
handling the laboratory session and is made known to students at the beginning of the practical session.
 Record should contain all the specified experiments in the syllabus and each experiment write-up
write will be
evaluated for 10 marks.
 Total marks scored by the students are scaled downed to 30 marks (60% of maximum marks).
 Weightage to be given for neatness and submission of record/write-up on time.
 Department shall conduct 02 tests for 100 marks, the first test shall be conducted after the 8th weekof the
semester and the second test shall be conducted after the 14th week of the semester.
 In each test, test write-up, conduction of experiment, acceptable result, and procedural knowledge will
carry a weightage of 60% and the rest 40% for viva-voce.
 The suitable rubrics can be designed to evaluate each student’s performance and learning ability.Rubrics
suggested in Annexure-II of Regulation book
 The average of 02 tests is scaled down to 20 marks (40% of the maximum marks).
The Sum of scaled-down marks scored in the report write-up/journal and average marks of two tests isthe total
CIE marks scored by the student.

Semester End Evaluation (SEE):

 SEE marks for the practical course is 50 Marks.
 SEE shall be conducted jointly by the two examiners of the same institute, examiners are
appointed by the University
 All laboratory experiments are to be included for practica
practical examination.
 (Rubrics) Breakup of marks and the instructions printed on the cover page of the answer
script to be strictly adhered to by the examiners. OR based on the course requirement
evaluation rubrics shall be decided jointly by examiners.
 Students can pick one question (experiment) from the questions lot prepared by the internal
/external examiners jointly.
 Evaluation of test write-up/up/ conduction procedure and result/viva will be conducted jointly by
examiners.
 General rubrics suggested for SEE are mentioned here, writeup-20%, 20%, Conduction procedure
and result in -60%, Viva--voce 20% of maximum marks. SEE for practical shall be evaluated
for 100 marks and scored marks shall be scaled down to 50 marks (however, based on course
type, rubrics shall be decided
ded by the examiners)
 The duration of SEE is 02 hours
 Rubrics suggested in Annexure
Annexure-II of Regulation book
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Textbooks
1. Robert W Sebesta, “Programming the World Wide Web”, 6th Edition, Pearson Education, 2008.

Reference Books
1. M.Deitel, P.J.Deitel, A.B.Goldberg, “Internet & World Wide Web How to program”, 3rd
Edition, Pearson Education / PHI, 2004.
2. Chris Bates, “Web Programming Building Internet Applications”, 3rd Edition, Wiley India, 2006.
3. Xue Bai et al, “The Web Warrior Guide to Web Programming”, Thomson, 2003.
4. Sklar, “The Web Warrior Guide to Web Design Technologies”, 1st Edition, Cengage Learning
India

Weblinks and Video Lectures (e-Resources):

Resources):
1. Fundamentals of WEB Programming: https://www.youtube.com/watch?v=DR9dr6gxhDM
2. HTML and XHTML: https://www.youtube.com/watch?v=A1XlIDDXgwg
3. CSS: https://www.youtube.com/w
https://www.youtube.com/watch?v=J35jug1uHzE
4. Java Script and HTML Documents: https://www.youtube.com/watch?v=Gd0RBdFRvF0
5. Dynamic Documents with JavaScript: https://www.youtube.com/watch?v=HTFSIJALNKc

Tutorial Link:
1. http://www.tutorialspoint.com
2. http://www.w3schools.com

Activity Based Learning (Suggested Activities in Class)/ Practical Based learning

Demonstration of simple projects
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

LIST OF EXPERIMENTS
SL. Experiments
NO.
1. Create a page using html tags to accomplish the following:

i. A paragraph containing text “All that glitters is not gold”. Bold face and italicize
this text
ii. Put a background image to a page and demonstrate all attributes of background
image
iii. Create unordered list of 5 fruits and ordered list of 3 flowers
iv. Create a equation: X=1/3(y12+z12)
v. Demonstrate different heading tags

2. Create a following form using HTML and CSS

3. Create following table using XHTML tags. Properly align cells, give suitable cell
padding and cell spacing, and apply background color, bold and emphasis necessary.
4. Demonstrate the following HTML5 Semantic tags tags-<article>,
article>, <aside>, <details>,
<figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <section> for a
webpage that gives information about travel experience.
5. Create a class called income, and make it a background color of #0ff.
Create a class called expenses, and make it a background color of #f0f.
Create a class called profit, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, or profit, attach the
appropriate class to that piece of text. Further create following line of text in the same
document: The current price is 5050₹and new price is 40₹
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

6. Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must include USN, Name, and Name of the College,
Branch, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.
7. Create following calculator interface with HTML and CSS.

8. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs
HTML text that displays the resulting values in an HTML table format.

9. Write a Java Script program that on clicking a button, displays scrolling text which moves from
left to right with a small delay.
ay.

10. Create a webpage containing 3 overlapping images using HTML, CSS and JS.
Further when the mouse is over any image, it should be on the top and fully
displayed.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Department
epartment of Information Science and
Engineering

Vision

To foster the students into globally competent professionals with expertise

in software development and aptitude for research and ethical values.

Mission
M1. To produce technically competent graduates thr
through
ough a balanced
curriculum and interdisciplinary applications.
M2. To create a competitive ambience for gr grooming
ooming young minds to meet
the industry trends and become self sustainable.
M3. To create knowledge of innovative technologi
technologies
es through research
and higher studies within the core areas of computation.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Vision of the Institute

To create a community of knowledgeable and competent engineers to embody

global standards of excellence and drive innovation and progress in industries,
businesses, and research organizations around the world.

Mission
ission of the Institute

To facilitate an inclusive and supportive learning environment that fosters

collaboration, creativity, and the pursuit of excellence in engineering.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Program Educational Objectives (PEOs)

PEO 1: Work effectively as an individual and in a team, exhibiting leadership

qualities to meet the goals of the organization

PEO2: To be able to adapt to the evolving technical challenges and changing

career opportunities and to pursue higher education.

PEO3: Learn to apply modern skills, techniques, and engineering tools to create
computational systems.

Program Specific Objectives (PSOs)

PSO1: To understand and process the principles of mathematics in the field of

information Science by applying different design principles.

PSO2: To impart the knowledge by experimental methods in multidisciplinary

domains.

PSO3: To inculcate communication skills and team work in developing

sustainable software’s by imparting professional and ethical values.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Program Outcomes (POs)

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,

and an engineering specialization to the solution of complex engineering problems.

2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences.

3. Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations.

4. Conduct investigations of complex problems: Use research-based

based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice

7. Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.

8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice.

9. Individual and team work: Function effectively as an individual, and as a member or leader in diverse
teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and
design documentation, make effective presen
presentations,
tations, and give and receive clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team, to
manage projects ts and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long
long learning in the broadest context of technological change.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

1. Create a page using html tags to accomplish the following:

i. A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
ii. Put a background image to a page and demonstrate all attributes of background image
iii. Create unordered list of 5 fruits and ordered list of 3 flowers
iv. Create a equation: X=1/3(y12+z12)
v. Demonstrate different heading tags

Program :

<html>
<head>
<title>Program 1a</title>
<style>
body{
background-image: url('skit.jpg');
background-size: 300px 100px;

background-repeat: repeat-x;
/*
background-repeat: repeat-x;
background-repeat: no-repeat;

background-attachment: fixed;
background-position: center;*/
}
</style>
</head>

<body>
<p><b><i>All that glitters is not gold</i></b>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not on only
ly five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release fLetraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus
dus PageMaker <b><i>All that glitters is not gold</i></b>including versions of Lorem
Ipsum.</p>
<p>
It is a long established fact that a reader will be distracted by the readable content <b><i>All that
glitters is not gold</i></b> of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less
less normal distribution of letters <b><i>All that glitters is not gold</i></b></p>
gold</i></b>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<h1>Unordered list</h1>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
<li>Watermelon</li>
<li>Orange</li>
</ul>
<h1>Ordered list </h1>
<h2>Flowers</h2>
<ol type="i">
<li>Rose</li>
<li>Lotus</li>
<li>Sun flower</li>
</ol>

<i>x</i> = 1/3(<i>y</i>₁² + <i>z</i>₁²)

<i>z</i>₁<sup>2<

<h1>Welcome to AEC WT</h1>

<h2>Welcome to AEC WT</h2>
<h3>Welcome to AEC WT</h3>
<h4>Welcome to AEC WT</h4>
<h5>Welcome to AEC WT</h5>
<h6>Welcome to AEC WT</h6>
</body>
</html>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

2. Create a following form using HTML and CSS

Program :

<html>
<head>
<title> Program 1b</title>
<style>
.container{
background-color:
color: pink;
width:25%;
padding:25px;
}
button {
background-color:
color: orange;
width: 40%;
color: white;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
input[type=text], input[type=password] {
width: 90%;
margin: 8px 0;
padding: 12px 20px;
}
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

button:hover {
opacity: 0.2;
}
</style>
</head>

<body>
<form>
<div class="container">
<center><h2> Sign up today </h2></center>
<label>Name : </label></br>
<input type="text"></br>
<label>E-mail
mail : </label></br>
<input type="text"></br>
<label>Password : </label></br>
/label></br>
<input type="password"></br>
<label>Confirm password : </label></br>
<input type="password"></br>
<button type="submit">Register</button>
</div>
</form>
</body>
</html>

3. Create following table using XHTML tags. Properly align cells, give suitable cell padding
and cell spacing, and apply background color, bold and emphasis necessary.

Program :
<?xml version="1.0" encoding="UTF
encoding="UTF-8"?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
s="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Table Demo XHTML PAGE</title>
<meta name="author" content="Ragini" />
<meta name="date" content="2023
content="2023-02-17T04:58:37+0530" />
<meta http-equiv="content
equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content
equiv="content-type"
type" content="application/xhtml+xml; charset=UTF-8"/>
charset=UTF
<meta http-equiv="content
equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires"
equiv="expires" content="0"/>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<style>
table, th, td {
border: 1px solid black;
border-collapse:
collapse: collapse;
}
th, td{
padding-left: 10px;
padding-bottom: 20px
}
table {
border-spacing: 30px;
}
</style>

</head>
<body>

<h3>Tables
h3>Tables in XHTML</h3>

<table align="center" width="70%" style="height:450px">

<tr >
<td rowspan="9" align="center" bgcolor=DEEEEE>
<b>Department</b>
</td>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem1</b>
</td>
<td padding:15px>
<em>SubjectA</em>
</td>
</tr>
<tr>
<td ><em>SubjectB</em></td>
</tr>
<tr>
<td ><em>SubjectC</em></td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem2</b>
</td>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<td ><em>SubjectE</em></td>
</tr>
<tr>
<td ><em>SubjectF</em></td>
</tr>
<tr>
<td ><em>SubjectG</em></td>
</tr>

<tr>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem3</b>
</td>
<td ><em>SubjectH</em></td>
</tr>
<tr>
<td ><em>SubjectI</em></td>
</tr>
<tr>
<td ><em>SubjectJ</em></td>
</tr>

</table>
</body>
</html>

Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

4. Demonstrate the following HTML5 Semantic tagstags-<article>,

<article>, <aside>, <details>,
<figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <section> for a webpage
that gives information about travel experience.

Program:

<!--Demonstrate
Demonstrate the following HTML5 Semantic tags tags- <article> , <aside> , <details> ,
< figcaption >, < figure >, < footer >, < header >, < main >, < mark >, < section >
for a webpage that gives information about travel experience.> -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Tags Demo</title>

<style>
body{
background-color:
color: #FFFDD0;
}
aside {
float: right;
width: 25%;
background-color:
color: cyan;
font-style: italic;
padding: 15px;
}
main {
float: left;
width: 70%;
}
footer {
position: fixed;
right: 1000;
bottom: 0;
width: 100%;
text-align: center;
}
mark {
background-color:
color: yellow;
color: black;
}
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

figure {
display: inline-block;
margin: auto;
}

figcaption {
font-style: italic;
}

.slider {
width: 500px;
height: 300px;
background-color:
color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition:
transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container
container {
left: 0px;
}
#slide-2:target ~ .image-container
container {
left: -500px;
}
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

#slide-3:target ~ .image-container
container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
tgreen;
}
</style>
</head>
<body>
<article>
<header>

<h1>My Travelogue</h1>
<p>Random Escapades</p>
</header>

<main>
<figure>
<!--<img
<img src="ooty_road.jpg" alt="Example Image" width="350" height="235"> -->

<div class="slider">
<span id="slide-1"></span>
1"></span>
<span id="slide-2"></span>
2"></span>
<span id="slide-3"></span>
3"></span>
<div class="image-container">
container">
<img src="ooty_road.jpg" class="slide" width="500" height="300" />
<img src="malay_chayos.jpg" class="sli
class="slide"
de" width="500" height="300" />
<img src="Gokarna_1.jpg" class="slide" width="500" height="300" />
</div>
<div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<figcaption>The road never ends</figcaption>

</figure>
<section>
<h2>Ooty</h2>
<p>Ooty is a popular hill station located in the Nilgiri Hills. It is popularlycalled the "Queen of
Hill Stations".</p>
</section>

<section>
<h2>Mysore</h2>
<p> The city is also known as the City of Palaces, Mysuru has always enchanted itsvisitors with
its quaint charm.</p>
</section>
</main>
<aside>
<section>
<p>Upcoming Trek planned to <mark>
<mark>Kumara
Kumara Parvata</mark> will be sharing detils soon</p>
<details>
<summary>Tentative Dates</summary>
<p>24th August 2023</p>
</details>
</section>
</aside>
<footer>
<p>&copy; 2023 Ragini Krishna</p>
</footer>
</article>
</body>
</html>
Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

5. Create a class called income, and make it a background color of #0ff.

Create a class called expenses, and make it a background color of #f0f.
Create a class called profit, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, or profit, attach the
appropriate class to that piece of text. Further create following line of text in the same document:
The current price is 50₹and
₹and new price is 40₹.

Program:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Class Selectors Demo</title>
<style>
.income {background-color:
color: #0ff; font
font-style: italic;}
.expenses {background-color:
color: #f0f;font
#f0f;font-style: oblique;}
.profit {background-color:
color: #ff0;font
#ff0;font-weight: bold;}
.red{color: red;font-size:
size: 24px;}
.strike{text-decoration: line-through;
through; font
font-size: 24px;}
p {font-family: Cursive;}
</style>
</head>
<body>
<h1>Class Selectors Demo</h1>
<p>
Income, expenses, and profit are financial terms that are used to measure the financial health of
a person or a business.
</p>
<p class="income">
Income refers to the amount of money received by an individual or business fromvarious
sources such as employment,
loyment, investments, or sales of goods and services.Income can be earned
on a regular basis, such as a salary, or irregularly, suchas a bonus or one
one-time
time payment.
</p>

<p class="expenses">
Expenses, on the other hand, refer to the amount of money spenspentt by an individual orbusiness to
cover their costs of living or operating. Expenses can include fixed costs such as rent or salaries,
variable costs such as the cost of materials, or discretionary costs such as entertainment or travel.
</p>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<p class="profit">
Profit is the amount of money that remains after deducting expenses from income. Itrepresents
the financial gain or loss that a person or business has generated over a given period of time.
</p>

<p> A positive profit means

ans that the income was greater than the expenses, while a negative
profit means that the expenses were greater than the income.</p>

<p><span class="strike">The current price is 50&#8377; </span></p>

<span class="red">and newprice is 40&#8377;</span>

</body>
</html>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

6. Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must include USN, Name, and Name of the College,
Branch, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.

Program:

student.xml
<?xml version="1.0" encoding="UTF
encoding="UTF-8"?>
<?xml-stylesheet
stylesheet type="text/css" href="student.css"?>
<student_information>

<head1>Student Information</head1>
<head2>First Student Information</head2>
<ad><label>USN:</label><usn>1KT21IS001</usn></ad>
<ad><label>NAME:</label><name>Advi</name></ad>
<ad><label>COLLEGE:</label><college>SKIT</college></ad>
bel>COLLEGE:</label><college>SKIT</college></ad>
<ad><label>BRANCH:</label><branch>ISE</branch></ad>
<ad><label>YEAR:</label><year>2021</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>

<head2>Second Student Information</head2>

<ad><label>USN:</label><usn>1KT21IS002</usn></ad>
label>USN:</label><usn>1KT21IS002</usn></ad>
<ad><label>NAME:</label><name>Akash</name></ad>
<ad><label>COLLEGE:</label><college>SKIT</college></ad>
<ad><label>BRANCH:</label><branch>ISE</branch></ad>
<ad><label>YEAR:</label><year>2021</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>
el>EMAIL:</label><email>[email protected]</email></ad>

<head2>Third Student Information</head2>

<ad><label>USN:</label><usn>1KT21IS003</usn></ad>
<ad><label>NAME:</label><name>Akash S</name></ad>
<ad><label>COLLEGE:</label><college>SKIT</college></ad>
<ad><label>BRANCH:</label><branch>ISE</branch></ad>
label>BRANCH:</label><branch>ISE</branch></ad>
<ad><label>YEAR:</label><year>2021</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>

</student_information>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

student.css

head1
{
font-size:16pt;color:blue;
size:16pt;color:blue;
}
head2{display:block;font-size:16pt;color:green;text
size:16pt;color:green;text-decoration:underline}
ad{display:block;}
label{font-weight:bold;color:blue;}
weight:bold;color:blue;}
usn{font-size:14pt;color:red;}
name{font-size:14pt;color:red;}
size:14pt;color:red;}
college{font-size:14pt;color:red;}
size:14pt;color:red;}
branch{font-size:14pt;color:red;}
size:14pt;color:red;}
year{font-size:14pt;color:red;}
size:14pt;color:red;}
email{font-size:14pt;color:red;}
size:14pt;color:red;}

Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

7. Create following calculator interface with HTML and CSS.

<! DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>
Calculator using HTML
</title>
<link
link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<!-- CSS property to create interactive
calculator interface -->
>
<style>
body
{
background-color: tan;
}
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

.box{
background-color:
color: #FF00FF;
border : 1px solid black;
height: 300px;
width: 270px;
border-radius: 10px;
position: relative;
top: 80px;
left: 40%;
}

.display input{
position: relative;
left: 9px;
top: 10px;
height: 35px;
border-radius: 10px;
color: black;
background-color: white;
font-size: 21px;
text-align: right;
}
.keys
{
position: relative;
top: 15px;
}
.button{
width: 40px;
height: 30px;
border: none;
border-radius: 8px;
margin-left: 17px;
cursor: pointer;
border-top:
top: 2px solid transparent;
}
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

.title:hover {
color: #fff;
}
.title {
margin-bottom: 10px;
margin-top: 30px;
padding: 5px 0;
font-size: 100px;
font-weight: bold;
text-align: center;
color: gray;
font-family:
family: 'Cookie', cursive;
}

.button.gray {
color: #000000;
background-color:
color: #999999;
border-bottom:
bottom: gray 2px solid;
border-top:
top: 2px 303030 solid;
font-weight: bold;
}

.gray:active {
border-top: gray 2px solid;
border-bottom:
bottom: #303030 2px ssolid;
}

p{
line-height: 10px;
}
</style>
</head>

<body>
<div class = "title? align="centre">
Calculator using HTML
</div>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<div class="box">
<div class="display">
<input type="text" readonly size="18" id="d">
</div>
<div class="keys">
<p>
<input
input type="button" class="button gray" value="(" onclick='v("(")'>
<input type="button" class="button gray" value=")" onclick='v(")")'>
<input type="button" class="button gray" value="C" onclick='c("")'>
<input ty
type="button"
pe="button" class="button gray" value="%" onclick='v("%")'>
</p>
<p>
<input type="button" class="button gray" value="7" onclick='v("7")'>
<input type="button" class="button gray" value="8" onclick='v("8")'>
<input type="button" class="button gray" value="9" onclick='v("9")'>
<input type="button" class="button gray" value="*" onclick='v("*")'>
</p>
<p>
<input type="button" class="button gray" value="4" onc
onclick='v("4")'>
lick='v("4")'>
<input type="button" class="button gray" value="5" onclick='v("5")'>
<input type="button" class="button gray" value="6" onclick='v("6")'>
<input type="button" class="button gray" value="
value="-"" onclick='v("-")'>
onclick='v("
</p>
<p>
<input type="button" class="button gray" value="1" onclick='v("1")'>
<input type="button" class="button gray" value="2" onclick='v("2")'>
<input type="button" class="button gray" value="3" onclick='v("3")'>
<input type="button" class="button gray" value="+" onclick='v("+")'>
</p>
<p>
<input type="button" class="button gray" value="0" onclick='v("0")'>
<input type="button" class="button gray" value="." onclick='v(".")'>
<input type="button" class="button gray" value="/" onclick='v("/")'>
<input type="button" class="button gray" value="=" onclick='e()'>
</p>
</div>
</div>
</body>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<script>
function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{document.getElementById("d").value+=val;
}
function e()
{
try
{
c(eval(document.getElementById("d").value))
}
catch(e)
{
c('Error') }
}
</script>
</html>
Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

8. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and
outputs HTML text that displays the resulting values in an HTML table format.

<html>
<head>
<title>Square-Cube</title>
<style>
table{
width:300px;
text-align:center;
border:2px solid #000;
background-color:#c8c8c8;
margin:0 auto;
}
td{
height:35px;
}
.wrapper{
text-align:center;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Squares and Cubes of the numbers from 0 to 10</h2>

<script>

document.write("<table>");
document.write( "<tr><th>Number</th><th>Square</th><th>Cube</th></tr>" ) ;
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</div>
</body>
</html>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

9. Write a Java Script program that on clicking a button, displays scrolling text which moves from
left to right with a small delay.

HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text Example<
Example</title>
<style>
#scrollingText {
font-size:
size: 24px; font
font-weight: bold;
white-space:
space: nowrap; overflow: hidden;
}
</style>
</head>
<body>
<button id="startBtn">Start Scrolling</button>
<div id="scrollingText">This is some scrolling text!</div>
<script>
var scrollingText = document.getElementById("scrollingText");
var startBtn = document.getElementById("startBtn");
var textWidth = scrollingText.clientWidth;
var containerWidth = scrollingText.parentNode.clientWidth;
var currentPosition = 0;
function
unction scrollText() {
if (currentPosition < containerWidth) {
scrollingText.style.transform = "translateX(
"translateX(-"" + currentPosition + "px)";
currentPosition += 1;
setTimeout(scrollText, 20);
} else {
currentPosition = -textWidth;
textWidth;
scrollText();
}
}
startBtn.addEventListener("click",
artBtn.addEventListener("click", function() {
currentPosition = 0;
scrollText();
});
</script>
</body>
</html>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

10. Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further when the
mouse is over any image, it should be on the top and fully displayed.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Ragini" >
<title>Animal Stacking</title>
<style>
h1 {text-align:
align: center;}

.yana{
position: absolute;
left: 10%; top: 10%;
z-index: 0;
}
.malay{
position: absolute;
left: 30%; top: 30%;
z-index: 1;
}
.gokarna {
position: absolute;
left: 50%; top: 50%;
z-index: 2;
}
</style>

<script>
var topIndex = 2;
function moveToTop(picture) {
picture.style.zIndex = ++topIndex;
}

</script>
</head>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<body>
<h1>Image Overlap Demo</h1>
<div id="image-container">
container">
<img id="yana" class="yana" src="Yana.jpg" onmouseover="moveToTop(this)"
width="400" height="300">
<img id="malay" class="malay" src="Malay_room.jpg"
onmouseover="moveToTop(this)" width="400" height="300">
<img id="gokarna" class="gokarna" src="Gokarna_1.jpg"
onmouseover="moveToTop(this)"width="400" height="300">
</div>

</body>
</html>

Output:
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

VIVA
css
Sheets?
specified
documents
same
can
style
Gathering
selectors
more
the
4.
There
set
5.
The
property?
floating
other
allowed.
using
2.
3.
WEB
rules)
rendering
elements.
for
multiple
document,
A
separated
share
semicolon
declarations
Property
(attribute)
through
corresponding
which
6.What
1.
(CSS)
group
Conducting
Interactive
What
Gathering
to
asame
:-be
clear
single
element
the
each
HTML
TECHNOLOGY
that
must
sides
Questions
attached.
isare
CSS,
elements
is
are
of
elements,
is
that
selector.
same
aproperty
list
Style
properties
that
into
can
class?
grouping?
property?
the
separated
or
property.
list
at
athe
instances
element
always
Cascading
of
that
user
stylistic
forms?
two
services
even
once.
e.g.
to
CSS
assign
Surveys
value
can
an
of
anecessities
style
rules
comma
which
are
::-
statements
information
are
element
or
font
and
be
specifies
multiple
be
clear
occurrence,
or
attached
to
more
or
list
can
of
not
various
parameter
influenced
aor
Style
entire
HTML
into
avalues
Lab
the
two
unique
be
width.
where
ofa(or
or
to
WEB PROGRAMMING LAB VIVA QUESTIONS WITH ANSWERS
1) What is HTML?
HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a
standard text formatting language which is used to create and display pages on the Web. It makes
the text more interactive and dynamic. It can turn text into images, tables, links.

2) What are Tags?

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are
unclosed tags.

2.5HTML
HTML documents contain two things:
o content, and
o tags

When a web browser reads an HTML document, the browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties

3) Do all HTML tags have an end tag?

No. There are some HTML
L tags that don't need a closing tag. For example: <image> tag, <br> tag.
4) What is formatting in HTML?
The HTML formatting is a process of format the text for a better look and feel. It uses different
tags to make text bold, italicized, underlined.
5) How
w many types of heading does an HTML contain?
The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each
type of heading tag displays different text size from another. So, <h1> is the largest heading tag
and <h6> is the smallest
lest one. For example:
1. <h1>Heading no. 1</h1>
</h1>

2. <h2>Heading no. 2</h2>

</h2>

3. <h3>Heading no. 3</h3>

</h3>

4. <h4>Heading no. 4</h4>

</h4>

5. <h5>Heading no. 5</h5>

</h5>

6. <h6>Heading no. 6</h6>

</h6>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

6) How to create a hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These
tags can appear in any of the following ways:
o Unvisited link - It is displayed, underlined and blue.
o Visited link - It is displayed, underlined and purple.
o Active link - It is displayed, underlined and red.

7) Which HTML tag is used to display the data in the tabular form?

The HTML table tag is used to display data in tabular form (row * column). It also manages the
layout of the page, e.g., header section, navigati
navigation
on bar, body content, footer section. Here is the
list of tags used while displaying the data in the tabular form:

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

8) What are some common lists that are used when designing a page?
There are many common lists which are used to design a page. You can choose any or a
combination of the following list types:
o Ordered list - The ordered list displays elements in num
numbered
bered format. It is represented by
<ol> tag.
o Unordered list - The unordered list displays elements in bulleted format. It is represented
by <ul> tag.
o Definition list - The definition list displays elements in definition form like in dictionary.
The <dl>, <dt>
dt> and <dd> tags are used to define description list.

9) What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are enclosed by
brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround content.

10) What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or
meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold
statement
nt as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and
<em></em> tags.
11) What is an image map?
Image map facilitates you to link many different web pages using a single image. It is represented
by <map> tag. You can define shapes in images that you want to make part of an image mapping.

12) How to insert a copyright symbol on a browser page?

You can insert a copyright symbol by using &copy; or &#169; in an HTML file.

13) How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words, it represents a
webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example
example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
iframe:
<iframe src="https://www.javatpoint.com/"
"https://www.javatpoint.com/" height="300" width="400"
"400"></iframe>
</body>
</html>
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

14)) Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink that
links one page to another page. The "href" attribute is the most important attribute of the HTML
anchor tag.
Syntax
1. <a href = "..........."> Link Text </a>

15) What is a style sheet?

A style sheet is used to build a consistent, transportable, and well
well-designed
designed style template. You can
add these templates on several different web pages. It describe
describess the look and formatting of a
document written in markup language.

16) Can you create a multi-colored

colored text on a web page?
Yes. To create a multicolor text on a web page you can use <font color ="color"> </font> for the
specific texts you want to color.

17)) Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want to change the
color of the bullet, you must change the color of the text.
18)) Explain the layout of HTML?
HTML layout specifies a way in which the web page is arranged.
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a
webpage.
o <header>: It is used to define a header for a document or a section.
o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent, self
self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section

19) What is a marquee?

Marquee
rquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left
or right automatically. You should put the text which you want to scroll within the
<marquee>......</marquee> tag.

20)) How many tags can be used to separate a section of texts?

Three tags are used to separate the texts.
o <br> tag - Usually <br> tag is used to separate the line of text. It breaks the current line
and conveys the flow to the next line
o <p> tag - The <p> tag contains the text in the form of a new p paragraph.
aragraph.
o <blockquote> tag - It is used to define a large quoted section. If you have a large
quotation, then put the entire text within <blockquote>.............</blockquote> tag.

21) How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after
the </head> tag.

<body background = "image.gif"

"image.gif">

22)) What is the use of a span tag? Give one example.

The span tag is used for following things:

o For adding color on text

o For adding background on text
o Highlight any color text
 Sri Raghavendra Educational Institutions Society(R)

Sri Krishna Institute of Technology

(Accredited by NAAC Approved by A.I.C.T.E. New Delhi, Recognized byGovt. of Karnataka
Affiliated to V.T U., Belagavi)
#29, Chimney Hills, Hesaraghatta Main Road, Chikkabanavara Post, Bangalore-
Bangalore 560090

<p>
<span style="color:#ffffff;"
"color:#ffffff;">
In this page we use span.
</span>
</p>

23) What is the use of an iframe tag?

An iframe is used to display a web page within a web page.
Syntax:
I. <iframe src="URL"></iframe>
></iframe>
EXAMPLES:
II. <iframe src="demo_iframe.html"
"demo_iframe.html" width="200px" height="200px"></iframe>
></iframe>
III<iframe src="http://www.javatpoint.com"
"http://www.javatpoint.com" name="iframe_a"></iframe>
></iframe>

24)) What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can
also replace characters that are not present on your keyboard by entities. These characters are
replaced
eplaced because some characters are reserved in HTML.

25)) Why is a URL encoded in HTML?

An URL is encoded to convert non non-ASCII
ASCII characters into a format that can be used over the
Internet because a URL is sent over the Internet by using the ASCII character-set
character only. If a URL
contains characters outside the ASCII set, the URL has to be converted. The non-ASCII
non characters
are replaced with a "%" followed by hexadecimal digits.

26)) Does a <!DOCTYPE html> tag is a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g.
HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML
1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to
instruct the web browser about th
the HTML page.