Web technology has revolutionized the way we interact with information, services, and each other on the internet. From simple static web pages to complex web applications, the World Wide Web (WWW) has become an integral part of our daily lives.
In this detailed talk, we’ll dive into the basic ideas, rules, and resources behind web technology notes. This will help computer scientists like you grasp the essentials and actively take part in this ever-changing area.
Course Titles Covered
As we know, different departments may use different titles for a particular course. Below are different variations of titles that this material is suitable for.
- Introduction to Website Design
- Web Page Design
- Etc.
Unit 1: Introduction to Web Technology
Overview of The Internet
The Internet is a global network of interconnected computers and devices that communicate using standardized protocols. It enables the exchange of data and information across vast distances, connecting people, businesses, and organizations worldwide.
The history of the Web is relatively short, starting in the late 1980s with Tim Berners-Lee’s invention of Hypertext Transfer Protocol (HTTP) and HTML. Since then, the Web has revolutionized communication, commerce, and information access worldwide.
The Web, also known as the World Wide Web (WWW), is a vast information system built on top of the Internet. Unlike the internet, which is a network of interconnected computers, the Web provides a user-friendly way to access and interact with information through hypertext documents called web pages.
Web Browsers
A web browser is a software application used to access and navigate the World Wide Web. It interprets and displays web content, allowing users to view web pages, interact with multimedia, and access online services.
Web browsers support various technologies, including HTML, CSS, and JavaScript, and provide features such as bookmarks, tabbed browsing, and privacy controls.
Examples of Web Browsers
- Google Chrome: Developed by Google, Chrome is one of the most popular web browsers, known for its speed, simplicity, and extensive feature set.
- Mozilla Firefox: Firefox is an open-source web browser developed by the Mozilla Foundation. It prioritizes privacy and security features and offers customization options through add-ons and extensions.
- Apple Safari: Safari is the default web browser for Apple devices, including iPhones, iPads, and Mac computers. It integrates seamlessly with other Apple services and provides fast performance and energy efficiency.
- Microsoft Edge: Edge is a web browser developed by Microsoft, designed for Windows 10 and later versions. It features built-in tools like a reading mode, note-taking capabilities, and integration with Microsoft services.
- Opera: Opera is a feature-rich web browser known for its speed and innovative features. It includes a built-in ad blocker, VPN, and customizable interface options. Opera Mini is the name of their mobile app.
Benefits and Applications of the Internet
- Global Information Access:Â The Web allows anyone with an internet connection to access a vast amount of information on any topic imaginable.
- Communication and Collaboration:Â Web-based platforms enable instant communication through email, social media, and video conferencing.
- E-commerce:Â The Web has transformed how we shop, allowing for online stores and secure transactions.
- Entertainment and Education:Â The Web provides a wealth of entertainment options like streaming services and educational resources like online courses.
- Social Change and Community Building:Â Social media platforms have empowered social movements and fostered online communities with shared interests.
Hypertext Transfer Protocol (HTTP)
HTTP is the communication language between web browsers and servers. It defines how data is exchanged when you request a web page. When you type a URL in your browser, it sends an HTTP request to the server specified in the URL.
The server then processes the request, retrieves the requested web page, and sends an HTTP response back to your browser, which interprets the HTML code and displays the page accordingly.
Uniform Resource Locator (URL)
A URL, or web address, is a unique identifier used to locate resources on the Web. It specifies the protocol (e.g., HTTP, HTTPS), the domain name (e.g., [invalid URL removed]), the path to the specific resource (e.g., /search), and any query string for dynamic content (e.g., ?q=web+technology).
Example:
https://www.wikipedia.org/wiki/Web_technology?search=Web%20technology
In this example:
-
Protocol: HTTPS (secure)
-
Domain Name: wikipedia.org
-
Path: /wiki/Web_technology
-
Query String: ?search=Web+technology (searching for web technology)
How the Internet Works
Now let’s look at how the internet works. This will help you to understand the process of web design and hosting of a website.
- Users interact with a web browser by typing a URL or submitting a form, providing input such as text or selections.
- The browser generates an HTTP request containing the URL and any additional data, then sends it to the server over the internet.
- Upon receiving the request, the server processes it, executing server-side code and accessing databases as necessary.
- The server constructs an HTTP response with a status code and content to be sent back to the browser.
- The server sends the response back to the browser over the internet.
- Finally, the browser displays the rendered content to the user, presenting the requested webpage or processing the form submission.
Unit 2: Fundamentals of Web Development
Front-End Vs Back-End Web Design
Website design is systematically divided into two. Front-end web design (also known as client-side) and Back-end web design (also known as server-side).
Client-side technologies execute directly in the user’s web browser. Examples include HTML, CSS, and JavaScript. Don’t worry if you are confused because we shall be taking them one after another as we proceed.
Server-side technologies run on the web server and handle tasks that require more processing power or access to databases. Examples include PHP, Python, and Node.js. Back-end tutorial is not covered in this material. You can check for the Web Development note for back-end tutorial.
Code Editor Tools
To start writing computer codes, you will need a code editor tool. The basic one of them is the NotePad. But NotePad is not user-friendly, so I will recommend that you use any of the following:
- Visual Studio Code (VS Code): Developed by Microsoft, VS Code is a free, open-source code editor known for its extensive features, including IntelliSense code completion, debugging support, built-in Git integration, and a vast ecosystem of extensions.
- Sublime Text: Sublime Text is a lightweight yet powerful code editor favored by many developers for its speed, responsiveness, and customizable interface.
- Atom: Atom is a hackable text editor created by GitHub.
- IntelliJ IDEA: IntelliJ IDEA is a robust IDE specifically tailored for Java development, although it supports other languages as well.
- Eclipse: Eclipse is a versatile IDE primarily used for Java development but also supports other programming languages through plugins.
- Notepad++: Notepad++ is a lightweight and fast code editor for Windows, offering syntax highlighting, code folding, and a wide range of plugins to enhance productivity.
- Brackets: Brackets is an open-source code editor developed by Adobe, designed specifically for web development.
These code editors cater to different preferences, workflows, and programming languages, providing developers with options to choose the tool that best suits their needs.
How to Write and Run HTML Code
- Open any code editor of your choice and write your code.
- Save it in a new folder with .HTML file name extension (eg. index.html).
- Open the file using an internet browser (eg chrome).
Note that any time you make changes to your code, you will have to refresh or reload the browser for the effect to take place.
Hypertext Markup Language (HTML)
HTML is the foundation of web pages. It’s not a programming language, but a markup language that uses tags to define the structure and content of a web page. Think of HTML tags as instructions for a web browser on how to display elements like headings, paragraphs, images, and links.
HTML handles the structure of a website such as headings, navigation, body, sidebar, and footer. HTML alone cannot make a good website, and that is why CSS, JS, and others are needed to make websites professional.
Now, open a text editor and enter the following HTML code.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a simple example of an HTML page.</p>
<img src="image.jpg" alt="My Image">
<a href="https://www.example.com">Visit an Example Website</a>
</body>
</html>
Other HTML Tags
There are many HTML tags that you can use to enhance the basic HTML code we have above. Just include them one after another, then save the HTML document and refresh your web page to see the changes.
Formatting Tags
<b>
 (deprecated): Makes text bold (useÂ<strong>
 for semantic emphasis instead).- Example:Â
<b>Bold Text</b>
 (avoid using this tag for new content).
- Example:Â
<i>
 (deprecated): Makes text italic (useÂ<em>
 for semantic emphasis instead).- Example:Â
<i>Italic Text</i>
 (avoid using this tag for new content).
- Example:Â
<strong>
: Makes text bold and indicates strong importance.- Example:Â
<strong>This is important text.</strong>
- Example:Â
<em>
: Makes text italic and indicates emphasis.- Example:Â
<em>This text is emphasized.</em>
- Example:Â
<br>
: Inserts a line break within a paragraph.- Example: UseÂ
<br>
 for a single line break within aÂ<p>
 tag.
- Example: UseÂ
There are h1 to h6 that you can use for different levels of headings.
Links Tag
<a>
: Defines a hyperlink to another web page or resource.- Example:Â
<a href="https://www.example.com">Visit Example Website</a>
 creates a link to the specified URL.
- Example:Â
Images Tag
<img>
: Inserts an image into the web page.- Example:Â
<img src="image.jpg" alt="My Image Description">
 includes an image with a descriptive alt text (important for accessibility).
- Example:Â
Lists Tag
<ul>
: Defines an unordered list (items with bullet points).- Example:Â
<ul><li>Item 1</li><li>Item 2</li></ul>
 creates an unordered list with two list items.
- Example:Â
<ol>
: Defines an ordered list (items with numbers).- Example:Â
<ol><li>Item 1</li><li>Item 2</li></ol>
 creates an ordered list with numbered items.
- Example:Â
<li>
: Defines a list item within an ordered or unordered list.
Tables Tag (basic example)
<table>
: Defines a table structure.- Example:Â
<table><tr><th>Name</th><th>Age</th></tr><tr><td>John Doe</td><td>30</td></tr></table>
 creates a simple table with header row and data row.
- Example:Â
Remember: This is not an exhaustive list, but it covers some of the most commonly used HTML tags for building basic web page structures and content. I will suggest you learn more from W3 Schools.
Unit 3: Cascading Style Sheets (CSS)
CSS is responsible for the visual presentation of a web page. It allows you to define styles (color, font, background) for different HTML elements, creating a consistent and visually appealing user interface (UI).
Example:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
Methods of Applying CSS Codes
There are three main methods for applying CSS code to your HTML documents:
-
External Stylesheets
This is the preferred method for applying CSS to multiple web pages. It involves creating a separate CSS file (with a .css
extension) containing all your styles. Then, you link this external stylesheet to your HTML documents using the <link>
tag in the <head>
section.
Benefits:
- Maintainability:Â Easier to update styles for all pages by modifying a single CSS file.
- Organization:Â Keeps HTML code clean and separates presentation from content.
- Reusability:Â Styles defined in the external file can be applied to any HTML page that references it.
Example:
- Create a file namedÂ
style.css
 with your CSS code. - In your HTML page, add the following inside theÂ
<head>
 section:
<link rel="stylesheet" href="style.css">
-
Internal Stylesheets
This method involves embedding your CSS code directly within the <head>
section of your HTML document using the <style>
tag.
Benefits:
- Simpler for small projects:Â No need for separate files for small amounts of CSS.
- Keeps code together:Â Styles are located within the same HTML file for easy reference.
Drawbacks:
- Less maintainable:Â Updating styles requires modifying each HTML file where the CSS is embedded.
- Can clutter HTML:Â Large amounts of CSS code can make the HTML document harder to read.
Example:
<head>
<style>body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
/* More styles... */</style>
</head>
-
Inline Styles
This method involves applying styles directly to individual HTML elements using the style
attribute within the opening tag of the element.
Benefits:
- Most specifically: It useful for applying unique styles to a single element.
- Simple for minor adjustments:Â Easy to make quick style changes to an element.
Drawbacks:
- Least maintainable:Â Updating styles requires modifying each element individually.
- Poor code readability:Â Makes HTML code cluttered and harder to understand.
Example:
<h1 style="color: blue; font-size: 1.5em;">This is a heading</h1>
Choosing the Right Method:
- Use external stylesheets for most projects for better organization and maintainability.
- Use internal stylesheets for small-scale projects or when styles are specific to a single page.
- Use inline styles sparingly for minor adjustments or unique element styles, but avoid overuse.
Unit 4: JavaScript (JS)
JavaScript (JS) is a versatile scripting language that adds interactivity and dynamic behavior to web pages. Unlike HTML and CSS, which are static, JavaScript allows you to create animations, respond to user actions (clicks, form submissions), and manipulate the content of a web page after it has loaded.
JavaScript Example 1
<button onclick="changeColor()">Change Color</button>
<script>function changeColor() {
document.body.style.backgroundColor = "lightgreen";
}
</script>
- An HTML button with an onclick event triggers the JavaScript functionÂ
changeColor()
- TheÂ
changeColor()
function uses JavaScript’s DOM manipulation capabilities to change the background color of the document body (entire page) to light green when the button is clicked.
JavaScript Example 2
<button onclick=”showAlert()”>Show Alert</button>
<script>
function showAlert() {
alert(“Hello! This is an alert.”);
}
</script>
The code above will show an alert box too.
JavaScript Example 3
<p id=”myParagraph”>This is a paragraph.</p>
<button onclick=”changeText1()”>Change Text 1</button>
<button onclick=”changeText2()”>Change Text 2</button>
<script>
function changeText1() {
document.getElementById(“myParagraph”).innerText = “Text changed to version 1!”;
}
function changeText2() {
document.getElementById(“myParagraph”).innerText = “Text changed to version 2!”;
}
</script>
The code above will change different texts.
JavaScript Example 4
<button onclick=”toggleVisibility()”>Toggle Visibility</button>
<p id=”myText”>This text can be hidden or shown.</p>
<script>
function toggleVisibility() {
var text = document.getElementById(“myText”);
if (text.style.display === “none”) {
text.style.display = “block”;
} else {
text.style.display = “none”;
}
}
</script>
The code above will toggle text visibility.
JavaScript Example 5
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Simple Form</title>
</head>
<body>
<form id=”myForm” style=”padding: 20px; max-width: 300px; margin: auto;”>
<h2 style=“text-align: center; color: #333;”>Registration Form</h2>
<label for=”fullName”>Full Name:</label><br>
<input type=”text” id=”fullName” placeholder=”Enter your full name” style=”width: 100%; padding: 5px;”><br>
<label for=”email”>Email Address:</label><br>
<input type=”email” id=”email” placeholder=”Enter your email” style=”width: 100%; padding: 5px;”><br>
<label for=”dob”>Date of Birth:</label><br>
<input type=”date” id=”dob” style=”width: 100%; padding: 5px;”><br>
<label for=”gender”>Gender:</label><br>
<select id=”gender” style=”width: 100%; padding: 5px;”>
<option value=””>Select your gender</option>
<option value=”male”>Male</option>
<option value=”female”>Female</option>
<option value=”other”>Other</option>
</select><br>
<input type=”submit” value=”Submit” style=”margin-top: 10px; padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer;”>
</form>
<script>
document.getElementById(“myForm”).addEventListener(“submit”, function(event) {
var isValid = true;
// Clear previous error messages
document.querySelectorAll(“.error”).forEach(function(el) {
el.style.display = “none”;
});
// Simple validation
if (document.getElementById(“fullName”).value === “”) {
alert(“Full Name is required”);
isValid = false;
}
if (document.getElementById(“email”).value === “”) {
alert(“Email Address is required”);
isValid = false;
}
if (document.getElementById(“dob”).value === “”) {
alert(“Date of Birth is required”);
isValid = false;
}
if (document.getElementById(“gender”).value === “”) {
alert(“Gender is required”);
isValid = false;
}
// Prevent form submission if invalid
if (!isValid) {
event.preventDefault();
}
});
</script>
</body>
</html>
Don’t forget you can use other learning resources to sharpen your knowledge, I have put some links below.
Unit 5: Domain Name, Hosting, and CMS
Domain Names
A domain name is the user-friendly address that people type in their browser bar to reach your website. It acts like your online storefront sign, making your website memorable and easy to find.
Now let us look at domain name extensions.
Generic Top-Level Domains (gTLDs)
- .com – Commerce
- .net – Network
- .org – Organisation
- .edu – Education
Country-Code TLDs (ccTLDs)
- .us – United States
- .uk – United Kingdom
- .ca – Canada
- .au – Australia
- .za – South Africa
- .ng – Nigeria
- .gh – Ghana
Web Hosting
Think of web hosting as renting space on a powerful computer (server) connected to the internet. This server stores your website’s files (code, images, content) and makes them accessible to visitors 24/7.
Types of Web Hosting
- Shared Hosting:Â Affordable option where your website shares server resources with other websites. Good for starting small.
- Virtual Private Server (VPS):Â Offers more control and resources than shared hosting, suitable for growing websites.
- Dedicated Hosting:Â Renting an entire server for your website provides maximum control and performance, ideal for high-traffic websites.
Examples of Hosting Companies
- Foreign hosting companies include Bluehost, Hostinger, NameCheap, etc.
- Nigeria hosting companies are Domainking, QServers, Web4Africa, etc.
Content Management Systems (CMS)
Content Management Systems (CMS) are software platforms that enable users to create, manage, and publish digital content on the web without needing advanced technical skills. Some popular CMS platforms include:
- WordPress: The most widely used CMS globally, known for its flexibility, scalability, and extensive plugin ecosystem. It powers a significant portion of websites on the internet, from blogs to e-commerce stores and corporate websites.
- Joomla: Another popular open-source CMS, Joomla offers robust features for building websites, including content management, user management, and extensions for added functionality.
- Drupal: Known for its flexibility and scalability, Drupal is a powerful CMS suitable for building complex websites and web applications.
- Wix: A user-friendly website builder that allows users to create websites without any coding knowledge.
- Shopify: Specifically designed for e-commerce websites, Shopify is a hosted platform that offers a comprehensive suite of tools for building and managing online stores.
Unit 6: Further Studies
HTML Video Tutorials
- HTML & CSS Crash Course Tutorial #1 – Introduction
- HTML & CSS Crash Course Tutorial #2 – HTML Basics
CSS Video Tutorials
- HTML & CSS Crash Course Tutorial #4 – CSS Basics
- HTML & CSS Crash Course Tutorial #5 – CSS Classes & Selectors
- HTML & CSS Crash Course Tutorial #8 – CSS Layout & Position
JavaScript Video Tutorials
- Object Oriented JavaScript Tutorial #1 – Introduction
- Object Oriented JavaScript Tutorial #2 – Object Literals
Projects Ideas
- Design a comprehensive portfolio website to showcase your work, projects, skills, and experiences in a visually appealing manner, incorporating sections such as About Me, Portfolio Gallery, Resume/CV, Contact Form, and Testimonials.
- Develop an interactive restaurant website featuring a dynamic menu with enticing food items, detailed descriptions, and an intuitive reservation system allowing users to book tables for dining, enhancing their overall dining experience.
- Create an engaging e-commerce landing page that captivates users with stunning product displays, informative descriptions, and seamless navigation, empowering them to explore and purchase products effortlessly.
- Craft a user-friendly weather forecast application that provides real-time weather updates and forecasts for various locations in Nigeria, utilizing APIs like OpenWeatherMap to fetch accurate weather data and present it in an accessible format.
- Build an entertaining and educational interactive quiz or trivia game, offering users a diverse range of multiple-choice questions on topics related to Nigeria’s history, culture, geography, or popular culture, fostering engagement and knowledge retention.
- Design an anticipation-building event countdown timer for an upcoming festival, concert, or holiday celebration in Nigeria, visually displaying the remaining days, hours, minutes, and seconds until the event, generating excitement among users.
Wrapping Up
The best way to learn programming is by programming. I will encourage you to pick any project of your choice and work on them. Collaborate with others and share ideas together.