PHP & MySQL
Unit 1
Throwback of Web Elements and Web Servers: HTML: Tags, images, tables and
forms;
HTML (HyperText Markup Language)
Hyper Text Markup Language, also known as HTML, is a programming language that is used to build websites
and web-based programmes. Let’s examine Hypertext Markup Language and what web pages are for.
Hypertext: Text contained in other text is known as hypertext. The text is hypertext and has links. You click
hypertext whenever you click a link that opens a new web page. A means of connecting two or more web
pages is using hypertext (HTML documents).
A markup language is a type of computer language used to apply formatting and layout guidelines to text
documents. Text becomes more interactive and dynamic thanks to markup languages. Text can be transformed
into images, tables, links, and other things.
Web pages: A web browser typically translates content written in HTML into web pages. By typing in a web
page’s URL, you can locate it. A web page can be either dynamic or static. Static web pages can only be
created using HTML.
Basic HTML Tags:
The backbone of web pages, defining structure and content using tags:
Basic Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Web Elements (HTML Basics)
1. HTML Tags
HTML (HyperText Markup Language) uses tags to define elements on a webpage.
Most tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>).
Example:
<h1>Welcome to Web Development</h1>
<p>This is a paragraph.</p>
2. Images
Used to embed pictures using the <img> tag.
It’s a self-closing tag and requires the src (source) and alt (alternative text) attributes.
Example:
<img src="logo.png" alt="Company Logo" width="200" height="100">
3. Tables
Used to display data in a structured grid format.
Key tags:
o <table>: Container for the table
o <tr>: Table row
o <td>: Table data (cell)
o <th>: Table header
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
4. Forms
Forms collect user input and send it to the server for processing.
Important tags:
o <form>: Wraps all form elements, uses action and method attributes
o <input>: Various types like text, radio, checkbox, etc.
o <textarea>: For multiline input
o <select>: Dropdown menu
o <button> or <input type="submit">: Submit button
Example:
<form action="/submit" method="post">
<label>Name: <input type="text" name="username"></label><br>
<label>Email: <input type="email" name="email"></label><br>
<input type="submit" value="Submit">
</form>
Web Servers
A Web Server stores, processes, and delivers web pages to users.
When a user requests a web page (via a browser), the server sends the HTML document to the
browser.
Popular Web Servers:
Apache HTTP Server (Open source and widely used)
Nginx (High performance, efficient with static content)
Microsoft IIS (Internet Information Services)
LiteSpeed (Commercial, high-speed)
Key Functions:
Handle HTTP requests and responses
Serve static content (HTML, CSS, JS, images)
Run server-side scripts (PHP, ASP.NET, Python)
Manage SSL certificates for HTTPS
Log access and errors for monitoring
Summary Table:
Web Element Tag(s) Purpose
Text <h1>, <p>, <div> Display content
Images <img> Embed pictures
Tables <table>, <tr>, <td> Organize data
Forms <form>, <input>, <select> Get user input
Web Server N/A Deliver web pages via HTTP/HTTPS
CSS: Types, background, color, text, padding, spacing, margin.
CSS (Cascading Style Sheets)
CSS is used to style HTML elements, making web pages visually appealing. It controls layout, color, font,
spacing, and more.
Uses of CSS
CSS is used to specify how web pages should look. It explains how documents created using a markup
language look and are formatted gives HTML new capability. It frequently pairs with HTML to layout user
interfaces and online pages.
Types of CSS
Type Syntax Example Description
Inline CSS <p style="color:red;">Text</p> CSS is added directly in the HTML tag
Internal CSS is written in the <head> section of the HTML
<style> p { color: red; } </style>
CSS document
External <link rel="stylesheet"
href="style.css">
CSS is placed in a separate file (.css)
CSS
CSS Properties Overview
1. Background
Controls background color, images, repeat, and position.
body {
background-color: lightblue;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
2. Color
Sets text color.
h1 {
color: #333333; /* Can use name, hex, rgb, hsl */
}
3. Text Formatting
Includes alignment, decoration, spacing, and transformation.
p {
text-align: justify;
text-decoration: underline;
letter-spacing: 1px;
text-transform: uppercase;
}
4. Padding
Space inside the element, between the content and border.
div {
padding: 20px; /* Can be top, right, bottom, left */
}
5. Margin
Space outside the element, between the border and next element.
div {
margin: 15px;
}
6. Spacing (General)
Includes:
letter-spacing: space between characters
word-spacing: space between words
line-height: space between lines of text
p {
word-spacing: 5px;
line-height: 1.6;
}
Quick Reference Table
Property Purpose Example
background-color Sets element background color background-color: yellow;
color Sets text color color: #ff0000;
text-align Aligns text text-align: center;
padding Space inside border padding: 10px;
margin Space outside border margin: 20px;
letter-spacing Space between characters letter-spacing: 2px;
line-height Line spacing in text line-height: 1.5;
JavaScript: Data Types, Operators, Events, Validation and Functions.
JavaScript
JavaScript is the Programming Language for the Web. JavaScript can update and change both HTML and
CSS. JavaScript can calculate, manipulate and validate data.
1. JavaScript Data Types
JavaScript supports both primitive and reference data types.
Primitive Types:
Number: 42, 3.14
String: "Hello", 'World'
Boolean: true, false
Undefined: A variable declared but not assigned
Null: Represents no value
BigInt: For large integers
Symbol: For unique identifiers
Reference Types:
Objects, Arrays, Functions
let name = "John"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let courses = ["HTML", "CSS", "JS"]; // Array
2. JavaScript Operators
Type Operators Example
Arithmetic +, -, *, /, %, ** 5 + 3 →8
Assignment =, +=, -=, *=, /=, %= x += 2
Comparison ==, ===, !=, !==, >, < a === b
Logical &&, `
String + (concatenation) "Hello " + "JS"
Ternary condition ? val1 : val2 x > 10 ? "Yes" : "No"
3. JavaScript Events
JavaScript responds to user actions through events.
Event Description
onclick When an element is clicked
onmouseover When the mouse hovers over
onload When a page finishes loading
onkeydown When a key is pressed
onchange When input field changes
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
4. Form Validation
Used to check user input before submission.
Example: Simple Validation
<form onsubmit="return validateForm()">
<input type="text" id="username">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let user = document.getElementById("username").value;
if (user === "") {
alert("Username is required!");
return false;
}
return true;
}
</script>
5. JavaScript Functions
Functions are blocks of reusable code.
Syntax:
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // Output: Hello, Alice
Types of Functions:
Named function
Anonymous function
Arrow function (ES6)
const add = (a, b) => a + b;
Summary Table
Concept Key Example
Data Type let x = "Hello";
Operator x += 5;
Event <button onclick="...">
Validation if (input === "") { alert("Error"); }
Function function name() { return ... }
