Developing a website requires understanding key principles such as:
The planning process involves defining the purpose, audience, and scope of the website.
Websites need a domain name and hosting to be available on the internet:
Example:
Domain Name: www.yourwebsite.com
Web Hosting Service: Bluehost, GoDaddy, HostGator, etc.
Responsive web design ensures that websites work across a variety of devices (desktops, tablets, smartphones).
Key Concepts:
Example of Media Query:
@media only screen and (max-width: 600px) {
body { font-size: 14px; }
}
Static websites are fixed-content websites that display the same information for every visitor. They are easy to build and host.
Example:
HTML Code for a Static Website:
<html>
<head><title>Static Website</title></head>
<body>
<h1>Welcome to My Static Website</h1>
</body>
</html>
Dynamic websites display different content based on user interaction or real-time data. They are more complex and require back-end programming.
Example:
Dynamic Content with PHP:
<?php echo "Welcome, User!"; ?>
The World Wide Web Consortium (W3C) sets standards for web development to ensure accessibility, interoperability, and usability across different platforms.
Key Standards:
HTML (Hypertext Markup Language) is the standard language used to create web pages. It defines the structure and content of web documents.
HTML documents are made up of elements that are represented by tags.
Example:
<html>
<head><title>My First HTML Page</title></head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
An HTML document typically contains a head section and a body section.
Example:
<html>
<head><title>My Website</title></head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
HTML uses markup tags to define elements like headings, paragraphs, images, and links. Tags come in pairs: opening and closing tags.
Example:
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
Headings are used to define sections and sub-sections in your document. Paragraphs define blocks of text.
Example:
<h2>Introduction</h2>
<p>This is the first paragraph of the webpage.</p>
The line break tag (<br>) is used to add a break in the content and move to the next
line.
Example:
<p>This is the first line.<br>This is the second line.</p>
HTML forms are used to collect user input. A form is created using the `
HTML provides several types of input elements for different kinds of data. Here are the most common types:
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female
<input type="checkbox" id="subscribe" name="subscribe"> Subscribe to newsletter
<select id="car" name="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
CSS (Cascading Style Sheets) is used to control the style and layout of web pages.
There are three types of CSS:
Example of Internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>
h1 {
background-color: yellow;
font-family: Arial;
font-size: 24px;
text-align: center;
}
Block elements (like div, p, section) can be styled with margins, padding, etc.
div {
border: 2px solid black;
margin: 10px;
padding: 20px;
}
You can style tables to improve their appearance.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
IDs are unique; classes can be reused.
#header {
color: green;
}
.content {
font-size: 16px;
}
Each element is a box: content + padding + border + margin.
div {
padding: 10px;
border: 2px solid blue;
margin: 15px;
}
a:hover {
color: red;
text-decoration: underline;
}
.box {
width: 100px;
height: 100px;
float: left;
}
Colors can be defined using names, HEX, RGB, or HSL values.
h1 {
color: #ff6600;
background-color: rgb(255, 255, 200);
}
Use CSS to structure your entire website layout using flexbox, grid, and positioning.
.container {
display: flex;
justify-content: space-between;
}
nav, main, aside {
padding: 10px;
background: #eee;
}
Client-side scripting refers to code that runs on the user's browser rather than the server. It is used to create dynamic and interactive web pages without reloading.
JavaScript is a lightweight, interpreted programming language primarily used for enhancing interactivity in web applications.
JavaScript supports various data types and variable declarations using var,
let, and const.
// Primitive Types
let name = "John"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let value = null; // Null
let data; // Undefined
// Declaring variables
var x = 10;
let y = 20;
const z = 30;
JavaScript supports arithmetic, comparison, logical, and assignment operators.
let a = 10;
let b = 5;
// Arithmetic
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
// Comparison
console.log(a == b);
console.log(a > b);
// Logical
console.log(a > 5 && b < 10);
JavaScript supports if, else if, else, and switch for
conditions.
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Used to execute a block of code repeatedly. Includes for, while, and
do...while.
// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Used for interaction with users.
alert() – shows a messageconfirm() – asks for confirmationprompt() – takes user input
alert("Hello!");
let confirmBox = confirm("Are you sure?");
let userName = prompt("Enter your name:");
Events are actions that occur in the browser, like clicking a button or loading a page.
Arrays hold multiple values in a single variable.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
fruits.push("Orange"); // Add new element
console.log(fruits.length); // Array length
Objects are used to store key-value pairs.
let person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Hello " + this.name);
}
};
person.greet();
Functions are reusable blocks of code.
function add(x, y) {
return x + y;
}
let result = add(5, 3);
console.log(result);
JavaScript is commonly used for:
JavaScript can validate form inputs before sending them to the server.
Web hosting is a service that allows individuals and organizations to post a website or web page onto the Internet. A web host, or hosting provider, is a business that provides the technologies and services needed for the website to be viewed online.
Key Concepts:
There are various types of hosting to suit different website needs:
A domain is your website's address on the internet. Registering a domain involves choosing a unique name and purchasing it through a domain registrar.
Domain: www.mywebsite.com
Registrar: GoDaddy, Namecheap, Google Domains
Name servers point your domain to the web hosting provider where your website files are stored. They act like a phone book for the internet.
Name Server 1: ns1.myhost.com
Name Server 2: ns2.myhost.com
cPanel is a web-based hosting control panel that simplifies website and server management tasks.
- Create email accounts
- Add new domains or subdomains
- Monitor bandwidth usage
You can create personalized email accounts based on your domain name (e.g., info@yourdomain.com).
Login to cPanel > Email Accounts > Create
Email: support@mywebsite.com
Password: ********
FTP (File Transfer Protocol) clients like FileZilla are used to upload and manage website files on the hosting server.
Host: ftp.mywebsite.com
Username: ftpuser
Password: ********
Port: 21
Maintenance involves updating content, fixing broken links, securing the site, and ensuring backups are in place.
SEO is the process of optimizing your website to rank higher in search engine results, which helps bring organic traffic.
SEO helps search engines understand your content and improves your visibility to users searching for relevant information.
SEO is important because it increases visibility, drives traffic, and builds credibility.
On-page SEO refers to optimization techniques performed directly within the website content and code.
<meta name="description" content="Learn web design and SEO basics">
<meta name="keywords" content="web hosting, SEO, web design">