Scribd
Upload
9 views17 pages

ICT 233 - Lecture 1

The document contains lecture slides for the course ICT233: Web Technologies and Design, taught by Maxwell Dorgbefu Jnr. It covers key web technologies such as HTML, CSS, JavaScript, and PHP, as well as concepts like the World Wide Web, domain names, and Uniform Resource Identifiers (URIs). The lecture also includes historical context and focuses on the structure and functionality of web applications.

Uploaded by

dogbeyelias
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views17 pages

ICT 233 - Lecture 1

The document contains lecture slides for the course ICT233: Web Technologies and Design, taught by Maxwell Dorgbefu Jnr. It covers key web technologies such as HTML, CSS, JavaScript, and PHP, as well as concepts like the World Wide Web, domain names, and Uniform Resource Identifiers (URIs). The lecture also includes historical context and focuses on the structure and functionality of web applications.

Uploaded by

dogbeyelias
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like