24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Introduction to HyperText Markup Language (HTML)

Unit: 01 Dr. Pankaj Kumar

Subject Name: Web Designing Assistant Professor
Subject Code: KCS-052 Computer Science & Engineering
Course Details: B. Tech. (CSE) 5th Semester Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Outline
• Markup Language
• What is HTML?
• HTML Documents
• Basic structure of an HTML document
• Creating an HTML document
• Markup Tags
• Heading-Paragraphs tags
• Line Breaks tag

1
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Markup language
• Markup languages are designed for the processing, definition and
presentation of text.
• The language specifies code for formatting, both the layout and style,
within a text file.
• The code used to specify the formatting are called tags.
• The two most popular markup language are HTML and XML.

Noida Institute of Engineering & Technology, Greater Noida

What is HTML?
• 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 we
use HTML to simply "mark-up" a text document with tags that tell a
Web browser how to structure it to display.

2
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

What is 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.

Noida Institute of Engineering & Technology, Greater Noida

HTML Evolution
• HTML was created by 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 2014.

3
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

HTML Versions
• Since the early days of the web, there have been many versions of
HTML:

Version Year
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
7

Noida Institute of Engineering & Technology, Greater Noida

Types of HTML
• The newest version of HTML, which is entering the industry, is HTML
5.
• HTML can be divided into three categories:
• Transitional
• Strict
• Frameset
• These types apply to how HTML is used, not necessarily to the
selection of tags.

4
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Transitional
• Transitional is the most common type of HTML. It has a flexible
syntax, or grammar and spelling component.
• Over the years, transitional HTML has been used without syntax
restrictions, and browsers support a 'best effort' approach to reading
the tags.
• If tags are misspelled, the browsers do not correct web developers'
errors, and they display the content anyway.
• Browsers do not report HTML errors - they simply display what they
can. This is the 'best effort' concept.

Noida Institute of Engineering & Technology, Greater Noida

Strict
• The strict type of HTML is meant to return rules into HTML and make
it more reliable.
• For example, the strict type requires closing all tags for all opened
tags. This style of HTML is important on phones, where the processing
power may be limited. A clean and error-free code helps to load
pages faster.

10

5
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Frameset
• Finally, a frameset allows web developer to create a HTML documents
where multiple documents can be connected into a single screen.
• This technique is often used to create a menu system. We click on a
menu item on the left side of the screen, and only the right side of
the screen re-loads. The menu stays in place.

11

Noida Institute of Engineering & Technology, Greater Noida

Factor comparison on HTML vs. HTML5

• Video & Audio
• Vector Graphics
• Storage
• Web Browser Support
• Ease of Use

12

6
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Video & Audio

• The first factor in HTML vs
HTML5 is the introduction of
audio and video in HTML5.
There was no such concept of
media in case of HTML. But it is
one of the integral part of the
5th Version.

13

Noida Institute of Engineering & Technology, Greater Noida

Vector Graphics
• Vector graphics was used in
HTML with the help of various
technologies such as VML, Flash,
Silverlight etc. But it is an
integral part of HTML 5 such as
canvas and svg. This was a new
addition to the revised version.

14

7
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Storage
• The third factor of comparison is
storage. In case of HTML, we can
use the browser cache as the
temporary storage whereas in
case of HTML5, application
cache, web SQL database and
web storage is used.

15

Noida Institute of Engineering & Technology, Greater Noida

Web Browser Support

• Now for the first version of
HTML, all the old web browsers
run smoothly for creating web
pages. For HTML5, the new
browsers have started
supporting its specifications.
Some of the browsers include
mozilla firefox, chrome, opera
etc.

16

8
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Ease of Use
• While HTML5 does have risks
like constant updates, it is
generally easy to keep up with
the changes and updates
because of the simpler syntax as
compared to other versions of
HTML. For instance, you have a
very simple declaration at the
start of the page to set it as an
HTML5 page, ie, the doctype
declaration.
17

Noida Institute of Engineering & Technology, Greater Noida

New Elements in HTML5

• The comparison on HTML vs. HTML5 also includes new elements and
tags that have been added to the latest version.
• HTML5 comes with a number of new elements and eliminates several
others.
• Some of the tags were discarded in the new HTML version and the
usage of tags were changed accordingly.

18

9
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Features in HTML5
• HTML5 introduces a number of new elements and attributes that can
help us in building modern websites.
• New Semantic Elements
• These are like <header>, <footer>, and <section>.
• Forms 2.0
• Improvements to HTML web forms where new attributes have been introduced for
<input> tag.
• Persistent Local Storage
• To achieve without resorting to third-party plugins.
• WebSocket
• A next-generation bidirectional communication technology for web applications.

19

Noida Institute of Engineering & Technology, Greater Noida

Features in HTML5
• Server-Sent Events
• HTML5 introduces events which flow from web server to the web browsers and they are
called Server-Sent Events (SSE).
• Canvas
• This supports a two-dimensional drawing surface that you can program with JavaScript.
• Audio & Video
• We can embed audio or video on your webpages without resorting to third-party plugins.
• Geolocation
• Now visitors can choose to share their physical location with your web application.
• Microdata
• This lets you create your own vocabularies beyond HTML5 and extend your web pages with
custom semantics.
• Drag and drop
• Drag and drop the items from one location to another location on the same webpage.

20

10
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

New Elements in HTML5

• < Audio & Video >
• < Canvas >
• < Header > & < Footer >
• < menu >

21

Noida Institute of Engineering & Technology, Greater Noida

HTML Documents
• An HTML document is a file containing Hypertext Markup Language,
and its filename most often ends in the .htm/.html extension.
• An HTML document is a text document read in by a Web browser and
then rendered on the screen.

22

11
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Basic structure of an HTML document

23

Noida Institute of Engineering & Technology, Greater Noida

Creating an HTML document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

24

12
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Creating an HTML document

• The <!DOCTYPE html> declaration defines this document to be
HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph

25

Noida Institute of Engineering & Technology, Greater Noida

Output

26

13
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Markup Tags
• A “markup tag” is the fundamental characteristic of HTML. Every
markup tag is a command placed between “wickets” or “angle
brackets”—a left bracket (<) and a right bracket (>). Markup tags are
not revealed by a web browser; they are invisible.
• In most cases, markup tags (containing commands) come in pairs,
with text or a graphic image located between the beginning and
ending tags

27

Noida Institute of Engineering & Technology, Greater Noida

Tags
• Tags are instructions that are embedded directly into the text of the
document.
• By convention all HTML tags begin with an open angle bracket (<) and
with a close angle bracket (>).
• Tags can be of two types.
• Paired Tags
• Singular tags

28

14
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Paired Tags
• A tag is said to be a paired tag if it, along with a companion tag, flanks
the text.
• For example the <B> tag is a paired tag. The <B> tag with its
companion tag </B> causes the text contained between them to be
rendered in bold. The effect of other paired tags is applied only to the
text they contain.
• In paired tags, the first tag (<B> is often called the opening tag and
the second tag </B> is called the closing tag.

29

Noida Institute of Engineering & Technology, Greater Noida

Singular tags
• The second type of tag is the singular or stand-alone tag.
• A stand-alone tag does not have a companion tag. For example <BR>
tag will insert a line break. This tag does not require any companion
tag.

30

15
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

<body> Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document,
such as text, hyperlinks, images, tables, lists, etc.

31

Noida Institute of Engineering & Technology, Greater Noida

<body> Tag Attributes

Attribute Value Description
alink color Specifies the color of an active link in a document
background URL Specifies a background image for a document
bgcolor color Specifies the background color of a document
Specifies the color of unvisited links in a
link color
document
text color Specifies the color of the text in a document
vlink color Specifies the color of visited links in a document

32

16
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Headings Tags
• Any document starts with a heading. We can use different sizes for
our 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.

33

Noida Institute of Engineering & Technology, Greater Noida

Headings Tags
<html>
<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

34

17
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Paragraph Tag
• The <p> tag offers a way to structure our text into different
paragraphs. Each paragraph of text should go in between an opening
<p> and a closing </p> tag.

<html>
<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>

35

Noida Institute of Engineering & Technology, Greater Noida

Paragraph Tag
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
Here is a first line of text.
Here is a second line of text.
Here is a third line of text.
<p>Here is a first paragraph of
text.
Here is a second paragraph of
text.</p>
<p>Here is a third paragraph of
text.</p>
</body>
</html>

36

18
 24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Line Break Tag

• Whenever we use the <br> element, anything following it starts from
the next line. This tag is an example of an empty element, where we
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 we omit this space, older browsers will have trouble
rendering the line break, while if we miss the forward slash character
and just use <br> it is not valid in XHTML.

37

Noida Institute of Engineering & Technology, Greater Noida

Line Break Tag

<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br>
You delivered your assignment on time.<br>
Thanks<br>
</p>
</body>
</html>

38

19