You are on page 1of 42

THAKUR POLYTECHNIC

Diploma in Computer Engineering

FYCO-A

SECOND SEMESTER [2020-2021]

GROUP NO-07

SUBJECT: Web Page Designing With HTML(WPD)(22014)

1.DhruvHarsora (37)
2.Hemil Shah (38)
3.KushIntwala (39)
4.Jatin Sehgal (40)
5.Jenil Joshi (41)
6.Cavin Juneja (42)

Guided by:-Ms. Smita Dandge

Page 1of40
MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
CERTIFICATE

This is to certify that the following group of students roll no.37-42 of


Second semester of Diploma in COMPUTER ENGINEERING of
institute, THAKUR POLYTECHNIC (Code:0522) have completed
the Micro Project satisfactorily in subject – Web Page Designing
With HTML WPD (22014) for the academic year 2020–2021 as
prescribed in the curriculum.
Place: Mumbai Enrollment No.: 2005220294
Date:17/05/2021 Seat No.: 286503

Subject teacher Head Of Department Principal

Seal of
Institution

Page 2of40
ACKNOWLEDGEMENT

We feel immense pleasure in submitting this report on ‘Design a website on a online


jewellery store’. While submitting this report, we avail this opportunity to express
ourgratitudetoallthosewhohelpedusincompletingthistask.Headingthelistwithourown
honorable Principal Dr. S.M. Ganechari who is the beginner of our inspiration. We owe
our deep gratitude and also very thankful to our guide Ms.Smita Dandge and HOD Ms.
Vaishali Rane who has proved to be more than just a mere guide to us. Apart from
bringing to us what can be joy of successful completion of this project was only possible
due to her guidance and co-operation without which this work would never have been
completed. Finally, we wish to express our deep sense of respect and gratitude to each
and every staff member who has helped us in many ways and also our parents
whohavealwaysbaredwithusinanycriticalsituationandtoallothers,sparingtheirtimeand
helping us for completion of this project in whatever way they could. And lastly we are
grateful to each other the members of our group.

THANK YOU.

Page 3of40
PROPOSAL

Page 4of40
Micro-Project Proposal
WPD
Title: Design a website for online Jewellery Store.

1. Aims/ Benefits of the Micro Project:


Aims:-
To make and design a Website for Online Jewellery Store.
Benefits:-
This Experiment Helps to:-
 Will help gain experience on how job portal works and work needed to develop them
 It helps People buy their required things during Lockdown and this Pandemic Situation.
 It helps in easy understanding and grasping of HTML Language
 Helps to understand how to design a Job Portal and to gain Experience
 Helps us to understand the working of a Job Portal, and how to Control over it.

2. Course Outcomes Addressed:


a. Use block level formatting tags and text level formatting tags to present content on webpage.
b. Use text level formatting tags and text level formatting tags to present content on webpage.
c. Apply hyper linking on webpage.
d. Organize the content using table and frames.
e. Apply presentation schemes on content using CSS.

3. Proposed Methodology:
In order to complete this micro-project of wpd the procedure that will be followed is given below.
Taking information from various sources available on the internet and choosing the best material.
Discussing about various sources were searched upon and finalizing what to take and what to not.
Preparing the presentation of same for our micro project. Executing the information finalized by the
members. Checking the entire ppt to see if there are any error, this would be done by all the team
members. Once done then converting the ppt into PDF format and submitting it after that presenting
the ppt and explaining the micro project.

Page 5of40
4. Action Plan:
Sr. Details of Activity Planned Start Date Planned Finish Date Name of the Responsible Team
No Members
1.) Information Search 07/04/2021 12/04/2021 Dhruv Harsora, Jatin Sehgal, Jenil
Joshi
2.) Group Discussion 13/04/2021 20/04/2021 Dhruv Harsora, Hemil Shah, Kush
Intwala, Jatin Sehgal, Jenil Joshi,
Cavin Juneja
3.) Group Discussion 21/04/2021 27/04/2021 Dhruv Harsora, Hemil Shah, Kush
Intwala, Jatin Sehgal, Jenil Joshi,
Cavin Juneja
4.) Taking References 28/04/2021 03/05/2021 Cavin Juneja
5.) Execution 04/05/2021 11/05/2021 Kush Intwala
6.) Compilation of Report 12/05/2021 20/05/2021 Hemil Shah,
7.) Presentation and During LAST week During LAST week Dhruv Harsora, Hemil Shah, Kush
Report Submission Of May Of May Intwala, Jatin Sehgal, Jenil Joshi,
Cavin Juneja

5. Resources Required:

Sr. No Name of Specification Quantity Remarks


resources/material
1 Software Notepad, Visual Studio 1 Available
Code, Chrome, Edge.
2 Internet Several Web Sites 2 Available

Names of Team Members with Roll Nos.


1.Dhruv Harsora (37)
2.Hemil Shah (38)
3.Kush Intwala (39)
4.Jatin Sehgal (40)
5.Jenil Joshi (41)
6.Cavin Juneja (42)

(Ms. Smita Dandge)

Page 6of40
REPORT

Page 7of40
REPORT
Title: To make and design a website for online jewellery store.

1) Rationale:
Websitedesignisaboardtermthatencompassesawidevarietyoftask,allinvolvedIntheformationofwebpag
e.Thereareessentiallytwotypesofwebdesignapproaches,whicharedynamic and static design. Static
web design is typically based on basic HTML code. It is essentialfor diploma student to learn
HTML since the task of stati c website design is performed by usingHTML coding. Even in
dynamic website, the task of presentation of content is handled throughHTML coding. This course
introduces webpage designusing HTML and also give emphasis onlearning CSS which is style sheet
language used for describing the presentation of document writteninamarkup languageforformatting
and styling ofcontent.

2) Aims/ Benefits of the MicroProject:


Aims:
To make and design a WebSite for Online Jewellery Store.
Benefits:
This Experiment Helps to:-
 Will help gain experience on how job portal works and work needed to develop them
 It helps People buy their required things during Lockdown and this Pandemic Situation.
 It helps in easy understanding and grasping of HTML Language
 Helps to understand how to design a Job Portal and to gain Experience
 Helps us to understand the working of a Job Portal, and how to Control over it..

3) Course Outcome Achieved:


a. Use block level formatting tags and text level formatting tags to present content on webpage.
b. Use text level formatting tags and text level formatting tags to present content on webpage.
c. Apply hyper linking on webpage.
d. Organize the content using table and frames.
e. Apply presentation schemes on content using CSS.

4) Literature Review:
Proper design has become a critical element needed to engage website and mobile application users.
However, little research has been conducted to define the specific elements used in effective website
and mobile application design. We attempt to review and consolidate research on effective design
and to define a short list of elements frequently used in research. The design elements mentioned
most frequently in the reviewed literature were navigation, graphical representation, organization,
content utility, purpose, simplicity, and readability. We discuss how previous studies define and
evaluate these seven elements. This review and the resulting short list of design elements may be
used to help designers and researchers to operationalize best practices for facilitating and predicting
user engagement.

Page 8of40
The following are the tags used in the website:
 HTML Tag-<html></html>

 Head Tag-<head></head>

 Title Tag-<title></title>

 BodyTag-<body></body>

 Break Tag-<br>

 Image Tag-<img>

 Paragraph Tag-<p></p>

 Heading Tag-<h1>,<h2>,<h3>,<h4>,<h5>, <h6>

 Division Tag-<div>

 Block Quote Tag-<blockquote>

 Footer Tag-<footer></footer>

 UnOrdered List Tag-<ul></ul>

 Table Tag-<table>

 Table Row Tag-<tr></tr>

 Table Data Tag-<td></td>

 Break Tag-<br>

 Table data Tag-<td></td>

 Linking Tag-<href>

 Form Tag-<form>

 Label tag-<label>

 Select tag-<select>

 For CSS-attribute<class=>

 External CSS linked

 Text area-<textarea>

This are some of the tags used in website.


Page 9of40
5) Actual Methodology Followed:
In order to complete this micro-project of wpd the procedure that will be followed is given below.
Taking information from various sources available on the internet and choosing the best material.
Discussing about various sources were searched upon and finalizing what to take and what to not.
Preparing the presentation of same for our micro project. Executing the information finalized by the
members. Checking the entire ppt to see if there are any error, this would be done by all the team
members. Once done then converting the ppt into PDF format and submitting it after that presenting
the ppt and explaining the micro project.

6) Actual Resources Used:

Sr. Name of Specification Quantity Remarks


No resources/material
1 Software Notepad, Visual 1 Available
Studio Code, Chrome,
Edge.
2 Internet Several Web Sites 2 Available

7) Outputs of Micro-Project:

INDEX PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<liclass="active"><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>
<divclass="hero-img">
<imgsrc="img/indexmain.jpeg"class="img-100">
<h1><marquee>WelcometoElements</marquee></h1>
</div>
<divclass="text-center">
<h2>
<span>Welcome</span>ToOurJewelleryStore

Page 10of40
</h2>
</div>

<div>
<center><tableborder="1"bgcolor="#dddddd"class="img-100">
<tr>
<thcolspan="2"><h2>OURSPECIALITIES<h2></th></tr>
<tr>
<td><h3>UNIQUEDESIGN</H3></td>
<td><imgsrc="img/main.jpg"class="img-100"></td>
</tr>
<tr>

<td><imgsrc="img/main2.jpg"class="img-100"></td>
<td><h3>BESTSERVICE</h3></td>
</tr>
</table></center>
</div>
<br>
<br>
<footerclass="footer-styletext-centercol-1">
<ahref="index.html"><imgclass="header-logo"src="img/download1.png"></a>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>
<ahref="tel:+1800000111">+1800000111</a><br>
<ahref="mailto:contact@example.com">contact@example.com</a><br>M
onday-Sunday:<br>
Timings:9AM�10PM
Dinner:6PM�10PM<br>
</footer>
</body>
</html>

Page 11of40
INDEX PAGE OUTPUT:

Page 12of40
Page 13of40
ABOUT US PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<liclass="active"><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>
<divclass="hero-img">
<imgsrc="img/aboutus.jpg"class="img-100">
</div>
<divclass="text-center">
<h2>OurStory</h2>
<pstyle="font-
size:25px">OurjewellerystoresituatednearAndheriwasstartedbyourfamilymembers.Ouraimis to provide
the best jewellery with lot of category along with it and also providing the bestservice.
Thisapproachhasledtoourlong-
term reputation of being one of the finest jewellery store in the region. Our jewellery
storeoffers all types of jewels so that our customers have a variety of ornamentsto choose
from.Our jewellery store has unique desgins, cashback offers upto 20% also providing the latest
orraredesgins.Thereisalsoafacilityofonlinejewelleryorder;andthedelivaryisfreeofcostfortheorders
inAndheriitself.
</p>
</div>
<footerclass="footer-styletext-centercol-1">
<ahref="index.html"><imgclass="header-logo"src="img/download1.png"></a>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>
<ahref="tel:+1800000111">+1800000111</a><br>
<ahref="mailto:contact@example.com">contact@example.com</a><br>M
onday-Sunday:<br>
Lunch:12PM�2PM<br>
Dinner:6PM�10PM
</footer>
</body>
</html>

Page 14of40
ABOUT US PAGE OUTPUT:

Page 15of40
CATEGORY PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<liclass="active"><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>
<divclass="hero-img">
<imgsrc="img/category.png"class="img-100">
</div>
<div>
<tablealign="center">
<tr>
<td><a href="necklace.html"><img src="img/category necklace.jpg" class="img-
100"></a></td>
<td><a href="bracelet.html"><img src="img/category bracelet.jpg" class="img-
100"></a></td>
</tr>
<tr>
<tdclass="text-center"><ahref="necklace.html"><h4>Necklace</h4></a></td>
<tdclass="text-center"><ahref="bracelet.html"><h4>Bracelet</h4></a></td>
</tr>
<tr>
<td><ahref="ring.html"><imgsrc="img/categoryring.jpg"class="img-100"></a></td>

Page 16of40
<td><a href="earrings.html"><img src="img/category earrings.jpg" class="img-
100"></a></td>
</tr>
<tr>
<tdclass="text-center"><ahref="ring.html"><h4>Rings</h4></a></td>
<tdclass="text-center"><ahref="earrings.html"><h4>Earrings</h4></a></td>
</tr>
</table>
</div>
<footerclass="footer-styletext-centercol-1">
<ahref="index.html"><imgclass="header-logo"src="img/download1.png"></a>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>
<ahref="tel:+1800000111">+1800000111</a><br>
<ahref="mailto:contact@example.com">contact@example.com</a><br>M
onday-Sunday:<br>
Lunch:12PM�2PM<br>
Dinner:6PM�10PM
</footer>
</body>
</html>

CATEGORY PAGE-OUTPUT:

Page 17of40
Page 18of40
Page 19of40
NECKLACE PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>

<div>

<tableclass="img-100">
<tr>
<thcolspan="4"><h2>Necklaces<h2></th>
</tr>
<tr>

<td><imgsrc="img/necklace1.jfif"class="img-100"></td>
<td><imgsrc="img/necklace2.jpg"class="img-100"></td>
<td><imgsrc="img/necklace3.jpg"class="img-100"></td>
<td><imgsrc="img/necklace4.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>KundanNecklace<br>Price:1,00,000</h6></td>
<tdclass="text-center"><h6>ChokerNecklace<br>Price:2,00,000</h6></td>
<tdclass="text-center"><h6>DiamondSet<br>Price:3,99,000</h6></td>
<tdclass="text-center"><h6>DiamondNecklace<br>Price:5,00,000</h6></td>

<td></td>
</tr>
<tr>

<td><imgsrc="img/Necklace5.jpg"class="img-100"></td>
<td><imgsrc="img/necklace6.jpg"class="img-100"></td>
<td><imgsrc="img/necklace7.jpg"class="img-100"></td>
<td><imgsrc="img/necklace8.jpg"class="img-100"></td>

</tr>

Page 20of40
<tr>
<tdclass="text-center"><h6>SliverpearlNecklace<br>Price:2,50,000</h6></td>
<tdclass="text-center"><h6>SliverNecklace<br>Price:1,50,000</h6></td>
<tdclass="text-center"><h6>PlatinumChain<br>Price:4,50,000</h6></td>
<tdclass="text-center"><h6>PlatinumSet<br>Price:6,50,000</h6></td>

<td></td>
</tr>

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

NECKLACE PAGE-OUTPUT:

BRACELET PAGE-CODE:

<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
Page 21of40
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>

<div>

<tableclass="img-100">
<tr>
<thcolspan="4"><h2>Bracelet<h2></th>
</tr>
<tr>

<td><imgsrc="img/bracelet1.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet2.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet3.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet4.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>GoldBracelet<br>Price:50,000</h6></td>
<tdclass="text-center"><h6>GoldBraceletforMen<br>Price:45,000</h6></td>
<tdclass="text-center"><h6>WhiteDiamondBracelet<br>Price:90,000</h6></td>
<tdclass="text-center"><h6>DiamondBracelet<br>Price:75,000</h6></td>

<td></td>
</tr>
<tr>

<td><imgsrc="img/bracelet5.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet6.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet7.jpg"class="img-100"></td>
<td><imgsrc="img/bracelet8.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>SliverBracelet<br>Price:30,000</h6></td>
<tdclass="text-center"><h6>SliverBracelet<br>Price:70,000</h6></td>
<tdclass="text-center"><h6>PlatinumBracelet<br>Price:1,00,000</h6></td>
<tdclass="text-center"><h6>PlatinumBracelet<br>Price:85,000</h6></td>

Page 22of40
<td></td>
</tr>

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

BRACELET PAGE-OUTPUT:

RING PAGE-CODE:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"
rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>

Page 23of40
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>

<div>

<tableclass="img-100">
<tr>
<thcolspan="4"><h2>Rings<h2></th>
</tr>
<tr>

<td><imgsrc="img/Rings1.jpg"class="img-100"></td>
<td><imgsrc="img/Rings2.jpg"class="img-100"></td>
<td><imgsrc="img/Rings3.jpg"class="img-100"></td>
<td><imgsrc="img/Rings4.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>CoupleGoldRing<br>Price:30,000</h6></td>
<tdclass="text-center"><h6>GoldRing<br>Price:10,000</h6></td>
<tdclass="text-center"><h6>WhiteDiamondRing<br>Price:50,000</h6></td>
<tdclass="text-center"><h6>DiamondNecklace<br>Price:1,00,000</h6></td>

<td></td>
</tr>
<tr>

<td><imgsrc="img/Rings5.jpg"class="img-100"></td>
<td><imgsrc="img/Rings6.jpg"class="img-100"></td>
<td><imgsrc="img/Rings7.jpg"class="img-100"></td>
<td><imgsrc="img/Rings8.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>SliverRing<br>Price:45,000</h6></td>
<tdclass="text-center"><h6>SliverRing<br>Price:35,000</h6></td>
<tdclass="text-center"><h6>PlatinumRing<br>Price:1,50,000</h6></td>
<tdclass="text-center"><h6>PlatinumRing<br>Price:1,25,000</h6></td>

<td></td>
</tr>

Page 24of40
</table>
</body>
</html>
RING PAGE-OUTPUT:

EARRING PAGE-CODE:

<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>

Page 25of40
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>

<div>

<tableclass="img-100">
<tr>
<thcolspan="4"><h2>Earrings<h2></th>
</tr>
<tr>

<td><imgsrc="img/earrings1.jpg"class="img-100"></td>
<td><imgsrc="img/earrings2.jpg"class="img-100"></td>
<td><imgsrc="img/earrings3.jpg"class="img-100"></td>
<td><imgsrc="img/earrings4.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>GoldEarrings<br>Price:5,000</h6></td>
<tdclass="text-center"><h6>GoldEarrings<br>Price:10,000</h6></td>
<tdclass="text-center"><h6>DiamondEarrings<br>Price:25,000</h6></td>
<tdclass="text-center"><h6>DiamondEarrings<br>Price:50,000</h6></td>

<td></td>
</tr>
<tr>

<td><imgsrc="img/earrings5.jpg"class="img-100"></td>
<td><imgsrc="img/earrings6.jpg"class="img-100"></td>
<td><imgsrc="img/earrings7.jpg"class="img-100"></td>
<td><imgsrc="img/earrings8.jpg"class="img-100"></td>

</tr>
<tr>
<tdclass="text-center"><h6>SliverEarrings<br>Price:45,000</h6></td>
<tdclass="text-center"><h6>SliverEarrings<br>Price:35,000</h6></td>
<tdclass="text-center"><h6>PlatinumEarrings<br>Price:75,000</h6></td>
<tdclass="text-center"><h6>PlatinumEarrings<br>Price:65,000</h6></td>

<td></td>
</tr>

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

Page 26of40
EARRING PAGE-OUTPUT:

Page 27of40
GALLERY PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">
</head>
<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<liclass="active"><ahref="gallery.html">gallery</a></li>
<li><ahref="feedback.html">feedback</a></li>
</ul>
</div>
<divclass="hero-img">
<imgsrc="img/galleries.jpg"class="img-100">
</div>

<div>
<tablestyle="padding:20px">
<tr>
<td><imgsrc="img/gallery1.jpg"class="img-100"></td>
<td><imgsrc="img/gallery2.jpg"class="img-100"></td>
<td><imgsrc="img/gallery3.jpg"class="img-100"></td>
</tr>
<tr>
<td><imgsrc="img/gallery4.jpg"class="img-100"></td>
<td><imgsrc="img/gallery5.jpg"class="img-100"></td>
<td><imgsrc="img/gallery6.jpg"class="img-100"></td>
</tr>
<tr>
<td><imgsrc="img/gallery7.jpg"class="img-100"></td>
<td><imgsrc="img/gallery8.jpg"class="img-100"></td>
<td><imgsrc="img/gallery9.jpg"class="img-100"></td>
</tr>
<tr>
<td><imgsrc="img/gallery10.jpg"class="img-100"></td>
<td><imgsrc="img/gallery11.jpg"class="img-100"></td>
<td><imgsrc="img/gallery12.jpg"class="img-100"></td>
</tr>

</table>
</div>
<footerclass="footer-styletext-centercol-1">
<ahref="index.html"><imgclass="header-logo"src="img/download1.png"></a>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>
Page 28of40
<ahref="tel:+1800000111">+1800000111</a><br>
<ahref="mailto:contact@example.com">contact@example.com</a><br>M
onday-Sunday:<br>
Lunch:12PM�2PM<br>
Dinner:6PM�10PM
</footer>
</body>
</html>

GALLERY PAGE-OUTPUT:

Page 29of40
Page 30of40
Page 31of40
FEED BACK PAGE-CODE:
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i"rel="stylesheet">
<linkrel="stylesheet"href="css/style.css"type="text/css">

</head>

<body>
<div>
<ahref="index.html"><imgclass="header-logo"src="img/download.png"></a>
<ulclass="main-header">
<li><ahref="index.html">home</a></li>
<li><ahref="aboutus.html">aboutus</a></li>
<li><ahref="category.html">category</a></li>
<li><ahref="gallery.html">gallery</a></li>

<liclass="active"><ahref="feedback.html">feedback</a></li>
</ul>
</div>
<divclass="hero-img">
<imgsrc="img/map.jpg"class="img-100">
</div>
<divclass="col-1contact-us">
<tableclass="contact-form">
<tr>
<td>
<h3>OurJewellerystoreislocatedrightintheheartofthecity.</h3>
<h6>LOCATION</h6>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>

Page 32of40
<h6>CONTACT</h6>
<ahref="tel:+1800000111">+1800000111</a><br>
<a href="mailto:contact@example.com">contact@example.com</a>

<h6>OPENHOURS</h6>
Monday-
Sunday:<br>Timings:9
AMto10PM
</td>
<form> <td>

<labelfor="fname">FirstName</label>
<inputtype="text"id="fname"name="firstname"placeholder="Yourname"required>
<br><br>

<labelfor="lname">LastName</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name"required><br><br>

<labelfor="country">Place</label>
<selectid="place"name="place">
<optionvalue="vileparle">VileParle</option>
<optionvalue="santacruz">Santacruz</option>
<optionvalue="bandra">Bandra</option>

<optionvalue="Andheri">Andheri</option>
<optionvalue="jogeshwari">Jogeshwari</option>
</select><br><br>

<labelfor="telephone"id="telephone"required>Telephone</label>
<inputtype="text"id="telephone"placeholder="Yourtelephonenumber"><br><br>

<labelfor="email"id="email"required>E-Mail</label>
<inputtype="text"id="e-mail"placeholder="Youre-mailid"><br><br>

<labelfor="likes">Whatdoyoulikedaboutourstore?</label><br>

Service<inputtype="checkbox"name="likes"value="service"><br>Decor<inputt
ype="checkbox"name="likes"value="decor"><br>

Other<inputtype="checkbox"name="likes"value="other"><br><br>

<labelfor="visit">Willyou visitus again</label><br>


Yes<inputtype="radio"name="visit"value="yes"checked="checked">No<inputt
<br>
ype="radio"name="visit"value="no"><br><br>

<labelfor="feedback">Feedback</label>
Page 33of40
<textareaid="feedback"name="feedback"placeholder="Giveyourfeedback."style="height:200
px"></textarea><br><br>

<inputtype="submit"value="Submit"><br><br>
</form>
</td>
</tr>
</table>>

<footerclass="footer-styletext-centercol-1">
<ahref="index.html"><imgclass="header-logo"src="img/download1.png"></a>
<p>JuhuVersovaLinkRd,BharatNagar,FourBunglows,Andheri(West),Mumbai-400053</p>
<ahref="tel:+1800000111">+1800000111</a><br>
<ahref="mailto:contact@example.com">contact@example.com</a><br>M
onday-Sunday:<br>
Timings:9AMto10PM<br>Din
ner:6PMto10PM

</footer>
</body>
</html>

Page 34of40
FEEDBACK PAGE-OUTPUT:

Page 35of40
Page 36of40
Css program code:
body{margin:0;padding:0;font-family:'Cantarell',sans-serif;font-size:14px;}
.img-100{width:100%;

}
.header-logo
{
width:200px;h
eight:200px;
}

.main-header
{
list-
style:none;paddin
g-
top:50px;margin:0
;float:right;
}
.main-headerli
{
padding:055px;f
loat:left;
}
a
{
text-
transform:uppercase;text-
decoration:none;line-
height:105px;
}
.hero-imgimg
{

position:relative;
}
h1{
position:
absolute;top:20%;
color:#fff;l
eft:25%;
font-size:62px;
}
.text-center
{
text-align:center;
Page 37of40
}
h2

Page 38of40
{
font-size:45px;
}
p{
padding:050px;
}
h4{
font-
size:20px;font-
} weight:900;
.menu-item
{
max-
width:400px;margi
n:0 auto;padding:
10px;
}
a:hover{
color:#ff0000;
}
.activea{
color:#ff0000;
}
h3{
font-
size:28px;padding:0;m
} argin:0;
h6{

font-size:21px;
padding:10px0;margin:0;col
} or:#4233cc;
.col-1td{width:50%}
.col-1{padding:040px}
.col-1p{padding:0;margin:0;font-size:16px;}
.col-1 a{line-height: 1.6;text-transform:
none}footer{background:rgb(255,165,0);padding:10px0;}
h2span{color:rgb(255,165,0)}

input[type=text], select, textarea


{width:100%;
padding:12px;
border:1pxsolid#ccc;bor
der-radius: 4px;margin-
top:6px;
margin-bottom:16px;

input[type=submit]
Page 39of40
{background-color:#4CAF50;

Page 40of40
color:
white;padding: 12px
20px;border:
none;border-
radius:4px;

input[type=submit]:hover
{background-color:#45a049;
}
.contact-form
td{vertical-align:
top;padding: 030px;
}
.contact-us{
margin:40px0;
}
.footer-style
{padding:20px0
}

8) Skill Developed/ Learning Outcome of this Micro-Project:


From this Experiment, we learnt how to link Web Pages, How to add Images and Information in a Web
Page or Web Site, How to add Hyperlink, How to add CSS Programming Language in a HTML Web
Site, How to introduce Image as a button, and many more things.

9) Applications of this Micro-Project:


Choosing a Domain and Host
2. Back end Services
3. Clean Design
4. Effective Color Scheme, Branding and Functionality
5. Navigation, Usability, and Call to Action
6. Short Loading Times and Active Blog
7. Clean ,SEO-Friendly Code and Compatibility with Multiple Browsers
8. Integration with Social Media and Captcha Tests
9. Effective Security and Offsite Reviews Customer Testimonials and Tracking
10. Comprehensive Sitemap, Original Content, and Stock Images
11. Web pages development: HTML is heavily used for creating pages that are displayed on the wide web. Every page
contains a set of HTML tags including hyperlinks which are u sed for
connecting to other pages.
12. Web document creation: Document creation on the internet is dominated by HTML and its concept via DOM i.e.
document object model. HTML tags are inserted before and afterward or
phrases to locate their format and location on the page.
13. Internet navigation: This is one of the most important uses of HTML which is revolutionary. This

Page 41of40
NAME OF THE TEAM MEMBERS WITH THEIR ROLL NUMBERS:-
Roll Numbers of the Team Members Names of the Team Members
37 Dhruv Harsora
38 Hemil Shah
39 Kush Intwala
40 Jatin Sehgal
41 Jenil Joshi
42 Cavin Juneja

Ms. Smita Dandge


(Subject Guide)

Page 40 of40

You might also like