HTML AND JAVASCRIPT
HTML (HyperText Markup Language) is the backbone of web development. It
defines the structure and content of a webpage.
Basic HTML Structure
A typical HTML document follows this structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
ESSENTIAL HTML TAGS
Tag Description
<html> Root element of an HTML page
Contains meta information and links
<head>
to styles/scripts
Sets the title of the web page
<title>
(shown in the browser tab)
Contains the visible content of the
<body>
web page
Headings (h1 is the largest, h6 is the
<h1> to <h6>
smallest)
<p> Paragraph of text
<a href="URL"> Creates a hyperlink
<img src="image.jpg"> Displays an image
<ul> & <ol> Unordered and ordered lists
<li> List item
<table> Creates a table
<tr>, <td> Table row and table cell
<form> Creates an input form
Input field (text, password, submit,
<input>
etc.)
FORMS AND INPUT ELEMENTS
Forms allow users to input data. Example:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
INTRODUCTION TO JAVASCRIPT
JavaScript is a client-side scripting language used to make web pages
interactive. It is embedded inside an HTML document using the <script> tag.
Writing JavaScript Code
JavaScript can be written inside HTML in three ways:
a) Inline JavaScript (inside an element)
b) Internal JavaScript (inside <script> in the HTML file)
c) External JavaScript (linked from a .js file)
Example of Internal JavaScript
<script>
alert("Welcome to my website!");
</script>
Example of External JavaScript
<!-- HTML file -->
<script src="script.js"></script>
// script.js file
alert("This is an external JavaScript file!");
VARIABLES IN JAVASCRIPT
Variables store data values. JavaScript has three ways to declare variables:
var x = 10; // Old way (not recommended)
let y = 20; // Modern way (recommended)
const z = 30; // Constant (cannot be changed)
Data Types in JavaScript
Type Example
String "Hello, World!"
Number 100, 3.14
Boolean true, false
Array ["Apple", "Banana", "Orange"]
Object {name: "John", age: 25}
Operators in JavaScript
Operator Description Example
+ Addition 5+2=7
- Subtraction 5-2=3
* Multiplication 5 * 2 = 10
/ Division 10 / 2 = 5
== Equal to 5 == "5" (true)
=== Strictly equal 5 === "5" (false)
&& Logical AND (5 > 3 && 2 < 4)
Conditional Statements
Used to execute different actions based on conditions.
Example of if-else Statement
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
Loops in JavaScript
Loops allow repetition of code.
For Loop
for (let i = 0; i < 5; i++) {
console.log("Iteration number: " + i);
While Loop
let i = 0;
while (i < 5) {
console.log("Count: " + i);
i++;
JAVASCRIPT AND HTML DOM (DOCUMENT OBJECT MODEL)
The DOM allows JavaScript to interact with HTML elements dynamically.
Selecting Elements
document.getElementById("myElement").innerHTML = "New Text";
document.querySelector(".myClass").style.color = "blue";
Handling Events
Events allow user interactions.
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, user!");
</script>
JavaScript Functions
Functions are reusable blocks of code.
Defining a Function
function greet(name) {
return "Hello, " + name;
console.log(greet("Alice"));
JAVASCRIPT VALIDATION (FORM HANDLING)
Used to check user input before submitting a form.
<form onsubmit="return validateForm()">
<input type="text" id="username">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let user = document.getElementById("username").value;
if (user === "") {
alert("Username cannot be empty!");
return false;
return true;
</script>
Using Local Storage
Stores data in the browser.
localStorage.setItem("username", "Alice");
alert(localStorage.getItem("username"));
SAMPLE PROJECT: INTERACTIVE WEBPAGE
A simple webpage that takes user input and displays it dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Andrea web Page</title>
</head>
<body>
<h1>Enter Your Name:</h1>
<input type="text" id="nameInput">
<button onclick="display()">Submit</button>
<p id="output"></p>
<script>
function display() {
let name = document.getElementById("nameInput").value;
document.getElementById("output").innerHTML = "Hello, " +
name + "!";
</script>
</body>
</html>