Assignment

Chapter 4

HTML
HTML (Hypertext Markup Language) based on SGML (Standard Generalized Markup Language).
An HTML file is a text file containing small markup tags. The markup tags tell the Web browser
how to display the page. It is the standard language that is used to create the web pages. It is the
core of web page development. Just as the skeleton of human shapes the human body, HTML
helps to shapes the web page. The structure of the web page is defined in HTML using the markups.
In HTML, the elements are represented as tags. The browser uses HTML tags to render the content
of the web pages. With HTML, authors describe the structure of pages using markup.

CSS
CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. CSS is used
to impose a particular style on the document. It is a language for specifying how documents
(collection of information that is structured using HTML) are presented to users. The primary goal
of CSS is to allow separation of a document’s presentation characteristics (formatting) from the
document’s content. Separating content and formatting simplifies document creation and
maintenance, improves presentation flexibility, and allows multiple HTML pages to share
formatting by placing formatting rules in an external file. CSS rules can control virtually every
aspect of data formatting, including font, color, weight, spacing, positioning, background colors
and images, link characteristics, and more.

Figure 1: Using Stylesheets to add presentation

JavaScript
JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language
for the web which is supported by most web browsers including Chrome, Firefox, Safari, internet
Explorer, Edge, Opera, etc. A JavaScript consists of lines of executable computer code. A
JavaScript is usually embedded directly into HTML pages. Most mobile browsers for smart phones
support JavaScript too. It is primarily used to enhance web pages to provide for a more user
friendly experience. These include dynamically updating web pages, user interface enhancements
such as menus and dialog boxes, animations, 2D and 3D graphics, interactive maps, video players,
and more. This mode of JavaScript usage in the web browser is also referred to as client-side
JavaScript. JavaScript is used to add a dynamic component to the web page and make most
elements on the page programmable. JavaScript can be used to detect the visitor's browser.
JavaScript can be used to create cookies.

JavaScript can be used in HTML in the header section as shown in the below
example:

Figure 2: JavaScript used in HTML

Document Object Model

The Document Object Model (DOM) is a programming interface for HTML and XML documents.
It represents the page so that programs can change the document structure, style, and content. The
DOM represents the document as nodes and objects. That way, programming languages can
connect to the page. A web page is a document which can be displayed in the browser window or
as the HTML source with both being a same document. DOM represents the same document so it
can be manipulated. It also helps in modifying with a scripting language such as JavaScript.

Eg: the standard DOM specifies that the getElementsByTagName method in the code below must
return a list of all the <P> elements in the document:
 Figure 3: Document Object Model
All of the properties, methods, and events available for manipulating and creating web pages are
organized into objects (for example, the document object that represents the document itself, the
table object that implements the special HTMLTableElement DOM interface for accessing HTML
tables, and so forth. This is written in JavaScript, but it uses the DOM to access the document and
its elements.

Eg: Javascript used to manipulate data object model:

Figure 4: Displaying all name/values of cookies in a document

The DOM is not a programming language, but without it, the JavaScript language wouldn't have
any model or notion of web pages, HTML documents, XML documents, and their component parts
(e.g. elements). Every element in a document—the document as a whole, the head, tables within
the document, table headers, text within the table cells—is part of the document object model for
that document, so they can all be accessed and manipulated using the DOM and a scripting
language like JavaScript.
AJAX
AJAX stands for Asynchronous JavaScript and XML. It is not a programming language. It is the
combination of a browser built-in XMLHttpRequest object that requests data from web server and
Java Srcript + HTML DOM that displays or uses the data obtained. It allows web pages to update
asynchronously by exchanging data with the web server under the hood. It makes the possibility
of updating the parts of the web page without actually reloading the web page.

XML
XML stands for eXtensible Markup Language. It is written in plain text and is readable. It is
designed in such a way that it is readable by both human and machine easily. XML is just the
information wrapped up within the tags. XML tags are not predefined. In web development, XML
is used to separate data from presentation. This helps to display same XML data with different
presentations as required. We can view and edit XML document with simple text editor. It is a
cross platform software and hardware independent tool that is used for transmitting information.
XML is meant to emphasize intelligent and logical formatting within technical documents. XML
provides a way for databases from different vendors to exchange information across the Internet
It is the hardware and software independent tool to store and communicate data.

HTML GET & POST Method

GET method
It is used to retrieve information from the server using a URI. It has no effect on the data except
data retrieval. The server response contains status line, header, empty line and message body. GET
requests can be cached and remain in the browser history. GET requests can be bookmarked and
should never be used when dealing with sensitive data. GET requests is only used to request data
(not modify). GET requests have length restrictions.

POST method

It is used to send some data to the server. The data includes form data, file upload and so on. The
server response contains status line, header, empty line and message body. The message body
contains the page that is to be redirected after the data update. POST requests are never cached
and do not remain in the browser history. POST requests cannot be bookmarked. POST requests
have no restrictions on data length.

What You See Is What You Get (WYSIWYG)

WYSIWYG stands for What You See Is What You Get. It is a tool that allows the developer to
create a web pages visually using a drop and drag method. The developer is responsible to make
the layout and enter the necessary data. All the rest work is handled by the tool itself. It provides
a user interface for the purpose of web page development. CSS can be used from the properties
panel for each visual element. The advantage of such tool is that it helps in rapid development of
the web pages. The disadvantage of such tool is that the developers do not have completely precise
control over the web page design.

Universal Web Browsing:

Universal Web browsing is a technique used to locate and display Web pages. Two popular
Universal Web browsers are Netscape Navigator and Microsoft’s Internet Explorer. Both of these
are classified as graphical browsers; they display both graphics and text. Internet browsers can also
provide sound and video.