Scribd
Upload
3 views

HTML_CSS_JS_Notes

This document provides a comprehensive overview of HTML, CSS, and JavaScript, including their structures, common tags, attributes, and usage. It covers basic HTML syntax, semantic tags, forms, media, tables, CSS application methods, and JavaScript functionalities. Additionally, it discusses CSS box model, positioning, flexbox, and JavaScript variables, functions, events, and DOM manipulation.

Uploaded by

kavindyalearnings
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML_CSS_JS_Notes

This document provides a comprehensive overview of HTML, CSS, and JavaScript, including their structures, common tags, attributes, and usage. It covers basic HTML syntax, semantic tags, forms, media, tables, CSS application methods, and JavaScript functionalities. Additionally, it discusses CSS box model, positioning, flexbox, and JavaScript variables, functions, events, and DOM manipulation.

Uploaded by

kavindyalearnings
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Complete HTML Notes (Simplified & Organized)

What is HTML?
HTML stands for HyperText Markup Language. It is used to structure content on the web.
- HyperText: Links between pages
- Markup Language: Uses tags to format content.

Basic HTML Structure


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>

Common Tags
- <h1> to <h6>: Headings
- <p>: Paragraph
- <a href="">: Link
- <img src="">: Image
- <ul>, <ol>, <li>: Lists
- <div>: Container
- <br>: Line break

Attributes
Common attributes:
- id
- class
- style
- title
- alt (for images)
Example: <p id="intro" class="highlight">Welcome!</p>

Semantic Tags
- <header>: Top of page
- <footer>: Bottom
- <nav>: Navigation
- <section>: Section of content
- <article>: Self-contained content
- <aside>: Sidebar

Forms
Complete HTML Notes (Simplified & Organized)

<form>
Name: <input type="text" name="username">
<input type="submit" value="Submit">
</form>

Media Tags
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video width="320" controls>
<source src="movie.mp4" type="video/mp4">
</video>

Tables
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>20</td></tr>
</table>

Meta Tags
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comments
<!-- This is a comment -->

Tips
- Tags usually have opening & closing: <tag>content</tag>
- Some are self-closing: <img>, <br>, <input>
- HTML is not case-sensitive, but lowercase is best practice.

What is CSS?
CSS stands for Cascading Style Sheets. It controls the appearance of HTML elements.

Ways to Apply CSS


- Inline: <p style="color: red;">Text</p>
- Internal: <style> p { color: red; } </style>
- External: <link rel="stylesheet" href="style.css">

CSS Syntax
selector { property: value; }
Example: h1 { color: blue; font-size: 20px; }
Complete HTML Notes (Simplified & Organized)

Selectors
- *: All elements
- element: h1, p, etc.
- .class: class selector
- #id: id selector

Box Model
Every element is a box with:
- Content
- Padding
- Border
- Margin

Positioning
- static
- relative
- absolute
- fixed
- sticky

Flexbox
Used for flexible layouts:
display: flex;
justify-content, align-items, flex-direction

What is JavaScript?
JavaScript is a scripting language used to make web pages interactive.

Adding JavaScript
- Inline: <button onclick="alert('Hi')">Click</button>
- Internal: <script>code</script>
- External: <script src="script.js"></script>

Variables
var x = 5;
let y = 10;
const z = 15;

Functions
function greet(name) {
return 'Hello ' + name;
}
Complete HTML Notes (Simplified & Organized)

Events
onclick, onmouseover, onchange, etc.
Example: <button onclick="myFunc()">Click</button>

DOM Manipulation
document.getElementById('id')
document.querySelector('.class')
element.innerHTML = 'new content';

Control Structures
- if, else, switch
- for, while loops

You might also like