HTML Notes
HTML stands for Hypertext Markup Language. It is a language used to create
and format a web page document. HTML is not an invention but is an improved
version of standard generalized markup language (SGML).
INTRODUCTION TO HTML ELEMENTS
An HTML file is made of elements. These elements are responsible for creating
web pages and defining content in that webpage. An element in HTML usually
consists of a start tag <tag name>, close tag </tag name> and content inserted
between them. An element is a collection of start tag, attributes, end tag,
content between them.
● HTML elements are used to construct an HTML file. Each document is
considered to be a single page.
● HTML is not case sensitive, that means it does not matter whether we write
in capital letters or small letters or in mixed form.
● An HTML tag comprises a left angular bracket (<), a less than symbol
followed by the name of the tag and closed by a right angular bracket
(>).
● Whatever we put between the angular brackets <--------> is called a tag.
Tags are of two types.
START Tag: Start tag is used to begin any tag. Example<HTML>
END Tag: End tag is used to end any tag. Example </HTML>
HTML elements can be categorized as container elements and empty elements.
Container Element
Container element is paired and has a starting and an ending tag.
EXAMPLE <HTML> - - - </HTML>
Empty Element
Empty Element does not have the end tag but only the starting tag.
EXAMPLE <Br>,<Hr>
BEGINNING OF HTML PROGRAMMING:
1. HTML Tag
This is the very first tag of any HTML program. It appears at the beginning and
end of each HTML document.
It is a container tag and is not visible on the document when displayed by the
browser. The HTML element contains the <HEAD> and <BODY> element. All the
tags must fall between <HTML> and </HTML> tag.
<HTML>
---
----
</HTML>
2. HEAD Tag
Head tag is also a container element. It is a container tag for title tag. The Head
tag starts with the <HEAD> and ends with the </HEAD> tag.
3. TITLE Tag
Title tag is contained between Head tag. The title should be meaningful and it
should identify the contents displayed in the tag. Whatever title we give in the
title tag is displayed at the top (in title tag) of the page.
<HTML>
<Head>
<Title> Introduction to HTML </Title>
</Head>
</HTML>
4. BODY Tag
Body tag is also a container tag which comes after the head tag. This element
contains all the text and images that make up the page.
5. Bgcolor
Bgcolor attribute is used to give color to the html page. By default, Html page is
white in color. If we want to give any color to the background, then we can use
the bgcolor attribute.
<body bgcolor=”Yellow”>
6. FONT ELEMENT
Font element is used to change the size, font style and color of the text in the
web page. This is a container element.
a) FONT SIZE
Font size attribute is used to set the size of the text. By default the font size of the
text is 3. We can change the font size according to our requirement and choice.
<FONT SIZE =10>
b) FONT FACE
Font Face is used to give the type of font like Arial, Lucida etc. face attribute is
browser dependent as some face may not work on any browser in that case
browser uses its default face.
<FONT FACE=”Times new roman”>
c) FONT COLOR
The font color attribute is used to give the color to the text. By default the font
color is black.
<FONT COLOR=”green”>
<font color=”red” size=14 face=”comic sanse”>
[Link] Tag: is used to make the text bold. It is a container element. Anything
placed between <B> and </B> is changed to bold.
<BODY><B>
Wi-Fi is a wireless data networking protocol, which allows for PCs and laptops to
access the internet
</B></BOLD>
8. ITALICS Tag
Italics tag is used to make the text italic (slightly tilted). It is a container element.
Anything placed between <I> and </I> is changed to Italics.
<BODY>
Wi-Fi stands for <I> “wireless fidelity” </I> and is a popular technology.
</BODY>
9. UNDERLINED Tag
Underline tag is used to underline the text. It is a container element. Anything
placed between <U> and </U> is underlined.
<BODY>
<U>WiFi</U>
</BODY>
13. LINE BREAK ELEMENT
The line break element specifies that a new line should start at that point. This is
an empty element and has to be given at the end of the line after which a new
line is displayed.<BR> tag is used to give the line break.
<HTML>
<Head>
<Title> Introduction to HTML </Title>
</Head>
<body> Hi I am a human <br> I am learning HTML.
</HTML>
14. HEADING Tag
HTML defines six levels of headings. A heading element can be used to specify
all the font changes heading ranges from <H1> to <H6>. <H1> is used to denote
the first level heading of an HTML document. It gives the largest heading
whereas H6 will give the smallest. Every header leaves a blank line above and
below it.
<H1> This is the first level heading. </H1>
<H2> This is the second level heading. </H2>
<H3> This is the third level heading. </H3>
<H4> This is the fourth level heading. </H4>
<H5> This is the fifth level heading. </H5>
<H6> This is the sixth level heading. </H6>
15. CENTER Tag
All lines of text between the beginning and end of <center> element are
centered between the current left and right margins. The text can be centered
in the following way.
<Center>
Welcome
</Center>
16. HORIZONTAL RULE ELEMENT
HR tag is used to draw a line across the page. The default line is a shaded
engraved line. HR tag is an empty tag and accepts the following attributes.
a) SIZE
The size attribute determines the thickness of the horizontal line. The value given
is a point value.
<HR size=3>
b) WIDTH
The width attribute is used to give the length of the line. It is specified in
percentage.
<Hr width=50%>
c) COLOR
The color attribute is used to give the color to the line.
<Hr color=”red” size=4 width=80%>