Slide 41: Origins and Evolution of HTML (optional )

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and
structure web pages. It uses tags to describe elements on a page such as headings,
paragraphs, links, images, and more. HTML does not provide styling or interactivity
(which is handled by CSS and JavaScript), but it serves as the backbone for web
content.

Defining HTML with Meta-Markup Languages

HTML was initially developed as an application of SGML (Standard Generalized

Markup Language). SGML is a meta-markup language that defines rules for creating
other markup languages. HTML uses SGML’s guidelines to structure documents for
the web.

What is SGML?

SGML is an ISO standard (ISO 8879) for defining document markup languages. It
allows for the creation of specific languages like HTML, XML, and others. SGML
allows for complex and flexible document structuring. It ensures that documents can
be shared across different platforms and applications with consistent formatting.

Key Points about HTML and SGML

HTML was created as an application of SGML to represent web documents. SGML

defined the principles, but HTML made them practical for web development. HTML
was initially complex, with SGML rules, but it later evolved into simpler and more
specialized standards to make web development easier.

HTML’s Evolution

HTML4: HTML4 introduced support for modern web features like multimedia (audio,
video) and scripting (JavaScript). It allowed more complex structures but still had
limitations.
XHTML: XHTML was introduced to enforce stricter syntax rules, improving
compatibility with XML and making HTML documents well-formed. It required tags
to be properly nested and closed.
HTML5: The current version of HTML, HTML5, was designed to be more flexible
and inclusive. It includes native support for audio, video, and interactive elements,
ensuring compatibility across devices. HTML5 simplifies the syntax and allows for
rich multimedia integration without needing third-party plugins.

Why HTML Matters

HTML is essential for building web pages as it provides a structured, organized, and
extensible way of representing content on the web. HTML was standardized by
SGML, making it internationally recognized and adaptable to meet the needs of
evolving web technologies.

Slide 45: Basic Syntax of HTML (Important)

HTML Elements

An element is a basic building block in HTML, consisting of a tag and content.

Elements structure a web page and specify what type of content (text, images, videos)
it will display. Each element has two main parts:
Opening Tag: Indicates the start of an element. Example: <p>
Closing Tag: Marks the end of the element. Example: </p>
Content: The actual content between the tags. Example: <p>This is a paragraph</p>

Tag Format

Opening Tag: Marks the beginning of an element and is enclosed in angle brackets.
For example, <p> for a paragraph.

Closing Tag: Indicates the end of the element, also enclosed in angle brackets but
with a forward slash. Example: </p>.

Complete Element: Combines the opening tag, content, and closing tag. The element
forms the full unit of content structure. Example: <p>This is a paragraph.</p>

Empty Tags: These are self-closing tags that do not contain content between the
opening and closing tags. Instead, they close immediately after the element name.
Example:

<img src="image.jpg" alt="An image" /> - Defines an image element.

<br /> - Represents a line break.

Nested Elements

Tags can be nested within one another. However, it’s important to ensure the tags are
properly ordered. For example:
<div>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</div>

Nested elements allow you to structure complex content, with each element having a
specific function.
Slide 46: HTML Elements, Attributes, and Comments (optional )

HTML Elements

An element in HTML consists of an opening tag, optional content, and a closing tag.
This combination allows for a defined structure in an HTML document.
Example: <p>This is Web Technology</p>
<p> is the opening tag.
This is Web Technology is the content.
</p> is the closing tag.

Attributes

Attributes provide additional information or modify the behavior of elements. They

are placed within the opening tag and usually follow the format: name="value".
Example: <html lang="en"> – Here, lang is the attribute name, and "en" is the value
that defines the language of the document as English.
Common attributes:
src for image sources: <img src="image.jpg" alt="description">
href for links: <a href="http://example.com">Click here</a>

HTML Comments

Comments are used to add notes, explanations, or reminders within the code. These
comments are not displayed on the page but help developers understand the code.
Syntax for comments: <!-- comment -->
Example:
<!-- This is a comment -->

Multi-line comments can span several lines. Example:

<!--
This is a multi-line comment
Explaining the page structure
-->

Slide 48: Standard HTML Document Structure (Important)

1. DOCTYPE Declaration

The DOCTYPE declaration informs the browser about the version of HTML that the
document follows.
For HTML5, this is simply: <!DOCTYPE html>. It tells the browser that the
document follows HTML5 rules, which simplifies rendering.

2. Document-Type Definition (DTD)

DTDs define the allowed structure of an HTML document, including which tags and
attributes are allowed. In early HTML versions, a full DTD was necessary. However,
HTML5 uses an implicit DTD, making the declaration simpler.
Slide 49: Standard Tags in an HTML Document (Important)

1. Required Tags

Every HTML document must include these four tags:

<html>: Marks the root element of the document.
<head>: Contains meta-information about the document (such as the title and links to
external files like CSS and JavaScript).
<title>: Specifies the document's title, shown on the browser tab.
<body>: Contains the visible content of the webpage.

2. The <html> Tag

The <html> tag encompasses all other HTML tags in the document. It is the root
element.
Example: <html lang="en"> specifies that the document is in English.

3. Basic Document Structure

A simple HTML document follows this structure:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of the page.</p>
</body>
</html>

Slide 50: Structure of an HTML Document: Head and Body (Important)

1. Two Main Parts

An HTML document is divided into:
Head: Contains metadata such as the title, character encoding, and links to external
files (CSS, JavaScript).
Body: Contains the content that is visible to the user on the webpage.

2. The <head> Element

The <head> element includes meta-information like the title, character set, and
external files (stylesheets, scripts).
Common elements inside <head>:
<title>: Specifies the title displayed in the browser tab.
<meta>: Provides metadata, such as the character encoding used.
Example: <meta charset="UTF-8">
Example: <meta name="description" content="A brief description of the webpage.">
3. The <body> Element

The <body> tag contains all the content that users see on the web page, such as
headings, paragraphs, images, and links.
Example:
<body>
<h1>Welcome to My Page</h1>
<p>This is where the visible content goes.</p>
</body>

Slide 52: Basic Text Markup in HTML (Important)

1. Formatting Text Content with Tags

HTML uses various tags to structure and format text. Tags such as <p>, <h1>, <h2>,
<b>, and <i> format text in different ways.

2. Paragraphs (<p> Tag)

The <p> tag is used to define paragraphs in HTML. Text within the <p> tag is
displayed with space above and below to separate it from other elements.
Example:
<p>This is a paragraph.</p>

Browsers automatically add spacing before and after paragraphs to ensure readability.

3. Tips for Using Paragraphs

Use
the <p> tag to create distinct blocks of text for readability. Do not overuse paragraphs;
ensure that each <p> tag represents a separate idea or section.

Slide 53: Line Breaks in HTML (Important)

1. Purpose of Line Breaks
The <br /> tag is used to insert a line break within a block of text. It allows for text to
be continued on the next line without adding additional space, as the <p> tag would.
2. The <br /> Tag
Function: The <br /> tag creates a line break where inserted but does not add any
extra spacing or margins like a new paragraph does. It is commonly used for
formatting text where multiple lines are needed, but without the visual separation that
a paragraph creates.
Syntax:
<br />
The <br /> tag is self-closing, meaning it doesn’t require a separate closing tag.
Example Usage:
<p>
Hello, my name is Sujayeendra Rao, <br />
I am working at NIE, Mysuru.
</p>
Output:
Hello, my name is Sujayeendra Rao,
I am working at NIE, Mysuru.
Key Points:
The <br /> tag should be used sparingly, as excessive line breaks can clutter the text.
Use <br /> when you need a line break within a paragraph or block of text. For
separate sections, consider using <p> instead.

Slide 54: Headings in HTML (Important)

1. Purpose of Headings
Headings help define the structure of a webpage by organizing content hierarchically.
They are essential for accessibility, readability, and SEO (search engine optimization).
2. Levels of Headings
HTML provides six levels of headings, from <h1> to <h6>, which are used to signify
the importance of the content they enclose.
<h1>: Most important heading (typically used for the main title of the page).
<h2>: Second most important heading (used for section titles).
<h3>: Used for subsections.
<h4>: For further subsections.
<h5>: Used for smaller subsections.
<h6>: The least important heading, usually for minor headings.
Syntax:
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
Default Styling:
Font Size: The size of the heading decreases as the level number increases.
Font Style: Headings are by default bold to highlight their importance.
Example Output:
Main Title (h1)
Section Title (h2)
Subsection Title (h3)
Sub-subsection Title (h4)
Minor Heading (h5)
Smallest Heading (h6)
Key Points:
Use <h1> for the main title and <h2> to <h6> for subheadings.
Avoid skipping heading levels as it negatively affects readability and SEO. For
example, jumping from <h1> directly to <h4> can confuse search engines and screen
readers.
Properly used headings improve content hierarchy and contribute to better SEO
practices.

Slide 55: Block Quotations in HTML (Important)

1. Purpose of <blockquote>
The <blockquote> tag is used to display a block of text that is a quotation from
another source. It visually distinguishes the quoted text by applying indentation.
2. Customizing Block Quotations
While the exact styling of the <blockquote> element is determined by the browser,
most browsers apply indentation to the text inside the <blockquote> tag to set it apart
from the rest of the content.
Example Usage:
<blockquote>
This is a block quote. The content inside this tag is typically indented to distinguish
it from the rest of the text.
</blockquote>

Slide 56: Font Styles and Sizes in HTML (Important)

1. Font Style Tags

Boldface:
The <b> tag makes text bold.
<b>This is bold text.</b>
Italics:
The <i> tag italicizes text.
<i>This is italic text.</i>

2. Font Size Tags

Larger:
The <big> tag makes text larger than usual.
<big>This text is bigger than usual.</big>
Smaller:
The <small> tag makes text smaller than usual.
<small>This text is smaller than usual.</small>

3. Special Text Formatting

Monospace:
The <tt> tag displays text in a monospace (fixed-width) font.
<tt>This is monospace text.</tt>
Subscript:
The <sub> tag displays text as subscript.
H₂O
Superscript:
The <sup> tag displays text as superscript.
E = mc²
Summary of Tags:
Tag Effect
<b> Boldface text
<i> Italic text
<big> Larger text
<small> Smaller text
<tt> Monospace text
<sub> Subscript text
<sup> Superscript text
These tags help in modifying the appearance of text, making it more visually
appealing and easier to read.

Slide 58: The <hr> Tag in HTML (Important)

Purpose:
The <hr> tag is used to create a horizontal line, visually separating sections of content
on a webpage. It provides a thematic break and improves content organization.
Key Points:
The <hr> tag is self-closing and does not require a closing tag.
It spans the width of its container by default, though its appearance (color, size, etc.)
can be customized with CSS.
The <hr> tag helps create clear visual separations between different content sections,
making the page easier to navigate.

Slide 59: Definition Lists in HTML (Important)

Components of a Definition List

<dl> (Definition List):
A container that groups related terms and their definitions.
<dt> (Definition Term):
Represents the term being defined. Usually displayed as bold or left-aligned.
<dd> (Definition Description):
Contains the definition or explanation for the term. Typically indented under the
corresponding term.
Example:
<dl>
<dt>HTML</dt>
<dd>A standard language for creating web pages.</dd>

<dt>CSS</dt>
<dd>A language used to describe the style of a document written in HTML.</dd>

<dt>JavaScript</dt>
<dd>A programming language for adding interactivity to websites.</dd>
</dl>
Output:
"HTML", "CSS", and "JavaScript" will appear as terms, with their corresponding
descriptions indented below them.
Slide 75: Colspan and Rowspan Attributes in HTML: A Theoretical Overview
(Important)

Colspan Attribute:

Purpose: The colspan attribute allows you to combine multiple columns into a single
cell. This is useful when you want to have a single cell span across several columns in
a table.
Usage: It is defined within a <td> or <th> element in an HTML table, where the value
of colspan indicates how many columns the cell should span.
Example:
<table border="1">
<tr>
<td colspan="2">This cell spans 2 columns</td>
<td>Normal cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>

Effect: The first cell in the first row will span across the first two columns, merging
them into a single cell.

Rowspan Attribute:

Purpose: The rowspan attribute allows a cell to span multiple rows. This is useful
when you want to make a cell that spans more than one row, often for headers or
labels that group data.
Usage: It is also applied to a <td> or <th> element, where the value of rowspan
specifies how many rows the cell will span.
Example:
<table border="1">
<tr>
<td rowspan="2">This cell spans 2 rows</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
</table>

Effect: The first cell in the first column will span two rows.

Benefits of Colspan and Rowspan:

These attributes allow for more organized and complex table layouts. They are
especially useful when displaying hierarchical or categorized data, such as grouping
multiple categories under a common heading or combining similar content under a
single label.
Example in Use: For a financial table, you might use colspan to combine different
columns under a "Total" column or rowspan for a header that applies to several rows
of data.

Slide 76: Cellpadding and Cellspacing Attributes in HTML Tables (optional )

Cellpadding Attribute:

Purpose: The cellpadding attribute defines the space between the cell content (text,
images, etc.) and the cell's border. It is essentially the padding around the content
inside the cell.
Effect: It helps to make the content inside the cells look less cramped and gives it
some breathing space. This padding creates visual distinction and can improve
readability.
Example:
<table border="1" cellpadding="10">
<tr>
<td>Cell with padding</td>
<td>Cell with padding</td>
</tr>
</table>

Effect: Each cell will have 10px padding, creating a gap between the content and the
border of the cell.

Cellspacing Attribute:

Purpose: The cellspacing attribute defines the space between adjacent cells. This
attribute affects the external distance between the edges of adjacent cells.
Effect: It helps create visual separation between individual cells and improves table
aesthetics by preventing the cells from appearing too close together.
Example:
<table border="1" cellspacing="5">
<tr>
<td>Cell with spacing</td>
<td>Cell with spacing</td>
</tr>
</table>

Effect: This adds 5px of space between the cells in the table, making the table appear
less cluttered.

Differences Between Cellpadding and Cellspacing:

Cellpadding: Adds space inside each cell (between the content and the border).
Cellspacing: Adds space between the cells (the gap separating the cells).
Example Combination:
<table border="1" cellpadding="10" cellspacing="5">
 <tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

In this example, cells will have 10px of space inside them (padding) and 5px of space
between adjacent cells (spacing).

Slide 77: HTML Forms: A Theoretical Overview (Important)

Purpose of Forms:
User Interaction: Forms provide the primary interface for users to input data. Forms
facilitate communication between the user and the web server.
Examples of Forms:
Login forms: Used to authenticate users.
Sign-up forms: Collects user data to create a new account.
Survey forms: Collects responses from users.
Contact forms: Used to gather information from users (e.g., name, email, message).

Data Processing: Once a user submits the form, the data is sent to the server, where it
is processed (e.g., stored in a database, used to authenticate a user, or for any other
server-side logic).

Key Uses of Forms:

Forms enable dynamic web pages that respond to user input, such as updating a
profile, submitting feedback, or processing payments.

Slides 78-80: Form Elements and Attributes (Important)

Element:
The <form> tag is used to define the form and group all form-related elements
together.
Key Attributes:
action: Specifies where the form data will be sent. This could be a URL, such as
/submit_form.
method: Defines the HTTP method used to send data. Common methods are:
GET: Sends data as part of the URL (e.g., ?name=value). Suitable for non-sensitive
data.
POST: Sends data as part of the HTTP request body. This is preferred for sensitive or
large amounts of data.
Example:
<form action="/submit_form" method="POST">
<!-- form elements here -->
</form>

Input Elements:
: Defines various input types for user input (e.g., text, email, password).
Example for text:
<input type="text" name="username">

Example for password:

<input type="password" name="password">

Example for email:

<input type="email" name="email">
: A multi-line input field for larger text areas, like comments or messages.
<textarea name="message" rows="4" cols="50"></textarea>

: Creates a dropdown list for user selection. Options are defined within <option> tags.

<select name="country">
<option value="USA">USA</option>
<option value="India">India</option>
</select>

Slide 81: Size and Maxlength Attributes in HTML Forms (optional )

size Attribute:

Purpose: Specifies the visible width of an input text box in terms of the number of
characters. This controls how wide the box appears on the page.
Effect: The size attribute does not limit the actual number of characters that can be
entered; it only affects the box's width.
Example:
<input type="text" name="username" size="30">

The box will show 30 characters in width.

maxlength Attribute:

Purpose: Specifies the maximum number of characters a user can enter into a text
field. This limits the input length.
Example:
<input type="text" name="username" maxlength="25">

The user can only enter a maximum of 25 characters, regardless of the size of the
input field.

Combining size and maxlength:

By combining size and maxlength, you control both the visible width of the input
field and the maximum number of characters the user can input.
Example:
<input type="text" name="username" size="30" maxlength="25">
The visible box will display 30 characters, but the user will be limited to entering a
maximum of 25 characters.

Slide 83: HTML Input Type: Radio Buttons (Important)

Radio Buttons:

Concept: Radio buttons are used when you want to present users with a set of
mutually exclusive options. The essential characteristic of radio buttons is that only
one button in a group can be selected at any given time. This exclusivity ensures that
the user’s choice is clear and unambiguous.

Behavior:

Single Selection: The behavior of radio buttons is governed by the name attribute. All
radio buttons with the same name attribute belong to the same group. As a result,
when a user selects one option, any previously selected option is automatically
deselected.

Grouping by Name:

Radio buttons are grouped based on the name attribute, ensuring that all radio buttons
in a group belong together and that only one option can be chosen within that group.
This is key to preventing confusion when users are expected to select only one option
out of several choices.

Default Selection:

The checked attribute enables a default option to be pre-selected when the form loads.
This is useful in scenarios where the system should suggest a default choice to the
user, reducing the number of decisions they need to make.

Use Cases:

Radio buttons are ideal for scenarios such as surveys, forms that collect demographic
information (e.g., gender, age group), or where users need to choose only one option
from a predefined list.

Slide 84: Checkboxes in HTML Forms (Important)

Checkboxes:

Concept: Checkboxes allow users to select one or more options from a predefined list.
They are independent of each other, meaning that selecting one checkbox does not
affect the state of others.

Behavior:
Unlike radio buttons, checkboxes are not mutually exclusive. Users can check
multiple boxes simultaneously, which makes them ideal for situations where multiple
selections are possible.

Flexibility:

Checkboxes offer great flexibility in terms of the number of options users can choose.
They are widely used when users are asked to select preferences, interests, or items
from a list, as they provide a clear representation of multiple choices.

Use Cases:

They are typically used in situations such as selecting subscription options, interests
in a survey, or choosing multiple items from a list (e.g., when shopping online).

Default Behavior and Attributes:

By default, checkboxes are unchecked. However, the checked attribute can be used to
pre-select them when the form loads. This makes it easier to suggest preferences to
the user or pre-fill a form based on previously collected data.

Slide 85: The <select> Element in HTML (Important)

The <select> Element:

Concept: The <select> element is used to create a drop-down list of options, enabling
users to choose one or more items from a list. It is useful in forms where the number
of options is large, as it provides a compact and user-friendly way to make a selection
without taking up too much screen space.

Behavior:

The <select> element is typically paired with <option> elements, each representing an
individual choice. The name attribute of the <select> element determines the value
that will be sent to the server when the form is submitted.

Single vs. Multiple Selections:

The <select> element can allow for single or multiple selections. By default, only one
option can be selected, but if the multiple attribute is present, the user can select more
than one option. This behavior aligns with the user’s needs based on the situation,
such as selecting multiple countries, preferences, or interests.

Attributes:

multiple: This attribute enables the selection of multiple options. Users can hold down
Ctrl (or Cmd on macOS) or Shift to select multiple items, making this feature highly
useful in situations where users need to make multiple selections.
size: This attribute defines how many options should be visible at once without
scrolling. For longer lists, size can be adjusted to show more options at once.
Use Cases:

Drop-down lists are widely used for selecting items from a predefined set where the
number of options is not overly large, such as selecting a state, country, or even
categories like genre or product type.

Slide 87: The <textarea> Element in HTML (optional )

The <textarea> Element:

Concept: The <textarea> element is designed for multi-line text input, making it ideal
for situations where users are expected to input larger amounts of text, such as
comments, feedback, or descriptions.

Behavior:

Unlike a simple text input field (<input type="text">), which is single-line, a

<textarea> allows for an unlimited number of lines to be entered, with the form
automatically adding scrollbars if the entered text exceeds the visible area.

Attributes:

rows and cols: These attributes control the visible dimensions of the text area (number
of visible lines and the width in characters). While they define the visual area, the
actual content within the <textarea> is not constrained by these dimensions; instead,
scrolling appears when necessary.
maxlength: This attribute is useful for limiting the number of characters users can
enter in the text area, ensuring that submissions adhere to predefined content length
constraints.

Use Cases:

The <textarea> is commonly used in scenarios where users need to enter long text,
such as writing comments on a blog post, filling out a user feedback form, or writing a
message in an online contact form.

Slide 88: Action Buttons in HTML Forms (Important)

Submit Button (<input type="submit">):

Concept: The submit button is one of the most fundamental components of HTML
forms. Its purpose is to send the data collected in the form to the server for processing.
Upon clicking, the browser gathers all form data (e.g., values from text inputs,
checkboxes, radio buttons) and transmits it to the server specified by the action
attribute of the form.

Behavior:
The form submission is controlled by the method attribute, which specifies how the
data should be sent (either using GET or POST).
When a submit button is pressed, the form is either validated (if client-side validation
is in place) or submitted directly to the server.

Reset Button (<input type="reset">):

Concept: The reset button allows the user to clear the form. This restores all form
elements to their default state, erasing any entered data and setting default selections
(e.g., radio buttons, checkboxes).

Behavior:

Unlike the submit button, the reset button does not interact with the server and only
affects the state of the form on the client side.
It is particularly useful for forms where users may want to clear their entries and start
over without reloading the page.

Use Cases:
The submit button is crucial for finalizing form submissions, such as when a user fills
out a contact form, survey, or order form.
The reset button can be used in forms where the user might want to clear entered data
and try again, though it's not always recommended in forms that require careful data
entry.