Mastering HTML Elements and CSS Styling Techniques

Posted on Jun 17, 2026 in Computers

1. Creating Links (The Anchor Element)

Links are the core connective tissue of the World Wide Web. Hyperlinks are created using the anchor tag <a>, which is an inline element.

<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>

Key Attributes of the Anchor Tag

  • href (Hypertext Reference): Specifies the destination URL address of the target page or resource.
  • target: Specifies where to open the linked document:
    • _self (Default): Opens the link in the same browser window/tab.
    • _blank: Opens the link in a new window or browser tab.
  • Internal Anchors (Bookmarks): Links can jump to a specific section on the same webpage by using an element’s id attribute (e.g., <a href="#section3">Go to Chapter 3</a>).

2. Adding Images

Images are embedded into an HTML page using the empty/self-closing element <img>. Because it is an empty element, it does not wrap around text and has no closing tag.

<img src="images/logo.png" alt="University Logo" width="300" height="150">

Key Attributes of the Image Tag

  1. src (Source): Defines the exact directory path or external URL location where the graphic asset file is stored.
  2. alt (Alternate Text): (Crucial for Exams) Provides a descriptive textual alternative for the image. It is read aloud by accessibility screen readers and is displayed if the image fails to load.
  3. width and height: Defines the physical display dimensions of the image in pixels (px).

3. Ordered and Unordered Lists

In HTML, lists are block-level elements used to group related items together structurally.

Unordered Lists (<ul>)

  • Concept: Used for a collection of related items where the specific sequence does not matter.
  • Default Display: Bullet points (typically solid discs).
  • Syntax: Items are wrapped in a <ul> tag, and each item is enclosed in an <li> (List Item) tag.
<ul>
  <li>Database Management Systems</li>
  <li>Computer Networks</li>
  <li>Internet Technologies</li>
</ul>

Ordered Lists (<ol>)

  • Concept: Used for information that must be displayed in a precise, step-by-step sequence.
  • Core Attributes:
    • type: Changes the numbering style (1, a, A, i, I).
    • start: Specifies the initial numerical value.
<ol type="I" start="1">
  <li>Planning Phase</li>
  <li>Designing Phase</li>
  <li>Coding Phase</li>
</ol>

4. Table Creation and Layouts

An HTML table allows developers to organize complex data into a grid format.

Core Table Structural Elements

  • <table>: The main wrapper container.
  • <tr> (Table Row): Establishes a single horizontal row.
  • <th> (Table Header): Defines a heading cell (bold and centered).
  • <td> (Table Data): Defines a standard data cell.

5. Legacy Frame Architecture

Important Note: The <frameset> and <frame> tags are deprecated and replaced by <iframe>.

The Legacy <frameset>

Frames allowed a developer to split a browser viewport into multiple independent sections.

  • rows / cols: Used to dictate how the screen space was split.
  • Structural Limitation: A document utilizing a <frameset> could not contain a standard <body> tag.

6. Forms, Controls, and Menus

An HTML form is a section containing interactive controls to collect user input.

The Form Wrapper

<form action="process_data.php" method="POST"></form>
  • action: Specifies the destination URL script path.
  • method: Specifies the transfer technique (GET or POST).

Core Interactive Form Controls

Text Boxes

Used to capture standard text lines.

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter Username">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="user_password">

Radio Buttons

Allows a user to choose exactly one option from a set.

  • The Shared Name Rule: Radio buttons must share the same name attribute to function as a group.

7. Introduction to CSS

CSS (Cascading Style Sheets) defines the presentation of an HTML document.

The CSS Syntax

A rule-set consists of a selector and a declaration block.

h1 { color: blue; }
  • Selector: Points to the HTML element.
  • Declaration: Includes a property and a value.

How to Add CSS to HTML

  1. External Stylesheet (Recommended): Linked via <link rel="stylesheet" href="style.css"> in the <head>.
  2. Internal CSS: Written inside <style> tags in the <head>.
  3. Inline CSS: Applied directly to an element using the style attribute.