LESSON 1:
WEB DESIGNING USING HTML
INTRODUCTION: WHAT IS HTML
• HTML stands for Hyper Text Markup Language, the language is
used to design web applications
• This markup tells a web browser how to display the text, images
and other forms of multimedia on a webpage
• HTML elements are represented by tags. < >
• HTML is not a case sensitive language. Eg: <HTML>,<html>,
• HTML tags can be written in any text editor’s like-Notepad,
Notepad++, WordPad etc.
• Web browser is used to view the HTML pages
PARTS OF HTML DOCUMENT (BASIC STRUCTURE)
<HTML>
<HEAD>
<TITLE>………………</TITLE>
</HEAD>
<BODY>
………….…………….
</BODY>
</HTML>
• HTML document is saved with the file extension .HTM or .HTML.
PARAMETERS AND ATTRIBUTES
• Parameters-Elements given between the start and the end
tags.
• Attributes - Properties associated with a particular tag.
Attributes are written with in the angular bracket of the tag.
ATTRIBUTES RELATED TO BODY TAG
Attribute Value Description
background URL Specifies a background image of a
document.
bgcolor color Specifies the background color of a
document.
text color Specifies the color of a text in a
document.
Create to webpage using the bgcolor and text attribute
<HTML>
<HEAD>
<TITLE>EXAMPLE PAGE</TITLE>
</HEAD>
<BODY TEXT="GREEN" BGCOLOR="PINK">
THIS IS AN EXAMPLE OF A BASIC HTML PAGE.
</BODY>
</HTML>
Output
HTML PARAGRAPHS
• Paragraphs are defined with the <p> tag.
• It is a container tag. <p>…………….</p>
• When a text is included within the opening and the closing <p>
tag
• A blank line is inserted before and after the enclosed text.
• It has only one attribute called align.
PROGRAM:
<HTML>
<HEAD>
<TITLE>EXAMPLE PAGE</TITLE>
</HEAD>
<BODY BGCOLOR="PINK" TEXT="BLUE">
<P ALIGN="CENTER">FLOWERS
<P>ROSE</P>
<P>SUN FLOWER</P>
<p>LOTUS</P>
</BODY>
</HTML>
<BR> LINE BREAKS
• <BR>tag is used to break the line in the document.
• <BR> is an empty element… <BR>
• It wraps the text to start from next line without adding extra
space.
CONTAINER AND EMPTY ELEMENTS
Container Elements Empty Elements
This type of HTML elements
This type of HTML
require pair tags i.e. a starting as
elements require just a
well as an ending tag.
e.g. :- starting tag and not an ending
<html>…..</html>,
tag.
<title>………</title>,
<body>………..</body> e.g. :- <br>
HEADING TAG
• Heading tag is used to change the size and thickness of the text
written in the HTML document.
• The tag is written as <Hn>………. </Hn>.
• Here n has value from 1 to 6
• Where 1 means largest size and 6 means the smallest size.
<H1>….</H1>, <H2>….</H2>,<H3>…</H3>,<H4>…</H4>
<H5>…</H5>,<H6>…</H6>
CENTER TAG <CENTER>
• The Center tag centers the contents mentioned in the start and end
tag.
• All content between the <Center> and </Center> tag are centered on
the screen.
• This is a container tag.
• Syntax: <Center>……… </Center
Eg:- <CENTER>DPSBN</CENTER>
LAB TIME:
• Write the HTML code (in the box given) to generate the
following web page.
<HR> tag
• <HR> tag in HTML stands for horizontal rule.
• It is used to insert a horizontal rule or a thematic break in an HTML
page to divide or separate document sections.
• It is an empty tag and it does not require an end tag.
Attributes of <HR>tag
• Align - Horizontal alignment of the element (left,center,right)
• Noshade- Horizontal line in HTML to a solid color, instead of shadow
effect
• Size - Height of the element
• Width - Width of the horizontal line in HTML
Output
