1.
Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating webpages.
It consists of elements that structure web content.
Versions: HTML2.0 → HTML3.0 → HTML4.0 → XHTML → HTML5.
XHTML (Extensible HyperText Markup Language) enforces stricter syntax than HTML.
Web 1.0 had static pages, whereas Web 2.0 introduced interactive elements.
2. Basic Structure of an HTML Document
A webpage consists of:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Welcome to HTML!</p>
</body>
</html>
<!DOCTYPE html>: Defines the document type.
<html>: Root element.
<head>: Contains metadata.
<body>: Contains visible page content.
3. HTML Elements and Tags
Elements: Represented by opening and closing tags, e.g., <p>...</p>.
Void Elements: Self-closing tags like <br>, <img>, <hr>.
Common HTML elements:
o Headings: <h1> to <h6>
o Paragraphs: <p>
o Line breaks: <br>
4. Text Formatting and Styling
Bold: <b>Bold Text</b>
Italic: <i>Italic Text</i>
Underline (Deprecated): <u>Underlined</u>
Strong emphasis: <strong>Important</strong>
Subscript: <sub>H2O</sub>
Superscript: <sup>x²</sup>
Monospace text: <code>print("Hello")</code>
5. HTML Lists
Ordered List (Numbered):
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List (Bullets):
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
Definition List:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
6. Hyperlinks and Anchors
Basic Link:
<a href="https://example.com">Visit Example</a>
Internal Link:
<a href="about.html">About Us</a>
Email Link:
<a href="mailto:email@example.com">Send Email</a>
Anchor (Jump to Section):
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
7. HTML Images
Basic Image:
<img src="image.jpg" alt="Description" width="300">
Responsive Images:
<picture>
<source srcset="image-large.jpg" media="(min-width: 600px)">
<img src="image-small.jpg" alt="Responsive Image">
</picture>
8. Multimedia in HTML
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Video:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Embed YouTube Video:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/example"></iframe>
9. HTML Forms and User Input
Form Basics:
<form action="submit.php" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
Input Types:
<input type="email" required>
<input type="password">
10. Tables in HTML
Basic Table:
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>
</table>
11. Frames and iFrames
Embed Page:
<iframe src="https://example.com" width="600" height="400"></iframe>
12. HTML5 Semantic Elements
Layout Structure:
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
13. HTML Forms Advanced Topics
Radio & Checkbox:
<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="subscribe"> Subscribe
14. HTML Entities and Special Characters
Common Entities:
< ( < ), > ( > ), & ( & )
15. HTML5 APIs
Geolocation:
navigator.geolocation.getCurrentPosition(showPosition);
16. HTML Comments and Meta Tags
Meta Description:
<meta name="description" content="This is a description">
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17. HTML Accessibility & Usability
ARIA Attributes:
<button aria-label="Submit Form">Submit</button>
18. Directory Structures and File Organization
Organizing Files:
/website
/images
/css
/js
19. Linking HTML with CSS and JavaScript
Linking CSS:
<link rel="stylesheet" href="style.css">
Adding JavaScript:
<script src="script.js"></script>
20. Advanced HTML Features
Canvas for Graphics:
<canvas id="myCanvas"></canvas>
SVG for Vector Graphics:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="red"/>
</svg>
Introduction to HTML Forms
A form in HTML is created using the <form> element. Forms contain various input fields where
users can enter data, which is then sent to a server for processing.
Basic Form Example
html
CopyEdit
<form action="submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<form>: The container that holds all input elements.
action="submit.php": The URL where the form data will be sent.
method="post": Defines how the data will be sent (POST or GET).
<label>: Associates a text label with an input field.
<input type="text">: A field where users can enter text.
<input type="submit">: A button to submit the form.
2. Form Attributes
The <form> tag has several attributes that define its behavior:
Attribute Description
action Specifies the URL where form data will be sent.
method Defines the HTTP method (GET or POST).
target Specifies where to open the response (_self, _blank, etc.).
autocomplete Enables or disables autofill (on or off).
novalidate Disables form validation.
enctype Used when uploading files (set to multipart/form-data).
Example
html
CopyEdit
<form action="process.php" method="post" target="_blank" autocomplete="off"
novalidate>
<input type="text" name="username">
<input type="submit">
</form>
3. Input Elements in Forms
3.1 Text Input Fields
Used for collecting text, usernames, or passwords.
html
CopyEdit
<input type="text" name="name" placeholder="Enter your name">
<input type="password" name="password" placeholder="Enter password">
3.2 Radio Buttons (Single Selection)
Users can select only one option from a group.
html
CopyEdit
<p>Gender:</p>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
3.3 Checkboxes (Multiple Selection)
Users can select multiple options.
html
CopyEdit
<p>Select your hobbies:</p>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="music"> Music
3.4 Dropdown Select (Single Selection)
A drop-down list where users choose one option.
html
CopyEdit
<select name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select>
3.5 Multi-Select Dropdown
Users can select multiple options by holding the CTRL key (Windows) or Command key
(Mac).
html
CopyEdit
<select name="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
</select>
3.6 Text Area (Multiline Input)
Used for collecting long text inputs, like messages or comments.
html
CopyEdit
<textarea name="message" rows="4" cols="30" placeholder="Write your message
here..."></textarea>
3.7 File Upload Field
Used for allowing users to upload files.
html
CopyEdit
<input type="file" name="resume">
3.8 Date, Time, and Number Inputs
HTML5 introduced several new input types:
html
CopyEdit
<input type="date" name="dob">
<input type="time" name="meeting_time">
<input type="number" name="quantity" min="1" max="10">
3.9 Color Picker
Allows users to select a color.
html
CopyEdit
<input type="color" name="favColor">
3.10 Email & URL Fields
Used for email addresses and website URLs.
html
CopyEdit
<input type="email" name="email" required>
<input type="url" name="website">
4. Form Buttons
4.1 Submit Button
Sends form data to the server.
html
CopyEdit
<input type="submit" value="Send">
1. What does HTML stand for?
HTML stands for HyperText Markup Language. It is used to create the structure of web pages.
2. What is the difference between HTML and XHTML?
HTML is more flexible and does not require strict syntax.
XHTML (Extensible HyperText Markup Language) is a stricter version of HTML that follows XML
rules (e.g., tags must be properly nested and closed).
3. How do you create a hyperlink in HTML?
A hyperlink is created using the <a> tag:
<a href="https://www.example.com">Click Here</a>
The href attribute specifies the URL.
4. What is the purpose of the <title> tag?
The <title> tag defines the title of a webpage, which appears in the browser’s title bar or tab.
<title>My Web Page</title>
5. What is the difference between <b> and <strong>?
<b> makes text bold without adding extra importance.
<strong> makes text bold and also gives it semantic importance (e.g., screen readers
emphasize it).
Example:
<b>Normal Bold Text</b>
<strong>Important Bold Text</strong>
6. How do you insert an image in an HTML page?
Use the <img> tag with the src attribute:
<img src="image.jpg" alt="Description of image">
The alt attribute provides alternative text for screen readers and when the image cannot load.
7. What is the purpose of the <meta> tag?
The <meta> tag provides metadata about a webpage, such as character set, author, and
description.
Example:
<meta name="description" content="This is a sample website">
<meta charset="UTF-8">
8. How do you create an ordered list in HTML?
Use the <ol> (ordered list) tag with <li> (list item) elements:
html
CopyEdit
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
This will display:
1. First Item
2. Second Item
3. Third Item
9. What is the use of the alt attribute in the <img> tag?
The alt attribute provides alternative text for images, useful for accessibility and when the
image fails to load.
Example:
html
CopyEdit
<img src="logo.png" alt="Company Logo">
10. What is the difference between <div> and <span>?
<div> is a block-level element used for layout and grouping elements.
<span> is an inline element used to style specific parts of text.
Example:
html
CopyEdit
<div style="background-color: lightblue;">This is a div</div>
<p>This is a <span style="color: red;">red</span> word.</p>
1. Create a Contact Form in HTML
Code:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"
required></textarea><br><br>
<input type="submit" value="Send">
</form>
✅ Expected Output: A form where users can enter their name, email, and message before
clicking Send.
2. Create an Ordered and Unordered List in HTML
Code:
html
CopyEdit
<h3>Ordered List: Favorite Programming Languages</h3>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
</ol>
<h3>Unordered List: Hobbies</h3>
<ul>
<li>Reading</li>
<li>Music</li>
<li>Traveling</li>
</ul>
✅ Expected Output:
An ordered list numbered (1,2,3) for programming languages.
An unordered list with bullet points for hobbies.
3. Create a Table to Display Student Information
Code:
html
CopyEdit
<table border="1">
<tr>
<th>Student Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>21</td>
<td>B</td>
</tr>
<tr>
<td>Charlie</td>
<td>22</td>
<td>A</td>
</tr>
</table>
✅ Expected Output: A table with three rows displaying student details.
4. Create a Webpage with a Navigation Menu
Code:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage with a navigation menu.</p>
</body>
</html>
✅ Expected Output: A webpage with Home, About, and Contact navigation links.
5. Create a Registration Form with Validation
Code:
html
CopyEdit
<form action="register.php" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6"
required><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Interests:</label>
<input type="checkbox" name="interest" value="Reading"> Reading
<input type="checkbox" name="interest" value="Music"> Music
<input type="checkbox" name="interest" value="Sports"> Sports<br><br>
<input type="submit" value="Register">
</form>
✅ Expected Output: A registration form with validation for required fields.
6. Create an Image Gallery Using HTML
Code:
html
CopyEdit
<h3>Image Gallery</h3>
<img src="image1.jpg" alt="Image 1" width="200">
<img src="image2.jpg" alt="Image 2" width="200">
<img src="image3.jpg" alt="Image 3" width="200">
<img src="image4.jpg" alt="Image 4" width="200">
✅ Expected Output: A gallery of four images displayed in a row.
7. Create a Webpage with an Embedded YouTube Video
Code:
html
CopyEdit
<h3>My Favorite Video</h3>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen>
</iframe>
✅ Expected Output: A webpage with an embedded YouTube video.
8. Create a Definition List for Web Technologies
Code:
html
CopyEdit
<h3>Web Technologies</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - used for structuring web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language used for adding interactivity to web
pages.</dd>
</dl>
✅ Expected Output: A definition list where each web technology is followed by its
explanation.
9. Create a Page with an Inline Frame (<iframe>)
Code:
html
CopyEdit
<h3>Embedded Webpage</h3>
<iframe src="https://www.example.com" width="600" height="400">
Your browser does not support iframes.
</iframe>
