HTML, CSS AND JAVASCRIPTS
HTML (HyperText Markup Language): is the standard language used for creating web pages and
web applications. HTML files can have either the .html or .htm file extension. The difference
between these two extensions is minimal and primarily historical.
Key Differences
1. File Extension Length: .html: This is a four-letter extension. .htm: This is a three-letter
extension.
2. Historical Context: The .htm extension was used in older operating systems like DOS,
which had a limitation of three-character file extensions^1^. This was necessary because
DOS could not handle four-letter extensions. Modern operating systems do not have this
limitation, so .html is more commonly used today
There are two main types of HTML based on how they are written and their evolution over
time:
1. Static (Standard) HTML
Definition: Traditional HTML where the content is fixed (does not change unless
manually edited).
Use Case: Basic websites, blogs, portfolios.
Example:
2. Dynamic HTML (DHTML)
Definition: Combines HTML + CSS + JavaScript to create interactive, changing content.
Use Case: Web apps (e.g., Gmail, Facebook), real-time updates.
Example:
<button onclick="changeText()">Click Me!</button>
<p id="demo">This text will change.</p>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "New text!";
}
</script>
1. <!DOCTYPE html>
<html>
<head>
<title>My Static Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This content doesn't change dynamically.</p>
</body>
</html>
2. Document Structure Tags
These tags define the basic structure of an HTML document.
<!DOCTYPE html>
Purpose: Declares the document type and HTML version (HTML5).
Must be the first line in every HTML file.
Example
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<html>
Purpose: The root element of an HTML page.
Always wraps all other tags (except <!DOCTYPE>).
Common Attribute: lang="en" (defines language).
Example:
<html lang="en">
<head>...</head>
<body>...</body>
</html>
<head>
Purpose: Contains meta-information (title, styles, scripts).
Not visible on the webpage.
Common Child Tags:
o <title> (page title in browser tab)
o <meta> (SEO, character set)
o <link> (CSS files)
o <script> (JavaScript)
Example:
<head>
<title>My Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
Purpose: Contains all visible content (text, images, links).
Example:
<body>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</body>
3. Text & Heading Tags
Used for structuring text content.
<h1> to <h6>
Purpose: Headings (h1 = most important, h6 = least).
SEO Note: Use only one <h1> per page.
Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<p>
Purpose: Defines a paragraph.
Automatically adds spacing before and after.
Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br>
Purpose: Line break (no closing tag).
Use Case: Force text onto a new line.
Example:
<p>First line<br>Second line</p>
<hr>
Purpose: Horizontal rule (a divider line).
Example:
<p>Section 1</p>
<hr>
<p>Section 2</p>
<strong> vs <b>
Tag Purpose Example
<strong> Semantic importance (screen readers emphasize) <strong>Warning!</strong>
<b> Visual bold (no semantic meaning) <b>Bold text</b>
<em> vs <i>
Tag Purpose Example
<em> Semantic emphasis (screen readers stress) <em>Important</em>
<i> Visual italic (no semantic meaning) <i>Italic text</i>
4. Link & Media Tags
For hyperlinks, images, and embedded content.
<a> (Anchor Tag)
Purpose: Creates hyperlinks.
Key Attributes:
o href="URL" (link destination)
o target="_blank" (opens in new tab)
Example:
<a href="https://google.com" target="_blank">Visit Google</a>
<img>
Purpose: Embeds an image.
Self-closing tag (no </img>).
Key Attributes:
o src="image.jpg" (image path)
o alt="Description" (accessibility)
o width="200" (pixels)
Example:
<img src="cat.jpg" alt="A cute cat" width="200">
video> & <audio>
Tag Purpose Example
Embeds a
<video> <video src="movie.mp4" controls></video>
video
<audio> Embeds sound <audio src="song.mp3" controls></audio>
Key Attributes:
controls (shows play/pause buttons)
autoplay (starts automatically)
loop (repeats)
5. List Tags
For ordered and unordered lists.
<ul> (Unordered List)
Displays bullet points.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol> (Ordered List)
Displays numbers (1, 2, 3...).
Example:
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
6. Form Tags
For user input (login, search, surveys).
<form>
Wraps all input elements.
Key Attributes:
o action="/submit" (where data is sent)
o method="POST" (HTTP method)
Example:
<form action="/submit" method="POST">
<input type="text" name="username">
<button type="submit">Send</button>
</form>
<input>
Purpose: Collects user data.
Common Types:
o text (default)
o password (hidden text)
o email (validates email format)
o checkbox (multiple selections)
o radio (single selection)
Example:
<input type="text" placeholder="Enter name">
<input type="password" placeholder="Password">
7. Semantic Tags (HTML5)
Improve accessibility & SEO.
Tag Purpose Example
<header> Top section (logo, nav) <header><h1>Logo</h1></header>
<nav> Navigation links <nav><a href="/">Home</a></nav>
<section> Thematic grouping <section><h2>About</h2></section>
<footer> Bottom section <footer>© 2024</footer>
7. Table Tags
For displaying data in rows and columns.
Basic Table Structure
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
Tag Purpose
<table> Wraps the entire table
<tr> Table row
<th> Table header (bold)
<td> Table data cell
Visual illustration Common Tags:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<a href="/">Home</a>
</nav>
</header>
<section>
<h2>Section Title</h2>
<p>Paragraph text.</p>
<img src="image.jpg" alt="Description">
</section>
<footer>© 2024</footer>
</body>
</html>
Summary Cheat Sheet
Category Key Tags
Structure <!DOCTYPE>, <html>, <head>, <body>
Text <h1>-<h6>, <p>, <strong>, <em>
Media <a>, <img>, <video>, <audio>
Lists <ul>, <ol>, <li>
Category Key Tags
Forms <form>, <input>, <button>
Semantic <header>, <nav>, <footer>
Tables <table>, <tr>, <td>, <th>
CSS (Cascading Style Sheets)
CSS is used to style and layout web pages—colors, fonts, spacing, animations, and responsive
designs.
CSS Rules: A selector targets HTML elements, and declarations define styles.
selector {
property: value;
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
2. Ways to Add CSS
Method Example Use Case
Inline CSS (inside <p style="color:red;">Text</p> Quick fixes (avoid overuse).
Method Example Use Case
HTML)
Internal CSS (in <style>)
<style>
p { color: red; }
</style>
``` | Small projects. |
| **External CSS** (`.css` file) |
```html
<link rel="stylesheet" href="styles.css">
``` | Best for large projects. |
Visualization:
Margin (10px)
Border (2px)
Padding (20px)
Content (200px width)
5. CSS Layouts
Flexbox (1D Layout)
Arranges items in rows or columns.
Key Properties:
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 10px; /* Space between items */
}
CSS Grid (2D Layout)
Creates grid-based layouts.
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-gap: 20px;
}
6. Responsive Design (Media Queries)
Adjusts styles based on screen size.
@media (max-width: 600px) {
body {
background: lightblue;
}
.menu { display: none; } /* Hide menu on small screens */
}
7. CSS Animations & Transitions
Transitions
Smoothly change property values.
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}
Animations
Custom keyframe animations.
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite;
}
8. Common CSS Properties
Category Properties
font-family, font-size, color, text-
Text
align
Background background-color, background-image
Spacing margin, padding, width, height
Border border, border-radius, box-shadow
Display display, visibility, opacity
Category Properties
9. CSS Best Practices
1. Use External CSS (avoid inline styles).
2. Organize Code (group related styles).
3. Use Variables (for reusable values):
:root {
--primary-color: blue;
}
button {
background: var(--primary-color);
}
Mobile-First Design (start styling for small screens first).
