Yadika Prasad

📖 What is HTML?

HTML (HyperText Markup Language) is the foundation of web pages. It's a simple and easy-to-learn language that structures content for websites.

⭐ Key Features

• 🧩 Simplicity
• 🖋️ Formatting Capabilities
• 🎨 Flexibility
• 🔗 Hyperlinking Support
• 💻 Platform Independence
• 🎞️ Multimedia Integration
• 🔠 Case-Insensitivity

🔹 HTML Tag Syntax

<tag> content </tag>

📌 Common HTML Tag Examples

<p> Paragraph </p>
<h2> Heading </h2>
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
    

🚫 Unclosed Tags

<br> – Line Break
<hr> – Horizontal Rule
    

📎 HTML Meta Tags

Important tags in the head section: <!DOCTYPE>, <title>, <link>, <meta>, <style>

📝 HTML Text Tags

<p>, <h1>-<h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var>, <br>

🔗 Link Tags

<a>, <base>

🖼️ Image/Object Tags

<img>, <area>, <map>, <param>, <object>

📋 List Tags

<ul>, <ol>, <li>, <dl>, <dt>, <dd>

📊 Table Tags

<table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>, <col>, <colgroup>, <caption>

🧾 Formatting Tags

1. <b> – Bold (physical)
2. <strong> – Important (semantic bold)
3. <i> – Italic (physical)
4. <em> – Emphasized text (semantic italic)
5. <mark> – Highlighted
6. <u> – Underlined
7. <tt> – Teletype (deprecated)
8. <strike> – Strikethrough (deprecated)
9. <sup> – Superscript
10. <sub> – Subscript
11. <del> – Deleted content
12. <ins> – Inserted content
13. <big> – Larger text (deprecated)
14. <small> – Smaller text
    

📐 Table Attributes

<table border="1" cellpadding="10" cellspacing="5" width="500" height="300" align="center" bgcolor="#f2f2f2">
  <tr>
    <td colspan="2">Merged Column</td>
  </tr>
  <tr>
    <td rowspan="2">Merged Row</td>
    <td>Data Cell</td>
  </tr>
</table>
    

🧠 Form Elements & Attributes

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <textarea rows="4" cols="50"></textarea>
  <select>
    <option value="IN">India</option>
    <option value="US">USA</option>
  </select>
  <button type="submit">Submit</button>
</form>
    

CSS (Cascading Style Sheets) is used to style HTML elements and control layout, colors, fonts, and spacing.

Ways to Add CSS

• Inline: <h1 style="color:blue;">
• Internal: inside <style> tag
• External: link to a .css file

Basic Syntax

selector {
  property: value;
}
    

Common Properties

body {
  background-color: #f0f0f0;
  font-family: Arial;
  color: #333;
}

h1 {
  font-size: 24px;
  text-align: center;
}

p {
  margin: 10px;
  line-height: 1.5;
}
    

Box Model

div {
  width: 300px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
}
    

Responsive Design

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
    

JavaScript adds interactivity to web pages. It can respond to user actions, update content, and control elements dynamically.

Ways to Add JavaScript

• Inline: <button onclick="alert('Hi')">
• Internal: inside <script> tag
• External: link to a .js file

Basic Syntax

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

if (age >= 18) {
  console.log("Adult");
}
    

Functions

function greet(user) {
  return "Hello, " + user;
}
greet("Radha");
    

Arrays & Objects

let fruits = ["apple", "banana"];
let person = { name: "Radha", age: 21 };
    

DOM Interaction

document.getElementById("title").innerHTML = "Welcome!";
document.querySelector(".btn").style.color = "blue";
    

Events

document.getElementById("btn").addEventListener("click", () => {
  alert("Clicked!");
});