Module 3: Web Development Tools
Lesson 1: Brief History of XML
What is XML
Characteristics of Xml
XML Usage
What is Markup?
Is XML a Programming Language?
Lesson 2: Brief History of HTML
Introduction to HTML
What is HTML
HTML Editor
Writing HTML Using Notepad
The Difference between XML and HTML
Lesson 3: Brief History of DHTML What is
DHTML?
Components of Dynamic HTML
o HTML 4.0 o CSS
o JavaScript o
DOM.
Uses of DHTML
Features of DHTML
Difference between HTML and DHTML
DHTML JavaScript
JavaScript and HTML event
JavaScript and HTML DOM
CSS with JavaScript in DHTML
DHTML CSS
DHTML Events
DHTML DOM
Advantages of DHTML
Disadvantages of DHTML
Lesson 1: Brief History of XML
1.0 What is XML
XML stands for Extensible Markup Language. It is a text-based markup language derived from
Standard Generalized Markup Language (SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying how
to display it like HTML tags, which are used to display the data. XML is not going to replace
HTML in the near future, but it introduces new possibilities by adopting many successful features
of HTML. 1.1 Characteristics of Xml
There are three important characteristics of XML that make it useful in a variety of systems and
solutions −
• XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
• XML carries the data, does not present it − XML allows you to store the data
irrespective of how it will be presented.
• XML is a public standard − XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.
1.2 XML Usage
A short list of XML usage says it all −
• XML can work behind the scene to simplify the creation of HTML documents for large
web sites.
• XML can be used to exchange the information between organizations and systems.
• XML can be used for offloading and reloading of databases.
• XML can be used to store and arrange the data, which can customize your data handling
needs.
• XML can easily be merged with style sheets to create almost any desired output.
• Virtually, any type of data can be expressed as an XML document.
1.3 What is Markup?
XML is a markup language that defines set of rules for encoding documents in a format that is
both human-readable and machine-readable. So what exactly is a markup language? Markup is
information added to a document that enhances its meaning in certain ways, in that it identifies
the parts and how they relate to each other. More specifically, a markup language is a set of
symbols that can be placed in the text of a document to demarcate and label the parts of that
document.
Following example shows how XML markup looks, when embedded in a piece of text −
<message>
<text>Hello, world!</text>
</message>
This snippet includes the markup symbols, or the tags such as <message>...</message> and
<text>... </text>. The tags <message> and </message> mark the start and the end of the XML
code fragment. The tags <text> and </text> surround the text Hello, world!.
1.4 Is XML a Programming Language?
A programming language consists of grammar rules and its own vocabulary which is used to create
computer programs. These programs instruct the computer to perform specific tasks. XML does
not qualify to be a programming language as it does not perform any computation or algorithms.
It is usually stored in a simple text file and is processed by special software that is capable of
interpreting XML.
A simple syntax rules to write an XML document. Following is a complete XML document −
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
You can notice there are two kinds of information in the above example −
• Markup, like <contact-info>
• The text, or the character data.
Lesson 2: Brief History of HTML
1.0 Introduction to HTML
HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially, published
in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
HTML is a very evolving markup language and has evolved with various versions updating. Long
before its revised standards and specifications are carried in, each version has allowed its user to
create web pages in a much easier and prettier way and make sites very efficient.
• HTML 1.0 was released in 1993 with the intention of sharing information that can be readable
and accessible via web browsers. But not many of the developers were involved in creating
websites. So the language was also not growing.
• Then comes the HTML 2.0 , published in 1995 , which contains all the features of HTML 1.0
along with that few additional features, which remained as the standard markup language for
designing and creating websites until January 1997 and refined various core features of HTML.
• Then comes the HTML 3.0 , where Dave Raggett who introduced a fresh paper or draft on
HTML. It included improved new features of HTML, giving more powerful characteristics for
webmasters in designing web pages. But these powerful features of new HTML slowed down
the browser in applying further improvements.
• Then comes HTML 4.01, which is widely used and was a successful version of HTML before,
which is currently released and used worldwide. HTML 5 can be said for an extended version
of HTML 4.01, which was published in the year 2012 .
1.2 What is HTML
HTML (Hypertext Markup Language) is the only markup language for creating web pages. It
provides some titles, headings, paragraphs, lists, tables, embedded images, etc., to describe the
structure of text-based and multimedia information in HTML documents. Here is some key
information to easily describe HTML:
• HTML (Hypertext Markup Language) is a language for publishing text-based and
multimedia information on the World Wide Web.
• HTML is a straightforward Computer Coding Language. It was developed in the 90s. HTML is
the basis of a web page, and the web page is the basis of a website. HTML uses 'tags' to create
web documents.
• HTML is a hypertext markup language; It is a predetermined set of markup tags used to design
web pages.
• HTML is the first language of web designing. CSS is also used along with HTML to improve
web page design further. JavaScript is used with HTML to make web pages dynamic.
• HTML is relatively easy to learn because every tag is predefined, so only we need to know
the work of tags and their attributes.
• Web browsers (Chrome, Internet Explorer, Firefox, Safari, and other web browsers) are
software' to read HTML and display web page design as output.
• You can write HTML in any simple editor such as Notepad. And other software such as
Adobe Dreamweaver, Sublime, NetBeans, Notepad ++, etc., are mainly used for writing and
editing HTML.
• ".html" or ".htm" are the two extensions used to write and save HTML files; we can write
HTML code in any text editor and save it as "filename.html" or "filename.htm".
1.3 HTML Editor
To write HTML code, we need an HTML editor, and we can do this with the help of a notepad
on our computer. Some computers with different Operating-system have different text editors.
But all text editors are used to write and save texts in various formats. In this lesson, you will
learn how to write, save, and run HTML documents.
A web page is a text file in which a hypertext language is written according to HTML grammar.
This HTML code is displayed by the browser converting it to a web page. Programs in which
HTML code is written or modified are called HTML editors.
Many specialized software applications are available online to edit HTML code and create web
pages such as Adobe Dreamweaver, Bluefish, Google Web Designer, Sublime Text, etc.
Table of Contents
# Writing HTML Using Notepad
# Step 1: Open Notepad
# Step 2: Write HTML Code
# Step 3: Save the File as HTML Document
# Step 4: Run the HTML Page in Your Browser
1.4 Writing HTML Using Notepad
Notepad is a basic application that comes with the Windows operating system; It is commonly
used to write and save texts. Below are four steps to write, save, and run HTML using Windows
Notepad:
Step 1: Open Notepad
You can easily find Notepad in the list of programs.
Step 2: Write HTML Code
After opening the Notepad, you can now write your HTML code on it. Here is a sample HTML
code, for example.
<!DOCTYPE html>
<html>
<body>
<h2>This is page heading.</h2>
<p> This is my first <strong>paragraph text</strong>.</p>
</body>
</html>
Step 3: Save the File as HTML Document
To save a file, go to the Notepad File menu and click the Save As option. After that, it will show
you a popup window where you have to select the file path, file name, and file type to save this
file. You have to type the file name with the .html extension to save the file as an HTML
document.
Step 4: Run the HTML Page in Your Browser
To run a saved HTML file, you only have to open the file in any web browser.
1.5 The Difference between XML and HTML XML
and HTML were designed with different goals:
(i) XML was designed to carry data - with focus on what data is
(ii) HTML was designed to display data - with focus on how data looks (iii) XML
tags are not predefined like HTML tags are
Lesson 3: Brief History of DHTML
1.0 What is DHTML?
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.
1.2 Components of Dynamic HTML
DHTML consists of the following four components or languages: o
HTML 4.0
o CSS
o JavaScript o DOM.
1.2.1 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.
1.2.2 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.
1.2.3 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.
1.2.4 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.
1.3 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
realtime.
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.
1.4 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.
1.5 Difference between HTML and DHTML
Following table describes the differences between HTML and DHTML:
HTML (Hypertext Markup DHTML (Dynamic Hypertext Markup language)
language)
1. HTML is simply a markup 1. DHTML is not a language, but it is a set of technologies
language. of web development.
2. It is used for developing 2. It is used for creating and designing the animated and
and creating web pages. interactive web sites or pages.
3. This markup language 3. This concept creates dynamic web pages.
creates static web pages.
4. It does not contain any 4. It may contain the code of server-side scripting.
server-side scripting code.
5. The files of HTML are 5. The files of DHTML are stored with the .dhtm extension
stored with the .html or .htm in a system.
extension in a system.
6. A simple page which is 6. A page which is created by a user using the HTML, CSS,
created by a user without DOM, and JavaScript technologies called a DHTML page.
using the scripts or styles
called as an HTML page.
7. This markup language does 7. This concept needs database connectivity because it
not need database interacts with users.
connectivity.
1.6 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 describe 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:
1.7 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 2: 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.
1.8 JavaScript and HTML DOM
With version 4 of HTML, JavaScript code can also change the inner content and attributes of the
HTML event.
Example 3: 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:
1.8.1 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.
1.9 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 4: 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:
1.9.1 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.
2.1 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 5: 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:
2.1.1 Explanation:
In the above code, we used the this.style.color='blue' statement, which shows the color of a text
as blue.
Example 6: 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:
2.1.2 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.
2.2 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 table describes the Event Handlers used in the DHTML:
S.No. Event When it occurs
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 7: 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 8: 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:
2.3 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 9: 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:
2.4 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.
2.5 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.
CSC 224 Assignment
1. Re-write the code in the examples 1, 2, 3, 4 and 6 above test the code and run it to
display the output.
Submit both the code and output as an attachment to the email:
odidowu@yahoo.com latest by 14th Monday, 2021 by 12.00 Noon.
NOTE
Submission received after the day and time will not be entertain.
Hint: Read 1.4 Writing HTML Using Notepad as a guide.
