Syntax - Web Technology

HTML Document Structure

Definition

The basic structure of an HTML document includes DOCTYPE, html, head, and body tags.

Purpose

Defines the standard skeleton for any HTML webpage.

General Syntax

<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>Content</body>
</html>

Example

<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body><h1>Hello</h1></body>
</html>

This is the minimal HTML5 document structure.

CSS Selectors

Definition

CSS selectors are patterns used to select HTML elements to style.

Purpose

Target specific elements for styling without modifying HTML.

General Syntax

selector {
    property: value;
}

Example

h1 {
    color: blue;
    font-size: 24px;
}

Selects all h1 elements and applies blue color and 24px font size.

JavaScript Function

Definition

A JavaScript function is a block of code designed to perform a particular task.

Purpose

Encapsulate reusable code and execute it when called.

General Syntax

function functionName(parameters) {
    // code to execute
}

Example

function greet(name) {
    return "Hello, " + name;
}
alert(greet("Alice"));

Defines a function that returns a greeting and displays it in an alert box.

HTML Form

Definition

An HTML form is used to collect user input and send it to a server.

Purpose

Capture user data through various input fields and submit it.

General Syntax

<form action="submit.php" method="post">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

Example

<form>
    <label>Name: <input type="text" name="name"></label>
    <button type="submit">Send</button>
</form>

Creates a simple form with a text input and submit button.

CSS Flexbox

Definition

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Purpose

Create flexible, responsive layouts without floats or positioning.

General Syntax

display: flex;
justify-content: center;
align-items: center;

Example

.container {
    display: flex;
    justify-content: space-between;
}

Creates a flex container that distributes children evenly with space between them.

JavaScript Array Methods

Definition

Array methods like map, filter, and reduce transform array data.

Purpose

Process and manipulate arrays using clean functional programming patterns.

General Syntax

array.map(callback);
array.filter(callback);

Example

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
// doubled = [2, 4, 6]

The map method creates a new array by doubling each element.

HTML Table

Definition

An HTML table displays data in rows and columns using table elements.

Purpose

Present tabular data in a structured grid format.

General Syntax

<table>
    <tr><th>Header</th></tr>
    <tr><td>Data</td></tr>
</table>

Example

<table border="1">
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>Alice</td><td>25</td></tr>
</table>

Creates a table with headers and one row of data.

CSS Grid

Definition

CSS Grid is a two-dimensional layout system for creating complex web layouts.

Purpose

Create grid-based page layouts with rows and columns.

General Syntax

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

Example

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Creates a 3-column grid with 20px gaps between items.

DOM Manipulation

Definition

DOM manipulation allows JavaScript to change HTML elements and attributes dynamically.

Purpose

Update page content, styles, and structure in response to user actions.

General Syntax

document.getElementById("id");
element.textContent = "new text";
element.style.color = "red";

Example

document.getElementById("demo").textContent = "Hello!";

Finds the element with id 'demo' and changes its text content to 'Hello!'.

Event Listener

Definition

An event listener attaches a function to be called when a specific event occurs.

Purpose

Handle user interactions like clicks, keypresses, and form submissions.

General Syntax

element.addEventListener("event", function);

Example

document.getElementById("btn").addEventListener("click", function() {
    alert("Button clicked!");
});

Adds a click event listener to a button that shows an alert when clicked.

HTML Links & Anchors

Definition

The <a> tag creates hyperlinks to other pages or sections within the same page.

Purpose

Navigate between pages or jump to specific sections.

General Syntax

Example

<a href="https://example.com" target="_blank">Visit Example</a>

Creates a hyperlink that opens in a new tab.

CSS Media Queries

Definition

Media queries apply CSS styles based on device characteristics like screen width.

Purpose

Create responsive designs that adapt to different screen sizes.

General Syntax

@media (max-width: 768px) {
    /* mobile styles */
}

Example

@media (max-width: 600px) {
    body { font-size: 14px; }
}

When screen width is 600px or less, the font size reduces to 14px.

JavaScript Objects

Definition

JavaScript objects store key-value pairs and are the foundation of OOP in JS.

Purpose

Organize related data and functions into a single entity.

General Syntax

const obj = {
    key: value,
    method() {}
};

Example

const person = {
    name: "Alice",
    age: 25,
    greet() { return "Hi, " + this.name; }
};

Creates a person object with properties and a method.

HTML Lists

Definition

HTML supports ordered (<ol>) and unordered (<ul>) lists with list items (<li>).

Purpose

Display items in a bulleted or numbered format.

General Syntax

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Example

<ul>
    <li>Apple</li>
    <li>Banana</li>
</ul>

Creates an unordered bullet list with two items.

Fetch API

Definition

The Fetch API provides a modern way to make HTTP requests in JavaScript.

Purpose

Retrieve or send data to servers asynchronously without reloading the page.

General Syntax

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));

Example

fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => console.log(data));

Fetches data from an API endpoint and logs the JSON response.

Syntax Recap — Web Technology