Web - Basic Concepts

Kelvin Mbuya
What is Internet?
• The Internet is essentially a global network of computing
resources. You can think of the Internet as a physical
collection of routers and circuits as a set of shared resources.
• Some common definitions given in the past include −
ØA network of networks based on the TCP/IP communications
protocol.
ØA community of people who use and develop those networks.

11/28/23 Kelvin Mbuya 2

Internet-Based Services
• Some of the basic services available to Internet users are −
i. Email − A fast, easy, and inexpensive way to communicate with other
Internet users around the world.
ii. Telnet − Allows a user to log into a remote computer as though it were a
local system.
iii. FTP − Allows a user to transfer virtually every kind of file that can be
stored on a computer from one Internet-connected computer to
another.
iv. UseNet news − A distributed bulletin board that offers a combination
news and discussion service on thousands of topics.
v. World Wide Web (WWW) − A hypertext interface to Internet
information resources.

11/28/23 Kelvin Mbuya 3

WWW?
• WWW stands for World Wide Web. A technical definition of the
World Wide Web is − All the resources and users on the Internet that
are using the Hypertext Transfer Protocol (HTTP).
• A broader definition comes from the organization that Web inventor
Tim Berners-Lee helped found, the World Wide Web Consortium
(W3C): The World Wide Web is the universe of network-accessible
information, an embodiment of human knowledge.
• In simple terms, The World Wide Web is a way of exchanging
information between computers on the Internet, tying them together
into a vast collection of interactive multimedia resources

11/28/23 Kelvin Mbuya 4

HTTP
• HTTP stands for Hypertext Transfer Protocol. This is the
protocol being used to transfer hypertext documents that
makes the World Wide Web possible.
• A standard web address such as iaa.ac.tz is called a URL and
here the prefix http indicates its protocol

11/28/23 Kelvin Mbuya 5

URL
• URL stands for Uniform Resource Locator, and is used to
specify addresses on the World Wide Web.
• A URL is the fundamental network identification for any
resource connected to the web (e.g., hypertext pages,
images, and sound files).
• A URL will have the following format −
protocol://hostname/other_information

11/28/23 Kelvin Mbuya 6

URL….
• The protocol specifies how information is transferred from a link. The
protocol used for web resources is HyperText Transfer Protocol
(HTTP). Other protocols compatible with most web browsers include
FTP, telnet, newsgroups, and Gopher.
• The protocol is followed by a colon, two slashes, and then the domain
name. The domain name is the computer on which the resource is
located.
• Links to particular files or subdirectories may be further specified
after the domain name. The directory names are separated by single
forward slashes

11/28/23 Kelvin Mbuya 7

Website

• A website is a collection of interconnected web pages,

typically including a homepage, navigation links, and content
pages.
• Websites are created using hypertext markup language
(HTML) and typically displayed on web browsers.

11/28/23 Kelvin Mbuya 8

Purposes of a website
1. Information sharing: Websites can be used to share information
about a company, organization, or individual. This can include news,
product information, and contact details.
2. Product sales: Websites can be used to sell products online. This
can be done through e-commerce platforms, which allow
customers to browse, purchase, and pay for products online.
3. Customer service: Websites can be used to provide customer
service information, such as FAQs, contact details, and support
forums.
4. Branding: Websites can be used to build a brand and promote a
company's image. This can be done through the use of high-quality
visuals, clear messaging, and effective design.
11/28/23 Kelvin Mbuya 9
Different types of websites
1. Business websites: Business websites are used to promote a company's
products or services. They typically include information about the company, its
products or services, and contact details.
2. E-commerce websites: E-commerce websites are used to sell products online.
They typically include a shopping cart, a checkout process, and secure payment
methods.
3. Blogs: Blogs are websites that are used to share information and opinions.
They are typically updated regularly and can be a great way to connect with a
community.
4. Portfolio websites: Portfolio websites are used to showcase the work of a
designer, photographer, or other creative professional. They typically include
images of the professional's work, as well as information about their
experience and qualifications.
5. Personal websites: Personal websites are used to share personal information
and interests. They can be a great way to connect with friends and family, as
well as to share your thoughts and ideas.

11/28/23 Kelvin Mbuya 10

Benefits of having a website
1. Increased visibility: Websites can help you to increase your visibility
online, which can lead to more traffic to your website and more leads or
customers.
2. Enhanced brand reputation: Websites can help you to build a strong
brand reputation by providing a professional online presence.
3. Improved communication: Websites can help you to communicate with
your audience more effectively by providing a central location for
information and updates.
4. Efficient sales and marketing: Websites can help you to streamline your
sales and marketing efforts by providing a platform for online
transactions and lead generation.
5. Improved customer service: Websites can help you to provide better
customer service by providing a self-service portal for frequently asked
questions (FAQs) and support requests.

11/28/23 Kelvin Mbuya 11

Server
• Every Website sits on a computer known as a Web server. This server
is always connected to the internet. 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.
• When you register a Web address, also known as a domain name,
such as iaa.ac.tz you have to specify the IP address of the Web server
that will host the site.

11/28/23 Kelvin Mbuya 12

Web Browser
• Web Browsers are software installed on your PC. To access the Web
you need a web browsers, such as Netscape Navigator, Microsoft
Internet Explorer or Mozilla Firefox.
• Currently you must be using any sort of Web browser while you are
navigating through my site iaa.ac.tz . On the Web, when you navigate
through pages of information this is commonly known as browsing or
surfing.

11/28/23 Kelvin Mbuya 13

SMTP Server
• SMTP stands for Simple Mail Transfer Protocol Server. This
server takes care of delivering emails from one server to
another server. When you send an email to an email address,
it is delivered to its recipient by a SMTP Server.

11/28/23 Kelvin Mbuya 14

ISP
• ISP stands for Internet Service Provider. They are the
companies who provide you service in terms of internet
connection to connect to the internet.
• You will buy space on a Web Server from any Internet Service
Provider. This space will be used to host your Website.

11/28/23 Kelvin Mbuya 15

HTML
• HTML stands for Hyper Text Markup Language. This is the
language in which we write web pages for any Website. Even
the page you are reading right now is written in HTML.
• This is a subset of Standard Generalized Mark-Up Language
(SGML) for electronic publishing, the specific standard used
for the World Wide Web.

11/28/23 Kelvin Mbuya 16

Hyperlink
• A hyperlink or simply a link is a selectable element in an
electronic document that serves as an access point to other
electronic resources.
• Typically, you click the hyperlink to access the linked
resource. Familiar hyperlinks include buttons, icons, image
maps, and clickable text links.

11/28/23 Kelvin Mbuya 17

DNS
• DNS stands for Domain Name System. When someone types
in your domain name, www.example.com, your browser will
ask the Domain Name System to find the IP that hosts your
site.
• When you register your domain name, your IP address
should be put in a DNS along with your domain name.
Without doing it your domain name will not be functioning
properly.

11/28/23 Kelvin Mbuya 18

W3C
• W3C stands for World Wide Web Consortium which is an
international consortium of companies involved with the
Internet and the Web.
• The W3C was founded in 1994 by Tim Berners-Lee, the
original architect of the World Wide Web. The organization's
purpose is to develop open standards so that the Web
evolves in a single direction rather than being splintered
among competing factions.
• The W3C is the chief standards body for HTTP and HTML.
11/28/23 Kelvin Mbuya 19
How the Web Works
• When you enter something like Google.com the request goes to one
of many special computers on the Internet known as Domain Name
Servers (DNS).
• All these requests are routed through various routers and switches.
The domain name servers keep tables of machine names and their IP
addresses, so when you type in Google.com it gets translated into a
number, which identifies the computers that serve the Google
Website to you.

11/28/23 Kelvin Mbuya 20

How the Web Works
• When you want to view any page on the Web, you must initiate the
activity by requesting a page using your browser. The browser asks a
domain name server to translate the domain name you requested
into an IP address. The browser then sends a request to that server
for the page you want, using a standard called Hypertext Transfer
Protocol or HTTP.
• The server should constantly be connected to the Internet, ready to
serve pages to visitors. When it receives a request, it looks for the
requested document and returns it to the Web browser. When a
request is made, the server usually logs the client's IP address, the
document requested, and the date and time it was requested. This
information varies server to server.
11/28/23 Kelvin Mbuya 21
Web Server
• A web server is a software application or hardware device
that serves as the foundation for websites and web
applications on the internet.
• It is responsible for handling client requests and delivering
web content, such as HTML pages, images, stylesheets, and
scripts, to users' web browsers.
• Web servers operate based on the client-server model,
where clients (typically web browsers) send requests for web
content to the server, and the server responds by sending
back the requested content
11/28/23 Kelvin Mbuya 22
Key functions and characteristics of a
web server include:
• Request Processing: Web servers receive incoming HTTP (Hypertext
Transfer Protocol) requests from clients and process these requests to
retrieve the requested resources, whether they are static files or
dynamically generated content from applications.
• Content Delivery: Once the server processes a request, it sends the
appropriate content back to the client's browser. This content can
include HTML pages, images, JavaScript files, CSS styles, and more.
• Handling HTTP Methods: Web servers typically support various HTTP
methods, including GET (for retrieving data), POST (for submitting
data), PUT (for updating resources), DELETE (for removing resources),
and others.

11/28/23 Kelvin Mbuya 23

Key functions and characteristics of a
web server include:
• Security: Web servers often include security features to protect against
common web vulnerabilities, such as DDoS attacks, cross-site scripting
(XSS), and SQL injection. They may also support SSL/TLS encryption to
secure data transfer over HTTPS.
• Configuration: Web server software allows administrators to configure
various settings, including virtual hosts (hosting multiple websites on a
single server), access control, and request handling rules.
• Logging and Monitoring: Web servers generate logs to record information
about client requests and server responses. This data is useful for
troubleshooting, performance analysis, and security monitoring.

11/28/23 Kelvin Mbuya 24

Types of Web Servers
• Apache HTTP Server: Apache is a free and open-source web server
that is one of the most popular in the world. It is known for its
reliability and scalability, and it can be used to host a wide variety of
websites.
• Nginx: Nginx is another free and open-source web server that is
known for its performance and efficiency. It is often used for high-
traffic websites, and it can be configured to handle a large number of
concurrent connections.
• Microsoft IIS: Microsoft IIS is a web server that is included with
Windows Server. It is a good choice for businesses that are already
using Windows Server, and it is easy to manage and configure.

11/28/23 Kelvin Mbuya 25

Apache HTTP Server
• Apache HTTP Server is a free and open-source web server
software that has been in use since 1995. It is the most
popular web server in the world, powering over 50% of all
websites.
• Apache is known for its reliability, scalability, and wide range
of features. It is a good choice for both small and large
businesses.

11/28/23 Kelvin Mbuya 26

Benefits of Using Apache HTTP
Server
• There are many benefits to using Apache HTTP Server, including:
üReliability: Apache is a very reliable web server that can handle a large
amount of traffic without crashing.
üScalability: Apache can be easily scaled to meet the needs of any
business, from a small website to a large enterprise.
üWide range of features: Apache has a wide range of features, including
support for virtual hosting, mod_security, and SSL/TLS encryption.
üFree and open-source: Apache is free and open-source software, which
means that it is free to use and modify.

11/28/23 Kelvin Mbuya 27

How to Deploy Apache HTTP Server
on a Linux Server
• Deploying Apache HTTP Server on a Linux server is a relatively straightforward
process. The following steps will guide you through the process:
1. Update and upgrade your system packages.
sudo apt update && sudo apt upgrade
2. Install Apache HTTP Server.
sudo apt install apache2
3. Enable Apache HTTP Server to start automatically after a reboot.
sudo systemctl enable apache2
4. Start Apache HTTP Server.
sudo systemctl start apache2
5. Verify that Apache HTTP Server is running.
sudo systemctl status apache2
11/28/23 Kelvin Mbuya 28
Nginx
• Nginx is a high-performance web server and reverse proxy
software that is often used in conjunction with Apache HTTP
Server.
• It is known for its speed, scalability, and efficiency.
• Nginx is a good choice for businesses that need a web server
that can handle a large amount of traffic.

11/28/23 Kelvin Mbuya 29

Benefits of Using Nginx
• There are many benefits to using Nginx web server, including:
üHigh performance: Nginx is a very high-performance web server that can
handle a large amount of traffic without crashing.
üScalability: Nginx can be easily scaled to meet the needs of any
business, from a small website to a large enterprise.
üEfficiency: Nginx is very efficient with its use of resources, which means
that it can run on a relatively small amount of hardware.
üWide range of features: Nginx has a wide range of features, including
support for virtual hosting, SSL/TLS encryption, and HTTP/2.
üFree and open-source: Nginx is free and open-source software, which
means that it is free to use and modify.

11/28/23 Kelvin Mbuya 30

How to Deploy Apache HTTP Server
on a Linux Server
1.Update and upgrade your system packages.
sudo apt update && sudo apt upgrade
2.Install Nginx.
sudo apt install nginx
3.Enable Nginx to start automatically after a reboot.
sudo systemctl enable nginx
4.Start Nginx.
sudo systemctl start nginx
5.Verify that Nginx is running.
sudo systemctl status nginx

11/28/23 Kelvin Mbuya 31

Web - Skills Required
• Computer Operations − All you need to know is how to operate a
computer − Windows, Linux or Macintosh. This depends on which
Web Server you want to host your website. So you should have basic
knowledge of that system only. You should be well acquainted of
basic operations like creating file, deleting file, updating file, directory
creation, file permission etc.
• Remote Access − Most of the times your Web Server will be accessed
from remote site only. You should be well aware how to connect a
computer from remote site. So at least you should have basic
knowledge of telnet utility to connect to a remote machine. There are
many service providers who will provide you control panel to manage
your Website.

11/28/23 Kelvin Mbuya 32

Web - Skills Required
• File Uploading & Downloading − As I told you most of the times your Web
Server will be on remote site. So you would need to upload and download
all the files related to your Website. So at least you should have basic
knowledge of FTP utility to connect to a remote machine and download or
upload your files. Almost service providers give you facility to upload your
files on your Web server.
• HTML / XHTML Knowledge − These are the markup languages which you
will use to build your website. So you should have good understanding on
these languages. You can refer our tutorial to learn HTML / XHTML
• CSS Knowledge − Cascading Style Sheet knowledge is required to achieve
many results which are not possible through HTML or XHTML.
11/28/23 Kelvin Mbuya 33
Web - Skills Required
• PHP Script − Now-a-days many sites are being developed
using PHP language. This script helps you to create an
interactive Website. You can refer our tutorial to learn PHP
Script
• PERL Script − PERL is another language which is being highly
used to develop interactive Web Applications. So if you are
planning to use PERL to develop your Website, then you can
refer our tutorial to learn PERL Script
• Java or VB Scripts − These scripts are required to perform
user level validations and to add more interactivity in your
Website. So a web developer is desired to have knowledge of
any of the client side scripts.
11/28/23 Kelvin Mbuya 34
Web - Skills Required
• AJAX Technology − This is the latest technology in the web. Google and
Yahoo are using this technology to give a better browsing experience to
their site visitors. You can refer our tutorial to learn AJAX Technology
• ASP or JSP − These are another technologies to be used to develop
interactive Websites.
• Flash Knowledge − You can plan to use Macromedia Flash to build your
Website. This is a bit time consuming to learn this technology but once you
learnt then you can develop very beautiful and attractive websites using
Flash.
• HTTP Protocol − As you grow you are desired to have more knowledge
about Web. So I would suggest you to go through the web backbone i.e.
HTTP protocol as well. You can refer our tutorial to learn HTTP Protocol
11/28/23 Kelvin Mbuya 35
Web - Tools Required
• Computer Machine − If you do not have computer available and you
received this tutorial printed on a paper then I would say that first of
all you would need a computer machine running either Windows or
Linux or UNIX or Macintosh system or any other operating system.
• Internet Connection − If you are not connected to the internet and
you received this tutorial printed on a paper then I would say that this
is second and another most important tool would need to connect to
the Internet and to you Web Server where you will host your website.
For this purpose you can buy either a dial up connection or
broadband connection of high speed connectivity based on your
requirement and budget.

11/28/23 Kelvin Mbuya 36

Web - Tools Required
• A Web Server − Apart from basic Internet connectivity you will need
one Web Server to keep all the files related to your Website. So you
would need to buy space on a Web Server. There are millions of ISPs
who are in business of selling web space at competitive prices. We
will give more detail on this in Web Hosting Conceptschapter.
• A Text Editor − This is another most important tool which you will
need to develop your Website. If you are using Windows then you can
use notepad as a text editor, or if you are using Linux/Unix
then vi editor is one of my favorite editors. You will need this editor to
write your HTML, PHP or ASP pages or for any other editing purpose.
For practice purpose, you can use our Online HTML Editor

11/28/23 Kelvin Mbuya 37

Web - Tools Required
• A Web Browser − You will need this tool to see the result of your HTML file. So you
should have either Internet Explorer or Firefox etc. installed on your computer.
• Web Authoring Tools − If you don't want to use a simple Text Editor to edit your HTML
files then there are many commercial Web Authoring Tools available. These tools are also
called HTML editors. Microsoft's FrontPage and Macromedia Dreamweaver are both
a visual HTML (WYSIWYG) and HTML source code editor. These editors helps you to
develop your HTML pages vary rapidly.
• Secure telnet client − If you are connecting to your Web server directly then you can use
a tool called PuTTY. This is what I'm using while connecting to my web server.
• Secure FTP client − If you are connecting to your Web server directly using FTP client to
upload or download your web files then you can use a tool called PSFTP. FTP stands for
File Transfer Protocol. Simply put, after you design your website, you need to send it to
the Web and your FTP program will do just that for you. This is what I'm using while
connecting to my web server.

11/28/23 Kelvin Mbuya 38

Web - Domain Names
• A domain name is the part of your Internet address that
comes after "www". For example, in iaa.ac.tz the domain
name is iaa.ac.tz.
• A domain name becomes your Business Address so care
should be taken to select a domain name. Your domain name
should be easy to remember and easy to type.

11/28/23 Kelvin Mbuya 39

How to Get a Domain Name?
• When you plan to put a site online, this is one of the important steps
to buy a domain name. This is always not necessary that whatever
domain name you are looking that is available so in that case you will
have to opt for any other good domain name.
• When you buy a domain name it is registered and when domain
names are registered they are added to a large domain name register,
and information about your site − including your Internet IP address is
stored on a DNS server and your contact information etc. is registered
with your registrar.

11/28/23 Kelvin Mbuya 40

Domain Extension Types
• There are many types of domain extensions you can choose for your
domain name. This depends on your business nature.
• For example, if you are going to register a domain name for education
purpose then you can choose .edu extension.
• Below is a reference of the correct usage of certain extensions. But
there is no hard and fast rule to go for any extension. Most commonly
used is .com
.net − Stands for network and is usually used for a network of sites.
.org − Stands for organization and is supposed to be for non-profit
bodies.

11/28/23 Kelvin Mbuya 41

Choosing a Domain Name
• Keywords in the domain name are usually important, but it usually
can be done while keeping the domain name short, memorable, and
free of hyphens.
• Avoid buying long and confusing domain names.
• Keep two to three words in your domain name.

11/28/23 Kelvin Mbuya 42

What are Sub-Domains
• Sub-domains are a part of a larger domain within the
Domain Name System (DNS) hierarchy. In a URL (Uniform
Resource Locator), a sub-domain is the portion that precedes
the main domain name.
• They are used to organize and categorize content or services
within a website or a larger domain.
• Sub-domains are typically written as a prefix to the main
domain name, separated by a period (dot).

11/28/23 Kelvin Mbuya 43

Sub-Domains are useful for various
purposes, including:

• Organizing content: Websites can use sub-domains to categorize

different types of content or services. For example, a company might
use "shop.example.com" for their online store and
"blog.example.com" for their blog.
• Hosting multiple services: A single domain can host multiple web
services or applications by assigning each service to a different sub-
domain. For instance, "mail.example.com" can be used for email
services, "forum.example.com" for a discussion forum, and so on.

11/28/23 Kelvin Mbuya 44

Sub-Domains are useful for various
purposes, including:
• Localization: Sub-domains can be used to serve content tailored to
specific regions or languages. For example, "us.example.com" could
serve content for the United States, while "uk.example.com" serves
content for the United Kingdom.
• Branding: Sub-domains can be used for branding purposes, such as
creating memorable URLs for specific marketing campaigns or
product lines.
• Testing and development: Sub-domains are often used for testing
and development purposes. For instance, "test.example.com" might
be used for staging and testing new website features before
deploying them to the main domain.

11/28/23 Kelvin Mbuya 45

Web - Site Construction
• What to Put on Your Website?
• How to Design Your Website?

11/28/23 Kelvin Mbuya 46

Web - Site Construction
• In this section, we have listed out a few points which can help you to
design a better website −
i. Consider what technology you are going to use to develop your
website. Adopt one which gives you better flexibility and rapid
development opportunities and then design it accordingly.
ii. Design a generic framework so that in future you can enhance and
modify your website by putting minimal effort.
iii. Design a site to keep required performance in mind. If you are
designing database driven website then lot of effort has to put to
design good database schemas.

11/28/23 Kelvin Mbuya 47

Web - Site Construction
v. Keep your design as simple as possible so that any new developer should
become familiar with your design as soon as possible.
vi. Identify repeatable components of your website and then keep them
separate and try to use them wherever possible.
vii. Identify the nature and qualification of your site visitors and give
importance to look and feel accordingly.
viii. Think from the perspective of a site visitor. If you were a visitor, then
how would you like to see this website? If the same site belongs to
somebody else, then would you like to spend some time on such site?
ix. You should create a search engine friendly website.

11/28/23 Kelvin Mbuya 48

Web - Hosting Concepts
• Hosting Platforms
1. Windows Hosting Servers
2. Linux Hosting Servers
• Hosting Types
1. Free Hosting
2. Shared Hosting
3. Virtual Dedicated Hosting
4. Dedicated Hosting
5. Collocated Hosting
11/28/23 Kelvin Mbuya 49
Types of Hosting
1. Shared Hosting
Shared hosting involves multiple websites sharing resources on a
single server.
Advantages:
• Cost-effective: Shared hosting is usually the most affordable
option.
• User-friendly: Ideal for beginners with minimal technical
knowledge.
• Maintenance: The hosting provider manages server maintenance
tasks.

11/28/23 Kelvin Mbuya 50

Types of Hosting
2. Virtual Private Server (VPS) Hosting
VPS hosting involves dividing a physical server into multiple
virtual servers, providing users with dedicated resources.
Advantages:
• More control: Users have root access and can install custom
software.
• Better performance: Dedicated resources result in faster
loading times.
• Scalability: Easier to scale resources as your website grows.
11/28/23 Kelvin Mbuya 51
Types of Hosting
3. Dedicated Hosting
Dedicated hosting provides an entire physical server exclusively for
one user or organization.
Advantages:
• Maximum performance: Dedicated resources ensure optimal
performance.
• Full control: Users have complete control over server
configurations.
• Security: Lower risk of security issues compared to shared
hosting.

11/28/23 Kelvin Mbuya 52

Types of Hosting
4. Cloud Hosting
Cloud hosting utilizes a network of virtual servers that work
together to host websites.
Advantages:
• Scalability: Resources can be scaled up or down based on
demand.
• Reliability: If one server fails, others can compensate, ensuring
minimal downtime.
• Cost-effective: Pay-as-you-go pricing model can be cost-efficient.

11/28/23 Kelvin Mbuya 53

Hosting Components
1. Disc Space
2. Monthly Traffic
3. Processing Speed
4. Connection Speed
5. Email Accounts
6. Emailing Support
7. Latest Technologies
8. Databases
9. Control Panel
10.Server Uptime
11/28/23 Kelvin Mbuya 54
Website Designing

11/28/23 Kelvin Mbuya 55

Design Plan should include the
following:
1. Details about information architecture.
2. Planned structure of site.
3. A site map of pages

11/28/23 Kelvin Mbuya 56

Web Page Anatomy

11/28/23 Kelvin Mbuya 57

Web Page Anatomy
1.Containing Block
• Container can be in the form of page’s body tag, an all
containing div tag. Without container there would be no
place to put the contents of a web page.
2.Logo
• Logo refers to the identity of a website and is used across a
company’s various forms of marketing such as business
cards, letterhead, brouchers and so on.

11/28/23 Kelvin Mbuya 58

Web Page Anatomy
3.Naviagation
• The site’s navigation system should be easy to find and use.
Oftenly the anvigation is placed rigth at the top of the page.
4.Content
• The content on a web site should be relevant to the purpose
of the web site.

11/28/23 Kelvin Mbuya 59

Web Page Anatomy
5.Content
• The content on a web site should be relevant to the purpose of the
web site.
6.Footer
• Footer is located at the bottom of the page. It usually contains
copyright, contract and legal information as well as few links to the
main sections of the site.
7.Whitespace
• It is also called as negative space and refers to any area of page that is
not covered by type or illustrations.

11/28/23 Kelvin Mbuya 60

Common Web Design Mistakes and
How to Avoid Them
1. Poor Navigation
• Mistake: Complicated or unclear navigation can frustrate users, leading to
a high bounce rate.
• Solution: Keep navigation simple, with clear menus and well-organized
content. Utilize intuitive navigation patterns such as a fixed menu or a
breadcrumb trail.
2. Slow Loading Times
• Mistake: Slow-loading pages can drive visitors away, especially in today's
fast-paced digital environment.
• Solution: Optimize images and multimedia, use browser caching, and
employ content delivery networks (CDNs) to enhance loading times.
Prioritize performance to create a seamless user experience.

11/28/23 Kelvin Mbuya 61

Common Web Design Mistakes and
How to Avoid Them
3. Unresponsive Design
• Mistake: Failing to make a website responsive across various devices
can lead to a poor user experience on mobile or tablet devices.
• Solution: Implement responsive design principles to ensure your
website looks and functions well on different screen sizes. Test your
site on various devices to identify and address responsiveness issues.

11/28/23 Kelvin Mbuya 62

Common Web Design Mistakes and
How to Avoid Them
4. Overlooking Mobile Users
• Mistake: Neglecting mobile users can result in a significant
loss of audience, considering the increasing use of
smartphones and tablets.
• Solution: Prioritize mobile-friendly design. Implement a
mobile-first approach, ensuring that your site is optimized
for smaller screens and touch interactions.

11/28/23 Kelvin Mbuya 63

Common Web Design Mistakes and
How to Avoid Them
5. Inconsistent Branding
• Mistake: Inconsistent use of colors, fonts, and imagery can dilute your
brand identity and confuse visitors.
• Solution: Establish and adhere to a consistent branding strategy. Create
style guides that detail proper logo usage, color palettes, and font choices
to maintain a cohesive brand image.
• 6. Too Much or Too Little Content
• Mistake: Overloading pages with excessive content or providing too little
information can both lead to user dissatisfaction.
• Solution: Strike a balance between providing sufficient information and
maintaining a clean, uncluttered design. Use concise, engaging content and
utilize white space effectively.

11/28/23 Kelvin Mbuya 64

Common Web Design Mistakes and
How to Avoid Them
7. Ignoring SEO Best Practices
• Mistake: Neglecting search engine optimization (SEO) can limit the visibility
of your website in search engine results.
• Solution: Research and implement SEO best practices. Optimize meta tags,
use descriptive alt text for images, and create a sitemap. Regularly update
content to improve search engine rankings.
• 8. Complex Forms
• Mistake: Lengthy or complicated forms can discourage users from
completing important actions, such as signing up or making a purchase.
• Solution: Simplify forms and only ask for essential information. Use
progress indicators for longer forms and provide clear instructions.

11/28/23 Kelvin Mbuya 65

Common Web Design Mistakes and
How to Avoid Them
9. Ignoring Analytics Data
• Mistake: Failing to analyze user data can result in missed opportunities for
improvement.
• Solution: Regularly review analytics data to understand user behavior.
Identify popular content, track conversion rates, and use this information
to make informed design decisions.
10. Lack of Clear Call-to-Action (CTA)
• Mistake: If visitors don't know what action to take next, your website may
not fulfill its purpose.
• Solution: Clearly define and prominently display CTAs. Use compelling
language to guide users to the desired actions, whether it's making a
purchase, subscribing, or contacting you.

11/28/23 Kelvin Mbuya 66

Web Development Process: A Comprehensive Guide
1. Define Your Purpose and Goals
Objective: Understand the purpose of the website and define specific
goals.
Actions:
• Conduct a needs analysis.
• Identify the target audience.
• Set measurable goals (e.g., increase sales, enhance brand awareness).

11/28/23 Kelvin Mbuya 67

Web Development Process: A Comprehensive Guide
2. Planning and Research
Objective: Create a roadmap for development based on the defined
goals.
Actions:
• Conduct market research.
• Outline the website's structure and features.
• Plan the user journey and experience.
• Choose the appropriate technologies and platforms.

11/28/23 Kelvin Mbuya 68

Web Development Process: A Comprehensive Guide
3. Design Phase
Objective: Develop the visual and interactive aspects of the website.
Actions:
• Create wireframes to outline the layout.
• Design the user interface (UI).
• Develop the user experience (UX) to ensure easy navigation.
• Choose color schemes, fonts, and imagery.

11/28/23 Kelvin Mbuya 69

Web Development Process: A Comprehensive Guide
4. Content Creation
Objective: Develop and organize content to align with the website's
goals.
Actions:
• Write and organize textual content.
• Create or gather multimedia elements (images, videos).
• Ensure content is optimized for SEO.

11/28/23 Kelvin Mbuya 70

Web Development Process: A Comprehensive Guide
5. Development
Objective: Convert the design and content into a functional website.
Actions:
• Choose a development framework.
• Write code (HTML, CSS, JavaScript).
• Develop server-side functionality (using languages like PHP, Python, or
Node.js).
• Integrate databases if required.

11/28/23 Kelvin Mbuya 71

Web Development Process: A Comprehensive Guide
6. Testing
Objective: Identify and fix issues, ensuring the website functions as
intended.
Actions:
• Conduct usability testing.
• Test compatibility across browsers and devices.
• Perform performance testing to ensure fast loading times.
• Debug and resolve issues.

11/28/23 Kelvin Mbuya 72

Web Development Process: A Comprehensive Guide
7. Deployment
Objective: Make the website live and accessible to the public.
Actions:
• Choose a hosting provider and set up the server.
• Transfer files to the server.
• Configure domain settings.
• Test the live website.

11/28/23 Kelvin Mbuya 73

Web Development Process: A Comprehensive Guide
8. Post-Launch Activities
Objective: Ensure the website's ongoing success and address any post-
launch issues.
Actions:
• Monitor website analytics.
• Gather user feedback.
• Make necessary updates and improvements.
• Implement a maintenance plan.

11/28/23 Kelvin Mbuya 74

Web Development Process: A Comprehensive Guide
9. Marketing and Promotion
Objective: Increase visibility and attract the target audience.
Actions:
• Implement SEO strategies.
• Utilize social media for promotion.
• Consider online advertising.
• Engage in content marketing.

11/28/23 Kelvin Mbuya 75

Web Development Process: A Comprehensive Guide
10. Continuous Improvement
Objective: Adapt and evolve the website based on changing needs and
trends.
Actions:
• Regularly update content.
• Implement new features or technologies.
• Stay informed about industry trends.
• Gather and analyze user feedback.

11/28/23 Kelvin Mbuya 76

Search Engines- Introduction
• In our digital age, search engines have become an integral part of our
daily lives. Whether you're a student researching a project, a
professional seeking information, or simply curious about the world,
search engines are the gateway to an abundance of knowledge.
• This lesson will explore the mechanics of search engines, effective
search strategies, and the importance of critical evaluation when
using search results.

11/28/23 Kelvin Mbuya 77

Understanding Search Engines:
• A search engine is a software program designed to retrieve and
display information on the internet. Examples include Google, Bing,
and Yahoo.

11/28/23 Kelvin Mbuya 78

How do search engines work?
1. Crawling: Search engines use automated bots (spiders) to browse
the web and index content.
2. Indexing: Information from web pages is stored in a database for
quick retrieval.
3. Ranking: Algorithms determine the order in which results are
displayed based on relevance.

11/28/23 Kelvin Mbuya 79

How do search engines work?
• The search engine looks for the keyword in the index for predefined
database instead of going directly to the web to search for the
keyword.
• It then uses software to search for the information in the database.
This software component is known as web crawler.
• Once web crawler finds the pages, the search engine then shows the
relevant web pages as a result. These retrieved web pages generally
include title of page, size of text portion, first several sentences etc.

11/28/23 Kelvin Mbuya 80

Architecture

11/28/23 Kelvin Mbuya 81

Search Engine Processing
A .Indexing process comprises of the following three tasks:
1.Text acquisition
• It identifies and stores documents for indexing.
2.Text Transformation
• It transforms document into index terms or features.
3.Index Creation
• It takes index terms created by text transformations and create data
structures to support fast searching.

11/28/23 Kelvin Mbuya 82

Search Engine Processing
B. Query Process
1.User interaction
• It support creation and refinement of user query and displays the
results.
2.Ranking
• It uses query and indexes to create ranked list of documents.
3.Evaluation
• It monitors and measures the effectiveness and efficiency. It is done
offline.

11/28/23 Kelvin Mbuya 83

HTML-Introduction
HTML is the backbone of the World Wide Web, providing the structure
for web pages.
In this lesson, we will explore the fundamentals of HTML, learn how to
create a basic HTML document, and understand the essential elements
that make up a web page.

11/28/23 Kelvin Mbuya 84

Structure:
• HTML uses a tag-based structure to define elements on a web page.
• Tags are enclosed in angle brackets, such as <tag>.
Tag is a command that tells the web browser how to display the text, audio,
graphics or video on a web page.
e.g.
<html>
<head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body>
</html>

11/28/23 Kelvin Mbuya 85

Key Points:

• Tags are indicated with pair of angle brackets.

• They start with a less than (<) character and end with a greater than
(>) character.
• The tag name is specified between the angle brackets.
• Most of the tags usually occur in pair: the start tag and the closing
tag.
• The start tag is simply the tag name is enclosed in angle bracket
whereas the closing tag is specified including a forward slash (/).

11/28/23 Kelvin Mbuya 86

Key Points:

• Some tags are the empty i.e. they don’t have the closing tag.
• Tags are not case sensitive.
• The starting and closing tag name must be the same. For example <b>
hello </i> is invalid as both are different.
• If you don’t specify the angle brackets (<>) for a tag, the browser will
treat the tag name as a simple text.
• The tag can also have attributes to provide additional information
about the tag to the browser.

11/28/23 Kelvin Mbuya 87

II. Basic HTML Document Structure:
a. Document Type Declaration (DOCTYPE):
• Specifies the HTML version being used.
• Example: <!DOCTYPE html> for HTML5.
b. HTML Element:
• The root element that wraps all content on the page.
• Opening tag: <html>
• Closing tag: </html>

11/28/23 Kelvin Mbuya 88

II. Basic HTML Document Structure:
c. Head Element:
• Contains meta-information about the HTML document, such as the title
and linked stylesheets.
• Opening tag: <head>
• Closing tag: </head>
d. Body Element:
• Contains the actual content of the web page, such as text, images, and
other elements.
• Opening tag: <body>
• Closing tag: </body>

11/28/23 Kelvin Mbuya 89

III. Common HTML Elements:
• a. Headings:
• Used to define headings on a page.
• <h1> to <h6> with <h1> as the highest level and <h6> as the lowest.
• b. Paragraphs:
• <p> is used to define paragraphs.
• c. Links:
• <a> is used to create hyperlinks.
• Example: <a href="https://www.example.com">Visit
Example.com</a>

11/28/23 Kelvin Mbuya 90

III. Common HTML Elements:
d. Lists:
• <ul> for unordered lists (bulleted).
• <ol> for ordered lists (numbered).
• <li> for list items.
e. Images:
• <img> is used to embed images.
• Example: <img src="image.jpg" alt="Description">

11/28/23 Kelvin Mbuya 91

Table
<table> </table> Specifies a table.
<tr> </tr> Specifies a row in the table.

<th> </th> Specifies header cell in the table.

Specifies the data in an cell of the

<td> </td>
table.
<caption> </caption> Specifies the table caption.
Specifies a group of columns in a
<colgroup> </colgroup>
11/28/23
table for formatting.
Kelvin Mbuya 92
Frames
• Frames help us to divide the browser’s window into multiple
rectangular regions.
• Each region contains separate html web page and each of them work
independently.

11/28/23 Kelvin Mbuya 93

Frames
Tag Description

It is replacement of the <body> tag. It

doesn’t contain the tags that are
<frameset> </frameset> normally used in <body> element;
instead it contains the <frame> element
used to add each frame.
Specifies the content of different frames
<frame> </frame>
in a web page.
It is used to set the default target frame
<base> </base> in any page that contains links whose
contents are displayed in another frame.
11/28/23 Kelvin Mbuya 94
Forms
• Forms are used to input the values. These values are sent to the
server for processing.
• Forms uses input elements such as text fields, check boxes, radio
buttons, lists, submit buttons etc. to enter the data into it.

11/28/23 Kelvin Mbuya 95

Forms
Tag Description

<form> </form> It is used to create HTML form.

<input> </input> Specifies the input field.

Specifies a text area control that allows

<textarea> </textarea>
to enter multi-line text.

<label> </label> Specifies the label for an input element.

11/28/23 Kelvin Mbuya 96

CSS
• CSS is acronym of Cascading Style Sheets. It helps to define the
presentation of HTML elements as a separate file known as CSS file
having .css extension.
• CSS helps to change formatting of any HTML element by just making
changes at one place. All changes made would be reflected
automatically to all of the web pages of the website in which that
element appeared.
Selector {property: value;}

11/29/23 Kelvin Mbuya 97

Key Points
• Selector is HTML element to which CSS rule is applied.
• Property specifies the attribute that you want to change
corresponding to the selector.
• Property can take specified value.
• Property and Value are separated by a colon (:).
• Each declaration is separated by semi colon (;).
Eg. P { color : red;}

11/29/23 Kelvin Mbuya 98

Types of CSS
i. Inline Style Sheets
ii. Embedded Style Sheets
iii. External Style Sheets

11/29/23 Kelvin Mbuya 99

Inline Style Sheets
Inline Style Sheets are included with HTML element i.e. they are placed
inline with the element.
To add inline CSS, we have to declare style attribute which can contain
any CSS property.
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>

11/29/23 Kelvin Mbuya 100

Embedded Style Sheets
• Embedded Style Sheets are used to apply same appearance to all
occurrence of a specific element.
• These are defined in <head> element by using the <style> element
<head>
<title> …. </title>
<style type =”text/css”> …….CSS Rules/Styles….
</style> </head>

11/29/23 Kelvin Mbuya 101

External Style Sheets
• External Style Sheets are the separate .css files that contain the CSS
rules.
• These files can be linked to any HTML documents using <link> tag
with rel attribute.
<head>
<link rel="stylesheet" type="text/css" href="external.css">
</head>

11/29/23 Kelvin Mbuya 102

JavaScript
• JavaScript is a versatile scripting language primarily used for
enhancing web pages by making them interactive.
• It allows you to manipulate the content of a webpage, respond to
user actions, and communicate with servers.

11/29/23 Kelvin Mbuya 103

JavaScript
<script>
document.getElementById("demo").innerHTML = ”Test Script";
</script>

11/29/23 Kelvin Mbuya 104

JavaScript
• <!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = ”Badili”
}
</script>
</head>
<body><h2>Jaribu</h2>
<p id="demo">ukurasa</p>
<button type="button" onclick="myFunction()">jaribu</button>
• </body>
</html>

11/29/23 Kelvin Mbuya 105

JavaScript Display Possibilities

1. Writing into an HTML element, using innerHTML.

2. Writing into the HTML output using document.write().
3. Writing into an alert box, using window.alert().
4. Writing into the browser console, using console.log().

11/29/23 Kelvin Mbuya 106

 JavaScript Display Possibilities
<script>
document.getElementById(”test").innerHTML = 5 + 6;
</script>
<div name=“test”></div>

11/29/23 Kelvin Mbuya 107

HTML Events
• An HTML event can be something the browser does, or something a
user does.
• Here are some examples of HTML events:
1. An HTML web page has finished loading
2. An HTML input field was changed
3. An HTML button was clicked
<button onclick="document.getElementById(‘Mtaalam').innerHTML
=“Jina Langu ni Mtaalam”>Pakua</button>

11/29/23 Kelvin Mbuya 108

Form Validation
<form id="myForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input type="submit" value="Submit">

</form>

11/29/23 Kelvin Mbuya 109

Form Validation
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if (username === "" || password === "") {

alert("Both username and password are required!");
return false; // Prevent form submission
}

// Additional validation logic can be added here

return true; // Allow form submission

}
11/29/23 Kelvin Mbuya 110
 Introduction to JSON
(JavaScript Object Notation)
• JSON, which stands for JavaScript Object Notation, is a lightweight
data-interchange format.
• It is easy for humans to read and write and easy for machines to parse
and generate.
• JSON is often used to transmit data between a server and a web
application, as well as for configuration files and data storage.

11/29/23 Kelvin Mbuya 111

 JSON Syntax
JSON data is represented as key-value pairs.
The basic syntax includes objects and arrays:
Objects: Enclosed in curly braces {} and consist of key-value pairs.
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
["apple", "banana", "orange"]- Array List

11/29/23 Kelvin Mbuya 112

JSON Data Types
JSON supports several data types:
String: Enclosed in double quotes.
Number: Integer or floating-point.
Boolean: true or false.
Array: Ordered list of values.
Object: Unordered collection of key-value pairs.
Null: Represents the absence of a value.

11/29/23 Kelvin Mbuya 113

Application of JSON
<script>
var jsonString = '{"name": "Babe", "age": 21}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name);
document.getElementById("jsonoutput").innerHTML =jsonObj.name;
</script>
<p id="jsonoutput"></p>

11/30/23 Kelvin Mbuya 114

JSON Best Practices
• Use consistent naming conventions for keys.
• Minimize unnecessary nesting for better readability.
• Ensure valid JSON by using proper syntax.

11/30/23 Kelvin Mbuya 115

Comprehensive Guide to jQuery and
AJAX in Web Development
What is jQuery?
• jQuery is a fast, small, and feature-rich JavaScript library designed to
simplify HTML document traversal and manipulation, event handling,
and animation.
• It makes common tasks in web development, such as DOM
manipulation and AJAX requests, easier and more efficient.

11/30/23 Kelvin Mbuya 116

Why use jQuery?
• Cross-browser Compatibility: jQuery abstracts away the differences
between browsers, providing a consistent API for developers.
• Simplified DOM Manipulation: jQuery provides concise and powerful
methods for selecting and manipulating DOM elements.
• Event Handling: Handling user interactions is simplified with jQuery,
making it easier to respond to clicks, keypresses, and other events.
• AJAX Support: jQuery simplifies the process of making asynchronous
requests, allowing for dynamic content updates without refreshing
the entire page.

11/30/23 Kelvin Mbuya 117

Getting Started with jQuery
Including jQuery in your Project
• To use jQuery, include the jQuery library in your HTML file.
• You can either download it and host it locally or use a CDN (Content
Delivery Network). Here's an example using the CDN:
<!-- Include jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

11/30/23 Kelvin Mbuya 118

Basic jQuery Selectors
// Select all paragraphs
$('p');

// Select an element with a specific ID

$('#myElement');

// Select elements with a specific class

$('.myClass');

11/30/23 Kelvin Mbuya 119

DOM Manipulation with jQuery
// Change the text content of an element
$('#myElement').text('Hello, jQuery!');
// Change the HTML content of an element
$('#myElement').html('<strong>Hello, jQuery!</strong>');
// Add a class to an element
$('#myElement').addClass('highlight');

// Remove a class from an element

$('#myElement').removeClass('highlight');

11/30/23 Kelvin Mbuya 120

Event Handling in jQuery
// Handle a click event
$('#myButton').click(function() {
alert('Button clicked!');
});
// Handle a hover event
$('#myElement').hover(function() {
$(this).addClass('hovered');
},
function() { $(this).removeClass('hovered'); }
);

11/30/23 Kelvin Mbuya 121

Introduction to AJAX
What is AJAX?
• AJAX (Asynchronous JavaScript and XML) is a technique for creating
dynamic and interactive web pages by exchanging small amounts of
data with the server behind the scenes.
• It allows for updating parts of a web page without requiring a full
page reload.

11/30/23 Kelvin Mbuya 122

AJAX in jQuery
// Making a simple AJAX GET request
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
console.log('Data received:', data);
// Process the received data here
},
error: function(error) {
console.error('Error:', error);
}
});
11/30/23 Kelvin Mbuya 123
Handling JSON Data
// Handling JSON data from an AJAX request
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
dataType: 'json',
success: function(data) {
console.log('JSON Data received:', data);
// Process the received JSON data here
},
error: function(error) {
console.error('Error:', error);
}
});
11/30/23 Kelvin Mbuya 124
Applying jQuery and AJAX in a Web
Application
Dynamic Content Loading
• Let's create a simple web application that loads and displays data
from an external source using jQuery and AJAX.
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="content-container"><!-- Content will be loaded here --></div>
<button id="load-content">Load Content</button>
<script src="script.js"></script>
11/30/23 Kelvin Mbuya 125
$(document).ready(function() { $('#load-content').click(function() {
$.ajax({
url: 'https://api.example.com/content',
method: 'GET',
dataType: 'json',
success: function(data) {
$('#content-container').html('<p>' + data.content + '</p>');
},
error: function(error) {
console.error('Error:', error);
}
});
});
});
11/30/23 Kelvin Mbuya 126
Understanding Dynamic and Static
Websites
Introduction
• Websites can broadly be categorized into two main types: Dynamic
and Static.
• These classifications refer to how the content is generated and
delivered to users. Let's explore the characteristics, advantages, and
use cases of both dynamic and static websites.

11/30/23 Kelvin Mbuya 127

Static Websites
• A static website consists of fixed, unchanging content.
• The HTML, CSS, and JavaScript files are created in advance and
remain the same for every user.
• Changes to the content typically require manual editing of the source
code.

11/30/23 Kelvin Mbuya 128

Characteristics of Static Websites:
• Fixed Content: The content does not change unless the source code is
manually updated.
• Faster Loading Times: Static sites often load more quickly since the
content is pre-generated and served as-is.
• Security: They are generally more secure as there's no user input
processed on the server side.

11/30/23 Kelvin Mbuya 129

Advantages of Static Websites:
• Simplicity: Easier to develop and host. Well-suited for small websites
or sites with infrequently updated content.
• Cost-Effective: Requires less server resources, making hosting more
affordable.
• Reliability: Generally more reliable and easier to cache, resulting in
better performance.

11/30/23 Kelvin Mbuya 130

Dynamic Websites
• A dynamic website, on the other hand, generates content on-the-fly,
typically by querying a database in response to user requests.
• The content can change based on various factors, such as user
interactions, preferences, or real-time data.

11/30/23 Kelvin Mbuya 131

Characteristics of Dynamic Websites:
• Interactive Content: Content can be personalized and changed based
on user input.
• Real-time Updates: Content can be updated dynamically without
requiring manual changes to the source code.
• Database Integration: Often involves interacting with a database to
fetch and store data.

11/30/23 Kelvin Mbuya 132

Advantages of Dynamic Websites:
• Flexibility: Ideal for websites with frequently changing content or
complex user interactions.
• Personalization: Allows for personalized user experiences based on
user data and preferences.
• Scalability: Suited for larger websites with a considerable amount of
content and users.

11/30/23 Kelvin Mbuya 133

Choosing Between Dynamic and
Static
• Content Update Frequency: If your content changes infrequently, a
static site may be sufficient. For constantly changing content, a
dynamic approach is more suitable.
• Interactivity: If your website requires user interactions, real-time
updates, or personalized content, a dynamic site is essential.
• Development Skills: Static sites may be suitable for simpler projects
and require less server-side scripting. Dynamic sites involve more
complex development, often requiring server-side languages like PHP,
Python, or Node.js.
• Hosting Costs: Static sites are generally more cost-effective to host,
while dynamic sites may require more robust hosting solutions.
11/30/23 Kelvin Mbuya 134
Understanding Content Management
Systems (CMS)
Introduction
• A Content Management System (CMS) is a software application that
allows users to create, manage, and modify digital content without
requiring advanced technical skills.
• CMSs simplify the process of publishing and organizing content on the
web, making it accessible to users with varying levels of expertise.

11/30/23 Kelvin Mbuya 135

Core Features of Content
Management Systems:
1. User Management:
• CMSs provide role-based access control, allowing different users to
have specific permissions based on their roles (e.g., admin, editor,
contributor).
2. Content Creation and Editing:
• Users can create, edit, and format content using an intuitive and user-
friendly interface, similar to a word processor.

11/30/23 Kelvin Mbuya 136

Core Features of Content
Management Systems:
3. Media Management:
• CMSs often include tools for uploading, managing, and organizing
images, videos, and other multimedia elements within the content.
4. Workflow Management:
• Workflow features enable content collaboration, with options for
content approval and review processes before publication.
5. Version Control:
• CMSs track and manage different versions of content, allowing users
to revert to previous versions if needed.

11/30/23 Kelvin Mbuya 137

Core Features of Content
Management Systems:
6. Template System:
• Templates define the structure and layout of the website. CMSs use
templates to ensure consistency across pages.
7. Publishing and Scheduling:
• Users can schedule content publication and removal, making it easy
to plan and automate updates.
8. Search and Navigation:
• Built-in search functionality and navigation tools improve the user
experience by helping visitors find content easily.

11/30/23 Kelvin Mbuya 138

Types of Content Management
Systems:
1. Open Source CMS:
• Open source CMSs are freely available, and their source code can be
modified and distributed by developers. Examples include WordPress,
Joomla, and Drupal.
2. Proprietary CMS:
• Proprietary CMSs are commercial products developed by specific
companies. Examples include Adobe Experience Manager and Sitecore.
3. Headless CMS:
• Headless CMSs separate the content repository from the presentation
layer, providing flexibility to deliver content to various platforms (web,
mobile, IoT devices).

11/30/23 Kelvin Mbuya 139

Advantages of Using CMS:
1. User-Friendly Interface:
• CMSs provide an intuitive interface that allows users with limited
technical knowledge to manage website content effectively.
2. Efficiency in Content Updates:
• Content updates can be made in real-time, enabling quick and
efficient modifications to the website.
3. Consistent Design:
• Templates and themes ensure a consistent design across the website,
maintaining a professional and cohesive appearance.

11/30/23 Kelvin Mbuya 140

Advantages of Using CMS:
4. Scalability:
• CMSs are scalable, making it easy to add new pages, sections, or
features as a website grows.
5. Community Support:
• Open source CMSs often have active communities that contribute
plugins, themes, and provide support and documentation.

11/30/23 Kelvin Mbuya 141

Challenges and Considerations:
1. Customization Complexity:
• Highly customized websites may face challenges when integrating
with certain CMSs.
2. Performance:
• Poorly optimized CMS installations can impact website performance.
3. Security Concerns:
• CMSs are popular targets for security threats. Regular updates and
security measures are crucial.
4. Learning Curve:
• While user-friendly, some CMSs may have a learning curve,
particularly for more advanced features.

11/30/23 Kelvin Mbuya 142