Lecture 01

What is HTML?
HTML is an abbreviation for HyperText Markup Language.

It is a mark-up language used to construct web pages and web
applications.
We can use this language to create the layout of our static page.
 This language is only used to represent data and not to transfer
data. HTML is a combination of Hypertext and Markup Language.

 The link between web pages is defined by hypertext, while a
markup language is used to define the text document within the

tag that specifies the structure of web pages.
 Tags are the words that appear between < > and distinguish
standard text from HTML code.

 The data are displayed on web pages in tables, images, diagrams,
etc.
Syntax:
<!DOCTYPE html>
<html>
<head>
<title>HTML Page</title>
</head>
<body>
<h1>Hello World</h1>
<div>
<p>This is a paragraph tag.</p>
</div>
</body>
</html>
What is DHTML?
DHTML is an abbreviation for Dynamic HyperText Markup Language or

Dynamic HTML and is distinct from HTML. This language is built on
the HTML, CSS, Javascript, and DOM (Document Object Model)
features that aid in the creation of dynamic content.
After the entire web page has been fully loaded, DHTML (Dynamic
Hypertext Markup language) allows multiple scripting languages in a
web page to change their variables that enhance the appearance and
other functions.
 It is a collection of technologies used to create animated and
interactive web pages that are created in real-time.
 DHTML facilitates user interaction by animating text and images in
documents.
 It enables programmers to apply effects to their pages.
 It also enables page designers to include drop-down menus and
rollover buttons.
 This term also describes the development of numerous browser-
based action games.

 It also includes the ticker on many websites that require
automatic content updates.

Components of DHTML or Dynamic HTML
DHTML is made up of four languages or components:
 HTML 4.0: HTML is a client-side markup language that is a key
component of DHTML. It defines the layout of a web page using

various defined basic elements or tags.
 CSS: CSS stands for Cascading Style Sheet, and it allows web users
or developers to control the style and layout of HTML elements on

web pages. The CSS rules for DHTML will be changed at several
levels with JS and event handlers, adding a substantial amount of
dynamism with very little code.
 JavaScript: JavaScript is a client-side scripting language. A variety
of browsers support JavaScript technology. DHTML accesses,

controls, and manipulates HTML elements using JavaScript
technology. Statements in JavaScript are commands that instruct
the browser to perform an action.
 DOM: DOM is an abbreviation for Document Object Model. It is a
method of manipulating static content. DOM is a W3C standard,

which is a standard programming interface for HTML. It is mostly
used to define the objects and properties of all HTML elements.
The only issue is that the majority of browsers do not
supportDOM.
Syntax:
<html>
<head>
<title> JavaScript Method </title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>
Difference Between HTML and DHTML

We have seen a brief introduction to the HTML and DHTML languages.
We will now look at the differences between HTML and DHTML
languages. The following table summarises the differences between
these two languages:
HTML (Hypertext Markup DHTML (Dynamic Hypertext
Language) Markup Language)
HTML is a mark-up language. DHTML is a collection of technology.
HTML is used to build a static DHTML describes the technologies
document page and to specify the used to build dynamic and
HTML (Hypertext Markup DHTML (Dynamic Hypertext
Language) Markup Language)
hyperlinks. interactive web pages.
HTML does not include server-side
DHTML includes server-side code.
code.
HTML is a simple static page with DHTML is a dynamic page with
no JavaScript or styles. HTML, CSS, DOM and JavaScript.
HTML files have the.htm or.html DHTML files have the .dhtml
extension. extension.
DHTML may require database
HTML does not require database
connectivity as it interacts with the
connectivity.
user.
HTML pages do not use event DHTML pages make use of event
methods. methods.
DHTML enables the incorporation of
HTML provides tags such
minor animations and dynamic
as <body>, <li>, <form>, etc., to
menus into Web pages. It employs
control the presentation of
events, methods, and properties to
information on the web pages.
provide dynamism to HTML pages.
DHTML also allows you to modify
HTML does not permit changes to
the current pages at any time.
the current pages without
Without initially returning to the
returning to the webserver first.
webserver.
Conclusion
 HTML is used to create the layout of static web pages,
whereas DHTML generates dynamic web pages such as

animations and dynamic menus.
 Compared to DHTML pages, HTML sites are considerably slow
regarding client-side technologies. DHTML stands for Dynamic

HTML and is completely different from HTML.
 HTML tags are the fundamental building blocks of all websites. It
is also capable of producing interactive forms. HTML also allows
you to create organized documents.
 This is accomplished by indicating structural semantics for text
elements such as headings, paragraphs, lists, links, quotations,
and other objects.
 DHTML also allows the pages to alter at any time without
reconnecting to the Web server. It enables scripting languages to
alter the appearance and functionality of a web page after it has
been fully loaded and while it is being viewed. It also enables the
user to add difficult-to-achieve effects to their pages.
Difference Between JavaScript And jQuery

What is JavaScript?
JavaScript (JS) is a dynamic programming language. It is an interpreted
language. Other than the unfortunate similarity in name, it has nothing
to do with Java programming language. As the name suggests,
JavaScript is a scripting language.
It is most commonly used for appealing UI (like moving objects and
flashy elements on the screen), user interactions (client-side validation,
showing pop-ups etc.), and for controlling the document content
displayed to the user.
There is nothing you need to include in the browser to support
JavaScript. This is because it was considered the language of the web
since its birth. It runs in all modern browsers without any additional
plugins.
What do you mean by JavaScript being dynamic?
Most programming languages have dynamic behaviors. But in the case
of JavaScript, pretty much everything is dynamic.
All variables are dynamic in type and existence. You declare a variable
as,
var msg = "Hello World!";
The code written in JavaScript is dynamic, you can create a variable at
runtime, and the type is determined at runtime.
You can create new functions or replace existing functions at runtime.
New codes are added to the browser when more script files are
loaded, and you can add any number of files at any time.
What is jQuery
The jQuery website defines jQuery (jQ) as “a fast and concise JavaScript
Library that simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development.”.
jQuery is not a programming language instead, it is a cross-platform
JavaScript library. There are many other JavaScript libraries available,
like MooTools, Knockout, or even Angular (Though Angular uses
TypeScript, it compiles to JavaScript at the end), and jQuery is one of
the most popular among them.
jQuery is a fast, feature-rich JavaScript library. It is created to help
programmers with creating a familiar UI and take care of browser
compatibility issues more efficiently.
jQuery, in fact, is nothing but JavaScript. All the code you write in
jQuery is converted to JavaScript internally. One line of code written
using jQuery may be equal to many lines of code written using
JavaScript which means programmers will have to write only lesser
lines of code.
To start using jQuery on your page, you need to include one line of
code in the header of your page, like,
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script >
The above line includes a jQuery library for your page using the
Microsoft CDN (Content Delivery Network). The jQuery library is a
single JavaScript file.
You can also include the jQuery library as a local resource from your
project folder.
But there are benefits to using the CDN. If you use the minified library
version, you will get the advantage of concurrent connections and
multiple servers.
JavaScript Vs. jQuery
Now, we can discuss the questions mentioned at the beginning of this
article. Most of those questions may arise because of the lack of a clear
understanding of JavaScript and jQuery.
Since jQuery is nothing but a library of JavaScript, it cannot replace
JavaScript. All jQuery code is JavaScript, but jQuery doesn’t include all
the JavaScript code.
One thing you should understand is that they are not two
programming languages; instead, they both are JavaScript. jQuery is
just optimized to do the common scripting functions with fewer lines of
code.
Lines of code
Many actions like Animate, Delay and Fade-In can be done using jQuery
with very few lines of code. On the other hand, JavaScript will take lots
of lines of code for the same.
We can consider a more straightforward example,
Suppose I want to select all elements having class- simple-li,
If I use JavaScript,
document.getElementsByClassName("simple-li");
On the other hand, if I use jQuery,
$('simple-li')
Performance
If you check the performance of the two, you can find that plain
JavaScript is faster than jQuery for accessing DOM. But JavaScript can
be slower when you write some complex logic because we may make
significant mistakes or use poor code, which may lead to a
performance hit. On the other hand, jQuery has been tested for years
to use the best and fast JavaScript codes.
In my view, it is not right to compare the two, or you cannot say one is
better than the other. We need to use whichever is better suited to our
requirements.
Advantages of jQuery
 You can code the most common JS actions using jQuery with
fewer lines of code.

 Browser compatibility – you can write code that runs across
browsers without having to know the various browser

intricacies and won’t break.
 It lets you write JavaScript quicker and easier.
 It avoids common browser errors
 Simplification of usually complicated operations – complex
operations like Ajax interactions, animation, event handling
etc., are handled by jQ with the best lines of code.
 jQ is battle-tested and uses the fast and best lines of code for
accomplishing most tasks.
Conclusion
jQuery is well suited for most applications, especially ones that need
rapid development. jQuery takes care of common browser errors by
ironing the fixes right into the library. jQuery also takes care of browser
compatibility issues which are a developer’s nightmare during
deployment.
Using JavaScript or jQuery really depends on your need and other
factors. Most web development projects will work perfectly fine using
jQuery. But there will be a small percentage that does require
JavaScript.
Since pure JavaScript is the best-performing method of client-side
development, there is a reason to use it. But a library like jQuery will
help you to get to market faster and cheaper. So, it is better to depend
heavily on jQuery for the initial versions of your product. Once your
product is established in the marked and you have the revenues to go
back and refactor the code, you can custom code all the script.

Lecture 01

Uploaded by

Document Information

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

Lecture 01

Uploaded by

Copyright:

Available Formats

What is HTML?

HTML is an abbreviation for HyperText Markup Language.

data. HTML is a combination of Hypertext and Markup Language.

markup language is used to define the text document within the

standard text from HTML code.

DHTML is an abbreviation for Dynamic HyperText Markup Language or

 It also enables page designers to include drop-down menus and

based action games.

automatic content updates.

component of DHTML. It defines the layout of a web page using

or developers to control the style and layout of HTML elements on

of browsers support JavaScript technology. DHTML accesses,

method of manipulating static content. DOM is a W3C standard,

Difference Between HTML and DHTML

whereas DHTML generates dynamic web pages such as

regarding client-side technologies. DHTML stands for Dynamic

Difference Between JavaScript And jQuery

fewer lines of code.

browsers without having to know the various browser

You might also like