HTML
1. What is Web Technology?
Web technology refers to the tools, languages, and protocols used to develop and manage websites
and web applications. It covers everything from front-end (what users see) to back-end (server-side
logic) and communication protocols (how data is transferred).
Key Components of Web Technology:
1. Client-Side Technologies – HTML, CSS, JavaScript.
2. Server-Side Technologies – PHP, Python, [Link], Java.
3. Database Technologies – MySQL, MongoDB, PostgreSQL.
4. Web Protocols – HTTP, HTTPS, FTP, SMTP.
5. Web Browsers – Chrome, Firefox, Edge, Safari.
6. Web Servers – Apache, Nginx, IIS.
How the Web Works (Request–Response Cycle):
1. User types a URL.
2. Browser sends HTTP/HTTPS request to server.
3. Server processes request, fetches from database, sends HTML/CSS/JS.
4. Browser renders the page.
Website vs Web Application:
- Website: Static or informational.
- Web Application: Interactive and dynamic.
Introduction to HTML:
HTML (HyperText Markup Language) structures the content of a web page using tags.
Example HTML Document Structure:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Sample Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to my first HTML page.</p>
</body>
</html>
2. HTML Text formatting and links :-
In this chapter, we will explore HTML text formatting and hyperlinks in depth. Formatting tags allow us
to style and emphasize text, while hyperlinks connect our page to other resources, pages, or sections.
1. Semantic vs Non-Semantic Formatting:
- Semantic tags describe the meaning of the content in addition to its style.
Example: <strong> means important text and is recognized by screen readers.
Example: <em> means emphasized text and may be stressed by assistive technologies.
- Non-semantic tags only affect appearance without conveying meaning.
Example: <b> makes text bold, <i> makes it italic.
Output
Tag Meaning Example
<b> Bold (non-semantic) <b>Note</b> Note
<strong> Important (semantic) <strong>Warning</strong> Warning
<i> Italic (non-semantic) <i>Idea</i> Idea
<em> Emphasis (semantic) <em>Key Point</em> Key Point
<mark> Highlight <mark>Important</mark> Highlighted text
<sub> Subscript H<sub>2</sub>O H₂O
<sup> Superscript x<sup>2</sup> x²
3. Introduction to Hyperlinks:
Hyperlinks, created with the <a> tag, allow navigation between documents or resources.
Example:
<a href='[Link] Example</a>
Attributes:
- href: Specifies the target URL or path.
- target: Controls where to open the link.
- title: Displays tooltip text.
- mailto: Opens email client.
- tel: Opens dialer on mobile.
4. Types of Links:
- Absolute Link: Full URL to an external site.
- Relative Link: Path relative to current document.
- Email Link: [Link]
- Telephone Link: [Link]
- Anchor Link: Links to a specific section within the same page.
5. Useful Link Attributes:
- target='_blank': Opens in a new tab.
- title='text': Adds tooltip.
- download: Prompts file download.
- rel='noopener noreferrer': Security improvement for new tab links.
6. Best Practices:
- Use meaningful link text.
- Ensure formatting is accessible.
- Prefer semantic tags for SEO and accessibility.
Bold text: <b>Bold</b> or <strong>Important</strong>
Italic text: <i>Italic</i> or <em>Emphasized</em>
Subscript: H<sub>2</sub>O Superscript: x<sup>2</sup>
Hyperlink: <a href='[Link] Example</a>
New tab link: <a href='[Link] target='_blank'>Open Example</a>
Email link: <a href='[Link] Me</a>
Call link: <a href='[Link] Me</a>
Terminology (5)
1. Semantic Tag – Adds meaning to content for browsers and assistive technologies.
2. Non-Semantic Tag – Changes appearance but doesn’t describe meaning.
3. Hyperlink – Clickable text or image linking to another resource.
4. href – Attribute specifying link destination.
5. target – Attribute controlling where to open the link.
3. Lists, Tables & Forms:-
In this chapter, we cover three essential HTML components: Lists, Tables, and Forms. These
structures are fundamental for organizing, presenting, and collecting information on web pages.
1. Lists in HTML:
- Ordered List (<ol>): Items are numbered in sequence.
- Unordered List (<ul>): Items are marked with bullets.
- Definition List (<dl>): Consists of terms (<dt>) and their definitions (<dd>).
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Nested lists are possible by placing one list inside another.
2. Tables in HTML:
Tables display data in rows and columns.
Basic tags:
- <table>: Defines a table.
- <tr>: Table row.
- <th>: Table header cell (bold and centered by default).
- <td>: Table data cell.
Example:
<table border='1'>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
Attributes:
- border, cellpadding, cellspacing (HTML4, use CSS in modern practice).
- colspan, rowspan to merge cells.
3. Forms in HTML:
Forms allow user input to be sent to a server.
Key tags:
- <form>: Wraps all form elements.
- <input>: For text, email, password, radio, checkbox, submit, etc.
- <textarea>: Multi-line text input.
- <select> and <option>: Drop-down menus.
- <button>: Clickable button.
Important attributes:
- action: URL to send form data.
- method: GET or POST.
- name: Name of the form control.
- required: Field must be filled.
- placeholder: Hint text inside field.
4. Best Practices:
- Use lists for structured data.
- Keep tables accessible (add <caption>, scope attributes for headers).
- Label all form controls using <label> for accessibility.
- Validate form inputs using both HTML5 attributes and JavaScript.
Solutions (Samples)
Ordered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Table with merged cells:
<table border='1'>
<tr><th colspan='2'>Header</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
Form:
<form>
<label>Name: <input type='text' name='name'></label>
<label>Email: <input type='email' name='email'></label>
<button type='submit'>Submit</button>
</form>
Terminology (5)
1. Ordered List – A numbered list of items.
2. Unordered List – A bullet-point list of items.
3. Table – A structure of rows and columns for data display.
4. Form – A collection of input controls for user data entry.
5. Colspan/Rowspan – Attributes to merge table cells horizontally/vertically.
4. Semantic Elements
HTML5 introduced semantic elements that provide meaningful structure to a web page. Semantic
tags describe the role of the content within them, making it easier for browsers, developers, and
assistive technologies to understand the page.
1. What are Semantic Elements?
- Elements that have a clear meaning and describe their purpose.
- Improve accessibility, SEO, and maintainability.
- Example: <header> defines the header section of a page.
2. Common HTML5 Semantic Elements:
- <header>: Represents the top section, usually containing the site name, logo, or navigation.
- <nav>: Defines navigation links.
- <section>: Represents a thematic grouping of content.
- <article>: Represents self-contained content, like a blog post or news article.
- <aside>: Represents tangentially related content, such as a sidebar.
- <footer>: Represents the bottom section, often containing contact info or copyrights.
- <main>: Represents the dominant content of the page.
- <figure> & <figcaption>: Used for images or diagrams with captions.
- <time>: Represents a specific time or date.
3. Benefits of Semantic HTML:
- Better accessibility for screen readers.
- Easier to maintain and understand code.
- Improved SEO because search engines can interpret content meaning.
4. Example Semantic Structure:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>Links</nav>
</header>
<main>
<article>
<h2>Post Title</h2>
<p>Post content...</p>
</article>
</main>
<footer>© 2025 My Blog</footer>
</body>
</html>
5. Best Practices:
- Use semantic tags appropriately and avoid over-nesting.
- Combine with ARIA roles for complex structures.
- Do not use semantic tags purely for styling — use CSS for design.
Solutions (Samples)
<header>
<h1>My Website</h1>
<nav>
<a href='#home'>Home</a>
<a href='#about'>About</a>
</nav>
</header>
<figure>
<img src='[Link]' alt='Description'>
<figcaption>This is an example image.</figcaption>
</figure>
<time datetime='2025-08-10'>August 10, 2025</time>
Terminology (5)
1. Semantic Element – An HTML element that conveys meaning about its content.
2. <header> – Defines introductory content or navigation for a page or section.
3. <article> – Represents self-contained content.
4. <aside> – Contains related content or side information.
5. <figure> – Encapsulates images or diagrams with a caption.
5. Html Media Elements(Audio, Video, and Embedding)
HTML5 introduced native support for embedding audio, video, and other media directly into web pages
without relying on third-party plugins like Flash. These elements improve accessibility, performance, and
compatibility across devices.
1. <audio> Element:
- Used to embed audio files.
- Supports multiple formats: MP3, OGG, WAV.
Attributes:
• controls – Displays play, pause, and volume controls.
• autoplay – Starts playing automatically (not recommended without user consent).
• loop – Replays the audio when it ends.
• muted – Starts playback with sound muted.
Example:
<audio controls>
<source src='sound.mp3' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>
2. <video> Element:
- Used to embed video files.
- Supports MP4 (H.264), WebM, and OGG formats.
Attributes:
• controls – Shows video controls.
• autoplay – Plays automatically.
• loop – Repeats video.
• muted – Starts with sound off.
• poster – Image to show before playback starts.
Example:
<video controls poster='[Link]'>
<source src='movie.mp4' type='video/mp4'>
Your browser does not support the video tag.
</video>
3. <iframe> Element:
- Used to embed another webpage, video, or interactive content inside the current page.
Common uses:
• Embedding YouTube videos.
• Embedding Google Maps.
Attributes:
• src – URL of the embedded resource.
• width/height – Dimensions of the frame.
• allowfullscreen – Allows full-screen mode for videos.
Example:
<iframe width='560' height='315' src='[Link] frameborder='0'
allowfullscreen></iframe>
4. Accessibility Considerations:
- Always provide captions or transcripts for audio/video.
- Ensure controls are keyboard-accessible.
- Avoid autoplay for better user experience.
5. Best Practices:
- Use multiple <source> tags for cross-browser compatibility.
- Keep file sizes optimized for faster loading.
- Host media files on a CDN or streaming service for better performance.
Solutions (Samples)
<audio controls>
<source src='music.mp3' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>
<video controls poster='[Link]'>
<source src='movie.mp4' type='video/mp4'>
Your browser does not support the video tag.
</video>
<iframe width='560' height='315' src='[Link] frameborder='0'
allowfullscreen></iframe>
Terminology (5)
1. <audio> – Embeds sound content into a webpage.
2. <video> – Embeds video content into a webpage.
3. <iframe> – Embeds another HTML page or external resource.
4. Poster – An image displayed before a video starts playing.
5. Controls – Built-in play, pause, and volume UI for media.
6. Html Advanced Features
HTML forms allow users to submit data to a server. With HTML5, several new attributes and input
types were introduced to enhance usability, accessibility, and built-in validation without JavaScript.
1. Advanced Input Types:
HTML5 offers new input types for specific data formats:
- email: For email addresses; validates @ format.
- url: For website URLs.
- tel: For phone numbers.
- number: Numeric input with optional min, max, step.
- date: Date picker.
- time: Time picker.
- datetime-local: Date and time picker.
- color: Color picker.
- range: Slider for numeric range.
- search: Search field.
2. New Attributes for Better Forms:
- required – Field must be filled before submission.
- placeholder – Hint text inside the field.
- pattern – Regex pattern for validation.
- min / max – Minimum and maximum values.
- step – Increment value.
- multiple – Allow multiple values.
- autofocus – Field gets focus when page loads.
- readonly – Field cannot be changed but is submitted.
- disabled – Field is excluded from submission.
- autocomplete – Suggests previously entered values.
3. Grouping and Labeling:
- <fieldset> groups related inputs.
- <legend> describes the group.
- <label> with for/id associates labels with inputs.
4. File Uploads:
<input type='file' name='resume' accept='.pdf,.docx' multiple>
5. Datalist for Suggestions:
<input list='browsers' name='browser'>
<datalist id='browsers'>
<option value='Chrome'>
<option value='Firefox'>
<option value='Edge'>
</datalist>
6. Form Validation Without JavaScript:
- Built-in checks for required, pattern, type, and min/max.
- novalidate disables HTML5 validation.
7. Best Practices:
- Use appropriate input types.
- Validate on both client and server side.
- Keep forms short and user-friendly.
Solutions (Samples)
<form>
<label for='email'>Email:</label>
<input type='email' id='email' required>
<label for='color'>Choose color:</label>
<input type='color' id='color'>
<label for='range'>Rate (1–5):</label>
<input type='range' id='range' min='1' max='5'>
</form>
Terminology (5)
1. Pattern Attribute – Regular expression for validation.
2. Datalist – Provides a list of suggestions for an input.
3. Autocomplete – Browser feature to suggest stored data.
4. Multiple Attribute – Allows multiple file or value selection.
5. Placeholder – Hint text shown inside an input.
7. HTML5 APIs (Geolocation, Drag & Drop etc.)
HTML5 introduced several APIs (Application Programming Interfaces) that extend web functionality beyond
just displaying content. These APIs allow developers to interact with device hardware, manage files, store
data, and create richer user experiences.
1. Geolocation API:
- Purpose: Get the user’s current geographical location.
- Method: [Link](successCallback, errorCallback);
- Parameters: successCallback – runs when location is retrieved; errorCallback – runs if there’s an error.
Example:
if ([Link]) {
[Link](function(position) {
[Link]([Link], [Link]);
});
} else {
alert('Geolocation not supported');
}
2. Drag & Drop API:
- Purpose: Allows dragging elements and dropping them into target areas.
- Events: ondragstart, ondragover, ondrop.
Example:
<div id='dragme' draggable='true'>Drag me</div>
<div id='dropzone'>Drop here</div>
[Link]('dragme').ondragstart = function(event) {
[Link]('text', [Link]);
};
[Link]('dropzone').ondrop = function(event) {
[Link]();
let data = [Link]('text');
[Link]([Link](data));
};
[Link]('dropzone').ondragover = function(event) {
[Link]();
};
3. Local Storage & Session Storage:
- Purpose: Store data in the browser without a server.
- localStorage: Persistent storage with no expiration.
- sessionStorage: Cleared when the browser closes.
Example:
[Link]('username', 'John');
alert([Link]('username'));
4. Canvas API:
- Purpose: Draw graphics, shapes, or animations.
Example:
<canvas id='myCanvas' width='200' height='100'></canvas>
let c = [Link]('myCanvas');
let ctx = [Link]('2d');
[Link] = 'red';
[Link](20, 20, 150, 50);
5. Other HTML5 APIs:
- Web Storage API, File API, Web Workers API, Fullscreen API, WebSockets API.
Solutions (Samples)
Local Storage Example:
[Link]('theme', 'dark');
[Link]([Link]('theme'));
Geolocation Example:
[Link](function(pos) {
[Link]([Link], [Link]);
});
Canvas Example:
let c = [Link]('canvas');
let ctx = [Link]('2d');
[Link] = 'blue';
[Link](10, 10, 100, 50);
Terminology (5)
1. API – Application Programming Interface; allows communication between software components.
2. Geolocation API – Gets the user’s location.
3. Drag & Drop API – Enables moving elements on a page.
4. Local Storage – Stores persistent data in browser.
5. Canvas API – Draws graphics inside the browser.