Unit II
Hyper Text Markup Language (HTML)
1. Static and Dynamic Web Applications
Static Web Application
A static web application shows the same content to all users.
Characteristics:
Content does not change
No database is used
Simple and fast
Examples:
College information website
Personal portfolio website
Technologies Used:
HTML
CSS
Dynamic Web Application
A dynamic web application shows different content to different users.
Characteristics:
Content changes based on user input
Uses database
More interactive
Examples:
Login pages
Online shopping websites
Feedback forms
Technologies Used:
HTML, CSS, JavaScript
Backend languages (PHP, Python, etc.)
2. HTML – Introduction
What is HTML?
HTML (Hyper Text Markup Language) is the standard language used to create web pages.
In simple words:
👉 HTML tells the browser what to display and how to display it.
Basic Structure of HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
Content goes here
</body>
</html>
Explanation:
<!DOCTYPE html> → Defines HTML5
<html> → Root element
<head> → Page information
<title> → Page title
<body> → Visible content
3. Text Formatting on Web Pages
HTML provides tags to format text.
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<strong>Important Text</strong>
<em>Emphasized Text</em>
<br> Line Break
<p>Paragraph</p>
Purpose:
To make content readable and attractive.
4. Incorporating Images
Images are added using the <img> tag.
<img src="[Link]" alt="Sample Image" width="200" height="150">
Attributes:
src → Image path
alt → Alternate text
width, height → Image size
5. Creating Hyperlinks
Hyperlinks allow navigation between web pages.
<a href="[Link] Google</a>
Uses:
Link to other websites
Link to internal pages
6. Complex Image Maps
Image maps allow clickable areas on an image.
<img src="[Link]" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="circle" coords="337,300,44" href="[Link]">
</map>
Use:
Different parts of one image link to different pages.
7. Tables and Nested Tables
Simple Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
</tr>
</table>
Nested Table
A table inside another table.
<table border="1">
<tr>
<td>
<table border="1">
<tr><td>Inner Table</td></tr>
</table>
</td>
</tr>
</table>
8. Inserting Web Page (iframe)
An iframe displays another web page inside a web page.
<iframe src="[Link] width="400" height="300"></iframe>
9. Setting & Modifying Field Properties
Form fields have attributes like:
type
name
value
placeholder
required
readonly
disabled
Example:
<input type="text" placeholder="Enter name" required>
Case Study: Create a Feedback Form Using HTML
What is a Feedback Form?
A feedback form collects user opinions or responses.
HTML Form Tags Used
<form>
Defines a form.
<form action="#" method="post">
<input>
Used to take user input.
<input type="text" name="username">
<input type="email" name="email">
<input type="radio" name="rating">
<input type="checkbox">
<textarea>
Used for long text input.
<textarea rows="4" cols="30"></textarea>
<select>
Used to create dropdown list.
<select>
<option>Excellent</option>
<option>Good</option>
<option>Average</option>
</select>
<button>
Used to submit form.
<button type="submit">Submit</button>
Complete Feedback Form Example
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>Feedback Form</h2>
<form>
Name: <input type="text" required><br><br>
Email: <input type="email" required><br><br>
Feedback:
<textarea rows="4" cols="30"></textarea><br><br>
Rating:
<select>
<option>Excellent</option>
<option>Good</option>
<option>Average</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>