Web Application Development

This content covers various topics related to web application development such as HTML5, HTML4, character encoding, networking devices, and more. It includes activities such as warm-up and introductions, list of requirements for a journey, IP address categorization, thin vs. thick clients, and exploring HTML5 and HTML4 differences. The usage of HTML5 elements, or tags, and character encoding are also explained.

Running head: WEB APPLICATION DEVELOPMENT
Web Application Development
Name of the Student:
Name of the University:
Author Note

1
WEB APPLICATION DEVELOPMENT
Activity 1.1: Warm up and introductions
Firstly, for adding the introduction in the blackboard we are required to follow the
following steps:
 Firstly, we are required to click on the discussion link on the course menu.
 Next we are required to create on the forum on the link.
 Then we are required to create the Introduction title option.
 After writing the introduction we are required to click on the submit button.
For the introduction I would like to state that I am <name of the student> …… . I am
currently on course toc complete the course of 6CC549 Web Development - Creating
Effective
Applications Units 1-3. This assignment has a number of activities and instructions
associated with it that would help me in gaining knowledge in the sectors of web
development and networking. In addition to this, the interconnection in between the web
services and networks has also been explained in this assignment. The assignment also
requires introduction about the web server that is currently being used by me. I am currently
using the Google Chrome browser. It is a freeware browser available on the net for the users
for free download. It was released in the year 2008 in the month of September. It is supported
on all platforms. The major components of the browser include the Adobe Flash Player plug-
in by the which helps in the live video and live gamming features for the users (Reimers and
Stewart 2015). The ports of the browser use the Web kit layout engine as I am working on the
windows operating the ports fork directly to the web kit using Blink. Chromecast is another
important feature of this browser that was very helpful for me and also this was very
attractive feature for me. I brought this Chromecast in January its about 3.5 months and me
and my family enjoying it. Googles one of the best product its convert your normal TV into

2
WEB APPLICATION DEVELOPMENT
smart TV. This device looks Awesome. It is just like a pen drive. Guys you can insert it in
any HDMI port and enjoy the smart TV life. With this device you can watch movies, videos
games. Anything you do on your phone you can do same as it on your TV. They provide you
an extension cable also to connect your device. It is awesome. This device cast your mobile
screen on TV.
Another feature of it is the Chromebook that I used for quite a span of time. I'm a
college student and don't really need anything major just for typing my papers and getting on
the web. I wasn't planning on using this for gaming or anything thing like that. So far I've had
this for a couple of months and sadly tonight is the first time I needed to print something from
it. All the other times I printed from school, anyways what I found out is that I can't use a
classic printer to print from here. This means that I cannot plug in a printer on to here and
print the papers that I really require. I was not able to Use the PC as my host and hence this
experience was very bad for me.
Activity 1.2: List the requirements of a journey
It is to be noted that we are traveling to the friends’ place by train. Hence, the main
requirements of the journey are that we are required to travel to station by a cab and when we
reach the station we would need a ticket to enter the station and then the ticket would be
required to get out of the station (Tilk et al. 2017). In addition to this, the fuel would be
required for the car to reach the station. Hence, the list of requirements to reach the house of
the friend from house are:
 Car
 Train
 Fuel
 Gas

3
WEB APPLICATION DEVELOPMENT
 Tickets
In addition to this, an alternate path is also suggested foe reaching the friend’s house. In
the alternate route the travelling is done bus. This would help the use to reach the house of
his friend however having less requirements. The graph below describes the route of the user.
Activity 1.3: IP address
The categorization of the IP addresses is provided below:
192.168.0.1 – Class C Address

4
WEB APPLICATION DEVELOPMENT
10.10.10.10 – Class A Address
202.45.36.257 – Class C Address
Activity 1.4: Networking devices
The network devices are all used for the connection in between the different nodes in
a network. The different devices within a network are switches, hubs, routers and access
points. However, each of them is distinct and each of them have different capabilities. The
hubs are used mainly for the connection to the computers within a network and this enables
them to communicate with each other (Aho et al. 2014). Each of the computers of the system
connects to the hubs by the use of ports so that they communicate with each other efficiently.
The information is passed from one computer to another with the use of hubs. The source or
the destinations of the data cannot be identified by the hubs. Hence, the hub transmits the data
to all the devices within the network and hence, this is one of the major drawback of the
device. In addition to this, there is another disadvantage of the hub and that is the hub cannot
perform both the functions of sending and receiving data at the same time, it can transmit
only in a single channel at a time.
Respective to this, the switches are similar to the hubs however they can provide
additional features to the network that the hubs would not be able to provide. Firstly, the
intended destination for the transfer of data can be easily identified by the switch and this,
would make the switch send the data to only those destinations which would help be intended
by the source. The switch arte also to send the information and receive it as well
correspondingly at a same time. The information also travels at a faster rate in the switch than
that in the hubs (Pagani et al. 2017). This helps the user to transfer the data at a faster speed
and saves time. It is recommended for the best uses in the offices and private use.

5
WEB APPLICATION DEVELOPMENT
Additionally, there are the routers in the networking system used for the connection to
the different type of devices in the network. They are also known as the intermediary devices
within the network that helps in the connection of different type of devices within the
network and helps them in efficient communication among each other. They are also used for
establishing the connection and distributing the internet within the nodes of the network.
They are also capable to direct the traffic of the network among the different network
peripherals. They also provide an in-built security options and one such option is the firewall
in the systems. It is also to be noted that the access points also require mentions along with
that of the routers. With addition to the routers the access points are also used for performing
the similar functions. They provide the options of wireless access to the network of the
system in which they are implanted. The wired internet access is spread to the whole network
with the use of the wireless access points. This implements the wireless access to the network
by the peripherals. This would help the users to move to any location they want to and still
stay connected to the network. It can plug into any of the hub, switch or the wired router
which is pre-existing in the network. This is generally used in the place of public gathering
where generally the wireless access would be very useful. For instances these are very useful
in the public places such as hotel, airport and other access points.
Activity 1.5: Thin vs. thick clients
In the world where the client/server architecture is main component in which the
networks are generally based on it is very important that the user can define efficiently, that
the workload is to be handled by the clients or the servers (Skuta, Bartunek and Svozil 2014).
This is the criteria that helps in the determination of whether the network is a thin client or a
thick client architecture. However, it is to be noted both the architecture are almost similar,
however there are dissimilarities in between both the architectures as the terms are generally
used for the hardware that are used in the network and the application that are to be included

6
WEB APPLICATION DEVELOPMENT
in the network. The main differences are generally encountered in the applications of the
system. The difference between the thin and thick clients are described in the table below;
Thin Clients Thick Clients
The deployment is very easy as it does not
have any requirement of extra software
installation
The deployment is very expensive as it
requires more application to be installed
before it can be actually deployed
It requires server validation It requires client verification
In case a server goes down the collection of
data is halted as there is requirement of
constant communication with the server.
No such requirements are identified for the
thick clients.
The interfacing with other equipment are
not possible in this architecture
Can be interfaced easily.
This runs only as the specifications
provided by the servers
The only communication is required during
intermittence with the servers.
The architecture needs more downtime. The architecture has a robust technology
effecting for the better uptime.
The security threat is reduced in this
architecture
The security issues are also increased in the
End of Unit Activity Web System Design
The design of the client architecture is provided below:

7
WEB APPLICATION DEVELOPMENT
For both the firms the thin clients would be recommended so that the front end
application and the functions can be easily handled by the servers that is implemented for the
system. The terminals and the mainframe would be designed for the so that they are
connected directly to the client systems (Sigl, Faschingbauer and Berl 2018). Additionally,
the this would be helpful for the organization as it would be very difficult for the organization
to manage a large number of thick clients that are existing the network. Hence the
centralization of the server is very important for the firm to conduct their task very
efficiently.
In addition to this, the HTTP requests from the clients are generally the get and post
methods. The client generally makes the request for the websites, files and the message
requests from the application front ends.
There is various type of methods used in the HTTP protocols such as the GET, POST
and PUT methods. The GET method is used to retrieve the information from the browser and
results fetched by the method are safe, regardless of how many times they have been fetched
and displayed. The request is either partial or conditional. The POST method is used for

8
WEB APPLICATION DEVELOPMENT
requesting the resources from the URI so that they can use the entity that is provided. The
method is also used for the creation or updating of a new entry. In addition to this the PUT
method is used for storing the entity at a URI. It creates an entity or updates an existing one.
The main difference in between the POST and PUT method is the impotency.
The response codes are generally classified into groups by their activities whether the
request of the codes have been completed successfully or not. They have been classified into
informational responses, successful responses, redirects, client errors, and server’s errors.
Activity 2.1: Explore HTML5 and HTML4 differences
Differences between HTML5 and HTML4 is provided below:
HTML4 HTML5
Syntax
The HTML4 syntax are only valid for the
HTML4 only and invalid for the HTML5
syntaxes (Sanjopa and Gancarski 2017).
The syntax of the HTML5 is simplified and
is compatible with HTML4 and HTML1 as
well.
The HTML4 uses the primitive type of
syntaxes and hence, lack in various type of
features.
The HTML5 uses various type innovative
tags for the implementation of the websites.
The HTML4 does not have any new
element
The new <canvas> element has been
developed in HTML5 (Mangal 2016)
API Language
The HTML4 languages were not able to use
the API elements.
The HTML5 language has new API
functionalities:
 HTML Geolocation

9
WEB APPLICATION DEVELOPMENT
 HTML Drag and Drop
 HTML Local Storage
 HTML Application Cache
 HTML Web Workers
 HTML SSE
Activity 2.2: Explain usage of HTML5 elements
Keygen: The HTML <keygen> is used for the web forms for the generation of the key
materials and it also helps in the submission of the public keys for the HTML forms. It is also
important for the generation of the RSA key for the websites.
Meter: The tag is used for the measurement of a known range and within the scalar value
provided which is also known as the gauge.
BDI: The tag is used for the indication of the span of texts for formatting it with a different
type of attribute. This is generally used during the translation of the language from Arabic to
English.
Template: the tag is used for the standard DOM based approach for tinplating it client side. It
allows the user to declare the mark-up fragments which are then parsed as the HTML.
Activity 2.3: <div> or <section>
The <div> tag has no special function at all, it is basically the representation of the
class, language and title of the HTML page. It is recommended that the <div> element is to
be used only as a class when no other attributes are available for the declaration of the
elements. On the other hand, the <section> tag is used for the representation of generic

10
WEB APPLICATION DEVELOPMENT
section of a document of an application. It is to be identified with an heading as a child of the
section.
Activity 2.4: What is character encoding?
Character Encoding is a characteristic of a HTML which helps in the interpretation of
the raw data of the binaries into the real characters. In addition to this, the numbers are
generally paired with the characters (Bray 2017). The characters are also grouped together for
the formation of a sentence or a phrase.
End of Unit Activity Create a HTML Page for a Blog Post
<!DOCTYPE html>
<html lang = "en">
<head>
<meta chartset = "utf-8">
<title> Hobies </title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>

11
WEB APPLICATION DEVELOPMENT
</head>
<nav>
<a href="about"> about </a>
<a> | </a>
<a href="introduction"> introduction </a>
</nav>
<header align="centre"><h1> STAMP COLLECTION </h1></Header>
<main>
<section>
<h4 id="introdcution"> </h4>
<article> Collecting stamps is a hobby that attracts people from all around the world.
When you're collecting stamps you can find them from a multiple of sources, including free
sources, as well as paying for those stamps that you just can't do without. When you start
collecting stamps you'll want to spend as little money as possible and concentrate on getting a
beginner's collection of stamps. </article>
</section>
<section>
<h4> VIDEO </h4>
<video align="centre" width="720" height="540" controls>
<source src="E:\2018\June\751368\video.mp4">

12
WEB APPLICATION DEVELOPMENT
</video>
<br>
<h4> METER </h4>
<meter value="2" min="0" max="10">2 out of 10</meter>
</section>
</main>
<footer>
<h4 style="color=red;">ABOUT</h4>
<p id="about">
When you first decide to start collecting stamps you may find that you have nothing to start
with. If this is the case you can buy a pack of stamps from a hobby shop or a stamp collector
to get you started. For a small price, usually around $6.00, you'll get an assortment of stamps
from different countries. This is a great way to determine what types of stamps appeal to you
and what area you might like to focus on.
</p>
</footer>
</html>
Activity 3.1: Create an HTML table with sample data
<!DOCTYPE html>
<html>
<body>

13
WEB APPLICATION DEVELOPMENT
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Date</th>
</tr>
<tr>
<td>Student1</td>
<td>Data1</td>
<td>Date1</td>
</tr>
<tr>
<td>Student2</td>
<td>Data2</td>
<td>Date2</td>
</tr>
<tr>

14
WEB APPLICATION DEVELOPMENT
<td>Student3</td>
<td>Data3</td>
<td>Date3</td>
</tr>
</table>
</body>
</html>
Activity 3.2: Explore table attributes and structure
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Date</th>
</tr>
<tr>
<td>Student1</td>

15
WEB APPLICATION DEVELOPMENT
<td>Data1</td>
<td>Date1</td>
</tr>
<tr>
<td>Student2</td>
<td>Data2</td>
<td>Date2</td>
</tr>
<tr>
<td>Student3</td>
<td>Data3</td>
<td>Date3</td>
</tr>
</table>
</body>
</html>

16
WEB APPLICATION DEVELOPMENT
HTML Forms
The HTML forms are used for various type of purposes and they provide the user
with various different type of uses (Manister 2015). They can be used for the design of a page
such as a registration form. This form provides the users with the ability to accept data from
any type of webpage and insert the data into their databases. In addition to this, the forms can
also be used for displaying the data required by the users in tabular form. It also helps in
providing a great view to the users.
Cascading Style Sheet CSS
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Syntax
<!DOCTYPE html>
<html>

17
WEB APPLICATION DEVELOPMENT
<head>
<meta chartset = "utf-8">
<title> Hobies </title>
<link rel="stylesheet" type= "text/css" href="style.css">
</head>
<body>
<h2 style= "text-align:center">Student Information Table</h2>
<table id="t01" style="width:100%">
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact</th>
<th>Course</th>
<th>Subjects</th>
</tr>
<tr>
<td>S001</td>
<td>Student1</td>
<td>43 besen street</td>

18
WEB APPLICATION DEVELOPMENT
<td>6546542</td>
<td>B.tech</td>
<td>English, Math, Physiscs</td>
</tr>
<tr>
<td>S002</td>
<td>Student2</td>
<td>43 other street</td>
<td>6546542</td>
<td>B.tech</td>
<td>Spanish, Math, Physiscs</td>
</tr>
<tr>
<td>S003</td>
<td>Student11</td>
<td>43 no street</td>
<td>6546542</td>
<td>B.tech</td>
<td>Latin, Math, Physiscs</td>
</tr>

19
WEB APPLICATION DEVELOPMENT
</table>
</body>
</html>
Integration with a HTML Document
<head>
<meta chartset = "utf-8">
<title> Hobies </title>
<link rel="stylesheet" type= "text/css" href="style.css">
</head>
Unit Summary
This unit has helped us in learning the effective use of the HTML and CSS language
and also made us understand the importance of designing the pages and documentation for
any type of website. In addition to this, the networking features of the system that is
implemented by the user for designing the front end of the website for any type of
organization.
End of Unit Activity Build with CSS and HTML
The screenshot of the designed Student Form has been provided below:

20
WEB APPLICATION DEVELOPMENT

21
WEB APPLICATION DEVELOPMENT
Reference List
Aho, M.E., Chen, D., Eisley, N.A., Gooding, T.M., Heidelberger, P. and Tauferner, A.T.,
International Business Machines Corp, 2014. Calculating a checksum with inactive
networking components in a computing system. U.S. Patent 8,914,498.
Bray, T., 2017. The javascript object notation (json) data interchange format.
Mangal, P., 2016. A Modern interactive approach in Web Design using HTML5.
International Journal of Engineering Technology and Computer Research, 4(2).
Masinter, L., 2015. Returning Values from Forms: multipart/form-data.
Pagani, M., Giuliani, A., Ӧberg, J., De Carli, F., Morbelli, S., Girtler, N., Arnaldi, D.,
Accardo, J., Baucknhet, A., Bongioanni, F. and Chincarini, A., 2017. Progressive
disgregation of brain networking from normal aging to Alzheimer’s Disease. Journal of
Nuclear Medicine.
Reimers, S. and Stewart, N., 2015. Presentation and response timing accuracy in Adobe Flash
and HTML5/JavaScript Web experiments. Behavior research methods, 47(2), pp.309-327.
Sanoja, A. and Gançarski, S., 2017, September. Migrating Web Archives from HTML4 to
HTML5: A Block-Based Approach and Its Evaluation. In Advances in Databases and
Information Systems (pp. 375-393). Springer, Cham.
Sigl, C., Faschingbauer, A. and Berl, A., 2018. Management of Virtual Desktops in Energy
Efficient Office Environments Using Thin Clients. CLOUD COMPUTING 2018, p.100.
Škuta, C., Bartůněk, P. and Svozil, D., 2014. InCHlib–interactive cluster heatmap for web
applications. Journal of cheminformatics, 6(1), p.44.

22
WEB APPLICATION DEVELOPMENT
Tilk, C., Rothenbächer, A.K., Gschwind, T. and Irnich, S., 2017. Asymmetry matters:
Dynamic half-way points in bidirectional labeling for solving shortest path problems with
resource constraints faster. European Journal of Operational Research, 261(2), pp.530-539.