Web Technology Part 3

DHTML Tutorial
• DHTML stands for Dynamic Hypertext
Markup language i.e., Dynamic HTML.
• Dynamic HTML is not a markup or
programming language but it is a term that
combines the features of various web
development technologies for creating the
web pages dynamic and interactive.
• The DHTML application was introduced by
Microsoft with the release of the 4th version
of IE (Internet Explorer) in 1997.

Components of Dynamic HTML
• DHTML consists of the following four
components or languages:
1. HTML 4.0
2. CSS
3. JavaScript
4. 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

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.

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.

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.

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

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

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

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.

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

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

Advantages of DHTML
• Following are the various benefits or the
advantages of DHTML (Dynamic HTML):
1. Those web sites and web pages which are
created using this concept are fast.
2. There is no plug-in required for creating the web
page dynamically.
3. Due to the low-bandwidth effect by the dynamic
HTML, the web page functionality is enhanced.
4. This concept provides advanced functionalities
than the static HTML.
5. 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):
• 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.
• The coding of those websites that are created
using DHTML is long and complex.
• 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.

• Here are 2 ways to disable a
HTML <a> link/anchor element using
• CSS or
• by using inline JavaScript

Disable HTML anchor with
CSS pointer-events: none

• The pointer-events can be set using CSS
properties and selectors:

Document Object Model
• The document object represents the whole
html document.
• When html document is loaded in the
browser, it becomes a document object.
• It is the root element that represents the html
document.
• It has properties and methods.
• By the help of document object, we can add
dynamic content to our web page.

Properties of document object
• Let's see the properties of document object
that can be accessed and modified by the
document object.

Methods of document object
• We can access and change the contents of
document by its methods.
• The important methods of document object
are as follows:

JavaScript - HTML DOM Methods
• HTML DOM methods are actions you can
perform (on HTML Elements).
• HTML DOM properties are values (of HTML
Elements) that you can set or change.

Document Object Model
• The document object represents the whole
html document.
• When html document is loaded in the
browser, it becomes a document object.
• It is the root element that represents the html
document.
• It has properties and methods.
• By the help of document object, we can add
dynamic content to our web page.
• As mentioned earlier, it is the object of
window. So

Accessing field value by document
object
• In this example, we are going to get the value
of input text by user. Here, we are
using document.form1.name.value to get the
value of name field.
• Here, document is the root element that
represents the html document.
• form1 is the name of the form.
• name is the attribute name of the input text.
• value is the property, that returns the value of
the input text.

2. Javascript - document.getElementsByName()
method
• The document.getElementsByName() method
returns all the element of specified name.
• The syntax of the getElementsByName()
method is given below:

• Example of document.getElementsByName()
method
• In this example, we going to count total
number of genders.
• Here, we are using getElementsByName()
method to get all the genders.

3. Javascript -
document.getElementsByTagName() method
• The document.getElementsByTagName() met
hod returns all the element of specified tag
name.
• The syntax of the getElementsByTagName()
method is given below:

• Example of
document.getElementsByTagName() method
In this example, we going to count total
number of paragraphs used in the document.
To do this, we have called the
document.getElementsByTagName("p")
method that returns the total paragraphs.

Changing the Value of an Attribute

This example changes the value of the
src attribute of an <img> element

Finding HTML Elements by Class
Name
• If you want to find all HTML elements with the
same class name,
use getElementsByClassName().
• This example returns a list of all elements
with class="intro".

document.write()
• In JavaScript, document.write() can be used to
write directly to the HTML output stream:

Validate a 10 digit phone number

Difference 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 a
system.
5. The files of DHTML are stored
with the .dhtm extension in a
system.

Parent is called after child
automatically

Explanation of Code:
• The above code is a HTML and JavaScript based code.
• We have used a div tag having div id = parent and
within div we have nested a button having button id =
child
• Now, within the JavaScript section, we have assigned
the html elements (p1 and c1) using the querySelector
() function to the variable parent and child.
• After that, we have created and included an event
which is the click event to both div element and child
button. Also created two functions that will help us to
know the sequence order of the execution of the
parent and child. It means if the child event is invoked
first, "child is invoked" will be printed otherwise
"parent is invoked" will get printed.

• Thus, when the button is clicked, it will first
print "child is invoked" which means that the
function within the child event handler
executes first. Then it moves to the invocation
of the div parent function.
• The sequence has taken place due to the
concept of event bubbling. Thus, in this way
event bubbling takes place.

CSS Transition
• The CSS transitions are effects that are added
to change the element gradually from one
style to another, without using flash
or JavaScript.
• You should specify two things to
create CSS transition.
1. The CSS property on which you want to add
an effect.
2. The time duration of the effect.

Change Several Property Values
• The following example adds a transition effect
for both the width and height property, with a
duration of 2 seconds for the width and 4
seconds for the height:

CSS Multiple Transition Effect
• It is used to add transition effect for more
than one CSS property.
• If you want to add transition effect on more
than one property, separate those properties
with a comma.
• Let's take an example. Here, the transition
effects on width, height and transformation.

CSS filter
• CSS filters are used to set visual effects to text,
images, and other aspects of a webpage.
• The CSS filter property allows us to access the
effects such as color or blur, shifting on the
rendering of an element before the element
gets displayed.
• The syntax of CSS filter property is given
below.

brightness()
• As its name implies, it is used to set the
brightness of an element.
• If the brightness is 0%, then it represents
completely black, whereas 100% brightness
represents the original one.
• It can also accept values above 100% that
provide brighter results.
• We can understand it by using the following
illustration.

blur()
• It is used to apply the blur effect to the
element.
• If the blur value is not specified, then the
value 0 is used as a default value.
• The parameter in blur() property does not
accept the percentage values. A larger value of
it creates more blur.

blur(0px); will remain image
in original

grayscale()
• It converts the input image into black and
white.
• 0% grayscale represents the original one,
whereas 100% represents completely
grayscale.
• It converts the object colors into 256 shades
of gray.

sepia()
• It is used to transform the image into a sepia
image.
• 0% value represents the original image,
whereas the 100% value indicates the
completely sepia.

hue-rotate()
• It applies a hue-rotation on the input image.
Its perimeter value defines the number of
degrees around the color circle; the image will
be adjusted.
• Its default value is 0 degree, which represents
the original image.
• Its maximum value is 360 degrees.

opacity()
• It is used to apply transparency to the input
image.
• Its 0% value indicates completely transparent,
whereas the 100% value represents the
original image, i.e., fully opaque.

invert()
• It is used to invert the samples in the input
image.
• Its 100% value represents completely
inverted, and 0% values leave the unchanged
input.
• Negative values are not allowed in it.

CSS masking
• The mask property in CSS is used to hide an
element using the clipping or masking the image
at specific points.
• Masking defines how to use an image or the
graphical element as a luminance or alpha mask.
It is a graphical operation that can fully or
partially hide the portions of an element or
object.
• Using masking, it is possible to show or hide the
parts of an image with different opacity levels.
• In CSS, the masking is achieved by using
the mask-image property, and we have to
provide an image as the mask.
• Let's understand it using some illustrations.

Example
• In this example, we are placing a mask on the
image element.
• Here, there are two specific images, and we
are applying masking on them, the final image
built by putting the entire mask images
together, stretching them, etc.

• There is another example in which we are also
using the images for masking.
• We are using two images in which one of
them is the mask image that contains stripes.

CSS Positioning Elements
• The position property in CSS tells about the
method of positioning for an element or an
HTML entity. There are five different types of
position property available in CSS:
1. Fixed
2. Static
3. Relative
4. Absolute
5. Sticky

• The positioning of an element can be done
using the top, right, bottom,
and left properties.
• These specify the distance of an HTML
element from the edge of the viewport.
• To set the position by these four properties,
we have to declare the positioning method.

• Let’s understand each of these position
methods in detail:
• Fixed: Any HTML element with position:
fixed property will be positioned relative to
the viewport.
• An element with fixed positioning allows it to
remain at the same position even we scroll
the page.
• We can set the position of the element using
the top, right, bottom, left.

• Example: The below example illustrates the
CSS positioning element by using the position:
fixed property.

2. Static:
This method of positioning is set by default.
If we don’t mention the method of positioning
for any element, the element has
the position: static method by default.
By defining Static, the top, right, bottom and left
will not have any control over the element.
The element will be positioned with the normal
flow of the page

• Relative:
• An element with position: relative is
positioned relatively with the other elements
which are sitting at top of it.
• If we set its top, right, bottom, or left, other
elements will not fill up the gap left by this
element.

relative property.

• Absolute: An element with position:
absolute will be positioned with respect to its
parent.
• The positioning of this element does not
depend upon its siblings or the elements
which are at the same level.
absolute property.

• Sticky:
• Element with position: sticky and top:
0 played a role between fixed & relative based
on the position where it is placed.
• If the element is placed at the middle of the
document then when the user scrolls the
document, the sticky element starts scrolling
until it touches the top.
• When it touches the top, it will be fixed at that
place in spite of further scrolling.
• We can stick the element at the bottom, with
the bottom property.

sticky property.
• HTML

Class v/s Id
• The selectors in CSS are part of the CSS ruleset
and used to select the content we want to style.
Id and class both are the CSS element selectors
and are used to identify an element based on its
assigned name.
• CSS id and class selectors are the most
used selectors in CSS.
• During the use of selectors, sometimes there is
confusion occurs between id and class.
• Both of them do not have any default styling
information; they require CSS to select them and
apply it to style.
• Although both are used for selecting the
element, they are different from each other in
many ways.

ID Selector
• The id selector is used to select the id
attribute of an HTML element for selecting a
particular element.
• An id is always unique within the page, so it is
chosen to select a single, unique element.
• It is written with the hash character (#),
followed by the id of the element

In this example, we are selecting the
element with the id "para".

Class Selector
• The class selector is used to select
the HTML elements with a specific class
attribute.
• It is written with a period character . (full stop
symbol) followed by the class name.

CSS Class Selector for a specific
element
• We can also style the specific element using
the class selector, no matter if it is applied to
different elements.
• If we need to specify that only one specific
HTML element should be affected, we must
use the element name with the class selector.
• It will be clear from the following example.

Output
There is another example in which we apply multiple classes on the same element.
Let's see an illustration of the same.

Content Type
• Content Type is also known as MIME (Multipurpose
internet Mail Extension)Type. It is a HTTP header that
provides the description about what are you sending to
the browser.
• MIME is an internet standard that is used for extending
the limited capabilities of email by allowing the
insertion of sounds, images and text in a message.
• The features provided by MIME to the email services
are as given below:
1. It supports the non-ASCII characters
2. It supports the multiple attachments in a single
message
3. It supports the attachment which contains executable
audio, images and video files etc.
4. It supports the unlimited message length.

Web Technology Part 3

More Related Content

Similar to Web Technology Part 3 (20)

More from Thapar Institute (18)

Recently uploaded (20)

Web Technology Part 3