Scribd
Upload
8 views

HTML_CSS_JS_Revision_Notes

This document provides revision notes on HTML, CSS, and JavaScript, covering their basic structures, important tags, and functionalities. It includes details on HTML forms, multimedia, CSS styling, selectors, positioning, flexbox, grid, responsive design, and JavaScript basics such as variables, functions, events, and DOM manipulation. The notes serve as a concise guide for understanding and applying web development concepts.

Uploaded by

jbaba6990
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML_CSS_JS_Revision_Notes

This document provides revision notes on HTML, CSS, and JavaScript, covering their basic structures, important tags, and functionalities. It includes details on HTML forms, multimedia, CSS styling, selectors, positioning, flexbox, grid, responsive design, and JavaScript basics such as variables, functions, events, and DOM manipulation. The notes serve as a concise guide for understanding and applying web development concepts.

Uploaded by

jbaba6990
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML, CSS & JavaScript Revision Notes

Page 1: HTML Basics

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages.

Basic Structure:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Important Tags:

- <h1> to <h6>: Headings

- <p>: Paragraph

- <a href="">: Link

- <img src="" alt="">: Image

- <ul>, <ol>, <li>: Lists

- <table>, <tr>, <td>, <th>: Table

- <div>: Division (block-level)


- <span>: Inline container

- <form>, <input>, <button>: Forms

Page 2: HTML Forms & Multimedia

Forms:

<form action="/submit" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<input type="submit" value="Submit">

</form>

Input Types:

- text, password, email, checkbox, radio, submit, button, date

Multimedia:

<img src="image.jpg" alt="Sample Image" width="200">

<video controls>

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

</video>

<audio controls>

<source src="audio.mp3" type="audio/mp3">

</audio>

Page 3: CSS Basics

What is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements.


CSS Syntax:

selector {

property: value;

Example:

p{

color: blue;

font-size: 16px;

Ways to Apply CSS:

- Inline: <p style="color:red">

- Internal: Inside <style> in the head

- External: Link .css file using <link rel="stylesheet" href="style.css">

Page 4: CSS Selectors and Properties

Selectors:

- *: Universal selector

- element: Selects all <p> elements

- .class: Selects elements with a class

- #id: Selects element with a specific ID

Box Model:

- Content > Padding > Border > Margin

Example:
.box {

width: 200px;

padding: 10px;

border: 1px solid black;

margin: 20px;

Page 5: CSS Positioning & Flexbox

Positioning:

- static (default)

- relative

- absolute

- fixed

- sticky

.absolute-box {

position: absolute;

top: 50px;

left: 100px;

Flexbox:

.container {

display: flex;

justify-content: center;

align-items: center;

}
- justify-content: main axis

- align-items: cross axis

Page 6: CSS Grid & Responsive Design

CSS Grid:

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

Responsive Design:

- Use relative units: %, em, rem

- Use media queries:

@media (max-width: 600px) {

body {

background-color: lightblue;

Page 7: JavaScript Basics

What is JavaScript?

JavaScript is a programming language used to make web pages interactive.

Adding JS to HTML:

<script>

alert("Hello, World!");
</script>

Variables:

let name = "Vivek";

const age = 25;

var city = "Delhi";

Functions:

function greet() {

console.log("Welcome!");

greet();

Events:

<button onclick="sayHi()">Click Me</button>

<script>

function sayHi() {

alert("Hi there!");

</script>

DOM Manipulation:

<p id="demo">Hello</p>

<button onclick="changeText()">Change</button>

<script>

function changeText() {

document.getElementById("demo").innerText = "Text Changed!";


}

</script>

Final Tip:

- Practice JavaScript by adding interactivity to HTML pages.

You might also like