HTML (HyperText Markup Language) is the standard backbone of the internet. It isn't a programming language in the traditional sense (it doesn't have logic like loops or math); instead, it is a markup language used to structure content on the web.
Think of HTML as the skeleton of a webpage, CSS as the skin/clothing, and JavaScript as the muscles/behavior.
HTML uses "tags" to tell the browser what kind of content it is looking at. Most tags come in pairs: an opening tag and a closing tag.
Opening Tag: <tagname>
Content: The text or image inside.
Closing Tag: </tagname>
<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: The "root" element that wraps everything.
<head>: Contains "metadata" (info about the page) like the title, which appears in the browser tab.
<body>: Contains everything visible to the user (text, images, buttons).
To build a functional site, you’ll use these common categories of tags:
Headings: <h1> through <h6> (H1 is the most important).
Paragraphs: <p> for standard blocks of text.
Lists: <ul> for bullet points (unordered) and <ol> for numbered lists (ordered).
Links: <a href="https://google.com">Click Me</a> (The href attribute defines the destination).
Images: <img src="image.jpg" alt="Description"> (Note: This is a "self-closing" tag; it doesn't need a </img>).
<div>: A generic container used to group elements (the "building block" of layouts).
<span>: Used for styling a specific part of a text line.
Attributes provide extra information about an element. They always go inside the opening tag.
Attribute Purpose
class Used to target elements for styling with CSS.
id A unique identifier for a single specific element.
src The path to an image or video file.
href The URL for a link.
style Used for "inline" CSS (though not recommended for big projects).
HTML5 introduced Semantic Elements. These tell the browser (and search engines like Google) exactly what the content means, not just how it looks.
<header> and <footer>: For the top and bottom of the page.
<nav>: For navigation menus.
<article> and <section>: To organize blog posts or distinct content blocks.
<main>: Where the primary content of the page lives.
Accessibility: Screen readers for the visually impaired rely on correct HTML to "read" a site.
SEO (Search Engine Optimization): Google uses your HTML structure to understand what your site is about.
Foundation: You cannot learn web development or design without a solid grasp of HTML.
To create a page that performs calculations and interacts with a printer, we combine HTML (for the structure), CSS (to make it look clean), and JavaScript (to handle the math and the print command).
Here is a complete, single-file solution you can save as an .html file and open in any browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Tool</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; padding: 50px; }
.card { border: 1px solid #ddd; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 300px; }
input { width: 100%; padding: 8px; margin: 10px 0; box-sizing: border-box; }
button { width: 100%; padding: 10px; cursor: pointer; margin-top: 10px; border: none; border-radius: 4px; }
.btn-calc { background-color: #28a745; color: white; }
.btn-print { background-color: #007bff; color: white; }
#result-area { margin-top: 20px; font-weight: bold; font-size: 1.2em; color: #333; }
/* Hide buttons when printing */
@media print {
.no-print { display: none; }
.card { border: none; box-shadow: none; }
}
</style>
</head>
<body>
<div class="card">
<h2>Multiplier</h2>
<div class="no-print">
<label>First Number:</label>
<input type="number" id="num1" placeholder="Enter number">
<label>Second Number:</label>
<input type="number" id="num2" placeholder="Enter number">
<button class="btn-calc" onclick="multiply()">Multiply</button>
</div>
<div id="result-area">
Result: <span id="output">0</span>
</div>
<button class="btn-print no-print" onclick="window.print()">Print Result</button>
</div>
<script>
function multiply() {
// 1. Capture the inputs
const n1 = document.getElementById('num1').value;
const n2 = document.getElementById('num2').value;
// 2. Perform the calculation
const result = n1 * n2;
// 3. Display the result on screen
document.getElementById('output').innerText = result;
}
</script>
</body>
</html>