UNIT: INTRODUCTION TO WEB TECHNOLOGIES
1. Introduction to HTML
Meaning of HTML
HTML (HyperText Markup Language) is the standard language used to create and structure
documents on the World Wide Web. It describes how content should be organized, not how it
should behave or look.
● HyperText refers to linking one document to another using hyperlinks.
● Markup Language means content is marked using tags to define its role.
HTML provides the logical structure of a web document, allowing browsers to correctly
interpret and display content.
2. History of HTML
HTML was developed by Tim Berners-Lee in 1991 to share scientific information over the
Internet.
Evolution:
● HTML 1.0 – Basic text and links
● HTML 2.0 – Standardization
● HTML 3.2 & 4.01 – Tables, forms, images
● XHTML – Strict syntax rules
● HTML5 – Multimedia, semantic elements, better structure
HTML evolved from a simple document format into a full-fledged web publishing language.
3. Objectives of HTML
The main objectives of HTML are:
● To define the structure of web pages
● To create hyperlinks between documents
● To display text, images, tables, and lists
● To collect user input using forms
- By Kumari Sneha
● To ensure platform-independent web pages
4. Basic Structure of an HTML Document
Every HTML page must follow a fixed structure so that browsers can correctly parse it.
Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to Web Technologies</h1>
<p>This page demonstrates the basic structure of an HTML document.</p>
</body>
</html>
Explanation:
● <!DOCTYPE html> → Declares HTML5 version
● <html> → Root element that contains all other HTML elements.
● <head> → Metadata (contains information about the page, such as the title, but it does
not display content on the screen)
● <title> → Browser tab title
● <body> → contains all the visible content of the web page.
5. Header Tags (<h1> to <h6>)
Header tags are used to define headings and subheadings on a web page. There are six levels of
heading tags. <h1> represents the most important heading, while <h6> represents the least
important heading.
Attributes of Header Tags
The align attribute specifies the alignment of the heading text. It can be set to left, right, or
center.
The id attribute uniquely identifies a heading so that it can be referenced within the page.
- By Kumari Sneha
The class attribute is used to group multiple headings together for identification.
The title attribute provides additional information when the user places the mouse pointer over
the heading.
Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>HTML Headings</h1>
<h2>Introduction</h2>
<h3>History of HTML</h3>
<h4>Early Versions</h4>
<h5>Minor Updates</h5>
<h6>Additional Notes</h6>
</body>
</html>
Importance:
● Improves readability
● Helps search engines
● Organizes content logically
6. Body Tag
The <body> tag contains all the content that is visible to the user, such as text, images, tables,
and forms.
Attributes of Body Tag
The bgcolor attribute sets the background color of the page.
The background attribute specifies an image as the background of the page.
The text attribute defines the color of the text displayed on the page.
The onload attribute allows an action to be performed when the page finishes loading.
- By Kumari Sneha
Applications
The body tag is essential for displaying web page content and acts as the main container for all
HTML elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h1>Body Content</h1>
<p>This text appears inside the body tag.</p>
</body>
</html>
7. Paragraph Tag (<p>)
The <p> tag is used to display text in the form of paragraphs. Each paragraph starts on a new
line and adds space above and below the text.
Attributes of Paragraph Tag
The align attribute controls the alignment of the paragraph text.
The title attribute displays additional information when the mouse pointer is placed over the
paragraph.
The id attribute uniquely identifies the paragraph within the page.
Applications
Paragraph tags are used for writing descriptions, explanations, articles, and general text content.
Example:
<!DOCTYPE html>
<html>
<head>
- By Kumari Sneha
<title>Paragraph Tag</title>
</head>
<body>
<p>
HTML is the foundation of web development.
It allows developers to structure content effectively.
</p>
<p>
Each paragraph is separated automatically by space.
</p>
</body>
</html>
HTML ELEMENTS:
8. Form Creation (<form> Tag)
The <form> tag is used to collect input from users and send it to a server.
Attributes of Form Tag
The action attribute specifies the URL where the form data will be sent after submission.
The method attribute determines how data is sent, such as using GET or POST.
The name attribute identifies the form.
The target attribute specifies where the response will be displayed after submission.
Applications
Forms are used for login pages, registration pages, feedback forms, and search pages.
Complete Web Page Example:
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
</head>
<body>
- By Kumari Sneha
<h2>Registration Form</h2>
<form>
Name:<br>
<input type="text"><br><br>
Password:<br>
<input type="password"><br><br>
Gender:<br>
<input type="radio" name="g"> Male
<input type="radio" name="g"> Female<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
9. Table Tag
The <table> tag is used to display data in rows and columns.
Related Tags
● <tr> defines a table row
● <th> defines a table header
● <td> defines table data
Attributes of Table Tag
The border attribute defines the thickness of the table border.
The cellpadding attribute controls the space between cell content and border.
The cellspacing attribute controls the space between table cells.
The width attribute specifies the width of the table.
Applications
Tables are commonly used for displaying student records, employee data, and reports.
- By Kumari Sneha
Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>Student Table</title>
</head>
<body>
<h2>Student Details</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Sneha</td>
<td>BCA</td>
<td>2nd</td>
</tr>
<tr>
<td>Rahul</td>
<td>BSc</td>
<td>1st</td>
</tr>
</table>
</body>
</html>
10. Textarea Tag
The <textarea> tag allows users to enter multiple lines of text.
Attributes of Textarea Tag
The rows attribute defines the number of visible text lines.
The cols attribute defines the width of the text area.
The name attribute identifies the textarea input.
- By Kumari Sneha
The maxlength attribute limits the number of characters entered.
The placeholder attribute displays sample text inside the box.
Applications
Textarea is used for feedback, comments, and address fields.
<!DOCTYPE html>
<html>
<head>
<title>Textarea Example</title>
</head>
<body>
<h3>Feedback</h3>
<textarea rows="5" cols="40">
Enter your feedback here
</textarea>
</body>
</html>
11. Select Tag
The <select> tag is used to create a drop-down list.
Related Tags
● <option> represents an option in the list
● <optgroup> groups related options
Attributes of Select Tag
The name attribute identifies the selected value.
The multiple attribute allows multiple selections.
The size attribute defines how many options are visible.
Applications
Used in forms for selecting country, gender, department, or category.
- By Kumari Sneha
<!DOCTYPE html>
<html>
<head>
<title>Select Example</title>
</head>
<body>
<select>
<option>BCA</option>
<option>BSc</option>
<option>BCom</option>
</select>
</body>
</html>
12. Image Tag
The <img> tag is used to display images on a web page.
Attributes of Image Tag
The src attribute specifies the image location.
The alt attribute provides alternate text if the image fails to load.
The width and height attributes define image dimensions.
The title attribute shows image description on hover.
Applications
Images are used for logos, banners, products, and profile pictures.
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>College Logo</h2>
<img src="[Link]" alt="College Logo" width="200">
- By Kumari Sneha
</body>
</html>
13. Iframe Tag
The <iframe> tag is used to embed another web page inside the current page.
Attributes of Iframe Tag
The src attribute specifies the URL to embed.
The width and height attributes define iframe size.
The frameborder attribute controls border visibility.
The allowfullscreen attribute allows fullscreen display.
Applications
Used to embed videos, maps, and external websites.
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h2>Embedded Website</h2>
<iframe src="[Link] width="400" height="300"></iframe>
</body>
</html>
14. Fieldset Tag
The <fieldset> tag groups related form elements together.
Attributes of Fieldset Tag
The disabled attribute disables all fields inside the fieldset.
The name attribute identifies the group.
- By Kumari Sneha
Applications
Used to organize forms and improve clarity.
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
Name: <input type="text"><br><br>
Email: <input type="email">
</fieldset>
</form>
</body>
</html>
15. Anchor Tag
The <a> tag creates hyperlinks.
Attributes of Anchor Tag
The href attribute specifies the link destination.
The target attribute defines where the link opens.
The title attribute provides extra information.
The download attribute allows file download.
Applications
Used for navigation, page linking, and downloads.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag</title>
</head>
- By Kumari Sneha
<body>
<a href="[Link] to Google</a>
</body>
</html>
16. Lists
Lists display content in an ordered or unordered manner.
Attributes
The type attribute defines list style.
The start attribute sets starting number for ordered lists.
Applications
Used for menus, instructions, and feature lists.
Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h3>Subjects</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Steps</h3>
<ol>
<li>Design</li>
- By Kumari Sneha
<li>Develop</li>
<li>Deploy</li>
</ol>
</body>
</html>
17. Div Tag
The <div> tag is a block-level container used to group elements.
Attributes
The id attribute uniquely identifies the div.
The class attribute groups multiple divs.
The title attribute provides extra information.
Applications
Used for layout structure and grouping content.
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
</head>
<body>
<div>
<h2>About Us</h2>
<p>This section contains information about the website.</p>
</div>
</body>
</html>
- By Kumari Sneha
18. Navbar Design (HTML Only)
A navigation bar is a collection of links used to navigate between pages.
Attributes Used
Anchor attributes such as href and target help navigation.
Applications
Used in websites, dashboards, and portals.
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
EXAMPLES WITH ALL ATTRIBUTES:
1. BODY TAG – With All Attributes
<!DOCTYPE html>
<html>
<head>
<title>Body Tag Example</title>
</head>
- By Kumari Sneha
<!--
This program demonstrates the use of BODY tag attributes.
bgcolor sets background color
text sets text color
link, vlink, alink control hyperlink colors
-->
<body bgcolor="lightyellow" text="blue" link="red" vlink="purple" alink="green">
<h1>Body Tag Demonstration</h1>
<p>
This page shows how body attributes affect the entire webpage.
</p>
<a href="[Link] Google</a>
</body>
</html>
2. HEADING TAGS (h1–h6)
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags Example</title>
</head>
<!--
This program demonstrates different heading tags
from h1 (largest) to h6 (smallest)
-->
<body>
<h1 align="center">Main Heading</h1>
<h2 align="left">Sub Heading</h2>
<h3 align="right">Section Heading</h3>
<h4 title="Tooltip text">Smaller Heading</h4>
- By Kumari Sneha
<h5>Very Small Heading</h5>
<h6>Smallest Heading</h6>
</body>
</html>
3. PARAGRAPH TAG
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag Example</title>
</head>
<!--
This program demonstrates the use of paragraph tag.
align attribute is used to align text.
-->
<body>
<p align="justify">
HTML paragraphs are used to display blocks of text.
The browser automatically adds space before and after paragraphs.
</p>
<p title="This is a tooltip">
Move the mouse here to see tooltip text.
</p>
</body>
</html>
- By Kumari Sneha
4. FORM TAG
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<!--
This program demonstrates HTML form creation.
action specifies server page
method defines data transfer method
-->
<body>
<h2>Student Registration Form</h2>
<form action="[Link]" method="post" autocomplete="on">
<!-- Text input field -->
Name:<br>
<input type="text" name="username" required><br><br>
<!-- Email input field -->
Email:<br>
<input type="email" name="email" placeholder="example@[Link]"><br><br>
<!-- Password field -->
Password:<br>
<input type="password" name="password" maxlength="10"><br><br>
<!-- Submit and Reset buttons -->
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>
</body>
</html>
- By Kumari Sneha
5. TABLE TAG
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<!--
This program demonstrates HTML table creation.
border, cellpadding, cellspacing control table layout.
-->
<body>
<h2>Student Details</h2>
<table border="2" cellpadding="10" cellspacing="5" width="60%" align="center">
<!-- Table caption -->
<caption>Student Information</caption>
<!-- Table header row -->
<tr bgcolor="lightgray">
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<!-- Table data rows -->
<tr>
<td align="center">Sneha</td>
<td>BCA</td>
<td>2nd</td>
</tr>
<tr>
<td align="center">Rahul</td>
<td>BSc</td>
<td>1st</td>
- By Kumari Sneha
</tr>
</table>
</body>
</html>
6. TEXTAREA TAG
<!DOCTYPE html>
<html>
<head>
<title>Textarea Example</title>
</head>
<!--
This program demonstrates textarea tag.
Textarea is used for multi-line input.
-->
<body>
<h3>Feedback Form</h3>
<textarea rows="5" cols="40" placeholder="Enter feedback here" maxlength="200">
Sample feedback text
</textarea>
</body>
</html>
7. SELECT & OPTION TAG
<!DOCTYPE html>
<html>
<head>
<title>Select Tag Example</title>
</head>
- By Kumari Sneha
<!--
This program demonstrates dropdown list using select and option tags.
multiple attribute allows multiple selections.
-->
<body>
<h3>Select Course</h3>
<select name="course" size="3" multiple>
<option value="bca" selected>BCA</option>
<option value="bsc">BSc</option>
<option value="bcom">BCom</option>
</select>
</body>
</html>
8. IMAGE TAG
<!DOCTYPE html>
<html>
<head>
<title>Image Tag Example</title>
</head>
<!--
This program demonstrates image tag.
src specifies image path
alt provides alternative text
-->
<body>
<h2>College Logo</h2>
<img src="[Link]"
alt="College Logo"
- By Kumari Sneha
width="200"
height="150"
border="2"
title="Official College Logo">
</body>
</html>
9. IFRAME TAG
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<!--
This program demonstrates iframe tag.
Iframe is used to embed another webpage.
-->
<body>
<h2>Embedded Website</h2>
<iframe src="[Link]
width="400"
height="300"
frameborder="1"
scrolling="yes"
title="External Website">
</iframe>
</body>
</html>
- By Kumari Sneha
10. FIELDSET & LEGEND
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Example</title>
</head>
<!--
This program demonstrates fieldset and legend tags.
Fieldset groups related form elements.
-->
<body>
<form>
<fieldset>
<legend>Personal Details</legend>
Name:<br>
<input type="text"><br><br>
Email:<br>
<input type="email">
</fieldset>
</form>
</body>
</html>
11. ANCHOR TAG
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
- By Kumari Sneha
</head>
<!--
This program demonstrates anchor tag.
Anchor tag is used to create hyperlinks.
-->
<body>
<a href="[Link]
target="_blank"
title="Go to Google">
Visit Google
</a>
</body>
</html>
12. LIST TAGS
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<!--
This program demonstrates ordered and unordered lists.
-->
<body>
<h3>Unordered List</h3>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
- By Kumari Sneha
<h3>Ordered List</h3>
<ol type="A" start="2">
<li>Design</li>
<li>Develop</li>
<li>Deploy</li>
</ol>
</body>
</html>
13. DIV TAG
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<!--
This program demonstrates div tag.
Div is used to divide webpage into sections.
-->
<body>
<div id="aboutSection" title="About Section">
<h2>About Us</h2>
<p>
This section contains information about the website.
</p>
</div>
</body>
</html>
- By Kumari Sneha
14. NAVBAR
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
</head>
<!--
This program demonstrates a simple navigation bar
using unordered list and anchor tags.
-->
<body>
<ul type="none">
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
- By Kumari Sneha