HTML and CSS - Questions and Answers

HTML Basics

Lists, Tables & Images

Links, Media & Forms

I. Fill in the Blanks

1. ______ documents are made up of text content and special codes.

HTML documents are made up of text content and special codes.

2. ______ are used to write notes about an HTML document.

Comments are used to write notes about an HTML document.

3. HTML document is saved with an extension ______.

HTML document is saved with an extension .html or .htm.

4. ______ are used to view the HTML documents.

Web browsers are used to view the HTML documents.

5. The ______ element include both on and off tags.

The container element include both on and off tags.

6. The ______ element splits the line and displays the text on a new line.

The <br> element splits the line and displays the text on a new line.

II. Multiple Choice Questions

1. Which is the correct way to comment out something in HTML?

ii. Using <!- and -->

The correct syntax for HTML comments is

2. The ______ tag draws a horizontal line across the web page.

ii. <hr>

The <hr> tag creates a horizontal rule (line) across the web page.

3. ______ provides a set of style rules for defining the layout of the HTML documents.

i. CSS

CSS (Cascading Style Sheets) provides style rules for defining the layout of HTML documents.

4. A property and its value are collectively known as ______

iii. Declaration

In CSS, a property and its value together form a declaration.

5. Which tag indicates the beginning and end of the HTML documents?

iii. <HTML>

The <html> tag indicates the beginning and end of an HTML document.

6. Which of the following is used to define the style for a single HTML page?

ii. Internal CSS

Internal CSS is used to define styles for a single HTML page using the <style> tag in the head section.

III. Application Based Questions

1. Yashvi was styling an HTML document using CSS. She wants to add styles directly to an HTML tag using the style attribute with the tag. How can she do this?

Yashvi can use Inline CSS by adding the style attribute directly to the HTML tag.

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

2. Rohan wants to divide his web page into different sections so that the content is easily readable. Which tag can he use for this? Which attributes can he use to define some extra properties of this tag?

Rohan can use the <div> tag to divide his web page into sections.

He can use attributes like:

id - to give a unique identifier
class - to apply CSS styles
style - for inline styling

<div id="header" class="section" style="background-color: #f0f0f0;">
<h1>Website Header</h1>
</div>

3. Kirti wants to set the image of a park as the background of her web page but she is unable to do it. Which tag should she use to do so? Give the syntax.

Kirti should use CSS to set a background image, not an HTML tag. She can use the background-image property in CSS.

IV. Answer the Following

1. What is a markup language?

A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text. It uses tags to define elements within the document. HTML is the most popular markup language for creating web pages.

2. Write some features of HTML.

Features of HTML:

Platform independent
Easy to learn and use
Supports multimedia elements
Provides semantic structure to web content
Supports hyperlinks for navigation
Works with CSS for styling

3. Explain the terms tags and attributes with the help of an example.

Tags: HTML tags are the hidden keywords within a web page that define how the browser must format and display the content.

Attributes: HTML attributes provide additional information about HTML elements.

<a href="https://www.example.com" target="_blank">Visit Example</a>

In this example:

<a> is the tag (anchor tag)
href and target are attributes
"https://www.example.com" and "_blank" are attribute values

4. How are comments useful?

Comments in HTML are useful for:

Explaining the code for future reference
Temporarily disabling code without deleting it
Making notes for other developers
Documenting the purpose of different sections
Debugging by commenting out problematic code

5. What are Cascading Style Sheets? Name the different methods available for applying Style rules in an HTML document.

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.

Different methods for applying CSS:

Inline CSS - Using the style attribute within HTML tags
Internal CSS - Using <style> tag in the head section
External CSS - Linking to an external .css file using <link> tag

6. Differentiate between Internal CSS and External CSS.

Aspect	Internal CSS	External CSS
Location	Placed within the <style> tag in the HTML document's head section	Placed in a separate .css file
Reusability	Styles apply only to the current document	Styles can be reused across multiple HTML pages
File Organization	HTML and CSS code are in the same file	HTML and CSS are in separate files
Loading Speed	Faster for single page as no external file needs to be loaded	Can be cached by browser, making subsequent page loads faster
Maintenance	Harder to maintain for multiple pages	Easier to maintain as changes affect all linked pages

I. Fill in the Blanks

1. By default, the unordered lists items are marked with ______.

By default, the unordered lists items are marked with bullets (discs).

2. ______ attribute of list lets you reverse the order of the item list.

reversed attribute of list lets you reverse the order of the item list.

3. A list inside another list is called as a ______ list.

A list inside another list is called as a nested list.

4. A collection of related elements is called as ______.

A collection of related elements is called as list.

5. ______ property of table defines the space between the content of the table and the border.

padding property of table defines the space between the content of the table and the border.

6. The <img> tag is an ______ tag, that means it has no closing tag.

The <img> tag is an empty tag, that means it has no closing tag.

7. ______ is an attribute of the <img> tag which specifies the location or URL of the image to be displayed.

src is an attribute of the <img> tag which specifies the location or URL of the image to be displayed.

8. ______ attribute is used to give border to an image.

border attribute is used to give border to an image.

II. Multiple Choice Questions

1. Which tag is used for List items?

b. <LI>

The <li> tag is used for list items in both ordered and unordered lists.

2. Which element contains definition?

b. <DD>

The <dd> tag is used to describe a term/name in a description list.

3. Which of the following can't be the value of list-style-type?

c. Ellipse

Ellipse is not a valid value for list-style-type property.

4. Which attribute is only used with <ol>?

d. start

The start attribute is used only with ordered lists (<ol>) to specify the start value of the list.

5. With the help of which tag, is a row defined in HTML?

b. <tr>

The <tr> tag defines a row in an HTML table.

6. By using which of the following options, the border of table can be collapsed?

a. border-collapse: collapse

The CSS property border-collapse: collapse is used to collapse table borders into a single border.

7. Web browsers display images in the following format

d. All of these

Web browsers can display images in XBM, GIF, JPEG, and other formats like PNG, SVG, etc.

8. The correct HTML code for inserting an image is

c. <img src = "image.gif">

This is the correct syntax for inserting an image in HTML.

9. src attribute used with <img> tag stands for

b. source

The src attribute stands for "source" and specifies the path to the image.

10. alt attribute allows

d. addition of alternative text about an image

The alt attribute provides alternative text for an image if it cannot be displayed.

III. Application Based Questions

a. Ruchika was making an ordered list and she noticed that the items of the list by default started with numbers. She wants to use Roman numerals for numbering. How can she do this?

Ruchika can use the type attribute with the <ol> tag and set it to "I" for uppercase Roman numerals or "i" for lowercase Roman numerals.

<ol type="I">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

b. Rohan has created a table and he wants that the table border should be collapsed into a single border. Which property should he use?

Rohan should use the CSS property border-collapse: collapse on the table element.

c. Ashmita has added few images on her web page but she wants to keep some provisions for the visually impaired people or users using text-based browsers so that they get the description for the images. Which attribute should she use to accomplish the task?

Ashmita should use the alt attribute with the <img> tag to provide alternative text for the images.

IV. Answer the Following

a. Differentiate between the <OL> and <UL> tag.

Aspect	<OL> (Ordered List)	<UL> (Unordered List)
Purpose	Creates a numbered list	Creates a bulleted list
Default Marker	Numbers (1, 2, 3...)	Bullets (•)
Use Case	When order or sequence matters	When order doesn't matter
Attributes	type, start, reversed	type

b. Write the syntax for using list-style-type property.

The syntax for using list-style-type property in CSS:

selector {
list-style-type: value;
}

Examples:

ul {
list-style-type: square;
}

ol {
list-style-type: upper-roman;
}

c. Define Padding property.

The padding property in CSS is used to generate space around an element's content, inside of any defined borders. It clears an area around the content of an element.

Padding can be specified using:

padding-top
padding-right
padding-bottom
padding-left
Or the shorthand: padding: top right bottom left;

d. What is description list? Define the different tags used to create a description.

A description list is a list of terms with their descriptions. It's created using the <dl> tag.

Tags used in description lists:

<dl> - Defines the description list
<dt> - Defines the term (name)
<dd> - Describes each term

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

e. What is the use of type attribute with an unordered list?

The type attribute with an unordered list specifies the type of marker to use in the list. Possible values are:

disc - Default, filled circle
circle - Hollow circle
square - Filled square
none - No marker

f. State the use of any two properties that you use to enhance the appearance of a table.

Two properties to enhance table appearance:

border-collapse - Specifies whether table borders should be collapsed into a single border or separated
background-color - Sets the background color for table cells, rows, or the entire table

table {
border-collapse: collapse;
background-color: #f9f9f9;
}

g. How are images added in an HTML document?

Images are added in an HTML document using the <img> tag with the src attribute specifying the image source.

Common attributes used with <img> tag:

src - Specifies the path to the image
alt - Specifies an alternate text for the image
width - Specifies the width of the image
height - Specifies the height of the image
title - Provides additional information about the image

I. Fill in the Blanks

1. The web pages of a website are linked to each other using ______.

The web pages of a website are linked to each other using hyperlinks.

2. The attribute ______ is used to create a hyperlink between two or more HTML codes.

The attribute href is used to create a hyperlink between two or more HTML codes.

3. When you move the mouse pointer over a link, the mouse pointer changes its shape from an arrow to a ______.

When you move the mouse pointer over a link, the mouse pointer changes its shape from an arrow to a hand.

4. The ______ attribute of the <audio> tag indicates that you can replay the audio file once it is finished.

The loop attribute of the <audio> tag indicates that you can replay the audio file once it is finished.

5. The small rectangular areas created in the main browser window are known as ______.

The small rectangular areas created in the main browser window are known as frames.

6. The ______ attribute of the frame tag tells the browser which HTML page to load into that frame.

The src attribute of the frame tag tells the browser which HTML page to load into that frame.

7. ______ attribute of the frame tag attaches the default URL.

src attribute of the frame tag attaches the default URL.

8. ______ allow multiple HTML documents to be presented as independent windows within one browser window.

Frames allow multiple HTML documents to be presented as independent windows within one browser window.

9. The ______ tag collects the information from the user.

The <form> tag collects the information from the user.

II. Multiple Choice Questions

1. A ______ is a word, a group of words, or an image that can be used to jump to another document on the same website or another website.

i. Hyperlink

A hyperlink is used to jump to another document or website.

2. The ______ attribute of the <a> tag is used to set the URL of the target resource.

ii. href

The href attribute specifies the URL of the page the link goes to.

3. Which of the following can be embedded in a web page?

iii. Both (i) and (ii)

Both audio and video can be embedded in a web page using <audio> and <video> tags.

4. The ______ attribute of the <video> tag plays the video file automatically on loading a web page.

ii. Autoplay

The autoplay attribute makes the video play automatically when the page loads.

5. ______ tag is used to create textbox, radio button and checkbox on the web page.

ii. <INPUT>

The <input> tag is used to create various form controls including textbox, radio button, and checkbox.

III. Application Based Questions

1. Rohan wants to divide a web page into four sections. Which tag should he use to accomplish this?

Rohan can use the <frameset> tag to divide a web page into sections, but note that frames are deprecated in HTML5. For modern web development, he should use CSS with <div> elements and CSS Grid or Flexbox.

<frameset cols="25%,25%,25%,25%">
  <frame src="section1.html">
  <frame src="section2.html">
  <frame src="section3.html">
  <frame src="section4.html">
</frameset>

2. Rahim is creating a website in which he wants to use different images as links to the web pages. He is also interested in adding some video clips in his website. Can you suggest him the required tags to include the said elements in his website.

For image links, Rahim should use the <a> tag with an <img> tag inside:

For video clips, he should use the <video> tag:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

3. Ritika was writing an article using HTML. The article contains some external links to other website contains additional information. How can she link these together so that the user can visit the destination of the external links by clicking on them?

Ritika can use the <a> tag with the href attribute pointing to the external URLs. She should also use the target="_blank" attribute to open links in a new tab.

For more information, visit <a href="https://www.example.com" target="_blank">Example Website</a>.

4. Priyanka wants to create a form but she has forgotten the tag used to create the form. Can you help her with the solution?

Priyanka should use the <form> tag to create a form. The basic structure is:

IV. Answer the Following

1. Why do you include hyperlinks in your web page? Give any two reasons.

Reasons to include hyperlinks in a web page:

Navigation: To allow users to move between different pages of a website or to external resources.
Reference: To provide sources, citations, or additional information related to the content.

2. Distinguish between the internal and external linking.

Aspect	Internal Linking	External Linking
Definition	Links that point to other pages within the same website	Links that point to pages on different websites
URL Format	Relative URLs (about.html) or absolute URLs with same domain	Absolute URLs with different domains (https://example.com)
Purpose	Website navigation and structure	Referencing external sources and resources
SEO Impact	Improves internal link structure and user experience	Can provide credibility and reference value

3. What are frames? How are they useful?

Frames allow you to divide the browser window into multiple sections, each of which can display a different HTML document.

Usefulness of frames:

Allow displaying multiple documents simultaneously
Can keep navigation elements visible while content changes
Useful for creating dashboard-like interfaces

Note: Frames are deprecated in HTML5 and should be avoided in modern web development. CSS and JavaScript are preferred for creating similar layouts.

4. What are two types of text input in HTML web forms?

Two types of text input in HTML forms:

Single-line text input: Created using <input type="text">
Multi-line text input: Created using <textarea> tag

<input type="text" name="username">


<textarea name="message" rows="4" cols="50"></textarea>

5. Which input control is most useful for questions requiring a simple yes or no answer?

The radio button or checkbox input controls are most useful for yes/no questions.

<input type="radio" id="yes" name="answer" value="yes">
<label for="yes">Yes</label>
<input type="radio" id="no" name="answer" value="no">
<label for="no">No</label>

6. What is the use of password control in HTML forms?

The password control (<input type="password">) is used to create a text field where the entered characters are masked (usually shown as dots or asterisks) to protect sensitive information like passwords from being seen by others.

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

7. What is the use of <INPUT> tag?

The <input> tag is used to create various form controls that allow users to input data. It's the most important form element.

Common input types:

text - Single-line text input
password - Password field
radio - Radio button
checkbox - Checkbox
submit - Submit button
reset - Reset button
file - File upload
email - Email address input
number - Number input

8. What are the uses of Submit and Reset buttons?

Submit Button:

Sends the form data to the server for processing
Created using <input type="submit"> or <button type="submit">

Reset Button:

Clears all form fields and resets them to their default values
Created using <input type="reset"> or <button type="reset">