PROJECT REPORT OF COMPUTER APPLICATION

ON

HYPER TEXT MARKUP LANGUAGE

(HTML)
BATCH 2014-2017

Submitted By :

Submitted to:

Deepak Minhas

Ms. Himja Khurana

02220601714

Assistant

professor

TRINITY INSTITUTE OF PROFESSIONAL STUDIES

AFFILIATED TO GURU GOBIND SINGH INDRAPRASTHA

UNIVERSITY

TABLE OF CONTENTS
S.N
O.
1.

TOPIC

PAGE
NO.

Practical 1 Demonstrate the use of title

and font tag.

3-10

use of Title tag

use of Font tag
Font size
Font color
Font face

2.

Practical 2 Demonstrate the use of

different list tags

11-25

Ordered list
Unordered list
3.

Practical 3 Demonstrate the use of

image tags.

4.

26-33

Image source
Image alternate name
Height and width
Image link

Practical 4 Make a homepage of an Ecommerce website.

34-36

SIGNAT
URE

PRACTICAL 1
Q1. Demonstrate the use of Title and Font Tag.
A1. The <title> tag is required in all HTML documents and it defines the title of the
document.
The <title> element:
Defines a title in the browser toolbar.
Provides a title for the page when it is added to favorites.
Displays a title for the page in search-engine results.

HTML CODE: <title>title for the document</title>

OUTPUT:

The title of the document can be viewed on the tab of the web browser

 FONT TAG:
The HTML element <font> is a paired tag used to change the way text is
displayed within <font>...</font> tags. The effect is controlled by a
number of attriutes:
1. SIZE: The value of this attribute isa signed number, usually in the range
-7 to 7. It changes the current font size.

OUTPUT:
6

2. COLOR: The color of the text can be changed. The value associated with the
tag specifies a color.
7

OUTPUT:

3. Face: The face attribute specifies the font of the text inside a <font> element.

OUTPUT:

10

PRACTICAL 2
11

Q2. Demonstrate the use of different list tags.

A2.

When you want to show various items on the web page, it becomes
necessary to list them. Listing is also needed when you are cataloging and indexing
various objects.
HTML provides us with 3 types of lists. They are:
1.
2.
3.

1.

Ordered List: <ol> - </ol>

Unordered List: <ul> - </ul>
Description List: <dl> - </dl>

Ordered list: The ordered list helps us to keep an organised inventory, wherein
the list items are ranked. It uses the <ol> and </li> tags. <ol> indicates ordered list
and </li> indicates list item. <ol>starts a list, </li> shows individual item against a
number.

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type

Description

type="1"

The list items will be numbered with numbers (default)

type="A"

The list items will be numbered with uppercase letters

type="a"

The list items will be numbered with lowercase letters

type="I"
numbers

The list items will be numbered with uppercase roman

type="i"
numbers

The list items will be numbered with lowercase roman

ORDERED LIST:
12

HTML CODE:
<ol>
<li>first list item </li>
<li>second list item</li>
<li>third list item</li>
</ol>

OUTPUT:
13

Uppercase Letters OR Type A

14

HTML CODE:

<ol type="A">
<Li>first item</li>
<Li>second item</li>
<Li>third item</li>
</ol>

OUTPUT:

15

UPPERCASE ROMAN NUMBERS OR TYPE I

16

HTML CODE:

<ol type="I">
<Li>first item</li>
<Li>second item</li>
<Li>third item</li>
</ol>

OUTPUT:
17

2.

UNORDERED LIST: It is called so as there is no order in which the item can

be listed. They use bullets so as to rank all the items equally. Unordered list uses the
18

<ul> and </li> tags. <ul> indicates unordered list and </li> indicates list items. <ul>
begins the list and </li> shows individual items against the bullets.
The list items will be marked with bullets (small black circles):

Unordered HTML List: The Style Attribute

Style

Description

list-style-type: disc

The list items will be marked with bullets (default)

list-style-type: circle

The list items will be marked with circles

list-style-type: square

The list items will be marked with squares

list-style-type: none

The list items will not be marked

UNORDERED LIST
19

HTML CODE:

<ul>
<Li>first item</li>
<Li>second item</li>
<Li>third item</li>
</ul>

OUTPUT:
20

CIRCLE:
21

HTML CODE: <ul style="list-style-type:circle">

<Li>first item</li>
<Li>second item</li>
<Li>third item</li>

OUTPUT:
22

SQUARE:
23

HTML CODE: <ul style="list-style-type:square">

<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>

OUTPUT:
24

25

PRACTICAL 3
Q3. Demonstrate the use of image tag.
A. The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Images are not technically inserted into an HTML page; images are linked to
HTML pages. The <img> tag creates a holding space for the referenced image.

IMAGE SOURCE: The required src attribute specifies the URL of the
image.

HTML CODE: <img src=location of the image\image

name.jpg>

26

OUTPUT:

27

IMAGE ALTERNATE NAME: The required alt attribute specifies an

alternate text for an image, if the image cannot be displayed.

28

The alt attribute provides alternative information for an image if a user for some
reason cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader).

HTML CODE: <img src=image name.jpg alt=alternate name>

OUTPUT:
29

30

HEIGHT AND WIDTH: The height attribute specifies the height and width of
an image, in pixels.

HTML CODE: <img src=location of the image\image

name.jpg height=value in pixels width=value in pixels>

31

OUTPUT:

32

CREATING AN IMAGE LINK: In order to link image the <A> tag must be
used. The <A> tag defines the source for the link.
The <A> tag is a container tag. First the link has to be defined and then the content
to activate must be displayed.

HTML CODE: <A href="url">

<img src="location of the image\image
name.jpg"
alt="alternate name">

33

OUTPUT:

34

35

PRACTICAL 4
Q4. Make a home page of an E-Commerce website using div tag.

36

37

OUTPUT:

38