Web Development & Applications Lab

Module 1: HTML Formatting

What is HTML Formatting?

HTML contains several tags for defining text with a special meaning.

<b> and <strong> define bold text.
<i> and <em> define italicized text.
<u> defines underlined text.
<h1> to <h6> define HTML headings.
<p> defines a paragraph, and <br> inserts a single line break.
<hr> creates a horizontal line across the page.

Legacy Tags & Colors

Older versions of HTML allowed direct styling without CSS using attributes:

bgcolor="..." and text="..." on the <body> tag set background and text colors.
<font color="..." size="..." face="..."> sets the font properties for text.
<marquee> creates scrolling text, and <blink> (now deprecated in many browsers) creates flashing text.

Try It Yourself

<html>
<head>
    <title>My Formatting Page</title>
</head>
<body bgcolor="#f4f4f9" text="#333333">

    <h1>Main Heading: Welcome</h1>
    
    <hr>
    
    <p>
        Here is some text.<br>
        This is on a new line!
    </p>

    <p>
        <b>This text is bold</b>, 
        <i>this is italics</i>, and 
        <u>this is underlined</u>.
    </p>

    <p>
        <font color="red" size="5" face="Arial">This font is red, Arial, and size 5.</font>
    </p>

    <marquee>Scrolling text using marquee!</marquee>

    <p><blink>This text is blinking!</blink></p>

</body>
</html>

Test Yourself

1. Which tag is used for the largest heading?

Module 2: Lists, Links & Images

HTML Lists

HTML allows web developers to group a set of related items in lists.

Unordered HTML List: Starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets. You can change the bullet type using the type attribute (e.g., type="circle").
Ordered HTML List: Starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers or letters based on the type attribute (e.g., type="I" for Roman numerals).

HTML Links and Images

Links are the defining feature of the web because they allow you to move from one page to another.

The <a> tag defines a hyperlink. The most important attribute is href, which indicates the link's destination.
Links can point to external websites (href="https://...") or to specific parts of the same page (internal linking) by pointing to an id (href="#top").
The <img> tag is used to embed an image in an HTML page. It is empty, contains attributes only, and does not have a closing tag. The src attribute specifies the path to the image, and alt specifies an alternate text.

Try It Yourself

<html>
<body>

<h2 id="top">Lists and Links</h2>

<ul type="circle">
    <li>Apple</li>
    <li>Banana</li>
</ul>

<ol type="I">
    <li>First Item</li>
    <li>Second Item</li>
</ol>

<hr>

<p>Here is an image:</p>
<img src="https://via.placeholder.com/150" alt="Sample Image" width="150" height="150">

<br><br>

<p>
    <a href="https://example.com" target="_blank">External Link to Example.com</a>
</p>

<p>
    <a href="#top">Internal Link: Back to Top</a>
</p>

</body>
</html>

Test Yourself

1. Which attribute specifies an alternate text for an image?

title alt src

Module 3: Tables & Layouts

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

A table in HTML consists of table cells inside rows and columns.
The <table> tag defines the table.
Each table row is defined with a <tr> tag.
Each table header is defined with a <th> tag. By default, the text in <th> elements are bold and centered.
Each table data/cell is defined with a <td> tag.

Merging Cells

You can make a cell span across multiple rows or columns to create complex grid layouts:

colspan makes a cell stretch horizontally across columns.
rowspan makes a cell stretch vertically across rows.

Try It Yourself

<html>
<body>

<h2>Complex Multi-Column Grid</h2>

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="#dddddd">Merged vertically (2 rows)</td>
        <td>Row 2, Col 2</td>
        <td>Row 2, Col 3</td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <b>Some Image Here</b><br>
            <img src="https://via.placeholder.com/80" alt="Placeholder">
        </td>
    </tr>
</table>

<br>
<h2>Student Grades Table</h2>
<table border="1" cellpadding="5" cellspacing="0" width="60%">
    <tr>
        <th>Roll No.</th>
        <th>Student's Name</th>
        <th>Grades</th>
    </tr>
    <tr align="center">
        <td>101</td>
        <td align="left">Alice Johnson</td>
        <td>A</td>
    </tr>
    <tr align="center">
        <td>102</td>
        <td align="left">Bob Smith</td>
        <td>B+</td>
    </tr>
</table>

</body>
</html>

Test Yourself

1. Which attribute spans a cell over multiple rows?

colspan rowspan merge

Module 4: Forms & User Input

HTML Forms

The <form> element is used to create an HTML form for user input. A form is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

Form Elements

<input type="text"> defines a single-line text input field.
<input type="password"> defines a password field where characters are masked.
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices. Groups of radio buttons must share the same name attribute.
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options.
<select> defines a drop-down list. The <option> tags define the available options in the list.
<textarea> defines a multi-line input field (a text area).

Try It Yourself

<html>
<body>

<h2>Registration Form</h2>

<form>
    Name: <input type="text" name="username"><br><br>
    
    Password: <input type="password" name="pwd"><br><br>
    
    Gender: 
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br><br>
    
    Subjects:
    <input type="checkbox" name="sub1" value="math"> Math
    <input type="checkbox" name="sub2" value="science"> Science<br><br>
    
    City:
    <select name="city">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
    </select><br><br>
    
    Comments:<br>
    <textarea rows="4" cols="30" name="comments">

Test Yourself

1. Which input type allows selecting multiple options?

radio checkbox text

Module 5: Frames Layout

What are Frames?

Frames allow a web browser window to be divided into separate segments, each of which can show a different HTML document. This was a common way to build navigation menus in the early days of the web.

Traditionally, the <frameset> tag replaced the <body> tag. The cols attribute split the screen vertically, and the rows attribute split it horizontally.
Inside a frameset, you use the <frame> tag to specify which HTML file should load in that area, assigning it a name.
To make links open in a specific frame, you use the target="..." attribute on the <a> tag, pointing it to the name of the frame you want to update.

Note: Because traditional framesets break out of modern web elements, the example below simulates frames safely using standard <iframe> tags and standard tables to demonstrate the exact same linking mechanics!

Try It Yourself

<html>
<body>

<h2>Vertical Frames Simulation</h2>
<table border="1" width="100%" height="200" cellspacing="0">
    <tr>
        <td width="30%" valign="top" bgcolor="#eeeeee">
            <h3>Menu</h3>
            <a href="data:text/html,<h3>About</h3><p>Info</p>" target="contentFrame">About</a><br>
            <a href="data:text/html,<h3>Department 1</h3><p>Dept 1 Data</p>" target="contentFrame">Department 1</a><br>
            <a href="data:text/html,<h3>Department 2</h3><p>Dept 2 Data</p>" target="contentFrame">Department 2</a><br>
        </td>
        <td width="70%" valign="top">
            <iframe name="contentFrame" width="100%" height="100%" frameborder="0"></iframe>
        </td>
    </tr>
</table>

<br>
<h2>Horizontal Frames Simulation</h2>
<table border="1" width="100%" height="200" cellspacing="0">
    <tr>
        <td height="30%" align="center" bgcolor="#d9ead3">
            <a href="data:text/html,<h3>Department A</h3>" target="bottomFrame"><b>Department A Name/Logo</b></a> | 
            <a href="data:text/html,<h3>Department B</h3>" target="bottomFrame"><b>Department B Name/Logo</b></a>
        </td>
    </tr>
    <tr>
        <td height="70%">
            <iframe name="bottomFrame" width="100%" height="100%" frameborder="0"></iframe>
        </td>
    </tr>
</table>

</body>
</html>

Test Yourself

1. What attribute connects an anchor tag's link to a specific frame?

target rel href

Module 6: Mini Multi-Page Website

Requirement: Create a website of 6–7 pages with different effects as mentioned in the syllabus.

How to accomplish this

To create a connected multi-page website, you simply create multiple HTML files in the same folder on your computer and link them together using the anchor tag (<a href="filename.html">).

Your folder structure would look like this:

index.html (Homepage / Main Menu)
page1.html (Formatting Examples)
page2.html (Lists and Links)
page3.html (Complex Tables)
page4.html (User Registration Forms)
page5.html (Student Grades Table)
page6.html (Frames Layout)

Module 7: JavaScript Practical Algorithms

JavaScript can interact with the user via popup boxes like alert() for output and prompt() for input. We also use for and while loops to repeat actions, and if/else conditionals to make decisions.

Task 1: Numbers 5 to 15 Table

Goal: Print a table of numbers from 5 to 15 along with their squares and cubes.

Concept: We use a for loop to iterate from 5 to 15. The \n character is used to create a new line in the alert box string.

Try It Yourself (Task 1)

var res = "Num | Sq | Cube\n";
for(var i=5; i<=15; i++) {
  res = res + i + " | " + (i*i) + " | " + (i*i*i) + "\n";
}
alert(res);

Task 2: Largest of Three Numbers

Goal: Print the largest of three numbers provided by the user.

Concept: We use prompt() to get user input, and parseFloat() to convert that input text into a number. Then, we use if statements to check which number is the highest.

Try It Yourself (Task 2)

var a = parseFloat(prompt("Enter num 1:"));
var b = parseFloat(prompt("Enter num 2:"));
var c = parseFloat(prompt("Enter num 3:"));
var max = a;
if(b > max) { max = b; }
if(c > max) { max = c; }
alert("The largest is: " + max);

Task 3: Factorial of a Number (n!)

Goal: Find the factorial of a number n.

Concept: The factorial of a number (like 5!) is 5 x 4 x 3 x 2 x 1. We use a for loop to multiply a running total by each number up to n.

Try It Yourself (Task 3)

var n = parseInt(prompt("Enter number to find factorial:"));
var f = 1;
for(var i=1; i<=n; i++) {
    f = f * i;
}
alert("Factorial of " + n + " is " + f);

Task 4: Sum and Average

Goal: Enter a list of positive numbers terminated by Zero. Find the sum and average.

Concept: A while(true) loop runs infinitely until the user enters 0, at which point the break statement stops the loop. We keep track of the sum and the count of numbers entered to calculate the average.

Try It Yourself (Task 4)

var sum = 0, count = 0, num;
while(true) {
    num = parseFloat(prompt("Enter a positive number (0 to stop):"));
    if(num === 0) break;
    if(num > 0) {
        sum += num;
        count++;
    }
}
alert("Sum: " + sum + "\nAverage: " + (sum/count));

Task 5: Compound Interest

Goal: Compute the amount in an account yielding 5% interest on Rs 1000 at the end of each year for n years.

Concept: The formula for compound interest is A = P(1 + r)^t. In JavaScript, exponents are calculated using Math.pow(base, exponent).

Try It Yourself (Task 5)

var P = 1000;
var r = 0.05;
var t = parseInt(prompt("Enter number of years:"));
var output = "Compound Interest (P=1000, r=5%)\n";
for(var year = 1; year <= t; year++) {
    var A = P * Math.pow((1 + r), year);
    output += "Year " + year + ": Rs. " + A.toFixed(2) + "\n";
}
alert(output);

Task 6: Count Positives, Negatives, Zeros

Goal: Read n numbers. Count the number of negative numbers, positive numbers, and zeros.

Concept: We loop exactly n times. Inside the loop, we use an if / else if / else chain to check if the number is greater than 0, less than 0, or exactly 0, and increment the respective counter.

Try It Yourself (Task 6)

var count = parseInt(prompt("How many numbers to check?"));
var pos = 0, neg = 0, zero = 0;
for(var i = 0; i < count; i++) {
    var val = parseFloat(prompt("Enter number " + (i+1) + ":"));
    if(val > 0) pos++;
    else if(val < 0) neg++;
    else zero++;
}
alert("Positive: " + pos + "\nNegative: " + neg + "\nZero: " + zero);

Test Yourself

1. Which method is used to ask the user for input?

alert() prompt() console.log()

Web Dev Lab

Module 1: HTML Formatting

What is HTML Formatting?

Legacy Tags & Colors

Test Yourself

Module 2: Lists, Links & Images

HTML Lists

HTML Links and Images

Test Yourself

Module 3: Tables & Layouts

HTML Tables

Merging Cells

Test Yourself

Module 4: Forms & User Input

HTML Forms

Form Elements

Test Yourself

Module 5: Frames Layout

What are Frames?

Test Yourself

Module 6: Mini Multi-Page Website

How to accomplish this

Module 7: JavaScript Practical Algorithms

Task 1: Numbers 5 to 15 Table

Task 2: Largest of Three Numbers

Task 3: Factorial of a Number (n!)

Task 4: Sum and Average

Task 5: Compound Interest

Task 6: Count Positives, Negatives, Zeros

Test Yourself