Scribd
Upload
23 views52 pages

Introduction to HTML Basics and Usage

Uploaded by

yinminsoe.pearlyadana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views52 pages

Introduction to HTML Basics and Usage

Uploaded by

yinminsoe.pearlyadana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

What is website?

A website is a collection of many web pages, and web pages are digital files that
are written using HTML (HyperText Markup Language).

There are two main types of website:

i) Static Website
ii) Dynamic Website

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.

● Hypertext refers to the way in which Web pages (HTML documents)


are linked together. Thus, the link available on a webpage is called
Hypertext.
● As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark-up" a text document with tags that tell a
Web browser how to structure it to display.

1
Introduction to HTML

HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. HTML was created by Tim Berners-Lee
in late 1991 but "HTML 2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML and it was published
in late 1999. Though HTML 4.01 version is widely used but currently we are having
HTML-5 version which is an extension to HTML 4.01, and this version was
published in 2012.

Why to Learn HTML?

Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the sharing of
scientific information between researchers. Now, HTML is being widely used to
format web pages with the help of different tags available in HTML language.

I will list down some of the key advantages of learning HTML:

● Create Web site - You can create a website or customize an existing


web template if you know HTML well.
● Become a web designer - If you want to start a carrer as a professional
web designer, HTML and CSS designing is a must skill.
● Understand web - If you want to optimize your website, to boost its
speed and performance, it is good to know HTML to yield best results.
● Learn other languages - Once you understand the basic of HTML then
other related technologies like javaScript, PHP, or angular are become
easier to understand.

2
Hello World using HTML.

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

Applications of HTML

As mentioned before, HTML is one of the most widely used language over the web.
I'm going to list few of them here:

● Web pages development - HTML is used to create pages which are


rendered over the web. Almost every page of web is having html tags
in it to render its details in browser.
● Internet Navigation - HTML provides tags which are used to navigate
from one page to another and is heavily used in internet navigation.
● Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.
● Offline support HTML pages once loaded can be made available
offline on the machine without any need of internet.
● Game development- HTML5 has native support for rich experience
and is now useful in gaming development arena as well.
3
Audience

This HTML tutorial is designed for the aspiring Web Designers and Developers
with a need to understand the HTML in enough detail along with its simple
overview, and practical examples. This tutorial will give you enough ingredients to
start with HTML from where you can take yourself at higher level of expertise.

Prerequisites

Before proceeding with this tutorial you should have a basic working knowledge
with Windows or Linux operating system, additionally you must be familiar with −

● Experience with any text editor like notepad, notepad++, or Edit plus
etc.
● How to create directories and files on your computer.
● How to navigate through different directories.
● How to type content in a file and save them on a computer.
● Understanding about images in different formats like JPEG, PNG
format.

Basic HTML Document

In its simplest form, following is an example of an HTML document −

<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

4
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>

</html>

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to format
the content. These tags are enclosed within angle braces <Tag Name>. Except few
tags, most of the tags have their corresponding closing tags. For
example, <html> has its closing tag </html> and <body> tag has its closing
tag </body> tag etc.

Above example of HTML document uses the following tags −

[Link] Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.

2 <html>

5
This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.

3 <head>

This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.

4 <title>

The <title> tag is used inside the <head> tag to mention the document
title.

5 <body>

This tag represents the document's body which keeps other HTML tags
like <h1>, <div>, <p> etc.

6 <h1>

This tag represents the heading.

7 <p>

This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they
behave, while formatting a textual document. Learning HTML is simple as users
have to learn the usage of different tags in order to format the text or images to make
a beautiful webpage.

6
HTML Document Structure

A typical HTML document will have the following structure −

<html>

<head>
Document header related tags
</head>

<body>
Document body related tags
</body>

</html>

We will study all the header and body tags in subsequent chapters, but for now let's
see what is document declaration tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the
version of the HTML used in the document. Current version of HTML is 5 and it
makes use of the following declaration −

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document
depending on what version of HTML is being used. We will see more details on this
while discussing <!DOCTYPE...> tag along with other HTML tags.
7
HTML BASIC Tags

Heading Tags

Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and one line after that heading.

Example

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag as
shown below in the example −

Example
<!DOCTYPE html>
<html>

8
<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

This will produce the following result −

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break, while if
you miss the forward slash character and just use <br> it is not valid in XHTML.

Example
<!DOCTYPE html>
<html>

<head>
9
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>

This will produce the following result –

Centering Content

You can use <center> tag to put any content in the center of the page or any table
cell.

Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>

<body>
<p>This text is not in the center.</p>
10
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This will produce following result −

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and
breaks the line accordingly.

For example, you may want to give a line between two paragraphs as in the given
example below −

Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

11
This will produce the following result –

Again <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If
you omit this space, older browsers will have trouble rendering the horizontal line,
while if you miss the forward slash character and just use <hr> it is not valid in
XHTML.

Preserve Formatting

Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve
the formatting of the source document.

Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}

12
</pre>
</body>
</html>

This will produce the following result –

Nonbreaking Spaces

Suppose you want to use the phrase "12 Angry Men." Here, you would not want a
browser to split the "12, Angry" and "Men" across two lines −

An example of this technique appears in the movie "12 Angry Men."

In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &nbsp; instead of a normal space. For example, when
coding the "12 Angry Men" in a paragraph, you should use something similar to the
following code −

Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

13
This will produce the following result −

HTML Elements

An HTML element is defined by a starting tag. If the element contains other


content, it ends with a closing tag, where the element name is preceded by a forward
slash as shown below with few tags −

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.


There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part
of an HTML document.

HTML Tag vs. Element

14
An HTML element is defined by a starting tag. If the element contains other content,
it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element
−

Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

This will display the following result –

HTML-Attributes

We have seen few HTML tags and their usage like heading tags <h1>,
<h2>, paragraph tag <p> and other tags. We used them so far in their simplest form,

15
but most of the HTML tags can also have attributes, which are extra bits of
information.

An attribute is used to define the characteristics of an HTML element and is placed


inside the element's opening tag. All attributes are made up of two parts −
a name and a value

● The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose name
is align, which you can use to indicate the alignment of paragraph on
the page.
● The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide
Web Consortium (W3C) recommends lowercase attributes/attribute values in their
HTML 4 recommendation.

Example
<!DOCTYPE html>
<html>

<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>

16
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>

This will display the following result −

Core Attributes

The four core attributes that can be used on the majority of HTML elements
(although not all) are −

● Id
● Title
● Class
● Style
The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within
an HTML page. There are two primary reasons that you might want to use an id
attribute on an element −

● If an element carries an id attribute as a unique identifier, it is possible


to identify just that element and its content.
● If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to
distinguish between two paragraph elements as shown below.

Example

17
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it, although
it is often displayed as a tooltip when cursor comes over the element or while the
element is loading.

Example

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

This will produce the following result −

Now try to bring your cursor over "Titled Heading Tag Example" and you will see
that whatever title you used in your code is coming out as a tooltip of the cursor.

18
The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies
the class of element. You will learn more about the use of the class attribute when
you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For
example −

class = "className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within
the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

This will produce the following result −

19
Horizontal Line <hr>

<hr> Tag with Attribute


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Learn HTML</h2>
<p>This HTML tutorial will teach you the basics of the (Hyper Text
Markup Language) and how to make your website from the scratch.</p>
<hr/>
<h2>Learn CSS</h2>
<p>In our CSS tutorial, you will learn how to use CSS to control the
style and layout of multiple Web pages all at once.</p>
<p>A Horizontal line with a width of 50%:</p>
<hr width="50%">
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40"/>
<p>Noshaded horizontal line:</p>
<hr border="3"/>
</body>
</html>

20
The <del> and <s> Tags

The <del> tag specifies a part of the text that was deleted from the document.

Browsers display this text as a strikethrough.

The <s> tag defines text that is no longer correct, or relevant.


The content of both tags is displayed as strikethrough.
However, despite the visual similarity, these tags cannot replace each other.

The following word uses a strikethrough and delete typeface.

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del style="color:#8ebf42;">green</del> <ins
style="color:#1c87c9;"> blue</ins>!</p>
<p><s>I am studying in high school.</s></p>
<p>I am studying in an university.</p>
</body>
</html>
Output:

Superscript Text

The following word uses a superscript typeface.

The baseline passes through upper or lower edge of the symbols. (eg. x2, cm3)

21
Subscript Text

The following word uses a subscript typeface.

Subscript text is under the baseline of other symbols of the line and has smaller
font. (eg. H2O, CO2)

The <ins> and <u> Tags


The <ins> tag defines the text that has been inserted (added) to the document. The
content of the tag is displayed as underlined.

The <u> tag specifies text that is stylistically different from normal text, i.e. words
or fragments of text that need to be presented differently.

Larger Text <big>


The <big> tag was used in HTML 4 to define bigger text.

Smaller Text <small>


The <small> tag defines smaller text
Here is the example of <big> and <small> tags:
[Link]
<html>
<head>
<title>Big and Small Font</title>
</head>
<body>
<p>This is normal paragraph.</p>
<p>This paragraph use <mark>Mark</mark> tag.</p>
<p>This paragraph use <big>Big</big> font.</p>
<p>This paragraph use <small>Small</small> font.</p>
</body>
</html>

22
HTML-Images

Images are very important to beautify as well as to depict many complex concepts
in simple way on your web page. This tutorial will take you through simple steps to
use images in your web pages.

Insert Image

You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes
and it has no closing tag.

Example
To try following example, let's keep our HTML file [Link] and image file [Link]
in the same directory −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/[Link]" alt = "Test Image" />
</body>
</html>
This will produce the following result −

You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.

23
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.

Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML file
[Link] in our home directory and create a subdirectory images inside the home
directory where we will keep our image [Link].
Example
Assuming our image location is "image/[Link]", try the following example −
<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/[Link]" alt = "Test Image" />
</body>

</html>
This will produce the following result −

Set Image Width/Height

You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html>
<html>
<head>

24
<title>Set Image Width and Height</title>
</head>

<body>
<p>Setting image width and height</p>
<img src = "/html/images/[Link]" alt = "Test Image" width = "150" height =
"100"/>
</body>
</html>
This will produce the following result −

Set Image Border

By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the
picture.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Border</title>
</head>

<body>
<p>Setting image Border</p>
<img src = "/html/images/[Link]" alt = "Test Image" border = "3"/>
</body>

</html>
This will produce the following result −

25
Set Image Alignment

By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = "/html/images/[Link]" alt = "Test Image" border = "3" align =
"right"/>
</body>
</html>
This will produce the following result −

26
HTML-Tables

The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under <td>
are regular and left aligned by default

Example

<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>
This will produce the following result −

Here, the border is an attribute of <table> tag and it is used to put a border across
all the cells. If you do not need a border, then you can use border = "0".

27
Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top row
as table heading as shown below, otherwise you can use <th> element in any row.
Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
This will produce the following result −

28
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing attribute defines space
between table cells, while cellpadding represents the distance between cell borders
and the content within a cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
This will produce the following result −

29
Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or more
rows.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
This will produce the following result −

30
Tables Backgrounds

You can set table background using one of the following two ways −
● bgcolor attribute − You can set background color for whole table or just
for one cell.
● background attribute − You can set background image for whole table
or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5.
Do not use these attributes.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>

31
</body>
</html>
The result is your answer −
Here is an example of using background attribute. Here we will use an image
available in /images directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" background = "/images/[Link]">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
This will produce the following result.

Here background image did not apply to table's header.

32
Table Height and Width

You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of available
screen area.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce the following result −

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table. This tag is deprecated in newer version of HTML/XHTML.
Example
<!DOCTYPE html>
<html>

<head>

33
<title>HTML Table Caption</title>
</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>
This will produce the following result −

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content holder of the
table.
The three elements for separating the head, body, and foot of a table are −
● <thead> − to create a separate table header.
● <tbody> − to indicate the main body of the table.
● <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups
of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>
<head>

34
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
</body>
</html>
This will produce the following result −

Nested Tables

You can use one table inside another table. Not only tables you can use almost all
the tags inside table data tag <td>.
Example
Following is the example of using another table and other tags inside a table cell.

35
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">

<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>

</table>
</body>
</html>
This will produce the following result −

<div> Vs <span> Tags


- The HTML <div> tag is used for defining a section of your document.

36
- With the div tag, you can group large sections of HTML elements together
and format them with CSS.

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

It is possible to place any HTML element within a <div> tag, including another
<div>.

Note: By default, browsers always place a line break before and after
the <div> element.
For example:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>

<body>
<div style=” line-height: 20px;margin: 30px;padding-bottom: 20px;text-align:
justify;width: 140px;color: red;”>
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>

</html>

You can also use <span> tag instead of <div> tag.


For example:

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
37
</head>

<body>
<span style=” line-height: 20px;margin: 30px;padding-bottom: 20px;text-align:
justify;width: 140px;color: red;”>
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</span>
</body>
</html>

Differences between <div> and <span> tags

The <span> tag is an inline container used to mark up a part of a text, or a part of
a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript using the
class or id attribute.

The <span> tag is much like the <div> element, but <div> is used with a block-
level element and <span> is used with an inline element.

With <div> Tag With <span> Tag


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1>The span element</h1> <h1>The span element</h1>
<p>My mother has <div <p>My mother has <span
style="color:blue;font- style="color:blue;font-
weight:bold">blue</div> eyes and my weight:bold">blue</span> eyes and
father has <div my father has <span
style="color:darkolivegreen;font- style="color:darkolivegreen;font-
weight:bold">dark green</div> weight:bold">dark green</span>
eyes.</p> eyes.</p>
</body> </body>
</html> </html>

38
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
All lists must contain one or more list elements.

There are three types of lists:

i. Unordered Lists
ii. Ordered Lists
iii. Definition Lists/Description Lists

Unordered Lists Ordered Lists Definition Lists

• Item 1. First item Coffee


• Item 2. Second item - black hot drink
• Item 3. Third item Milk
• Item 4. Fourth item - white cold drink

Unordered HTML List <ul>

The HTML <ul> tag defines an unordered (bulleted) list.

An unordered list starts with the <ul> tag.

Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.
For example:
<html>
<head>
<title></title>
</head>
<body>
<h2>Unordered Lists</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>

39
<li>Milk</li>
</ul>
</body>
</html>

Choose List Item Marker

The type attribute for <ul> tag is used to define the style of the list item marker.

It can have one of the following values:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Unordered Lists With Type</h2>
<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

40
</ul>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List <ol>

The HTML <ol> tag defines an ordered list.

An ordered list can be numerical or alphabetical.

An ordered list starts with the <ol> tag.

Each list item starts with the <li> tag.

The list items will be marked with numbers by default.


For example:
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<h2>Ordered Lists</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

41
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag can be used to define the type of the list item
marker.

Type Description

type=”1” The list items will be numbered with numbers (default)

type=”A” The list items will be numbered with uppercase letters

type=”a” The list items will be numbered with lowercase letters

type=”I” The list items will be numbered with uppercase roman numbers

type=”i” The list items will be numbered with lowercase roman numbers

For example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<h2>Ordered Lists With Type</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

42
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Control List Counting


By default, an ordered list will start counting from 1.
If you want to start counting from a specified number, you can use
the start attribute.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<h2>Ordered Lists</h2>
<ol start="21">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Chocolate</li>
<li>Juice</li>
</ol>
</body>
</html>

43
HTML Definition Lists

A definition list is a list of terms, with a description of each term.

The <dl> tag defines the description list.

The <dt> tag defines the term (name). Definintion Title

The <dd> tag describes each term. Definition Description

For example:

<!DOCTYPE html>
<html>
<head>
<title>Definition Lists</title>
</head>
<body>
<h2>Definition (or) Description Lists</h2>
<dl>
<dt>Coffee</dt>
<dd>_black hot drink.</dd>
<dt>Milk</dt>
<dd>_cold white drink.</dd>
</dl>
</body>
</html>

44
Linking Documents

- Links are found in nearly all web pages.


- Links allow users to click their way from page to page.
- HTML links are hyperlinks.
- You can click on a link and jump to another document.
- A link is specified using HTML tag <a>.
- <a> tag is called anchor tag and anything between the opening <a>
tag and the closing </a> tag becomes part of the link.
- A user can click that part to reach to the linked document.
- A link can be not only a text but also an image or any other HTML
element!
Following is the simple syntax to use <a> tag:
<a href=”url”>Link Text</a>

The most important attribute of the <a> element is the href 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.

<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h2>Link Example</h2>
<a href="www.w3S[Link]
</body>
</html>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

45
HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was


clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

Please try the following example:

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "[Link]
</head>

<body>
<p>Click any of the following links</p>
<a href = "/html/[Link]" target = "_blank">Opens in New</a> |
<a href = "/html/[Link]" target = "_self">Opens in Self</a> |
<a href = "/html/[Link]" target = "_parent">Opens in Parent</a> |
<a href = "/html/[Link]" target = "_top">Opens in Body</a>
</body>

</html>

46
HTML Forms

An HTML form is used to collect user input.

The <form> Element

The HTML <form> element is used to create an HTML form for user input.

The user input is most often sent to a server for processing.

The HTML <form> element can contain one or more of the following form
elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

47
Here are some of the type attribute:

Type Description

<input type="text"> Displays a single-line text input field

<input type="password"> Displays a single-line password field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many


choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="reset"> Displays a reset button (reset all form values to their default
values)

<input type="button"> Displays a clickable button

<input type="email"> Displays input fields that should contain an e-mail address

48
Text Fields
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Password Fields
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="uname"><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
</form>

Hidden Fields
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

Radio Buttons
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS" checked>
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScr
ipt">
<label for="javascript">JavaScript</label>
</form>

Checkboxes
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

49
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Submit Button/Reset Button


<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Email Fields
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Number Fields
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Date Fields
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

File Upload
<form>
<label for="myfile">Select a file:</label>

50
<input type="file" id="myfile" name="myfile">
</form>

The Attributes of <input> Element


Attribute Description
value="" The input value attribute specifies an initial value
for an input field
readonly The input readonly attribute specifies that an
input field is read-only.
disabled The input disabled attribute specifies that an
input field should be disabled.
size="" The input size attribute specifies the visible
width, in characters, of an input field.
maxlength="4" The input maxlength attribute specifies the
maximum number of characters allowed in an
input field.
min="1" max="5" The input min and max attributes specify the
minimum and maximum values for an input field.
placeholder="123-45-678" The input placeholder attribute specifies a short
hint that describes the expected value of an input
field (a sample value or a short description of the
expected format).
required The input required attribute specifies that an
input field must be filled out before submitting the
form.
Autofocus The input autofocus attribute specifies that an
input field should automatically get focus when
the page loads.
step="3" The input step attribute specifies the legal
number intervals for an input field.

HTML Video
The HTML <video> element is used to show a video on a web page.

The controls attribute adds video controls, like play, pause, and volume.

51
The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
To start a video automatically, use the autoplay attribute.

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

HTML Youtube Videos


The easiest way to play videos in HTML, is to use YouTube.

52

You might also like