Scribd
Upload
154 views

WD Unit-2 Part 2

HTML stands for Hypertext Markup Language and was created by Tim Berners-Lee in 1991. It is used to define the structure and layout of web pages. The most recent version is HTML5, published in 2012. HTML allows users to create web pages through the use of elements, tags, and attributes. Common uses of HTML include building websites, adding images and videos to pages, and interacting with native operating system functions through a web browser. The basic structure of an HTML document includes the <html>, <head>, and <body> tags.

Uploaded by

Mansi Arora
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
154 views

WD Unit-2 Part 2

HTML stands for Hypertext Markup Language and was created by Tim Berners-Lee in 1991. It is used to define the structure and layout of web pages. The most recent version is HTML5, published in 2012. HTML allows users to create web pages through the use of elements, tags, and attributes. Common uses of HTML include building websites, adding images and videos to pages, and interacting with native operating system functions through a web browser. The basic structure of an HTML document includes the <html>, <head>, and <body> tags.

Uploaded by

Mansi Arora
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

UNIT-1 Part 2

HTML Introduction
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to
develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML
and it was published in late 1999. 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 2012.

Why to Learn HTML?

Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in
HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning HTML:
 Create Web site - You can create a website or customize an existing web template if you know
HTML well.
 Become a web designer - If you want to start a carrer as a professional web designer, HTML
and CSS designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed and performance, it is
good to know HTML to yield best results.
 Learn other languages - Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.

Hello World using HTML.

Just to give you a little excitement about HTML, I'm going to give you a small conventional HTML
Hello World program, You can try it using Demo link.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

Applications of HTML

As mentioned before, HTML is one of the most widely used language over the web. I'm going to list few
of them here:
 Web pages development - HTML is used to create pages which are rendered over the web.
Almost every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to another
and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or
laptops owing to responsive design strategy.

 Offline support HTML pages once loaded can be made available offline on the machine without
any need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in gaming
developent arena as well.

Audience

This HTML tutorial is designed for the aspiring Web Designers and Developers with a need to
understand the HTML in enough detail along with its simple overview, and practical examples. This
tutorial will give you enough ingredients to start with HTML from where you can take yourself at higher
level of expertise.

TML Tutorial – What is HTML?

HTML Stands for HyperText Markup Language, where

 HyperText stands for Link between web pages.


 Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the web page looks and
how to display content with the help of elements. It forms or defines the structure of our Web Page,
thus it forms or defines the structure of our Web Page. We must remember to save your file with
.html extension. In this HTML Tutorial, we’ll understand all the basic concepts required to kick-start
your journey in HTML.

Applications of HTML

HTML is used for various purposes. Let us take a look at them

1. Web Pages Development


HTML is famously used for creating web pages on the world wide web. Every web page
contains a set of HTML tags and hyperlinks which are used to connect other pages. Every
page on the internet is written using HTML.
2. Navigating the Internet
Navigating on the internet would have been quite a tedious task without HTML. The
anchor tags of HTML allows us to link pages and navigate easily. Imagine our life
without anchor tags, you would literally have to enter URL everytime. Using achor tags,
you can also navigate within a webpage.
3. Embedding Images and Videos
HTML allows us to embed images and videos with ease and gives us features to adjust
height, position and even rendering type. You can adjust controls, thumbnails, timestamps
and much more for videos. Earlier this was done using Flash and HTML has made it
easier with the help of <video> tag.
4. Clinet-side storage
HTML5 has made client-side storage possible using localStorage and IndexD due to
which we no longer need to reply on Cookies. Both of these tactics have their own set of
rules and characteristics. String-based hash-table storage is provided by localStorage. Its
API is straightforward, with setItem, getItem, and removeItem functions available to
developers. On the other hand, IndexDB is a larger and more capable client-side data
store. With the user’s permission, the IndexDB database can be enlarged.
5. Game development
Although you cannot create complex high-end video games with HTML,
the <canvas> element of HTML can be used to make 2D and 3D games using CSS and
JavaScript which can be run on browsers.
6. Data entry support
With the usage of new HTML5 standards in all the latest browsers, developers can simply
add the tags for required fields, text, data format, etc. and get the data. HTML5 now has
several new attributes for data-entry and validation purposes.
7. Interacting with Native APIs
With the help of HTML, you can interact with your Operating system. With this feature,
you can easily drag files onto a web page to upload, full-screen a video, and much more

Features Of HTML

 The learning curve is very easy (easy to modify)


 Creating effective presentations
 Adding Links wherein we can add references
 Can display documents on platforms like Mac, Windows, Linux, etc
 Adding videos, graphics, and audios making it more attractive
 Case insensitive language

HTML Editor

 Simple editor: Notepad


 Notepad++
 Atom
 Best editor: Sublime Text

HTML Skeleton

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

HTML Basic

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

 Root element which acts as a container to hold all the code


 The browser should know that this is an HTML document
 Permitted content: One head tag followed by one body tag
<head>

 Everything written here will never be displayed in the browser


 It contains general information about the document
 Title, definitions of CSS and script sheets
 Metadata(information about the document)
<body>

 Everything written here will be displayed in the browser


 Contains text, images, links that can be achieved through tags
 Examples:
 ○ <p> This is our first paragraph. </p>
 ○ <a href=”http://www.google.com”>Go To Google</a>
 ○ <img src=”photo.jpg”>

HTML Comment

 Comments don’t render on the browser


 Helps to understand our code better and makes it readable.
 Helps to debug our code
 Three ways to comment:

1. Single line
2. Multiple lines
3. Comment tag //Supported by IE

HTML Elements

 Elements are created using tags


 Elements are used to define the semantics
 Can be nested and empty
What is HTML Elements Definition

<p color=”red”> This is our first Paragraph </p>


Explanation:

 Start tag: <p>


 Attributes: color =” red”
 End tag : </p> // optional
 Content: This is our first Paragraph

Types of Elements

There are different types of elements in HTML. Before moving ahead in the HTML Tutorial, let us
understand the types of elements.

 Block Level
○ Takes up full block or width and adds structure in the web page

○ Always starts from the new line

○ Always end before the new line

○ Example:

■ <p >

■ <div>

■ <h1>…<h6>

■ <ol>

■ <ul>

 Inline Level
○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :
■ <span>

■ <strong>

■ <em>

■ <img>

■ <a>

Now you can enroll for free to online HTML course in hindi

HTML Attributes

 Properties associated with each tag is called an Attribute.


 <tag name=”value”></tag> is the structure.
 There are some Global Attributes that can be applied to all the tags.
o Title: Add extra information (hover)
o Style: Add style information(font,background,color,size)
 There are some attributes that can be applied to specific tags.
o <img src=” URL” width=”100” height=”70” alt=” File cannot be loaded”>
o src is the attribute used in image tag to define the path
o Width is an attribute used to define width in pixels
o Height is an attribute used to define width in pixels
o Alt i.e alternate text if an image is not loaded
 <a href=” URL”> Name of the link </a>
o href is used for defining the path of the link

 <hr color=”red”>
o color is used to set the color of the horizontal line drawn on the webpage.

HTML Tags

 Enclosed within <>


 Different tags render different meanings.
 Example:
o <title>
 Whatever is written this tag comes up in the web page’s tab
 Defines the title of the page
 Syntax: <title>Home </title>
 <p>
o Defines the paragraph
o Syntax:<p > This is our first Paragraph </p>
List of Self-closing tags

● <hr> tag

○ Stands for horizontal rule

○ Dividing the web page

○ Syntax: <hr>

● <br> tag

○ Stands for break line

○ Moving to next line

○ Syntax: <br>

● <img> tag

○ To add images in the web page

○ Syntax: <img src=”path”>

○ Example:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>
<img src="https://images.unsplash.com/photo-1592195241233-84b15fc81ecb?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" title="lotus"
style="width:500px">

</body>

</html>

● <h1> tag …… <h6>tag

○ Stands for heading tag

○ Defines heading of a page

○ h1 represents most important page in the page

○ h6 represents least important page in the page

○ Syntax: <h1>This is my first heading </h1>

○ Example:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<h1>This is heading 1 </h1>

<h2>This is heading 2 </h2>

<h3>This is heading 3 </h3>

<h4>This is heading 4 </h4>

<h5>This is heading 5 </h5>


<h6>This is heading 6 </h6>

</body>

</html>

● <strong> tag

○ Defines the text to be bold

○ Replaced <b>tag //HTML5

○ Syntax: <strong> This text is important </strong>

○ Example

<!DOCTYPE html>

<html>

<head>

<title></title>
</head>

<body>

<p>

Lorem ipsum dolor sit <strong>amet, consectetur adipisicing elit, sed do eiusmod</strong>tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</body>

</html>

● <em> tag

○ Defines the text to be bold

○ Replaced <i>tag //HTML5

○ Syntax: <em> This text is special </em>

○ Example

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>
Lorem ipsum dolor sit <em>amet, consectetur adipisicing elit, sed do eiusmod</em>tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</body>

</html>

● <ol> tag

○ Stands for an ordered list

○ To define a series of events that take place in some order

○ Example making a tea (like a flow chart)

○ Syntax: <ol>………</ol>

● <ul> tag

○ Stands for unordered list

○ To define a series of events that take place where the order is not important.

○ Example your hobbies

○ Syntax: <ul>………</ul>

● <li> tag

○ Defines the list item

○ Used inside the ol and ul tag to define the events

○ Syntax: <li></li>

○ Example:
<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<ul>

<li> Cricket </li>

<li> Football </li>

<li> Hockey </li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>
<body>

<ol>

<li> Cricket </li>

<li> Football </li>

<li> Hockey </li>

</ol>

</body>

</html>

● <div> and <span> tags

○ Both of these are used to group different tags .

○ Acts like a container.

○ Effective while styling.

○ Syntax: <div>………</div>

○ Syntax: <span>….</span>

○ Difference <div> is block level and <span> is inline level.

○ Example

<!DOCTYPE html>

<html>
<head>

<title></title>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, <div>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut
labore</div> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut
labore</span> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</body>

</html>

● <a> tags

○ Used to add links in a web page

○ <a href=”url”> Name of the link </a>

○ Example

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<a href="https://www.google.com/">go to google</a>

</body>

</html>

● <table> tags
 Used to create a table on a web page
 Need other tags for completing the creation of a table
o <tr> : for marking the table row
o <th> : for table header
o <td> : for table column data
o Everything is always enclosed within <tr>
o <thead> : to keep all header data
o <tbody> : to keep all body data
 Example:

<!DOCTYPE html>

<html>

<head>

<title>Color Chart</title>

</head>

<body>

<h1>My first Color Chart</h1>

<table border="1">

<thead>

<tr>

<th>Name</th>

<th>Type</th>

<th>Mixed with</th>

</tr>

</thead>

<tbody>

<!-- Red -->


<tr>

<td>Red</td>

<td>Turns to pink </td>

<td>White</td>

</tr>

<!-- Dark Blue -->

<tr>

<td>Dark Blue</td>

<td>Turns to Sky Blue</td>

<td>White</td>

</tr>

<!-- Green -->

<tr>

<td>Green</td>

<td>Turns to Black</td>

<td>Blue</td>

</tr>

</tbody>

</table>

</body>

</html>
● <form> tags

 action attribute: It specifies the URL to send form data to


 method attribute: specifies the type of HTTP request(GET or POST)
 Example: <form action=”/my-form-submitting-page” method=”POST”>
 <input>: used to accept data from the user
 Some types of inputs are:

 Text: used to store text data. Syntax: type=”text”


 Password: used to enter a secure password. Syntax: type=”password”
 Placeholder: temporary text in input fields. It is generally accompanied by “text” and
“password” attributes. Syntax: placeholder=”insert- text-here”
 Button: used to include buttons in the form. Syntax: type=”button” value=”insert -text-
here”
 Submit button: For creating a submit button. All the data will get submitted when it is
clicked. Syntax: type=”submit”
 Checkbox: to provide the ability to check multiple options. Syntax: type=”checkbox”. To
check options by default, set it with the checked attribute.
 Radio Button: allows one to choose a single option. Syntax: type=”radio”. Keep the
name attribute of all the options the same.
 <select>: For every possible option to select, use an <option> tag<option>
 Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can specify
how large the text area is by using the “rows” and “cols” attributes
 Labels: add captions for individual items in a form. Syntax: <label>. A label can be used
by placing the control element inside the <label> element, or by using the “for” and “id”
attributes.
 Validations ensure that users fill out forms in the correct format, e.g.:
 required: The Boolean attribute which makes a field mandatory:
 email: the browser will ensure that the field contains an @ symbol.
 Example:

<!DOCTYPE html>

<html>

<head>

<title>Register</title>

</head>

<body>

<h1>Register Form</h1>

<form>

<label>First Name: <input type="text" name="firstName"


placeholder="firstName" required></label>

<label>Last Name: <input type="text" name="lastName"


placeholder="lastName" required></label><br>

<label>Male <input type="radio" name="gender" value="male"></label>

<label>Female <input type="radio" name="gender" value="female"></label>

<label>Other <input type="radio" name="gender" value="other"></label><br>

<label>Email: <input type="email" name="email" placeholder="your email"


required></label>

<!-- <label>Password: <input type="password" name="password" placeholder="your


password" minlength="5" maxlength="10"></label><br>

-->

<label>Password: <input type="password" name="password" placeholder="your


password" pattern=".{5,10}" required title="Please enter password of length 5 to 10"></label><br>
<label for="">Birthday: </label>

<select id="birthday" name="Month">

<option>Month</option>

<option>Jan</option>

<option>Feb</option>

<option>Mar</option>

<option>Apr</option>

</select>

<select id="birthday" name="Day">

<option>Day</option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</select>

<select id="birthday" name="Year">

<option>year</option>

<option>1990</option>

<option>1991</option>

<option>1992</option>

<option>1993</option>

<option>1994</option>
</select><br>

<label>I agree to the terms and conditions

<input type="checkbox" name="check">

</label><br>

<input type="submit" name="submit">

</form>

</body>

</html>

Meta Tags in HTML

Metadata is the additional information about a document. We can specify metadata through Meta
Tags in HTML. These Meta Tags in HTML can be used to describe elements such as author, list of
keywords, expiry date, etc. It is an empty element and does not have any closing tag. However, it
carries information within it’s attribute.

A <meta> tag does not impact the physical appearance of the document. So from an appearance point
of view, it makes no difference whether meta tags are included or not.
HTML Forms

The next step in the HTML tutorial is to understand Forms. An HTML (HyperText Markup
Language) form is a document that contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc., to store the information of a user on the web
server. An HTML form is used to enter data that is to be sent to the server for processing, such as
name, email address, password, phone number, etc., using interactive controls.

An example of a simple HTML form is:

First Name:

Last Name:

The various elements of HTML forms with the details are captured below:

<form> element

The <form> element of HTML is used to create HTML form which is used for user to input
information.

<form>
..
form elements
..
</form>

The <form> element contains different types of input elements. Some of the form elements are: text
fields, checkboxes, radio buttons, submit buttons, etc.

Below is the table consisting of form elements.

Tag Description

<form> This element defines an HTML form for user input

<input> This element defines fines an input control


<textarea> This element defines a multiline input control (text area)

<label> This element defines a label for an <input> element

<fieldset> This element groups related elements in a form

<legend> This element defines a caption for a <fieldset> element

<select> This element defines a drop-down list

<optgroup> This element of HTML <form> defines a group of related options in a drop-down list

<option> This element defines an option in a drop-down list

<button> This element defines a clickable button

<datalist> This element of HTML <form> specifies a list of pre-defined options for input controls

<output> This element defines the result of a calculation.

HTML Form Attributes

Now let’s learn about the different attributes for the HTML <form> element.

DHTML | Introduction
DHTML stands for Dynamic HTML, it is totally different from HTML. The browsers which support the
dynamic HTML are some of the versions of Netscape Navigator and Internet Explorer of version higher
than 4.0. The DHTML is based on the properties of the HTML, javascript, CSS, and DOM (Document
Object Model which is used to access individual elements of a document) which helps in making dynamic
content. It is the combination of HTML, CSS, JS, and DOM. The DHTML make use of Dynamic object
model to make changes in settings and also in properties and methods. It also makes uses of Scripting and
it is also part of earlier computing trends.
DHTML allows different scripting languages in a web page to change their variables, which enhance the
effects, looks and many others functions after the whole page have been fully loaded or under a view
process, or otherwise static HTML pages on the same. But in true ways, there is noting that as dynamic in
DHTML, there is only the enclosing of different technologies like CSS, HTML, JS, DOM, and different
sets of static languages which make it as dynamic.
DHTML is used to create interactive and animated web pages that are generated in real-time, also known
as dynamic web pages so that when such a page is accessed, the code within the page is analyzed on the
web server and the resulting HTML is sent to the client’s web browser.
HTML: HTML stands for Hypertext Markup Language and it is a client-side markup language. It is used
to build the block of web pages.
Javascript: It is a Client-side Scripting language. Javascript is supported by most of the browser, also
have cookies collection to determine the user needs.
CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of the web pages and helps
in designing of the pages. The CSS rules for DHTML will be modified at different levels using JS with
event handlers which adds a significant amount of dynamism with very little code.
DOM: It is known as a Document Object Model which act as the weakest links in it. The only defect in it
is that most of the browser does not support DOM. It is a way to manipulate the static contents.
Note: Many times DHTML is confused with being a language like HTML but it is not. It must be kept in
mind that it is an interface or browsers enhancement feature which makes it possible to access the object
model through Javascript language and hence make the webpage more interactive.
Key Features: Following are the some major key features of DHTML:

 Tags and their properties can be changed using DHTML.


 It is used for real-time positioning.
 Dynamic fonts can be generated using DHTML.
 It is also used for data binding.
 It makes a webpage dynamic and be used to create animations, games, applications along with
providing new ways of navigating through websites.
 The functionality of a webpage is enhanced due to the usage of low-bandwidth effect by DHTML.
 DHTML also facilitates the use of methods, events, properties, and codes.

Why Use DHTML?


DHTML makes a webpage dynamic but Javascript also does, the question arises that what different does
DHTML do? So the answer is that DHTML has the ability to change a webpages look, content and style
once the document has loaded on our demand without changing or deleting everything already existing on
the browser’s webpage. DHTML can change the content of a webpage on demand without the browser
having to erase everything else, i.e. being able to alter changes on a webpage even after the document has
completely loaded.
Advantages:

 Size of the files are compact in compared to other interactional media like Flash or Shockwave, and it
downloads faster.
 It is supported by big browser manufacturers like Microsoft and Netscape.
 Highly flexible and easy to make changes.
 Viewer requires no extra plug-ins for browsing through the webpage that uses DHTML, they do not
need any extra requirements or special software to view it.
 User time is saved by sending less number of requests to the server. As it is possible to modify and
replace elements even after a page is loaded, it is not required to create separate pages for changing
styles which in turn saves time in building pages and also reduces the number of requests that are sent
to the server.
 It has more advanced functionality than a static HTML. it is capable of holding more content on the
web page at the same time.
Disadvantages:

 It is not supported by all the browsers. It is supported only by recent browsers such as Netscape 6, IE
5.5, and Opera 5 like browsers.
 Learning of DHTML requires a lot of pre-requisites languages such as HTML, CSS, JS, etc should be
known to the designer before starting with DHTML which is a long and time-consuming in itself.
 Implementation of different browsers are different. So if it worked in one browser, it might not
necessarily work the same way in another browser.
 Even after being great with functionality, DHTML requires a few tools and utilities that are some
expensive. For example, the DHTML text editor, Dreamweaver. Along with it the improvement cost
of transferring from HTML to DHTML makes cost rise much higher.

Difference between HTML and DHTML:

 HTML is a markup language while DHTML is a collection of technologies.


 HTML is used to create static webpages while DHTML is capable of creating dynamic webpages.
 DHTML is used to create animations and dynamic menus but HTML not used.
 HTML sites are slow upon client-side technologies whereas DHTML sites are comparatively faster.
 Web pages created using HTML are rather simple and have no styling as it uses only one language
whereas DHTML uses HTML, CSS, and Javascript which results in a much better and way more
presentable webpage.
 HTML cannot be used as server side code but DHTML used as server side code.
 DHTML needs database connectivity but not in case of HTML.
 Files in HTML are stored using .htm or .html extension while DHTML uses .dhtm extension.
 HTML requires no processing from the browser but DHTML does.

CSS is used to style HTML elements such as layering and positioning the content.

ADVERTISEMENT

wheather u have to learn another language?


DHTML is NOT a scripting language like Javascript, but simply a browser feature, or enhancement,that
gives your browser the ability to be dynamic. What really want to learn is not DHTML itself but rather,
the syntax needed to use DHTML. It is the ability of the browser to alter a web page's style and look after
the page has loaded.
There are a couple of important points that you should be aware of when you are working with the
DHTML client during application development.
Here's a simple demonstration. the text below change color when the mouse moves over it:

Move your mouse here

The code looks like:

<span id="sometext"
onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">Move your mouse here</span>

In order to get this effect, I first gained access from the element's ID. Then, through the style object, and
finally the style's color property. All style properties are read/write, and are accessed in a similar manner:
element id->style object->property name.

DHTML includes CSS and JavaScript

By means of JavaScript, DHTML is the changing of the style declarations of an HTML element. For
instance,if you have a paragraph with a certain text,color defined by

p {color: #cc0000;}

you can do something like

element.style.color = '#00cc00';

as soon as this bit of script is executed the text colour changes from red to green.

Unfortunately this simple bit of DHTML is not supported by Netscape 4. In fact, Netscape 4 only
supports the moving of elements across the page and making them invisible (and a few other things, but
these are the most important) and visible. So we give an element a position on the page:

div {position: absolute;


top: 20px;
left: 0px;}

and then change its left:

element.style.left = 200;

Now element magically moves to 200 pixels from the left margin of the page.

The style property

So generally,you first go to the HTML element in Internet Explorer you want to influence like :-

document.all['tobechanged'].style.left = 200;

then change the style declarations:

element.style.styleDeclaration

If you want to change color, styleDeclaration is color, if you want to change the left, it is left. If you want
to change a style declaration with a dash in it, for instance z-index, remove the dash and make the first
letter after the dash a capital: zIndex. Same for margin-left => marginLeft.

Note that the style property reflects the inline styles of the element. This is important if you want to read
out the styles of the element. If you try to read out the color of the paragraph:
p#testP {color: #cc0000;}

<p id="testP">This is the paragraph.</p>

alert([testP].style.color);

you get an empty alert. This is because the P doesn't (yet) have an inline color style. The style defined by
p#testP is not readable through the style property.
You define your styles inline, it works fine

<p style="color: #cc0000">This is the paragraph.</p>

alert([testP].style.color);

Netscape 4
The .style property is required in all browsers, except for Netscape 4

The correct element


So changing the style of a certain HTML element is not difficult, except that many things won't work in
Netscape 4. However, you also have to tell the browser which HTML element you want to influence. To
do this, you must invoke it by its correct element ID

[content of div]

and write the DHTML script to call on that ID:

[element with ID=tobechanged].style.left = 200;

There are two problems here. first is the proper definition of a layer in Netscape 4, and second is the
differences in DOM (Document Object Model) between the various browsers.
Layers in Netscape 4
If you want to change the style of an element in Netscape 4, that element must have a position declaration
in the style sheet. If you don't give it a position, Netscape 4 simply does not recognize the element as a
layer and throws up error messages.

For example:

div#tobechanged {position: absolute;


top: 20px;
left: 0px;}

Now the DIV with ID="tobechanged" has a position and Netscape 4 recognizes it as a layer. You can also
use position: relative. This means that the element is positioned by the natural flow of the page, but is
nonetheless open to DHTML influence.

So take care to give your layers a position.

Components of Dynamic HTML

DHTML consists of the following four components or languages:

40.3M

763

Difference between JDK, JRE, and JVM

o HTML 4.0
o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It defines the
structure of a web page with various defined basic elements or tags.

CSS

CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style
and layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for accessing, controlling, and manipulating the
HTML elements. The statements in JavaScript are the commands which tell the browser for performing
an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML

Following are the uses of DHTML (Dynamic HTML):


o It is used for designing the animated and interactive web pages that are developed in real-time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.

Features of DHTML

Following are the various characteristics or features of DHTML (Dynamic HTML):

o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a
web page.
o It provides the facility for using the events, methods, and properties. And, also provides the
feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.

Difference between HTML and DHTML

Following table describes the differences between HTML and DHTML:

HTML (Hypertext Markup language) DHTML (Dynamic Hypertext


Markup language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a


set of technologies of web development.

2. It is used for developing and creating web pages. 2. It is used for creating and designing the
animated and interactive web sites or
pages.

3. This markup language creates static web pages. 3. This concept creates dynamic web
pages.

4. It does not contain any server-side scripting code. 4. It may contain the code of server-side
scripting.

5. The files of HTML are stored with the .html or .htm extension in 5. The files of DHTML are stored with
a system. the .dhtm extension in a system.

6. A simple page which is created by a user without using the 6. A page which is created by a user using
scripts or styles called as an HTML page. the HTML, CSS, DOM, and JavaScript
technologies called a DHTML page.

7. This markup language does not need database connectivity. 7. This concept needs database
connectivity because it interacts with
users.

DHTML JavaScript

JavaScript can be included in HTML pages, which creates the content of the page as dynamic. We can
easily type the JavaScript code within the <head> or <body> tag of a HTML page. If we want to add the
external source file of JavaScript, we can easily add using the <src> attribute.

Following are the various examples, which describes how to use the JavaScript technology with the
DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Example 1: The following example simply uses the document.write() method of JavaScript in the
DHTML. In this example, we type the JavaScript code in the <body> tag.

1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("JavaTpoint");
10. </script>
11. </body>
12. </html>
Test it Now

Output:

JavaScript and HTML event

A JavaScript code can also be executed when some event occurs. Suppose, a user clicks an HTML
element on a webpage, and after clicking, the JavaScript function associated with that HTML element is
automatically invoked. And, then the statements in the function are performed.

Example 1: The following example shows the current date and time with the JavaScript and HTML event
(Onclick). In this example, we type the JavaScript code in the <head> tag.

1. <html>
2. <head>
3. <title>
4. DHTML with JavaScript
5. </title>
6. <script type="text/javascript">
7. function dateandtime()
8. {
9. alert(Date());
10. }
11. </script>
12. </head>
13. <body bgcolor="orange">
14. <font size="4" color="blue">
15. <center> <p>
16. Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
17. # to check the today's date and time.
18. </p> </center>
19. </font>
20. </body>
21. </html>
Test it Now

Output:

Explanation:

In the above code, we displayed the current date and time with the help of JavaScript in DHTML. In the
body tag, we used the anchor tag, which refers to the page itself. When you click on the link, then the
function of JavaScript is called.

In the JavaScript function, we use the alert() method in which we type the date() function. The date
function shows the date and time in the alert dialog box on the web page.

JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and attributes of the HTML
event.
Example 1: This example checks the Grade of a student according to the percentage criteria with the
JavaScript and HTML DOM. In this example, we type the code of a JavaScript in the <body> tag.

1. <html>
2. <head>
3. <title> Check Student Grade
4. </title>
5. </head>
6.
7. <body>
8. <p>Enter the percentage of a Student:</p>
9. <input type="text" id="percentage">
10. <button type="button" onclick="checkGrade()">
11. Find Grade
12. </button>
13. <p id="demo"></p>
14. <script type="text/javascript">
15. function checkGrade() {
16. var x,p, text;
17. p = document.getElementById("percentage").value;
18.
19. x=parseInt(p);
20.
21.
22. if (x>90 && x <= 100) {
23. document.getElementById("demo").innerHTML = "A1";
24. } else if (x>80 && x <= 90) {
25. document.getElementById("demo").innerHTML = "A2";
26. } else if (x>70 && x <= 80) {
27. document.getElementById("demo").innerHTML = "A3";
28. }
29. }
30. </script>
31. </body>
32. </html>
Test it Now

Output:
Explanation:

In the above code, we check the student’s Grade with the help of JavaScript in DHTML. In the JavaScript
code, we used the checkGrade() method, which is invoked when we click on the button. In this function,
we stored the value in variable p. The value is taken in the input field. When the value is stored, then we
convert the value of p into integer and store the conversion value in x, because the value in p is text.

After that, we used the if-else-if statement for finding the grade according to the percentage.

CSS with JavaScript in DHTML

With version 4 of HTML, JavaScript code can also change the style such as size, color, and face of an
HTML element.

Example 1: The following example changes the color of a text.

1. <html>
2. <head>
3. <title>
4. getElementById.style.property example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11. <script type="text/javascript">
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now

Output:

Explanation:

In the above code, we changed the color of a text by using the following syntax:

1. document.getElementById('demo').style.property=new_value;.

The above syntax is used in the JavaScript function, which is performed or called when we clicked on the
HTML buttons. The different HTML buttons specify the color of a text.

DHTML CSS

We can easily use the CSS with the DHTML page with the help of JavaScript and HTML DOM. With the
help of this.style.property=new style statement, we can change the style of the currently used HTML
element. Or, we can also update the style of any particular HTML element
by document.getElementById(id).style.property = new_style statement.

Example 1: The following example uses the DHTML CSS for changing the style of current element:
1. <html>
2. <head>
3. <title>
4. Changes current HTML element
5. </title>
6. </head>
7. <body>
8. <center>
9. <h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
10. <center>
11. </body>
12. </html>
Test it Now

Output:

Explanation:

In the above code, we used the this.style.color='blue' statement, which shows the color of a text as blue.

Example 2: The following example uses the DHTML CSS for changing the style of the HTML element:

1. <html>
2. <head>
3. <title>
4. changes the particular HTML element example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11. <script type="text/javascript">
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now

Output:

Explanation:

In the above code, we used the var element = document.getElementById('demo').style.color =


newColor; statement, which changes the color of a text as green and blue according to the buttons.

DHTML Events

An event is defined as changing the occurrence of an object.


It is compulsory to add the events in the DHTML page. Without events, there will be no dynamic content
on the HTML page. The event is a term in the HTML, which triggers the actions in the web browsers.

Suppose, any user clicks an HTML element, then the JavaScript code associated with that element is

S.No. Event When it occurs

executed. Actually, the event handlers catch the events performed by the user and then execute the code.

Example of events:

1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.

Following table describes the Event Handlers used in the DHTML:


1. onabort It occurs when the user aborts the page or media file loading.

2. onblur It occurs when the user leaves an HTML object.

3. onchange It occurs when the user changes or updates the value of an object.

4. onclick It occurs or triggers when any user clicks on an HTML element.

5. ondblclick It occurs when the user clicks on an HTML element two times together.

6. onfocus It occurs when the user focuses on an HTML element. This event handler works
opposite to onblur.

7. onkeydown It triggers when a user is pressing a key on a keyboard device. This event handler
works for all the keys.

8. onkeypress It triggers when the users press a key on a keyboard. This event handler is not
triggered for all the keys.

9. onkeyup It occurs when a user released a key from a keyboard after pressing on an object or
element.

10. onload It occurs when an object is completely loaded.

11. onmousedown It occurs when a user presses the button of a mouse over an HTML element.

12. onmousemove It occurs when a user moves the cursor on an HTML object.

13. onmouseover It occurs when a user moves the cursor over an HTML object.

14. onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML element.

15. onmouseup It occurs or triggers when the mouse button is released over an HTML element.

16. onreset It is used by the user to reset the form.


17. onselect It occurs after selecting the content or text on a web page.

18. onsubmit It is triggered when the user clicks a button after the submission of a form.

19. onunload It is triggered when the user closes a web page.

Following are the different examples using the different event handlers, which helps us to understand the
concept of DHTML events:

Example 1: This example uses the onclick event handler, which is used to change the text after clicking.

1. <html>
2. <head>
3. <title>
4. Example of onclick event
5. </title>
6. <script type="text/javascript">
7. function ChangeText(ctext)
8. {
9. ctext.innerHTML=" Hi JavaTpoint! ";
10. }
11. </script>
12. </head>
13. <body>
14. <font color="red"> Click on the Given text for changing it: <br>
15. </font>
16. <font color="blue">
17. <h1 onclick="ChangeText(this)"> Hello World! </h1>
18. </font>
19. </body>
20. </html>
Test it Now

Output:
Example 2: This example uses the onsubmit event handler, which gives an alert after clicking on a
submit button.

1. <html>
2. <head>
3. <title>
4. Example of onsubmit event
5. </title>
6. </head>
7. <body>
8. <form onsubmit="Submit_Form()">
9. <label> Enter your name: </label>
10. <input type="text">
11. <label> Enter your Roll no: </label>
12. <input type="Number">
13. <input type="submit" value="submit">
14. </form>
15. <script type="text/javascript">
16. function Submit_Form()
17. {
18. alert(" Your form is submitted");
19. }
20. </script>
21. </body>
22. </html>
Test it Now

Output:

DHTML DOM

DHTML DOM stands for Dynamic HTML Document Object Model.

It is a w3c standard, which is a standard interface of programming for HTML. It is mainly used for
defining the objects and properties of all elements in HTML. It also defines the methods for accessing the
HTML elements.

Example: The following program helps in understanding the concept of DHTML DOM. This example
changes the color of text and displays the text in red colour automatically.

1. <html>
2. <head>
3. <title>
4. Example of DHTML DOM
5. </title>
6. </head>
7. <body>
8. <font color = "blue">
9. <p id="demo"> This text changes color when the page loaded. </p>
10. </font>
11. <script type="text/javascript">
12. document.getElementById('demo').style.color = "red";
13. </script>
14. </body>
15. </html>
Test it Now

Output:

Advantages of DHTML

Following are the various benefits or the advantages of DHTML (Dynamic HTML):

o Those web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.

Disadvantages of DHTML

Following are the various disadvantages or limitations of DHTML (Dynamic HTML):

o The scripts of DHTML does not run properly in various web browsers. Or in simple words, we
can say that various web browsers do not support the DHTML. It is only supported by the latest
browsers.
o The coding of those websites that are created using DHTML is long and complex.
o For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If any user
does not know these languages, then it is a time-consuming and long process in itself.

You might also like