Embedded Files
HTML PROGRAMMING
Basic HTML Structure
Description: The basic structure of an HTML document includes tags like <!DOCTYPE html>, <html>, <head>, and <body>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>
Headings
Description: HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest).
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraphs and Text Formatting
Description: <p> is used for paragraphs, and other tags like <strong> and <em> for text styling.
Example:
<p>This is a <strong>bold</strong> word and an <em>italic</em> word.</p>
Links
Description: The <a> tag creates hyperlinks.
Example:
<a href="https://www.example.com">Visit Example</a>
Images
Description: The <img> tag is used to display images. The src attribute specifies the image source.
Example:
<img src="image.jpg" alt="Description of image">
Lists
Description: HTML has ordered (<ol>) and unordered (<ul>) lists with list items (<li>).
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tables
Description: The <table> tag, along with <tr>, <td>, and <th>, creates tables.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
</table>
Forms
Description: HTML forms collect user input with elements like <input>, <textarea>, <button>, etc.
Example:
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
Div and Span
Description: <div> is used to divide sections, and <span> is used to style inline elements.
Example:
<div>
<p>This is a paragraph inside a div.</p>
</div>
<span style="color: red;">This text is red.</span>
Semantic Elements
Description: Elements like <header>, <footer>, <nav>, and <article> give meaning to page structure.
Example:
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
HTML5 Media
Description: HTML5 includes <audio> and <video> tags for embedding media.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
HTML Attributes
Description: Attributes provide additional information about elements, such as class, id, and style.
Example:
<p id="intro" class="text" style="color: blue;">This is a styled paragraph.</p>
CSS PROGRAMMING
Basic Syntax and Selectors
Description: CSS syntax includes selectors to target HTML elements, with properties and values to style them.
Example:
css
Copy code
p {
color: blue;
font-size: 16px;
}
Types of Selectors
Description: CSS selectors include element, class, ID, and attribute selectors.
Example:
/* Element selector */
h1 {
color: green;
}
/* Class selector */
.intro {
font-weight: bold;
}
/* ID selector */
#header {
text-align: center;
}
Colors and Backgrounds
Description: CSS controls colors and backgrounds using properties like color, background-color, and background-image.
Example:
body {
background-color: #f0f0f0;
}
h2 {
color: #333;
background-image: url('background.jpg');
}
Text Styling
Description: CSS can style text with properties like font-size, font-family, text-align, etc.
Example:
p {
font-family: Arial, sans-serif;
font-size: 18px;
text-align: justify;
}
Box Model
Description: The box model includes margin, border, padding, and width/height for element spacing.
Example:
.box {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
Positioning
Description: CSS positioning (e.g., static, relative, absolute, fixed) controls element layout.
Example:
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
.absolute-box {
position: absolute;
top: 50px;
right: 10px;
}
Flexbox
Description: CSS Flexbox is used for responsive layout design, aligning items within a container.
Example:
.container {
display: flex;
justify-content: space-between;
}
Grid
Description: CSS Grid provides a powerful two-dimensional layout system.
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
Pseudo-Classes and Pseudo-Elements
Description: Pseudo-classes (e.g., :hover, :focus) and pseudo-elements (e.g., ::before, ::after) style elements based on their state.
Example:
a:hover {
color: red;
}
p::first-line {
font-weight: bold;
}
Responsive Design with Media Queries
Description: Media queries apply styles based on screen size for responsive design.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Animations and Transitions
Description: CSS animations and transitions create smooth changes in styles.
Example:
.box {
transition: background-color 0.5s;
}
.box:hover {
background-color: yellow;
}
CSS Variables
Description: CSS variables (--variable-name) store values for reuse throughout a stylesheet.
Example:
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
JAVA SCRIPT PROGRAMMING
Basic Syntax and Data Types
Description: JavaScript supports data types like string, number, boolean, null, undefined, object, and array.
Example:
let name = "Alice";
let age = 25;
let isStudent = true;
Variables (let, const, var)
Description: let and const are preferred for declaring variables due to block-scoping, while var is function-scoped.
Example:
const pi = 3.14;
let radius = 5;
var color = "blue";
Operators
Description: JavaScript includes arithmetic, comparison, logical, and assignment operators.
Example:
let x = 5;
let y = 3;
let sum = x + y; // Arithmetic
let isEqual = (x === y); // Comparison
Functions
Description: Functions help organize code and are reusable. They can be declared with function, as arrow functions, or as methods.
Example:
function greet(name) {
return `Hello, ${name}!`;
}
let greetArrow = (name) => `Hello, ${name}!`;
Control Structures (if, else, switch)
Description: JavaScript uses if-else statements and switch for decision-making.
Example:
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Loops (for, while, do-while)
Description: JavaScript loops, including for, while, and do-while, repeat tasks based on conditions.
Example:
for (let i = 0; i < 5; i++) {
console.log(i);
}
Arrays
Description: Arrays store lists of values and have methods like push, pop, map, filter, etc.
Example:
let fruits = ["apple", "banana", "cherry"];
fruits.push("orange");
console.log(fruits);
Objects
Description: Objects are collections of key-value pairs used to store data and methods.
Example:
let person = {
name: "Alice",
age: 25,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet();
Events and DOM Manipulation
Description: JavaScript interacts with the DOM to manipulate HTML elements and respond to events.
Example:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
Promises and Async/Await
Description: Promises handle asynchronous operations, with async/await providing cleaner syntax for handling them.
Example:
let fetchData = async () => {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
};
fetchData();
Error Handling
Description: try...catch handles runtime errors.
Example:
try {
let result = riskyFunction();
} catch (error) {
console.error("An error occurred:", error);
}
Modules
Description: JavaScript modules allow code to be split across files for easier organization and reusability.
Example:
// In math.js
export function add(a, b) {
return a + b;
}
// In main.js
import { add } from './math.js';
console.log(add(2, 3));
Page updated
Google Sites
Report abuse