25/10/2023

Outline
• Markup Language
Introduction to HyperText • What is HTML?
Markup Language (HTML) • HTML Documents
• Basic structure of an HTML document
Dr. Pankaj Kumar
• Creating an HTML document
• Markup Tags
• Heading-Paragraphs tags
• Line Breaks tag

Markup language What is HTML?

• Markup languages are designed for the processing, definition and • HTML stands for Hypertext Markup Language, and it is the most
presentation of text. widely used language to write Web Pages.
• The language specifies code for formatting, both the layout and style, • Hypertext refers to the way in which Web pages (HTML documents)
within a text file. are linked together. Thus, the link available on a webpage is called
Hypertext.
• The code used to specify the formatting are called tags.
• As its name suggests, HTML is a Markup Language which means we
• The two most popular markup language are HTML and XML. use HTML to simply "mark-up" a text document with tags that tell a
Web browser how to structure it to display.

3 4

What is HTML? HTML Evolution

• Originally, HTML was developed with the intent of defining the • HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was
structure of documents like headings, paragraphs, lists, and so forth the first standard HTML specification which was published in 1995.
to facilitate the sharing of scientific information between researchers. • HTML 4.01 was a major version of HTML and it was published in late
• Now, HTML is being widely used to format web pages with the help of 1999.
different tags available in HTML language. • 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.

5 6

1
 25/10/2023

HTML Versions HTML5

• Since the early days of the web, there have been many versions of • HTML5 is a cooperation between the World Wide Web Consortium
HTML: (W3C) and the Web Hypertext Application Technology Working Group
Version Year (WHATWG).
HTML 1.0 1991 • The new standard incorporates features like video playback and drag-
HTML 2.0 1995 and-drop that have been previously dependent on third-party
HTML 3.2 1997 browser plug-ins such as Adobe Flash, Microsoft Silverlight, and
Google Gears.
HTML 4.01 1999
HTML5 2014
HTML5.1 2016
HTML5.2 2017
7 8

Types of HTML Transitional

• The newest version of HTML, which is entering the industry, is HTML • Transitional is the most common type of HTML. It has a flexible
5. syntax, or grammar and spelling component.
• HTML can be divided into three categories: • Over the years, transitional HTML has been used without syntax
• Transitional restrictions, and browsers support a 'best effort' approach to reading
• Strict the tags.
• Frameset • If tags are misspelled, the browsers do not correct web developers'
• These types apply to how HTML is used, not necessarily to the errors, and they display the content anyway.
selection of tags. • Browsers do not report HTML errors - they simply display what they
can. This is the 'best effort' concept.

9 10

Strict Frameset
• The strict type of HTML is meant to return rules into HTML and make • Finally, a frameset allows web developer to create a HTML documents
it more reliable. where multiple documents can be connected into a single screen.
• For example, the strict type requires closing all tags for all opened • This technique is often used to create a menu system. We click on a
tags. This style of HTML is important on phones, where the processing menu item on the left side of the screen, and only the right side of
power may be limited. A clean and error-free code helps to load the screen re-loads. The menu stays in place.
pages faster.

11 12

2
 25/10/2023

Factor comparison on HTML vs. HTML5 Video & Audio

• Video & Audio • The first factor in HTML vs.
• Vector Graphics HTML5 is the introduction of
audio and video in HTML5.
• Storage There was no such concept of
• Web Browser Support media in case of HTML. But it is
• Ease of Use one of the integral part of the
5th Version.

13 14

Vector Graphics Storage

• Vector graphics was used in • The third factor of comparison is
HTML with the help of various storage. In case of HTML, we can
technologies such as VML, Flash, use the browser cache as the
Silverlight etc. But it is an temporary storage whereas in
integral part of HTML 5 such as case of HTML5, application
canvas and svg. This was a new cache, web SQL database and
addition to the revised version. web storage is used.

15 16

Web Browser Support Ease of Use

• Now for the first version of • While HTML5 does have risks
HTML, all the old web browsers like constant updates, it is
run smoothly for creating web generally easy to keep up with
pages. For HTML5, the new the changes and updates
browsers have started because of the simpler syntax as
supporting its specifications. compared to other versions of
Some of the browsers include HTML. For instance, you have a
mozilla firefox, chrome, opera very simple declaration at the
etc. start of the page to set it as an
HTML5 page, ie, the doctype
declaration.
17 18

3
 25/10/2023

New Elements in HTML5 Features in HTML5

• The comparison on HTML vs. HTML5 also includes new elements and • HTML5 introduces a number of new elements and attributes that can
tags that have been added to the latest version. help us in building modern websites.
• HTML5 comes with a number of new elements and eliminates several • New Semantic Elements
• These are like <header>, <footer>, and <section>.
others.
• Forms 2.0
• Some of the tags were discarded in the new HTML version and the • Improvements to HTML web forms where new attributes have been introduced for
usage of tags were changed accordingly. <input> tag.
• Persistent Local Storage
• To achieve without resorting to third-party plugins.
• WebSocket
• A next-generation bidirectional communication technology for web applications.

19 20

Features in HTML5 New Elements in HTML5

• Server-Sent Events • < Audio & Video >
• HTML5 introduces events which flow from web server to the web browsers and they are
called Server-Sent Events (SSE). • < Canvas >
• Canvas
• This supports a two-dimensional drawing surface that you can program with JavaScript. • < Header > & < Footer >
• Audio & Video • < menu >
• 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.

21 22

HTML Document A simple structure of an HTML document

• 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.

23 24

4
 25/10/2023

Creating an HTML document Creating an HTML document

<!DOCTYPE html> • The <!DOCTYPE html> declaration defines this document to be
<html> HTML5
<head>
<title>Page Title</title> • The <html> element is the root element of an HTML page
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="docs"> • The <head> element contains meta information about the document
<link rel="stylesheet" type="text/css" href=“xxx.css">
</head> • The <title> element specifies a title for the document
<body>
<h1>My First Heading</h1> • The <body> element contains the visible page content
<p>My first paragraph.</p>
</body>
• The <h1> element defines a large heading
</html> • The <p> element defines a paragraph

25 26

Creating an HTML document Output

• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
27 28

Markup Tags Tags

• A “markup tag” is the fundamental characteristic of HTML. Every • Tags are instructions that are embedded directly into the text of the
markup tag is a command placed between “wickets” or “angle document.
brackets”—a left bracket (<) and a right bracket (>). Markup tags are • By convention all HTML tags begin with an open angle bracket (<) and
not revealed by a web browser; they are invisible. with a close angle bracket (>).
• In most cases, markup tags (containing commands) come in pairs, • Tags can be of two types.
with text or a graphic image located between the beginning and • Paired Tags
ending tags • Singular tags

29 30

5
 25/10/2023

Paired Tags Singular tags

• A tag is said to be a paired tag if it, along with a companion tag, flanks • The second type of tag is the singular or stand-alone tag.
the text. • A stand-alone tag does not have a companion tag. For example <BR>
• For example the <B> tag is a paired tag. The <B> tag with its tag will insert a line break. This tag does not require any companion
companion tag </B> causes the text contained between them to be tag.
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.

31 32

<body> Tag <body> Tag Attributes

• The <body> tag defines the document's body. Attribute Value Description
• The <body> element contains all the contents of an HTML document, alink color Specifies the color of an active link in a document
such as text, hyperlinks, images, tables, lists, etc.
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

33 34

Headings Tags Headings Tags

• Any document starts with a heading. We can use different sizes for <html>
<head>
our headings. <title>Heading Example</title>
</head>
• HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, <body>
browser adds one line before and one line after that heading. <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
• <h1> defines the most important heading. <h6> defines the least <h3>This is heading 3</h3>
<h4>This is heading 4</h4>
important heading. <h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

35 36

6
 25/10/2023

Paragraph Tag Paragraph Tag

• The <p> tag offers a way to structure our text into different <!DOCTYPE html>
<html>
paragraphs. Each paragraph of text should go in between an opening <head>
<title>Paragraph Example</title>
<p> and a closing </p> tag. </head>
<body>
Here is a first line of text.
Here is a second line of text.
<html>
Here is a third line of text.
<head>
<p>Here is a first paragraph of
<title>Paragraph Example</title>
text.
</head>
Here is a second paragraph of
<body>
text.</p>
<p>Here is a first paragraph of text.</p>
<p>Here is a third paragraph of
<p>Here is a second paragraph of text.</p>
text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</body>
</html>
</html>

37 38

Line Break Tag Line Break Tag

• Whenever we use the <br> element, anything following it starts from <html>
<head>
the next line. This tag is an example of an empty element, where we <title>Line Break Example</title>
do not need opening and closing tags, as there is nothing to go in </head>
<body>
between them. <p>Hello<br>
• The <br> tag has a space between the characters br and the forward You delivered your assignment on time.<br>
Thanks<br>
slash. If we omit this space, older browsers will have trouble </p>
rendering the line break, while if we miss the forward slash character </body>
</html>
and just use <br> it is not valid in XHTML.

39 40