WEB DESIGN

Web designing is the process of creating and arranging visual elements on a web page.
COMMON TERMS USED IN WEB DESIGN
1. Web browser:
A web browser is a software application that allows users to access and view websites on the
World Wide Web. It acts as an interface between a user and the information available on the
internet. Web browsers interpret and display web pages, enabling users to interact with various
online content, such as text, images, videos, and other multimedia.
Examples of common web browsers
 Google chrome  Apple safari  Phoenix browser
 Microsoft Edge  Opera  Brave browser
 Mozilla Firefox  Netscape Navigator  Tor browser

Figure 1 shows examples of popular web browsers used in Uganda

2. Web server
A web server is a software application or hardware device that stores, processes, and delivers
web content to users over the internet. It plays a crucial role in the architecture of the World
Wide Web by handling requests from web browsers and serving the requested web pages or other
resources.
Key functions of a web server
 Storing Web Content: A web server stores various types of web content, such as HTML
pages, images, stylesheets, scripts, and multimedia files.
 Processing Requests: When a user enters a web address (URL) in a browser or clicks on
a link, the browser sends a request to the appropriate web server. The web server
processes the request, retrieves the requested resources, and sends them back to the user's
browser.
  Handling Protocols: Web servers use protocols like HTTP (Hypertext Transfer Protocol)
or its secure version, HTTPS, to communicate with web browsers. These protocols define
how data is transmitted between the server and the client.
 Executing Server-Side Scripts: Web servers can execute server-side scripts (e.g., PHP,
Python, Ruby) to generate dynamic content or interact with databases before delivering
the final result to the user's browser.
 Managing Security: Web servers implement security measures to protect against
common threats, such as unauthorized access, data breaches, and denial-of-service
attacks. Security features may include encryption (SSL/TLS), access controls, and
firewalls.
 Logging and Monitoring: Web servers often maintain logs of requests, errors, and other
relevant information. Monitoring tools help administrators track server performance,
identify issues, and optimize resource usage.
 Load Balancing: In scenarios with high traffic or multiple servers, load balancers
distribute incoming requests across multiple servers to ensure efficient resource
utilization and prevent overload on a single server.

3. Search engine
A search engine is a software system designed to find and locate information on the World Wide
Web.
It allows users to enter queries (keywords or phrases) and then provides a list of web pages,
documents, images, videos, or other types of files that are relevant to the entered query.
Examples of common search engines.
 Google  Baidu  Ask.com
 Bing  Yandex  Google scholar
 Yahoo  Duck Duck Go

Figure 2 shows the top search engines in the world

4. Web page:
A web page is a single document or page of content on the World Wide Web that is typically
accessible through a web browser. It can contain a variety of content types, including text,
images, videos, hyperlinks, and interactive elements
Types of web pages
There are two main types of web pages;
(i) Static web page: A static webpage is one whose contents do not change, or at least do
not change quickly.
A static page is one that is usually written in plain HTML and what is in the code of
the page is what is displayed to the user.
These are webpages that contain information that does not need to be updated.
They are always the same unless the content is changed physically on the server’s
hard disk. That is the reason these web pages are known as static web pages.
Static web pages are simple and stored in a web server. Whenever server receives a
request regarding a web page, it sends a response along with the requested web page
to the client without performing any additional processing.
It just locates that page on its hard disk and add HTTP headers and reply back an
HTTP response.

Figure 3 shows Web browser Web Server interaction for static web page

Advantages of static websites

 Faster speed: Being a static file when a user visits a page, all the web server
has to do is return a file. No server-side code is executed. Differently with
dynamic websites there is extra processing time required to deliver HTML
pages.
 More secure: Since there is no back-end server-side processing, there is less
surface area for attacks and there is no database available to be compromised.
 Lower cost: As they don’t have a database, static websites require less
maintenance and are cheap to host.
 Easier to scale: When a website is hosted on the Cloud it is ready to be scaled
at any time. Although similar techniques can be applied with dynamic
websites, it will be more complex as database scaling might be required.
  Backups/Full editorial history: It is possible to see who changed which
content and when if version control tools such as GIT are used.

(ii) Dynamic web page: A dynamic webpage is one whose contents do change, and
generally change very quickly.
For example: The website for a newspaper changes constantly because the news
changes constantly.
If the information were never updated, users would stop visiting the sites. Therefore,
dynamic web pages provide a solution for the static web pages.
The dynamic web page content can vary depending on the number of parameters. As
it is discussed above that dissimilar to static web age, it not just simply sends HTML
page in response.
The web server calls a program located on the hard disk which can access a
database, perform transaction procedure. If the application program produces HTML
output, which is used to construct an HTTP response by the web server. The web
server sends the HTTP response thus created, back to the web browser.
The dynamic web pages are employed where the information changes very often
such as stock prices, weather information, news and sports updates. Let’s assume a
person has to physically change the Web page every 10 seconds to show the latest
update of the stock prices which is impractical to physically alter the HTML pages
very often, so in this case, a dynamic web page can be used.
There are several tools used for the creation of dynamic web pages. For example,
PHP (Personal Home Page also known as Hypertext Preprocessor), CGI (Common
Gateway Interface), ASP (Active Server Pages), JSP (Java Server Pages), AJAX
(Asynchronous JavaScript and XML), etc.

Figure 4 shows Web browser Web server interaction for Dynamic Web page

Advantages of dynamic websites

  Easier to update content: Using a CMS (Content Management System) web
interface for managing content will allow to make changes easily.
 More flexible: When creating a dynamic website, the programmer has full
control of the wheel to create whatever interactive feature needed.
Key differences between dynamic and static web pages.

Figure 5 shows Key Differences between Static and Dynamic Webpages

5. Website:

A website is a collection of related web pages that are typically identified by a common domain
name and are accessible over the Internet. Web pages are the building blocks of websites, and
when combined, they form a website. Websites Can be easily searched using search engines like
Google.
Advantages of websites
 It is an effective method to showcase products and services
 Developing a site helps in creating a social proof of existence
 Helps in branding a business and achieving business goals
 Allows to reach out to customers for support
Disadvantages of a website
 A website may crash and when this happen people who were accustomed to reaching an
organization through its website seem to have lost contact with it
 Contact form published on a website may invite lots of unwanted spam e-mails.
 The information on any website might be unreliable if it is not updated regularly.
Categories of websites
Websites can be categorized into various types based on their primary purpose, content, and
functionality. Here are some common categories of websites:
  Blogs: Blogs are websites that feature regularly updated content, often in a chronological
format. They can be personal, professional, or focused on a specific niche. Example:
WordPress, Blogger, Medium.
 E-commerce Websites: E-commerce websites facilitate online buying and selling of
goods or services. They often include features like product listings, shopping carts, and
payment gateways. Example: Amazon, eBay, Shopify.
 Social Media Platforms: Social media platforms allow users to create profiles, connect
with others, and share content such as text, images, and videos. Example: Facebook,
Twitter, Instagram, LinkedIn.
 News and Media Outlets: News websites provide up-to-date information on current
events, while media outlets may include content such as articles, videos, and multimedia.
Example: BBC News, CNN, The New York Times.
 Educational Websites: Educational websites offer learning resources, courses, and
information on various subjects. Example: Khan Academy, Coursera, edX.
 Wikis: Wikis are collaborative websites that allow users to add, modify, or delete content.
They often serve as knowledge bases. Example: Wikipedia, Wiki books.
 Forums and Discussion Boards: Forums are online discussion platforms where users
can post messages, ask questions, and engage in conversations on specific topics.
Example: Reddit, Stack Exchange, Quora.
 Content Aggregators: Content aggregators gather and display content from various
sources, presenting it in one location for easy consumption. Example: Flipboard, Feedly,
Reddit.
 Portfolio Websites: Portfolio websites showcase the work, projects, or achievements of
individuals or businesses. Example: Behance, Dribbble, GitHub Pages.
 Corporate and Business Websites: Corporate websites represent businesses and
organizations, providing information about products, services, and contact details.
Example: Apple, Microsoft, Coca-Cola.
 Government Websites: Government websites provide information about government
services, policies, and resources. Example: USA.gov, Gov.uk, Canada.ca.

6. Web Application:
A Web application (Web app) is an application program that is stored on a remote server and
delivered over the internet through a browser interface. A web application is a software or
program which is accessible using any web browser.
Advantages of web Applications
 Compared to desktop applications, web applications are easier to maintain as they use the
same code in the entire applications.
 Web applications can be used on any platform: Windows, Linux, Mac… as they all
support modern browsers
 Released any time and in any form. No need to remind users to update their applications.
 They can be accessed 24 hours of the day and 365 days the year from any computer.
  A computer or a mobile device can be used to access the required data.
Disadvantages of web Applications
 Security is not guaranteed, so it is vulnerable for unauthorized access
 The web app may not support multiple browsers with equal precedence
 The web application is built explicitly for a certain operating system, so it is difficult to
discover from the app store.
 Limited scope to access the device’s features.

7. Hyperlink
A hyperlink, often referred to simply as a "link," is a clickable element on a web page that
connects to another web page, resource, document, or a different section of the same page.
Hyperlinks are a fundamental feature of the World Wide Web and play a crucial role in
navigating and connecting information on the internet.
8. Web master
A webmaster is someone who creates and manages the content and organization of a website,
manages the computer server and technical programming aspects of a website or does both
9. Web authoring
Web authoring refers to the process of creating and designing content for websites. This involves
writing, designing, and organizing digital content that is intended to be published on the World
Wide Web.
10. Web authoring software
Web authoring software, also known as web development software or HTML editors, is software
used to create and edit web pages. These tools provide a user-friendly interface for designing and
coding websites, making it easier for individuals with varying levels of technical expertise to
create and manage web content.
Examples of common web authoring software.
 Adobe  Microsoft  Visual code studio
Dreamweaver expression web  Word press
 Microsoft front  Sublime Text  Brackets
page  Atom

Introduction to HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.
A simple HTML document using Note pad
To open Notepad,
 select the Start button, enter Notepad, then select Notepad from the results.
 Write the following HTML Code in Note Pad

Figure 6 shows a Simple HTML page in Notepad

Saving the HTML page

 Save the file on your computer. Select File > Save as in the Notepad menu.
 Choose location to store the file
 Name the file "index.html”, Save as Type “All Files (*. *)” and set the encoding to UTF-
8 (which is the preferred encoding for HTML files).
Figure 7 shows how to save html Page

View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or right-click -
and choose "Open with").

Figure 8 shows how the HTML page is displayed in the web browser

Example explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML web page structure
Below is a visualization of HTML web page structure.

Figure 9 shows HTML web page structure

HTML Element
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Examples of common html tags
1. Document structure tags

2. Body Content and container tags

3. HTML5 semantic tags

4. Table tags
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td>
elements.
 5. Form tags
The <form> tag is used to create an HTML form for user input.
Opening tag Closing tag Sample attributes Description
<form> </form> Action=””, method=”post Defines an HTML
” form for user input
<input> </input> Type=””, name=””, value=”” Defines an input
control
<textarea> </textarea> rows, cols Defines a multiline
input control (text
area)
<button> </button> type, name Defines a clickable
button
<select> </select> name, size Defines a drop-
down list
<label> </label> for Defines a label for
an <input> element
<option> </option> value, selected Defines an option in
a drop-down list

6. Empty tags

Note: Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Common HTML attributes
1. The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
2. The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:
<img src="img_girl.jpg">
3. The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the
width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
4. The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to a slow connection, or an
error in the src attribute, or if the user uses a screen reader.
<img src="img_typo.jpg" alt="Girl with a jacket">
5. The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
HTML Links- hyperlinks.
HTML links are hyperlinks. You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other
HTML element.
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:
<a href=”url”>link text</a>
Example:

<a href=”https://www.rra.gov.rw”>Visit Official Rwanda Revenue website </a>

Tags that identify and name documents
1. Appearance tags
 A document heading may be created by making text larger, bold and with a different
colour.
The table below shows html text formatting elements:

Figure 10 shows text formatting elements

2. Heading tags
Heading tags are used in the body section to define section.
headings that stand out from the rest of the text. HTML provided six levels of section
headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Note that the size of the heading reduces progressively with h1 being the largest while h6
is the smallest.
3. HTML images
To insert an image onto a web page, use the <img> tag;
img is an abbreviation of the word image. The <img> is an empty tag does not require a
corresponding closing tag. The general syntax for inserting a graphical object or image is:
<img src=”Image URL” ... attributes-list/>
The src in the img tag is an important attribute that specifies the location (source)
Setting size of image
It is possible to specify the size using width and height attributes
<img src=”volcano.png” width = “ 80%” height=”90%”alt=”Gorilla in Rwanda” />
Image alignment
The <img> tag uses the align attribute to align an image on top, bottom, left or right of
the browser window using the align attribute.
<img src=”volcano.png” align=” top”alt=”Gorilla in Rwanda” />
4. Background colour
In HTML it is possible to set page background color; bgcolor attribute is used within
body element
<body bgcolor=”yellow”>
Tags that used to organise webpage elements
1. HTML lists (ordered and unordered lists)
The information can be displayed in numbered or bulleted list. HTML supports three
types of lists namely ordered list, unordered list, and definition list.
1) Ordered <ol> list is a container for enumerated items ordered using numbers such
as 1, 2, 3.
2) Unordered list <ul> is a collection of related items that have no special order or
sequence.
3) Definition list <dl> is used for definitions such as glossaries that pair each label
with some kind of description.
Creating ordered list
To create an ordered list, use the <ol>...</ol> tags within which to include one or more
<li>...</li> (list item) tags.
<ol >
<li>Rwanda</li>
<li>Uganda</li>
<li>Burundi </li>
<li>Kenya</li>
<li>Tanzania</li>
<li>South Sudan</li>
</ol>
It is possible to customize the numbering style of an ordered list using the type attributes
as follows:
<ol type = “counter-type”>....</ol>
Examples
<ol type = “a”> ...</ol>
<ol type = “i”> ...</ol>
Creating unordered list
Unordered list is similar to ordered list only that the items are listed using bullets. To
create unordered list, use <ul>...</ul> instead of <ol>..</ol> element.
2. HTML Table Tags
Tables are used to organize data such as numbers, text, links and images into rows and
columns. An intersection of a row and a column forms data cell in which table data is
held.
The HTML tables are created using the <table> tag which is a container for <tr> (table
row) tag used to create rows and <td> (table data) tag used to create data cells.
<table border=”2”>
<tr>
<th>Employee Name</th>

<th>Department</th>

<th>Salary</th>
 </tr>
<tr>

<td>Paul KAMANA</td>

<td>Finance </td>

<td>250000</td>

</tr>

<tr>

<td>Dhalie NIZEYIMANA</td>
<td>Marketing</td>
<td>200000</td>
</tr>
</table>
Employer Name Department Salary
Paul KAMANA Finance 250000
Dhalie NIZEYIMANA Marketing 200000
Border attribute
The border attribute takes numeric values that specify thickness of the border that
surrounds all the table cells
<table border=”2” >
Height and width attribute
To set the size of the table, use width and height attributes.
<table border=”2” width=”400” height=”150”>
3. HTML Forms
A person may need to gather information such as student’s details and store such
information in the server. The most common method for gathering such information is by
using a form.
When users fill forms and clicks the submit button, the data keyed into the form is sent
(posted) to the web server for processing or storage into a database.
To create HTML forms, we use the <form> ... </form> element as follows:

<form action=”Script URL” method=”GET|POST”>

 form elements like input, textarea etc.

</form>
HTML forms contain form elements (form controls). There are different types of form
controls that can be used to facilitate data collection information using HTML form. The
most common controls include: text, textarea, select, radio buttons, checkboxes, file
select, command button and reset buttons.
The <input> Element
The <input> element has many variations, depending on the type attribute.
1. Text input
Input control is used to capture alphanumeric data such as text.
<input type=”text”>
Eg
First name: <input type=“text” name=“first” size = “20” />
This is how it will be displayed in the browser

2. Hidden input
Sometimes it is important to conceal the identity of information entered in the form
using the input type.
<input type=“hidden” name=“userid” value=“321”/>
3. Password input
<input type=”password”>
4. The checkbox input
Checkbox controls are input type used when more than one option is required to be
selected from a list of check boxes
<p><input type=”checkbox” name=”game” > Basketball <p>
<p><input type=”checkbox” name=”game” > Volley Ball<p>
<p><input type=”checkbox” name=”game” > Net Ball<p>
this is how it will be displayed in the web browser

5. Radio button input

Radio buttons let a user select ONLY ONE of a limited number of choices.
 <input type=”radio”> defines a radio button.
6. Send and reset button
Submit input type used to create a button that automatically submits form data to
web server. On the other hand, reset is used to refresh (reset)form controls to their
default values.
<input type=”submit”name=”submit” value=”Send” />
<input type=”reset” name=”reset” value=”Reset” />

7.
The Textarea element
Text area control is a multi-line text input used when the user is required to give details
that may be longer than a single sentence.
The attributes used with textarea tag are: name, rows, and cols.
Comments: <br > <textarea rows=”7”cols=”25”name=”comment”>
This is how it will be displayed in the browser

The Select Element

The select control also known as dropdown box provides the user with various options in
form of drop down list, from which a user can select one or more
<select name=”dropdown”>
<option value=”Kigali” selected>Kigali City</option>
<option value=”South”>South Province</option>
<option value=”North”>North Province</option>
<option value=”Easter”>East Province</option>
<option value=”West”>West Province</option>
</select>
The button element
The <button> element defines a clickable button.
<button type="button" >Click Me! </button>

Activity
Write html code to produce a webpage similar to what is displayed below
Website creation
Develop a detailed plan and make a website for your school