Essential HTML and CSS Fundamentals for Web Development

Posted by Anonymous and classified in Computers

Written on June 15, 2026 in English with a size of 6.21 KB

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 using an element's id attribute (e.g., <a href="#section3">Go to Chapter 3</a>).

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

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

Section A: 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 items where the 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.
Default Display: Sequential numbers (1, 2, 3).
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>

Section B: 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.

Section C: Legacy Frame Architecture

Important Examination Note: The <frameset> and <frame> tags are completely deprecated in modern HTML5. They have been replaced by <iframe>.

The Legacy <frameset> Architecture

Frames allowed a developer to split a browser window 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.

Section D: Forms, Controls, and Menus

An HTML form is a section containing interactive controls designed to collect user input and transmit it to a server.

The Form Wrapper Element

<form action="process_data.php" method="POST"></form>

action: Specifies the destination URL script path.
method: Specifies the HTTP transfer technique (GET or POST).

Core Interactive Form Controls

A. Text Boxes

name: The unique variable key for the server.
placeholder: Displays a temporary hint.
type="password": Masks characters for privacy.

B. Radio Buttons

Allows a user to choose exactly one option from a set. They must share the same name attribute to function as a group.

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation of an HTML document. While HTML defines structure, CSS defines appearance.

The CSS Syntax

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

h1 {
  color: blue;
}

Anatomy Breakdown

Selector: Points to the HTML element.
Declaration: Includes a property and a value.
Property: The feature to change (e.g., color).
Value: The setting to apply (e.g., blue).

How to Add CSS to HTML

A. External Stylesheet (Recommended)

Link a separate .css file in the <head> of your document.

B. Internal CSS

Write CSS inside the <head> section, wrapped in <style> tags.

C. Inline CSS

Apply styles directly to an element using the style attribute.

Related entries:

Tags: