Module - 2 - HTML5Introduction To HTML5

Introduction to
HTML
Some Basics……..
webpage
A document which can be displayed in a web browser
such as Firefox, Google Chrome, Opera, Microsoft
Internet Explorer or Edge, or Apple's Safari. These are
also often called just "pages."
website
A collection of web pages which are grouped together
and usually connected together in various ways. Often
called a "web site" or simply a "site."
web server
A computer that hosts a website on the Internet.
"Hosting" means that all the web pages and their
supporting files are available on that computer.
Search Engine
A web service that helps you find other web pages,
such as Google, Bing, Yahoo.
The World Wide Web
 The World Wide
Web (abbreviated WWW or the Web)
is an information space where
documents and other web resources are
identified by Uniform Resource
Locators (URLs), interlinked
by hypertext links, and can be accessed
via the Internet.
 In 1989, Tim Berners-Lee had
suggested a way to let all users, but
particularly scientists, browse each
others’ papers on the Internet.
 He developed HTML, URLs, and
HTTP.
Basic Web Architecture
 The web is a two-tiered architecture.
A web browser displays information content,
 and a web server that transfers information to the
client.
Web Browser
 The primary purpose is to bring information resources
to the user.
 An application for retrieving, presenting, and
traversing information resources.
Web Server
 Web server is a computer where the web content is
stored.
A computer program that accepts HTTP requests
and return HTTP responses with optional data
content.
What is HTML
 HTML is a computer language devised to allow website
creation. These websites can then be viewed by anyone else
connected to the Internet.
 The definition of HTML is HyperText Markup Language.
 HyperText is the method by which you move around on the
web — by clicking on special text called hyperlinks which
bring you to the next page. The fact that it is hyper just
means it is not linear — i.e. you can go to any place on the
Internet whenever you want by clicking on links — there is
no set order to do things in.
 Markup is what HTML tags do to the text inside them. They
mark it as a certain type of text (italicised text, for example).
 HTML is a Language, as it has code-words and syntax like
any other language.
History of HTML
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
What is HTML5?
 HTML5 is the newest version of HTML.

 Hypertext Markup Language revision 5 (HTML5) is markup
language for the structure and presentation of World Wide
Web contents.
 HTML5 supports the traditional HTML and XHTML-style
syntax and other new features in its markup.
 It adds a diverse set of new tools for the web developer to
use.
Goals of HTML5
 Support all existing web pages.

 Reduce the need for external plugins and scripts to show
website content.
 Improve the semantic definition (i.e. meaning and purpose) of
page elements.
 Handle web documents errors in a better and more consistent
fashion.
New Elements in HTML5
<article> <figcaption> <progress>

<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>
Other New Features in HTML5
 Built-in audio and video support (without plugins)

 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
The <!DOCTYPE> declaration must be the very first thing in your
HTML document, before the <html> tag.
DOCTYPE declaration from XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
 The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what
version of HTML the page is written in.
The <html> Element
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
The <head> element contains meta information about the

document
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
The <title> element specifies a title for the document

Meta tag
 The <meta> tag provides metadata about
the HTML document.
 Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
 The metadata can be used by browsers (how to
display content or reload page), search engines
(keywords), or other web services.
HTML <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.
<body>
The content of the document......
</body>
HTML Tags
 HTML tags are element names surrounded by angle
brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is
the end tag.
 The end tag is written like the start tag, but with a
forward slash inserted before the tag name
Written steps
 Open Notepad (PC)/Open TextEdit .
 Write Some HTML.
 Save the HTML Page.
 View the HTML Page in Your Browser.
Some Basic Tags
HTML Paragraph Tag

Defines a paragraph into web document. HTML
paragraph define using <p> tag.
<body>
<p> This is first Paragraphs </p>
<p> This is Second Paragraphs </p>
</body>
HTML Comment Tag
Defines the Comments 
tag.
<body>
<img src="../../images/w2t.png"
width="380" height="70" /> 
</body>
HTML Images Tag
To display images into web document. HTML
Images are define inside the <img /> tag.
<body>
<img src="../../images/w2t.png"
width="380" height="70" />
</body>
HTML Link Tag
Defines the Link in internal or External
document. HTML Link are defined inside the <a>
tag.
<body>
<a href="http://www.way2tutorial.com">Web
Development Tutorial</a>
</body>
HTML Headings Tags
Defines the Heading <h1> to <h6> tags.
<body>
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
</body>
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks…

Viewing the HTML5 Web Page
Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page was created with.

Module - 2 - HTML5Introduction To HTML5

Uploaded by

Copyright:

Available Formats

Module - 2 - HTML5Introduction To HTML5

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module - 2 - HTML5Introduction To HTML5

Uploaded by

Copyright:

Available Formats

Introduction to

 HTML5 is the newest version of HTML.

 Support all existing web pages.

<article> <figcaption> <progress>

 Built-in audio and video support (without plugins)

DOCTYPE declaration from XHTML

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

Again, HTML5 simplifies this line:

The <head> element contains meta information about the

The <title> element specifies a title for the document

 The <body> tag defines the document's body.

HTML Paragraph Tag

Let's open this page in a web browser to see how it looks…

You might also like