■ Web Development Crash Course (HTML, CSS,
JS)
1■■ HTML (HyperText Markup Language)
Definition: HTML is the standard language used to create and structure webpages. It uses tags
enclosed in < > to define elements like headings, paragraphs, links, and forms.
Basic Structure:
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Heading</h1>
<p>Paragraph text</p>
<a href="https://google.com">Link</a>
<img src="image.jpg" alt="desc" width="200">
</body>
</html>
Common Tags: h1-h6 (headings), p (paragraph), a (link), img (image), ul/ol/li (lists), table (tabular
data), form (user input).
2■■ CSS (Cascading Style Sheets)
Definition: CSS is used to style and design HTML elements. It controls the look and layout of
webpages, including colors, fonts, spacing, and positioning.
Ways to Add CSS:
Inline: <h1 style="color:red">Hello</h1>
Internal: <style> h1 { color: blue; } </style>
External: <link rel="stylesheet" href="style.css">
Common Properties:
p { color: red; }
h1 { font-size: 24px; }
div { background-color: yellow; }
table, td, th { border: 1px solid black; }
3■■ JavaScript (JS)
Definition: JavaScript is a client-side scripting language that makes webpages dynamic and
interactive. It is used for calculations, form validation, animations, and handling events.
Example:
<script>
alert("Hello, World!");
</script>
Variables: let name = "Ada"; let age = 20;
Condition:
if (age >= 18) { alert("Adult"); } else { alert("Minor"); }
Loop:
for (let i=1; i<=5; i++) { document.write(i + "<br>"); }
DOM Manipulation:
document.getElementById("demo").innerHTML = "New Text";
■ Exam Quick Tips
- HTML = Structure (headings, paragraphs, tables, forms)
- CSS = Style (color, font, layout)
- JS = Behavior (loops, validation, interactivity)
- Inline vs Internal vs External CSS
- substring(a, b) extracts characters from a to b-1
- indexOf(x) gives the first index of x
- Always close tags properly in HTML
■ Practice Exam (Sample)
1. Distinguish between: Web vs Internet, Java vs JavaScript, Webpage vs Website.
2. Write HTML code for a table with 2 columns: Name and Status.
3. Correct errors in a form with checkboxes, radio buttons, and submit.
4. Write CSS (inline and internal) to make h1 and h2 bold, italic, and 12pt.
5. Predict outputs:
a) for (i=2;i<=8;i+=2) { document.write(i); }
b) s.indexOf("I"); where s="Able was I ere I saw Elba."
c) s.indexOf("I",11);
d) s.substring(12,19);
