MAHARAJA SURAJMAL INSTITUTE
C-4, JanakPuri, New Delhi, 110058
DEPARTMENT OF COMPUTER APPLICATION
PRACTICAL II IT LAB
SUBJECT CODE-BCA-173
Submitted by:
Submitted to:
Name: BHUMIKA ARORA
Ernrollment No.: - 01414902022
Assistant Professor
Ravinder S Kajal
MSI
Course: BCA-I-B
(Shift 1)
Year-2022-23
INDEX
S. No
Topics
Page
0.
Overview of HTML, CSS, BootStrap, JavaScript, XML
4
1.
Make the following five different web pages:
1. Formatting styles and headings: Include bold, italics, underline, strike,
subscript, superscript and all six types of headings.
2. Font styles and image tag
3. Marquee: Move text, image and hyperlink
4. Other tags: br, hr. pre, p
Include following specifications:
• In all these web pages only mention about use, attributes apply them
• Insert a background image on home page
• Make all the topics as hyperlinks and go to some other page for description
• Insert a marquee showing HTML Tutorial as moving text.
• Use different font style for different topics.
• On every page, make a hyperlink for going back to home page and internal
link also.
8
2.
Create an unordered list nested inside ordered list and apply the following:
• Insert an image of main item on top right corner of web page.
• Display heading as a marquee.
• Use different font styles and colors for different ordered list items.
• Insert horizontal line after each ordered item.
14
3.
Design a table with row span and column span and make use of attributes colspan,
rowspan, width, height, cellpadding, cellspacing, etc.
16
4.
Design following frames:
18
5.
MAIN MENU
Explanation
.........
.........
View Example
Topic 1
Topic 2
Topic 3
Example
Create a student registration form for admission in college.
Sign
24
2
6.
Create a webpage and show the usage of inline, internal, and external stylesheet.
27
7.
Create a webpage containing a background image and apply all the background styling
attributes.
29
8.
Create a webpage showing the usage of font styling attributes.
30
9.
Create a webpage and apply all text styling attributes, using ID and class selector.
33
10.
Create a webpage with three equal columns
34
11.
Create a webpage containing bootstrap table
36
12.
Create a webpage containing various types of images.
38
13.
Create a webpage containing various types of buttons
40
14.
Create a webpage containing various typography classes.
42
15.
Write a program to show the usage of alert box and confirm box.
47
16.
Write a program to show the usage of all the date, math and string object functions.
49
17.
WAP to display the bookstore details in XML with CSS and internal DTD.
50
18.
WAP to format the Teacher details in XML with CSS using external DTD.
52
3
OVERVIEW
HTML-CSS Overview
HTML (Hypertext Mark-up Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web
pages. HTML provides the structure of the page, CSS the (visual and structural) layout, for a variety of devices. Along with
graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications.
What is HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for information, making
reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
Structure of an HTML document:
What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt
the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of
HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to
maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the
separation of structure (or: content) from presentation.
4
Structure of a CSS document:
JavaScript Overview
What is JavaScript?
JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web
pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement
being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
•
JavaScript is a lightweight, interpreted programming language.
•
Designed for creating network-centric applications.
•
Complementary to and integrated with Java.
•
Complementary to and integrated with HTML.
•
Open and cross-platform
Advantages of JavaScript
The merits of using JavaScript are −
•
Less server interaction − You can validate user input before sending the page off to the server. This saves
server traffic, which means less load on your server.
•
Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to
enter something.
•
Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or
activates them via the keyboard.
•
Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to
give a Rich Interface to your site visitors.
5
Limitations of JavaScript
•
We cannot treat JavaScript as a full-fledged programming language. It lacks the following important features −
•
Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
•
JavaScript cannot be used for networking applications because there is no such support available.
•
JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into
otherwise static HTML pages.
Bootstrap Overview
What is Bootstrap?
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most
popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems
which we had once, one of which is the cross-browser compatibility issue. Nowadays, the websites are perfect for all the
browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). All thanks to
Bootstrap developers -Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source
project.
Why Bootstrap?
• Faster and Easier Web Development.
• It creates Platform-independent web pages.
• It creates Responsive Web-pages.
• It is designed to be responsive to mobile devices too.
• It is Open-Source! Available on www.getbootstrap.com
How to use Bootstrap 4 on a webpage?
There are two ways to include Bootstrap on the website.
• Include Bootstrap from the CDN link.
• Download Bootstrap from getbootstrap.com and use it.
Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They provide additional user
interface elements such as dialog boxes, tooltips, and carousels. Each Bootstrap component consists of an HTML structure,
CSS declarations, and in some cases accompanying JavaScript code. They also extend the functionality of some existing
interface elements, including for example an auto-complete function for input fields.
XML Overview
XML is a software- and hardware-independent tool for storing and transporting data. The design goals of XML emphasize
simplicity, generality, and usability across the Internet. It is a textual data format with strong support via Unicode for
6
different human languages. Although the design of XML focuses on documents, the language is widely used for the
representation of arbitrary data structures such as those used in web services.
What is XML?
• XML stands for eXtensible Mark-up Language
• XML is a mark-up language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
7
Ques 1 Make the following five different web pages:
1. Formatting styles and headings: Include bold, italics, underline, strike, subscript, superscript and all six types of
headings.
2. Font styles and image tag
3. Marquee: Move text, image and hyperlink
4. Other tags: br, hr. pre, p
Include following specifications:
• In all these web pages only mention about use, attributes apply them
• Insert a background image on home page
• Make all the topics as hyperlinks and go to some other page for description
• Insert a marquee showing HTML Tutorial as moving text.
• Use different font style for different topics.
• On every page, make a hyperlink for going back to home page and internal link also.
<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome to India</h1>
<p> This is text with a ^SUPERSCRIPT </p>
<p> This is text with a _SUBSCRIPT </p>
<h2>Culture</h2>
<p>India is home to a diverse range of cultures, languages, and religions. The
country has a long and vibrant cultural heritage, with a wide variety of art,
music, and dance styles. Some of the most famous cultural attractions in India
include the Taj Mahal, the Golden Temple, and the Hawa Mahal.</p>
<h3>Cuisine</h3>
<p>Indian cuisine is known for its flavorful and aromatic dishes, made with a
variety of spices and herbs. Some popular Indian dishes include <i>chicken tikka
masala</i>, <b>biryani</b>, and <u>samosas</u>. Indian food can be enjoyed in
restaurants or made at home using traditional recipes.</p>
<h4>Tourism</h4>
<p>India is a popular destination for tourists, with many world famous landmarks
and attractions. From the beaches of Goa to the Himalayan Mountain ranges, there
is something for everyone in India. Tourists can also experience the country's
rich history and culture by visiting its many temples, forts, and palaces.</p>
<h5>Sports</h5>
<p>Cricket is the most popular sport in India, followed by field hockey and
soccer. The country has a strong cricket team and has won the Cricket World Cup
twice. Other popular sports in India include kabaddi, badminton, and tennis.</p>
<H2><U>FONT TAG</U></H2>
<font face="arial" color="red" size="20">ARIAL</font><br>
<font face="New times roman" color="#L1b2cZ" size="30">NEW TIMES ROMAN</font><br>
<font face="courier new" color="#1a23cv" size="32">COURIER NEW</font><br>
<font face="impact" color="pink" size="19">IMPACT</font>
<!IMAGE TAG-->
<br><br>
<h2><U>IMAGE TAG</U></H1>
<img src="C:\Users\Lenovo\Desktop\images (1).jpg" alt="image tag" width=200
height=200 align="left"><image src="C:\Users\Lenovo\Desktop\images.jpg" alt="html"
width 200 height=200>
<h6>Famous Personalities</h6>
8
<p>India has produced many notable figures in various fields, including Mahatma
Gandhi, who led the country's non-violent resistance movement against British
rule, and Rabindranath Tagore, who was the first non-European to win the Nobel
Prize in Literature. Other famous personalities from India include tech mogul
Sundar Pichai, actor Priyanka Chopra, and cricketer Sachin Tendulkar.</p>
<a href="#top">Back to top</a> | <a href="#bottom">Go to bottom</a>
<br>
<hr>
<h2>Marquee</h2>
<marquee>India is a land of diversity and beauty, with a rich history and
culture that is enjoyed by people all around the world.</marquee>
<h2>Links</h2>
<p>Here are some useful links about India:</p>
<ul>
<li><a href="https://www.incredibleindia.org/" target="_blank">Incredible
India - Official website of the Ministry of Tourism</a></li>
<li><a href="https://www.geeksforgeeks.org/html/"
target=_parent>GeeksforGeeks-HTML</a>
</body>
</html>
9
10
Question 2.
Create an unordered list nested inside ordered list and apply the following:
• Insert an image of main item on top right corner of web page.
• Display heading as a marquee.
• Use different font styles and colors for different ordered list items.
• Insert horizontal line after each ordered item.
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body bgcolor="lavender">
<h1><marquee>Welcome to Our Restaurant</marquee></h1>
<img src="C:\Users\Lenovo\Desktop\food-image.jpg" alt="food"
style="float: right; width: 300px; height: 300px;">
<h2>North Indian</h2>
<ol>
<li style="color: green; font-size: 24px;"><u>Dal Makhni</u> 200rs</li>
<li style="color: green; font-size: 24px;"><u><b>Paneer</b></u> 250rs</li>
<li style="color: green; font-size: 24px;"><u><i>Tandoori Roti</i></u>
- 10rs</li>
</ol>
<hr>
<h2>Chinese</h2>
<ol>
<li style="color: orange; font-size: 24px;"><u>Hakka Noodles</u> 200rs</li>
<li style="color: orange; font-size: 24px;"><u>Chilli potato</u> 200rs</li>
<li style="color: orange; font-size: 24px;"><u>spring rolls</u> 200rs</li>
</ol>
<hr>
<h2>Italian</h2>
<ol>
<li style="color: blue; font-size: 24px;"><u>Pizza</u> - 230rs</li>
<li style="color: blue; font-size: 24px;"><u>Mushroom Risotto.</u> 100rs</li>
<li style="color: blue; font-size: 24px;"><u>Caprese Salad with Pesto
Sauce</u> - 200rs</li>
</ol>
</body>
</html>
11
12
Question 3.
Design a table with row span and column span and make use of attributes colspan, rowspan, width, height, cellpadding,
cellspacing, etc.
<html>
<head>
<title> table </title>
</head>
<body>
<table border=5 cellpadding=10 width=100%>
<caption> BCA 1-B(104)</caption>
<tr bgcolor="lavender">
<th></th>
<th>08AM-09AM</th>
<th>09AM-10AM</th>
<th>10AM-11AM</th>
<th>11AM-12PM</th>
<th>12PM-12:30PM</th>
<th>12:30PM-1:30PM</th>
<th>1:30PM-2:30PM</th>
</tr>
<tr>
<td bgcolor="lightblue">Monday</td>
<td colspan="2" align=center>WT/ICIT 1B LAB 1&4</td>
<td>ICIT</td>
<td> MATHS-1</td>
<td rowspan="7" align="center"><h2>L<br>U<br>N<br>C<br>H</h2></td>
<td>C prog</td>
<td>WT</td>
<tr>
<td bgcolor="lightblue">Tuesday</td>
<td>WT</td>
<td>Tech Comm</td>
<td colspan="2" align=center>WT/ICIT 1B LAB 1&4</td>
<td>MATHS-1</td>
<td>C Prog</td>
</tr>
<tr>
<td bgcolor="lightblue">Wednesday</td>
<td>ICIT</td>
<td>Tech Comm</td>
<td colspan="2" align=center>WT/ICIT 1B LAB 1&4</td>
<td>C Prog</td>
<td>MATHS-1</td>
</tr>
<tr>
<td bgcolor="lightblue">Thursday</td>
<td>Tech Comm</td>
<td>WT</td>
<td colspan="2" align=center>C 1B LAB 1&4</td>
<td>ICIT</td>
<td>BRIDGE M-1</td>
13
</tr>
<tr>
<td bgcolor="lightblue">Friday</td>
<td colspan="2" align=center>WT/ICIT 1B LAB 1&4</td>
<td>WT</td>
<td>MATHS-1</td>
<td colspan="2" align=center>C 1B LAB 1&4</td>
</tr>
<tr>
<td bgcolor="lightblue">Saturday</td>
<td>Tech Comm</td>
<td>C Prog</td>
<td>ICIT</td>
<td>BRIDGE M-1</td>
</tr>
</body>
</html>
14
Question 4.
Design the following frames:
MAIN MENU
Explanation
.........
.........
View Example
Topic 1
Topic 2
Topic 3
Example
HTML files:
webpage.html
<!DOCTYPE html>
<html>
<head>
<title> Frames </title>
<frameset cols="30%, 70%">
<frame src="list.html"/>
<frame name="content"/>
</frameset>
</head>
</html>
list.html
<!DOCTYPE html>
<html>
<head>
<title> List of links </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="greenbg">
<h1> MAIN MENU </h1>
<ul>
<li><a href="item1.html" target="content"> Nouns </a></li>
<li> <a href="item2.html" target="content"> Pronouns </a></li>
<li> <a href="item3.html" target="content"> Adjectives </a></li>
<li> <a href="item4.html" target="content"> Verbs </a></li>
</ul>
</body>
</html>
item1.html
<!DOCTYPE html>
<html>
<head>
<title> Nouns </title>
<frameset rows="50%, 50%">
<frame src="nouns.html"/>
<frame name="example"/>
15
</frameset>
</head>
</html>
item2.html
<!DOCTYPE html>
<html>
<head>
<title> Pronouns </title>
<frameset rows="50%, 50%">
<frame src="pronouns.html"/>
<frame name="example"/>
</frameset>
</head>
</html>
item3.html
<!DOCTYPE html>
<html>
<head>
<title> Adjectives </title>
<frameset rows="50%, 50%">
<frame src="adjectives.html"/>
<frame name="example"/>
</frameset>
</head>
</html>
item4.html
<html>
<head>
<title> Verbs </title>
<frameset rows="50%, 50%">
<frame src="verbs.html"/>
<frame name="example"/>
</frameset>
</head>
</html>
nouns.html
<!DOCTYPE html>
<html>
<head>
<title> Nouns </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="yellowbg">
<h1> NOUNS </h1>
<p> Nouns are words that describe animals, ideas, people, places and
objects. Nouns are sometimes called thing-words because they describe things. A
16
noun can be the subject or object of a sentence. They are often used with an
article or a determiner and sometimes they are replaced by pronouns. </p>
<p> There are many different types of nouns in English grammar such as
countable and uncountable nouns, common and proper nouns, abstract or concrete
nouns and collective nouns. Nouns in English grammar also have different forms i.e.
singular nouns, plural nouns, possessive nouns or the gerund.</p>
<a href="noun_example.html" target="example"> View example </a>
</body>
</html>
noun_example.html
<!DOCTYPE html>
<html>
<head>
<title> Nouns </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bluebg">
<h2> EXAMPLES </h2>
<p> Thee underlined words in each of the given sentences are nouns:</p>
<ul>
<li>My <u>dog</u> loves treats. </li>
<li><u>Love</u> is all you need. </li>
<li> I have never met that <u>woman.</u> </li>
<li> Which <u>restaurant</u> did you go to? </li>
<li> The <u>book</u> will be released in <u>May.</u> (object) </li>
</ul>
</body>
</html>
pronouns.html
<!DOCTYPE html>
<html>
<head>
<title> Pronouns </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="yellowbg">
<h1> PRONOUNS </h1>
<p>Pronouns are words that replace nouns. There are six different kinds of
pronouns in English Grammar: personal pronouns, possessive pronouns, reflexive
pronouns, relative pronouns, demonstrative pronouns and indefinite pronouns. The
pronouns we use depends on the role it plays in a sentence.</p>
<a href="pronouns_example.html" target="example"> View examples </a>
</body>
</html>
pronouns_example.html
<!DOCTYPE html>
<html>
17
<head>
<title> Pronouns </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bluebg">
<h1> EXAMPLES </h1>
<p> The underlined words in each of the given sentences are examples of
pronouns:</p>
<ul>
<li> <u>He</u> is a good cricketer.</li>
<li> The teacher praised <u>her</u> for topping in the exam.</li>
<li> The people exchanged gifts amongst <u>themselves.</u></li>
</ul>
</body>
</html>
adjectives.html
<!DOCTYPE html>
<html>
<head>
<title> Adjectives </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="yellowbg">
<h1> ADJECTIVES </h1>
<p> Adjectives are descriptive words that are used to modify a noun or a
pronoun. They make written and spoken English more precise and descriptive.
Adjectives in English grammar are used to describe people, places, animals and
things. We can use them to describe feelings; qualities and characteristics;
nationality and origin; age; size and measurement; colour, material and shape; and
judgment or value. </p>
<a href="adjectives_example.html" target="example"> View examples </a>
</body>
</html>
adjectives_example.html
<!DOCTYPE html>
<html>
<head>
<title> Adjectives examples </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bluebg">
<h1> EXAMPLES </h1>
<p>The underlined words in the following sentences are examples of
adjectives:</p>
<ul>
<li> The car is <u>red.</u></li>
<li> The dog is <u>happy.</u></li>
<li> The blade is <u>sharp.</u></li>
18
</ul>
</body>
</html>
verbs.html
<!DOCTYPE html>
<html>
<head>
<title>Verbs</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="yellowbg">
<h1> VERBS</h1>
<p> Verbs are doing or action words because they describe what the subject
(noun or pronoun) of a sentence is doing. As well as describing a physical action,
verbs can also describe a concept, mental state or state of being. Some typical
action verbs include run, dance, jump, sing, write, read etc. Some typical stative
verbs include be, believe, hate, have, know, love, think etc. </p>
<a href="verbs_example.html" target="example"> View examples </a>
</body>
</html>
verbs_example.html
<!DOCTYPE html>
<html>
<head>
<title> Verb examples </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bluebg">
<h1> EXAMPLES </h1>
<p> Each of the underlined words in the following sentences is an example
of verb: </p>
<ul>
<li> We <u>ran</u> to the train station.</li>
<li> I <u>am</u> happy.</li>
<li> She is <u>playing</u> with her cat.</li>
</ul>
</body>
</html>
CSS File:
body {
font-family: sans-serif;
fontsize: 18pt;
}
.bluebg {
background-color: powderblue;
19
}
.yellowbg {
background-color: palegoldenrod;
}
.greenbg {
background-color: palegreen;
}
Output:
20
Question 5.
Create a student registration form for admission in college.
<html>
<head>
<title> registration form</title>
<h1> STUDENT REGISTERATION FORM</h1>
</head>
<body bgcolor="lightblue">
<form method="get">
<b>Firstname:<input type="text" size=10 maxlength=20 name="name">
<br/></b>
<b>Lastname:<input type="text" size=10 maxlength=20 name="name">
<br/></b><br/>
<b>Date of Birth:<input type="date"></b>
<p><b> Applying for: </b></p>
<select>
<option value="select an option">select an option</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
<option value="BCOM">BCOM</option>
<option value="BTECH">BTECH</option>
</select>
<p><b> Gender </b></p>
<input type="radio" name="male">Male<br/>
<input type="radio" name="male">Female<br/>
<input type="radio" name="male">Other<br/><br/>
<b>Phone:<input type="text" size=2 value="+91" name="country code"></b>
<input type="text" size=10 name="phone"><br/><br/>
<b>Address:<textarea cols=80 rows=5 name="address" placeholder="Enter
Address"></textarea><br/><br/></b>
<b>Email:<input type="email" id="email" name="email"><br/><br/></b>
<b>Father's name:<input type="text" size=10 maxlength=20 name="father's name">
<br/></b>
<b>Mother's name:<input type="text" size=10 maxlength=20 name="mother's name">
<br/></b>
<b>Password:<input type="password" size=10 maxlength=20 name="password"></b>
<input type="submit" value="send">
<p><b> Please make sure you have the following documents </b></p>
<input type="checkbox" name="Birth certficate">Birth certificate:<br/>
<input type="checkbox" name="10th pass certificate">10th pass certificate<br/>
<input type="checkbox" name="12th pass certificate">12th pass certificate<br/>
<input type="checkbox" name="Migration certficate">Migration certificate:<br/>
<input type="checkbox" name="Caste certficate">Caste certificate(if
applicable):<br/><br/>
<b>Qualifications</b><br/>
10th pass percentage<input type="number" min=0><br/>
12th pass percentage<input type="number" min=0><br/><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit Form</button>
</form>
21
</body>
</html>
22
Question 6.
Create a web page and show the usage of inline, internal, and external stylesheets.
HTML file:
<!DOCTYPE html>
<html>
<head>
<style>
.divstyleinternal {
background-color: rgb(168, 168, 255);
text-align: center;
}
.pstyleinternal {
font-size: 20pt;
fontfamily: cursive;
}
</style>
<title> CSS demo </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Inline CSS </h1>
<div style="background-color: rgb(255, 176, 176); text-align: right;">
&nbsp;<br>
<p style="font-size: 18pt; font-family: sans-serif;"> This is styled
using <b>inline</b> CSS.</p>
&nbsp;
</div>
<br><br>
<h1> Internal CSS </h1>
<div class="divstyleinternal">
&nbsp;<br>
<p class="pstyleinternal"> This is styled using <b>internal</b>
CSS.</p>
&nbsp;
</div>
<h1> External CSS </h1>
<div class="divstyleexternal">
&nbsp;<br>
<p class="pstyleexternal"> This is styled using <b>external</b>
CSS.</p>
&nbsp;
</div>
</body>
</html>
CSS File:
.divstyleexternal {
background-color: rgb(177, 241, 205);
text-align: left;
}
23
.pstyleexternal {
fontsize: 22pt;
fontfamily: fantasy; }
24
Question 7.
Create a webpage containing a background image and apply all the background styling attributes.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Background Image </title>
<style>
body {
background-image: url('img.jpg');
background-repeat: no-repeat;
backgroundsize: cover;
background-attachment: fixed;
}
</style>
</head>
</html>
Output:
25
Question 8.
Create a webpage showing the usage of font styling attributes.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Font-styling properties </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bluebg">
<h1> CSS font-size property</h1>
<p> Using CSS, we can change text size, for example:</p>
<p class="smalltext"> This is small text.</p>
<p> This is medium text. </p>
<p class="bigtext"> This is big text. </p>
<hr>
<h1> CSS font-family property </h1>
<p> Using CSS we can change font family. For example:</p>
<p class="seriffont"> This is the serif font family. </p>
<p class="sansseriffont"> This is the sans serif font family. </p>
<p class="monofont"> This is the monospace font family. </p>
<p class="fantasyfont"> This is the fantasy font family. </p>
<p class="cursivefont"> This is the cursive font family. </p>
<hr>
<h1> CSS font-style property</h1>
<p> Using CSS font-style property we can change the font to appear
italicized or normal. For example:</p>
<p class="italicfont"> This is italic text using CSS. </p>
<hr>
<h1> CSS font-weight property</h1>
<p> Using CSS font-weight property we can change the font characters to
appear thicker or thinner. For example:</p>
<p class="thinfont"> This is thin text. </p>
<p> This is normal text. </p>
<p class="thickfont"> This is thicker text. </p>
<hr>
<h1>CSS Text transform property</h1>
<p> This is used to change the case of the text and the spacing between
the characters. For example: </p>
<p> This is normal text.</p>
<p class="upper"> This is uppercase text using CSS. </p>
<p class="lower">This is lowercase text using CSS. </p>
<p class="capital"> This is capitalized text using CSS.</p>
<p class="fixedwidth"> This is fixed width text using CSS.</p>
<hr>
<h1> CSS text-decoration property</h1>
<p> This CSS property is used to give decorations to the text such as a
strikethrough, underline, and overline. For example: </p>
<p> This is normal text</p>
<p class="overline"> This is text with an overline using CSS. </p>
26
<p class="strikethrough"> This is text with strikethrough using
CSS.</p>
<p class="underline"> This is text with an underline using CSS.</p>
</div>
</body>
</html>
CSS file:
body {
font-size: 16px;
fontfamily: sans-serif;
marginleft: 20%;
margin-right:
20%;
} div.bluebg
{
background-color: powderblue;
padding: 10px 20px;
}
.bigtext {
font-size: 26px;
}
.smalltext {
fontsize: 11px;
}
.seriffont {
font-family: serif;
}
.sansseriffont {
font-family: sans-serif;
}
.monofont {
font-family: monospace;
}
.fantasyfont {
font-family: fantasy;
}
.cursivefont {
font-family: cursive;
}
.italicfont {
fontstyle:italic;
}
.thinfont {
font-weight: lighter;
}
.thickfont {
font-weight: bold;
}
.upper {
text-transform: uppercase;
}
.lower {
text-transform: lowercase;
27
}
.capital {
text-transform: capitalize;
}
.fixedwidth {
text-transform: full-width;
}
.underline {
textdecoration: underline;
}
.overline {
textdecoration: overline;
}
.strikethrough {
textdecoration: line-through;
}
28
Question 9.
Create a web page and apply all text styling attributes using ID and class selector.
<html>
<head>
<style>
/* ID selector */
#main-heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
#fantasyheading {
font-family: fantasy;
font-style: italic;
}
/* class selector */
.info {
font-size: 16px;
font-style: italic;
color: green;
}
.deleted {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="main-heading">Welcome to my page</h1>
<h1 id="fantasyheading"> CSS font styling with id and classes</h1>
<p class="info deleted">This page is all about me and my interests.</p>
<p class="info">I love to play soccer and watch movies in my free time.</p>
</body>
</html>
Output:
29
Question 10.
Create a webpage with three equal columns
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> 3 Equal Columns </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="center"> THREE EQUAL COLUMNS </h1>
<div class="row">
<div class="col1 column">
<h1> COLUMN ONE</h1>
</div>
<div class="col2 column">
<h1> COLUMN TWO </h1>
</div>
<div class="col3 column">
<h1> COLUMN THREE </h1>
</div>
</div>
</body>
</html>
CSS file:
div {
color: white;
text-align: center;
} html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.col1 {
background-color: red;
}
.col2 {
background-color: green;
}
.col3 {
background-color: blue;
}
.row{
width:
100%;
}
.column {
width: 33.33%;
height: 100%;
float: left;
30
}
.center {
textalign: center;
}
Question 11.
Create a webpage containing bootstrap table.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap table </title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha3841BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>S.No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Department</th>
</tr>
</thead>
31
<tbody>
<tr>
<th>1</th>
<td>Akash</td>
<td>Gupta</td>
<td>27</td>
<td>Finance</td>
</tr>
<tr>
<th>2</th>
<td>Sumit</td>
<td>Sharma</td>
<td>34</td>
<td>Sales</td>
</tr>
<tr>
<th>3</th>
<td>Zain</td>
<td>Hussain</td>
<td>23</td>
<td>IT</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
32
Question 12.
Create a webpage containing various types of images.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Image Gallery </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Image Gallery </h1>
<img class="img1" src="img1.jpg">
<img class="img2" src="img2.jpg">
<img class="img3" src="img3.png">
<img class="img4" src="img4.png">
</body>
</html>
CSS file:
img {
margin:
10px;
} h1
{
text-align: center;
}
.img1 {
float: left;
}
.img2 {
float: right;
}
.img3 {
height: 500px;
}
.img4 {
height: 400px;
border: 10px solid black;
border-radius: 150px;
}
Output:
33
34
Question 13.
Create a webpage containing various types of buttons
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Button types </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> HTML buttons </h1>
<p> Default button: <button type="button"> Click me!</button> <br> </p>
<p> CSS styled button: <button class="cssbutton"> Red </button></p>
<form method="get">
<p> Radio buttons:
<input type="radio" name="language" id="html">
<label for="html"> HTML </label>
<input type="radio" name="language" id="css">
<label for="css"> CSS </label>
<input type="radio" name="language" id="javascript">
<label for="javascript"> JavaScript </label> </p>
<p> Submit button:
<input type="submit" value="Submit">
</p>
<p>
Reset form button:
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
CSS file:
body {
font-size: 16px;
}
.cssbutton {
padding:
10px 20px;
cursor:
pointer;
color: white;
margin: 2px 5px;
background-color: red;
border: none; }
.cssbutton:hover {
background-color: rgb(252, 177, 177);
}
Output:
35
36
Question 14.
Create a webpage containing various typography classes.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Typography classes </title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha3841BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
div.headerbar{
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container-fluid bg-primary headerbar">
<h1 class="display-2 text-white text-center"> Typography classes in
bootstrap</h1>
</div>
<h1> Headings </h1>
<h1>h1. Bootstrap heading 1</h1>
<h2>h2. Bootstrap heading 2</h2>
<h3>h3. Bootstrap heading 3</h3>
<h4>h4. Bootstrap heading 4</h4>
<h5>h5. Bootstrap heading 5</h5>
<h6>h6. Bootstrap heading 6</h6>
<h3> Heading level three <small class="text-muted"> With muted secondary
text.</small></h3>
<hr>
<h1> Display headings </h1>
<h1 class="display-1"> Display heading 1</h1>
<h1 class="display-2"> Display heading 2</h1>
<h1 class="display-3"> Display heading 3</h1>
<h1 class="display-4"> Display heading 4</h1>
<hr>
<h1>Color</h1>
<p class="text-primary">This is primary text.</p>
<p class="text-secondary">This is secondary text.</p>
<p class="text-success">This text denotes success.</p>
<p class="text-danger">This text signals danger.</p>
<p class="text-warning">This text conveys a warning.</p>
<p class="text-info">This text conveys information.</p>
<p class="text-muted">This is muted text.</p>
<hr>
<h1>Background colors</h1>
<p class="bg-primary text-white">This is primary background.</p>
<p class="bg-secondary text-white">This is secondary background.</p>
37
<p class="bg-success text-white">This background denotes success.</p>
<p class="bg-danger text-white">This background signals danger.</p>
<p class="bg-warning">This background conveys a warning.</p>
<p class="bg-info">This background conveys information.</p>
<hr>
<h1> Lead paragraph </h1>
<p class="lead"> This is a paragraph with the lead class.</p>
<p> This is a regular paragraph.</p>
<hr>
<h1>Inline text elements </h1>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer
accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the
document.</ins></p>
<p><b>This line of text will be rendered as bold.</b></p>
<p><i>This line of text will be rendered as italic.</i></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine
print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<hr>
<h1> Abbreviations </h1>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language"
class="initialism">HTML</abbr></p>
<hr>
<h1> Blockquote </h1>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
</blockquote>
<h1> Blockquote with source </h1>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source
Title">Source Title</cite></footer>
</blockquote>
<hr>
<h1>Lists</h1>
<h3>Styled list</h3>
<ul class="list-styled">
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</li>
<li>Item 3
38
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ul>
<h3> Unstyled list</h3>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</li>
<li>Item 3
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ul>
<h3> Inline list </h3>
<ul class="list-inline">
<li class="list-inline-item"> Item one </li>
<li class="list-inline-item"> Item two </li>
<li class="list-inline-item"> Item three </li>
</ul>
<h3> Definition lists</h3>
<dl>
<dt>Apple</dt>
<dd>the round fruit of a tree of the rose family, which typically has
thin green or red skin and crisp flesh.</dd>
<dt>Watermelon</dt>
<dd> A large, round fruit with a thick, green skin. It is pink or red
inside with a lot of black seeds. </dd>
</dl>
<h3>Definition lists using grid system</h3>
<dl class="row">
<dt class="col-sm-3">Apple</dt>
<dd class="col-sm-9"> the round fruit of a tree of the rose family,
which typically has thin green or red skin and crisp flesh.</dd>
<dt class="col-sm-3">Watermelon</dt>
<dd class="col-sm-9"> A large, round fruit with a thick, green skin. It
is pink or red inside with a lot of black seeds. </dd>
</dl>
</body>
</html>
Output:
39
40
41
Question 15.
Write a program to show the usage of alert box and confirm box.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Confirm box and alert box</title>
</head>
<body>
<script>
function alertBox() {
alert("This is an alert box.");
}
function confirmBox() {
var choice = confirm("This is a confirm box.");
var text;
if (choice) {
text="OK button";
} else {
text="Cancel button";
}
document.getElementById("confirm").innerHTML = text;
}
</script>
<h1>Confirm box</h1>
<p> Click the given button to demonstrate usage of confirm box.</p>
<button onclick="confirmBox()"> Confirm box button. </button>
<p>You selected : <span id="confirm">None</span></p>
<h1>Alert box</h1>
<p>Click the given button to demonstrate usage of alert box.</p>
<button onclick="alertBox()"> Alert box button. </button>
</body>
</html>
Confirm box:
42
Text change after clicking OK in confirm box:
Alert box:
43
Question 16.
Write a program to show the usage of all the date, math and string object functions.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title> Javascript object demonstration </title>
</head>
<script>
var date = new Date(); // Displays the current date
var day = date.getDate();
var month =
date.getMonth();
var year = date.getFullYear();
document.write("<br>Today's date is: "+day+"/"+month+"/"+year);
var input = (prompt("Enter a number to find its square root: "));
number = Math.sqrt(input);
document.write("<br>The square root of the number entered by you
("+input+") is: "+number+"<br>");
document.write("<br>Math.pw(x,y) returns the result of x raised to the
power of y. For example:");
document.write("<br>2 raised to the power of 8 gives: ");
document.write(Math.pow(2,8));
document.write("<br><br>This is a string. It is a sequence of characters
that forms a sentence.");
var str = new String("This is a string. It is a sequence of characters that
forms a sentence.");
document.write("<br>Length of above string is: "+str.length);
var slicedstr = str.slice(5, -5);
document.write("<br><br>"+slicedstr);
document.write("<br>"+str.toUpperCase());
document.write("<br>"+str.italics());
</script>
<body>
<p></p>
</body>
</html>
Output:
44
Question 17.
WAP to display the bookstore details in XML with CSS and internal DTD.
XML file:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE books [
<!ELEMENT heading (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<books>
<heading>Welcome To Book Wonderland! </heading>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<edition>Edition -: 3</edition>
<price>Price -: 400</price>
</book>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 700</price>
</book>
<book>
<title>Title -: DBMS Concepts</title>
<author>Author -: Navath</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 600</price>
</book>
<book>
<title>Title -: Linux Programming</title>
<author>Author -: Subhitab Das</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 8</edition>
<price>Price -: 300</price>
</book>
</books>
45
CSS file:
title, author, publisher, edition, price {
display: block;
font-size: 20px;
background-color: rgb(255, 255, 164);
} heading {
font-size: 30px;
background-color: palegreen;
display:block;
padding: 20px
0px;
} title {
fontsize: 25px;
color:
black;
padding:
10px 0px;
} author {
font-size:
23px;
color:rgb(37,
37, 37);
} publisher,edition, price
{
color: rgb(58, 58,
58); }
Output:
46
Question 18.
WAP to format the Teacher details in XML with CSS using external DTD.
DTD file:
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
heading (#PCDATA)>
name (#PCDATA)>
position (#PCDATA)>
course (#PCDATA)>
age (#PCDATA)>
salary (#PCDATA)>
XML file:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE teacherdetails SYSTEM "teacherdetails.dtd">
<teacherdetails>
<heading> Name, position, course, age, salary of teachers</heading>
<teacher>
<name> Ankush Sharma </name>
<position> Assistant professor </position>
<course> BBA </course>
<age> 33 </age>
<salary> Rs. 20,000 </salary>
</teacher>
<teacher>
<name> Tanmay Ahuja </name>
<position>Senior professor </position>
<course> BCA </course>
<age> 65 </age>
<salary> Rs. 30,000 </salary>
</teacher>
<teacher>
<name> Akshita Puri </name>
<position> Assistant professor </position>
<course> B.Ed </course>
<age> 27 </age>
<salary> Rs. 23,000 </salary>
</teacher>
<teacher>
<name> Supriya Choudhary </name>
<position> Associate professor </position>
<course> B.Ed </course>
<age> 35 </age>
<salary> Rs. 30,000 </salary>
</teacher>
<teacher>
<name> Monika Tushir </name>
<position> Associate professor </position>
<course> BBA </course>
47
<age> 29 </age>
<salary> Rs. 35,000 </salary>
</teacher>
CSS file:
heading, name, position, course, age, salary {
display:block;
} heading {
font-size: 30px;
} name {
font-size: 24px;
padding: 20px 0px 0px 0px;
}
position, course, age, salary {
font-size: 20px; }
Output:
48