Scribd
Upload
61 views40 pages

Jatin (WT)

The document contains instructions for creating 21 web pages covering different HTML tags and concepts. It includes creating pages on formatting styles, font styles, images, marquee, links, lists, tables, forms, style sheets, and more. For each topic, the student is asked to include relevant tag attributes and link pages internally and to a home page. It provides a breakdown of the topics to be covered in an assignment to demonstrate proficiency with HTML elements.

Uploaded by

bhavyakumargarg611
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views40 pages

Jatin (WT)

The document contains instructions for creating 21 web pages covering different HTML tags and concepts. It includes creating pages on formatting styles, font styles, images, marquee, links, lists, tables, forms, style sheets, and more. For each topic, the student is asked to include relevant tag attributes and link pages internally and to a home page. It provides a breakdown of the topics to be covered in an assignment to demonstrate proficiency with HTML elements.

Uploaded by

bhavyakumargarg611
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Jatin sharma(01816702023) BCA 1ST SEM

Guru Gobind Singh Indraprastha University


Sector -16 C, Dwarka, Delhi, India

WEB TECHNOLOGY
BCA-175
By
Name:
Enrolment No:

Under the guidance:


MS. TANIYA DABAS

Sirifort Institute of Management Studies


Plot No.8, Institutional Area Rohini Sector-25, New Delhi
110085

1
Jatin sharma(01816702023) BCA 1ST SEM

INDEX
S.NO TOPIC DATE SIGN.
1 Make following five diferent web pages:
i. Formating Styles and Headings: Include Bold,
italics, Underline, Strike, Subscript, superscript and all
six type of headings
ii. Font Styles and Image tag
iii. Marquee: Move text, image and hyperlink
iv. Other tags: br hr, pre, p
Include following specifications:
:- In all these web pages only mention about us,
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 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 ink also.
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.
3 Design a table with row span and column span and
make use of attributes colspan, rowspan, width, height,
cellpadding, cellspacing etc.
4 Make an image map showing the usage of shape,
coords, href attributes in map definition. Link each
hotspot to their respective details. All the web pages
should be designed with proper background color,
images, font styles and headings.
5 Design Student registration form for admission in
college.
6 Create a webpage and show the usage of inline and
internal style sheet and external style sheet
7 Create a webpage containing a background image and
apply all the background styling attributes.
8 Create a web page showing the usage of font styling
attributes
9 Create a webpage and apply all Text styling attributes
using Id and class selector.

2
Jatin sharma(01816702023) BCA 1ST SEM

10 Create a webpage and implement all list styling


attributes.
11 Create a Webpage with three equal columns.
12 Create a Webpage containing various types of buttons.

13 Create a webpage containing bootstrap table.


14 Create a webpage containing various, typography
classes.
15 Create a webpage containing to display the heading
using jumbotron.
16 Write a programme to show the usage of unbuilt
functions and dialogue boxes.
17 Write a programme to show the usage of alert box and
check box.
18 Write a programme to implement event handling using
onclick , onmouseover and onmouseout event.
19 WAP to shoe the usage of all the date , math and string
object functions
20 WAP to display the bookstore details in XML with css
and internal DTD
21 WAP to format the teacher details in XML with CSS
and internal DTD.

3
Jatin sharma(01816702023) BCA 1ST SEM

QUES 1 : Make following five different web pages:


i. Formatting Styles and Headings: Include Bold, italics, Underline, Strike, Subscript,
superscript and all six type of headings
ii. Font Styles and Image tag
iii. Marquee: Move text, image and hyperlink
iv. Other tags: br hr, pre, p
Include following specifications:
:- In all these web pages only mention about us, 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 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 ink also.

SOLUTION

- HOME PAGE

<html>
<head>
<title> Home page</title>
</head>
<body background="https://imgv3.fotor.com/images/share/pink-water-ripple-
background.jpg">
<marquee><h1> HOME PAGE </hI> </marquee>
<hr>
<a href="First page.html"> Visit First Page </a> <br>
</hr>
<a href="Second Page.html"> Visit Second Page </a><br>
</hr>
<a href="Third Page.html"> Visit Third Page </a> <br>
</hr>
<a href="Fourth Page.htm|"> Visit Fourth Page </a> <br>
</hr>
</html>
</body>

4
Jatin sharma(01816702023) BCA 1ST SEM

First page

<html>
<head>
<title> first Page </title>
</head>
<body>
<h1> FIRST PAGE </h1> <br>
<h2> About bold tag </h2><br>
<b>Bold, or bold tag in HTML creates the appearance of darker text by applying a thicker
stroke weight to the letters as shown in this statement. It is a container tag.</b><br>
<h3> About italics </h3><br>
<i>Italics tag in HTML italicize the textit is a container tag. lang is one of its attributes</i>
<h4> About underline tag </h4> <br>
<u>The underline tag in HTML stands for underline, and it's used to underline the text
enclosed within the tag. Style is its attribute. It is a container tag.</u><br>
<h5> About strike tag </h5>
<strike>This tag in HTML creates a cut line in the text. It has no attributes. It is a container
tag</strike><br>

<h6> About superscript and subscript tag </h6><br>


Superscript text appears half a character <sup>above the normal line, and is sometimes
rendered in a smaller font.</sup></br>
Subscript text appears half a character <sub> below the normal line, and is sometimes
rendered in a smaller font.</sub> They are container tags<br>
<hr>

<a href="https://www.w3schools.com/html/html_formatting.asp"> Visit w3


School to know more</a> <br>
<a href="homepage.html">Go to home page</a>
</html>
</body>

5
Jatin sharma(01816702023) BCA 1ST SEM

SECOND PAGE

<html>
<head>
<title>second page </title>
</head>
<body>
<font color="green"><h1> <u><i>SECOND PAGE</i> </h1></font></u>
<h1><b>Font styles tag</h1></b><br>
This tag is acontainer tag.It is used to chnage the font of text. It has <font
color="orange">'color'</font>, <font size="10">'size'</font> and <font height="20">'height'</font>
as its attributes.
<h1>Image tag</h1>
This tag is an empty tag. It is used to display images. It has 'alt','src' and 'height' as its
attributes.<br>
<a href="https://www.w3schools.com/html/html images.asp"> Visit w3 School to know more
</a> <br>
<a href="Home Page.html"> Go to Home Page </a>
</html>
</body>

THIRD PAGE
<html>
<head>
<title>third page </title>
</head>
<body text color="red">
<h1><b><font color="purple"> THIRD PAGE </h1></font></b>
<h2>Marquee tag</h2><br>
This tag is a container tag. It is used to give <marquee direction="left"
width="70">motion</marquee> to the font. It has 'behaviour' , 'direction' and width etc as its
attributes.<br>
<h2>Hyperlink</h2><br>

6
Jatin sharma(01816702023) BCA 1ST SEM

This tag is a container tag. It is used to link a webpage to other web pages. It has 'target' , 'href'
and 'name' etc as its attributes.<br>
<hr>
<a href="https://www.w3schools.com/html/html links.asp" target="blank"> visit w3 school to
know more</a> <br>
<a href="Home Page.html" target="top"> Got to Home Page </a>
</html>
</body>

Fourth page

<html>
<head>
<title> fourth page</title>
</head>
<body>
<h1> FOURTH PAGE </h1>
<h2> Paragrapgh tag</h2><br>
<p><b>It is acontainer tag. It has style lang etc as its attributes. It Paragraphs give a structural
view to the document, making it more readable. Paragraphs can contain related content such
as text, images,forms,etc.
It separates a particular block of content from the rest of the content, thus making it easier to
comprehend.Paragraphs give a structural view to the document, making it more
readable.
Paragraphs can contain related content such as text, images,forms,etc.It separates a particular
block of content from the rest of the content, thus making it easier to comprehend.Paragraphs
give a structural view to the document, making it more readable. Paragraphs can contain
related content such as text, images,forms,etc.
It separates a particular block of content from the rest of the content, thus making it
easier to comprehend.</p></b>
<h2>Pre tag</h2><br>
<pre>It is a container tag. This tag defines preformatted text. Text in this element is displayed in
a fixed-width font,
and the text preserves both spaces and line breaks. The

7
Jatin sharma(01816702023) BCA 1ST SEM

text will be displayed exactly as written in the HTML source code.


</pre>
<h2>Br tag</h2><br>
<p>It is an empty tag. It has no attributes. This tag displays the text in a new line<br></p>
<h2>Hr tag</h2><br>
It is an empty tag. It has 'align' , 'size' , 'width' ect as its attributes. It is used to insert a horizontal
rule or a thematic break in an HTML page to divide or separate document sections.<br><hr>
<a href="https://www.w3schools.com/html/html paragraphs.asp"> Visit w3 school to know
more</a> <br>
<a href="Home Page.htm|"> Go to Home Page </a>
<bodv>
</html>

8
Jatin sharma(01816702023) BCA 1ST SEM

Q2. Create an unordered list inside ordered list and apply the following:
1. Insert an image of item on top right corner of web page.
2. Display heading as a marquee.
3. Use different font styles and colours for different ordered list items.
4. Insert horizontal line after each ordered item.

<html>
<head>
<marquee> <title>student portal</title></marqueee>
</head>
<body>

<b> <marquee width="70%" bgcolor="green>"> <h1>Student details<h1></b>


<ol TYPE="TYPE1">
<font color<I><li><h2>PERSONAL DETAILS</li></i>
<ul type="disc">
<li>NAME: - Riya</li>
<li>ADDRESS: - D-90 Ramesh Nagar 110015</li>
<li>EMAIL: - <a href="mailto:[email protected]">[email protected]</a>
<li>MOBILE: -9781123564</li></ul>

<hr>
<I> <li><h2>EDUCATIONAL DETAILES</h2></li></I>
<ul type="square">
<li>Xth class %: - 85%</li>
<li>XIIth class %: - 89%</li></ul>
<hr>
<I> <li><h2>HOBBIES</h2></li> </i>
<ul type="circle">
<li>READING</li>
<li>DANCING</LI></UL>
<hr>

</body>
</html>

9
Jatin sharma(01816702023) BCA 1ST SEM

Ques 3 Design a table with row span and column span and make use of attributes
colspan, rowspan, width, height, cellpadding, cellspacing etc

solution
<html>
<head>
<title>table</title>
</head>
<body>
<table border="10">
<center>
<th align="center">HOUSE<BR>TYPES<th>DECOR<th>ROOMS<th>PRICE/SQ<br>FT
<tr>
<td colspan=4 align="center"><b>VAT of 12.5% applicable</b>
<tr>
<td rowspan=4><b>Villas</b>
<td>
<a href="https://www.janelockhart.com/portfolio/dining-rooms/">1.Dining Room</a>
<td rowspan=4>4BHK<td rowspan=4>Rs.5000
<tr>
<td><a href="https://www.at-home.co.in/collections/bedroom-furniture">2.Master Bed
<br>Room</a>
<tr>
<td><a href="https://in.pinterest.com/IDpropdotcom/kids-room-decor-india/">3.Kid's
Room</a>
<tr>
<td><a href="https://delhimodularkitchen.com/shop/modular-kitchen/affordable-
modular-kitchens/">4.Kitchen</a>
<tr>
<td rowspan=4><b>Mansions</b>
<td>
<a href="https://www.janelockhart.com/portfolio/dining-rooms/">1.Dining Room</a>
<td rowspan=4>5BHK<td rowspan=4>Rs.7000
<tr>
<td><a href="https://www.at-home.co.in/collections/bedroom-furniture">2.Master Bed
<br>Room</a>
<tr>
<td><a href="https://in.pinterest.com/IDpropdotcom/kids-room-decor-india/">3.Kid's
Room</a>
<tr>
<td><a href="https://delhimodularkitchen.com/shop/modular-kitchen/affordable-
modular-kitchens/">4.Kitchen</a>
<tr>
<td rowspan=2><b>Flat</b>
<td>
<a href="https://www.99acres.com/1-bhk-flats-in-delhi-ncr-
ffid">1.Single<br>Bedroom</a>
<td>1BHK<td>Rs.500
<tr>
<td><a href="https://www.99acres.com/2-bhk-flats-for-rent-in-delhi-ncr-
ffid">2.Double<br>Bedroom</a>
<td>2BHK<td>Rs.700
</center>
</table>

10
Jatin sharma(01816702023) BCA 1ST SEM

</body>
</html>

11
Jatin sharma(01816702023) BCA 1ST SEM

Ques 4 Design following frame:

1st Page(Birds)
<html>
<head>
<title>birds</title>
</head>
<body>
<h1>BIRDS</h1>
<img
src="https://mdc.mo.gov/sites/default/files/styles/carousel/public/mdcd7/media/images/2014/
03/pa2-04-2014.jpg?h=ed80be45&itok=ROS0jacl"no image.JPEG" align="left">
</body>
</html>

2nd Page(Contents)
<html>
<head>
<title>contents</title>
</head>
<body>
<ol type="1">
<li><a href="BIRDS .html">Birds</a>
<li><a href="Animals.html">Animals</a>
</ol>
</body>
</html>

3rd Page(Audio)

<html>
<head>
<title>audio tag</title>
</head>
<body bgcolor="green">
<h1 align="justify"> This is audio tag</h1>
<audio controls >
<source src="C:\Users\Muskan\Music\Twist - Love Aaj Kal 320 Kbps" type="audio/mpeg">
</audio>
</body>
</html>

12
Jatin sharma(01816702023) BCA 1ST SEM

13
Jatin sharma(01816702023) BCA 1ST SEM

QUES 5 Make an image map showing the usage of shape, coords, href attributes in map
definition. Link each hotspot to their respective details. All the web pages should be
designed with proper background color, images, font styles and headings.
SOLUTION

<html>
<head>
<title> image map </title>
</head>
<body bgcolor="cyan">
<center>
<img src="https://www.sciencefacts.net/wp-content/uploads/2019/12/Parts-
of-a-Plant-Diagram.jpg" usemap="#workplace">
</center>
<map name="workplace">
<area target="_blank" href="fruit.html" shape="circle" coords="461,425,43">
<area target="_blank" href="leaves.html"
shape="rect" coords="192,104,759,355">

</map>
</body>

</html>

Code of 1st Hotspot:


<html>
<head>
<title>leaves</title>
</head>
<body bgcolor="yellow">
<h1 align="center" style="font-size:50px;color:blue"><u>Leaves</u></h1>

14
Jatin sharma(01816702023) BCA 1ST SEM

<hr size="5"noshade>

<marquee>
<img src="https://encrypted-tbn0.gstatic.com/image
?q=tbn:ANd9GcT-cYOtWvPhCgsEPiaZFvKHSCiz6sayYl-GRw&usqp=CAU"height="250"
width="250">
</marquee>

<p style="font-size:30px;color:lightred"> <b> A leaf is a principal appendage of the stem of a vascular


plant, usually borne laterally aboveground and specialized for photosynthesis. Leaves are
collectively called foliage, as in"autumn foliage" while the leaves, stem, flower, and fruit collectively
form the shoot system.
</p>
<hr size="10" color="darkgreen">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0MRh-
TFXXMXXXXF2D4y1IsXBMuJPwDRD1PQ&usqp=CAU"
align="right" height="400" width="400">
<p style="font-size:30px;color:lightred">
The main function of a leaf is to produce food for the plant by photosynthesis.
Chlorophyll, the substance that gives plants their characteristic green colour, absorbs light
energy. The internal structure of the leaf is protected by the leaf epidermis, which
is continuous with the stem epidermis. The central leaf, or mesophyll, consists
of soft-walled, unspecialized cells of the type known as parenchyma. As much as one-fifth of the
mesophyll is composed of chlorophyll-containing chloroplasts,
which absorb sunlight and, in conjunction with certain enzymes, use the radiant energy in
decomposing water into its elements, hydrogen and oxygen.</b>
</p>
</body>
</html>

15
Jatin sharma(01816702023) BCA 1ST SEM

2nd Hotspot

<html>
<head>
<title>fuit details</title>
</head>
<body bgcolor="pink">

<h1 align="center" style="font-size:50px;color:purple"><u>Fruit</u></h1>


<hr size="5"noshade>
<marquee>
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325253/assortment-
of-fruits.jpg"height="250" width="250">
</marquee>

<p style="font-size:30px;color:green"> <b> In common language usage, fruit normally means the
seed-associated fleshy structures (or produce) of plants that typically are sweet or sour and edible in
the raw state, such as apples, bananas, grapes, lemons, oranges, and strawberries.
</p>
<hr size="10" color="darkgreen">

<imgsrc="https://upload.wikimedia.org/wikipedia/commons
/thumb/2/2f/Blackberryraspberrystrawberry.jpg/220px-Blackberryraspberrystrawberry.jpg"
align="right"
height="400" width="400">

<p style="font-size:30px;color:green">Fruits are the means by which flowering plants (also known as
angiosperms) disseminate their seeds. Edible fruits in particular have long propagated using the
movements of humans and other animals in a symbiotic relationship that is the means for seed
dispersal for the one group and nutrition for the other; in fact, humans and many other animals have
become dependent on fruits as a source of food. </b>
</p>
</body>
</html>

16
Jatin sharma(01816702023) BCA 1ST SEM

Q5- Design student registration form for admission in college.

Sol-

<html>
<head>
<title>registeration form</title>
</head>
<body>
<center><h1>Student Registration Form</h1><br></p></center>
<fieldset style="background-color:yellow; height:40% ;width:20%;">
<legend align="center"><b>Personal Details</b></legend>
<form action="https://iitmjanakpuri.com/" method="post">
Name:<input type="text" minlength="5" maxlength="20"><br>
<br>
Mobile:-<input type="password" minlength="10" maxlength="10"><br><br>
Address:<textarea name="address" rows="5" cols="20" minlength="10"
maxlength="50">enter your address here
</textarea><br><br>

Gender:
Female<input type="radio">
Male<input type="radio">
Transgender<input type="checkbox"> <br><br>
</fieldset><br>
<fieldset style="background-color:cyan; height:30%;width:20%">
<legend align="left"><b>Educational Details</b></legend>
Xth Marks% :-<input type="text" minlength="2" maxlength="2" ><br><br>
XIIth Marks% :-<input type="text" minlength="2" maxlength="2"><br><br>
Graduation course:- <select name="course" size="1">
<option selected>BBA
<option >Btech
<option > Bcom
<option>Bjmc
<option> BCA
</select><BR><br>
University:- <select name="University" size="2">
<option selected>GGSIPU
<option>DU
<option>IGNOU
<option>MERI
<option>SIRIFORT
</select><BR>
Shift:-
M<input type="radio">
E<input type="radio">
</fieldset>

</html>

17
Jatin sharma(01816702023) BCA 1ST SEM

18
Jatin sharma(01816702023) BCA 1ST SEM

Q6- Create a webpage and show the usage of inline and internal style sheet and external style
sheet.

SOL-

INTERNAL

<!-- INTERNAL style sheet =->

< !DOCTYPE html>

‹html lang="en"›

<head>

<meta charset="UTF-8">

‹meta name="viewport"

content="width=device-width, initial-scale=1.0">

<title>first css project/title>

‹style>

h1 {color:

•pink;}

</style>

</head>

‹!-- this is internal property of adding a style -->

‹body>

</body>

‹h1>hello my name is kartik</h1>

< /html>

EXTERNAL

K!-- THIS IS EXTERNAL STYLING]

‹!DOCTYPE html›

<html lang="en">

‹head>

‹meta charset="UTF-8">

19
Jatin sharma(01816702023) BCA 1ST SEM

‹meta name="viewport" content="width=device-width, initial-scale=1.0"> ‹title>PRACTICE</title>

‹link rel="stylesheet" href="pretc.css">

</head>

‹body>

<div>HELLO!!!!‹/div>

</body> </html>

INLINE

<!DOCTYPE html>

<html lang="en"›

<head>

‹meta charset="UTF-8">

‹meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document/title>

</head>

‹body>

‹P style="color: green"›hello≤/P›

</body> </html>

20
Jatin sharma(01816702023) BCA 1ST SEM

Q7- Create a webpage containing a background image and apply all the background styling
attribute

SOLUTION
<!DOCTYPE html>

<html>

<head>

<title>Background Styling Example</title>

<style>

body {/* Background image */ background-image: url('https://img.freepik.com/free-vector/wall-painted-watercolor-sky-blue


background_23-2148902771.jpg');

/* Background color */

background-color: #FF0000;

/* Background repeat */

background-repeat: no-repeat; /* Background size */

background-size: cover;

/* Background position */

background-position: center;

/* Background attachment */

background-attachment: fixed; }

/* Styling for content */

.content { text-align: center; padding: 48px; color: #00FF00; }

</style>

</head>

<body>

<div class="content">

<h1>Welcome to Background Styling</h1>

<p>This page demonstrates various background styling attributes.</p>

</div>

</body>

</html>

21
Jatin sharma(01816702023) BCA 1ST SEM

22
Jatin sharma(01816702023) BCA 1ST SEM

Q8- Create a webpage showing the usage of font styling attribute.

Sol-

<head>

‹title›Font Tag in HTML</title>

</head>

‹body>

‹h2>Example of <p›General

Font Tag in HTML </h2>

text without any Font tag attribute value</p>

<p›

<font

color="orange">Text having normal font size and font face. Only changing

font

color

</ font>

</p›

<p›

<font

face="cursive" ›Text having different font face.‹/font>

</p›

<p›

‹font

size="3">Text with Increased font size having default font type. </font>

</p›

</body> </html>

23
Jatin sharma(01816702023) BCA 1ST SEM

24
Jatin sharma(01816702023) BCA 1ST SEM

Q9-Create a web page and apply all text styling attributes and use ID and class selectors.

SOLUTION
‹!DOCTYPE html>

<html lang="en">

‹head>

<meta charset="UTF-8">

‹meta name="viewport"

content="width=device-width, initial-scale=1.0">

<title›Document‹/title>

‹link rel="stylesheet" href="rough.css">

</head>

‹body>

<p id="p" >HELLO</p> <p class="p1"> hey</p›

</body>

</html>

CSS

#p{

font-style: italic ;

color:

Ured;

text-align: center;

width: 200px;

.p1{

font-style: oblique;

color:

_pink;

text-align: left;

25
Jatin sharma(01816702023) BCA 1ST SEM

Q10- Create a webpage and implement all list styling attributes.

Sol

THIS IS UNORDERED LIST

‹!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<meta

name="viewport" content="width=device-width, initial-scale=1.0" > ‹title>HTML LIST</title>

< /head>

‹body>

<!-- UL stands unordered list -->

‹!-- LI stands for list item -->

<hr›

<ul>

‹li>HOME</li>

<1i>ABOUT</1i>

‹li>CONTACT</li>

‹li›SERVICES</1i>

</ul>

26
Jatin sharma(01816702023) BCA 1ST SEM

THIS IS ORDERED LIST

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<ol>HOME</ol>

<ol>ABOUT</ol>

<ol>CONTACT</ol>

<ol>SERVICES</ol>

</body>

</html>

27
Jatin sharma(01816702023) BCA 1ST SEM

Q11 – Create a webpage with three equal columns.

Sol

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div class="row">

<div class="column"></div>

<div class="column"></div>

<div class="column"></div>

</div>

</body>

</html>

CSS

.column {

float: left;

width: 33.33%;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

28
Jatin sharma(01816702023) BCA 1ST SEM

29
Jatin sharma(01816702023) BCA 1ST SEM

QUES 12 Create a Webpage containing various types of buttons Sol


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button>Click ME!</button>

<button>submit</button>

<button>report</button>

</body>

</html>

30
Jatin sharma(01816702023) BCA 1ST SEM

QUES 13 Create a webpage containing bootstrap table.


SOLUTION:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h2>Bootstrap Table</h2>

<table class="table table-bordered">


<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>KARTIK</td>
<td>VIJ</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>MUSKAN </td>
<td>-</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Chehak</td>
<td>Gupta</td>
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Vikas</td>
<td>Dubey</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>

31
Jatin sharma(01816702023) BCA 1ST SEM

32
Jatin sharma(01816702023) BCA 1ST SEM

QUES 14 Create a webpage containing various, typography classes.

SOLUTION:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h2>Various Typography Classes with Background color</h2>
<h3 class="text-muted">This is the text-muted heading.</h3>
<h3>This is the use of <small class="text-muted">small tag.</small></h3>
<p class="lead">This is the use of lead class.</p>
<h3>This is the use of mark element to<mark> highlight the text.</mark></h3>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is used to create a lighter, secondary text</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>


<blockquote class="blockquote">

33
Jatin sharma(01816702023) BCA 1ST SEM

QUES 15 Create a webpage containing to display the heading using jumbotron.

SOLUTION:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
<h2>Heading using Jumbotron</h2>
<div class="jumbotron">
<h1 style="color:red;">Web Technolgies</h1>
<p>Web Technogies is a subject in BCA </p>
</div></div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is a free front-end framework, with the purpose of making web development faster
and easier.</p>
</div>
</div>
</body>
</html>

34
Jatin sharma(01816702023) BCA 1ST SEM

QUES 16 Write a programme to show the usage of unbuilt functions and dialogue
boxes.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Function and Dialogue Box Demo</title>

<script>

// Function to show a dialogue box

function showDialogueBox() {

alert("This is a sample dialogue box!");

</script>

</head>

<body>

<h1>Function and Dialogue Box Demo</h1>

<p>Click the button to show a dialogue box:</p>

<!-- Button that triggers the dialogue box function -->

<button onclick="showDialogueBox()">Show Dialogue Box</button>

</body>

</html>

35
Jatin sharma(01816702023) BCA 1ST SEM

36
Jatin sharma(01816702023) BCA 1ST SEM

QUES 17 Write a programme to show the usage of alert box and check box.
SOLUTION:
<html>
<head>
<script language="javascript" type="text/javascript">
document.writeln("<h1 style='color:red'>");
document.writeln("Welcome to the first page of Javascript</h1>");
window.alert("Hello\n I am an alert box");
window.confirm("Are you sure you want to exit?");
</script>
</head>
</html>

ALERT BOX:

CONFIRM BOX:

37
Jatin sharma(01816702023) BCA 1ST SEM

QUES 18 Write a program to implement event handling using on click , on mouse over
and on mouse out event.
SOLUTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
<style>
/* Style for the button */
#myButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>

<!-- HTML button element with event attributes -->


<button id="myButton" onclick="changeColor()" onmouseover="changeBackgroundColor()"
onmouseout="resetBackgroundColor()">Click me</button>

<script>
// JavaScript functions for event handling
function changeColor() {
// Change text color when the button is clicked
document.getElementById('myButton').style.color = 'red';
}

38
Jatin sharma(01816702023) BCA 1ST SEM

function changeBackgroundColor() {
// Change background color when the mouse is over the button
document.getElementById('myButton').style.backgroundColor = 'lightblue';
}

function resetBackgroundColor() {
// Reset background color when the mouse moves out of the button
document.getElementById('myButton').style.backgroundColor = '';
}
</script>

</body>
</html>

39
Jatin sharma(01816702023) BCA 1ST SEM

QUES 19 WAP to show the usage of all the date , math and string object functions
SOLUTION:
<html>
<head>
<title>Date Object in JavaScript</title>
</head>
<body>
<h2>Date Object in JavaScript</h2>
<h3>To Display the Current Date</h3>
<script type="text/javascript">
var date=new Date(); //to display current date
var day=date.getDate();
var month=date.getMonth()+1; //It Starts with zero
var year=date.getFullYear();
document.write("<br>Current Date is:
"+day+"/"+month+"/"+year);
</script>
</body>
</html>

40

You might also like