Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Take A QuizChallenge yourself and boost your learning! Start the quiz now to earn credits.
Take A QuizUnlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Take A Quiz
🧠 Why This Chapter
Matters
Web content today goes far beyond just text. Images, videos,
forms, tables, and embedded media all make web pages interactive, dynamic,
and user-friendly.
In this chapter, you'll learn how to:
✅ 1. Links and Anchor Tags
<a
href="https://example.com">Visit Example</a>
Attribute |
Purpose |
href |
Target URL |
target="_blank" |
Open link in new tab |
title |
Tooltip on hover |
🔹 Anchor for Page Jumping
<a
href="#section2">Go to Section 2</a>
...
<h2
id="section2">Section 2</h2>
✅ Useful for single-page
navigation.
✅ 2. Images and Responsive Media
<img
src="image.jpg" alt="A scenic view" width="400"
/>
Attribute |
Purpose |
src |
Image path or URL |
alt |
Text description (accessibility) |
width / height |
Controls dimensions |
🔹 Responsive Image with
CSS
img
{
max-width: 100%;
height: auto;
}
✅ Always include alt text for
accessibility and SEO.
✅ 3. Embedding Multimedia (Audio
& Video)
🔹 Audio Player
<audio
controls>
<source src="sound.mp3"
type="audio/mpeg">
Your browser does not support audio.
</audio>
🔹 Video Player
<video
width="600" controls>
<source src="movie.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
✅ You can also autoplay, loop, or
mute with attributes like autoplay, loop, muted.
✅ 4. Using iframes
An <iframe> allows you to embed another HTML page or
app.
<iframe
src="https://example.com" width="600"
height="400"></iframe>
Common uses:
✅ Always provide a fallback or
title for accessibility.
✅ 5. HTML Tables
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>24</td></tr>
<tr><td>Bob</td><td>29</td></tr>
</tbody>
</table>
Tag |
Purpose |
<table> |
Creates a table container |
<tr> |
Table row |
<td> |
Table cell (data) |
<th> |
Table heading |
<thead>, <tbody>, <tfoot> |
Table grouping |
✅ Use tables only for tabular
data, not for layout.
✅ 6. HTML Forms and Input Fields
Forms allow users to submit data to servers or
JavaScript apps.
🔹 Basic Form
<form
action="/submit" method="post">
<input type="text"
name="name" placeholder="Your name">
<input type="email"
name="email" placeholder="Email">
<input type="submit"
value="Send">
</form>
Input Type |
Purpose |
text |
Plain text input |
email |
Email validation |
password |
Hidden characters |
radio / checkbox |
Option selection |
submit |
Button to submit form |
🔹 Textarea & Select
Dropdown
<textarea
name="message" rows="4" cols="40">Type
here...</textarea>
<select
name="city">
<option value="ny">New
York</option>
<option value="la">Los
Angeles</option>
</select>
✅ Use <label> elements for
accessibility:
<label
for="email">Email:</label>
<input
id="email" type="email">
✅ 7. Embedding External Content
🔹 Embed YouTube Video
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/xyz123" frameborder="0"
allowfullscreen></iframe>
🔹 Embed Google Maps
<iframe
src="https://www.google.com/maps/embed?..."></iframe>
✅ Make sure the embed source is trusted
and responsive.
✅ Recap Table: Multimedia &
Forms
Feature |
Syntax / Example |
Notes |
Image |
<img src="..." alt=""> |
Always include alt |
Audio |
<audio controls><source src="..."
/></audio> |
Use fallback text |
Video |
<video controls><source src="..."
/></video> |
Use multiple formats |
Iframe |
<iframe src="..."></iframe> |
Use with width & height |
Table |
<table><tr><td>...</td></tr></table> |
Use for data only |
Form |
<form><input>...</form> |
Use with method + action |
HTML is used to structure content on the web, allowing
browsers to display text, images, links, and multimedia elements.
HTML5 is the latest version of HTML and includes new
features like semantic elements, multimedia support (<audio> and
<video>), and better mobile support.
HTML is used to define the structure of a webpage,
while CSS is used to style and format it (e.g., colors, fonts, layouts).
Yes, HTML can be used alone, but CSS makes web pages more
visually appealing.
Semantic elements like <header>, <article>,
<section>, and <footer> improve code readability and SEO.
No, HTML is a markup language that structures content
but does not provide logic like programming languages.
Some commonly used HTML tags are <p>, <h1>,
<a>, <img>, <ul>, <table>, and <form>.
The <meta> tag provides metadata such as character
encoding, page description, and viewport settings for responsive design.
The alt attribute provides alternative text for images, improving
accessibility and SEO.
Please log in to access this content. You will be redirected to the login page shortly.
LoginReady to take your education and career to the next level? Register today and join our growing community of learners and professionals.
Comments(0)