Web Design and Development

DSU07209

Instructors
Eliah kazumali & Rajabu Msangi

Email: eliah.kazumali@eastc.ac.tz
rajabu.msangi@eastc.ac.tz

Eastern Africa Statistical Training Centre

3/23/2024 Web design and development 1
Web Design and Development
Learning Outcomes
▪ Describe web features used in developing web
application
▪ Use web development standard features to develop
web pages
▪ Apply PHP features in developing dynamic web pages
 Lecture 01: Introduction to Web
Design and Development

3/23/2024 Web design and development 3

 What is Website?
▪ Collection of various web pages written in HTML
markup language. Or collection of navigable web
pages that are grouped under the same domain
name. Examples;
https://www.eastc.ac.tz, https://www.udsm.ac.tz/
▪ This is a location on the web where people can
find information such as admissions, payments
and programmes. Similarly, there are millions of
websites available on the web.

3/23/2024 Web design and development 4

 What is Website? Cont.
▪ Each page available on the website is called a
web page and first page of any website is
called home page for that website.
▪ Hyperlinks: clickable text or images on a
webpage that, when clicked, navigate to
another webpage or resource on the Internet.

3/23/2024 Web design and development 5

 What is a Web Server?
▪ Web servers are computers that host websites
making them accessible over the Internet.
▪ When users request a webpage, the web server
processes the request and sends the webpage
to the user's web browser for display.
▪ Every Web server that is connected to the
Internet is given a unique address made up of a
series of four numbers between 0 and 256
separated by periods. For example,
68.178.157.132 or 68.122.35.127
3/23/2024 Web design and development 6
 Client (browser) vs webserver

3/23/2024 Web design and development 7

 What is a Web Server?
▪ Also, webserver refers to a software
application that runs on a computer and is
responsible for Examples are Apaserving web
content such as web pages to clients over the
internet. che HTTP Server or Microsoft
Internet Information Services (IIS).
▪ When a request is received, the web server
software processes the request, retrieves the
requested web content, and sends it back to
the client's web browser for display.

3/23/2024 Web design and development 8

 Web site hosting
▪ Website hosting - process of storing and
making a website accessible on the Internet.
▪ A website consists of various files and data that
need to be stored on a server.
▪ This server then makes your website files
available to visitors who access your website
using a web browser.
▪ Web hosting services are offered by web
hosting companies, which provide the
infrastructure and resources necessary for
hosting a website on the Internet.
3/23/2024 Web design and development 9
 Website Security
▪ Website security refers to the measures and
practices taken to protect a website from
potential threats, such as unauthorized access,
data breaches, malware attacks, and other
malicious activities.
▪ Website security practices to consider:
1. Use Strong Authentication: Strong and
unique passwords for user accounts
associated with your website, Enable multi-
factor authentication (MFA) wherever
possible to add an extra layer of security.
3/23/2024 Web design and development 10
 Website security cont.
2. Use HTTPS: Use HTTPS (HyperText Transfer
Protocol Secure) to encrypt data transmitted
between the website and users' browsers. HTTPS
protects against eavesdropping.
3. Keep Software Up-to-Date: Keep your website
software, including the CMS, plugins, themes,
and other scripts.
4. Regular Backups: Regularly back up your
website's files and databases, and store backups
in a secure location.
▪ Website auto-backup - creating backups of a
website's files and databases at regular intervals
without manual intervention.
3/23/2024 Web design and development 11
 Domain name vs Website address

▪ A domain name is the human-friendly text-

based address that users enter into a web
browser to access a website such as
google.com".
▪ It is composed of two or more parts separated
by dots, with the last part being the top-level
domain (TLD), such as .com, .org, .net, etc. For
example, "example.com" or "google.com" are
domain names.

3/23/2024 Web design and development 12

 Domain name vs Website address Cont.

▪ Contrary to website address or URL that specifies

the location of a particular webpage within a
website.
▪ It consists of several components, including the
protocol (e.g., "http://" or "https://"), the domain
name (e.g., "example.com"), and the specific path
or page within the website (e.g. "/contact").
Example: https://example.com/contact
▪ The protocol specifies how information is
transferred from a link. The protocol used for web
resources is HyperText Transfer Protocol (HTTP).
3/23/2024 Web design and development 13
 Mark up language
▪ Markup language defines the structure and
presentation of documents, typically for the
purpose of creating web pages or displaying
content on the internet.
▪ Examples of Markup languages are HTML, CSS
or XML. These languages are most widely used
to design a website.
▪ HTML markup includes special "elements" such
as <head>, <title>, <body>, <header>,
<footer>, <section>, <p>, <div>

3/23/2024 Web design and development 14

 Mark up language

3/23/2024 Web design and development 15

 HyperText Markup Language (HTML)
▪ HTML is the standard markup language for
creating web pages.
▪ Hypertext refers to the way in which Web pages
(HTML documents) are linked together. Thus,
the link available on a webpage is called
Hypertext.
▪ HTML is a Markup Language which means you
use HTML to simply "mark-up" a text document
with tags that tell a Web browser how to
structure it to display.
16 /
 Web-based application
▪ A web-based application is any program that is
accessed over a network connection using
HTTP, rather than existing within a device’s
memory.
▪ Web-based applications often run inside a web
browser.
▪ Web-based applications are also known as web
apps.

17 /
 ACTIVITIES

▪ Installation of Notepad ++, Dreamweaver

▪ Install WAMP webserver
▪ Write a basic HTML document shown on next
slide
A Basic HTML Document
● <!DOCTYPE html>
● <html>
● <head>
● <title>Page Title</title>
● </head>
● <body>
● <h1>My First Heading</h1>
● <p>My first paragraph.</p>
● </body>
● </html> 19 /
Practical exercise 01: HTML Document Structure

<!Doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

● NB:Only the content inside the <body> section is displayed in a browser.

20 /
 Explanations
➢ <!DOCTYPE> refers to the document type and version of HTML. For
HTML5 simply written as <!Doctype html>
➢ <html>: This tag encloses all the content on your page and the starting
tag for an HTML document
➢ <head>: This tag contains metadata about the web page, such as title.

➢ <title>: This tag specifies the title of your page, which appears in the
browser's title bar and bookmarks.

➢ <body>: This tag contains the visible content of the web page.
➢ <h1>: This is a heading tag. It creates a large, bold heading on the page.
Ie.h1 [largest in size] - h6 [least in size])
➢ <p>: This is a paragraph tag. It creates a block of text on the page.

21 /