2/5/2025
WELCOME BACK
TO SCHOOL !!!...
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
Course Information
Course Code: ICT233
Course Title: Web Technologies and Design
Credit Hours: 3
Lecturer: Maxwell Dorgbefu Jnr.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
1
2
2/5/2025
ICT 233 - Thematic Areas
HyperText
Fundamentals
Markup
of Web
Language
Technologies
(HTML)
Cascading
JavaScript
Style Sheets
(JS)
(CSS)
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
Today’s Lecture
The World
Overview of Wide
Key Web Web(WWW)
Technologies and the
Internet
Domain
Names and The WWW
Uniform Model
Resource
Identifiers
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
2
4
2/5/2025
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
3
6
2/5/2025
What are Web Technologies?
• This is a generic term used to describe a
collection of tools that are used to plan, design,
develop and deploy state-of –the-art websites
and web applications.
• There are quiet a number of web technologies
in use today by professional web developers.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
Some Popular Web Technologies
• The following web technologies are very relevant in the
development of modern websites and web applications.
– HTML
– CSS
– JavaScript
– PHP
– WordPress
– Angular
– Bootstrap
– ReactJS
– Laravel
– MongoDB
– Node.js
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
4
8
2/5/2025
SGML
• SGML stands for Standard Generalized
Markup Language.
• SGML is a system(ISO standard) used to
specify document structure.
• It was originally developed as part of the IBM
document-sharing project in 1974 and became
an official ISO standard in 1986.
• Most markup languages such as HTML and
XML are derived from SGML.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
HTML
• HTML stands for HyperText Markup
Language.
• HTML is a language, which makes it possible
to present information on the Internet.
• That is, web pages all over the world consist of
HTML.
• However, HTML is not a programming
language but a markup language.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
5
10
2/5/2025
Sample HTML Code
<!DOCTYPE html>
<html lang=“en”>
<head>
<title> My First HTML Page. </title>
<meta name= “viewport” content= “width=device-
width, initial-scale=1.0”>
</head>
<body>
<h1>Welcome to my first web page </h1>
<p> I developed this web page using HTML, and this is the first
paragraph of my web page. Please pay attention to the tags.
You need a web browser such as Google Chrome to preview
this page</p>
</body>
</html>
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
11
Cascading Style Sheets (CSS)
• CSS is a style sheets language (style language)
introduced by W3C.
• Cascading refers to the process of determining
the priority of styling rules.
• CSS is used to define the presentational
semantics of structured documents.
• It provides control over visual as well as aural
characteristics of HTML and XHTML
documents and their elements.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
6
12
2/5/2025
Sample CSS Code
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
13
JavaScript(JS)
• JavaScript is an object-based client-side scripting
language that adds interactivity and programmability to
web pages.
• JS was created by Brendan Eich at Netscape.
• It was introduced in December 1995 and initially named
“LiveScript”.
• Licensing issues at the time between Netscape and
Microsoft over “LiveScript” and “JScript”, respectively,
led to JavaScript’s standardization as ECMAScript by
Ecma International standards organization in June 1997.
• But JavaScript remains the preferred name of the
language.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
7
14
2/5/2025
Sample JavaScript Code
<!DOCTYPE html>
<html lang=“en”>
<head>
<title> My First HTML Page. </title>
<meta name= “viewport” content= “width=device-
width, initial-scale=1.0”>
</head>
<body>
<h1>Welcome to my first web page </h1>
<script>
alert(“Hello, this is a simple alert in JavaScript”);
console.log(“This will be shown on the console”);
</script>
</body>
</html>
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
15
Extensible Markup Language (XML)
• Extensible Markup Language (XML) is a
universal format for structured documents and
data on the World Wide Web.
• XML, like HTML, is based on the granddaddy
of all markup languages, Standard Generalized
Markup Language (SGML).
• In contrast to most computer languages, XML
has no fixed, predefined set of tags.
• With XML, individual markup formats can be
defined.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
8
16
2/5/2025
AJAX
• AJAX is an acronym for Asynchronous JavaScript
and XML.
• It is not a programming language but a group of
web development technologies related to each
other, such as HTML, CSS, JavaScript, XML, and
XSLT.
• Ajax can be used on the client side to create
interactive web applications. Web site applications
empowered with Ajax can send data to and
retrieve data from servers asynchronously
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
17
PHP
• PHP stands for PHP: Hypertext Preprocessor
and is one of the most popular open-source
server-side scripting languages.
• It is a cross-platform, general-purpose
language originally created by Rasmus
Lerdorf in 1994 for generating dynamic web
pages.
• PHP is a widely used, free, and efficient
alternative to competitors such as ASP.net.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
9
18
2/5/2025
Sample PHP Code
<!DOCTYPE html>
<html lang=“en”>
<head>
<title> My First HTML Page. </title>
<meta name= “viewport” content= “width=device-
width, initial-scale=1.0”>
</head>
<body>
<h1>Welcome to my first web page </h1>
<?php
echo “This is a PHP segment on an HTML page”;
echo “This file must be saved with the .php extension”;
?>
</body>
</html>
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
19
Moment of Reflection
• Please reflect a bit and write down your
answer to the question below:
• Question ??????
• What is the difference between the Internet and
the web?
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
10
20
2/5/2025
What is the Web - 1
• The web is an information-sharing model
involving a coordination of Internet servers
that support some specially formatted
documents.
• Documents are formatted using HTML
standard.
• It uses HTTP as its communication protocol.
• Documents support links to other documents
including graphics, audio and video files.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
21
What is the Web?
• The world wide web (web) is a network of
information resources.
• The web relies on three mechanisms to make these
resources readily available to the widest possible
audience:
1. A uniform naming scheme for locating resources
on the web (e.g., URLs).
2. Protocols, for access to named resources over the
web (e.g., HTTP).
3. Hypertext, for easy navigation among resources
(e.g., HTML).
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
11
22
2/5/2025
History of the Web - 1
• The www was invented by Tim Berners-Lee
and Robert Cailliau, two researchers working
at CERN, the European Nuclear Research
Centre (formerly, Centre European pour la
Recherche Nucleaire), located in Geneva,
Switzerland (1989).
• World Wide Web (WWW) project, started in
1990.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
23
History of the Web - 2
• Tim Berners-Lee and others created W3C as an
industry consortium dedicated to building
consensus around Web technologies
• Aimed at building a distributed hypermedia
system embedded with resources, enabled for
accessing on servers and built over the
Internet.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
12
24
2/5/2025
Domain Names
• Web resources can be located by unique IP
addresses; however, IP addresses are difficult to
remember.
• Consequently, domain names are used instead in
most cases.
• Figure 4-1 shows the relationship between a
domain name and a URL; www.example.com is a
subdomain of the node example.com, which is the
subdomain of the com domain.
• The domain name syntax rules are defined by RFC
1035, RFC 1123 and RFC 2181.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
25
Uniform Resource Identifier (URI)
• A Uniform Resource Identifier (URI) is a character
string that identifies a name or a resource on the
Internet.
• URIs can be classified as Uniform Resource
Locators (URLs) or Uniform Resource Names
(URNs).
• URL provides a method or specifications for
finding resources on the Internet (including
protocol and path).
• URNs define a method for referencing an object
without declaring the full path to the object.
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
13
26
2/5/2025
Uniform Resource Identifier (URI)
Uniform Resource Identifier
(URI)
Uniform Uniform
Resource Resource
Locator Name
(URL) (URN)
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
27
Parts of URL
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
14
28
2/5/2025
Parts of URN
Source: https://medium.com/@abhirup.acharya009/uri-vs-urn-vs-url-key-distinctions-explained-dec8e02ebd18
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
29
HTTP URL Details
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
15
30
2/5/2025
The WWW Model
Web Server
Client Device
Request CGI,
(URL) Server side Scripts in
PHP or ASP.net.
Web
Browser
Response
(Content)
Content
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
31
HTTP Request and Response Model
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
16
32
2/5/2025
Focus Questions?
• Explain the following:
– Web page
– Index page
– Web site
– Web browser
– Web application
• Briefly describe how you would register for a domain
name.
• Write down any 10 web hosting companies you know of
• Provide the full meaning of the following acronyms as
applied in web technologies
– ICANN, JSON, AJAX, RSS, URI, XSLT
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
33
END OF TODAY’S LECTURE
1. Web Browsers and Servers
PLEASE DO NOT
MISS NEXT WEEK’S 2. Domain Registration and
LECTURE ON: Hosting
3. The Web Design Process
Web Technologies and Design Lecture Slides by: Maxwell Dorgbefu Jnr.
17
34
