INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
UNIT II
1. Tags for Document structure (HTML,Head,BodyTag)
2. Block level text elements : Headings, paragraph(<p>tag)
3. Font style elements : (bold, italic, font, small, strong, strike, bigtags)
Tags for Document structure
INTRODUCTION
• HTML is a language of the web.
• It’s used to design the web pages or we can say structure the page layouts of a
website.
• In real HTML code wasn’t compiled or interpreted because HTML code was
rendered by the browser.
HTML DOCUMENTS STRUCTURE
• Html used predefined tags and attributes to tell the browser how to display
content, means in which format, style, font size, and images to display.
• Html is a case insensitive language. Case insensitive means there is no
difference in upper case and lower case ( capital and small letters) both treated
as the same.
• example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:
1. Paired Tags: These tags come in pairs.
That is they have both opening(< >) and closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.
Paired tags (Example):
<b> VIAAS BCA </b>
Opening tag closing tag
Empty tags (Example):
<br> , <hr> , or <img>
[Link] AP/CS VIAAS Page 1
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Structure of an HTML Document
Document is divided into two parts:
1. HEAD: This contains the information about the HTML document.
Example: Title of the page, version of HTML, Meta Data, etc.
2. BODY: This contains everything you want to display on the Web Page.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>BCA</h1>
<p>VIAAS</p>
<p>SANKARI</p>
</body>
</html>
KEY POINTS:
1. <!DOCTYPE html>
This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.0
2. <html> </html>
<html> is a root element of html.
It’s a biggest and main element in complete html language, all the tags ,
elements and attributes enclosed in it.
<html> tag is parent tag of <head> and <body> tag
[Link] AP/CS VIAAS Page 2
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
3. <head>: Head tag contains metadata, title, page CSS etc. Data stored in
the <head> tag is not displayed to the user, it is just written for reference
purposes and as a watermark of the owner.
4. <title> :Title tag used to store website name or content to be displayed.
5. <body>: A body tag is used to enclose all the data which a web page has
from texts to links.
Following tags and elements used in the body.
1 . <h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video> and<iframe>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others……….
Block level text elements : Headings, paragraph(<p>tag)
All the HTML elements can be categorized into two categories
(a) Block Level Elements
(b) Inline Elements
(a) Block Elements
• Block elements appear on the screen as if they have a line break before and
after them.
• For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>,
<dl>, <pre> and <address> elements are all block level elements.
• They all start on their own new line, and anything that follows them appears
on its own new line.
(b) Inline Elements
• Inline elements, on the other hand, can appear within sentences and do not
have to appear on a new line of their own.
[Link] AP/CS VIAAS Page 3
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
• The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>,
<ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline
elements.
Block Level Elements (Heading):
• The HTML heading tag is used to define the headings of a page.
• There are six levels of headings defined by HTML.
• These 6 heading elements are h1, h2, h3, h4, h5, and h6.
• With h1 being the highest level and h6 being the least.
Syntax:
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>
Program: Output:
<!DOCTYPE html>
<html>
<head>
<title> sample program </title>
</head>
<boby>
<h1>VIAAS BCA</h1>
<h2>VIAAS BCA</h2>
<h3>VIAAS BCA</h3>
<h4>VIAAS BCA</h4>
<h5>VIAAS BCA</h5>
<h6>VIAAS BCA</h6>
</body>
</html>
[Link] AP/CS VIAAS Page 4
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Block Level Elements (Paragraph):
• The <p> tag in HTML defines a paragraph.
• These have both opening and closing tags. So anything mentioned
within <p> and </p> is treated as a paragraph.
• A paragraph is a block-level element so a new paragraph always begins on a
new line, and browsers naturally put some space before and after a paragraph
to make it look neat and easy to read.
Syntax:
<p> Content </p>
Program: Output:
<!DOCTYPE html>
<html>
<head>
<title> sample program </title>
</head>
<boby>
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
</body>
</html>
[Link] AP/CS VIAAS Page 5
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Font style elements : (bold, italic, font, small, strong, strike, big
tags)
B (Boldface)
The <B> element specifies that the enclosed text should be displayed in a
boldface.
Syntax:
<b> text </b>
Example:
Program: Output:
<html>
<head> VIAAS BCA
<title> sample program </title>
</head>
<boby>
<b> VIAAS BCA </b>
</body>
</html>
I (Italic)
The <I> element specifies that the enclosed text should be displayed, if practical,
in an italic font (or slanted).
Syntax:
<i> text </i>
Example:
Program Output:
<html>
<head> VIAAS BCA
<title> sample program </title>
</head>
<boby>
<i> VIAAS BCA </i>
</body>
</html>
[Link] AP/CS VIAAS Page 6
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
U (Underline)
The <U> element specifies that the enclosed text should be displayed, if
practical, as underlined.
Syntax:
<u> text </u>
Example:
Program Output:
<html>
<head> VIAAS BCA
<title> sample program </title>
</head>
<boby>
<u> VIAAS BCA </u>
</body>
</html>
S (Strike through)
The <S> element specifies that the enclosed text should be displayed with a
horizontal line striking through the text.
Syntax:
<strike> text </strike>
Example:
Program Output:
<html> VIAAS BCA
<head>
<title> sample program </title>
</head>
<boby>
<strike> VIAAS BCA </strike>
</body>
</html>
[Link] AP/CS VIAAS Page 7
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
BIG (Big print)
The <BIG> element specifies that the enclosed text should be displayed, if
practical, using a big font (compared with the current font).
Syntax:
<big> text </big>
Example:
Program Output:
<html> VIAAS BCA
<head>
<title> sample program </title>
</head>
<boby>
<strike> VIAAS BCA </strike>
</body>
</html>
SMALL (Small print)
The <SMALL> element specifies that the enclosed text should be displayed, if
practical, using a small font (compared with normal text).
Syntax:
<small> text </small>
Example:
Program Output:
<html>
VIAAS BCA
<head>
<title> sample program </title>
</head>
<boby>
<small> VIAAS BCA </small>
</body>
</html>
[Link] AP/CS VIAAS Page 8
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Font:
The <font> tag was used in HTML 4 to specify the font face, font size, and color of
text.
Syntax:
<font attribute = "value"> Content </font>
Program Output:
<html>
<head>
<title> sample program </title>
</head>
<boby>
<font size="20">
<b> VIAAS BCA </b>
</font>
</body>
</html>
<html>
<head>
<title> sample program </title>
</head>
<boby>
<font color="blue">
<b> VIAAS BCA </b>
</font>
</body>
</html>
<html>
<boby> VIAAS BCA
<font face="Times New Roman">
<b> VIAAS BCA </b>
</font>
</body>
</html>
[Link] AP/CS VIAAS Page 9