Web Technology Uttarakhand Open University

MARKUP LANGUAGES WEB STANDARDS THE

HISTORY OF MARKUP LANGUAGES HTML XML
XHTML
1.1 INTRODUCTION

1.2 OBJECTIVES
1.3 MARKUP LANGUAGE
1.4 HISTORY OF MARKUP LANGUAGE
1.5 TYPES OF MARKUP LANGUAGE
1.5.1 HTML
1.5.2 XML
1.5.3 XHTML
1.6 GLOSSARY
1.7 CHECK YOUR PROGRESS
1.8 BIBLIOGRAPHY/REFERENCE
1.9 SUGGESTED READINGS

UNIT 1 Page 1 of Page 15

Web Technology Uttarakhand Open University

1.1 INTRODUCTION
We know that Internet is a universal system of inter related computer networks. Now a day, the
internet has become a most widely used source of information that is used in wide range of fields
like business, education, medical science, and research. Web and Internet sometimes used in the
same manner, however there is a slight difference between them in the use of these terms. Both
the terms are related, but are not synonymous. Internet can be defined as a universal system of
interconnected network of computer, while Web is defined as a basic service that carried out on
the Internet.
Web technology is communication standard that provides us the facility to develop Web
applications. These applications can be developed with the help of sets of classes, objects,
methods, and properties that are predefined in a markup language, programming language, or style
sheet language. In addition this provides an interface for sharing of information between Web
servers and their clients. Web servers store and host websites and that are available to their clients
with the help of URL link. Followings are some common Web technologies that are used to
develop websites:
HTML XML CSS XHTML JavaScript ASP.NET PHP
Here in this unit we will briefly discuss about the history of Markup Language, basics of HTML,
XML, and XHTML and the formats of these.

1.2 OBJECTIVE
After successful completion of this unit the students will be able to
 Know the concept of Markup Language
 Illustrate the major features of Markup Language
 Explain the format of different Markup Language
 Know about different types of Markup Language
 Familiar with history of Markup Language

1.3 MARKUP LANGUAGE

UNIT 1 Page 2 of Page 15

Web Technology Uttarakhand Open University

“The programming languages are used to give instruction to a computer to perform a particular
task where as the markup languages are used to present information."
In other words we can say that the Markup language is specifically designed computer language
that is used to develop Web applications or websites. Markup language consists of a set of symbols,
which are used to provide instructions. These are simple keywords, names, or tags which are used
to format the entire view of a page as well as the data within the page. There are certain rules that
Markup language is used to define and shows how to use the symbols. A webpage is created by
marking-up contents say text, images, etc. by using the Hypertext Markup Language (HTML).
HTML, SGML, and XML are some examples of markup language.

1.4 HISTORY OF MARKUP LANGUAGE

Markup languages came into existence in the 1960s. Generalized Markup Language (GML) was
jointly developed by Charles Goldfarb, Edward Mosher and Raymond Lorie in 1969 and the
early 1970s. The term GML was formed with the use of their surname initials by Goldfarb. With
the help of GML a document can be marked up with tags to define about the text, that is whether
it is paragraph, header, list, table etc. The language HTML was developed by Sir Tim Berners
Lee in the year 1991. He wrote a document known as “HTML Tags” and proposed less than two
dozen elements for writing web pages. In the year 1985 the Standard Generalized Markup
Language (SGML) was published by National Information Standards Organization (NISO), which
was approved by International Organization for Standardization (ISO). It was possible to do simple
format posts with the help of HTML as new Internet browsing technology was developed.
Currently, three markup languages HTML, XML and XHTML are widely used for Web designing
and development.

1.5 TYPES OF MARKUP LANGUAGE

Followings are the most widely used markup language:

 SGML - Standard Generalized Markup Language,

 HTML - Hypertext Markup Language, and
 XML - Extensible Markup Language

UNIT 1 Page 3 of Page 15

Web Technology Uttarakhand Open University

1.5.1 HTML
The most popular and widely used markup language is HTML and developers can achieve
complex design and formatting using this. HTML codes are easy to read and understand. HTML
was developed from simpler markup languages like SGML and GML. Initially, HTML was used
just to interpret texts as it was constituted a small set of tags. The language and its synatax become
more complex due to the latest development of HTML.
Major HTML characteristics are summarized as follows:
 This is a language known as Hypertext Markup Language.
 This is used to create Web pages.
 This is used to explain the basic structure of a Web page.
 This consists of series of elements.
 These elements instruct the browsers how to display the contents.
 These elements used to label the piece of contents like "Heading of the Page", "Paragraph
of the Page", "This is a Link", etc.
Source: Internet [www.W3Schools.com]

Example of HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the Page </title>
</head>
<body>

<h1>This is My First Heading</h1>

<p>This is My First paragraph.</p>

</body>
</html>
Try»
Fig. 1.1 Example of HTML Code
Followings are the explanations of the above example.
 <!DOCTYPE html> is a declaration used to describe that, this is an HTML document.
 <html> is the root, or we can say this the main element of the HTML page.
 <head> describes the detailed information regarding whole HTML page.

UNIT 1 Page 4 of Page 15

Web Technology Uttarakhand Open University

 <title> used to specify the title of the HTML page. The content of the title will be displayed
on the title bar of the browser or in the tab of the web page.
 <body> defines the contents mentioned as the body of the text. All visible contents are
mentioned inside this body. For example the headings, the paragraphs, the images, the
hyperlinks, the tables, the lists etc.
 <h1> this is used to describe a large heading.
 <p> this is used to describe a paragraph.
Now let us discuss the elements of an HTML.
A start tag, its contents, and an end tag are used to describe an HTML element.
The syntax is <tagname> Contents </tagname>
In the following figure some HTML elements are listed. Element contents are always specified
within the start tag and the end tag:
Source: Internet [www.W3Schools.com]

Start tag Element content End tag

<h1> This is the First Heading </h1>

<p> This is the first paragraph. </p>

<br> None none

Fig. 1.2 HTML elements

<h1>this is the First Heading</h1>

<p>this is the first paragraph</p>

Note: Sometimes there are several HTML elements that do not contain any content. Here in the
above table (Fig. 1.2) the <br> element is an empty element. Empty elements never contain the
end tag.

UNIT 1 Page 5 of Page 15

Web Technology Uttarakhand Open University

1.5.2 XML
XML is another popular markup language. This language is based on platform independent rules
as far as processing and displaying of textual information is concerned in a structured way. The
XML documents become a suitable format in exchanging structured textual information amongst
various applications because of its platform independent nature. The main aim of XML is designed
for storing and transporting data. There is a similarity between XML and HTML as far as the use
of tags to annotate texts. However, there is a slight difference in the use of these tags. XML tags
are not predefined where as the HTML tags are predefined. The tags are created to describe the
data which are defined. To exchange data between different systems XML is frequently used. This
is also sometimes used as a database layout. To create sitemaps hierarchical guides for a website
the XML is commonly used.
In XML an Extensible Mark Up file is not contains the format of the data but it is specified as a
text based language which carries data in a form of tags. This is the best approach to store and
transfer data online. The XML file that holds XML code and the file are saved with file name
extension .xml. There are some other XML based files types like DAE, FDX, and EDS are also
used like HTML tags. One XML-based file known as RSS Feed is used for notification whenever
there is a post goes up.
A simple Syntax of XML is given below.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<root>
<child>
</child>
</root>
Fig. 1.3 Syntax of XML
Now we will briefly discuss the steps of creating an XML file.
Creating a File:
A text editor is needed for creating an XML file. Followings are steps to create a file.
1. Open any text-editor.
2. An XML declaration should be at the beginning. This is required to specify to the editor
that this is an XML file.

UNIT 1 Page 6 of Page 15

Web Technology Uttarakhand Open University

3. Now a root element is to be created as the next step. In the start tag the root element is to
be mentioned and this must be end with the close tag.
4. A child element is to be added as the next step.
Now the file in XML is created and this stores the information about a project within the tags. Now
save this file with a name and extension ‘.xml’, for example “myfile.xml”.
File Format of XML:
an XML file format is based on an XML Document Object Model (DOM). This is the
programming API of HTML and XML documents. This is used to define a standard method for
accessing and edit or manipulate the document elements of XML. This creates a tree like structure
of an XML document. This DOM tree is used to access all the elements. Modification/deletion of
used elements can be done and new elements can be formed in this tree. The elements of an XML
document are known as node. In the figure 1.4 a sample XML DOM is depicted.
Source: Internet [www.W3Schools.com]

Fig. 1.4 XML DOM tree structure

Here we will see the basic steps for insertion of data and store in the XML File. Visual studio will
be used here.
We need to follow these steps.

UNIT 1 Page 7 of Page 15

Web Technology Uttarakhand Open University

Step1: Open visual studio then follow: Click on File → Select New Website → Select ASP.NET
Empty Website → Select visual C# → Now press OK.
Next open the Solution Explorer. → Select Add New Item → Select Add Default.aspx page.
Next use the Toolbox to drag and drop.
The screen shot for the same is shown in figure 1.5.

Fig. 1.5 Screen for Insertion of Data

Step2: Open solution Explorer → Select Add an XML File → Select Make a table.
The screen shot is shown in figure 1.6.
Source: Internet [MY.NET tutorial]

Fig.1.6 Code for add XML file

UNIT 1 Page 8 of Page 15

Web Technology Uttarakhand Open University

Step3: Now double click on Insert Button (as shown in Fig. 1.5). Copy and paste the following
codes (Default.aspx.cs) as shown in the figure 1.7.
Source: Internet [MY.NET tutorial]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Drawing;
public partial class_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{ DataSet ds = new DataSet();
//read xml file path
ds.ReadXml(Server.MapPath("~/XMLFile.xml");
DataRow dr = ds.Tables[0].NewRow();
dr[0] = TextBox1.Text;
dr[1] = TextBox2.Text;
dr[2] = TextBox3.Text;
ds.Tables[0].Rows.Add(dr);
//write the data in XMLFile.xml(file name)
ds.WriteXml(Server.MapPath("~/XMLFile.xml"));
Label5.Text = "DATA SUCCESSFULLY INSERTED";
Label5.ForeColor = Color.Red;
}
}
Fig. 1.7 Code for writing XML file
NOTE:-> Here two extra Namespaces “using System.Data”; and “using System.Drawing” are
added.
Step4: Press F5 to run the Default.aspx page. The screen will be shown as figure 1.8.

UNIT 1 Page 9 of Page 15

Web Technology Uttarakhand Open University

Fig. 1.8 Default.apx Page

Step5:-Now user can provide the required data in the respective field and after that press INSERT
Button. The screen that will be appeared is shown as figure 1.9.
Source: Internet [MY.NET tutorial]

Fig. 1.9 Data Insertion screen with dummy data

NOTE: Press YES, in case any popup window appears.
Step6: Now click on the XML File. The data against the field name shows that these have been
successfully inserted.

UNIT 1 Page 10 of Page 15

Web Technology Uttarakhand Open University

Fig. 1.10 XML File with inserted data

Source: Internet [MY.NET tutorial]

1.5.3 XHTML
XHTML (EXtensible HyperText Markup Language) is a standardized version of HTML. This is
used for designing web applications. This is a combination of HTML and XML. This is also as a
subset of SGML. As we understand that XML is used to describe the data, and HTML is used to
display the data that is why the combination of these two (XML and HTML) the XHTML becomes
a much stronger markup language than HTML. The XHTML is used to define a variety of modules,
like text and hypertext.
The main aim of XHTML was to make HTML more extensible and flexible so that this can be
compatible with other data format like XML. Additionally the browsers ignore errors if any in the
HTML pages, and continue to display the website still if it contains some errors in the markup.
Therefore the XHTML is much powerful in error handling.
The screenshot below on figure 1.11 demonstrates all the necessary elements of an XHTML page.

Source: Internet [web.simmons.edu]

UNIT 1 Page 11 of Page 15

Web Technology Uttarakhand Open University

Fig. 1.11 Elements of an XHTML

Explanation of the above XHTML Elements:
 Line numbers 1-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The first two lines that include the Document Type Definition (DTD) describes to the browser
about the type of markup language the page is being used. The first item of an (X)HTML document
is the Document Type Definition (DTD). The last part of line 2 which is “xhtml1-transitionl”,
describes that, this is a file of an XHTML 1 document. Meaning of the other parts is beyond the
scope of this unit.
 Line number 4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This describes that, this is the beginning of an <html> tag. All the items except the DTD is
enclosed within the html tag in the XHTML document. Rest of the things mentioned in the middle
is the XML Name Space.

UNIT 1 Page 12 of Page 15

Web Technology Uttarakhand Open University

 Line number 5
<head>
This describes the beginning of the XML <head> tags. All of the details regarding the page are
mentioned in this section. Nearly all the things that are mentioned within this section are not
appeared in the browser.
 Line number 6
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Describes the <meta> tag. Many different types of meta tags are used in XML. Here the character
set as utf-8 is specified.
 Line number 8
<title>XHTML Transitional Template</title>
This line contains the <title> tags, by specifying the page title between <title> and </title> that is
the opening and closing of the title tags. Here in this case the title of the page is "XHTML
Transitional Template ". This title will be displayed at the top of window in the browser.
 Line number10
</head>
This line indicates end of the head tag. A forward slash ( / ) in it indicates the end of the closing
tag. Mostly the HTML tag contains an opening tag and a closing tag.
 Line number 12
<body>
The <body> tag starts here. Within the opening and closing body tags the actual contents are
mentioned.
 Line number 15
</body>
The forward slash (/) indicates the end of the <body> tag.
 Line number 16
</html>
This line indicates the end of the HTML document. Here note that the forward slash inside the tag
means the end of the closing tag.

UNIT 1 Page 13 of Page 15

Web Technology Uttarakhand Open University

1.6 GLOSSARY
 DAE Digital Asset Exchange
 DOM Document Object Mode
 DTD Document Type Definition
 EDS Electronic Data Sheets
 GML Generalized Markup Language
 HTML HyperText Markup Language
 PHP Hypertext Preprocessor
 SGML Standard Generalized Markup Language
 XHTML Extensible HyperText Markup Language
 XML Extensible Markup Language

1.7 CHECK YOUR PROGRESS

1. Descriptive type questions-
a) What do you mean by Web Technology? What are the benefits of Web Technology.
b) Discuss different types of Web Technology.

c) What are the elements of HTML?

d) Explain the format of HTML.

e) Write a brief history of Markup Language

f) How XML is different from HTML

g) Write down the steps to create an XML file.

h) What is the main aim of XHTML

i) What is DTD? Why it is used?

2. Objective type questions-

a) HTML is used to create a Webpage. [True/False]

b) HTML describes the structure of a Web page. [True/False]

c) The <head> element contains meta information about the HTML page. [True/False]

d) The <p> element of HTML defines a print. [True/False]

UNIT 1 Page 14 of Page 15

Web Technology Uttarakhand Open University

e) Hypertext Markup Language was the brainchild of _________________________.

f) XML is used to display data, while HTML is used to describe data. [True / False]

g) The DTD describes to the browser what type of markup language a page is using. [True /
False]

3. Multiple Choice Questions

A. What is DOM in HTML?

i) Language dependent application programming
ii) Convention for representing and interacting with objects in html documents
iii) Hierarchy of objects in ASP.NET
iv) Application programming interface

B. In which part of the HTML metadata is contained?

i) head tag ii) title tag iii) html tag iv) body tag

C. HTML is a subset of ___________

i) SGMT ii) SGML iii) SGME iv) XHTML

D. Which character is used to represent when a tag is closed in HTML?

i) # ii) ! iii) / iv) \

E. XML is designed to ___________ and _____________ data.

i) design, style ii) design, send iii) store, style iv) store, transport

F. Which is the correct XML declaration?

i) <xml version="1.0" encoding="UTF-8"/>
ii) <xml version="1.0" encoding="UTF-8"></xml>
iii) <?xml version="1.0" encoding="UTF-8"?>
iv) <?xml type="document" version="1.0" encoding="UTF-8"?>

G. In XML, DTD stands for ____.

i) Document Type Declaration ii) Data Type Definition
iii) Document Type Definition iv) Document To Declaration

H. A Document Type Definition (DTD) is a set of ____ which is used to define the type of
document for an SGML-family markup language.
i) markup definition ii) markup document
iii) main declarations iv) markup declarations

UNIT 1 Page 15 of Page 15

Web Technology Uttarakhand Open University

I. In XML DOM, what does DOM stand for ____.

i) Document Object Model
ii) Date Object Model
iii) Document Oriented Model
iv) Document Open Model

J. HTML and XHTML stands for ______

i) Hyper Text Markup Language and Extensible HyperText Markup Language
ii) Hyper Text Markup Language and Extensible HyperText Marking Language
iii) Hyper Text Marking Language and EXtensible HyperText Marking Language
iv) Hyper Text Marking Language and Extensible HyperText Markup Language

K. What is the correct syntax of doctype in HTML5?

i) </doctype html> ii) <doctype html> iii) <doctype html!> iv) <!doctype html>

Answer (Objective Type Question)-

[a] True [b] True [c] True [d] False

[e] Sir Tim Berners-Lee [f] False [g] True

Answer (Multiple Choice Question)-

[A] ii [B] i [C] b [D] iii

[E] iv [F] iii [G] iii [H] iv

[I] i [J] i [K] iv

1.8 BIBLIOGRAPHY/REFERENCE
 Website Development Technologies: A Review, International Journal for Research in
Applied Science and Engineering Technology, 10.22214/ijraset.2022.39839, 2022 Vol 10
(1) Author: Pratiksha D Dutonde.

UNIT 1 Page 16 of Page 15

Web Technology Uttarakhand Open University

 Design Planning in End-User Web Development, IEEE Symposium on Visual Languages

and Human-Centric Computing (VL/HCC 2007), Author(s):Mary Beth Rosson,Hansa
Sinha, Mithu Bhattacharya, Dejin Zhao.
 An Analysis of HTML and CSS Syntax Errors in a Web Development Course,
DOI: 10.1145/2700514, ACM Transactions on Computing Education, 2015,Vol 15(1), pp.
1-21, Cited By ~ 12, Author(s): Thomas H. Park, Brian Dorn, Andrea Forte.

1.9 SUGGESTED READINGS

 Web Technology: A Developer's Perspective Paperback – 31 October 2014, by J.
Akilandeswari (Author), N. P. Gopalan (Author).
 Web Technology: Theory and Practice, by M. Srinivasan, Released, June 2012,
Publisher(s): Pearson India, ISBN: 9788131774199.
 HTML 5: Covers CSS3, JavaScript,XML,XHTML, AJAX, PHP & jQuery, Kogent
Learning Solutions inc. dreamtech press.

UNIT 1 Page 17 of Page 15