A Chapter-5
Advanced HTML-II with CSS
Long answer type questions
Que1: Why a Submit button used while creating a form? Explain with the help of
an example.
Ans-1: A submit button is used when creating a form to initiate the submission of user entered
data from the form to a server or other processing endpoint. It serves as primary trigger for
sending the information collected within the form fields.
A submit button in a form is used to send the data entered by the user to the server (or to
another page) for processing.
When the user clicks the submit button, the browser collects all the values entered in the form
fields and sends them to the location specified in the form’s action attribute, using the method
defined in the method attribute (GET or POST).
✅ Example:
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="submit_form.php" method="post">
Name: <input type="text" name="student_name"><br><br>
Email: <input type="email" name="student_email"><br><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>---
🔎 Explanation:
1. form tag → creates the form
2. action="submit_form.php" → tells the browser to send form data to submit_form.php for
processing.
3. method="post" → defines how the data will be sent (here, securely in the request body).
4. <input type="submit" value="Submit Form"> → creates a Submit button. When clicked,
all the filled information (Name & Email) is sent to the server.
---
👉 Without the submit button, the form data cannot be sent for processing.
Que 2: Why are Checkboxes used while creating a form? Explain with the help
of an example.
Ans 2: The check boxes are provided on the web page to help users make multiple choices
from among the listed ones.
In other words:
Checkboxes are used in forms when we want the user to select one or more options from a list of choices.
Unlike radio buttons (where only one option can be selected at a time), checkboxes allow multiple selections.
They are very useful when the input is not limited to a single answer.
✅ Example:
Suppose we are creating a form to ask about the hobbies of a user. Since a person can have more than one
hobby, checkboxes are the right choice.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<h2>Select Your Hobbies</h2>
<form>
<input type="checkbox" name="hobby" value="reading"> Reading <br>
<input type="checkbox" name="hobby" value="traveling"> Traveling <br>
<input type="checkbox" name="hobby" value="music"> Listening to Music <br>
<input type="checkbox" name="hobby" value="sports"> Sports <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
---
🔎 Explanation:
<input type="checkbox"> creates a checkbox.
The name attribute groups the checkboxes logically.
The value attribute stores the value that gets sent to the server if the box is checked.
A user can select Reading and Music, or all options, depending on their preference.
---
👉 In short:
Checkboxes are used in forms to give users the flexibility of choosing multiple options.
Que 3: Why are Radio buttons used while creating a form? Explain with
the help of an example.
Ans-3: Radio buttons are used in forms when we want the user to choose only one option out
of a group of choices.
Specifying type as “radio” in the <input> tag helps us to put radio buttons in the form.
Unlike checkboxes (which allow multiple selections), radio buttons ensure that only one
option is selected at a time.
---
✅ Example:
Suppose we are creating a form to ask the user’s gender. Since a person can select only one
gender, radio buttons are appropriate.
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Example</title>
</head>
<body>
<h2>Select Your Gender</h2>
<form>
<input type="radio" name="gender" value="male"> Male <br>
<input type="radio" name="gender" value="female"> Female <br>
<input type="radio" name="gender" value="other"> Other <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
---
🔎 Explanation:
<input type="radio"> creates a radio button.
All radio buttons in the same group share the same name attribute (here "gender").
Because of the shared name, only one option can be selected at a time.
If the user clicks another radio button, the previous selection is automatically cleared.
---
👉 In short:
Radio buttons are used in forms to force the user to pick exactly one option from a set of
choices.
Que-4 : Explain the <audio> and <video> tags with their syntax and examples.
Ans-4: Got it 👍
Let’s clearly explain both tags one by one with syntax and example:--
🎵 <audio> Tag
The <audio> tag is used to embed sound (like music, speech, or effects) in a webpage.
Syntax:
<audio controls>
<source src="file.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
🔹 Explanation:
controls → shows play, pause, and volume buttons.
source → defines the audio file and its type.
Fallback text appears if the browser doesn’t support <audio>.
🎥 <video> Tag
The <video> tag is used to embed video clips in a webpage.
Syntax:
<video width="400" height="300" controls>
<source src="file.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video element.
</video>
Example:
<video width="500" height="350" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
🔹 Explanation:
width / height → sets video size.
controls → shows play, pause, volume, fullscreen buttons.
source → defines the video file and format.
Fallback text appears if the browser doesn’t support <video>.
---
✅ In short:
<audio> = used for sound.
<video> = used for movies or clips.
Both support multiple file formats via <source>.
Que-5: What are HTML frames? Write the HTML code to create two column frames
and display two different web pages on them.
Que-6: Define the <style> tag with an example.
Ans-6: The <style> tag in HTML is used to define internal CSS (Cascading Style Sheets) for
a webpage. It allows you to apply styles like colors, fonts, borders, spacing, etc.,
directly inside the <head> section of an HTML document.
Syntax:
<style>
selector {
property: value;
}
</style>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title>
<style>
body {
background-color: lightyellow;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p{
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph styled using the <style> tag.</p>
</body>
</html>
✅ Here:
The body has a light yellow background.
The <h1> is blue and centered.
The <p> is green with font size 18px.
Que-7 Define the CSS font properties with their examples.
Ans-7: In CSS, font properties are used to control the appearance of text, such as its
style, size, weight, and family. Here’s a breakdown of the most commonly used CSS
font properties with syntax and examples:
---
1. font-family
Specifies the typeface (font) of the text. You can list multiple fonts; the browser will use
the first available one.
p{
font-family: "Times New Roman", Arial, sans-serif;
}
👉 The text will first try to use Times New Roman, if not available, it will fall back to
Arial, then to a generic sans-serif font.
2. font-size : Specifies the size of the font.
h1 {
font-size: 32px;
}
p{
font-size: 1.2em; /* relative size */
}
👉 Supports units like px, em, rem, %, vw etc.
---
3. font-style : Defines the style of the font: normal, italic, or oblique.
p{
font-style: italic;
}
---
4. font-weight :Specifies the thickness of characters.
h1 {
font-weight: bold;
}
p{
font-weight: 300; /* lighter font */
}
👉 Can take values: normal, bold, lighter, bolder, or numeric (100–900).
---
5. font-variant: Specifies whether the text should appear in small-caps.
p{
font-variant: small-caps;
}
6. line-height : Controls the space between lines of text.
p{
line-height: 1.8;
}
7. font (shorthand property) : Combines several font properties in one line.
Order: font-style → font-variant → font-weight → font-size/line-height → font-family
p{
font: italic small-caps bold 18px/1.5 Arial, sans-serif;
}
✅ Summary Table:
Property Description Example
font-family Defines the typeface font-family: Arial;
font-size Sets font size font-size: 16px;
font-style Sets style (normal, italic, oblique) font-style: italic;
font-weight Controls thickness font-weight: bold;
font-variant Small-caps effect font-variant: small-caps;
line-height Line spacing line-height: 1.5;
font (shorthand) Combines all font properties font: italic bold 20px Arial;
Que-8: Define the CSS float property.
Ans-8: The CSS float property is used to position an element to the left or right of its
container, allowing text and inline elements to wrap around it.
It was originally designed for placing images in a block of text, but is also used in
creating multi-column layouts.
Syntax:
selector {
float: value;
}
Values of float:
left → The element floats to the left side of its container.
right → The element floats to the right side of its container.
none (default) → The element does not float.
inherit → Inherits the float value from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right; /* Image will float to the right */
margin: 10px;
}
</style>
</head>
<body>
<p>
<img src="[Link]" alt="Example" width="100">
This paragraph contains text that will wrap around the floated image. The image is floated
to the right, so the text flows on the left side of it.
</p>
</body>
</html>
👉 In the above example, the image is aligned to the right, and the paragraph text
wraps around it.
