CPT 112: Front End Web Development I

Introduction

The World Wide Web has become an integral part of our daily lives, serving as a platform for
communication, information sharing, entertainment, and business. Understanding how the web
works and how to create functional, visually appealing websites is a foundational skill for anyone
interested in technology or design.

This module introduces you to the core concepts of the web, including the roles of web servers
and browsers, the tools required for web development, and the best practices for organising
files and planning websites. By the end of this section, you will have a solid understanding of the
building blocks of web development and be ready to dive deeper into creating your websites.

Learning Outcomes

By the end of this section, students will be able to:

1.​ Understand the fundamentals of the Internet and the World Wide Web

2.​ Demonstrate knowledge of web terminology and concepts

3.​ Utilise essential web development tools

4.​ Develop foundational web pages

1.1​ The Internet

The internet is a worldwide global system of interconnected computer networks. A computer

network is the interconnection of many individual computers to exchange messages. A network
is a group of two or more computers connected together.

It uses the standard Internet protocol TCP/IP. Every computer on the internet is identified by a
unique IP address. An IP address is a unique set of numbers that identifies a computer location.
A domain name server (DNS) is used to give a name to the IP address so that the user can
locate a computer by its name.

For example, a DNS server will resolve the name http://www.google.com to a particular IP
address to uniquely identify the computer on which this website is hosted.

The Internet is accessible to every user all over the world. So, the Internet is a network of
networks.

1.2​ Advantages of Internet

The internet offers numerous advantages that have transformed how we communicate, access
information, and conduct business. Here are some key benefits:

1.2.1. Access to Information

1.​ Vast Resources: Users can access a wealth of information on almost any topic,
including research papers, news articles, and educational content.

2.​ Real-Time Updates: Information is updated instantly, allowing people to stay informed
about current events and trends.

1.2.2. Communication
1.​ Global Connectivity: The internet enables instant communication with people
worldwide through email, messaging apps, and social media.

2.​ Cost-effective: Many communication methods, such as VoIP and messaging services,
are free or low-cost compared to traditional methods.

1.2.3. Education
1.​ E-Learning: Online courses and resources make education more accessible, allowing
people to learn at their own pace.

2.​ Diverse Learning Tools: Multimedia resources, from videos to interactive exercises,
cater to various learning styles.

1.2.4. Business and E-commerce

1.​ Market Expansion: Businesses can reach global audiences and markets, increasing
sales potential.
 2.​ Cost Reduction: Many online business operations are more cost-effective than
traditional retail.

1.2.5. Social Connectivity

1.​ Building Relationships: Social networks help people maintain and develop connections
regardless of geographical barriers.

2.​ Community Building: Online forums and groups allow individuals to connect over
shared interests and causes.

1.3​ Disadvantages of Internet

1.3.1. Privacy Concerns

1.​ Data Breaches: Personal information can be vulnerable to hacking and data leaks.

2.​ Surveillance: Governments and companies may monitor online activities, leading to a
loss of privacy.

1.3.2. Cybersecurity Threats

1.​ Malware and Phishing: Users face risks from viruses, spyware, and fraudulent
schemes aimed at stealing information.

2.​ Identity Theft: Criminals can impersonate individuals to commit fraud, impacting victims'
finances and reputation.

1.3.3. Misinformation and Fake News

1.​ Spread of False Information: The ease of sharing content can lead to the rapid spread
of misinformation.

2.​ Difficulty in Verification: It can be challenging to discern credible sources from

unreliable ones.

1.3.4. Addiction and Mental Health Issues

1.​ Excessive Use: Overuse of the internet and social media can lead to addiction and
negatively affect mental health.

2.​ Social Isolation: Despite connecting people, heavy internet use can result in feelings of
loneliness and disconnection in real life.

2.0​ Terminologies

Learning about the Internet can be a bit confusing at first, but it becomes a lot simpler if you can
become familiar with some of the terminology used when talking about the Internet. Here is a list
of common words and phrases that you might hear.
1.​ On-line: You may sometimes hear people talk about “being on-line”. This is just
another way of saying that they are using the Internet.

2.​ World-Wide-Web (WWW): Tim Berners-Lee, a physicist in Switzerland, invented the

World Wide Web in 1992 as a way to organise and access information on the Internet.
Www is a system of interlinked hypertext documents accessed via the internet.

3.​ Web browser: A web browser is a program that runs on users' computers and allows
them to view and interact with the web pages on the World Wide Web. A web browser
retrieves, presents, and transmits information from web servers, enabling users to view
websites, videos, and other online content.

4.​ Hypertext: Hypertext is a text document that contains links to other text documents. It
allows a user to move from one web page to another by using a mouse to click on
special hypertext links. For example, a user viewing web pages that describe aeroplanes
might encounter a link to jet engines from one of those pages. By clicking on that link,
the user automatically jumps to a page that describes jet engines.

5.​ Webpage: A web page is a single document that may contain text, graphics, and an
icon. They are created using HTML.

6.​ Website: Is a collection of related web pages that are accessed through the internet and
identified by a common domain name.

7.​ Uniform Resource Locator (URL): To visit a website, users type the URL, which is the
site's address, into the web browser. An example of a URL is www.futminna.edu.ng. A
complete URL is generally made up of three components: the protocol, the site name,
and the absolute path to the document or resource as shown in the figure below:

8.​ Web server: A web server is a computer that stores a website, and is responsible for
checking requests for viewing that website. Client computers send requests for particular
URLs to the web server, which then finds the appropriate web page and sends it back to
the client computer. A web server on the Internet must have a permanent Internet
connection so that whenever a client computer requests a URL, the web server can
respond right away.

9.​ Internet Service Provider (ISP): A company that provides Internet connections to
customers.
 10.​Protocol: It is a set of rules that govern the communication.

11.​Hypertext Transfer Protocol (HTTP/HTTPS): It is a communications protocol. It defines

a mechanism for communication between the browser and the web server. It is also
called a request and response protocol because the communication between the
browser and server takes place in request and response pairs. Simply, it is the means by
which computers on the WWW communicate. HTTPS is the secure version of HTTP. It is
used on websites where sensitive information, such as bank details, is exchanged.

12.​Hypertext Markup Language (HTML): It is the language used to write web pages on
the WWW.

13.​Extensible Markup Language (XML): It is an alternative language for writing web

pages. Whereas HTML pages describe the format of the data's presentation, pages
written in XML describe only how the data is structured. XML provides a standard format
for the movement of data in and between applications. The data in an XML file usually
requires some other application to interpret the data and display it in a useful format.

3.0​ The Web

The World Wide Web (WWW), commonly referred to as the Web, is a vast network of
interconnected documents and resources accessible via the internet. It allows users to
access information, communicate, and share data globally.

3.1​ How the Web Works

What happens when a browser requests an HTML document over the Internet?

1.​ The user types a URL into the Web browser to identify which Web page they would like
to view.

2.​ The browser parses the URL and requests a DNS server using broadcast IP. It then
sends the URL to the DNS to resolve the IP address. In other words, it converts
appdev.com to 206.191.222.239.

3.​ The browser then uses the IP address to send the HTTP packet to the browser’s ISP
connection, which passes it to the next server, routing it from server to server until it
reaches the destination Web server.
 Figure 1: A request is made to the server.

4.​ The Web server locates the request page either on its hard drive or cached in memory.

5.​ The Web server sends its contents back to the requested browser.

Figure 2: The page is located and returned to the client machine.

6. The browser interprets the HTML formatting instructions and displays the
content to the user.

3.2​ Tools Needed for Web Development

To build websites, you’ll need the following tools:

3.2.1 ​Code Editors

Code editors are software used to write and edit code. Some popular options include:

1.​ Notepad: A simple text editor for basic coding.

2.​ Sublime Text: A lightweight and powerful editor with syntax highlighting and
plugins.
 3.​ Dreamweaver: A more advanced tool with visual design features and code
editing capabilities.

4.​ VS Code: A highly recommended, free, and feature-rich editor with extensions
for web development.

Editor Platform Features Pros Cons

Notepad++ Windows Syntax highlighting, Lightweight, Limited features

auto-completion free

Sublime Cross-platfo Fast, customisable Speed, Paid license for

Text rm packages powerful continued use
features

VS Code Cross-platfo Extensions, Git Free, robust Can be

rm integration, terminal ecosystem resource-intensiv
e

Dreamweav Cross-platfo WYSIWYG editor, Visual editing, Expensive,

er rm live preview Adobe complex interface
integration

Atom Cross-platfo Highly customisable, Free, modern Slower than

rm Git integration interface alternatives

Table 1: Code Editors with their pros and cons

3.2.2. Web Browsers

Browsers are essential for testing and viewing your web pages. Common browsers
include:

1.​ Google Chrome: Known for its developer tools and performance.

2.​ Mozilla Firefox: Offers excellent developer tools and supports open-source
standards.
 3.​ Microsoft Edge: A modern browser with good compatibility and performance.

3.3​ Dealing with Files

Web development involves working with different types of files. Here’s how to organise
them:

3.3.1. File Types

a.​ HTML Files: Contain the structure and content of a web page.

b.​ CSS Files: Define the styling and layout of the web page.

c.​ JavaScript Files: Add interactivity and dynamic behavior to the web page.

d.​ Asset Files: Include images, icons, fonts, and other media used on the website.

3.3.2. Organizing Files

a.​ Create a clear folder structure to store related files. For example:

project-folder/

├── index.html

├── styles/

│ └── style.css

├── scripts/

│ └── script.js

└── assets/

├── images/

​ └── fonts/

b.​ Use meaningful file names and avoid spaces or special characters.

3.4​ Planning a Website

Before writing code, it’s important to plan your website to ensure a smooth development
process.
3.4.1. Website Content

a.​ Define the purpose of your website (e.g., portfolio, blog, e-commerce).

b.​ Outline the pages you need (e.g., Home, About, Contact).

c.​ Write clear and concise content for each page.

3.4.2. Fonts and Colors

a.​ Choose fonts that are easy to read and align with your website’s theme.

b.​ Select a colour palette that reflects your brand or design goals. Use tools like
Adobe Colour to create harmonious colour schemes.

3.4.3. Images and Media

a.​ Use high-quality images that are relevant to your content.

b.​ Optimise images for the web to ensure fast loading times.

c.​ Consider using icons and graphics to enhance visual appeal.

4.0​ Key Takeaways

1.​ The Web is a network of interconnected resources accessed via web servers and
browsers.

2.​ Web development requires tools like code editors and browsers.

3.​ Organise your files into a clear folder structure for better management.

4.​ Plan your website’s content, design, and media before starting development.

5.0​ Exercises
1.​ Set Up Your Development Environment:

a.​ Install a code editor (e.g., VS Code) and a browser (e.g., Chrome).

b.​ Create a project folder and set up the directory structure for a simple
website.

2.​ Plan a Website:

a.​ Choose a topic for your website (e.g., personal portfolio, blog).
b.​ Write a brief outline of the pages and content you’ll include.

c.​ Select fonts, colors, and images for your design.