XI Web Application 803 Ch 2 Website Building Using HTML and CSS CBSE Book Solution

I. Multiple Choice Questions

1. Which HTML tag defines the title of the webpage (displayed on the browser tab)?
a. <name>
b. <title>
c. <heading>
d. <webpage_title>

Ans: b) <title>

2. Which HTML tag defines a paragraph?
a. <para>
b. <paragraph>
c. <p>
d. <text>

Ans: c) <p>

3. How do you make text bold in HTML?
a. <bold>text</bold>
b. <b>text</b>
c. <bl>text</bl>
d. Both <b> and <bl> can be used

Ans: b) <b>text</b>

4. How do you create a horizontal line separator in HTML?
a. <line>
b. <hr>
c. <separator>
d. <divider>

Ans: b) <hr>

5. Which HTML tag is used to create an image?
a. <picture>
b. <image>
c. <img>
d. <visual>

Ans: c) <img>

6. What attribute is required in the <img> tag to specify the image source?
a. <source>
b. <path>
c. <file>
d. <src>

Ans: d) src

7. Which HTML tag defines a comment that is not displayed on the webpage?
a. <!-- comment -->
b. <comment>text</comment>
c. // comment
d. <hidden>text</hidden>

Ans: a) <!-- comment -->

8. Which HTML tag is used to format text as italic?
a. <i>
b. <italic>
c. <italics>
d. <it>

Ans: a) <i>

9. Which HTML tag defines a table element?
a. <table_data>
b. <table>
c. <data_table>
d. <TD>

Ans: b) <table>

10. What tag defines a table row?
a. <tr>
b. <row>
c. <td>
d. <TR>

Ans: a) <tr>

11. What tag defines a table header cell?
a. <td>
b. <th>
c. <header_cell>
d. <TDHeader>

Ans: b) <th>

12. To span a cell across multiple columns, which attribute would you use on the <td> or <th> tag?
a. rowspan
b. colspan
c. merge
d. spread

Ans: b) colspan

13. By default, do tables have borders around them?
a. Yes
b. No
c. Depends on the browser
d. Only if a border attribute is set

Ans: b) No

14. Which HTML tags define ordered lists?
a. <ul> and </ul>
b. <ol> and </ol>
c. <li> and </li>
d. <item> and </item>

Ans: b) <ol> and </ol>

15. Which HTML tags define unordered lists?
a. <ul> and </ul>
b. <ol> and </ol>
c. <li> and </li>
d. <item> and </item>

Ans: b. <ol> and </ol>

16. What tag defines a list item within an ordered or unordered list?
a. <ul> and </ul>
b. <ol> and </ol>
c. <li> and </li>
d. <item> and </item>

Ans: c. <li> and </li>

17. How can you specify a different numbering style for an ordered list?
a. Use the style attribute.
b. Use a separate tag for different numbering styles.
c. Ordered lists only support numeric styles.
d. Use the type attribute with the <ol> tag.

Ans: d. Use the type attribute with the <ol> tag.

18. What attribute is used to specify a starting number for an ordered list?
a. start
b. value
c. begin
d. number

Ans: a. start

19. What symbol is used as a bullet point by default in unordered lists?
a. Square (❏)
b. Circle (●)
c. Disc (◦)
d. Triangle (▲)

Ans: b. Circle (●)

20. What is the correct way to create an ordered list with numbered items?
a. <list type="ordered">...</list>
b. <ol>...</ol>
c. <numbered_list>...</numbered_list>
d. <olist>...</olist>

Ans: b. <ol>...</ol>

21. Which HTML tag is used to create a hyperlink?
a. <url>
b. <link>
c. <a>
d. <href>

Ans: c. <a>

22. What attribute specifies the destination URL of a hyperlink?
a. destination
b. href
c. url
d. linkto

Ans: b. href

23. Which attribute specifies the text displayed for the hyperlink?
a. <text>
b. The text is automatically generated by the browser.
c. The text is defined within the <a> tag itself.
d. <content>

Ans: c. The text is defined within the <a> tag itself.

24. What happens when a user clicks on a hyperlink?
a. The browser displays an error message.
b. The browser opens the document specified in the href attribute.
c. The text of the hyperlink is highlighted.
d. The behaviour depends on the specific browser settings.

Ans: b. The browser opens the document specified in the href attribute.

25. Can hyperlinks link to local elements within the same webpage?
a. No, hyperlinks can only link to external websites.
b. Yes, you can use an ID selector within the href attribute to link to a specific element on the same page.
c. You can only link to external websites and other webpages on the website.
d. We need other scripting languages for linking on the same webpage.

Ans: b. Yes, you can use an ID selector within the href attribute to link to a specific element on the same page.

26. How can you specify that a link should open in a new browser tab or window?
a. By using a specific attribute with the <a> tag (e.g., <a target="_blank">)
b. There is no way to control how links open in HTML.
c. This behaviour depends on the user’s browser settings.

Ans: a. By using a specific attribute with the <a> tag (e.g., <a target="_blank">)

27. What is the difference between an absolute URL and a relative URL in the context of hyperlinks?
a. Absolute URLs are shorter and easier to remember.
b. Absolute URLs specify the complete web address (protocol, domain name, and path), while relative URLs are relative to the current webpage’s location.
c. Absolute URLs cannot be used in HTML tags.
d. Relative URLs specify the complete web address, while absolute URLs are relative to the webpage.

Ans: b. Absolute URLs specify the complete web address (protocol, domain name, and path), while relative URLs

28. Which HTML tag creates a hyperlink (link to another webpage or resource)?
a. <link>
b. <url>
c. <a>
d. <connect>

Ans: c. <a>

29. Which HTML tag defines the start and end of a form?
a. <form_data>
b. <form>
c. <input_form>
d. <data_collection>

Ans: b. <form>

30. What attribute specifies the method used to send form data (e.g., GET or POST)?
a. action
b. method
c. data_type
d. send_method

Ans: b. method

31. What attribute specifies the URL of the program that will process the submitted form data?
a. <destination>
b. <action>
c. <processor>
d. <submit_to>

Ans: b. <action>

32. Which HTML tag is used to create a text input field in a form?
a. <text_input>
b. <input type="text">
c. <data_entry>
d. <field>

Ans: b. <input type="text">

33. What attribute is used to specify the label for a form element?
a. <label_text>
b. <label for="element_id"> (with corresponding element ID)
c. <data_name>
d. There is no way to add labels to form elements in HTML.

Ans: b. <label for="element_id"> (with corresponding element ID)

34. How can you create a radio button input field in a form?
a. <radio_button>
b. <input type="radio">
c. <option type="radio">
d. <choice>

Ans: b. <input type="radio">

35. What is the purpose of the <textarea> element in a form?
a. To create a single-line text input field
b. To create a multi-line text input field
c. To define a label for another form element
d. To upload a file

Ans: b. To create a multi-line text input field

36. How can you allow users to upload a file through a form?
a. By using <input type="file">
b. There is no way to allow file uploads in HTML forms
c. This functionality requires additional scripting beyond HTML

Ans: a. By using <input type="file">

37. What is the difference between the GET and POST methods for form submission?
a. There is no functional difference
b. GET appends form data to the URL, while POST sends data separately
c. GET is for sending data to the server, while POST is for retrieving data
d. GET is more secure than POST

Ans: b. GET appends form data to the URL, while POST sends data separately

38. What happens when a user submits a form?
a. The form disappears from the webpage
b. The form data is sent to the program specified in the <action> attribute for processing
c. The browser displays a confirmation message
d. The behaviour depends on the specific form elements used

Ans: b. The form data is sent to the program specified in the <action> attribute for processing

39. What does CSS stand for?
a. Creative Style Sheets
b. Computer Style Sheets
c. Cascading Style Sheets
d. Colorful Style Sheets

Ans: c. Cascading Style Sheets

40. What does the “Cascading” in CSS stand for?
a. The ability to apply multiple styles to an element
b. The hierarchical structure of HTML elements
c. The priority system for resolving conflicting styles
d. The process of applying styles from parent to child elements

Ans: c. The priority system for resolving conflicting styles

41. Which tag do you use to include an external CSS file in your HTML document?
a. <css> tag
b. <style> tag
c. <link> tag
d. <script> tag

Ans: c. <link> tag

42. Which CSS property is used to change the text color of an element?
a. text-color
b. color
c. font-color
d. text-style

Ans: b. color

43. Which CSS property is used to control the spacing between lines of text?
a. line-height
b. text-spacing
c. line-spacing
d. text-line

Ans: a. line-height

44. Which CSS property specifies the type of list item marker?
a. list-style-type
b. list-style-image
c. list-style
d. list-type

Ans: a. list-style-type

45. Which CSS property is used to specify the space between contents and the border of a table?
a. border-spacing
b. cell-padding
c. padding
d. border-collapse

Ans: c. padding

II. Answer the Following Questions

1. Describe the purpose of the <head> and <body> sections in an HTML document.

Ans: Purpose of <head> and <body> sections

<body> section contains the actual content of the webpage such as text, images, tables, links, etc.

<head> section contains information about the webpage such as title, meta tags, CSS links, and scripts.

2. Explain how comments are used in HTML code. What is their purpose?

Ans: HTML comments are used to add notes in the code which are not displayed in the browser.

Syntax

<!– This is a comment –>

Purpose

• Explain the code
• Make code easier to understand
• Temporarily disable parts of code

3. Describe the purpose of a form in HTML. What are some common form elements used for user input?

Ans: Purpose of Forms in HTML

An HTML form is used to collect user input and send it to the server for processing.

Common form elements

• <input>
• <textarea>
• <select>
• <button>
• <label>

Examples of inputs include text fields, radio buttons, checkboxes, and file uploads.

4. Explain the difference between the GET and POST methods for submitting form data. When might you use each method?

Ans: Difference between GET and POST

5. You are creating a feedback form for your school website. What HTML elements would you use to collect user information like name, email, and their feedback message?

Ans: Elements for a School Feedback Form

The following HTML elements can be used:

• <form>
• <label>
• <input type="text"> for name
• <input type="email"> for email
• <textarea> for feedback
• <input type="submit">

<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
Feedback:<br>
<textarea></textarea><br>
<input type="submit">
</form>

6. Explain how you would use an HTML table to display a timetable for your school classes.

Ans: Using HTML Table for School Timetable

A timetable can be created using:

• <table> – defines table
• <tr> – defines row
• <th> – table heading
• <td> – table data

Example: Tables help organize information in rows and columns.

<table border="1">
<tr>
<th>Day</th>
<th>Subject</th>
</tr>

<tr>
<td>Monday</td>
<td>Math</td>
</tr>
</table>

7. Imagine you are creating a webpage for a fictional band. How would you use HTML elements to embed a music player and display the band’s upcoming tour dates?

Ans: Webpage for a Fictional Band

To create such a webpage:

• <h1> for band name
• <img> for band image
• <audio> or embedded music player for songs
• <table> or <ul> for tour dates

Example:

<h1>Rock Stars Band</h1>

<img src="band.jpg">

<audio controls>
<source src="song.mp3">
</audio>

8. Describe the difference between heading tags (H1–H6) in HTML. How would you use them to structure your webpage content?

Ans: Difference Between Heading Tags (H1–H6)

HTML provides six levels of headings.

They help organize webpage content hierarchically.

9. Explain how to create a bulleted list and a numbered list in HTML. What are the advantages of using lists for web page content?

Ans: Bulleted List and Numbered List

Bulleted List

<ul>
<li>Apple</li>
<li>Mango</li>
</ul>

Numbered List

<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

Advantages

• Organizes information clearly
• Improves readability
• Makes content structured

10. How can you create a hyperlink in HTML? Explain the different attributes you can use with the <a> tag.

Ans: Hyperlink in HTML

Hyperlinks are created using the <a> tag.

Example:

<a href=”https://example.com”>Visit Website</a>

Common attributes

• href – destination link
• target – where the link opens
• title – tooltip text

11. Describe how to create and format a table in HTML. What are the benefits of using tables for web page content?

Ans: Creating and Formatting Tables

A table is created using:

• <table>
• <tr>
• <th>
• <td>

Example:

<table border="1">
<tr>
  <th>Name</th>
  <th>Age</th>
</tr>

<tr>
  <td>Rahul</td>
  <td>17</td>
</tr>
</table>

Benefits

• Displays structured data
• Easy to read rows and columns
• Useful for timetables and reports

12. What is CSS? Give its three advantages.

Ans: CSS (Cascading Style Sheets) is used to style HTML elements such as color, layout, fonts, and spacing.

Advantages

• Allows reuse of styles across multiple pages
• Improves website appearance
• Separates design from content

13. Differentiate between Inline, Internal, and External CSS.

Ans: Inline, Internal and External CSS

14. What is the purpose of the <style> tag in HTML?

Ans: Purpose of <style> Tag

The <style> tag is used to define internal CSS styles inside an HTML document.

Example:

<style>
p { color: blue; }
</style>

15. Explain the concept of the CSS Box Model and its components.

Ans: The CSS Box Model describes the layout of elements.

It consists of:

1. Content – actual text or image
2. Padding – space around content
3. Border – border around padding
4. Margin – space outside border

The box model helps control spacing and layout of element

16. How can you change the font size, color, and background color of elements using CSS?

Ans: Changing Font Size, Color and Background

Example:

p {
font-size: 18px;
color: blue;
background-color: yellow;
}

Properties used:

background-color

font-size

color

17. What are the three different ways to give colors in CSS?

Ans: Three Ways to Give Colors in CSS

1. Color Names

color: red;

2. RGB Values

color: rgb(255,0,0);

3. Hexadecimal Values

color: #FF0000;

18. How can you create a border around an image using CSS?

Ans: Border Around an Image

img {
border: 2px solid black;
}

III. Practical Questions

1. Create a webpage for a fictional restaurant. Include:

• A heading with the restaurant’s name
• An image of the restaurant’s logo
• A navigation bar with links to sections like Menu, About Us, Contact Us
• A short description of the restaurant’s cuisine

Ans: Restaurant Webpage

<html>
<head>
<title>Food Palace</title>
</head>

<body>

<h1>Food Palace Restaurant</h1>

<img src="logo.jpg" width="150">

<nav>
<a href="#">Menu</a> |
<a href="#">About Us</a> |
<a href="#">Contact Us</a>
</nav>

<p>We serve delicious Indian and continental food.</p>

</body>
</html>

2. Create a webpage for a musician showcasing their work. Include:

• A heading with the musician’s name
• An image of the musician
• A section with a brief biography using semantic tags
• An embedded audio player to play some of their music
• Links to social media profiles

Ans: Musician Webpage

<h1>Arjun Music</h1>

<img src="musician.jpg">

<h2>Biography</h2>
<p>Arjun is a famous singer and composer.</p>

<audio controls>
<source src="song.mp3">
</audio>

<p>
<a href="#">Instagram</a>
<a href="#">YouTube</a>
</p>

3. Design a product page for an online store. Include:

• A product image with title and description
• A drop-down menu to select variations (size, color)
• A button to add the product to the cart
• A table displaying product specifications

Ans: Product Page

<h2>Smart Watch</h2>

<img src="watch.jpg">

<p>Latest smart watch with health tracking.</p>

<select>
<option>Black</option>
<option>Blue</option>
</select>

<button>Add to Cart</button>

<table border="1">
<tr>
<th>Material</th>
<th>Dimensions</th>
</tr>

<tr>
<td>Metal</td>
<td>40mm</td>
</tr>
</table>

4. Build a simple website for a bakery home page.

• Create HTML structure with heading and description
• Write external CSS to style them with font size, color, and alignment

Ans: Bakery Webpage with External CSS

HTML

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>

<h1>Sweet Treats Bakery</h1>
<p>Fresh cakes and pastries every day.</p>

</body>
</html>

CSS (style.css)

h1{
font-size:40px;
font-weight:bold;
color:#8B4513;
text-align:center;
}

p{
font-size:18px;
color:#696969;
text-align:center;
}

5. Design a contact section for a personal website using CSS with:

• Heading “Get in Touch”
• Contact information list (email, phone)
• Social media icons (Facebook, Twitter, Instagram)
• External CSS styling for fonts, color, and spacing

Ans:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Section</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<section class="contact">

<h2>Get in Touch</h2>

<ul class="contact-info">
<li>Email: example@email.com</li>
<li>Phone: +91-9876543210</li>
</ul>

<div class="social-icons">
<a href="#"><img src="facebook.png" alt="Facebook"></a>
<a href="#"><img src="twitter.png" alt="Twitter"></a>
<a href="#"><img src="instagram.png" alt="Instagram"></a>
</div>

</section>

</body>
</html>

External CSS File (style.css)

body{
    font-family: Arial, sans-serif;
    background-color:#f4f4f4;
}

.contact{
    background-color:white;
    width:400px;
    margin:auto;
    padding:20px;
    text-align:center;
    border-radius:10px;
}

.contact h2{
    color:#2c3e50;
    margin-bottom:15px;
}

.contact-info{
    list-style:none;
    padding:0;
    font-size:18px;
    color:#333;
}

.contact-info li{
    margin:10px 0;
}

.social-icons img{
    width:35px;
    margin:10px;
}