HTML & CSS Quick Revision Notes | Basic Structure, Forms, Tables & Styling
HTML (Hypertext Markup Language) is the standard language for creating the structure of web pages, while CSS (Cascading Style Sheets) handles the presentation and layout.
1. Basic Structure of an HTML Document
Every HTML file follows a hierarchical skeleton. Understanding the nesting order is crucial for MCQ “Identify the Error” questions.
-
<!DOCTYPE html>➔ Defines the document type (HTML5). -
<html>➔ The root element of the page. -
<head>➔ Contains meta-information (Title, CSS links, Meta tags). Not visible on the page. -
<body>➔ Contains all visible content (Text, Images, Links).
2. Basic Text Formatting
Tags that change the appearance or semantic meaning of text:
| Tag | Purpose | MCQ Tip |
<b> |
Bold | Physical style (purely visual). |
<strong> |
Strong | Semantic style (indicates importance). |
<i> |
Italic | Physical style. |
<em> |
Emphasis | Semantic style (stressed emphasis). |
<u> |
Underline | Generally avoided (looks like a link). |
3. Links & 4. Images
Hyperlinks and media are the “connectors” of the web.
-
Links: Created using the
<a>(Anchor) tag.-
hrefattribute ➔ Specifies the destination URL. -
Syntax:
<a href="url">Click Here</a>
-
-
Images: Created using the
<img>tag. Note: It is an empty/self-closing tag.-
src(Source) ➔ Path to the image file. -
alt(Alternative Text) ➔ Text displayed if the image fails to load; vital for SEO/Accessibility. -
Syntax:
<img src="image.jpg" alt="Description">
-
5. Tables
Tables organize data into a grid. Remember the hierarchy: Table > Row > Header/Data.
-
-
<table>➔ Wrapper for the table. -
<tr>➔ Table Row. -
<th>➔ Table Header (Bold and centered by default). -
<td>➔ Table Data (The actual cell).
-
6. Frames
Note: Frames are mostly obsolete in modern web design (replaced by iframes or CSS), but often appear in semester exams.
-
<frameset>➔ Used instead of<body>to define how the window is split. -
colsattribute ➔ Vertically splits the screen (e.g.,cols="25%, 75%"). -
rowsattribute ➔ Horizontally splits the screen. -
<frame>➔ Defines the specific content inside each section of the frameset.
7. Forms
Forms are used to collect user data and send it to a server.
-
<form>➔ The container for all input elements.-
actionattribute ➔ The destination URL where data is sent. -
methodattribute ➔ How data is sent (GETis visible in URL;POSTis secure/hidden).
-
-
Common Input Types:
-
<input type="text">➔ Single line text. -
<input type="radio">➔ Select one option from a set. -
<input type="checkbox">➔ Select multiple options. -
<input type="submit">➔ The button that sends the form.
-
-
<label>➔ Improves accessibility by linking a title to an input.
8. Introduction to CSS
CSS is the “Skin” of the web. It separates content (HTML) from design.
-
Definition: Cascading Style Sheets.
-
Purpose: Control font size, colors, spacing, and layout.
-
Basic Syntax:
-
Selector ➔ The HTML element you want to style (e.g.,
h1). -
Property ➔ What you want to change (e.g.,
color). -
Value ➔ The setting you apply (e.g.,
blue).
-
Example:
h1 { color: blue; font-size: 20px; }
MCQ Quick-Check Points
-
Which attribute is mandatory for a link? ➔
href. -
Which tag is used for a table row? ➔
<tr>. -
Is
<img>a container or empty tag? ➔ Empty (no closing tag). -
What does CSS stand for? ➔ Cascading Style Sheets.
-
Which form method is more secure? ➔
POST.
Found a mistake? We work hard to ensure all notes are 100% accurate but still If you spot an error or have a suggestion, please [click here to report it].
By LuNotes – crafted with love. ❤️