WT unit 1 II BCA SEP
HTML Course | Structure of an HTML Document
HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of
all web pages. It provides the basic structure and content layout. For beginners in web
development, learning HTML is the essential first step.
What is an HTML Document?
HTML is a markup language used for structuring content on the web. It consists of elements
(tags) that describe the content and structure of a webpage. These elements
are enclosed in angle brackets (< >) and come in pairs, such as opening and closing
tags. HTML helps browsers interpret and display content like text, images, links, videos, and
more.
Structure of an HTML Document
An HTML document is essentially a series of nested elements that work together to form a
complete webpage. The document follows a standard structure to ensure consistency and
compatibility across different browsers.
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
Edurite College, Shivamogga 577204 Page 1
WT unit 1 II BCA SEP
1. <!DOCTYPE html>: Declaring the Document Type
The <!DOCTYPE html> declaration is used to specify the version of HTML. In this case, it
indicates that the document is written in HTML5, which is the latest version of HTML.
2. <html>: The Root Element
The <html> element is the root element of the HTML document. Everything inside this element
is considered part of the HTML document.
3. <head>:Metadata of the Document
The <head> section contains metadata about the document that isn't displayed on the webpage.
This section includes important elements like:
<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8
supports most characters from all languages).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls the
layout on mobile devices by setting the viewport width and scaling.
4. <body>:Visible Content of the Webpage
The <body> tag contains the actual content of the webpage that will be visible to users, such as
text, images, and links.
Tags and Elements for Structuring an HTML Document
HTML tags are structural components enclosed in angle brackets. They are typically opened and
closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support
attributes like width, height, and controls for defining properties or storing metadata.
There are generally two types of tags in HTML
1. Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >)
tags.
2. Empty Tags: These tags are self-closing and do not require a closing tag.”
Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it.
Here's a brief overview of common text formatting tags in HTML:
1. <b>: Bold text
Example: <b>Hello</b> → <b>Hello</b>
2. <i>: Italic text
Example: <i>Hello</i> → <i>Hello</i>
3. <u>: Underlined text (not supported in HTML5, use CSS instead)
Example: <u>Hello</u> → <u>Hello</u>
4. <em>: Emphasized text (typically italic)
Example: <em>Hello</em> → <em>Hello</em>
5. <strong>: Strong importance (typically bold)
Example: <strong>Hello</strong> → <strong>Hello</strong>
6. <p>: Paragraph
Example: <p>Hello World!</p> →
Hello World! Here's a brief overview of common text formatting tags in HTML:
1. <b>: Bold text
Example: <b>Hello</b> → <b>Hello</b>
Edurite College, Shivamogga 577204 Page 2
WT unit 1 II BCA SEP
2. <i>: Italic text
Example: <i>Hello</i> → <i>Hello</i>
3. <u>: Underlined text (not supported in HTML5, use CSS instead)
Example: <u>Hello</u> → <u>Hello</u>
4. <em>: Emphasized text (typically italic)
Example: <em>Hello</em> → <em>Hello</em>
5. <strong>: Strong importance (typically bold)
Example: <strong>Hello</strong> → <strong>Hello</strong>
6. <p>: Paragraph
Example: <p>Hello World!</p> →
Hello World!
Headings in HTML
HTML provides six levels of headings, defined by the tags <h1> to <h6>.
- <h1>: Most important heading (largest font size)
- <h2>: Subheading
- <h3>: Sub-subheading
- <h4>: Smaller subheading
- <h5>: Even smaller subheading
- <h6>: Least important heading (smallest font size)
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Smaller subheading</h4>
<h5>Even smaller subheading</h5>
<h6>Least important heading</h6>
HTML Subscript and Superscript Tags
In HTML, the <sub> tag is used for subscript, making text appear slightly below the normal
line, while the <sup> tag is used for superscript, positioning text slightly above the normal line
HTML Subscript
The <sub> tag displays text slightly below the regular text baseline. It is commonly used in
Chemical formulas: H2O, CO2
Mathematical notations: x1, y2
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>The mathematical notation for x squared is x<sub>2</sub>.</p>
Edurite College, Shivamogga 577204 Page 3
WT unit 1 II BCA SEP
HTML Superscript
The <sup> tag text is slightly above the regular text baseline. It is commonly used in
Exponents in mathematics: x2
Chemical isotopes: 14C
Ordinals: 1st, 2nd
<p>The formula for squaring a number is x<sup>2</sup>.</p>
<p>Euler's constant is approximately 2.718<sup>e</sup>.</p>
In this example
<sup>2</sup> makes the "2" appear as a superscript in the formula x².
<sup>e</sup> places the "e" in superscript for the approximation of Euler's constant
2.718^e.
Meta Tag
A meta tag is an HTML element that provides metadata about a webpage, like its title,
description, or keywords.
Here is a breakdown of the four core tags you mentioned:
1. <title>
The <title> tag defines the name of the webpage. While it doesn’t appear on the actual page
body, it is one of the most important elements for SEO and user experience.
Where it appears: On the browser tab and as the clickable headline in search engine
results.
Purpose: It tells the user and the search engine exactly what the page is about.
Edurite College, Shivamogga 577204 Page 4
WT unit 1 II BCA SEP
2. <link>
The <link> tag is used to establish a relationship between the current document and an
external resource.
Common Use: Its most frequent job is linking an external CSS stylesheet to the HTML
file (e.g., <link rel="stylesheet" href="[Link]">).
Other Uses: It is also used to add "favicons" (the small icons on browser tabs).
3. <style>
The <style> tag is used to define Internal CSS directly within the HTML document.
Purpose: Instead of pointing to an external file (like the <link> tag does), you write your
CSS rules right between the opening <style> and closing </style> tags.
Best Practice: This is usually used for small projects or single-page tweaks; for larger
sites, external files are preferred for better organization.
4. <script>
The <script> tag is used to embed or reference executable code, typically JavaScript.
How it works: It can either contain the code directly inside the tag or point to an external
file using the src attribute (e.g., <script src="[Link]"></script>).
Purpose: It adds interactivity to the page, such as animations, form validations, or
dynamic content updates.
Visual Hierarchy
Tag Primary Role Location
<title> Names the page Browser Tab / SEO
<link> Connects external files External CSS / Icons
<style> Defines internal design Inside <head>
<script> Adds interactivity Inside <head> or at end of <body>
Media Tags in HTML
HTML provides several tags to embed media content:
1. <img>: Embeds an image.
Example: <img src="[Link]" alt="An image">
2. <video>: Embeds a video.
Example: <video src="video.mp4" controls></video>
Edurite College, Shivamogga 577204 Page 5
WT unit 1 II BCA SEP
3. <audio>: Embeds an audio file.
Example: <audio src="audio.mp3" controls></audio>
4. <iframe>: Embeds another webpage or media content.
Example: <iframe src="[Link]
The <img> tag is used to embed images into a webpage. It is a void element, meaning it does
not have a closing tag; it simply contains attributes that tell the browser what to display.
🛠️ Basic Syntax and Example
Here is a standard example of an image tag:
HTML
<img src="[Link]
alt="A snow-capped mountain at sunset"
width="600"
height="400">
🛠️ Breakdown of Attributes
1. src (Source): * What it is: The path to the image file.
o Types: Can be a URL (like the example above) or a local path (e.g.,
src="images/[Link]").
2. alt (Alternative Text):
o Critical for Accessibility: If an image doesn't load or if a user is using a screen
reader, this text describes the image.
o Example: If the image is a "Login Button," the alt text should say "Login
Button."
3. width and height:
o Defines the display size in pixels.
o Pro Tip: Always include these to help the browser "reserve" space for the image
while the page loads, which prevents the content from jumping around.
The Anchor Tag (<a>)
1. Fundamental Definition
The <a> tag is a container element. It wraps around text or other HTML elements (like images)
to make them clickable. It requires both an opening (<a>) and a closing (</a>) tag.
2. The Anatomy of an Anchor Tag
To function, an anchor tag must have the href attribute.
href (Hypertext Reference): Specifies the destination URL or file path.
Link Text: The visible, clickable part of the link (usually underlined and blue by
default).
Edurite College, Shivamogga 577204 Page 6
WT unit 1 II BCA SEP
3. Key Attributes & Values
Attribute Description Example
href The destination address. href="[Link]
List Tags
In HTML, lists are used to group related items. There isn’t just one “list tag” — HTML has
three main types of lists, each with its own tags.
1. Ordered List (<ol>)
Used when order matters (steps, rankings, instructions).
Tags:
<ol> → wraps the whole list
<li> → list item
Example:
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Go to work</li>
</ol>
Output:
1. Wake up
2. Brush teeth
3. Go to work
2. Unordered List (<ul>)
Used when order doesn’t matter (menus, features, groceries).
Tags:
<ul> → wraps the list
<li> → list item
Edurite College, Shivamogga 577204 Page 7
WT unit 1 II BCA SEP
Example:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Output:
• Apples
• Bananas
• Oranges
3. Description List (<dl>)
Used for terms and definitions (like a dictionary or FAQ).
Tags:
<dl> → description list
<dt> → term
<dd> → description
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Styles web pages</dd>
</dl>
Key Points to Remember
<li> must be inside <ul> or <ol>
Lists can be nested (a list inside another list)
Styling (bullets, numbers, spacing) is usually controlled with CSS
HTML Table
A table in HTML is defined using the <table> tag. It's used to display data in a structured format
with rows and columns.
HTML tables help organize data into rows and columns, making information easy to read and
compare. They are useful for displaying schedules, price lists, product details, and more.
Edurite College, Shivamogga 577204 Page 8
WT unit 1 II BCA SEP
Can include text, images, links, and other elements.
Built using tags like <table>, <tr>, <th>, and <td>.
Allow clear presentation of data for comparison.
Can be styled with CSS for better design and readability.
Basic Structure:
<table>
<tr> <!-- table row -->
<th>Header 1</th> <!-- table header -->
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td> <!-- table data -->
<td>Cell 2</td>
</tr>
</table>
Tags:
- <table>: Defines the table.
- <tr>: Defines a table row.
- <th>: Defines a table header cell.
- <td>: Defines a table data cell.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
HTML Forms
HTML forms, defined using the <form> tag, are essential for collecting user input on web pages.
They include interactive controls like text fields, emails, passwords, checkboxes, radios, and
buttons.
Edurite College, Shivamogga 577204 Page 9
WT unit 1 II BCA SEP
Widely used, over 85% of websites rely on forms to gather user data.
They play a crucial role in modern web development by enabling user interaction and data
submission.
A form in HTML is used to collect user input. It's defined using the <form> tag.
Basic Structure:
<form action="/submit" method="post">
<!-- form elements -->
</form>
Attributes:
- action: Specifies where to send the form data.
- method: Specifies the HTTP method (get or post).
Common Form Elements:
1. <input>: Used for text, password, checkbox, radio, etc.
Example: <input type="text" name="username">
2. <textarea>: Used for multi-line text input.
Example: <textarea name="description"></textarea>
3. <select>: Used for dropdown menus.
Example: <select name="color"><option>Red</option></select>
4. <button>: Used for submit, reset, or button actions.
Example: <button type="submit">Submit</button>
Example Form:
<form action="/submit" method="post">
<label>Username:</label>
<input type="text" name="username"><br>
<label>Password:</label>
<input type="password" name="password"><br>
<button type="submit">Login</button>
</form>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
Edurite College, Shivamogga 577204 Page 10
WT unit 1 II BCA SEP
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
The code has a basic HTML structure with a title "HTML Forms".
The <h2> tag displays "HTML Forms" as the main heading on the page.
The <form> tag defines a form for user input.
A text input field for the username with a label.
A password input field and a submit button to send the form data.
<input> Tag
The <input> tag is used to create form input fields.
Types of Input Fields:
1. Text: <input type="text"> - single-line text input
Example: <input type="text" name="username">
2. Number: <input type="number"> - numeric input
Example: <input type="number" name="age">
3. Checkbox: <input type="checkbox"> - multiple selections
Example: <input type="checkbox" name="hobbies" value="reading"> Reading
4. Radio Button: <input type="radio"> - single selection
Example:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Edurite College, Shivamogga 577204 Page 11
WT unit 1 II BCA SEP
Common Attributes:
- name: specifies the input field name
- value: specifies the input field value
- placeholder: adds a hint to the input field
- required: makes the input field mandatory
<button>: Used to create a clickable button.
Example: <button type="submit">Submit</button>
<select>: Used to create a drop-down list.
Example: <select name="color">...</select>
<option>: Used to define an option in a drop-down list.
Example: <option value="red">Red</option>
<label>: Used to define a label for a form element.
Example: <label for="name">Name:</label>
Here's the complete HTML program:
<!DOCTYPE html>
<html>
<head>
<title>Form Elements Example</title>
</head>
<body>
<h2>Form Elements Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="swimming"> Swimming<br><br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label for="color">Favorite Color:</label>
<select id="color" name="color">
Edurite College, Shivamogga 577204 Page 12
WT unit 1 II BCA SEP
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
HTML Attributes
HTML attributes provide additional information about an HTML element. They're used to
modify or customize the behavior of an element.
Types of Attributes:
1. Global Attributes: Available for all HTML elements (e.g., id, class, style, title).
2. Element-specific Attributes: Available for specific HTML elements (e.g., src for <img>, href
for <a>).
Common Attributes:
1. id: Unique identifier for an element.
Edurite College, Shivamogga 577204 Page 13
WT unit 1 II BCA SEP
Example: <div id="header">...</div>
2. class: Class name for an element (used for styling and JavaScript).
Example: <div class="container">...</div>
3. style: Inline styles for an element.
Example: <div style="color: red;">...</div>
4. title: Tooltip text for an element.
Example: <div title="This is a tooltip">...</div>
5. src: Source URL for an element (e.g., images, scripts).
Example: <img src="[Link]">
6. href: Hyperlink URL for an element (e.g., links).
Example: <a href="[Link]
Example:
<a href="[Link] title="Visit [Link]" target="_blank">Example
Website</a>
In this example, href, title, and target are attributes of the <a> element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h2>HTML Attributes Example</h2>
<!-- id attribute -->
<div id="header">This is a header</div>
Edurite College, Shivamogga 577204 Page 14
WT unit 1 II BCA SEP
<!-- class attribute -->
<p class="highlight">This text is highlighted</p>
<!-- style attribute -->
<p style="color: red;">This text is red</p>
<!-- title attribute -->
<p title="This is a tooltip">Hover over me</p>
<!-- src attribute -->
<img src="[Link] alt="Random Image">
<!-- href attribute -->
<a href="[Link] target="_blank">Visit [Link]</a>
</body>
</html>
Chapter: HTTP Methods and Status Codes
1. Common HTTP Methods
Methods tell the server what action to perform on a specific resource.
GET: Used to request data from a specified resource. It is the most common method
(e.g., clicking a link). Data is sent in the URL, making it visible to everyone.
POST: Used to send data to a server to create or update a resource. Data is hidden in the
body of the request, making it more secure for passwords or personal info.
Simple Program: Demonstrating GET and POST
In HTML, the method attribute of the <form> tag determines which HTTP method is used when
the user clicks the submit button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTTP Methods Example</title>
</head>
<body>
<h2>1. The GET Method (Search)</h2>
<p>Data entered here will appear in the URL address bar.</p>
<form action="/search" method="GET">
<label>Search Query:</label>
<input type="text" name="query">
<button type="submit">Search (GET)</button>
</form>
Edurite College, Shivamogga 577204 Page 15
WT unit 1 II BCA SEP
<hr>
<h2>2. The POST Method (Login)</h2>
<p>Data entered here is sent privately in the request body.</p>
<form action="/login" method="POST">
<label>Username:</label>
<input type="text" name="user"><br><br>
<label>Password:</label>
<input type="password" name="pass"><br><br>
<button type="submit">Login (POST)</button>
</form>
</body>
</html>
Key Differences Summary
Important Note: While GET is faster and can be bookmarked, never use it for sensitive data like
passwords because the information stays in the browser history and server logs.
GET: Parameters are in the URL (e.g., [Link]/search?q=apple).
POST: Parameters are in the HTTP body, invisible to the user.
HTTP Status Codes in HTML
Edurite College, Shivamogga 577204 Page 16
WT unit 1 II BCA SEP
HTTP status codes are three-digit numbers that indicate the result of a request made to a server.
They're used in HTML to handle different scenarios.
Common Status Codes:
1. 200 OK: Request successful.
2. 404 Not Found: Page not found.
3. 500 Internal Server Error: Server error.
Status Code Categories:
1. 1xx (Informational): Provisional response.
2. 2xx (Success): Request successful.
3. 3xx (Redirection): Redirects to another URL.
4. 4xx (Client Error): Client-side error.
5. 5xx (Server Error): Server-side error.
Example Use Case:
<!-- Display a custom 404 page -->
<meta http-equiv="refresh" content="0; url=/[Link]">
Edurite College, Shivamogga 577204 Page 17
WT unit 1 II BCA SEP
Edurite College, Shivamogga 577204 Page 18