GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

SUBMITTED BY:

SHEKHAR ADAK

41790201817

UNDER THE GUIDANCE OF

Mrs. …….

SRI GURU TEGH BAHADUR INSTITUTE OF

MANAGEMENT AND INFORMATION TECHNOLOGY
(AFFILIATED TO GGSIPU UNIVERSITY, DELHI)

(2017-2020)

1
 TABLE OF CONTENT

SNO. CONTENT PAGE NO.

1 Declaration

2 Certificate

3 Acknowledgement

4 Introduction to HTML

5 Uses of HTML
6 Tags of HTML

7 Elements of HTML

8 Structure of an HTML document

9 The UL and OL Tag

10 Container tags and Empty tags

11 HTML Table

12 HTML Frames

13 HTML Forms

2
3
 DECLARATION

I hereby declare that the project work submitted to the Guru Gobind
Singh Indraprastha University is record of an original work done
by me under the guidance of Mrs., faculty member, Sri Guru Tegh
Bahadur Institute of Management And Informational
Technology.

…………………………

(Signature of the scholar)

Place: Delhi Name: Shekhar Adak

Date: Enrollment No. : 41790201817

4
 CERTIFICATE

This is to certify that SHEKHAR ADAK, student of Sri Guru Tegh

Bahadur Institute Of Management And Informational
Technology of course BBA B&I Batch, has completed his file work
title “….” under my guidance and supervision. This work is genuine
and authentic.

……………………………..

Signature of
guide

Mrs.

……………………………..

Place: Delhi Signature of scholar

Date:

5
 ACKNOWLEDGEMENT

I offer my sincere thanks and humble regards to Sri Guru Tegh

Bahadur Institute of Management and Information Technology ,
Guru Gobind Singh Indraprastha University, Delhi for imparting
us very valuable professional training in BBA (B&I). I pay my
gratitude and sincere regards to Mrs. ….., my project guide, for
giving me the cream of her knowledge. I am thankful to her as she
gave her moral support and guided me in different matters regarding
the topic. I am also thankful to her as she has been a constant source
of advice, motivation and inspiration. She was very kind and patient
while suggesting the outlines of the project and correcting my doubts

……………………..

Signature of Scholar

Name: SHEKHAR ADAK

Enrollment No.:41790201817

6
 Introduction to HTML

Hypertext Markup Language (HTML) is the standard markup

language for creating web pages and web applications. With
Cascading Style Sheets (CSS) and JavaScript, it forms a triad of
cornerstone technologies for the World Wide Web. Web browsers
receive HTML documents from a web server or from local storage
and render them 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. It 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 /> introduce content into the
page directly. Others such as <p>...</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.

7
 Uses of HTML

Hypertext Markup Language (HTML) is the standard markup

language for creating web pages and web applications. With
Cascading Style Sheets (CSS) and JavaScript it forms a triad of
cornerstone technologies for the World Wide Web.

Web browsers receive HTML documents from a web server or from

local storage and render them 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. It 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/> introduce content into the page
directly. Others such as <p>...</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 (Hyper Text Markup Language) is a language used for coding

websites. It is very powerful and supports a variety of features,
including:

8
 1. Text and all places where it is used, i.e. paragraphs, headings,
quotes, etc.
2. Multimedia: images, audio, and video,
3. The so-called canvas, which allows you to "draw" on the Web
page using JavaScript code.

Tags of HTML

Tag Description
<body> Defines the document's body
<b> Defines bold text
<br> Defines a single line break
<center> Defines centered text

Specifies column properties for each column within

<col>
a <colgroup> element

Specifies a group of one or more columns in a table

<colgroup>
for formatting
<font> Defines font, color, and size for text
<frame> Defines a window (a frame) in a frameset
<frameset> Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<height> Returns the height of an ImageData object

9
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<img> Defines an image
<input> Defines an input control
<li> Defines a list item
<ol> Defines an ordered list
<table> Defines a table
<td> Defines a cell in a table
<th> Defines a header cell in a table
<title> Defines a title for the document
<tr> Defines a row in a table
<ul> Defines an unordered list
<width> Specifies the width of the element

10
 Elements of HTML
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash as shown below with few tags −

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another

HTML element. There are some HTML elements which don't need to
be closed, such as <img.../>, <hr /> and <br /> elements. These are
known as void elements.

HTML documents consists of a tree of these elements and they

specify how HTML documents should be built, and what kind of
content should be placed in what part of an HTML document.

It is very much allowed to keep one HTML element inside another

HTML element −

Example
<html>

<head>
<title>Nested Elements Example</title>
</head>

<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>

11
</body>

</html>

This will display the following result −

This is italic heading

This is underlined paragraph

Structure of an HTML document

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 markup
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.

12
 Summary of Basic HTML Tags

The UL and OL Tag

There are three types of lists. The first two are bulleted and numbered
lists. Needless to say, those on high who name such things couldn't
simply call them "Bulleted" or "Numbered", but "Unordered" and
"Ordered".

 UL – Unordered lists:

Example:

 Apples
 Oranges
 Bananas

UL Code:
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
13
  OL – Ordered Lists:

Example:

1. Breakfast
2. Lunch
3. Dinner

OL Code:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>

Lists can be "nested" or put inside one another.

 Fruit
o Oranges
o Bananas
 Vegetables:
1. Peas
2. Corn

Be careful to close tags in the reverse order they were opened, and
with lists it can get confusing. The trick is to indent your code. Take a
look at this page's source code and you will see what I mean.

14
Container tags and Empty tags

1. Container Tags - A container tag in HTML is one which has

both opening and closing tags. There are some tags in HTML
which don't have a closing tag. They end within the same tag.
Examples:
<html> is a container tag, it has it's closing tag as </html>.
Other examples are <body>, <head>, <p> etc. These are called
container tags because they contain something, within the two
tags.

15
 2. Empty Tags - Empty tags in HTML are DOM Element Nodes
that never have end tags, and more importantly, they can only
have “attribute”, they can never have :

 Element childnodes (embedded tags)

 CDATA childnodes (raw text)
 comment childnodes

So innerText and innerHTML DOM APIs properties of such

Elements will always be null.

HTML Table
An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are bold and
centered. A table data/cell is defined with the <td> tag.

16
HTML Frames

HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document. A
collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.

17
Disadvantages of Frames

There are few drawbacks with using frames, so it's never

recommended to use frames in your webpages −

 Some smaller devices cannot cope with frames often because

their screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different
computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame
technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body>

tag. The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defines horizontal
frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall
open into the frame.

Frame's name and target attributes

One of the most popular uses of frames is to place navigation bars in

one frame and then load main pages into a separate frame.

Let's see following example where a [Link] file has following code
−

< html>
<html>

<head>
<title>HTML Target Frames</title>

18
</head>

<framesetcols="200, *">
<framesrc="/html/[Link]"name="menu_page"/>
<framesrc="/html/[Link]"name="main_page"/>

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

Here, we have created two columns to fill with two frames. The first
frame is 200 pixels wide and will contain the navigation menu bar
implemented by [Link] file. The second column fills in remaining
space and will contain the main part of the page and it is implemented
by [Link] file. For all the three links available in menu bar, we
have mentioned target frame as main_page, so whenever you click
any of the links in menu bar, available link will open in main page.

Following is the content of [Link] file

<html>

<bodybgcolor="#4a7d49">
<ahref="[Link]
<br/>
<br/>

19
<ahref="[Link]
a>
<br/>
<br/>

<ahref="[Link] News</a>
</body>

</html>

Following is the content of [Link] file −

<html>

<bodybgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed
here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>

20
HTML Forms

 The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending

on the type attribute.

Here are some examples:

Type Description

<input type="text"> Defines a one-line text input field

21
 Defines a radio button (for selecting one of
<input type="radio">
many choices)

<input Defines a submit button (for submitting the

type="submit"> form)

 Text Input

<input type="text"> defines a one-line input field for text

input:

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

This is how it will look like in a browser:

First name:

Last name:

 Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

22
Example
<form>
<input type="radio" name="gender" value="male" checked>
Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

Male
Female
Other

 The Submit Button

<input type="submit"> defines a button for submitting the

form data to a form-handler.

The form-handler is typically a server page with a script for

processing input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

23
This is how the HTML code above will be displayed in a browser:

First name:
Mickey

Last name:
Mouse

24
Q1. Write the coding for inserting the table of production and sales table.

25
Q2. Write the code in HTML to demonstrate various formatting style

And insert an image in web page.

26
Q3. Write the code in HTML to design a table with different style.

27
Q4. Write the code in HTML to change background Web Page.

28