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.
Editor (WYSIWYG)
(HTML, CSS, & JavaScript)
Purpose: Structure of a web page.
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
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>
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is an example of HTML.</p>
</body>
</html>
Purpose: Controls presentation and layout.
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
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">
Purpose: Adds interactivity and logic.
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>
Language Role Example
HTML Structure <p>
CSS Style p { color: red; }
JavaScript Behavior alert('Hi');
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>