Web Development Essentials: HTML, CSS, JavaScript

Posted on Jul 19, 2025 in Computers

HTML Fundamentals

HTML stands for HyperText Markup Language, which is the standard markup language used for creating and structuring content on the web. Its elements use a system of tags to define items such as headings, paragraphs, links, images, and multimedia content. HTML is fundamental for building website structure and layout.

Key Characteristics of HTML

  • Tags and Elements

    HTML employs tags like <h1>, <p>, and <a> to define content.

  • Attributes

    Attributes provide additional information for elements, such as the href attribute for hyperlinks or src for images.

  • Nesting

    HTML elements can be nested, allowing for complex document structures.

HTML Applications

  • Defines the structure of any webpage.
  • Enables hyperlinking between pages or external websites.
  • Integrates media like images, videos, and audio into webpages.

HTML Versions

  • HTML 1.0 (1991)

    Focused on basic webpage structure.

  • HTML 4.01 (1999)

    Introduced more advanced features and presentation control.

  • HTML5 (2014)

    The most recent version, offering new APIs, multimedia support, enhanced semantics, and mobile responsiveness.

HTML has continually evolved to ensure the web remains functional and visually appealing.

HTML syntax involves nesting elements, where each element typically consists of an opening tag and a closing tag. An HTML document is primarily composed of two main sections: the head and the body.

Document Structure

Every HTML document begins with a <!DOCTYPE html> declaration, followed by the <html> root element. Inside <html>, content is divided into two primary sections: the <head> and the <body>.

The <head> Section

The <head> section contains metadata and references to external resources, such as:

  • <title>: Specifies the page title shown in the browser tab.
  • <meta>: Defines character set, description, and other metadata.
  • <link>: Links external resources like stylesheets.
  • <script>: Embeds or links JavaScript files.

Example: Head Section

<head>
    <title>My Webpage</title>
    <meta charset="UTF-8">
</head>

The <body> Section

The <body> section contains all the content visible to users on the webpage, including text, images, links, and other elements.

Example: Body Section

<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
</body>

HTML Tables, Lists, & Text Styling

HTML tables are defined using the <table> tag. Table rows are created with <tr> (table row), and cells use <td> (table data) for regular cells or <th> (table header) for heading cells.

Table Example

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

Additionally, the <caption> tag provides a title for the table, while <thead>, <tbody>, and <tfoot> tags help organize the table’s structure into header, body, and footer sections. Tables are ideal for displaying organized data like schedules, pricing, or comparison charts.

HTML provides various tags for creating lists and styling text, enhancing content formatting and organization on webpages.

Types of Lists

  • Unordered Lists (<ul>)

    Used when the order of items does not matter. Each item is marked with the <li> tag and typically displayed with bullet points.

    Example: Unordered List
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

  • Ordered Lists (<ol>)

    Used when the order of items is important. It automatically numbers list items, which are wrapped in <li> tags.

    Example: Ordered List
    <ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

  • Definition Lists (<dl>)

    Used to present terms and their corresponding definitions. It includes <dt> for the term and <dd> for the definition.

    Example: Definition List
    <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

Text Styling Tags

  • Bold Text (<b>)

    The <b> tag renders text in bold, typically for emphasis without implying strong importance or semantic meaning.

    Example: Bold Tag
    <b>This is bold text.</b>

  • Strong Emphasis (<strong>)

    The <strong> tag indicates strong importance, usually displayed as bold. It adds semantic meaning, signifying that the enclosed text is of higher importance.

    Example: Strong Tag
    <strong>Important Notice</strong>

  • Italic Text (<i>)

    The <i> tag italicizes text, often used for names of books, foreign words, or for emphasis.

    Example: Italic Tag
    <i>Italicized text</i>

  • Emphasized Text (<em>)

    The <em> tag emphasizes text, typically rendering it in italics. It semantically indicates stress or emphasis in content.

    Example: Emphasis Tag
    <em>Important words</em>

  • Underlined Text (<u>)

    The <u> tag underlines text, often used for highlighting. Its usage in modern web design is generally discouraged in favor of CSS for styling.

    Example: Underline Tag
    <u>Underlined text</u>

These HTML elements enable developers to structure content clearly and highlight important information, improving both readability and user experience.

CSS: Definition & Application

CSS (Cascading Style Sheets) is a language used to style and lay out web pages. It defines how HTML elements are displayed, enabling control over colors, fonts, spacing, positioning, and responsiveness. By separating content (HTML) from design (CSS), it ensures cleaner code, easier maintenance, and consistent styling across multiple pages.

Defining CSS Styles

CSS rules consist of selectors that target HTML elements, classes, or IDs, followed by a set of declarations (property-value pairs).

Syntax

selector {
    property: value;
}

Example: Basic CSS Rule

p {
    color: blue;
    font-size: 16px;
}

Types of Selectors

  • Element Selectors

    Target HTML tags (e.g., h1, div).

    h2 {
    text-align: center;
}

  • Class Selectors

    Target elements with a class attribute (prefixed with .).

    .highlight {
    background-color: yellow;
}

  • ID Selectors

    Target a unique element with an id attribute (prefixed with #).

    #header {
    padding: 20px;
}

Applying CSS to HTML

There are three primary methods to apply CSS to HTML documents:

  • Inline CSS

    Styles are added directly to HTML elements using the style attribute.

    Use Case: Quick fixes or testing.

    Example:

    <p style="color: red; margin: 10px;">This text is red.</p>

    Limitation: Not reusable; mixes content with design.

  • Internal (Embedded) CSS

    Styles are defined within a <style> block in the HTML <head> section.

    Use Case: Single-page styling.

    Example:

    <head>
    <style>
        body {
            font-family: Arial;
        }
        .button {
            background: green;
            padding: 8px;
        }
    </style>
</head>

  • External CSS

    Styles are stored in a separate .css file and linked to HTML using the <link> tag.

    Use Case: Multi-page websites (most efficient method).

    Steps:

    1. Create a CSS file (e.g., styles.css):
    /* styles.css */
nav {
    background: #333;
    color: white;
}
    2. Link it in HTML:
    <head>
    <link rel="stylesheet" href="styles.css">
</head>

Common CSS Properties

  • Text Styling

    • color: Sets text color (e.g., red, #FF0000).
    • font-family: Defines font type (e.g., Arial, sans-serif).
    • font-size: Adjusts text size (e.g., 18px, 1.2em).

  • Layout

    • margin: Adds space outside an element.
    • padding: Adds space inside an element.
    • display: Controls layout flow (e.g., block, flex).

  • Box Model

    • border: Adds a border (e.g., 1px solid black).
    • background-color: Sets element background.

  • Positioning

    • position: Manages element placement (e.g., relative, fixed).
    • float: Aligns elements to the left or right.

Best Practices

  • Use External CSS: Promotes reusability and scalability.
  • Avoid Inline Styles: Keep HTML clean and maintainable.
  • Leverage Classes: Apply consistent styles to multiple elements.
  • Comment Code: Add notes for clarity (e.g., /* Main navigation styles */).
  • Mobile-First Design: Use media queries for responsiveness.
@media (max-width: 600px) {
    .menu {
        display: block;
    }
}

Example: Styling a Page

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Styling Example</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            margin: 0;
            font-family: Verdana, sans-serif;
        }
        .title {
            color: navy;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="title">Welcome to CSS</h1>
    <p style="font-size: 14px;">This paragraph uses inline CSS.</p>
    <div id="content">
        <p class="highlight">Styled with external CSS.</p>
    </div>
</body>
</html>

External CSS (styles.css)

#content {
    padding: 20px;
}
.highlight {
    background: lightyellow;
    border: 1px solid gold;
}

Conclusion

CSS transforms plain HTML into visually engaging web pages. By mastering selectors, properties, and application methods, developers can create responsive, accessible designs efficiently. Prioritizing external stylesheets and semantic HTML ensures maintainable, professional-quality code.

Web Content Essentials: Text, Images, Links

HTML provides straightforward methods to add and format text content. Here’s how to insert and align text effectively:

Inserting Text

Text is added using HTML elements that define its purpose and structure:

  • Headings: Use <h1> to <h6> for titles or section headers.
<h1>Main Title</h1>
<h2>Subheading</h2>
Paragraphs: Wrap text in <p> tags for blocks of content.
<p>This is a paragraph of text.</p>
Inline Text: Use <span> for styling specific parts of text without line breaks.

Aligning Text

Text alignment is achieved using CSS, not HTML attributes, to ensure modern and flexible design:

  • Inline CSS: Apply directly to an element with style="text-align: value;".
<p style="text-align: center;">Centered text.</p>
Internal/External CSS: Define alignment rules in <style> tags or a separate CSS file for reusability.
<style>
    .left-align { text-align: left; }
    .right-align { text-align: right; }
</style>
<p class="left-align">Left-aligned text.</p>

Avoid outdated HTML attributes like align="center", as they are deprecated.

Incorporating Images

Images enhance visual appeal and are added using the <img> tag. Key attributes include:

  • src: Path to the image file (e.g., "images/photo.jpg").
  • alt: Descriptive text for accessibility and SEO.
  • width and height: Optional dimensions (use CSS for responsive scaling).

Example: Image Tag

<img src="images/logo.png" alt="Company Logo" width="100" height="50">

Aligning Images

Use CSS to position images:

  • Float Method: Wrap text around images.
.float-left {
    float: left;
    margin-right: 15px;
}
Centering: Use margin: auto with display: block.
.center-image {
    display: block;
    margin: 0 auto;
}

Adding Hyperlinks

Hyperlinks connect pages using the <a> tag with the href attribute:

  • Basic Link: Direct users to another webpage.
<a href="https://www.example.com">Visit Example</a>
Internal Links: Navigate to sections within the same page using an id attribute.
<a href="#contact">Jump to Contact</a>
<section id="contact">Contact Details</section>
Opening in New Tabs: Use target="_blank".
<a href="https://google.com" target="_blank">Open Google</a>

Linking Images

Combine <a> and <img> tags to create clickable images:

<a href="product-page.html">
    <img src="images/product.jpg" alt="Product Image">
</a>

Best Practices

  • Accessibility: Always include the alt attribute for images.
  • Relative vs. Absolute Paths: Use relative paths (e.g., images/logo.png) for local files and absolute URLs (e.g., https://site.com/image.jpg) for external resources.
  • Responsive Images: Use CSS or the srcset attribute for adaptive sizing.
  • Semantic HTML: Prefer semantic tags like <header> or <nav> for better SEO and readability.

Structure of HTML Forms

HTML forms are integral parts of web pages, enabling users to submit data to a server for processing. A form is created using the <form> tag, which acts as a container for various form elements. The structure of an HTML form involves several key components: form elements, input types, and attributes.

Form Elements

  • The <form> Tag

    This tag encloses all form elements and contains the action and method attributes.

    • Action: Specifies the URL to which form data is sent.
    • Method: Defines how form data is sent. Common methods are GET (appends data to the URL) and POST (sends data in the request body).
    <form action="/submit-data" method="post">
    <!-- Form elements go here -->
</form>

  • Input Fields (<input>)

    These are the most commonly used form elements. The <input> tag has various types defined by the type attribute (e.g., text, password, checkbox, radio), each determining the type of user interaction allowed.

    • Text: For single-line text input.
    <input type="text" name="username" placeholder="Your Name">
  • Password: For password input, which hides typed characters.
<input type="password" name="password">
Checkbox: Allows multiple options to be selected.
<input type="checkbox" name="newsletter" value="yes"> Subscribe
Radio: Accepts only one choice from a set.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Submit: A button that submits the form.
<input type="submit" value="Send">

Textarea (<textarea>)

Multi-line text input.

<textarea name="comments" rows="4" cols="50"></textarea>

Select & Option (<select>, <option>)

Drop-down menus.

<select name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
</select>

Button (<button>)

A button element to submit or perform an action in a form.

<button type="submit">Submit</button>

Form Attributes & User Interaction

Form elements enhance user interaction by providing well-structured and customizable methods for data input. Attributes like placeholder, required, and maxlength guide users to fill data appropriately and enhance usability. For example, placeholder provides a hint inside the input field, while required ensures essential fields are completed. Proper data formats are managed through specific input types such as email and tel, making data collection more efficient and accurate. These features make forms interactive, user-friendly, and effective for gathering information.

JavaScript Fundamentals

JavaScript is a versatile language for web development, enabling dynamic and interactive web pages. It features a simple syntax with variables (let, const), functions, and control structures. Variables hold values, and functions allow code blocks to be reused. Decisions in JavaScript are made using if, else, and switch statements based on conditions.

Basic Syntax Rules

  • Variables

    Declare variables with let, const, or var. let allows reassignment, while const declares immutable values.

    let name = "Alisha";
const age = 21;

  • Functions

    Functions are declared using the function keyword and called as needed.

    function greet() {
    console.log("Hello!");
}
greet();

  • Comments

    Comments are created using // for single-line comments and /* */ for multi-line comments.

    // Single-line comment
/*
 * Multi-line
 * comment
 */

Data Types

JavaScript supports both primitive and non-primitive data types:

  • Primitive Types

    • String: Represents text.
    let greeting = "Hello";
  • Number: Represents numeric values.
let age = 30;
Boolean: Represents true or false.
let isActive = true;
Null and Undefined: Represent empty or uninitialized values.

Non-Primitive Type

  • Object: Stores key-value pairs.
let person = { name: "Johnesh", age: 31 };

Operators

JavaScript includes various operators:

  • Arithmetic: +, -, *, /, % for mathematical operations.
  • Comparison: ==, ===, !=, >, < for value comparison.
  • Logical: &&, ||, ! for logical operations.

JSON in JavaScript

JSON (JavaScript Object Notation) is a lightweight, human-readable data interchange format. It represents key-value pairs, similar to JavaScript objects but with a more rigid structure where keys are always strings. JSON is frequently used in client-server communication.

  • Parsing: JSON.parse() converts a JSON string into a JavaScript object.
let jsonStr = '{"name": "Alisha", "age": 29}';
let person = JSON.parse(jsonStr);
Stringifying: JSON.stringify() converts a JavaScript object into a JSON string.
let obj = { name: "Bobby", age: 40 };
let jsonStr = JSON.stringify(obj);

JavaScript syntax, data types, operators, and JSON handling are fundamental for creating dynamic, interactive web applications and facilitating data exchange between servers and clients.