HTML: The Foundation of the Web

What is HTML?

HTML, which stands for HyperText Markup Language, is the standard language used to create and structure content on the web. It forms the very backbone of any webpage. Think of it as the skeleton that gives a website its form and structure.

Basic HTML Document Structure

Every HTML page has a fundamental structure that includes a doctype declaration, and `html`, `head`, and `body` elements.

  • <!DOCTYPE html>: Defines the document as an HTML5 document.
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the page, like the title.
  • <body>: Contains the visible content of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my very first paragraph!</p>
</body>
</html>

Common HTML Tags

HTML uses tags to define elements. Here are some of the most common ones:

  • <h1> to <h6>: Headings, with

    being the most important.

  • <p>: Defines a paragraph.
  • <a href="...">: Creates a hyperlink.
  • <img src="..." alt="...">: Embeds an image.
  • <ul>, <ol>, and <li>: Create unordered and ordered lists.
<h1>Main Title</h1>
<p>A paragraph of text. Click the link below.</p>
<a href="https://www.google.com">Go to Google</a>
<h2>A List of Fruits</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
</ul>

CSS: Styling the Web

What is CSS?

CSS stands for Cascading Style Sheets. It's the language used to describe the presentation of a webpage, including colors, layout, and fonts. While HTML provides the structure, CSS provides the style.

How to Use CSS

There are three ways to add CSS to your HTML:

  1. External Stylesheet: A separate .css file linked in the HTML <head>. This is the best practice.
  2. Internal Stylesheet: CSS rules placed within a <style> tag in the HTML <head>.
  3. Inline Styles: CSS applied directly to an HTML element using the style attribute. (Use sparingly).
<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <style>
        /* Internal CSS */
        body {
            font-family: sans-serif;
            background-color: #f0f8ff;
        }
        h1 {
            color: #005a9c;
        }
    </style>
</head>
<body>
    <h1>This heading is styled with CSS.</h1>
    <p style="color: green; font-size: 18px;">This paragraph uses inline CSS.</p>
</body>
</html>

CSS Syntax and Selectors

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style.

  • Element Selector: Selects elements based on the tag name (e.g., `p`, `h1`).
  • Class Selector: Selects elements with a specific class attribute (e.g., `.my-class`).
  • ID Selector: Selects a single element with a specific id attribute (e.g., `#unique-id`).
<style>
    p { /* Element selector */
        font-size: 16px;
    }
    .highlight { /* Class selector */
        background-color: yellow;
    }
    #main-title { /* ID selector */
        border-bottom: 2px solid blue;
    }
</style>

<h1 id="main-title">Title with an ID</h1>
<p>This is a regular paragraph.</p>
<p class="highlight">This paragraph has a class.</p>

The CSS Box Model

Every HTML element can be seen as a box. The CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. This model allows us to add borders and define space between elements.

  • Content: The actual content of the box, where text and images appear.
  • Padding: Clears an area around the content. It is transparent.
  • Border: A border that goes around the padding and content.
  • Margin: Clears an area outside the border. It is also transparent.
<style>
    .box-model-example {
        width: 300px;
        padding: 20px;
        border: 5px solid navy;
        margin: 30px;
        background-color: lightblue;
    }
</style>

<div class="box-model-example">
  This element demonstrates the box model.
</div>

JavaScript: Making Pages Interactive

What is JavaScript?

JavaScript (JS) is a programming language that allows you to implement complex features on web pages. It enables interactivity, such as updating content dynamically, handling user events (like clicks), and creating animations.

How to Use JavaScript

Like CSS, JavaScript can be added in three ways:

  1. External File: A separate `.js` file linked using the <script src="..."> tag, usually before the closing </body> tag.
  2. Internal Script: JavaScript code placed within a <script> tag in the HTML file.

DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. JavaScript can access and change all the elements of an HTML document.

In this example, clicking the button will trigger a JavaScript function that changes the text content of the paragraph.

<p id="demo">Hello, this text will change.</p>
<button onclick="changeText()">Click Me</button>

<script>
    function changeText() {
        document.getElementById('demo').textContent = 'The text has been changed by JavaScript!';
    }
</script>

PHP: Server-Side Power

What is PHP?

PHP (Hypertext Preprocessor) is a widely-used, open-source server-side scripting language. It's especially suited for web development and can be embedded into HTML. Unlike HTML/CSS/JS which run in the browser, PHP code is executed on the server.

Installation and Configuration (with XAMPP)

To run PHP on your computer, you need a web server. XAMPP is a free and easy-to-install package that provides a local server environment, including Apache (the web server), MySQL (a database), and PHP itself.

  1. Download XAMPP: Go to the official Apache Friends website and download XAMPP for your operating system.
  2. Install XAMPP: Run the installer, following the on-screen instructions.
  3. Start Servers: Open the XAMPP Control Panel and start the "Apache" module.
  4. Create PHP Files: Place your .php files in the htdocs folder inside your XAMPP installation directory (e.g., C:\xampp\htdocs).
  5. View in Browser: Access your files by navigating to http://localhost/your-file-name.php in your web browser.

Basic PHP Syntax

PHP scripts are executed on the server, and the plain HTML result is sent back to the browser. A PHP script starts with <?php and ends with ?>.

The `echo` statement is commonly used to output text, variables, and HTML markup.

<!DOCTYPE html>
<html>
<body>

<h1>My First PHP Page</h1>

<?php
$greeting = "Hello World!";
echo $greeting;

echo "<br>"; // Adding a line break

$num1 = 5;
$num2 = 10;
$sum = $num1 + $num2;
echo "The sum of $num1 and $num2 is: " . $sum;
?>

</body>
</html>