Embedded Files
HTML, CSS, & JavaScript (JS)
HTML, CSS, & JavaScript (JS)
Definitions:
HTML (HyperText Markup Language):
The standard markup language used to structure content on the web. It defines elements like headings, paragraphs, links, images, and forms. HTML provides the skeleton of a webpage.CSS (Cascading Style Sheets):
A stylesheet language used to control the presentation of HTML elements. It defines how the page looks, including layout, colors, fonts, and spacing. CSS separates design from content.JavaScript (JS):
A programming language that enables dynamic behavior and interactivity on web pages. It can modify HTML and CSS in real time, respond to user input, validate forms, and update content without reloading the page.
Online Tools
Online Tools
Editor (WYSIWYG)
Core Concepts, & Basic Markup
Core Concepts, & Basic Markup
(HTML, CSS, & JavaScript)
HTML
HTML
Purpose: Structure of a web page.
Core Concepts:
Core Concepts:
Elements define content (<p>, <h1>, <img>, <a>, <div>).
Attributes provide extra information (src, href, alt, class, id).
Hierarchy:
<html> — root element
<head> — metadata, title, links to CSS/JS
<body> — visible content
Common tags:
Common tags:
Text: <h1>–<h6>, <p>, <span>, <strong>, <em>
Lists: <ul>, <ol>, <li>
Links/Images: <a href="...">, <img src="...">
Structure: <div>, <section>, <header>, <footer>
Forms: <form>, <input>, <label>, <button>, <select>
Example:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is an example of HTML.</p>
</body>
</html>
CSS
CSS
Purpose: Controls presentation and layout.
Core Concepts:
Core Concepts:
Selectors target elements (p, .class, #id).
Properties define appearance (color, font-size, margin, padding).
Cascading order: inline > internal > external; last rule wins.
Box model: content → padding → border → margin.
Layout tools:
Flexbox — for 1D layouts
Grid — for 2D layouts
Example:
Example:
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
.container {
display: flex;
justify-content: space-around;
margin: 20px;
}
Linking CSS:
<link rel="stylesheet" href="styles.css">
JS
JS
Purpose: Adds interactivity and logic.
Core Concepts:
Core Concepts:
Variables: store data (let, const, var).
Data types: string, number, boolean, object, array.
Functions: reusable code blocks.
Events: respond to user actions (onclick, onchange).
DOM (Document Object Model): manipulate HTML dynamically.
Example operations: show/hide elements, validate forms, change content.
Example:
Example:
var message = "Howdy y'all!";
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("display_message").textContent = message;
});
Placement:
<script src="script.js"></script>
Summary
Summary
Language Role Example
HTML Structure <p>
CSS Style p { color: red; }
JavaScript Behavior alert('Hi');
Integrated Example
Integrated Example
Working Example: Codepen
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1 id="title">Hello World</h1>
<button id="btn">Click Me</button>
<p id="message"></p>
</body>
</html>
Page updated
Report abuse