🌐 HTML5 Notes


1. Introduction to HTML

  • HTML (HyperText Markup Language): Standard language for creating web pages.

  • HTML5: Latest version with new elements, attributes, and behaviors.

  • Structure: <!DOCTYPE html>, <html>, <head>, <body>

2. HTML5 Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document Title</title>
</head>
<body>
  <!-- content -->
</body>
</html>

3. HTML5 Semantic Elements

  • Elements that clearly define their meaning:

    • <header>, <footer>, <nav>, <section>, <article>, <aside>, <main>

  • Improve accessibility and SEO.

4. Text Formatting Tags

  • <h1> to <h6> – headings

  • <p> – paragraph

  • <strong>, <em> – bold and italic (semantic)

  • <br>, <hr> – line break and horizontal rule

  • <blockquote>, <q>, <abbr>

5. Links and Anchors

  • <a href="URL">Text</a>

  • target="_blank" opens in new tab

  • id and #id for internal linking

6. Lists

  • Ordered: <ol><li>Item</li></ol>

  • Unordered: <ul><li>Item</li></ul>

  • Description: <dl><dt>Term</dt><dd>Description</dd></dl>

7. Tables

<table>
  <thead><tr><th>Header</th></tr></thead>
  <tbody><tr><td>Data</td></tr></tbody>
</table>

8. Forms

  • Tags: <form>, <input>, <textarea>, <select>, <label>, <button>

  • Input types: text, email, password, checkbox, radio, submit, date, range

9. Multimedia Elements

  • <img src="image.jpg" alt="description">

  • <video controls><source src="movie.mp4" type="video/mp4"></video>

  • <audio controls><source src="sound.mp3" type="audio/mp3"></audio>

10. HTML5 APIs

  • Canvas API – <canvas> for graphics/drawings

  • Geolocation API – get user's location

  • LocalStorage/SessionStorage – client-side data storage

  • Drag and Drop API


🎨 CSS3 Notes


--------------------------------------------------------------------------------------------------------------------------


1. Introduction to CSS

  • CSS (Cascading Style Sheets) styles HTML elements.

  • CSS3 is the latest version with advanced features.

2. CSS Syntax

selector {
  property: value;
}

  • Example: h1 { color: blue; }

3. Types of CSS

  • Inline: <p style="color:red;">

  • Internal: <style> p { color: red; } </style>

  • External: link rel="stylesheet" href="style.css"

4. Selectors

  • Basic: element, .class, #id

  • Group: h1, h2 { color: red; }

  • Combinators: descendant (div p), child (div > p)

  • Pseudo-classes: :hover, :nth-child()

  • Pseudo-elements: ::before, ::after

5. Colors and Units

  • Colors: name, #hex, rgb(), rgba(), hsl()

  • Units: px, em, rem, %, vh, vw

6. Box Model

  • content + padding + border + margin

  • Use box-sizing: border-box; to include padding & border in width/height.

7. Positioning and Display

  • Position: static, relative, absolute, fixed, sticky

  • Display: block, inline, inline-block, none, flex, grid

8. Flexbox

  • Parent: display: flex;

  • Properties: justify-content, align-items, flex-direction, flex-wrap

  • Child: flex-grow, flex-shrink, flex-basis

9. Grid Layout

  • Parent: display: grid;

  • Define rows/columns: grid-template-rows, grid-template-columns

  • Placement: grid-column, grid-row, grid-area

10. Responsive Design

  • Media Queries:

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

  • Use relative units and flexible layouts.

11. Transitions & Animations

  • Transition: smooth change of properties

button {
  transition: background-color 0.3s ease;
}

  • Animation:

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

12. Transforms

  • transform: translate(), rotate(), scale(), skew()

13. Shadows and Gradients

  • Box-shadow: box-shadow: 2px 2px 5px gray;

  • Text-shadow: text-shadow: 1px 1px 2px black;

  • Gradients: linear-gradient(), radial-gradient()



**************************   Thank you  ****************************************