ABSTRACT

A business’s online presence, regardless of industry, can have a massive impact on

its success. In this day and age, some businesses still don’t realize that a majority

of their customers will visit their website before making a purchase.Having a

strong online presence, particularly a website, can be make or break for generating

more revenue. If you plan on leveraging digital marketing to increase your leads

and grow your business, you'll likely want to drive traffic to a website or landing

page. To do this effectively, leverage historic traffic that has been going to your

website so you can target the most qualified customers and get the best ROI on

your ad spend. This is something that can’t be set up retroactively, so it is best to

get your website running early even if you’re not planning on running ads at the

moment.

Websites have become essential to business today.

1|Page
 INTRODUCTION

HTML (HYPERTEXTMARKUP LANGUAGE)

The HyperText Markup Language, or HTML is the standard markup 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

2|Page
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 behavior and content of web pages. Inclusion of CSS defines the look and

layout of content.

Computer programmers must think through the tasks that they want their programs

to perform, and then develop an elaborate (and usually complicated) series of

instructions to tell the computer what to do. Although you do need to do some

thinking and planning when you use HTML, it is not nearly that difficult. So,

how does Hypertext Markup Language work?

Hypertext refers to the way in which Web pages (HTML documents) are linked

together. When you click a link in a Web page, you are using hypertext. It is this

system of linking documents that has made the World Wide Web the global

phenomenon it has become.

Markup Language describes how HTML works. With a markup language, you

simply “mark up” a text document with tags that tell a Web browser how to

structure it. HTML originally was developed with the intent of defining the structure

3|Page
of documents (headings, paragraphs, lists, and so forth) to facilitate the sharing of

scientific information between researchers. All we need to do to use HTML is to

learn what type of markup to use to get the results you want

4|Page
 FOUR KEY CONCEPTS

The first step toward understanding and working with HTML is learning the basic terms

that describe most of the functions of this language. You will come across these terms

repeatedly as you use HTML and if you understand them, you will have progressed a long

way toward comprehending HTML, not to mention XHTML.

ELEMENTS

All HTML pages are made up of elements. Think of an element as a container in which a

portion of a page is placed. Whatever is contained inside the element will take on the

characteristics of that element. For example, to identify a heading on a page, you would

enclose it in a heading element <h1> </h1>.

If you want to create a table, you put the table information inside the table element

<table> </table>. To construct a form, you need the form element <form> </form>.

TAGS

Often, you’ll find the terms element and tag used interchangeably. It’s fairly common, but

not strictly accurate. An element is made up of two tags: an opening tag and a closing tag.

Although it might seem somewhat picky to make this distinction, when you begin to work

with XHTML (Extensible Hypertext Markup Language), it will be a very important

difference to remember.

5|Page
 If you get into the habit of distinguishing elements and tags from the very beginning,

you’ll save yourself some confusion down the line.

All tags are constructed the same way. The tag begins with a “less than” sign (<), then the

element name, followed by a “greater than” sign (>). For example, an opening tag for

the paragraph element would look like this: <p>. The only difference in a closing tag is

that the closing tag includes a slash (/) before the element name: </p>. Your content goes

between the tags.

A simple paragraph might look like this:

<p>This is an HTML paragraph.</p>

Some elements do not use closing tags because they do not enclose content. These are

called empty elements. For example, the line break element <br> does not require a closing

tag. In the case of empty elements, add a closing slash after the element name, like this:

<br />. When a browser sees the slash, it will recognize the element as one that does not

need a separate, closing tag.

6|Page
 ATTRIBUTES AND VALUES

Attributes are another important part of HTML markup. An attribute is used to define the

characteristics of an element and is placed inside the element’s opening tag.

For example, to specify the size of an image or graphic on your page, you would use

the image element <img /> along with the height and width attributes:

<img height=" " width=" " />

Be sure to notice that an equals sign and a set of quotation marks follow both the height

and the width attributes.

That’s because attributes need values to go with them. In the case of the preceding

illustration, you might add a value of 200 to cause your image to display at a size of 200 x

200 pixels:

<img height="200" width="200" />

vlues work together with attributes to complete the definition of an element’s

characteristics. An easy way to think of how attributes and values work together is to

compare them with nouns and adjectives. A noun names something; an adjective describes

it. An attribute names a characteristic; a value describes it.

7|Page
 Imagine that you are trying to identify a person’s hair color with a markup

language. Hair would be the element, color the attribute, and red the value. You might

write such a description as follows:

<hair color="red">Red-headed Person</hair>

NESTING

Often you will want to apply more than one element to a portion of your page. An essential

concept to understand is nesting. Nesting simply means that elements must never overlap.

Properly nested elements are contained inside one another, as in the following:

<a> <b> <c> </c> </b> </a>

Sometimes it’s easier to understand the concept if the elements are displayed vertically,

like this: 

<a><b><C>

   </c>

</b>

</a>

The following elements, on the other hand, are overlapping:

<a>

   <b>

</a>

       <c>

   </b>

       </c>

8|Page
Web browsers displaying an HTML page can be pretty forgiving if your elements are not

properly nested; however, overlapped elements can create garbled results, particularly if

you are trying to construct frames or tables. Also, when you become familiar

with XHTML’s stricter standards, you’ll discover that overlapping elements are an

absolute “no-no.”

9|Page
 INTERACTIVE RESTAURANT WEBSITE

This is dynamic website which gives all the information about a restaurant website where

one can prder food online or know about the restaurant in and out.

The website has been developed in HTML.  HTML is a markup language which is in reality

a backbone of any site, every site can’t structure without the knowledge of html.

If we make our web page only with the help of html, then we can’t add many of the effective

features in a web page, for making a web page more effective we use various platforms such

as HTML.

So here we are using these entire features to make our web pages more effective as well as

efficient.

In this project, we will create an interactive homepage of a restaurant, where the background

image will change when we hover over a menu option. For example, if you hover over menu

navigation, it will display a menu card, if you hover over the home, it will show the default.

You have to give your image names and locations for this to work.

This functionality is done through jQuery. Same way, the ‘order now’ button will keep

flashing. We have done this by using @keyframes functionality which we have used in our

animated website project too.

10 | P a g e
 TECHNOLOGY USED IN THIS WEBSITE

HTML- Page layout has been designed using HTML.

CSS- CSS has been used for the designing part.

JAVASCRIPT – All the Animations and the validation task has been developed by

Javascript.

SUPPORTED OPERATING SYSTEM

WINDOWS – This project can be easily configured in windows operating system.

LINUX – We can also configure this project on Linux OS.

MAC - We can also configure this project on MAC OS.

11 | P a g e
 SOURCE CODE:

<html>

<head>

<style>

body{

font-size:20px;

color: white;

background-size: cover;

.box{ width: 900px;

float:right;

border:1px solid none;}

.box ul li{

width: 120px;

float:left;

margin: 10px auto;

text-align: center;

.mainmenu

.mainmenu a

.mainmenu a:hover

.mainmenu img{

position: fixed;

12 | P a g e
z-index: -1;

top:0px; left:0px; width:100%; height: 100vh;

opacity: 0.9;

transition: all ease 0.5s;

.wd{

width: 300px;

height: 539px;

background-color: black;

opacity: 0.8;

padding: 55px;

.wd h1{

text-align: center;

text-transform: uppercase;

font-weight: 300px;

.wd h4{

text-align: justify;

color:darkgray;

font-weight: 100px;

.wd h2{

text-align: center;

13 | P a g e
 text-transform: uppercase;

font-weight: normal;

margin: 40px auto;

.opt form , input[type="button"]{

background-color: black;

color:white;

/* padding:10px;*/

margin:-14px auto;

padding-left: 50px;

padding-right: 50px;

text-align: center;

font-size: 16px;

form, input[type="button"] {

animation: glowing 300ms infinite;

font-weight: 500%;

@keyframes glowing {

0% {

background-color: red;

50% {

background-color: orange;

14 | P a g e
 }

100% {

background-color: blue;

</style>

</head>

<body>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.mi
n.js"></script>

<script>

$(function(){

var image = $(".mainmenu").find('img').attr('src');

$(".mainmenu a").mouseover(function(){

var newimg = $(this).attr('data-image');

$(this).parent().find('img').attr("src", newimg);

});

});

</script>

<div class="box">

<div class="mainmenu">

<img src="food.png">

<a data-image = "food.png" href=""> Home</a>

<a data-image = "menucard.jpg" href=""> Menu</a>

15 | P a g e
<a href=""> FAQ</a>

<a href=""> Contact</a>

</div>

</div>

<div class="wd">

<h1> Welcome to XXX </h1>

<h4> <i>Order delicious food online, 100% quality, safety and

taste assured.</i></h4>

<h2> Call 9999999999 for reservations</h2>

<div class="opt">

<form action="" method="post">

<input type="button" value="ORDER NOW">

</form>

</div>

</div>

</body>

</html>

16 | P a g e
OUTPUT OF THE WEBSITE-

Fig 1. Website homepage

Upon hovering on the menu navigation, the page will look like:

Fig 2. Menu card

17 | P a g e
 CONCLUSION

By using the defined technologies we have created a website (ebooks.com), right

now we are developing some more  WebPages, and now working on adding further
services such as Downloading and online reading.

 In the end, we want to conclude that practical training is of great importance as it
gives the exposure and an opportunity of presenting a seminar before the audience.

It develops a sense of responsibility and a feeling of togetherness of working

together thereby developing a team spirit for the successful completion of the
project.

It is an important opportunity which provides the working environment of an

organization as to how to deal with the professionals and the customers which plays
an important role in building customer satisfaction.

18 | P a g e
REFERENCES:-

https://www.sourcecodester.com/
https://www.wikipedia.com/
https://www.geeksforgeeks.com/
https://www.youtube.com/

19 | P a g e