HTML (Hyper Text Markup Language) Project

GURU GOBIND SINGH
INDRAPRASTHA UNIVERSITY
NEW DELHI
Practical Lab File
ON
E-Commerce Lab(BBA-108)
Submitted in partial fulfillment of the requirement
for the award of degree of BBA (G)
Session:2018-21
SUBMITTED AT:
DELHI SCHOOL OF PROFESSIONAL STUDIES & RESEARCH
ROHINI, NEW DELHI-85
[AFFILIATED TO GGSIPU-NEW DELHI]
Submitted By: Submitted To:
Ankit Kumar Gupta Ms. Simple Batra
42712501718 (Assistant Professor)
BBA Semester 2
Section – “A”

Lab Practical File IntroductionTo IT
ii
INDEX
S No. TITLE Page No. Signature
HTML
1 Introduction To HTML 3-6
2 Basic HTML Code 7
3 Paragraph Tag 8-9
4 P Align Tag 10
5 Background image & Text Color 11-12
6 Block quote 13
7 Font Tag 14
8 Font Face 15
9 Font Color 16
10 Base Font Tag 17-18
11 Heading Tag 19
12 Demo Of Headings 20-21
13 Horizontal Row Tags 22
14 Ordered List 23-24
15 Pre Tag 25-26
16 Unordered List 27-28
17 <br> tag 29-30
18 Comment Tag 31-32
19 Implicit & Explicit Tag 33-36
20 Division Tag 37-38
21 Marquee 39-40
22 Nested List 41
23 Menu List 42-43
24 Link Demo 44
25 Image Tags 45
26 Directory List 46
27 Definition List 47-48
28 Working With Table(table tags) 49
29 Creating Forms 50-51
30 Frames 52-53
31 CSS 54-72

3
Introduction To HTML
HTML of Hyper Text Markup Language is the standard which is used by World Wide Web
documents. We use a program to view documents. It is not a programming language even though
it is termed as a language. The basic element of an HTML page and therefore any document on
the Web is ASCII text. HTML uses what is called a tag and it is represented by the angle
brackets “<” and “>”. Any text which is contained by the angle brackets is considered as an
HTML tag by the browser and interpreted accordingly. Since HTML uses ASCII text, the Web
documents are delivered over the network such that they are not platform dependent. Hence only
a Web browser is required which can interpret HTML files irrespective of whether it is running
on a machine using windows or UNIX or Macintosh or on any other operating system or
hardware platform.
 HTML Basics
 Tools required for Web Publishing
A web page can be very easily created using any simple text editor, in Window 95, one can use
Notepad or Word pad. All HTML files are plain ASCII text files with .htm or .html extension.
Any program, which has the capability to save files in ASCII format, can be used to create
HTML files.You also require a Web browser to view your files. Internet Explorer or Netscape
Navigator/Communicator can be used for this.In internet Explorer, the File | Open command
should be used to open a file on the local host or on the internet.
 Document Tags
The first HTML tags you are going to look at are the document tags. These are the tags that are
required for every HTML page you create. They define the different parts of the document. And
HTML document has two distinct parts – a head and a body. You enter the title of the page, and
other commands in the head of the HTML document.To create the head portion of your HTML
document and to give the document a title, enter the following text in your text editor:
 <HEAD>

4
</HEAD>
This tells a Web browser what information should be included in the head portion of the
document .The body is where you will do most of your work; you will enter text, headlines,
graphics, etc. To add the body section, start after the </HEAD> tag, and enter the following:
 <Title>
This portion tells us by what name should it call the document in the title bar of browser
window.
<TITLE> A Web Page </TITLE>
 <BODY>
</BODY>
Between these two tags, you will eventually enter the rest of the text and graphics for your Web
page. In order that all Web browsers recognize that this is an HTML document (remember that
you are saving it as ASCII text and so the browser could be confused), you need to add some
tags on either side or the head and body tags you have created. Before the first <HEAD> tag,
enter the following:
 <HTML>
After the last </BODY> tag, enter the following in the document:
</HTML>
Now, at least as far as your Web browser is concerned . you have a complete Web document.
Example: Creating an HTML Template With what you know till now, you can create a
template. By saving this template as a generic text file, you will have a quick way to create new
HTML files. Start by entering the following in a blank text file.
<HTML>
<HEAD>

5
<TITLE> Enter Title </TITLE>
</HEAD>
<BODY>
This is the body of and HTML page.
</BODY>
</HTML>
Save it with the name template.html. Now, whenever you are ready to create a new HTML,
document, simply load template.html into your text editor and use the Save As command to
rename it. Then, you can edit the renamed file.
Example: Hello World
While learning a new programming language, it has become a convention that the first program
you create is designed to say “Hello World” (after the ‘C’ language classic by Kernighan &
Ritchie). HTML isn’t a programming language, but you can use the Hello World example to
prove that your template is a complete Web document. Load the template.html file into your text
editor, and use the Save As command to rename it as hello_world.html or something similar.
Now, edit the document so that it looks like this:
<HTML>
<HEAD>
<TITLE>Hello World Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>

6
</HTML>
Select the File | Save command from notepad. Now open your Web browser and select the File |
Open menu option. In the dialog box, find the document hello.html and select OK to load it into
your Web browser.

7
Basic html code

8
ParagraphTag :
All the text that you enter on a page should come between the <BODY> and </BODY> tags.
The body tags are container tags that tell a Web browser what parts of the HTML document
should be displayed in the browser window. You have seen that you can just type text into an
HTML document and it will be displayed in the browser. Technically, though, most of the text
you type should be in another container tag-the <P> (paragraph) tag. This tag is used to inform a
Web browser what text in your document constitutes a paragraph.
This is an example displaying the use of the paragraph tag. <p> .This will create a line break and
a space between lines.

9

10
P Alignment Tag :

11
BackgroundImage and text Color :

12
Text Color:

13
Block quote Tag :

14
Font Tag :

15
Font Face Tag :

16
Font Colors :

17
Base FontTag :
The <BASEFONT> tag can be used to set the standard font size, face, and color for text. The
choices made in the <BASEFONT> tag remain in place for the rest of the document, unless they
are overridden by a FONT element. Also attributes can be changed by another <BASEFONT>
tag any time in the document. <BASEFONT> is a tag and not a container and so there is no
</BASEFONT> end tag.

18

19
Heading Tag : One of the ways in which you can differentiate a portion of text from the rest
of it is by using Header tags. These are container tags and range level 1 to 6. They allow you to
create different levels of emphasized headlines to help you organize your documents.
Example :
<HTML>
<HEAD>
<TITLE> Heading Levels </TITLE>
</HEAD>
<BODY>
<H1> This is level 1 heading </H1>
</BODY>
</HTML>

20
Demo of Headings :

21

22
Horizontal Row Tags :

23
Ordered List :
<OL> and </OL> tags along with <L1> and <LH> tags, are used to create ordered lists in Web
documents. Listing 4.11 explains the use of an ordered list

24

25
Pre Tag :
The <PRE> container is the most common and useful pre-formatting tag. Text in a <PRE>
container is basically free form, with line feeds causing the line to break at the beginning of the
next line. Any of the physical or logical text formatting elements can be used inside the <PRE>
tag. A common use of the <PRE> container is to display large blocks of computer code, which if
reformatted by the Browser would be difficult to read.
However, text within the <PRE> container is displayed in a mono-spaced font in the reader’s
viewer. This tends to make preformatted text look out of place.

26

27
Unordered List :
Unordered lists are also termed a bulleted lists, and they are very similar to ordered lists. <UL>
and </UL> tags are used to create unordered lists. Listing 4.13 explains the use of an unordered
list. And it is followed by the rendition of this Web page by Internet Explorer. You can see that
the TYPE attribute of the <LI> tag when has a value of CIRCLE creates a circle and when it is
DISC it creates a filled circle which is used for bulleting.

28

29
Break Tag :
But, what if you want to decide where a line is going to end? Consider the example of entering
an address in a Web document, as follow:
<P>
Students of MCA
Rohini, New Delhi
</P>
It looks all right when you type it into your text editor. However, when it is displayed in a Web
Browser.
The address becomes illegible. We already know what the problem is. Web browsers ignore
extra spaces and return! But if you put each of these lines in a paragraph container, end up with a
space between each line and that would look wrong too.
The answer is the empty tag <BR>, which forces a line return in your Web document.

30

31
Comment Tag :
This tag is fairly unique, in that it is actually used to make the Web browser ignore anything that
the tag contains. That could be text, hypertext links, image links, even small scripts and
programs.
For now, you will use the comment tag to the hide text. The point in hiding the text is that it
allow you to create a private message that is intended to remind you of something or to help
those who view the ran HTML document to understand what you are doing. That is why it is
called the comment tag. For instance:
<! - - This is a comment that won’t display in a browser - - >
The comment tag is not the most elegant on in HTML, but it works. Anything you type between
< ! - - and - - > should be ignored by the browser. Even multiple lines are ignored. As with most
tags, the comment tag ignores returns.
Generally, you will use the comment tag for your own benefit, perhaps to mark a point in a
particular HTML document where you need to remember that you are supposed to update some
text, or perhaps, to explain a particularly confusing part of your page.

32
Here, nothing is appeared on the working area of html.

33
Implicit and Explicit Tag :
 Emphasizing Text Implicitly and Explicitly
Explicit tags (also often called physical tags) specifically tell the Web browser how the
designer wants text to appear physically. The browser has no say in the matter.
 Table
Tags Meanings
<B>, </B> Bold text
<I>, </I> Italic text
<U>, </U> Underline text
<strike></strike> Line through
<em></em> Emphasis
<strong></strong> Just like bold
<sup></sup> Superscript
<sub></sub> Subscript
<tt></tt> Type writer font
<address></address> Just like italic
<big></big> Just larger than normal font
<small></small> Just lower than normal font

34

35
Implicit tags allow the browser some freedom in displaying text. These are called logical
styles since they are relative to one another, depending upon the browser. These are different
from physical tags in mainly two ways:
1. Any Web browser that views them will always render these logical tags. Even text based
browsers, which are unable to show italic text, will display the <EM> or <STRONG>
tags by underlining, boldfacing, or highlighting the text.
2. Secondly, these tags are generally not effective when used together, Where
<B><I> text </I></B>
will sometimes offer useful results,
<EM><STRONG> text </STRONG></EM> rarely will. Combining these tags
with other tags (such as header tags or physical tags) is often either ineffective or
redundant.

36

37
Division Tag :
If you want to define the alignment for an entire block of page elements, the <DIV></DIV>
container <DIV stands for division) can be used to enclose it. The ALIGN attribute is supported
by <DIV> and so you could use it to align a block of text and graphics to CENTER, an in this
example:
The ALIGN attribute can also assume the values LEFT. OR RIGHT.

38

39
Marquee Tag :
 <MARQUEE> </MARQUEE> tags
Displays text as scrolling marquee

40

41
Nested List :

42
Menu List :

43

44
Link Demo :

45
Image Tags :

46
Directory List :

47
Definition List :
These lists are also termed as glossary lists. These lists have a format very similar to a dictionary.
<DL>,<DD> and <DT> tags are used to define definition lists. <DL> tag provides beginning as
well as ending line breaks. <DT> tag marks the term whereas <DD> tag provides beginning as
well as ending line breaks. <DT> tag make the term whereas <DD> tag defines the paragraph.
Following is a listing, which uses a definition list.

48

49
Working with Tables (Table Tags) :

50
Creating Forms :
Forms are HTML elements which allow web users to interact with the web site developer,by
sending the requested information,in the form of text,emnus,checkboxes,radio buttons and other
command buttons.
<form Name=”f1” method=”post” action=”target file”>
</form>
 <Input> tag
This tag is an open one and is used to add graphical user components such as text fields,
password fields , checkboxs , radio buttons ,reset buttons and submit buttons. The attributes for
the <input> tag are:
Name:It defines the name for the data .This field is required for all the types of input except
submit and
Clear
SIZE: This is the size of the input field in number of characters for text or password.
Maxlength: The attribute specifies the maximum number of characters to be allowed for a text
or password field.
Value:For a text or password field ,it defines the default text displayed .For a check box or radio
button,it specifies the value that is returned to the server if the box or button is selected .For
submit and reset buttons,it defines the text inside the button.
Checked:This attribute sets a check box or radio button to “on”.it has no meaning for any other
type of <input> tag
Type: This sets the type of input field you want to display.

51

52
Frames :
 Frames in HTML
Frame provide an effective way to organize web documents,visually and also logically by
dividing the page into different parts.
 Attributes of the <frame> tag
The <frame>,which is an open tag,has the following attributes:
The MARGINWIDTH and MARGINHEIGHT attributes can be used to control the width of the
frame’s interior margins.
Ex:<frame marginheight=”10” marginwidth=”15”>
This would render a frame with top and bottom interior margins 10 pixcels wide, and left and
right margins 15 pixcels wide.scrolling of frames can be controlled using the scrolling attribute
of the <frame> tag.The Syntax of this attribute is
<frame scrolling=”yes|no|auto”>

53

54
C.S.S (Cascading Style Sheets)
Separating Presentation from Content
 It is recommended that presentation should be separated from the content. This means that the
use of formatting tags should be minimized inside an HTML script. This is done using a style
sheet.
Cascading Style Sheets
 Cascading Style Sheets is a stylesheet language used to define how HTML documents are
presented as a Web page. It was created to enforce a standard in formatting Web page content
across browsers. CSS Level 2 or CSS2 is the current version and features more functionalities
not found in CSS1. Basically, a style sheet is a set of rules that define the layout of a document
such as margins, fonts, and colors.
Types of Style Sheets
1. External - This is the most favored style sheet because style rules are placed in a separate
file allowing it to be used in all throughout the site. The extension name of a style sheet
is .css. The tag is used to link the style sheet file to a document.
Example: < link src= "style.css" rel="stylesheet" / >
- style.css refers to the name of the name of the text file containing the style definitions.
2. Internal - Style rules are defined in the head section of a document using the tags.
Take note how the style rules affect the different elements in the example below.
Also, take note that the style properties in the style attribute are separated using semi-
colons. You can also have multiple style properties in the internal and external style sheets.
If both external and internal style sheets are used by a document, the external is applied
first before the internal style sheet. The internal style sheet will override the rules stated in
the external style sheet.
3. Inline - Style rules are applied by indicating them inside the HTML tag using
the style attribute.
An inline style has the highest priority and overrides the style rules found in the external

55
and internal style sheets.
Take note how the style definition for < td > applies its own style rules over what is stated
in the < style >< /style > tags.
Creating Style Rules
 Style rules may be defined for different tags as you have seen in the previous examples. While
you may set the general appearance of the content based on the tag, CSS allows you to define
rules that may be applied on selected HTML elements based on your defined classifications.
1. Class Selectors - style rules may be created for use with the class attribute of HTML tags.
You may create a class selector for a specific tag or a generic one for use with different
tags.
2. id Selectors - style rules may be created for use with the id attribute of HTML tags.
Compared to class selectors, id selectors are applied only to one element since no two
elements should have the same id. id selectors are mainly used to define the presentation of
the major sections of a document.
Multiple Style Rules
 Style rules may be defined in the same style sheet or in multiple style sheets. As mentioned,
internal style sheets overrides those found in an external style sheet and an inline style sheet
will override those found in the internal and external style sheets. Style rules found in the
different types of style sheets are combined andcascades into the final style sheet.
CSS Properties
 Below are lists of CSS properties that you can use to define the rules in your style sheet. The
CSS properties below are grouped into categories but you may combine them in defining your
style rules.
Background Properties - used to define the background of an HTML element.
PROPERTY DESCRIPTION VALUES

56
background-color Sets the background
color
 color name
 color in hexadecimal format
 transparent
Ex: background-color: white;
background-image Sets the background
image
 url ('URL') – URL refers to the location
of the image file.
 none
Ex: background-image: url
('images/background.gif');
background-
attachment
Sets whether or not
the image will scroll
with the page
 scroll (default)
 fixed
background-position Sets the initial
position of the
background image
 top left (default)
 top center
 top right
 center left
 center center
 center right
 bottom left
 bottom center
 bottom right
 x% y%
 x y
Ex: background-position: center center;
background-position: 50% 25%;

57
background-position: 100 50;
background-repeat Sets how the
background will tile
or repeat in the page
 repeat (default)
 repeat-x
 repeat-y
 no-repeat
Ex: background-repeat: no-repeat;
Text Properties - used to define the text presentation of an HTML element.
color Sets the text color
 color name
Ex: color: blue;
direction Sets the direction of
the text
 ltr (default)
 rtl
Ex: direction: rtl; (right to left)
line-height Sets the space
between lines
 normal (default)
 a number
 npx (number of pixels)
 %
Ex: line-height: 2;
line-height: 50px;
line-height: 200%;
letter-spacing Sets the space
between the
 normal

58
characters Ex: letter-spacing: 50px;
text-align Sets the alignment of
text
 left (default)
 right
 center
 justify
Ex: text-align: center;
text-decoration Sets the decoration of
the text
 none
 underline
 overline
 line-through
 blink
Ex: text-decoration: underline;
text-indent Sets the indention of
the first line of text
 %
Ex: text-indent: 10px;
text-transform Sets the case of the
text
 none
 capitalize
 uppercase
 lowercase
Ex: text-transform: uppercase;
white-space Sets how white
(blank) space is
regarded
 pre
 nowrap
Ex: white-space: pre;

59
word-spacing Sets the space
between words
 npx (number in pixels)
Ex: word-spacing: 20px;
Font Properties - used to define the font style of an HTML element.
font-family Sets the list of fonts to
be used.
 family-name
Ex: font-family: verdana, arial, tahoma;
font-size Sets the size of the
font.
 small
 medium (default)
 large
 x-small
 xx-small
 x-large
 xx-large
 smaller
 larger
 %
Ex: font-size: x-small;
font-style Sets the style of the
font.
 italic
 oblique

60
Ex: font-style: italic;
font-variant Sets whether or not
text is displayed in
small caps.
 small-caps
Ex: font-variant: small-caps;
font-weight Sets the weight of the
font.
 bold
 bolder
 lighter
Ex: font-weight: bold;
Border Properties - used to define the background of an HTML element.
border-style Sets the style of the
border.
 none
 solid
 dotted
 dashed
 double
 groove
 inset
 outset
 ridge
Ex: border-style: solid;
border-width Sets the width of all
 thin

61
borders.  medium
 thick
 n (number in pixels)
Ex: border-width: 1;
border-color Sets the color of the
border.
 colorname
Ex: border-color: blue;
border-left-color
border-right-color
border-top-color
border-bottom-color
Sets the color of the
left, right, top, or
bottom border.
 colorname
Ex: border-left-color: blue;
border-left-style
border-right-style
border-top-style
border-bottom-style
Sets the style of the
left, right, top, or
bottom border.
 none
 solid
 dotted
 dashed
 double
 groove
 inset
 outset
 ridge
 Ex: border-left-style: solid;
Margin Properties - used to define the margins of an HTML element.

62
margin-left Sets the left margin
 auto (default)
 n (number in pixels [px], centimeters
[cm], or inches [in])
 %
Ex: margin-left: 50px;
margin-right Sets the right margin
 auto (default)
 %
Ex: margin-right: 50px;
margin-top Sets the top margin  auto (default)
 %
Ex: margin-top: 50px;
margin-bottom Sets the bottom
margin
 auto (default)
 %
Ex: margin-bottom: 50px;
Padding Properties - used to define the space between the border and content of an HTML
element.

63
padding-left Sets the left padding
 %
Ex: padding-left: 5px;
padding-right Sets the right padding
 %
padding-top Sets the top padding
 %
padding-bottom Sets the bottom
padding
 %
List Properties - used to define the style of an HTML list element.
list-style-type Sets the style of the
list
 none
For unordered lists
 disc (default)
 circle

64
 square
For unordered lists
 decimal (default)
 decimal-leading-zero
 lower-roman
 upper-roman
 lower-alpha
 upper-alpha
Ex: list-style-type: square;
list-style-position Sets the indention of
the items in a list
 outside
 inside
Ex: list-style-position: outside;
list-style-image Sets the image as the
bullet
 none (default)
 url ('URL')
Ex: list-style-image: url
('images/bullet.gif');
Dimension Properties - used to define the width and height of an HTML element.
height Sets the height
 auto (default)
 %
Ex: height: 100%; (use the available

65
vertical space in the page)
width Sets the width
 auto (default)
 %
Ex: width: 100%; (use the available
horizontal space in the page)
line-height Sets the space
between lines of text
 %
Ex: line-height: 200%; (double-space)
Classification Properties - used to define where and how an HTML element is displayed
clear Sets where floating
elements are not
allowed
 left
 right
 both
 none (default)
Ex: clear: both;
cursor Sets the cursor to be
displayed when the
mouse pointer moves
over the element
 auto (default)
 auto (default)
 text
 wait
 help
 crosshair

66
 default
 pointer
 move
 e-resize
 ne-resize
 nw-resize
 n-resize
 se-resize
 sw-resize
 s-resize
 w-resize
 URL
Ex: cursor: url ('custom.cur'); (use a
custom cursor saved in a file named
custom.cur)
display Sets how the element
is displayed
 none
 inline (default)
 block
 list-item
 run-in
 compact
 marker
 table
 inline-table
 table-row-group

67
 table-header-group
 table-footer-group
 table-row
 table-column-group
 table-column
 table-cell
 table-caption
Ex: display: none; (do not display the
element)
float Sets the element to
float in a another
element
 left
 right
 none (default)
Ex: float: left;
visibility Sets the visibility of
the element. Unlike in
using
the display property,
invisible elements will
still take up space.
 visible (default)
 hidden
 collapse – removes table columns or
rows.
Ex: visibility: hidden;
Positioning Properties - used to define how an HTML element is positioned in the page or in
another element.
overflow Sets the behavior of
an element when its
 auto (default)
 visible

68
content goes beyond
its specified area
 hidden
 scroll
Ex: overflow: scroll;
clip Sets the shape of an
HTML element.
Usually used with
images.
 auto (default)
 rect(top right bottom left)
Ex: clip: rect(0px 100px 200px 0px);
position Sets how the element
is positioned in the
page
 static (default)
 relative –adds the value to the current
top and left positioning
 absolute
Ex: position: absolute; top: 100px; left:
50px;
(position the element 100 pixels from the
top and 50 pixels from the left)
left, right, top, bottom Sets the distance
between the element
from its parent
element
 auto (default)
 %
Ex: left: 50px;
vertical-align Sets how the element
is displayed vertically
 baseline (default)
 top
 middle
 bottom
 sub
 super

69
 text-top
 text-bottom
Ex: vertical-align: middle;
z-index Sets the stack order of
the element. The
default index is zero.
Negative indexes
have lower priorities
and are displayed
behind the element
that has a higher
index. z-index only
works with absolute
positioning.
 auto (default)
 n (number)
Ex: z-index: -1;
Shorthand Properties - used to define a number of style rules in a single declaration.
PROPERTY DESCRIPTION
background Sets the background properties
font Sets the font properties
border Sets the border properties
margin Sets the margin properties
padding Sets the padding properties

70
list-style Sets the list properties
Example:
Pseudo-Classes - used to set additional effects to some selectors.
PSEUDO-CLASS DESCRIPTION EXAMPLE
link Refers to how the hyperlink looks like a:link
{
color: green;
}
visited Refers to how the visited hyperlink
looks like
a:visited
{
color: black;
}
hover Refers to how the hyperlink looks like
when the mouse pointer is moved over
it
a:hover
{
color: red;
text-decoration: overline;
}
active Refers to how the hyperlink looks like
while it is currently in focus
a:active
{
color: red;
font-weight: bold;
text-decoration: overline;
}

71
first-letter Refers to how the first letter in the line
of text looks like
p:first-letter
{
color: red;
font-size: 200%;
}
first-line Refers to how the first line of text looks
like
p:first-line
{
font-weight: bold;
}
Example

72

HTML (Hyper Text Markup Language) Project

More Related Content

Similar to HTML (Hyper Text Markup Language) Project (20)

Recently uploaded (20)

HTML (Hyper Text Markup Language) Project