Module III: HTML Tags
Use of Different HTML tags in web pages. Table Handling: Table layout &
presentation, constructing tables in a web page, developing a web page in a table.
Ordered and unordered lists. Frames: Developing Web pages using frames. Advantages
and disadvantages of frames. Creating forms, Role of Databases in web applications. Use
of at least one graphical and animation tools like Adobe Fireworks, Abode Photoshop, Gif
Animator, Gimp etc.
__________________________________________________________________________________________
________
Use of Different HTML Tags in Web Pages
What is HTML?
HTML (HyperText Markup Language) is the standard language used to
create and design web pages.
Every HTML document has two main parts:
1. Head section → contains metadata and title
2. Body section → contains visible content (text, images, links, tables,
etc.)
Basic Structure of an HTML Page:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page using HTML.</p>
</body>
</html>
Explanation:
<!DOCTYPE html> → declares the document type (HTML5).
<html> → root element of the webpage.
<head> → contains information like title and metadata.
, <title> → defines the page title (appears on the browser tab).
<body> → contains the main visible content of the webpage.
Commonly Used HTML Tags
Tag Purpose Example
<h1> to Headings (h1 =
<h1>Main Title</h1>
<h6> largest, h6 = smallest)
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break <p>Line 1<br>Line 2</p>
<hr> Horizontal line <hr>
<b>, <i>, Bold, italic, underline
<b>Bold Text</b>
<u> text
<a href="page.html">Click
<a> Hyperlink
Here</a>
<img src="photo.jpg"
<img> Display image
alt="Image">
Container for block
<div> <div>Section of page</div>
content
<span style="color:red">Red
<span> Inline container
text</span>
<ul>,
<ol>, Lists Lists items
<li>
<table><tr><td>Data</td></
<table> Table structure
tr></table>
Semantic HTML Tags (HTML5)
Semantic tags describe the meaning of content instead of its appearance.
Tag Purpose
<heade Defines the top section or
r> navigation header
<nav> Defines navigation links
, Tag Purpose
<sectio Defines a section of related
n> content
<article Defines an independent piece of
> content
<aside
Sidebar or related information
>
<footer Defines the bottom part of the
> page
Example:
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="home.html">Home</a> |
<a href="about.html">About</a>
</nav>
<section>
<article>
<h2>HTML Basics</h2>
<p>HTML stands for HyperText Markup Language...</p>
</article>
</section>
<footer>
<p>© 2025 My Blog</p>
</footer>
Table Handling in HTML
Tables are used to organize data in rows and columns on a webpage.
Basic Table Structure
Use of Different HTML tags in web pages. Table Handling: Table layout &
presentation, constructing tables in a web page, developing a web page in a table.
Ordered and unordered lists. Frames: Developing Web pages using frames. Advantages
and disadvantages of frames. Creating forms, Role of Databases in web applications. Use
of at least one graphical and animation tools like Adobe Fireworks, Abode Photoshop, Gif
Animator, Gimp etc.
__________________________________________________________________________________________
________
Use of Different HTML Tags in Web Pages
What is HTML?
HTML (HyperText Markup Language) is the standard language used to
create and design web pages.
Every HTML document has two main parts:
1. Head section → contains metadata and title
2. Body section → contains visible content (text, images, links, tables,
etc.)
Basic Structure of an HTML Page:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page using HTML.</p>
</body>
</html>
Explanation:
<!DOCTYPE html> → declares the document type (HTML5).
<html> → root element of the webpage.
<head> → contains information like title and metadata.
, <title> → defines the page title (appears on the browser tab).
<body> → contains the main visible content of the webpage.
Commonly Used HTML Tags
Tag Purpose Example
<h1> to Headings (h1 =
<h1>Main Title</h1>
<h6> largest, h6 = smallest)
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break <p>Line 1<br>Line 2</p>
<hr> Horizontal line <hr>
<b>, <i>, Bold, italic, underline
<b>Bold Text</b>
<u> text
<a href="page.html">Click
<a> Hyperlink
Here</a>
<img src="photo.jpg"
<img> Display image
alt="Image">
Container for block
<div> <div>Section of page</div>
content
<span style="color:red">Red
<span> Inline container
text</span>
<ul>,
<ol>, Lists Lists items
<li>
<table><tr><td>Data</td></
<table> Table structure
tr></table>
Semantic HTML Tags (HTML5)
Semantic tags describe the meaning of content instead of its appearance.
Tag Purpose
<heade Defines the top section or
r> navigation header
<nav> Defines navigation links
, Tag Purpose
<sectio Defines a section of related
n> content
<article Defines an independent piece of
> content
<aside
Sidebar or related information
>
<footer Defines the bottom part of the
> page
Example:
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="home.html">Home</a> |
<a href="about.html">About</a>
</nav>
<section>
<article>
<h2>HTML Basics</h2>
<p>HTML stands for HyperText Markup Language...</p>
</article>
</section>
<footer>
<p>© 2025 My Blog</p>
</footer>
Table Handling in HTML
Tables are used to organize data in rows and columns on a webpage.
Basic Table Structure
