HyperText Markup
Language (HTML)
Learning Objectives
• What is HTML?
• Features of HTML
• Tools required for HTML Coding
• Saving an HTML Document
• HTML Elements
• Types of HTML Elements
o Container Elements
o Empty Elements
• HTML Attributes
• Basic Structure of an HTML document
• HTML Title
• HTML Headings
• HTML Paragraphs
• HTML Formatting Elements
• HTML Comments
• HTML Lists
o Ordered List or Numbered List
o Unordered List or Bulleted List
o Definition List or Description List
• HTML Images
• HTML Links
• HTML Tables
What is HTML?
• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating webpages.
• HTML describes the structure of a webpage.
• The first version of HTML was written by Sir Tim Berners-Lee in 1993.
• HTML has evolved with the passage of time. HTML5 is the latest version
of HTML.
Features of HTML
• Not a programming language
• Easy to learn and easy to use
• Platform independent
• Case insensitive
• Images, videos, and audio can be added to a web page
• Supported by all web browsers
Tools required for HTML Coding
To code in HTML from the scratch, we need two tools:
• A Text Editor, such as, Notepad (Windows) or TextEdit (Mac), etc. to type
the HTML code
• A Web Browser, such as, Google Chrome, Microsoft Edge, Apple Safari,
etc. to test how your webpage will look
Note: Basic text editors are entirely sufficient when you’re just getting started.
As you progress, there are many feature-rich text editors available which allow
for greater function and flexibility. For example, Brackets, Kompozer,
Notepad++, Visual Studio Code.
Saving an HTML Document
An HTML document must be saved with .html extension. If we do not change
the extension to .html, the text editor will save the document with the default
extension, and we will not be able to view our webpage using a web browser.
HTML Elements
• HTML elements are used to define the content that we put on a webpage.
• HTML elements tell a web browser how to structure and interpret a part
of the HTML document.
• An HTML element is enclosed between angle brackets < >.
• For example, <HTML>, <HEAD>, <TITLE>, <BODY>, etc.
Types of HTML Elements
There are two types of HTML elements, Container and Empty.
Container Elements
A container element in HTML is defined by a starting tag followed by the
content. A container element ends with a closing tag.
For example, the <H1> element is a container element used to insert a heading
(largest size) in a webpage.
Usage:
<H1>This is a dummy heading at level 1.</H1>
where,
<H1> is the opening tag of the <H1> element.
This is a dummy heading at level 1. is the content that will get displayed on the
webpage.
</H1> is the closing tag of the <H1> element. Observe the ‘/’ (forward slash)
before H1.
Empty Elements
An empty element in HTML is defined by a starting tag only. It does not need to
be ended as it does not contain anything. Some examples of the empty
elements are <BR>, <HR>, <IMG>
HTML Attributes
• HTML Attributes provide additional information about an HTML element.
• Attributes are always typed within the starting tag of an HTML element.
For example,
<IMG src = “image.png”> where,
<IMG> is the HTML element used to insert an image in a webpage
src (source) is the attribute to define the image that is to be inserted
image.png is the name of the file (image) that is to be inserted.
Basic Structure of an HTML document
• An HTML document is divided into two sections:
o Head: The header information, such as, webpage title, metadata,
etc. goes here
o Body: The content of the webpage goes here
• A basic HTML document looks like this:
<HTML>
<HEAD>
<TITLE>
The title of the webpage goes here
</TITLE>
</HEAD>
<BODY>
The content of the webpage goes here
</BODY>
</HTML>
• <HTML> is the root element, and it defines the whole HTML document. It
has a start tag <HTML> and an end tag </HTML>.
• <HEAD> is a container for metadata (data about data). HTML metadata is
data about the HTML document. Metadata is not displayed. Metadata
typically define the document title, character set, styles, scripts, and
other meta information.
• <TITLE> defines the title of the HTML document/web page.
• <BODY> defines the body of the HTML document. The body constitutes
the content (text/ images/ audios/ videos, etc.) that we see on a
webpage.
Body Tag
• Attributes of the <body> tag
BGCOLOR changes the background colour
BACKGROUND changes the background image <body background="image1.jpg">
TOPMARGIN changes the topmargin of the webpage
LEFTMARGIN changes the leftmargin of the webpage
RIGHTMARGIN changes the rightmargin of the webpage
TEXT changes the text colour of the entire webpage
HTML Headings
• HTML headings are titles or subtitles that you want to display on a
webpage.
• HTML defines six levels of headings.
• The heading elements are <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>
with <H1> being the highest (or most important) level and <H6> the least.
• A heading element implies all the font changes, paragraph breaks before
and after, and any white space necessary to render the heading.
• Example,
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
ATTRIBUTE OF <H1>-<H6> TAG
ALIGN changes the alignment of the heading. Value can be Left, Right,
Center, Justify.
HTML Paragraphs
• The <P> element defines a paragraph.
• A paragraph is usually a block of text.
• A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
• Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ATTRIBUTE OF PARAGRAPH TAG
ALIGN changes the alignment of the paragraph. Value can be Left, Right,
Center, Justify.
HTML Comments
• HTML comments are not displayed in the browser, but they can help
document your HTML source code.
• You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the beginning of the tag, but not
in the ending of tag.
HTML Line Break and Horizontal Rule
• <BR>
<BR> is an empty element used to insert a line break in a webpage.
We just need to type <BR> wherever we need to break a line to move the
content that follows to the next line.
• <HR>
Similarly, we use the <HR> element to insert a horizontal rule (line) to
demarcate two sections in a webpage.
ATTRIBUTES OF <HR> TAG
ALIGN changes the alignment. Value can be Left, Right, Center, Justify.
SIZE changes the thickness of the horizontal rule. Ex <hr size=10>
COLOR changes the color of the horizontal rule.
WIDTH changes the width of the horizontal rule across the page. Takes value
in percentage. Ex <hr width=50%>
Example:
<hr align="right" color="red" width="50%" size=10>
HTML Formatting Elements
Formatting elements were designed to display text that appears different from
rest of the text on the webpage:
• <b> - To mark the enclosed text as boldfaced
• <i> - To mark the enclosed text as italicized
• <u> - To mark the enclosed text as underlined
• <sub> - To mark the enclosed text as subscript (slightly below the base
line) e.g. H2O, H2SO4
• <sup> - To mark the enclosed text as superscript (slightly above the base
line) e.g. 23 = 2 x 2 x 2 = 8
HTML Lists
• HTML lists allow to group a set of related items in lists.
• HTML allows you to create three types of lists:
o Ordered List or Numbered List
o Unordered List or Bulleted List
o Description List or Definition List or Glossary List
Ordered List or Numbered List
• The <OL> element is used to define an ordered list.
• The <OL> element is a container element, i.e., it has a start tag and an
end tag.
• The <LI> element is used to define each list item.
• Each list item in an ordered list starts with an Arabic numeral, by default.
Example Code Output
<OL> 1. Coffee
<LI>Coffee</LI> 2. Tea
3. Milk
<LI>Tea</LI>
<LI>Milk</LI>
</OL>
• The type attribute may be used to change the numbering style before
each list item in an ordered list.
Example Code Output
<OL type = “i”> i. Coffee
<LI>Coffee</LI> ii. Tea
iii. Milk
<LI>Tea</LI>
<LI>Milk</LI>
</OL>
• Possible values for the type attribute with the <OL> element are:
Value of the type attribute Numbering Style
<OL type = “1”> For Arabic numerals (default)
For uppercase Roman
<OL type = “I”>
numerals
For lowercase Roman
<OL type = “i”>
numerals
<OL type = “A”> For uppercase letters
<OL type = “a”> For lowercase letters
Unordered List or Bulleted List
• The <UL> element is used to define an unordered list.
• The <UL> element is a container element, i.e., it has a start tag and an
end tag.
• The <LI> element is used to define each list item.
• Each list item in an unordered list starts with a disc, by default.
Example Code Output
<UL> • Coffee
<LI>Coffee</LI> • Tea
• Milk
<LI>Tea</LI>
<LI>Milk</LI>
</UL>
• The type attribute may be used to change the bullet style before each list
item in an unordered list.
Example Code Output
<UL type = “circle”> o Coffee
<LI>Coffee</LI> o Tea
o Milk
<LI>Tea</LI>
<LI>Milk</LI>
</UL>
• Possible values for the type attribute with the <UL> element are:
Value of the type attribute Bullet Style
<UL type = “disc”> For disc (default)
<UL type = “circle”> For circle
<UL type = “square”> For square
Description List or Definition List or Glossary List
• HTML Description List or Definition List displays elements in definition
form like in dictionary.
• The three HTML description list tags are given below:
o <DL> tag defines the description list.
o <DT> tag defines data term.
o <DD> tag defines data definition (description).
Example Code Output
<DL> Coffee
<DT>Coffee</DT> black hot drink
<DD>black hot drink</DD> Tea
<DT>Tea</DT> brown hot drink
<DD>brown hot drink</DD> Milk
<DT>Milk</DT> white cold drink
<DD>white cold drink</DD>
</DL>
HTML Font Tag
• Font tag is used to change the font style, color, and size of the text.
ATTRIBUTES OF <FONT> TAG
FACE It defines font style e.g Arial, Calibri
SIZE defines font size. It takes values from [1-7] (1- smallest
and 7- largest; default size is 3)
COLOR defines text color
<font face= “Times New Roman” size=7 color=“red”> Welcome to Website
Designing</font>
HTML Images
• The HTML <img> element is used to embed an image in a web page.
• The <img> element is empty, it contains attributes only and does not
have a closing tag.
• The <img> element has two required attributes:
o src - Specifies the path to the image
o alt - Specifies an alternate text for the image
• Syntax: <img src="image url" alt="alternatetext">
ATTRIBUTES OF <IMG> TAG
HEIGHT changes the height of the image
WIDTH changes the width of the image
ALT text to be displayed, if the image is unavailable.
SRC it can be the address/link of an image on the internet.
it can also be the address (filename with extension) for the image
file saved on your local device.
<img src="img_girl.jpg" alt="Girl in a jacket" width=500px height=600px">
Note: The image file and the HTML document should be saved in the same
folder.
HTML Links
• HTML links are hyperlinks. You can click on a link and jump to another
document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• The HTML <a> element defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href (Hypertext
Reference) attribute, which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL
address. URL - it can be address of a web page on the internet or it can
also be the address (filename with extension) for the HTML webpage
saved on your local device
Note: Both the HTML documents should be saved in the same folder.
Image as a link
• To use an image as a link, put the <img> tag inside the <a> tag.
• Example:
<a href="page1.html"> <img src="smiley.gif" alt="smiley
image” height= “100px” width=“200px”>
</a>
Note: Here "smiley.gif" is an image file saved on the device in the same
folder where the HTML document is saved.
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• To arrange the content in a tabular manner, we must use a combination
of the following HTML elements:
o <TABLE> - To start a table
o <TR> - To define a table row
o <TH> - To define a table header (topmost row with boldfaced and
centered text)
o <TD> - To define table data
Example Code Output
<table>
<tr>
<th>S. No.</th>
<th>Name</th>
<th>House</th>
</tr>
<tr>
<td>1</td>
<td>Aarav</td>
<td>Sagar</td>
</tr>
<tr>
<td>2</td>
<td>Akshhat</td>
<td>Srishti</td>
</tr>
<tr>
<td>3</td>
<td>Dhruv</td>
<td>Himgiri</td>
</tr>
<tr>
<td>4</td>
<td>Taarini</td>
<td>Vasundhara</td>
</tr>
</table>
Note: There is no border around the table, by default. Border attribute is used
in the <table> tag to give borders to the table. <table border=”5px”>
LIST OF HTML TAGS AND ATTRIBUTES
SNO TAG ATTRIBUTE USE SYNTAX
1 <BODY> BGCOLOR changes the background colour <body bgcolor="blue" text="white" topmargin="50px" rightmargin="10px" leftmargin="20px">
BACKGROUND changes the background image <body
background="image1.jpg">
TOPMARGIN changes the topmargin of the webpage
LEFTMARGIN changes the leftmargin of the webpage
RIGHTMARGIN changes the rightmargin of the webpage
TEXT changes the text colour of the entire webpage
ALIGN changes the alignment of the paragraph. Value can <P align="center">
2 <P>
be Left, Right, Center, Justify.
ALIGN changes the alignment. Value can be Left, Right, <hr align="right" color="red" width="50%" size=10>
3 <HR>
Center, Justify.
SIZE changes the thickness of the horizontal rule.
Ex <hr size=10>
COLOR changes the color of the horizontal rule.
WIDTH changes the width of the horizontal rule across the
page. Takes value in percentage. Ex <hr width=50%>
ALIGN changes the alignment of the paragraph. Value can <H1 align="right">
4 <H1>-<H6>
be Left, Right, Center, Justify.
5 <IMG> HEIGHT changes the height of the image <img src="image1.jpg" height="10px" width="20px" alt="Image not found">
WIDTH changes the width of the image
ALT changes the alternate text, if the image is
unavailable.
6 <FONT> FACE changes the font style <font face="Jokerman" color="red" size=7>
COLOR changes the color of the text
SIZE changes the font size (1-smallest size 7-largest size 3-
default size)
7 <OL> TYPE Can take values a, A, I, i,1 to change the numbering type <OL type="a">
TYPE Can take values Circle, Square, Disc to change the bullet <UL type="Square">
<UL>
type
8 <TABLE> BORDER By default table doesn't have any borders. Border <table border=5>
attribute can be used to give borders to the table
