Website versus Web Application

Internet: A massive global network that connects computers.

WWW (World Wide Web): An information system using URLs, HTTP, and HTML.
Difference Between Relative and Absolute URL:
Relative URL points to a location relative to the current page (e.g., images/logo.png).
Absolute URL provides the full path, including domain (e.g., https://example.com/images/logo.png).
Website: A set of related web pages hosted on a server (e.g., www.dlc.edu.ng).
Home Page: The index or entry point of a website. The default Homepage Filename is index.html.
Web Browser: Software like Chrome or Firefox used to navigate websites.
Web Application: A website with interactive functionality, such as login, user input, etc.
Components of Web Applications:
Client Tier (browser)
Client-Server Architecture in Programming:
Client sends requests; server processes and responds. Browser (client) requests pages, server sends them.
Middle Tier (Web/App server)
Data Tier (Database)

2 categories of web browsers:

(i) Graphical Browsers
The Graphical Browsers are used on a range of typed faces in their display and can handle pictures and sounds as
well. They are restricted to use in graphical user interfaces e.g. Ms Windows. Examples are
NetscapeCommunicator, Internet Explorer, Mozilla Firefox, Google Chrome
(ii) Character /Textual Browsers
These browsers display style text only. They cannot display images or sounds. Examples are Lynx, Mosaic, Chimera
Tools for Writing Websites:
Beginners: PowerPoint, FrontPage Express
Professionals: HTML editors, browsers, word processors, image editors

Web Design
Concerned with structure, layout, navigation, visual appeal.
Web pages can be static or dynamic.
Should be simple, well-structured, and easy to find.
Classification of Web Pages:
Typically web pages are classified as static or dynamic:
(a) Static pages don’t change content and layout with every request unless a human (webmaster/programmer)
manually updates the page. A simple HTML page is an example of static content.
(b) Dynamic pages adapt their content and/or appearance depending on enduser’s input/interaction or changes in
the computing environment (user, time, database modifications, etc.) Content can be changed on the client side
(end-user's computer) by using client-side scripting languages (JavaScript, JScript, ActionScript, etc.) to alter DOM
elements (DHTML).
Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP,
ColdFusion, etc.).
Site Types:
(i) Entertainment/Artistic site (rottentomatoes.com, gawkers.com). The characteristics of this site are: Users come:
To have fun
Read thought-provoking issues
To learn
Design may be as or more important than the written content
(ii) Informational site
In this type of site,
It is designed to deliver useful information to thevisitors
Users want information fast and in easy to digest format
Information is more important than the designs
Elements of the site should be arranged in a logical order by importance using size, colours and contrast to make it
clear
Components of Web Design:
HTML/XHTML/XML
CSS
JavaScript (client-side scripting)
PHP/ASP (server-side scripting)
MySQL/PostgreSQL (databases)
Multimedia (Flash, Silverlight)

Web Accessibility (WCAG principles):

Semantic markup, valid code, alt text for images, logical hyperlink structure
Website Planning:
Define purpose, audience, architecture, and content type
Create clear client requirements
Website Designing: Guiding Principles:
Consistency in layout and graphics
Clear navigation and logical structure
Meaningful content headings
Avoid proverbs/idioms that confuse non-locals
4 ways of designing web page flow:
o Linear Design for multiple pages
o Linear Design for Single Pages
o Non-Linear Design for Multiple Pages
o Non-Linear Design for Single pages
Other Design Principles are Using Appropriate Color Schemes, Optimizing the use of graphics, Tables and
proper Navigation tips
Navigation Rules (from Eric Miller):
Easy-to-find, consistent, meaningful links
Highlight where the user is
Avoid excessive buttons or confusing layouts

HTML – Basic Tags

HTML is the structural language of web pages. It is composed of tags that instruct browsers on how to render
content.
Purpose of Doctype Declaration
It tells the browser which version of HTML is being used, ensuring proper rendering.
Web Page Requirements:
(a) A Folder (also called a Directory)
(b) Internet Connectivity (If Possible)
(c) A Browser
(d) Text editor (e.g., Notepad)
HTML Tags:
Basic structure: <html>, <head>, <title>, <body>
Formatting tags: <br>, <p>, <hr>, <b>, <i>, <u>, <h1> to <h6>
Correct Use of Tags:
Must be properly opened and closed
HTML is not case-sensitive, but lowercase is preferred in HTML5
How to add counters
A counter cannot be created with HTML. It requires a scripting language to make a counter (such as a
JavaScript or a CGI Script).
Counters are usually placed at the bottom of a web page.
HTML Tables
Creating Tables:
Use <table>, <tr>, <td>, and <th>
HTML Forms:
HTML code to:
Accept user email and password
Use JavaScript to check that:
Email is valid (contains "@")
Password is not empty
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<script>
function validateForm() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

if (!email.includes("@")) {
alert("Invalid email address.");
return false;
}

if (password === "") {

alert("Password cannot be empty.");
return false;
}

return true;
}
</script>
</head>
<body>
<h2>Login</h2>
<form onsubmit="return validateForm()">
<label>Email:</label>
<input type="text" id="email" name="email"><br><br>

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

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

</form>
</body>
</html>
Advanced Form (includes PHP):
<form action="submit.php" method="post">
<fieldset>
<legend>Register</legend>
<label>Name: <input type="text" name="name"></label><br>
<label>Email: <input type="email" name="email"></label><br>
<label>Password: <input type="password" name="password"></label><br>
 <label>Phone: <input type="tel" name="phone"></label><br>

Gender:
<label><input type="radio" name="gender" value="Male"> Male</label>
<label><input type="radio" name="gender" value="Female"> Female</label>
<label><input type="radio" name="gender" value="Other"> Other</label><br>

Language:
<select name="language">
<option value="">Select language</option>
<!-- options will be fetched dynamically -->
</select><br>

<label>Zip Code: <input type="text" name="zip"></label><br>

<label>About: <textarea name="about"></textarea></label><br>

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

</fieldset>
</form>
Styling for above form:
<body style="background-color: #f0f0f0; font-family: sans-serif;">
<img src="your_picture.jpg" alt="Your Photo" width="150"><br>
<!-- Form goes here -->
</body>
Populate dropdown from language table in MySQL
<?php
$conn = mysqli_connect("localhost", "root", "", "mydatabase");
$result = mysqli_query($conn, "SELECT language_name FROM language");

echo '<select name="language">';

echo '<option value="">Select language</option>';
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='{$row['language_name']}'>{$row['language_name']}</option>";
}
echo '</select>';
?>
Send form data into MySQL database
<?php
$conn = mysqli_connect("localhost", "root", "", "mydatabase");

$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
$phone = $_POST['phone'];
$gender = $_POST['gender'];
$language = $_POST['language'];
$zip = $_POST['zip'];
$about = $_POST['about'];

$sql = "INSERT INTO users (name, email, password, phone, gender, language, zip, about)
VALUES ('$name', '$email', '$password', '$phone', '$gender', '$language', '$zip', '$about')";

if (mysqli_query($conn, $sql)) {
echo "Registration successful";
} else {
echo "Error: " . mysqli_error($conn);
}
?>
CSS Styling
Default File for Styling is a .css file.
Element Selector Example for Header
header {
background-color: blue;
padding: 20px;
}
Horizontally Align Navigation Bar
display: flex; justify-content: center;
Hover Effect for Links
nav a:hover {
color: red;
}
JavaScript
Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a
webpage as a tree of objects that can be manipulated with JavaScript.
Operator that returns remainder is the % (Modulo operator)
Strings in Jscript
Strings can be enclosed in either single or double quotation marks, with different behaviour at read time. Singly
quoted strings are treated almost literally, whereas doubly quoted strings replace variables with their values as
well as specially interpreting certain character sequences.
Using Jscript to Validate Fields:
<script>
function validateForm() {
let name = document.forms[0]["name"].value;
let email = document.forms[0]["email"].value;
let phone = document.forms[0]["phone"].value;
let zip = document.forms[0]["zip"].value;
let about = document.forms[0]["about"].value;

if (name == "" || email == "" || phone == "" || zip == "" || about == "") {
alert("Please fill out all fields");
return false;
}

if (!email.includes("@")) {
alert("Enter a valid email");
return false;
}

return true;
}
</script>
Attach the script to the form with:
<form onsubmit="return validateForm()">
Linking Web Pages
Use <a> for:
Internal: <a href="page2.html">
External: <a href="https://...">
Email: <a href="mailto:someone@example.com">
JavaScript Animation and Multimedia
Use setInterval() and setTimeout() to animate elements.
Control <audio> and <video> elements using JavaScript.
Example:
<video id="vid" controls><source src="vid.mp4"></video>
<button onclick="document.getElementById('vid').play()">Play</button>

PHP (HyperText Processor)Basics

Server-side scripting language embedded in HTML.
Syntax: <?php echo "Hello"; ?>
echo vs print: both output text, echo is faster
Forms: Handle inputs using $_GET, $_POST
Sessions: Use session_start() and $_SESSION[]
GET vs. POST
GET: Data sent in URL, less secure.
POST: Data sent in body, more secure.
PHP Data Types
As said earlier, there is no explicit declaration of variables in PHP. However, the following are the eight types
which variables in PHP can assume:
(i) Integers are whole numbers, without a decimal point, like 495.
(ii) Doubles are floating-point numbers, like 3.14159 or 49.0.
(iii) Booleans have only two possible values: TRUE and FALSE.
(iv) NULL is a special type that only has one value: NULL.
(v) Strings are sequences of characters, like ‘PHP 4.0 supports string operations.’
(vi) Arrays are named and indexed collections of other values.
(vii) Objects are instances of programmer-defined classes, which can
package up both other kinds of values and functions that are specific to the class.
(viii) Resources are special variables that hold references to resources external to PHP (such as database
connections).
PHP Code to Clean Sentence and Insert Line Breaks
<?php
$sentence = "Laravel being a renowned open-source framework for PHP provides plenty of excellent
opportunities and features to develop complex apps faster.";
// Step 1: Remove extra spaces
$cleaned = preg_replace('/\s+/', ' ', trim($sentence));
// Step 2: Break line every 5 words
$words = explode(' ', $cleaned);
$line = '';
$count = 0;

foreach ($words as $word) {

$line .= $word . ' ';
$count++;

if ($count == 5) {
echo trim($line) . "<br>";
$line = '';
$count = 0;
}
}

if ($line != '') {
echo trim($line); // print any remaining words
}
?>
An Armstrong number is one where the sum of the cube of its digits equals the number.
PHP Armstrong Number Check:
<?php
$number = 371;
$sum = 0;
$temp = $number;

while ($temp != 0) {
$digit = $temp % 10;
$sum += $digit ** 3;
$temp = intdiv($temp, 10);
}

if ($sum == $number) {
echo "$number is an Armstrong number.";
} else {
echo "$number is not an Armstrong number.";
}
?>
HTML Code for the Landing Page (from last year’s PQ)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sweet Bakes Bakery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
background-color: #f8d7da;
padding: 20px;
text-align: center;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #333;
font-weight: bold;
}
nav a:hover {
color: red;
}
footer {
background-color: #f1f1f1;
margin-top: 30px;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
 <!-- Header Section -->
<header>
<img src="logo.jpg" alt="Company Logo" width="100">
<h1>Sweet Bakes</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Events</a>
<a href="#">Contact Us</a>
</nav>
</header>

<!-- Brief History Section -->

<section>
<h2>Our Brief History</h2>
<p>Sweet Bakes started as a small family bakery and has grown into one of the best spots for delicious,
freshly baked cakes and pastries in Lagos.</p>
</section>

<!-- Latest News Section -->

<section>
<h2>Latest News</h2>
<p>We are now offering custom-designed wedding cakes! Contact us to place your order today.</p>
</section>

<!-- Our Services Section -->

<section>
<h2>Our Services</h2>
<ul>
<li>Custom Cakes</li>
<li>Wedding Cakes</li>
<li>Birthday Cakes</li>
<li>Event Catering</li>
</ul>
</section>

<!-- Footer Section -->

<footer>
<p><strong>Company Information:</strong> 1, Olusoji Adesoga Road, Ebute-Metta, Lagos.</p>
<p>Contact us at: <a href="mailto:info@sweetbakes.com">info@sweetbakes.com</a></p>
<p>Telephone: +234 90 600 30 422</p>
</footer>

</body>
</html>