MASENO UNIVERSITY.

SCHOOL OF EDUCATION.

UCI 201.

INTERNET AND WORLDWIDE WEB.

NO. NAME. REG.NO.

1. EDWIN TELEWA. EAR/00255/023

2. CYNTHIA WAMULA. EAR/00579/023

3. VENACYLINE OGERO. EAR/00690/023

4. JOYCY MASAI. ESC/00027/023

5. PHEMY AMONDI. EAR/00691/023

6. VALARY ESENDI EAR/00822/023

7. JOY AKOTH ANYANGO. EAR/00400/O23

1a. 8. VELLA MONYENYE. EAR/00632/023

9. WINNY NAWIRE. EAR/00851/023

10. CHRISTINE MAKORI EAR/00579/023

Describe the following types of websites.
(i) Transactional Site
(ii) Informational Sites
(iii) Community Sites
(i) Transactional Site

A transactional site is designed to facilitate commercial transactions online, such as e-commerce and banking
websites. These sites allow users to browse, select, and purchase products or services directly. They often have
features like shopping carts, secure payment gateways, user accounts, and order tracking. Examples include
Amazon, eBay, and online banking platforms.

(ii) Informational Sites

An informational site focuses on providing users with information rather than interactive services or products for
sale. These sites are often educational, offering resources, articles, reports, guides, and general knowledge on
various topics. They may be created by businesses, nonprofits, or individuals to inform and educate their audience.
Examples include Wikipedia, news websites, and government information portals.
(iii) Community Sites

Community sites are platforms designed to bring people together based on shared interests, hobbies, or professional
affiliations. They allow users to interact, discuss, share, and collaborate within a virtual community. Features
typically include forums, message boards, chat rooms, and user profiles. Examples include Reddit, Stack Overflow,
and social media platforms like Facebook Groups.

b. Dynamic websites are powered by Server-Side Scripting languages that execute on databases.
Briefly describe the concept of Server-Slide Scripting.

Server-Side Scripting is a technique used in web development where code is executed on the server rather than on
the user's browser. This type of scripting dynamically generates content that is sent to the client, typically an HTML
page, based on the user's request or interaction.

Here’s how it works:

1. Request and Processing: When a user accesses a dynamic website, their browser sends a request to the
web server. The server then processes this request, often interacting with a database to retrieve or update
data.
2. Script Execution: Server-side scripts written in languages like PHP, Python, Ruby, or Node.js are
executed on the server. These scripts can perform various functions, such as fetching information from a
database, validating user inputs, or personalizing content based on the user’s preferences.
3. Dynamic Content Creation: Based on the script execution, the server assembles a custom HTML page
that may contain data from a database or other real-time information. This page is then sent to the user’s
browser for display.
4. Security and Performance: Because the code is executed on the server, it can be more secure, as users
only see the resulting content, not the actual server-side code. Server-side scripting is also crucial for
handling sensitive data securely and performing complex calculations that would be inefficient on the client
side.

Examples include login pages, content management systems, and e-commerce websites, where server-side scripting
is essential for managing user data, inventory, and personalized content.

c. Discuss five key challenges a web design project team is likely to encounter and how each challenge
can be surmounted.

1. Clear Communication and Requirement Clarity

 Challenge: Miscommunication or unclear requirements can lead to a mismatch between the client’s
expectations and the final product. This can result in wasted time, frustration, and the need for significant
revisions.
 Solution: Start with a detailed project kickoff meeting to define the project goals, target audience, and
specific requirements. Use wireframes, prototypes, or a visual sitemap to get approval on layout and
functionality before full development. Regular check-ins with stakeholders ensure that everyone remains
aligned as the project progresses.

2. Design and Development Coordination

 Challenge: The design team and development team may have different workflows and priorities, leading to
a lack of coordination that could impact the site’s functionality, speed, or responsiveness.
 Solution: Establish a collaborative workflow where designers and developers work together from the
beginning. Use tools like Figma or Adobe XD that allow developers to view design specs directly. Hold
regular design-development syncs to discuss technical constraints, optimize assets, and ensure that designs
can be efficiently translated into code.

3. Responsive and Cross-Browser Compatibility

  Challenge: Ensuring that the website looks and functions well on a wide variety of devices and browsers
can be complex and time-consuming.
 Solution: Adopt a “mobile-first” design approach, testing on mobile devices before scaling up to larger
screens. Use responsive design frameworks like Bootstrap or CSS Grid for fluid layouts. Regularly test on
popular browsers and devices throughout the project using tools like BrowserStack to identify and address
compatibility issues early.

4. Performance Optimization

 Challenge: Users expect fast-loading websites, and slow performance can lead to a high bounce rate.
Media-heavy websites or complex interactive elements can impact load times.
 Solution: Optimize images, compress code, and reduce the number of HTTP requests. Use content delivery
networks (CDNs) to speed up content loading for global audiences. Conduct performance testing using
tools like Google PageSpeed Insights or Lighthouse, and set clear goals for load times, particularly on
mobile.

5. Security and Data Privacy

 Challenge: With increasing cyber threats, securing user data and preventing vulnerabilities is essential,
especially for sites handling sensitive information.
 Solution: Implement SSL certificates, use secure coding practices, and enforce strong authentication
mechanisms. Regularly conduct security audits, penetration testing, and keep all plugins and scripts up-to-
date. Educate the team on secure practices, such as protecting against SQL injection and cross-site scripting
(XSS).

By proactively addressing these challenges with structured planning, ongoing testing, and collaborative processes, a
web design project team can improve the project’s success rate and create a high-quality, secure, and user-friendly
website.

2a. Differentiate between HTML and CSS.

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two fundamental technologies in web
development, but they serve distinct purposes. Here’s how they differ:

1. Purpose

 HTML: HTML is a markup language used to structure and organize the content on a webpage. It defines
elements such as headings, paragraphs, images, links, and lists, creating the foundation and layout of a web
page.
 CSS: CSS is a style sheet language used to control the presentation of HTML elements, including their
colors, fonts, layout, and spacing. CSS styles the appearance of the content, making the website visually
appealing.

2. Functionality

 HTML: Provides the structure and semantic meaning to the webpage content. For example, <h1> defines a
heading, <p> defines a paragraph, and <a> defines a link.
 CSS: Controls the styling and design of HTML elements. For example, CSS can make an <h1> heading
blue, center a paragraph, or add padding to a button. CSS can also control responsive design, making a site
adapt to different screen sizes.

3. Syntax

 HTML: Uses tags to define elements. Each element has an opening tag (e.g., <p>) and a closing tag (e.g.,
</p>), with content in between.
 CSS: Uses selectors and properties. The selector (e.g., p for paragraph) targets an HTML element, and
properties (e.g., color, font-size) define the style. For example, p { color: blue; } sets all paragraphs
to have blue text.
4. Location of Code

 HTML: Typically written in an HTML file (e.g., index.html).

 CSS: Can be written directly in the HTML file within <style> tags, but is usually placed in a separate file
(e.g., style.css) for better organization and reusability.

5. Interdependence

 HTML: Can exist independently and be used to display content without CSS, but the webpage would
appear plain and unstyled.
 CSS: Requires HTML to apply styles to; without HTML, CSS has no content to format. CSS relies on
HTML elements to attach styles to and bring the design to life.

b. Explain the key distinction between HTML Elements, Tags and Attributes.

1. HTML Elements

 Definition: An HTML element is the entire component, including the opening and closing tags along with
the content within them. Elements define the structure and content on a webpage.
 Example: <p>This is a paragraph.</p>
o Here, <p> and </p> are the opening and closing tags, and "This is a paragraph." is the content.
Together, they form a paragraph element.

2. Tags

 Definition: Tags are the specific keywords or names enclosed within angle brackets ( < >) that define the
start and end of an HTML element. Tags are used to mark the beginning and end of an element.
 Types: Tags can be opening (like <h1>) or closing (like </h1>). Self-closing tags (like <img />) don’t have
separate closing tags, as they don’t contain content.
 Example: In <p>This is a paragraph.</p>, <p> is the opening tag, and </p> is the closing tag.

3. Attributes

 Definition: Attributes provide additional information about an HTML element and are included within the
opening tag. They usually consist of a name and a value, defining properties like style, class, ID, links, or
image sources.
 Syntax: Attributes are written as name="value" pairs within the opening tag of an element.
 Example: <img src="image.jpg" alt="Sample Image" width="300" />
o Here, src, alt, and width are attributes, and they define properties for the <img> element, such as
the image source, alternative text, and display width.

c. Explain the function of the following HTML tags.

(i) </Style>
(ii) <form>
(iii) <hr>

(i) <style> Tag

 Function: The <style> tag is used to define CSS styles directly within an HTML document. It allows
developers to add styling rules (such as color, font size, margins, etc.) for HTML elements on the page.
 Placement: It is typically placed within the <head> section of the HTML document.
 Usage: The CSS code inside <style> tags applies only to the current HTML document.
 Example:

html
Copy code
 <style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
font-size: 24px;
}
</style>

(ii) <form> Tag

 Function: The <form> tag creates a form on a webpage, which is used to collect user input. Forms can
contain various input elements like text fields, checkboxes, radio buttons, and submit buttons, allowing
users to enter data and submit it to a server for processing.
 Attributes: The <form> tag often includes attributes like action (specifying where to send the data) and
method (defining the HTTP method, typically GET or POST).
 Example:

html
Copy code
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

(iii) <hr> Tag

 Function: The <hr> (horizontal rule) tag is used to create a horizontal line across the webpage, visually
separating content into sections. It is a self-closing tag and does not require an opening and closing tag.
 Usage: <hr> is often used to separate thematic breaks in content or sections of a document, creating a
visual division without needing extra elements or styling.
 Example:

html
Copy code
<p>This is the first section of content.</p>
<hr>
<p>This is the second section of content.</p>
d. Describe three levels of applying CSS to a web page during the design process.

CSS can be applied to a web page at three different levels during the design process: inline, internal, and external.
Each has specific use cases and advantages:

1. Inline CSS

 Description: Inline CSS is applied directly to an individual HTML element using the style attribute within
the tag. This type of CSS affects only that specific element and is typically used for unique or single-use
styling needs.
 Use Case: Useful for quickly applying styles to a single element without affecting other parts of the page,
often used when making minor adjustments or overriding other CSS.
 Example:

html
Copy code
<p style="color: blue; font-size: 16px;">This is an inline-styled paragraph.</p>

2. Internal CSS

 Description: Internal CSS is applied within the <style> tags inside the <head> section of an HTML
document. This method styles elements across the entire page but is limited to that specific HTML file.
  Use Case: Ideal for styling single-page websites or when specific styles are needed for only one page. It
helps maintain consistency within a single HTML document without the need for an external CSS file.
 Example:

html
Copy code
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This paragraph uses internal CSS styling.</p>
</body>

3. External CSS

 Description: External CSS involves linking an external .css file to the HTML document using the <link>
tag in the <head> section. This method applies styles across multiple pages, allowing for a centralized and
consistent design.
 Use Case: Best for larger websites with multiple pages, as it allows for global styling. With external CSS,
you can update the style of an entire website by modifying a single CSS file, making it highly efficient and
easy to maintain.
 Example:

html
Copy code
<head>
<link rel="stylesheet" href="styles.css">
</head>

And in styles.css:

css
Copy code
p {
color: red;
font-size: 20px;
}