🌐 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 -
idand#idfor 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 ****************************************