GOMBE STATE UNIVERSITY

DEPARTMENT OF COMPUTER SCIENCE

COSC 319: Web Technology

By

Abubakar Abdullahi

June, 2023

1
 COURSE OUTLINE
1. A brief history of Internet.
2. Basic Definitions: Design, Web Design, World Wide Web, Browsers, Web
Servers
3. Introduction to HTML.
4. Building Web Application using Dreamweaver – Window Elements, Site
Definition, Text, Colour, Background, Graphics, Linking.
5. Dynamic Web Application Using PHP
6. Basic Cascading Style Sheet
7. Graphic Design using Macromedia Fireworks, Macromedia Flash, 3D Flash
Animator, Photoshop etc.
8. Client Server Computing using the Web.
9. Client Site Script: JavaScript, VB Script
10. Server Site Script: PHP, ASP, JSP, etc.
11. Web Development for Mobile and Wireless Computing
12. Proofing and testing the site
13. Content Management System
14. Publishing via FTP
15. Hosting Site

2
What is Internet
The Internet is the global system of interconnected computer networks that uses the
Internet protocol suite to communicate between networks and devices. It is a network
of networks that consists of private, public, academic, business, and government
networks of local to global scope, linked by a broad array of electronic, wireless, and
optical networking technologies.

Evolution of Internet

The concept of Internet was originated in 1969 and has undergone several
technological & Infrastructural changes as discussed below:

 The origin of Internet devised from the concept of Advanced Research Project
Agency Network (ARPANET).
 ARPANET was developed by United States Department of Defense.
 Basic purpose of ARPANET was to provide communication among the various
bodies of government.
 Initially, there were only four nodes, formally called Hosts.
 In 1972, the ARPANET spread over the globe with 23 nodes located at different
countries and thus became known as Internet.
 By the time, with invention of new technologies such as TCP/IP protocols, DNS,
WWW, browsers, scripting languages etc.,Internet provided a medium to publish
and access information over the web.

3
Internet Domain Name System
When DNS was not into existence, one had to download a Host file containing host
names and their corresponding IP address. But with increase in number of hosts of
internet, the size of host file also increased. This resulted in increased traffic on
downloading this file. To solve this problem the DNS system was introduced.

Domain Name System helps to resolve the host name to an address. It uses a
hierarchical naming scheme and distributed database of IP addresses and associated
names

IP Address
IP address is a unique logical address assigned to a machine over the network. An IP
address exhibits the following properties:

 IP address is the unique address assigned to each host present on Internet.

 IP address is 32 bits (4 bytes) long.
 IP address consists of two components: network component and host
component.
 Each of the 4 bytes is represented by a number from 0 to 255, separated with
dots. For example 137.170.4.124

Uniform Resource Locator (URL)

Uniform Resource Locator (URL) refers to a web address which uniquely identifies a
document over the internet.

This document can be a web page, image, audio, video or anything else present on
the web.

4
For example, www.gsu.edu.ng/internet_technology/index.html is an URL to the
index.html which is stored on GSU web server under internet_technology directory.

URL Types

There are two forms of URL as listed below:

 Absolute URL
 Relative URL
Absolute URL

Absolute URL is a complete address of a resource on the web. This completed address
comprises of protocol used, server name, path name and file name.

For example http:// www.gsu.edu.ng / internet_technology /index.htm. where:

 http is the protocol.

 gsu.edu.ng is the server’s name.
 index.htm is the file name.

The protocol part tells the web browser how to handle the file. Similarly we have some
other protocols also that can be used to create URL are:

 FTP
 https
 Gopher
 mailto
 news
Relative URL

Relative URL is a partial address of a webpage. Unlike absolute URL, the protocol and
server part are omitted from relative URL.

Relative URLs are used for internal links i.e. to create links to file that are part of
same website as the WebPages on which you are placing the link.

5
For example, to link an image on
gsu.edu.ng/internet_technology/internet_referemce_models, we can use the
relative URL which can take the form like /internet_technologies/internet-
osi_model.jpg.

Difference between Absolute and Relative URL

Absolute URL Relative URL

Used to link web pages on different Used to link web pages within the same website.
websites

Difficult to manage. Easy to Manage

Changes when the server name or Remains same even of we change the server
directory name changes name or directory name.

Take time to access Comparatively faster to access.

Domain Name System Architecture

The Domain name system comprises of Domain Names, Domain Name Space,
Name Server that have been described below:

Domain Names

Domain Name is a symbolic string associated with an IP address. There are several
domain names available; some of them are generic such as com, edu, gov, net etc,
while some country level domain names such as au, in, za, us etc.

The following table shows the Generic Top-Level Domain names:

Domain Name Meaning

.com Commercial business

6
 .edu Education

.gov Government Agency

.int International entity

.mil U.S. military

.net Networking organization

.com Non profit organization

The following table shows the Country top-level domain names:

Domain Name Meaning

au Australia

in India

cl Chile

fr France

us United States

za South Africa

uk United Kingdom

jp Japan

es Spain

de Germany

ca Canada

ee Estonia

hk Hong Kong

ng Nigeria

7
DNS Working

DNS translates the domain name into IP address automatically. Following steps will
take you through the steps included in domain resolution process:

 When we type www.gsu.edu.ng into the browser, it asks the local DNS Server
for its IP address.
Here the local DNS is at ISP end.
 When the local DNS does not find the IP address of requested domain name, it
forwards the request to the root DNS server and again enquires about IP address
of it.
 The root DNS server replies with delegation that I do not know the IP address of
www. gsu.edu.ng but know the IP address of DNS Server.
 The local DNS server then asks the com DNS Server the same question.
 The com DNS Server replies the same that it does not know the IP address of
www.gsu.edu.ng but knows the address of gsu.edu.ng.
 Then the local DNS asks the gsu.edu.ng DNS server the same question.
 Then gsu.edu.ng DNS server replies with IP address of www.gsu.edu.ng
 Now, the local DNS sends the IP address of www.gsu.edu.ng to the computer
that sends the request.

Web Design
Web design refers to the process of creating a website, from the structure of each page
to the color schemes and font choices.

What is the difference between web design and Web Development?

It’s worth noting the distinction between web design and web development. Web
development is a broader term, and it includes setting up the back-end side of your
website — that is, all the behind-the-scenes coding. Web design, however, is limited to
front-end optimization — that is, the part of your website users see.

8
Web browser

A web browser is an application for accessing websites. When a user requests a web

page from a particular website, the browser retrieves its files from a web server and

then displays the page on the user's screen. Browsers are used on a range of devices,

including desktops, laptops, tablets, and smartphones

Web server
A web server is computer software and underlying hardware that accepts requests via

HTTP or its secure variant HTTPS. A user agent, commonly a web browser or web

crawler, initiates communication by making a request for a web page or other

resource using HTTP, and the server responds with the content of that resource or an

error message

9
Apache Web Server

Apache web server is one of the most popular web servers developed by the Apache

Software Foundation. Open source software, Apache supports almost all operating

systems such as Linux, Windows, Unix FreeBSD, Mac OS and more. Approximately,

60% of the machines run on Apache Web Server.

 WAMP (Windows, Apache, MySQL, and PHP)

 MAMP (Mac, Apache, MySQL, and PHP)

 LAMP (Linux, Apache, MySQL, and PHP)

 XAMPP (Cross Platform, Apache, MySQL, and PHP or Perl)

10
Introduction to HTML
HTML stands for Hypertext Markup Language. It is the most basic language, and

simple to learn and modify. It is a combination of both hypertext and markup

language. It contains the elements that can change/develop a web page’s look and

the displayed contents. Or we can say that HTML creates or defines the structure of

web pages. We can create websites using HTML which can be viewed on internet-

connected devices like laptops, android mobile phones, etc. It was created by Tim

Berners-Lee in 1991. The first version of HTML is HTML 2.0 which was published in

1999, and the latest version is HTML 5. We can save HTML files with an extension

.html.

What is Hypertext?

Text that is not restricted to a sequential format and that includes links to other text

is called Hypertext. The links can connect online pages inside a single or different

website.

What is Markup Language?

Markup Language is a language that is interpreted by the browser and it defines the

elements within a document using “tags”. It is human-readable, which means that

markup files use common words rather than the complicated syntax of

programming languages.

What are Tags and Elements in HTML?

11
HTML Tags: HTML tags are special keywords that specify how the data will be

displayed or how to format the data by the web browsers. With tags, the web

browser can make out in the document that: what is HTML content and what is the

normal plain content (as tags are always written in angular brackets <>). Usually, the

start of the tags is given by angular brackets <> and the end by angular brackets,

and / that is </>.

Example:

<head></head>

HTML Element: The collection of start and end tags with the content inserted in

between them is known as an HTML element.

Example:

<head> I am HTML element </head>

Important HTML Tags:

 <!DOCTYPE html>: Defines the type of document. Here it defines that the

document type is HTML.

 <html> </html>: It is the root element and all the other tags are contained in it.

It determines the start and the end of the HTML document.

 <head> </head>: It contains metadata of the HTML document & is actually not

displayed on the webpage. The heading starts with <head> and end with

</head>.

 <title> </title>: It is used to create a title of the document and the title appears

in the title bar at the top. At least one title appears in every document. The title

12
 portion of the document starts with <title> and ends with </title>, and in

between, enter the text that you want as the title.

 <body> </body>: It contains the contents of the document to be displayed on

the web page. The content may be an image, some text, some links, etc. This

part represents the body of the web document, which often includes headings,

text, and paragraphs.

 <p>: It is used for defining a paragraph.

 <br>: It is used for a single-line break.

 <img>: It is used for defining an image with a given source.

 <sup>: It is used for defining superscripted data.

 <b>: It is used for defining bold text.

 <sub>: It is used for defining subscripted data, etc.

HTML Page Structure

Below is a visualization of an HTML page structure:

13
Cascading Style Sheet
Cascading Style Sheets is a style sheet language used for describing the presentation

of a document written in a markup language such as HTML or XML. CSS is a

cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS

is designed to enable the separation of content and presentation, including layout,

colors, and fonts

<Practical>

Macromedia Fireworks
Adobe Fireworks (formerly Macromedia Fireworks) was a bitmap and vector graphics

editor, which Adobe acquired in 2005. Fireworks was made for web designers for

rapidly creating website prototypes and application interfaces. Its features included

slices, which are segments of an image that are converted to HTML elements, and the

ability to add hotspots, which are segments of an image that are converted to

hyperlinks.

<Practical>

14
Macromedia Dreamweaver
Dreamweaver is an application that lets you design, code, and manage websites.

What is interesting about the software is that it offers both the possibility to write

code as well as make a website using a visual interface.

<Practical>

Client-Server Computing
In client-server computing, the clients request a resource and the server provides that

resource. A server may serve multiple clients at the same time while a client is in

contact with only one server. Both the client and server usually communicate via a

computer network but sometimes they may reside in the same system.

<Practical>

An illustration of the client-server system is given as follows −

15
Dynamic Web Application Using PHP
1. Preparing the Database

2. Database Connection

3. Capturing User Input

4. Adding Records to the Database

5. Retrieving Records from the Database

6. Searching a Particular Records

16
7. Deleting Records

17