Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf

HTML
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language used to
create web pages. It structures the content on the web using a series of elements (tags),
which instruct the browser how to display the content. HTML provides the basic
building blocks for every webpage, allowing the use of text, images, links, and
multimedia.
What is a Website?
A website is a collection of web pages linked together under a single domain name.
Websites can be static (with fixed content) or dynamic (content that updates based on
user interaction or other factors). The purpose of a website can range from sharing
information, running online businesses, hosting portfolios, to communicating via blogs
or social media.
Types of Websites
1. Static Websites: Display the same content for every visitor and require manual
updating.
2. Dynamic Websites: Content can change dynamically based on user interaction,
time, or other variables. These often use databases and server-side scripting
languages.
3. E-commerce Websites: Used for online selling, with features like product
listings, shopping carts, and payment gateways.
4. Blog Websites: Continuously updated content, often written in an informal or
conversational style.
5. Portfolio Websites: Showcase an individual’s or company’s work, commonly
used by artists, designers, and freelancers.
6. Corporate Websites: Represent a business or organization, providing information
about services, products, and contact details.
Languages Used for Website Development
1. HTML: The core language for structuring the content of web pages (e.g., text,
images, and links).
2. CSS (Cascading Style Sheets): Used for styling the appearance of web pages,
such as colors, fonts, and layouts.
3. JavaScript: A programming language used for creating interactive and dynamic
content on web pages (e.g., animations, form validations).
4. Server-side Scripting Languages: Include PHP, Python, and Ruby. They handle

dynamic operations on the server, like retrieving data from a database.
5. SQL: A language used for managing and querying databases, often used with
dynamic websites.
Web Page
A web page is a single document that is part of a website. It is written in HTML and
displayed in a browser. Web pages can contain text, images, links, videos, and more.
Every web page has a unique URL (Uniform Resource Locator) that can be accessed via
a web browser.
HTML Tags, Attributes, and Elements
• HTML Tags: Tags are the building blocks of HTML. They define elements in an
HTML document. Tags are enclosed in angle brackets (< >). For example, <p> is
used to define a paragraph.
• Attributes: Attributes provide additional information about an HTML element.
They are used inside the opening tag of an element and usually come in name-
value pairs, such as align="center". For example, in the tag <p
align="center">, align is an attribute.
• HTML Elements: An element typically consists of an opening tag, content, and a
closing tag. For example:
<p>This is a paragraph.</p>
Here, <p> is the opening tag, This is a paragraph. is the content, and
</p> is the closing tag. Together, they form an HTML element.
Basic HTML Tags
• Container Tags: These tags require both an opening and a closing tag. Example:
<p>...</p>, <div>...</div>. They enclose content.
• Empty Tags: These are self-closing tags that do not require an end tag. Example:
<br>, <img src="image.jpg">.
Key HTML Tags
1. <HTML> Tag: The root element of every HTML document. All other tags and
content are contained within the <html> tag. It tells the browser that the content
is written in HTML.

<html> ... </html>
2. <HEAD> Tag: Contains metadata and information about the document that is not
directly displayed on the webpage. It includes things like the title, linked
stylesheets, or scripts.
<head> ... </head>
3. <TITLE> Tag: Sets the title of the webpage, which appears on the browser's title
bar or tab.
<title>My Website Title</title>
4. <BODY> Tag: Contains the main content of the webpage that is displayed to the
user, such as text, images, and links.
<body> ... </body>
Attributes in HTML Tags
• Bgcolor Attribute: Defines the background color of an element or the entire
webpage.
<body bgcolor="lightblue"> ... </body>
• Background Attribute: Specifies a background image for a webpage or
element.
<body background="image.jpg"> ... </body>
Heading Tags (<H1> to <H6>)
HTML has six levels of headings, where <h1> is the largest and most important
heading, and <h6> is the smallest.
<h1>Main Heading</h1>
<h2>Sub-heading</h2>
...
<h6>Smallest Heading</h6>

Paragraph <P> Tag
Defines a block of text (paragraph). Browsers automatically add space before and after
paragraphs.
<p>This is a paragraph.</p>
Attributes for <P> Tag
• align Attribute: Aligns the paragraph's text (left, right, center, or justify).
<p align="center">Centered text.</p>
Line Break <BR> Tag
Inserts a line break where it appears, allowing you to separate lines of text without
starting a new paragraph. The <br> tag is an empty tag (self-closing).
<p>This is a line.<br>This is another line.</p>
Horizontal Rule <HR> Tag
Inserts a horizontal line across the webpage. It is commonly used to separate sections of
content.
<hr>
Attributes for <HR> Tag
• size: Sets the thickness of the horizontal line.
<hr size="3">
• width: Defines the width of the line as a percentage or pixels.
<hr width="50%">
• color: Specifies the color of the line.

<hr color="blue">
<FONT> Tag
The <font> tag is used to change the appearance of text, specifically the font size,
color, and face (typeface). While it is an older tag, CSS is now preferred for styling
fonts.
<font size="4" color="red" face="Arial">This is red text in
Arial.</font>
Attributes for <FONT> Tag:
• size: Sets the font size.
• color: Specifies the color of the text.
• face: Defines the font family (e.g., Arial, Times New Roman).
Comments in HTML
HTML comments are notes added to the code that do not display on the webpage. They
are used to explain parts of the HTML for developers.

Superscript and Subscript
• Superscript (<sup>): Displays text slightly above the normal line of text, often
used for exponents or footnotes.
X<sup>2</sup>
Output: X²
• Subscript (<sub>): Displays text slightly below the baseline, commonly used for
chemical formulas.
H<sub>2</sub>O
Output: H₂O

Images in HTML
The <img> tag is used to embed images in an HTML document. It's an empty tag and
requires attributes to function correctly.
Syntax:
<img src="image.jpg" alt="Description of image" width="500"
height="600">
• src: Specifies the path to the image file (required).
• alt: Provides alternative text if the image cannot be displayed.
• width and height: Set the image's dimensions.
Lists in HTML
HTML supports three types of lists:
1. Ordered Lists (<ol>): Numbered lists.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
2. Unordered Lists (<ul>): Bulleted lists.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
3. Definition Lists (<dl>): Lists of terms and their descriptions.
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>
Tables in HTML
Tables are created using the <table> tag, with rows represented by <tr> and columns

(cells) by <td>.
Basic Table Syntax:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
</tr>
</table>
• <th>: Defines a header cell.
• <td>: Defines a standard table data cell.
Cellspacing and Cellpadding
• cellspacing: Defines the space between cells.
<table cellspacing="10"> ... </table>
• cellpadding: Defines the space between the cell content and the cell border.
<table cellpadding="10"> ... </table>
Aligning Cell Contents within the Cells
• align: Aligns text horizontally inside the cell (left, right, or center).
<td align="center">Centered Text</td>
• valign: Aligns text vertically (top, middle, or bottom).
<td valign="middle">Middle-aligned text</td>

Div and Span Tags
1. <div> Tag: A block-level element used to group content. It's commonly used for
layout purposes and can contain other block-level elements.
<div style="background-color:lightblue;">
<h2>This is a div</h2>
</div>
2. <span> Tag: An inline element used to group content inside other elements. It is
typically used to style parts of text.
<p>This is a <span style="color:red;">red</span>
word.</p>
Hyperlinks in HTML
The <a> tag is used to create hyperlinks.
Syntax:
<a href="https://www.example.com">Click here to visit
Example</a>
• href: Specifies the URL of the page the link goes to.
• target="_blank": Opens the link in a new tab.
Using Image as a Hyperlink
You can use an image as a hyperlink by placing the <img> tag inside the <a> tag.
<a href="https://www.example.com">
<img src="image.jpg" alt="Image Link">
</a>
Linking in HTML
1. Internal Linking: Links to other sections of the same webpage or to other pages
within the same website.
<a href="#section1">Go to Section 1</a>

2. External Linking: Links to an external website.
<a href="https://www.example.com">Visit Example</a>
Inserting Audio and Video in a Webpage
1. Audio: The <audio> tag is used to embed audio files.
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
2. Video: The <video> tag is used to embed video files.
<video controls width="500">
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Forms in HTML
Forms allow users to submit information to the web server.
Basic Form Structure:
<form action="/submit" method="post">

</form>
Common Input Types:
1. Text Input (type="text"): Used for entering single-line text.
<input type="text" name="username">
2. Password Input (type="password"): Hides the text input.
<input type="password" name="password">
3. Email Input (type="email"): Validates email format.
<input type="email" name="email">

4. Checkbox (type="checkbox"): Allows multiple selections.
<input type="checkbox" name="subscribe"
value="newsletter">
5. Radio Button (type="radio"): Allows single selection from a group of
options.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female">
Female
6. Text Area (<textarea>): Allows multi-line text input.
<textarea name="comments"></textarea>
7. File Upload (type="file"): Allows users to upload files.
<input type="file" name="upload">
Special Characters in HTML
Special characters are used to display symbols or reserved HTML characters. They are
written using entities.
Examples:
• &: Displays an ampersand (&).
• <: Displays a less-than sign (<).
• >: Displays a greater-than sign (>).
• ©: Displays the copyright symbol (©).
•  : Adds a non-breaking space.

CSS
Introduction to CSS
• CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML or XML. It controls the layout, colors, fonts, and overall visual
appearance of web pages.
Advantages of CSS
1. Separation of Content and Presentation: CSS allows developers to separate HTML content
from design, making maintenance easier.
2. Consistency Across Pages: CSS styles can be reused across multiple pages, ensuring a
consistent look and feel.
3. Improved Load Times: By using external CSS files, the same stylesheet can be cached by the
browser, speeding up page loading.
4. Flexible Styling: CSS provides a wide range of styling options, including responsive design for
various devices.
Three Ways to Implement CSS
1. Inline CSS:
• Styles are applied directly to HTML elements using the style attribute.
• Example: <h1 style="color: blue;">Hello World</h1>
2. Internal CSS:
• Styles are defined within a <style> tag in the <head> section of the HTML
document.
• Example:
<head>
<style>
body { background-color: lightblue; }
</style>
</head>
3. External CSS:
• Styles are placed in a separate .css file, linked to the HTML document using the
<link> tag.
• Example:
<link rel="stylesheet" href="styles.css">

The CSS Box Model
• The CSS Box Model describes the rectangular boxes generated for elements in the document
tree. It consists of:
• Content: The actual content of the box, such as text or images.
• Padding: Space between the content and the border; it adds space inside the box.
• Border: A border surrounding the padding (if any) and content.
• Margin: Space outside the border that separates the element from others.
CSS Syntax and Tags
• Syntax: A CSS rule consists of a selector and a declaration block.
• Example:
selector {
property: value;
}
• Tags: Common selectors include element selectors (e.g., p, h1), class selectors (e.g.,
.classname), and ID selectors (e.g., #idname).
CSS Comments
• CSS comments are used to add notes within the CSS code and are not rendered in the browser.
They are written as:
/* This is a comment */
CSS Properties for Text in Paragraphs, Body, Headings, etc.
• Text Properties:
• color: Sets the text color (e.g., color: blue;).
• font-size: Specifies the size of the font (e.g., font-size: 16px;).
• font-family: Defines the typeface (e.g., font-family: Arial, sans-
serif;).
• line-height: Sets the height of a line of text (e.g., line-height: 1.5;).
• text-align: Aligns the text (e.g., text-align: center;).
CSS Properties for Lists
• List Properties:
• list-style-type: Specifies the type of bullet for unordered lists (e.g., list-
style-type: disc;).
• list-style-position: Determines the position of the list marker (e.g., list-
style-position: inside;).
• padding and margin: Control the space around list items.

CSS Properties for Tables
• Table Properties:
• border: Defines the border style of a table (e.g., border: 1px solid black;).
• border-collapse: Determines whether table borders should be collapsed into a
single border (e.g., border-collapse: collapse;).
• padding: Adds space within table cells (e.g., padding: 8px;).
• text-align: Aligns text within table cells (e.g., text-align: left;).
CSS Colors
• CSS colors can be defined in various ways:
1. Named Colors: Common color names (e.g., red, blue).
2. Hexadecimal Values: Colors defined by hex codes (e.g., #FF0000 for red).
3. RGB Values: Colors specified using RGB values (e.g., rgb(255, 0, 0) for red).
4. RGBA Values: Similar to RGB but includes an alpha channel for transparency (e.g.,
rgba(255, 0, 0, 0.5)).
1. Which HTML tag defines the title of the webpage (displayed on the browser
tab)?
• a. <name>
• b. <title>
• c. <heading>
• d. <webpage_title>
Answer: b. <title>
2. Which HTML tag defines a paragraph?
• a. <para>
• b. <paragraph>
• c. <p>
• d. <text>
Answer: 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.
Answer: b. <b>text</b>
4. How do you create a horizontal line separator in HTML?
• a. <line>
• b. <hr>
• c. <separator>
• d. <divider>
Answer: b. <hr>
5. Which HTML tag is used to create an image?
• a. <picture>
• b. <image>
• c. <img>
• d. <visual>
Answer: c. <img>
6. What attribute is required in the <img> tag to specify the image source?
• a. <source>
• b. <path>
• c. <file>
• d. <src>
Answer: d. <src>
7. Which HTML tag defines a comment that is not displayed on the webpage?
• a. 
• b. <comment>text</comment>
• c. // comment
• d. <hidden>text</hidden>
Answer: a. 
8. Which HTML tag is used to format text as italic?

• a. <i>
• b. <italic>
• c. <italics>
• d. <it>
Answer: a. <i>
9. Which HTML tag defines a table element?
• a. <table_data>
• b. <table>
• c. <data_table>
• d. <TD>
Answer: b. <table>
10. What tag defines a table row?
• a. <tr>
• b. <row>
• c. <td>
• d. <TR>
Answer: a. <tr>
11. What tag defines a table header cell?
• a. <td>
• b. <th>
• c. <header_cell>
• d. <TDHeader>
Answer: 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
Answer: 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
Answer: 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>
Answer: b. <ol> and </ol>
15. Which HTML tags define unordered lists?
• c. <li> and </li>
Answer: a. <ul> and </ul>
16. What tag defines a list item within an ordered or unordered list?
• **c. <li> and </li>
Answer: c. <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.
Answer: 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
Answer: a. start
19. What symbol is used as a bullet point by default in unordered lists?
• a. Square ( )
❏
• b. Circle (●)
• c. Disc (◦)
• d. Triangle (▲)
Answer: c. Disc (◦)
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>
Answer: b. <ol>...</ol>
21. Which HTML tag is used to create a hyperlink?
• a. <url>
• b. <link>
• c. <a>
• d. <href>
Answer: c. <a>
22. What attribute specifies the destination URL of a hyperlink?
• a. <destination>
• b. <href>
• c. <url>
• d. <linkto>
Answer: 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>
Answer: 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 behavior depends on the specific browser settings.
Answer: 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.
Answer: b. 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 behavior depends on the user's browser settings.
Answer: a. By using the target="_blank" attribute.
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 (including 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 (including protocol, domain name, and
path), while absolute URLs are relative to the current webpage's location.
Answer: b. Absolute URLs specify the complete web address, while relative URLs are relative to the
current webpage's location.

28. Which HTML tag creates a hyperlink (link to another webpage or resource)?
• a. <link>
• b. <url>
• c. <a>
• d. <connect>
Answer: 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>
Answer: 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>
Answer: b. <method>
31. What attribute specifies the URL where the form data should be sent?
• b. <action>
• c. <method>
• d. <form_link>
Answer: b. <action>
31. What attribute specifies the URL of the program that will process the submitted
form data?
• b. <action>
• c. <processor>
• d. <submit_to>
Answer: 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>
Answer: 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.
Answer: b. <label for="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>
Answer: 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.
Answer: 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 a specific attribute with the <input> tag (e.g., <input type="file">).
• b. There is no way to allow file uploads in HTML forms.
• c. This functionality requires additional scripting beyond HTML.
Answer: a. By using the <input type="file"> attribute.
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 from the server.
• d. GET is more secure than POST.
Answer: 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 behavior depends on the specific form elements used.
Answer: b. The form data is sent to the program specified in the <action> attribute.
Objective: To assess knowledge of basic CSS concepts.
39. What does CSS stand for?
• a. Creative Style Sheets
• b. Computer Style Sheets
• c. Cascading Style Sheets
• d. Colorful Style Sheets
Answer: 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.
Answer: 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
Answer: 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
Answer: 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
Answer: 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
Answer: 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
Answer: c. padding
1. Describe the purpose of the <head> and <body> sections in an HTML
document.
• <head> section: It contains metadata and links to external resources (like CSS files, scripts,
and fonts). It does not display content on the webpage. Elements such as <title>, <meta>,
<link>, and <style> are placed here.
• <body> section: It contains the visible content of the webpage, such as text, images, forms,
tables, and hyperlinks. All content that is rendered in the browser is placed inside the <body>

section.
2. Explain how comments are used in HTML code. What is their purpose?
• Comments in HTML are created using  and are not displayed
in the browser. They are used to:
• Explain the purpose of code sections.
• Leave notes for other developers or for future reference.
• Temporarily disable code during debugging.
3. Describe the purpose of a form in HTML. What are some common form
elements used for user input?
• Forms in HTML collect user input and submit it to a server for processing. The form typically
uses the <form> tag and various input elements to capture data.
• Common form elements:
• <input type="text"> for text fields.
• <input type="password"> for passwords.
• <input type="email"> for email input.
• <textarea> for multi-line text input.
• <input type="checkbox"> for checkboxes.
• <input type="radio"> for radio buttons.
• <select> for dropdowns.
• <input type="file"> for file uploads.
4. Explain the difference between the GET and POST methods for submitting form
data. When might you use each method?
• GET method: Sends form data appended to the URL. It is useful for requests where data
retrieval does not modify server-side data, such as search queries.
• POST method: Sends form data in the request body, not in the URL. It is used when sending
sensitive or large amounts of data (like passwords or files), or when updating data on the server.
• Use cases:
• Use GET for non-sensitive data and when bookmarking or sharing URLs is necessary.
• Use POST for sending sensitive data (like login credentials) or when updating a
database.

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?
• HTML elements for feedback form:
• <input type="text" name="name"> to collect the user's name.
• <input type="email" name="email"> to collect the user's email.
• <textarea name="feedback"> for the user to submit their feedback.
• <input type="submit"> to submit the form.
6. Explain how you would use an HTML table to display a timetable for your
school classes.
• Use the <table> element in HTML to create the structure.
• Example:
<table border="1">
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
</tr>
<tr>
<td>Tuesday</td>
<td>History</td>
<td>Math</td>
<td>Physical Education</td>
</tr>
</table>
• Use <th> for table headers (like Day, Period 1, etc.) and <td> for individual class
entries.
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?
• To embed a music player:
<audio controls>
<source src="song.mp3" type="audio/mp3">
Your browser does not support the audio tag.

</audio>
• To display tour dates in a list:
<ul>
<li>March 10, 2024 - New York, NY</li>
<li>April 5, 2024 - Los Angeles, CA</li>
<li>May 15, 2024 - Chicago, IL</li>
</ul>
8. Describe the difference between heading tags (H1-H6) in HTML. How would you
use them to structure your webpage content?
• Heading tags define different levels of headings, with <h1> being the most important
(typically used for titles) and <h6> the least important. They help create a hierarchy for the
content.
• Example of usage:
• <h1> for the main page title.
• <h2> for section titles.
• <h3> for subsection titles.
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?
• Bulleted list (unordered):
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
• Numbered list (ordered):
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
• Advantages of lists:
• They help organize information.
• Enhance readability.
• Group related items.

10. How can you create a hyperlink in HTML? Explain the different attributes you
can use with the <a> tag.
• To create a hyperlink:
<a href="https://example.com">Visit Example</a>
• Attributes:
• href: Specifies the URL.
• target="_blank": Opens the link in a new tab.
• title: Adds a tooltip when the user hovers over the link.
11. Describe how to create and format a table in HTML. What are the benefits of
using tables for web page content?
• Creating a table:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
</table>
• Benefits:
• Organizes data in a structured format.
• Useful for displaying tabular information like schedules and prices.
12. What is CSS? Give its three advantages.
• CSS (Cascading Style Sheets) is used to style and layout web pages.
• Advantages:
1. Separates content from design.
2. Allows for consistent styling across multiple pages.
3. Reduces page load time by reusing CSS files.
13. Differentiate between Inline, Internal, and External CSS.
• Inline CSS: Styles applied directly to an element using the style attribute.
• Example: <p style="color: red;">Text</p>
• Internal CSS: Styles placed within the <style> tag inside the <head> section of the HTML
document.

• Example:
<style>
p { color: red; }
</style>
• External CSS: Styles placed in a separate .css file and linked using the <link> tag.
• Example:
<link rel="stylesheet" href="styles.css">
14. What is the purpose of the <style> tag in HTML?
• The <style> tag allows you to embed CSS rules within the <head> of an HTML document,
enabling internal CSS styling.
15. Explain the concept of the CSS Box Model and its components.
• The CSS Box Model is a layout model for HTML elements, consisting of:
1. Content: The actual content (text, images).
2. Padding: Space between the content and the border.
3. Border: Surrounds the padding.
4. Margin: Space outside the border, separating elements.
16. How can you change the font size, color, and background color of elements
using CSS?
• Example CSS:
p {
font-size: 16px;
color: blue;
background-color: yellow;
}
17. What are the three different ways to give colors in CSS?
• Color formats:
1. Named colors: color: red;
2. Hex codes: color: #ff0000;
3. RGB values: color: rgb(255, 0, 0);

18. How can you create a border around an image using CSS?
• Example CSS:
img {
border: 2px solid black;
}

Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf

Recommended

More Related Content

Similar to Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf (20)

Recently uploaded (20)

Chapter 2 Notes, MCQs, and QA (HTML and CSS).pdf