Scribd
Upload
7 views

About HTML

The document provides an overview of the Document Object Model (DOM), explaining its role as a programming interface for HTML and XML documents that allows for structured representation and manipulation. It also covers the DOCTYPE declaration, HTML elements, and introduces new features in HTML5, including new elements and form types. Additionally, it discusses local storage and session storage in HTML5, highlighting their differences and usage.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
7 views

About HTML

The document provides an overview of the Document Object Model (DOM), explaining its role as a programming interface for HTML and XML documents that allows for structured representation and manipulation. It also covers the DOCTYPE declaration, HTML elements, and introduces new features in HTML5, including new elements and form types. Additionally, it discusses local storage and session storage in HTML5, highlighting their differences and usage.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

Copyright © 2013 Tech Mahindra. All rights reserved.

1
Copyright © 2013 Tech Mahindra. All rights reserved. 2
Copyright © 2013 Tech Mahindra. All rights reserved. 3
What is meant by DOM?

Copyright © 2013 Tech Mahindra. All rights reserved. 4


DOM
 The Document Object Model (DOM) is a programming interface for HTML and
XML documents.

 It provides a structured representation of the document and it defines a way


that the structure can be accessed from programs so that they can change the
document structure, style and content.

 The DOM provides a representation of the document as a structured group of


nodes and objects that have properties and methods. Essentially, it connects
web pages to scripts or programming languages.

 The Document Object Model (DOM) provides another way to represent, store
and manipulate that same document. The DOM is a fully object-oriented
representation of the web page, and it can be modified with a scripting
language such as JavaScript.

Copyright © 2013 Tech Mahindra. All rights reserved. 5


HTML Page Structure / DOM Structure

Copyright © 2013 Tech Mahindra. All rights reserved. 6


What is meant by Doctype?

Copyright © 2013 Tech Mahindra. All rights reserved. 7


DOCTYPE

 A document type declaration, or DOCTYPE, is an instruction that associates a


particular SGML or XML document .

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

 In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML


4.01 was based on SGML. The DTD specifies the rules for the markup
language, so that the browsers render the content correctly.

 HTML5 is not based on SGML, and therefore does not require a reference to a
DTD.

Copyright © 2013 Tech Mahindra. All rights reserved. 8


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

Copyright © 2013 Tech Mahindra. All rights reserved. 9


Nested HTML Elements

 It is very much allowed to keep one HTML


element inside another HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1></h1>
<p>This is <em>emphasis </em> and
<strong>Paragraph</strong></p>
</body>
</html>

Copyright © 2013 Tech Mahindra. All rights reserved. 10


Block-level Elements

A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can). It
create a "Block" or "Box"

Examples of block-level elements:


 <div>
 <h1> - <h6> Block Level Element
 <p>
 <form>
Inline Inline

Inline Inline

Block Level Element


Copyright © 2013 Tech Mahindra. All rights reserved. 11
Inline Elements

An inline element does not start on a new line and only takes up as
much width as necessary.

Examples of block-level elements:


 <span>
 <a>
 <img>
Block Level Element
 <i>
 <b> Inline Inline

Inline Inline

Block Level Element


Copyright © 2013 Tech Mahindra. All rights reserved. 12
A small HTML document

Copyright © 2013 Tech Mahindra. All rights reserved. 13


HTML 5 New Features

 HTML 5 New Doctype and Charset

<!doctype html>
<meta charset="UTF-8“>

 HTML 5 New Structure


<section> - to define sections of pages
<header> - defines the header of a page
<footer> - defines the footer of a page
<nav> - defines the navigation on a page
<article> - defines the article or primary content on a page
<aside> - defines extra content like a sidebar on a page
<figure> - defines images that annotate an article

Copyright © 2013 Tech Mahindra. All rights reserved. 14


HTML 4.0 vs HTML 5

Copyright © 2013 Tech Mahindra. All rights reserved. 15


Continue…
 HTML 5 New Inline Elements
 <mark> - to indicate content that is marked in some fashion
 <time> - to indicate content that is a time or date
 <meter> - to indicate content that is a fraction of a known range - such
as disk usage
 <progress> - to indicate the progress of a task towards completion

 HTML 5 New Elements


 <canvas> - an element to give you a drawing space in JavaScript on
your Web pages. It can let you add images or graphs to tool tips or just
create dynamic graphs on your Web pages, built on the fly.
 <video> - add video to your Web pages with this simple tag.
 <audio> - add sound to your Web pages with this simple tag.

Copyright © 2013 Tech Mahindra. All rights reserved. 16


Continue…

 HTML 5 New Form Types


 datetime
 datetime-local
 date
 month
 week
 time
 number
 range
 email
 url

Copyright © 2013 Tech Mahindra. All rights reserved. 17


 HTML 5 Removes Some Elements (DEPRECATED)
 basefont
 big
 center
 dir
 font
 frame
 Frameset
 s
 Strike
 u

Copyright © 2013 Tech Mahindra. All rights reserved. 18


What is HTML Local Storage?

 With local storage, web applications can store data locally within the user's
browser.
 Before HTML5, application data had to be stored in cookies, included in every
server request. Local storage is more secure, and large amounts of data can
be stored locally, without affecting website performance.
 Unlike cookies, the storage limit is far larger (at least 5MB) and information is
never transferred to the server.
 Local storage is per origin (per domain and protocol). All pages, from one
origin, can store and access the same data.

Store
localStorage.setItem("lastname", "Smith");

Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");

Copyright © 2013 Tech Mahindra. All rights reserved. 19


What is HTML Session Storage?

 The sessionStorage object is equal to the localStorage object, except that it


stores the data for only one session. The data is deleted when the user closes
the specific browser tab.

 Store
sessionStorage.setItem("lastname", "Smith");

Retrieve
document.getElementById("result").innerHTML =
sessionStorage.getItem("lastname");

Copyright © 2013 Tech Mahindra. All rights reserved. 20


Copyright © 2013 Tech Mahindra. All rights reserved. 21
Thank You

Copyright © 2013 Tech Mahindra. All rights reserved. 22

You might also like