HTML
(Hyper
Text Markup Language)
What is Hyper Text?
-
Hyper means “beyond”
-
Hyper text resembles text that contains content
beyond what we see.
What is a Markup Language?
-
The markup is derived from common computer
terminology, where “marking up” is the process of preparing for presentation.
-
Markup language is a presentation language.
Evolution of Markup Languages
-
GML [Generic Markup Language] at “CERN” Labs
-
SGML [Standard Generic Markup Language]
-
Early 1990’s “Tim Berners Lee” introduced
“HTML” for “Mosaic” browser.
-
IETF (Internet Engineering Task Force) 1993
-
1995 HTML 2.0
-
1997 HTML 3.2
-
1997 HTML 4.0
-
2014 HTML 5.0
What is DHTML?
-
Dynamic HTML. [Obsolete – No Longer in use]
What is HTML?
-
It is a markup language.
-
It is used for presentation.
-
HTML is used to present DOM.
What is DOM?
-
Browser presents content in a hierarchy called
DOM.
-
Document Object Model
-
It is a hierarchy used to present contents in
HTML.
What is Static DOM and Dynamic DOM?
-
The DOM which is initially loaded by HTML is
static.
-
HTML can present static DOM.
-
Static DOM can’t handle interactions.
-
JavaScript, jQuery, Angular JS, React etc. are
used to convert the static DOM into dynamic DOM.
How HTML Presents the DOM?
-
By using Elements
What are the elements used for presenting DOM?
-
Normal Elements
-
Void Elements
-
RC Data Elements
-
Raw Text Elements
-
Foreign Elements
|
Element Type |
Description |
|
Normal Elements |
-
Elements which return a presentation directly on call back [without
any additional attributes]. -
Elements in HTML are built by using tags. -
Normal Elements require a start tag and end tag. -
Normal Elements will start returning presentation but can’t stop implicitly. -
They require explicit end tag. -
Usually require start and end tags. <b> Bold </b> |
|
Void Elements |
-
The term void refers to element that doesn’t return any presentation
directly on call back. -
Void means no return type. -
They can return only the specific content and stop implicitly. -
Void elements doesn’t require “End Tag”. |
|
RC Data Elements |
-
Rich Content Elements -
These elements will not allow any another element with in the
context. |
|
Raw Text Elements |
-
These elements are presented without a tag. Ex: © © ₹ ₹ |
|
Foreign Element |
-
These are HTML elements used in HTML but requires additional
library. -
Every browser can’t understand these elements. -
You have to import a library that makes the browser compatible with
element. SVG, MathML, Canvas |
What is Element and What is Tag?
-
HTML presents using Elements.
Bold - Element
<b> -
Tag
What is difference between Attribute and
Property?
-
Attributes are used statically in Tags.
-
Properties are use dynamically in Programming.
var img = new Image();
img.src = “shoe.jpg”; //src is property
-
Every attribute of HTML tag doesn’t have
relative property.
Structure
of HTML Page
-
Every HTML page comprises of 2 sections at high
level
o Document
Declaration
o Document
Scope
Document Declaration:
-
It comprises of information about HTML version.
-
It informs the parser that we are using HTML 5
to design web page.
Note: Comments in HTML are written with in “<!-- your comments
-->”
Document Scope:
-
It specifies the boundary of HTML document.
-
It defines the start and end of every document
in browser.
-
Every document scope must specify which language
content it is presenting.
</html>
To know more about structure of HTML page go to next page.