PRACTICAL FILE

ON
E-commerce/HTML
Submitted in partial fulfilment of the requirement of
Bachelor of Commerce [B.COM(H)]

UNDER THE GUIDANCE SUBMITTED BY

Ms. Priyanka Gautam HIMANSHI
Associate Professor(IT) B.COM(H) 6Th sem
CPJ-CHS 50621588817
(SESSION 2017-2020)

CHANDERPRABHU JAIN COLLEGE OF HIGHER STUDIES

& SCHOOL OF LAW
AN ISO 9001:2008 CERTIFIED INSTITUTE (APPRPOVED BY GOVT. Of
NCT of Delhi)
Plot no.OCF Sector A-8 Narela New Delhi-40
 INDEX
S.NO TOPIC PAGE SIGN
NO.
1. Introduction to HTML, advantages, 1-5
disadvantages and main structure of
HTML
2. Gives a description of E-commerce 6-7
book which include title of the book as
well as Author
3. Design a web document to implement 8
the colour.

4. Design a web document to implement 9-10

the scripts and formatted text.

5. Make a resume in HTML 11-15

6. Insert an image on webpage 16
7. Design a webpage for a company 17-19
details using different tags.
8. Design a web document in HTML to 20-23
implement the ordered and unordered
list.

9. Design a webpage using Nested list in 24-25

Ordered List.
10. Design a web document in HTML to 26-27
implement the Menu and Directory
list.

11. Design a web document in HTML to 28-31

create a table which contains the
record of 10 students.
S.NO TOPIC Remarks SIGN

12. Create a hyperlink in HTML 32-33

document in which include CPJ
website
13. Design the homepage for any tour 34-39
& travel company that includes
tag.
14. Write a program to develop 40-43
entrance form for any exam.

15. Develop an e-mail form in HTML 44-45

to send e-mail to any open person

16. Make a vertical frame set with 3 46-47

different documents
17. Write a program in HTML to 48
make horizontal frame set.
18. Write a program in HTML for 49-50
mixed frame.
19. Write a program in HTML for the 51-53
following:-
• Navigation Frame
• Inline Frame

20. Draw a CPJ website with HTML 54-58

tags.
 INTRODUCTION TO HTML
Hypertext Mark-up Language (HTML) is the standard mark-up language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.
Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the
appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be
embedded into the rendered page. HTML provides a means to create structured
documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated
by tags, written using angle brackets. Tags such
as <img /> and <input /> directly introduce content into the page. Other tags
such as <p> surround and provide information about document text and may
include other tags as sub-elements. Browsers do not display the HTML tags, but
use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript,
which affects the behaviour and content of web pages. Inclusion of CSS defines
the look and layout of content. The World Wide Web Consortium (W3C), former
maintainer of the HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997.
HTML is a mark-up language that web browsers use to interpret
and compose text, images, and other material into visual or audible web pages.
Default characteristics for every item of HTML mark-up are defined in the
browser, and these characteristics can be altered or enhanced by the web page
designer's additional use of CSS. Many of the text elements are found in the
1988 ISO technical report TR 9537 Techniques for using SGML, which in turn
covers the features of early text formatting languages such as that used by
the RUNOFF command developed in the early 1960s for the CTSS (Compatible
Time-Sharing System) operating system: these formatting commands were
derived from the commands used by typesetters to manually format
documents.

1
 HTML
(Hypertext Markup Language)

The official logo of the latest version, HTML5.[1]

• .html
Filename extension
• .htm

Internet media type text/html

Type code TEXT

Developed by WHATWG

Initial release 1993; 27 years ago

Type of format Document file format

Extended from SGML

Extended to XHTML

Standards HTML Living Standard

Open format? Yes

Website whatwg.org

2
Features of HTML:-

HTML is the most common used language to write web pages. It has recently
gained popularity due to its advantages such as: -

1. It is the language which can be easily understood and can be modified.

2. Effective presentations can be made with the HTML with the help of its all
formatting tags.

3. It provides the more flexible way to design web pages along with the text.

4. Links can also be added to the web pages so it helps the readers to browse
the information of their interest.

5. You can display HTML documents on any platforms such as Macintosh,

Windows and Linux etc.

6. Graphics, videos and sounds can also be added to the web pages which give
an extra attractive look to your web pages.

3
 Structure of HTML
An HTML document has two* main parts:

1. HEAD. The head element contains title and meta data of a web
document.
2. BODY. The body element contains the information that you want to
display on a web page.

To make your web pages compatible with HTML 4, you need to add a document
type declaration (DTD) before the HTML element. Many web authoring software
add DTD and basic tags automatically when you create a new web page.

In a web page, the first tag (specifically, <html>) indicates the mark-up language
that is being used for the document. The <head> tag contains information about
the web page. Lastly, the content appears in the <body> tag. The following
illustration provides a summary.

4
 ADVANTAGE:-
• HTML is free for all: One of the biggest advantages of HTML is that it
is free of cost, and there is no need to purchase specific software.
Everyone can learn HTML language. So you can easily optimize your
site.

• HTML is simple to understand and use: HTML is simple to

understand and use; one does not need to have any prior knowledge of
any language. You needed to learn Basic English. All most all developer
is familiar with HTML. This language is for basic programmers.

• HTML is basic of all programing language: HTML is basic language

for all programmer’s. You need to know the basic HTML knowledge. It
is very easier than other programing languages like java script, PHP etc.

DISADVANTAGE:-
• Write a lot of code: Html is simple than other programming languages
but it has taken a lot of words to create a simple webpage.
• Take a lot of time: Html is easy to write, but it has taken a lot of time to
write a webpage.
• Difficulty to find mistake: when you write a simple webpage and it does
not open. It will difficult to find out the problem.
• Complexity: if you need to write a long code for making a webpage then
it produces some complexity.

5
 PROGRAMES
Ques2. Print a paragraph that gives the description e-commerce/html book
which includes title and author of the book.
Coding:
<html>
<head>
<title>e-commerce</title></head>
<body>
<h1> E-commerce</h1>
<p>E-commerce (electronic commerce) is the activity of electronically
buying or selling of products on online services or over the Internet.
Electronic commerce draws on technologies such as mobile commerce,
electronic funds transfer, supply chain management, Internet marketing,
online transaction processing, electronic data interchange (EDI), inventory
management systems, and automated data collection systems. E-commerce
is in turn driven by the technological advances of the semiconductor
industry, and is the largest sector of the electronics industry.</p>
</body>
</html>

6
Output:

7
Ques3. Design a web document in html to implement a colour.
Coding:
<html>
<head>
<title>e-commerce</title></head>
<body bgcolor ="green">
<h1>E-COMMERCE</h1>
<p>E-commerce (electronic commerce) is the activity of electronically
buying or selling of products on online services or over the Internet.
Electronic commerce draws on technologies such as mobile commerce,
electronic funds transfer, supply chain management, Internet marketing,
online transaction processing, electronic data interchange (EDI), inventory
management systems, and automated data collection systems. E-commerce
is in turn driven by the technological advances of the semiconductor
industry, and is the largest sector of the electronics industry.</p>
</body>
</html>
Output:

8
Ques4. Design a web document using html to implement the scripts &
formatted text also.
Coding:
<html>
<head>
<title>html program</title></head>
<body bgcolor=”pink”>

<body> <p> <strong>E-commerce (electronic commerce) is the activity of

electronically buying or selling of products on online services. </p>
</strong>

<body> <p> <b>E-commerce (electronic commerce) is the activity of

electronically buying or selling of products on online services. <p/> </b>

<body> <p> <i>E-commerce (electronic commerce) is the activity of

electronically buying or selling of products on online services. </p> </i>

<body> <p> <u>E-commerce (electronic commerce) is the activity of

electronically buying or selling of products on online services. </p> </u>

<body> <p> <em>E-commerce (electronic commerce) is the activity of

electronically buying or selling of products on online services. </p> </em>

<body> <pre>E-commerce (electronic commerce) is the

activity of electronically buying or selling of products
on online services.</pre>

9
</body>
</html>

In this program we used:-

• Strong script
• Bold script
• Italic script
• Underline script
• Emphasis script
• Preformatted script

OUTPUT:

10
Ques5. Make a resume in html document with objective, professional
education, hobbies and extra activities, achievements.
Coding:
<html>
<head>
<title>RESUME</title>
</head>
<body>
<center>
<h1>
<u> MY RESUME </u>
</h1>
</center>

<h3> HIMANSHI </h3>

<h5> sonipat haryana </h5>
<h5> himanshikathuria8080@gmail.com</h5>
<h5> contact no : 8222864402 </h5><hr>

<h2>
<u> CAREER OBJECTIVE </u>
</h2>

<h3> To succeed in an environment of growth and excellence and earn

a job which provides me job satisfaction and self development and help
me achieve <br>

11
 personal as well as organization goals
</h3>

<h2>
<u> ACADMIC QUALIFICATION </u>
</h2>
<table border = 5 width = 1000 >
<tr>
<th> Qualification </th>
<th> Board/university</th>
<th> School/collage</th>
<th> Year of passing </th>
<th> marks</th>
</tr>
<tr>
<th>B.com(H)</th>
<th>GGSIPU</th>
<th>CPJ</th>
<th>2020</th>
<th>74%</th>
</tr>
<tr>
<th>12th</th>
<th> CBSE</th>
<th> DAV</th>
<th> 2017</th>

12
 <th>69%</th>
</tr>
<tr>
<th>10th</th>
<th>CBSE</th>
<th> DAV</th>
<th> 2015</th>
<th> 70.3%</th>
</tr>
</table>
<h2>
<u> STRENGth </u>
</h2>
<ul>
<b>
<h3>
<li>hardworking
<li>optimistic
<li>Extrovert
<li>Flexible</li>
<h3>
<b>
</ul>
<h2>
<u> Personal Details </u>
</h2>

13
<ul>
<b>
<h3>
<li> Name : Himanshi
<li> Father's Name : Ashu Kathuria
<li> Sex : Female
<li> Martial status : Single
<li> Nationality : Indian
<li> hobbies : </li>
<ul>
<li> Dancing
<li> Playing Badmintion , Basket
<li> Travelling</li>
. </ul>
</ul>

</p>

<h2> Declaration </h2>

<p> I hereby declare that all the above mentioned information are true
and correct to the best of my knowledge. </p>
</body>
</html>

14
Output:

15
Ques6. How to insert image in HTML webpage?
Coding:
<html>
<head>
<title>mypage</title>
</head>
<body>
<imgsrc="C:\Users\Dell\Desktop/e-commerce.jpg"height=50%
width=45%>
</body>
</html>

OUTPUT:

16
 Ques7. Draw a webpage for a company detail in which you use following
tags:-
• Marquee tag
• I tag
• Centre tag
• Paragraph tag
• Font tag & Attributes
Coding:
<html>
<head>
<title> COMPANY DETAIL </title>
</head>
<body bgcolor="grey">
<center>
<h1>
<u> TRAVEL AGENCY </u>
</h1>
</center>
<h2> <marquee> TRIVAGO PVT.LTD </marquee> </h2>
<p> <font size="5" color="red"> Trivago N.V., marketed with lowercase styling
as trivago, is a German transnational technology company specializing in
internet-related services and products in the hotel, lodging and metasearch
fields. The United States travel company Expedia Group owns a majority of the
company's stock. The company is incorporated in the Netherlands. </font> </p>
<h2>
<u> History </u>
</h2>
<p> <i> The company was founded in Düsseldorf, Germany, in January 2005.
Seeing an opportunity in the hotel search space, the founding team developed

17
Germany's first hotel search engine. Shortly after launch, Stephan Stubner
resigned as Managing Director, but the three other founders (Rolf Schrömgens,
Peter Vinnemeier and Malte Siewert) remained </i> </p>
<h2>
<u> Operations </u>
</h2>
<p> <font size="4" color="red"> Trivago is headquartered in Düsseldorf, where
the international operations are conducted and 90% of the company's
employees work. In 2013, Trivago opened offices in Leipzig and Palma de
Mallorca. There are also offices in Amsterdam and Shanghai.</font> </p>
<h2>
<u> Business Model </u>
</h2>
<p> <font size="4" color="red"> s a hotel price comparison website, Trivago
makes money from advertising partners primarily using a cost-per-click (CPC)
business model. Booking platforms, hoteliers and other providers list rates and
advertise on the Trivago site, paying for the clicks received from Trivago users.
Trivago also offers free and fee-based versions of its Hotel Manager product,
which hoteliers use to market their facilities on the Trivago site. Trivago claims
to be the world's largest online hotel search site, comparing rates from over 1
million hotels and more than 250 booking sites worldwide. Since their majority
shareholder is Expedia, the effort is to direct bookings to their sites by way of
various "adjustments" to how other sites' rates are perceived. They also offer
rates through many sites reselling for travel wholesalers, where rooms may or
may not be available at time of booking. </font> </p>
</body>
</html>

18
Output:

19
Ques8. Draw a web document in html to implement the ordered list &
unordered list.
Coding:- (i) ordered list
<html>
<head>
<title> Ordered List </title>
</head>
<body>
<h1> Bevrages List </h1>
<ol type="a">
<li> coffee </li>
<li> Tea </li>
<li> Cold drink </li>
<li> Massala Tea </li>
<li> Redbull </li>
</ol>

<h1> Shakes </h1>

<ol type="A">
<li> Mango Shake </li>
<li> Bannna Shake </li>
<li> Caremello Shake </li>
<li> Chiku Shake </li>
<li> Vanilla Shake </li>
<li> Strawberry Shake </li>
</ol>

20
<h1> Main Course </h1>
<ol type="i">
<li> Dal Makhni </li>
<li> Shahi Paneer </li>
<li> Mix Veg </li>
<li> Rajma </li>
<li> Mushroom </li>
</ol>
</body>
</html>
Output:-

21
Coding:- (ii) unordered list
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<h1> Outdoor Games </h1>
<ul type="circle">
<li> Badmintion </li>
<li> Hockey </li>
<li> Football </li>
<li> Volleyball </li>
<li> Basketball </li>
</ul>

<h1> Indoor Games </h1>

<ul type="disc">
<li> Ludo </li>
<li> Chess </li>
<li> Snake & Ladders </li>
<li> Caroam </li>
</ul>

<h1> Mobiles Games </h1>

<ul type="Square">
<li> Pubg </li>

22
<li> Subway Surfers </li>
<li> Temple Run </li>
<li> Candy Crush </li>
<li> Bubble Shooter </li>
</ul>
</body>
</html>

Output:-

23
Ques9. Draw a web document in html to implement the nested list accordance
to ordered list.
Coding:-
<html>
<head>
<title> Nested List </title>
</head>
<body>
<h4>
<u>BEVRAGES</u>
</h4>
<ol>
<li> Coffee </li>
<li> Tea
<ol type="i">
<li>Black Tea</li>
<li>Green Tea</li>
<li> Massala Tea</li>
<li> Ginger Tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>

24
Output:-

25
Ques10. Define the Menu list & Directory list.
Coding:-
(i) Menu List
<html>
<head>
<title> Menu List </title>
</head>
<body>
<h1> Subjects </h1>
<menu>
<li> GST </li>
<li> HTML </li>
<li> E-Commerce </li>
<li> International Business </li>
<li> Project Mangement </li>
</menu>
</body>
</html>
(ii) Directory List
Coding:-
<html>
<head>
<title> Directory List </title>
</head>
<body>
<h1> BRANDS </h1>

26
<dir>
<li> ZARA </li>
<li> H&M </li>
<li> PUMA </li>
<li> VERA MODA </li>
<li> MANGO </li>
</dir>
</body>
</html>

Output:-

27
Ques11. Design a web document in html to create a table which contain a
record of 10 students.
Coding:-
<html>
<head>
<title> Record Of Students </title>
</head>
<body>
<center>
<h1>
<u> Student's List </u>
</h1>
</center>
<table border = 5 width = 1000>
<tr>
<th> SNO. </th>
<th> Name </th>
<th> Roll NO. </th>
<th> Course </th>
<th> Year of Joining </th>

</tr>
<tr>
<th> 1 </th>
<th> Deepak </th>
<th> 51 </th>
<th> B.com </th>
28
<th> 2017 </th>
</tr>
<tr>
<th> 2 </th>
<th> Divya </th>
<th> 52 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 3 </th>
<th> ujjwal </th>
<th> 54 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 4 </th>
<th> Parikshit </th>
<th> 56 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 5 </th>
<th> Kajal </th>

29
<th> 58 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 6 </th>
<th> Chhavi </th>
<th> 60 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 7 </th>
<th> Rahul </th>
<th> 62 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 8 </th>
<th> Purab </th>
<th> 64 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>

30
<th> 9 </th>
<th> Rubal </th>
<th> 66 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
<tr>
<th> 10 </th>
<th> Udit </th>
<th> 68 </th>
<th> B.com </th>
<th> 2017 </th>
</tr>
</body>
</html>
Output:-

31
Ques12. Create a hyperlink in HTML document in which include CPJ COLLEGE
WEBSITE.
A hyperlink is a word, phrase, or image that you can click on to jump to a
new document or a new section within the current document. Hyperlinks
are found in nearly all Web pages, allowing users to click their way from
page to page. Text hyperlinks are often blue and underlined, but don't have
to be. When you move the cursor over a hyperlink, whether it is text or an
image, the arrow should change to a small hand pointing at the link. When
you click it, a new page or place in the current page will open.

Coding:
<html>
<head>
<title> Anchor Tag </title>
</head>
<body>
<a href="https://www.cpj.edu.in"> CPJ COLLEGE </a>
</body>
</html>
Output:

32
33
Ques13. Design the homepage for any tour& travel company that include
following tags.
Coding:
<html>
<head>
<title> Homepage for tour & travel agency </title>
</head>
<body bgcolor="orange">
<h1><marquee> WELCOME </marquee></h1>
<center><img
src="C:\Users\Dell\AppData\Roaming\Microsoft\Windows\Network
Shortcuts\download (trivago).png"height=30% width=30%/></center>
<h2><font size="5" color="light green"> INTERNATIONAL PACKAGES OFFERED
BY TRIVAGO </font></h2>
<ul type="disc">
<li><b> SRI LANKA </b></li>
<table border="2">
<tr>
<th> Flight Name </th>
<th> Offer </th>
<th> Day/Night </th>
<th> Hotel </th>
<th> Price </th>
</tr>
<tr>
<th> Air India </th>
<th> 15% off on Flight </th>

34
<th> 6Days/5Nights </th>
<th> Berjaya Hotel </th>
<th> 48,550 per person </th>
</tr>
<tr>
<th> Sri Lankan Airlines </th>
<th> 10% off on hotel </th>
<th> 8Days/7Nights </th>
<th> Taj Heights </th>
<th> 51,250 per person </th>
</tr>
</table>
</ul>
<ul type="disc">
<li><b> BALI </b></li>
<table border="2">
<tr>
<th> Flight Name </th>
<th> Offer </th>
<th> Day/Night </th>
<th> Hotel </th>
<th> Price </th>
</tr>
<th> Air India </th>
<th> 15% off on Hotel </th>
<th> 5Days/4Nights </th>

35
<th> Instyle Kuta Hotel </th>
<th> 45,144 per person </th>
</tr>
<tr>
<th> Spicejet </th>
<th> 20% off on Early Booking </th>
<th> 6Days/5Nights </th>
<th> Villa Illam </th>
<th> 33,000 per person </th>
</tr>
</table>
</ul>
<ul type="disc">
<li><b> DUBAI </b></li>
<table border="2">
<tr>
<th> Flight Name </th>
<th> Offer </th>
<th> Day/Night </th>
<th> Hotel </th>
<th> Price </th>
</tr>
<tr>
<th> Emirates </th>
<th> 10% off on Flights </th>
<th> 6Days/5Nights </th>

36
<th> Holiday Inn </th>
<th> 47,425 per person </th>
</tr>
<tr>
<th> Vistara </th>
<th> 20% off on Burj Dinner </th>
<th> 7Days/6Nights </th>
<th> Hyatt Place </th>
<th> 62,450 per person </th>
</tr>
<tr>
<th> Air Arabia </th>
<th> 30% off on water activites </th>
<th> 8Days/7Nights </th>
<th> The Palm </th>
<th> 55,450 per person </th>
</tr>
</table>
</ul>
<ul type="disc">
<li><b> VIETNAM </b></li>
<table border="2">
<tr>
<th> Flight Name </th>
<th> Offer </th>
<th> Day/Night </th>

37
<th> Hotel </th>
<th> Price </th>
</tr>
<tr>
<th> Vietnam Airlines </th>
<th> 20% off on hotels </th>
<th> 6Days/5Nights </th>
<th> Allegro Hoi An </th>
<th> 30,550 per person </th>
</tr>
<tr>
<th> Air India </th>
<th> 10% off on flight </th>
<th> 9Days/8Nights </th>
<th> Viet Heights </th>
<th> 41,220 per person </th>
</tr>
<tr>
<th> Indigo </th>
<th> 20% off Food in Hotel </th>
<th> 6Days/5Nights </th>
<th> Le,Meridian </th>
<th> 45,225 per person </th>
</tr>
</table>
</ul>

38
</body>
</html>
Output:

39
Ques14. Write a program to develop entrance form for any exam.
Coding:
<html>
<head>
<title> Entrance Form </title>
</head>
<body>
<center>
<h2>
<u> PG Entrance Exam Form </u>
</h2>
</center>
<form>
<table>
<tr>
<td>Fist Name</td>
<td>
<input type="text name="">
</td>
</tr>
<tr>
<td> Last Name </td>
<td>
<input type="text name="">
</td>
</tr>

40
<tr>
<td> Fathers's Name </td>
<td>
<input type="text name="">
</td>
</tr>
<tr>
<td> E-mail </td>
<td>
<input type="mail="">
</td>
</tr>
<tr>
<td> GENDER </td>
<td>
<input type="radio" name="Gender">Male
<input type="radio" name="Gender">Female
</td>
</tr>
<tr>
<td> PHONE NO. </td>
<td>
<input type="phone" name="">
</td>
</tr>
<tr>

41
<td> QUALIFICATION </td>
<td>
<Select>
<option> B.COM(H)</option>
<option> BCA </option>
<option> BBA </option>
<option> BBA CAM </option>
<option> BBE </option>
<option> OTHERS </option>
</select>
</td>
</tr>
<tr>
<td>
<button type="SUBMIT" value="SUBMIT">
</td>
</tr>
<tr>
<td>
<button type="RESET" value="RESET">
</td>
</tr>
</table>
</form>
</body>
</html>

42
Output:

43
Ques15. Develop an email form in html to send email to any open person.
Coding:
<html>
<head>
<title> Email form </title>
</head>
<body>
<h2> HELLO </h2>
<h3> This form send E-mail </h3>
To:<br>
<input type="text" name="Mail"size"20">
<br>
Sub:<br>
<input type="text" name="Name"size="20">
<br>
comment:<br>
<text area rows="6" cols="46">
Comment Here:
</textarea>
<br><br>
<input type="Submit" value="Send">
<input type="Reset" value="Reset">
</form>
</body>
</html>

44
Output:

Now we will fill the necessary details:

45
Ques16. Write a html program to make a vertical frame set with 3 different
documents.
A frameset is an element in hypertext Mark-up language (HTML) which contains
the different frame elements. It is used to inform the browser of the division of
the screen into different split windows, and prohibits any content inside the
body associated with a page.
Vertical Frameset- the Vertical Frameset explains you how to
Implement vertical frameset in a web page. In this code we create a vertical
Frame the & <frameset> is used to set the number and dimension of the
Column in HTML page< frameset> is used to specify the location of html file.
Coding:
<html>
<head>
<title> Vertical Frames </title>
</head>
<frameset cols=30%,40%,30%>
<frame src="m.html">
<frame src="NL.html">
<frame src="d.html">
</frameset>
</html>

46
Output:

47
Ques17. Write a program in html to make a horizontal frame set.
Horizontal Frameset- is used to set the horizontal subspaces in a frameset. The
Attribute & <frameset> is used to set the number of horizontal subspaces in a
web page.
Coding:
<html>

<head>
<title> Horizontal Frames </title>
</head>
<frameset rows=20%,40%,30%>
<frame src="Anchor.html">
<frame src="emailform.html">
<frame src="new2.html">
</frameset>
</html>

Output:-

48
Ques18. Write a html programme for frames to display a screen like this:-

Frame A

Frame B Frame C

Coding:-
<html>
<head>
<title> Mixed Frameset </title>
</head>
<frameset rows=30%,30%>
<frame src="Frame A.html">
<frameset cols=50%,50%">
<frame src="Frame B.html">
<frame src="Frame C.html">
</frameset>
</frameset>
</html>

49
Output:-

50
Ques19. Write a programme in html in following
I. Navigation Frame
II. Inline Frame
Navigation Frame:-
The navigation frame contains a list of links with the second frame as the target.
How nice it could it be to make menu link, load into content link.
Coding:
<html>
<head>
<title> Navigation Frame </title>
</head>
<body>
<a href="http://www.amazon.com"target="show frame"> <h3> Amazon
</h3></a><br>
<a href="http://www.flipkart.com"target="show frame"> <h3> Flipkart
</h3></a><br>
<a href="http://www.myntra.com"target"="show frame"> <h3> Myntra
</h3></a><br>
<a href="http://www.ebay.com"target"="show frame"> <h3> Ebay
</h3></a><br>
<a href="http://www.ajio.com"target"="show frame"> <h3> Ajio
</h3></a><br>
</body>
</html>

51
Output:-

Now will click any link mentioned above and it will direct to another window

52
Inline frames:-
An I Frame (Inline Frame) is an HTML document embedded inside another
HTML document on a website. The I Frame HTML element is often used to insert
content from another source, such as an advertisement, into a Web page. The
attackers inserted I Frame code into the saved search results of legitimate
websites
Coding:-
<html>
<head>
<title> Inline Frames </title>
</head>
<body>
<iframe src="http://www.vishacademy.com" width="800" height="500"
frameborder="1" scrolling="auto">
</iframe>

Output:-

53
Ques20. Draw a CPJ Website in HTML format.
Coding:-
<html>
<head>
<title> CPJ website </title>
</head>
<frameset rows=20%,80%,40%,50%>
<frame src="infoo.html">
<frame src="image.html">
<frame src="LIST.html">
<frame src="College image.html">
Infoo.html file coding:-
<html>
<head>
<title> Infoo </title>
</head>
<body bgcolor="pink">
<font face="violet"><br>
Helpline: 9717688444, 971133951 <br>
e-mail: cpj.enquiry@gmail.com
<marquee><b><font color="blue"><h3> Admission 2020 BBA/BCA/B.COM
by IPU CET-Law Courses by CLAT- Last Date
31.3.2020</h3></font></b></marquee>
Image.html file coding:-
<html>
<head>
<title> Image </title>
</head>

54
<body bgcolor="Pink">
<img src="C:\Users\Dell\Desktop\download cpj.png" width="200"
height="100" align="left"><br>
<h1><font color="green"> Chanderprabhu Jain School College Of Higher
Studies and School of Law </font></h1>
<center><h3><font color="black">(Recognized by Govt. of
NCT,Delhi|Affilated by GGSIP University,Delhi|Approved by Bar Council of
india)</font><//h3></center></br>
</body>
</html>
LIST.html file coding:-
<html>
<head>
<title> main info </title>
</head>
<body bgcolor="Pink">
<form>
<select> "About US">
<option> VISION & MISSION </option>
<option> LEADERSHIP BOARD </option>
<option> CSR </option>
</select>
<select> "Programe">
<option> BBA(CAM) </option>
<option> BCOM.(H) </option>
<option> BCA </option>
<option> BBA.LLB </option>
<option> BA.LLB </option>
</select>
55
<select> "FACULTY">
<option>MANAGEMNET & IT</option>
<option> SCHOOL OF LAW</option>
</select>
<select> "ADMISSION">
<option> ADMISSION PROCEDURE</option>
<option> ELIGIBILTY CRITERIA</option>
<option> ADMISSION BROCHURE</option>
<option> CHECKLIST OF DOCUMENTS</option>
</select>
<select> "INFRASTRUCTURE AND FACILITIES">
<option> CAMPUS</option>
<option> LECTURE HALLS</option>
<option> TRANSPORT</option>
<option> COMPUTER LAB </option>
<option> MOOT COURT </option>
<option> LIBRARY</option>
<option> HOSTEL </option>
<option> CCD</option>
</select>
<select "LIFE@CPJ">
<option>CLUB AND COMMITTEES</option>
<option>EVENT CALENDAR</option>
<option>VIDEO GALLERY</option>
<option>NATIONAL EVENT</option>
</select>
<select> "INDUSTRY INTERFACE">

56
<option>TRANSPORT</option>
<option> CAMPUS</option>
<option>AUDITORIUM</option>
<option>CCD</option>
</select>
<select> "OTHERS">
<option> RESEARCH PUBLICATION </option>
<option> STUDENT HANDBOOK <option>
<option> NEWSLETTER</option>
<option> JOURNALS </option>
</select>
</form>
</body>
</html>
College image.html file coding:-
<html>
<head>
<title> Images </title>
</head>
<body bgcolor="Pink">
<h2><font color="Red"> CAMPUS </font> </h2>
<img src="C:\Users\Dell\Desktop\campus.jpg"> <width="150" height="90">
</br>
</br>
<h4><font color="blue"> APPROVED & AFFILATED BY:- </font> </h4>
<img src="C:\Users\Dell\Desktop\gov.jpg"> <width="150" height="90"> <img
src="C:\Users\Dell\Desktop\logo.jpg"> <width="50" height="40"> <img
src="C:\Users\Dell\Desktop\Bar Council.jpg">

57
</body>

Output:-

58
59