Scribd
Upload
12 views61 pages

Practice Question HTML

The document provides various HTML programming exercises, demonstrating the use of different HTML tags and structures. It includes examples of formatting text, creating lists, defining terms, adding hyperlinks, displaying tables, and showing images. Each section contains code snippets along with explanations of the HTML elements used.

Uploaded by

monalitupat8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views61 pages

Practice Question HTML

The document provides various HTML programming exercises, demonstrating the use of different HTML tags and structures. It includes examples of formatting text, creating lists, defining terms, adding hyperlinks, displaying tables, and showing images. Each section contains code snippets along with explanations of the HTML elements used.

Uploaded by

monalitupat8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 61

Practice Questions HTML

Question: Write an HTML program that demonstrates the use of the


following formatting tags: • Bold • Italic • Underline • Strikethrough •
Subscript and Superscript Expected Output: The text should appear in
bold, italic, underlined, with strikethrough, and subscripts/superscripts
where applicable.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Formatting Tags Demo</title>

</head>

<body>

<p>

This is <b>bold</b> text.

</p>

<p>

This is <i>italic</i> text.

</p>

<p>

This is <u>underlined</u> text.

</p>

<p>

This is <strike>strikethrough</strike> text.

</p>
<p>

This is text with subscript: H<sub>2</sub>O.

</p>

<p>

This is text with superscript: X<sup>2</sup> + Y<sup>2</sup>.

</p>

<p>

This is <b><i><u><strike>All combined</strike></u></i></b>.

</p>

</body>

</html>

Explanation:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page (which is shown in


the browser's title bar or in the page's tab).

4. <body>: Contains the visible page content.

5. <p>: Defines a paragraph.

6. <b>: Defines bold text.

7. <i>: Defines italic text.

8. <u>: Defines underlined text.

9. <strike>: Defines strikethrough text. (Alternatively, you can use


<del> or <s> for the same effect, which are semantically more
accurate.)

10. <sub>: Defines subscripted text.


11. <sup>: Defines superscripted text.

12. the final paragraph shows how to combine many of the tags.

Question: Create an ordered list in HTML displaying the top 5


programming languages with: 1. Numbers 2. Uppercase letters 3. Roman
numerals Expected Output: Three separate ordered lists with different
numbering styles.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Top Programming Languages</title>

</head>

<body>

<h2>Top 5 Programming Languages (Numbers)</h2>

<ol>

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

<h2>Top 5 Programming Languages (Uppercase Letters)</h2>

<ol type="A">

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>
</ol>

<h2>Top 5 Programming Languages (Roman Numerals)</h2>

<ol type="I">

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

</body>

</html>

Explanation:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

4. <body>: Contains the visible page content.

5. <h2>: Defines a level 2 heading.

6. <ol>: Defines an ordered list.

o type="1" (default): Numbers (1, 2, 3, etc.)

o type="A": Uppercase letters (A, B, C, etc.)

o type="I": Uppercase Roman numerals (I, II, III, etc.)

7. <li>: Defines a list item.

How to change the starting number/letter/numeral:

You can add the start attribute to the <ol> tag to change the starting
value. For example:

HTML
<ol type="A" start="5">

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

This would start the list with "E".

HTML

<ol type="I" start="5">

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

This would start the list with "V".

HTML

<ol start="5">

<li>Python</li>

<li>JavaScript</li>

<li>Java</li>

<li>C++</li>

<li>C#</li>

</ol>

This would start the list with "5".

Question: Write an HTML program to display a list of your favorite foods


using different bullet styles (circle, square, disc). Expected Output: The
items should be displayed with different bullet styles in separate
unordered lists.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Favorite Foods</title>

</head>

<body>

<h2>Favorite Foods (Disc)</h2>

<ul style="list-style-type:disc;">

<li>Pizza</li>

<li>Sushi</li>

<li>Pasta</li>

<li>Burgers</li>

<li>Ice Cream</li>

</ul>

<h2>Favorite Foods (Circle)</h2>

<ul style="list-style-type:circle;">

<li>Pizza</li>

<li>Sushi</li>

<li>Pasta</li>

<li>Burgers</li>

<li>Ice Cream</li>

</ul>

<h2>Favorite Foods (Square)</h2>


<ul style="list-style-type:square;">

<li>Pizza</li>

<li>Sushi</li>

<li>Pasta</li>

<li>Burgers</li>

<li>Ice Cream</li>

</ul>

</body>

</html>

Explanation:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

4. <body>: Contains the visible page content.

5. <h2>: Defines a level 2 heading.

6. <ul>: Defines an unordered list.

7. style="list-style-type: ...": This inline CSS style attribute is used


to change the bullet style of the list.

o disc: Fills the bullet (default).

o circle: Creates a hollow circle bullet.

o square: Creates a square bullet.

8. <li>: Defines a list item.

Question: Create an HTML definition list (<dl>) to define the following


terms: • HTML: HyperText Markup Language • CSS: Cascading Style
Sheets • JavaScript: A programming language for web development
Expected Output: Each term should be properly defined using a definition
list format.

HTML
<!DOCTYPE html>

<html>

<head>

<title>Definition List</title>

</head>

<body>

<h2>Web Development Definitions</h2>

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>

<dd>A programming language for web development</dd>

</dl>

</body>

</html>

Explanation:

 <!DOCTYPE html>: Declares the document type as HTML5.

 <html>: The root element of an HTML page.

 <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.1

 <body>: Contains the visible page content.

 <h2>: Defines a level 2 heading.


 <dl>: Defines a definition list.

 <dt>: Defines a term (definition term).

 <dd>: Defines a description of the term (definition description).

Question: Write an HTML program that includes: 1. A hyperlink to Google


that opens in a new tab. 2. A link to a local page (about.html). 3. A
bookmark link to a section within the same page. Expected Output:
Clickable links that navigate to external, internal, and bookmark sections.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Link Demo</title>

</head>

<body>

<h1>Link Examples</h1>

<p>

<a href="https://www.google.com" target="_blank">Visit Google (New


Tab)</a>

</p>

<p>

<a href="about.html">About Page (Local)</a>

</p>

<p>

<a href="#section2">Jump to Section 2</a>

</p>
<h2 id="section1">Section 1</h2>

<p>This is the first section of the page.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do


eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>

<h2 id="section2">Section 2</h2>

<p>This is the second section of the page.</p>

<p>Another paragraph of Lorem ipsum dolor sit amet, consectetur


adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>

</body>

</html>

Explanation:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

4. <body>: Contains the visible page content.

5. <h1> and <h2>: Heading elements for the page.

6. <p>: Paragraph elements.

7. <a> (anchor) tag: Creates a hyperlink.


o href="https://www.google.com": Specifies the URL of the
link (external link).

o target="_blank": Opens the link in a new browser tab or


window.

o href="about.html": Specifies the path to a local HTML file


(internal link). Make sure you have a file named about.html in
the same directory as this HTML file.

o href="#section2": Creates a bookmark link that jumps to an


element with the id "section2" (bookmark link).

8. id="section1" and id="section2": These id attributes create


anchors within the page that can be linked to.

o The # symbol in the href attribute of the bookmark link refers


to the id of the element you want to jump to.

To test the local link:

1. Save the above code as an HTML file (e.g., links.html).

2. Create another HTML file named about.html in the same directory.

3. Open links.html in your browser.

4. Click the "About Page (Local)" link. It should open about.html.

Question: Create an HTML table displaying the top 3 movies of 2024 with
the following columns: • Rank • Movie Name • IMDB Rating Expected
Output: A table with 3 rows displaying rank, name, and rating values.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Top 3 Movies of 2024</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

padding: 8px;
text-align: left;

</style>

</head>

<body>

<h2>Top 3 Movies of 2024</h2>

<table>

<thead>

<tr>

<th>Rank</th>

<th>Movie Name</th>

<th>IMDB Rating</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Dune: Part Two</td>

<td>8.0</td>

</tr>

<tr>

<td>2</td>

<td>Kung Fu Panda 4</td>

<td>6.7</td>

</tr>

<tr>

<td>3</td>
<td>Godzilla x Kong: The New Empire</td>

<td>6.4</td>

</tr>

</tbody>

</table>

</body>

</html>

Explanation:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

o <style>: Contains CSS styles for the table.

 border: 1px solid black;: Adds a 1-pixel solid black


border to the table, table headers, and table data cells.

 border-collapse: collapse;: Collapses the borders into a


single border.

 padding: 8px;: Adds 8 pixels of padding to the table data


cells.

 text-align: left;: Aligns the text in the table data cells to


the left.

4. <body>: Contains the visible page content.

5. <h2>: Defines a level 2 heading.

6. <table>: Defines an HTML table.

7. <thead>: Defines a set of table headers.

o <tr>: Defines a table row.

o <th>: Defines a table header cell.

8. <tbody>: Defines a set of table body content.

o <tr>: Defines a table row.


o <td>: Defines a table data cell.

Important Note: IMDB ratings are subject to change. The movie listing is
based on information available as of the time of this response.

Question: Write an HTML code to display an image from a local folder and
another image from an online source (URL). Expected Output: Both
images should be properly displayed, with alt text in case they don't load.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Image Display</title>

</head>

<body>

<h2>Local Image</h2>

<img src="images/local_image.jpg" alt="Local Image Description"


width="300" height="200">

<h2>Online Image</h2>

<img src="https://via.placeholder.com/300x200" alt="Online Image


Description" width="300" height="200">

</body>

</html>

Explanation and Important Notes:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.

3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

4. <body>: Contains the visible page content.


5. <h2>: Defines a level 2 heading.

6. <img>: Defines an image.

o src="images/local_image.jpg": Specifies the path to the


local image file.

 Important: You need to create a folder named images


in the same directory as your HTML file.

 Place your local image file (named local_image.jpg in


this example) inside the images folder.

 Change the filename and path accordingly if your image


has a different name or is in a different location.

o alt="Local Image Description": Provides alternative text


for the image. This text is displayed if the image cannot be
loaded. Always include alt text for accessibility.

o src="https://via.placeholder.com/300x200": Specifies the


URL of the online image. I used placeholder image URL, but
you can change it to any valid image URL.

o alt="Online Image Description": Provides alternative text


for the online image.

o width="300" and height="200": Sets the width and height


of the images in pixels. It's good practice to specify
dimensions to prevent layout shifts.

How to test:

1. Local Image:

o Save the HTML code as an HTML file (e.g., images.html).

o Create a folder named images in the same directory as


images.html.

o Place an image file (e.g., local_image.jpg) inside the images


folder.

o Open images.html in your browser.

2. Online Image:

o Open the same images.html file. The online image should load
if you have an internet connection.

o If you change the url, make sure the new url points to a valid
image.
Question: Create an HTML page that: 1. Plays an audio file (MP3 format)
with controls. 2. Plays a video file (MP4 format) with controls and autoplay
enabled. Expected Output: An audio player and a video player should be
displayed with proper controls.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Audio and Video Demo</title>

</head>

<body>

<h2>Audio Player</h2>

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

<h2>Video Player</h2>

<video controls autoplay width="640" height="360">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

</body>

</html>

Explanation and Important Notes:

1. <!DOCTYPE html>: Declares the document type as HTML5.

2. <html>: The root element of an HTML page.


3. <head>: Contains meta-information about the HTML page.

o <title>: Specifies a title for the HTML page.

4. <body>: Contains the visible page content.

5. <h2>: Defines level 2 headings.

6. <audio>: Defines an audio player.

o controls: Displays audio controls (play, pause, volume, etc.).

o <source src="audio.mp3" type="audio/mpeg">:


Specifies the audio file source and type.

 Important: You need to place your audio.mp3 file in the


same directory as your HTML file.

 Change the filename if your audio file has a different


name.

o "Your browser does not support the audio element.":


This message is displayed if the browser doesn't support the
<audio> tag.

7. <video>: Defines a video player.

o controls: Displays video controls.

o autoplay: Starts playing the video automatically when the


page loads.

o width="640" and height="360": Sets the width and height


of the video player. Adjust as needed.

o <source src="video.mp4" type="video/mp4">: Specifies


the video file source and type.

 Important: You need to place your video.mp4 file in the


same directory as your HTML file.

 Change the filename if your video file has a different


name.

o "Your browser does not support the video element.":


This message is displayed if the browser doesn't support the
<video> tag.

To test:

1. Save the HTML code as an HTML file (e.g., media.html).


2. Place your audio.mp3 and video.mp4 files in the same directory as
media.html.

3. Open media.html in your browser.

4. The audio and video players should appear with controls. The video
should start playing automatically.

5. If the audio or video does not play, make sure that the files are in
the same directory as the html file, and that the file names match.
Also, make sure that the files are valid mp3 and mp4 files.

Question 1: Create an HTML document that demonstrates the difference


between <b>and <strong> , as well as <i> and <em> .

HTML

<!DOCTYPE html>

<html>

<head>

<title>Semantic vs. Presentational Tags</title>

</head>

<body>

<h1>Semantic vs. Presentational Tags</h1>

<p>

<b>This text is bold (using &lt;b&gt;).</b><br>

<strong>This text is strong (using &lt;strong&gt;).</strong>

</p>

<p>

<i>This text is italic (using &lt;i&gt;).</i><br>

<em>This text is emphasized (using &lt;em&gt;).</em>

</p>
<h2>Explanation</h2>

<p>

While both <code>&lt;b&gt;</code> and <code>&lt;strong&gt;</code>


make text bold, and both <code>&lt;i&gt;</code> and
<code>&lt;em&gt;</code> make text italic, they have different
meanings.

</p>

<p>

<code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> are


presentational tags. They only affect the appearance of the text.

</p>

<p>

<code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> are


semantic tags. They indicate that the text is important or emphasized,
respectively. Screen readers and search engines can use this information
to better understand the content.

</p>

<p>

For accessibility and SEO, it's generally recommended to use


<code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> instead of
<code>&lt;b&gt;</code> and <code>&lt;i&gt;</code>.

</p>

</body>

</html>

Key Improvements and Explanations:

 Semantic vs. Presentational: The title and headings clearly


explain the purpose of the demonstration.
 Code Examples: The HTML code shows the tags in action, making
it easy to see the visual difference.

 Clear Explanations: The explanations clearly differentiate between


presentational and semantic tags.

 Accessibility and SEO: The document emphasizes the importance


of using semantic tags for accessibility and search engine
optimization.

 Code Tags: The <code> tags are used to display the HTML tag
names, improving readability.

 Line Breaks: <br> elements are used to separate the bold/strong


and italic/em text on separate lines within the paragraphs, making
the output more visually clear.

 HTML Structure: Proper use of headings (<h1>, <h2>) and


paragraphs (<p>) improves the structure and readability of the
document.

Question 2:

Write an HTML snippet that displays a quote block, a highlighted text, and
a code snippet

using <blockquote> ,<mark> , and <code> , respectively.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Quote, Highlight, Code Snippet</title>

</head>

<body>

<h2>Quote Block</h2>

<blockquote cite="https://example.com/quote-source">

This is a sample quote block. It is used to display long quotations.

</blockquote>
<h2>Highlighted Text</h2>

<p>This sentence contains <mark>highlighted text</mark> for


emphasis.</p>

<h2>Code Snippet</h2>

<p>Here's a snippet of code: <code>const myVariable = "Hello,


world!";</code></p>

</body>

</html>

Explanation of the snippet:

1. <blockquote>:

o This tag is used for longer quotations.

o The cite attribute (optional) provides the source of the quote.

o Browsers typically render <blockquote> with indentation,


visually separating it from surrounding text.

2. <mark>:

o This tag is used to highlight text within a paragraph or other


inline content.

o It's often rendered with a yellow background, drawing


attention to the marked text.

3. <code>:

o This tag is used to define a fragment of computer code.

o It is used for inline code. It does not preserve whitespace or


line breaks.

o For multi line code snippets the <pre> tag should be used in
conjunction with the <code> tag.

o In this example, it's used to display a simple JavaScript


variable declaration.
Question 3: Create a paragraph where certain words are formatted using
(superscript) and
(subscript). Example: H₂O, X² + Y² = Z².

HTML

<!DOCTYPE html>

<html>

<head>

<title>Superscript and Subscript Example</title>

</head>

<body>

<p>

The chemical formula for water is H<sub>2</sub>O.

The Pythagorean theorem is represented as X<sup>2</sup> +


Y<sup>2</sup> = Z<sup>2</sup>.

</p>

<p>

Here is another example: 10<sup>3</sup> = 1000 and


CO<sub>2</sub> is carbon dioxide.

</p>

</body>

</html>

Explanation:

 <sub> (subscript):

o Renders text slightly below the normal baseline.

o Useful for chemical formulas (like H₂O) and mathematical


subscripts.

 <sup> (superscript):

o Renders text slightly above the normal baseline.


o Useful for exponents (like X²) and mathematical superscripts.

 The example paragraphs demonstrate how to use these tags within


normal text to create the desired formatting.

 The examples show common usage of these tags.

Ordered List

Question 1: Create an ordered list displaying the steps to bake a cake.


Use a different type attribute (1, A, a, I, i) in five different lists.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Baking a Cake</title>

</head>

<body>

<h2>Steps to Bake a Cake (Numbers)</h2>

<ol type="1">

<li>Preheat the oven.</li>

<li>Mix the dry ingredients.</li>

<li>Cream the butter and sugar.</li>

<li>Add eggs and vanilla extract.</li>

<li>Combine wet and dry ingredients.</li>

<li>Pour batter into a greased pan.</li>

<li>Bake until golden brown.</li>

<li>Let it cool.</li>

<li>Frost the cake.</li>

<li>Enjoy!</li>

</ol>
<h2>Steps to Bake a Cake (Uppercase Letters)</h2>

<ol type="A">

<li>Preheat the oven.</li>

<li>Mix the dry ingredients.</li>

<li>Cream the butter and sugar.</li>

<li>Add eggs and vanilla extract.</li>

<li>Combine wet and dry ingredients.</li>

<li>Pour batter into a greased pan.</li>

<li>Bake until golden brown.</li>

<li>Let it cool.</li>

<li>Frost the cake.</li>

<li>Enjoy!</li>

</ol>

<h2>Steps to Bake a Cake (Lowercase Letters)</h2>

<ol type="a">

<li>Preheat the oven.</li>

<li>Mix the dry ingredients.</li>

<li>Cream the butter and sugar.</li>

<li>Add eggs and vanilla extract.</li>

<li>Combine wet and dry ingredients.</li>

<li>Pour batter into a greased pan.</li>

<li>Bake until golden brown.</li>

<li>Let it cool.</li>

<li>Frost the cake.</li>

<li>Enjoy!</li>

</ol>

<h2>Steps to Bake a Cake (Uppercase Roman Numerals)</h2>


<ol type="I">

<li>Preheat the oven.</li>

<li>Mix the dry ingredients.</li>

<li>Cream the butter and sugar.</li>

<li>Add eggs and vanilla extract.</li>

<li>Combine wet and dry ingredients.</li>

<li>Pour batter into a greased pan.</li>

<li>Bake until golden brown.</li>

<li>Let it cool.</li>

<li>Frost the cake.</li>

<li>Enjoy!</li>

</ol>

<h2>Steps to Bake a Cake (Lowercase Roman Numerals)</h2>

<ol type="i">

<li>Preheat the oven.</li>

<li>Mix the dry ingredients.</li>

<li>Cream the butter and sugar.</li>

<li>Add eggs and vanilla extract.</li>

<li>Combine wet and dry ingredients.</li>

<li>Pour batter into a greased pan.</li>

<li>Bake until golden brown.</li>

<li>Let it cool.</li>

<li>Frost the cake.</li>

<li>Enjoy!</li>

</ol>

</body>

</html>
Explanation:

 <ol> (Ordered List):

o Defines an ordered list.

o The type attribute specifies the numbering style:

 type="1": Numbers (1, 2, 3, ...)

 type="A": Uppercase letters (A, B, C, ...)

 type="a": Lowercase letters (a, b, c, ...)

 type="I": Uppercase Roman numerals (I, II, III, ...)

 type="i": Lowercase Roman numerals (i,1 ii, iii, ...)

 <li> (List Item):

o Defines each item in the ordered list.

 The code creates five ordered lists, each with the same cake-baking
steps, but with a different numbering style.

Question 2: Write an ordered list where each list item contains another
ordered list (nested list). Example: 1. Fruits 1. Apple 2. Banana 3.
Orange

HTML

<!DOCTYPE html>

<html>

<head>

<title>Nested Ordered Lists</title>

</head>

<body>

<h2>Nested Ordered Lists Example</h2>

<ol>

<li>Fruits

<ol type="a">
<li>Apple</li>

<li>Banana</li>

<li>Orange</li>

</ol>

</li>

<li>Vegetables

<ol type="a">

<li>Carrot</li>

<li>Broccoli</li>

<li>Spinach</li>

</ol>

</li>

<li>Desserts

<ol type="a">

<li>Chocolate Cake</li>

<li>Ice Cream</li>

<li>Cookies</li>

</ol>

</li>

</ol>

</body>

</html>

Explanation:

1. <ol> (Outer Ordered List):

o Defines the main ordered list.

2. <li> (Outer List Items):

o Each <li> within the outer <ol> represents a main category


(Fruits, Vegetables, Desserts).
3. <ol type="a"> (Inner Ordered List):

o Inside each outer <li>, another <ol> is nested.

o type="a" specifies that the inner lists should use lowercase


letters for numbering.

o You can change the type attribute as needed (e.g., type="1",


type="I").

4. <li> (Inner List Items):

o Each <li> within the inner <ol> represents a sub-item within


the category.

How it Works:

 The outer list creates the main categories.

 The inner lists create sub-lists within each category, providing a


hierarchical structure.

 The browser automatically handles the indentation and numbering


of the nested lists.

11. Unordered List

Question 1: Create an unordered list of different types of cars, using all


possible values of the type attribute.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Car Types</title>

</head>

<body>

<h2>Car Types (Disc - Default)</h2>

<ul style="list-style-type: disc;">

<li>Sedan</li>

<li>SUV</li>
<li>Hatchback</li>

<li>Convertible</li>

</ul>

<h2>Car Types (Circle)</h2>

<ul style="list-style-type: circle;">

<li>Sedan</li>

<li>SUV</li>

<li>Hatchback</li>

<li>Convertible</li>

</ul>

<h2>Car Types (Square)</h2>

<ul style="list-style-type: square;">

<li>Sedan</li>

<li>SUV</li>

<li>Hatchback</li>

<li>Convertible</li>

</ul>

<h2>Car Types (None)</h2>

<ul style="list-style-type: none;">

<li>Sedan</li>

<li>SUV</li>

<li>Hatchback</li>

<li>Convertible</li>

</ul>

</body>
</html>

Explanation and Important Notes:

 <ul> (Unordered List):

o Defines an unordered list.

 <li> (List Item):

o Defines each item in the unordered list.

 style="list-style-type: ...":

o This is an inline CSS style attribute used to set the bullet style.

o disc: (Default) A filled circle.

o circle: A hollow circle.

o square: A filled square.

o none: Removes the bullets entirely.

Key points:

 The type attribute for <ul> is deprecated in HTML5. Use CSS list-
style-type instead.

 The example above shows how to use inline styles. For better code
organization and maintainability, it is recommended to use external
or internal CSS stylesheets.

Question 2: Write an HTML snippet that displays an unordered list of


countries, where each country has an unordered sublist of its famous
tourist attractions.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Countries and Attractions</title>

</head>

<body>
<h2>Countries and Tourist Attractions</h2>

<ul>

<li>France

<ul>

<li>Eiffel Tower</li>

<li>Louvre Museum</li>

<li>Notre Dame Cathedral</li>

</ul>

</li>

<li>Italy

<ul>

<li>Colosseum</li>

<li>Vatican City</li>

<li>Leaning Tower of Pisa</li>

</ul>

</li>

<li>Japan

<ul>

<li>Tokyo Tower</li>

<li>Kyoto Temples</li>

<li>Mount Fuji</li>

</ul>

</li>

<li>United States

<ul>

<li>Statue of Liberty</li>

<li>Grand Canyon</li>

<li>Walt Disney World</li>


</ul>

</li>

</ul>

</body>

</html>

Explanation:

1. <ul> (Outer Unordered List):

o Defines the main unordered list of countries.

2. <li> (Outer List Items):

o Each <li> represents a country.

3. <ul> (Inner Unordered List):

o Inside each country's <li>, another <ul> is nested.

o This inner <ul> represents the list of tourist attractions for


that country.

4. <li> (Inner List Items):

o Each <li> within the inner <ul> represents a tourist


attraction.

How it Works:

 The outer <ul> creates the main list of countries.

 The inner <ul> elements create sublists of tourist attractions for


each country, creating a hierarchical structure.

 The browser automatically handles the indentation, visually


indicating the nested structure.

12.Definition List

Question 1: Write an HTML program that creates a definition list for


web technologies, including HTML, CSS, JavaScript, and Python.

HTML

<!DOCTYPE html>

<html>
<head>

<title>Web Technologies Definition List</title>

</head>

<body>

<h2>Web Technologies</h2>

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language: The standard markup language for


creating web pages.</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets: A style sheet language used for


describing the presentation of a document written in HTML or
XML.</dd>

<dt>JavaScript</dt>

<dd>A scripting language that enables you to create dynamically


updating content, control multimedia, animate images, and pretty
much everything else.</dd>

<dt>Python</dt>

<dd>A high-level, interpreted, general-purpose programming


language often used for web development, data science, and
more.</dd>

</dl>

</body>

</html>

Explanation:
 <dl> (Definition List): This tag defines the overall definition list.

 <dt> (Definition Term): This tag defines the term being defined
(e.g., HTML, CSS, JavaScript, Python).

 <dd> (Definition Description): This tag provides the definition or


description of the term.

How it Works:

 The <dl> tag wraps the entire list.

 Each term is enclosed within <dt> tags.

 The corresponding definition or description for each term is enclosed


within <dd> tags.

 Browsers typically render definition lists with the terms (<dt>) on


the left and the descriptions (<dd>) indented on the right.

Question 2: Modify the above definition list to include styling using


inline CSS, changing the font and background color of definitions.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Styled Web Technologies Definition List</title>

</head>

<body>

<h2>Styled Web Technologies</h2>

<dl>

<dt>HTML</dt>

<dd style="font-family: 'Arial', sans-serif; background-color: #f0f8ff;


padding: 5px;">HyperText Markup Language: The standard markup
language for creating web pages.</dd>

<dt>CSS</dt>
<dd style="font-family: 'Verdana', sans-serif; background-color:
#e0f2f7; padding: 5px;">Cascading Style Sheets: A style sheet
language used for describing the presentation of a document written in
HTML or XML.</dd>

<dt>JavaScript</dt>

<dd style="font-family: 'Courier New', monospace; background-color:


#f8f8ff; padding: 5px;">A scripting language that enables you to
create dynamically updating content, control multimedia, animate
images, and pretty much everything else.</dd>

<dt>Python</dt>

<dd style="font-family: 'Georgia', serif; background-color: #f0fff0;


padding: 5px;">A high-level, interpreted, general-purpose
programming language often used for web development, data science,
and more.</dd>

</dl>

</body>

</html>

Changes and Explanations:

1. Inline CSS:

o The style attribute is added to each <dd> tag. This allows us


to apply CSS styles directly to the definition descriptions.

2. font-family:

o This CSS property is used to change the font of the text.

o Different font families are used for each definition to


demonstrate the change.

o Font fallback is used (e.g., 'Arial', sans-serif) in case the


primary font is not available.

3. background-color:

o This CSS property is used to change the background color of


the definition descriptions.
o Different subtle background colors are used to visually
distinguish each definition.

4. padding:

o This CSS property adds some padding inside the <dd>


elements, making the text look less cramped.

5. Important: While inline CSS is used here for simplicity, it's


generally recommended to use external or internal CSS stylesheets
for more organized and maintainable code.

13. Linking
Question 1: Create a navigation menu with links to Home, About,
Services, and Contact Us using an unordered list.

HTML
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: hidden;
}

nav li {
float: left;
}

nav li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

nav li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>

</body>
</html>
Explanation:
1. <!DOCTYPE html>: Declares the document type as HTML5.
2. <html>: The root element of an HTML page.
3. <head>: Contains meta-information about the HTML page.
o <title>: Specifies a title for the HTML page.
o <style>: Contains CSS styles to format the navigation menu.
 nav ul: Removes default list styling, margins, and
padding. Sets background color and overflow.
 nav li: Floats list items to create a horizontal menu.
 nav li a: Styles the links as block elements, sets colors,
alignment, padding, and removes underlines.
 nav li a:hover: Changes the background color on hover.
4. <body>: Contains the visible page content.
5. <nav>: Defines a section of navigation links.
6. <ul>: Defines an unordered list for the navigation menu.
7. <li>: Defines list items (navigation links).
8. <a>: Defines hyperlinks.
o href: Specifies the URL of the linked page.
o The link text (e.g., "Home") is displayed to the user.
9. Important:
o Replace "index.html", "about.html", "services.html", and
"contact.html" with the actual file paths of your pages.
o The CSS styles provide a basic horizontal navigation menu.
You can customize the styles to match your design
preferences.
o This example uses an internal style sheet. For larger projects,
external style sheets are recommended.

Question 2: Create a table of contents with bookmark links (#id)


that scroll to different sections of the same page.

HTML
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents with Bookmarks</title>
<style>
body {
font-family: sans-serif;
}
#toc {
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 20px;
}
section {
padding: 20px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<div id="toc">
<h2>Table of Contents</h2>
<ul>
<li><a href="#section1">Section 1 - Introduction</a></li>
<li><a href="#section2">Section 2 - Main Content</a></li>
<li><a href="#section3">Section 3 - Conclusion</a></li>
</ul>
</div>

<section id="section1">
<h2>Section 1 - Introduction</h2>
<p>This is the introduction section of the page. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
<p>More intro text here.</p>
</section>

<section id="section2">
<h2>Section 2 - Main Content</h2>
<p>This is the main content section. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>More main content text here.</p>
<p>Even more main content text here.</p>
</section>

<section id="section3">
<h2>Section 3 - Conclusion</h2>
<p>This is the conclusion section. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>More conclusion text here.</p>
</section>

</body>
</html>
Explanation:
1. Table of Contents (TOC):
o A div with id="toc" is created to hold the table of contents.
o An unordered list (<ul>) is used to create the list of links.
o Each list item (<li>) contains an anchor tag (<a>).
o The href attribute of each anchor tag uses the # symbol
followed by the id of the corresponding section (e.g.,
href="#section1").
2. Sections:
o section elements are used to divide the page into distinct
sections.
o Each section has a unique id attribute (e.g., id="section1").
This id is the target of the bookmark links.
o The section elements contain headings (<h2>) and
paragraphs (<p>) with content.
3. CSS:
o Basic CSS is added to style the TOC and sections.
o The TOC has a light gray background.
o Sections have padding and a bottom border to separate them.
4. How it Works:
o When a link in the TOC is clicked, the browser smoothly scrolls
to the section with the matching id.
o This provides a convenient way to navigate long pages.
o The sections are styled to provide visual separation.

Question 3: Write an HTML page that contains: • A relative link to a page


named services.html • An absolute link to an external website • An email
link (mailto:)

HTML

<!DOCTYPE html>

<html>

<head>

<title>Link Types</title>

</head>

<body>

<h1>Link Examples</h1>

<p>

<a href="services.html">Services Page (Relative Link)</a>

</p>

<p>

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


Website (Absolute Link)</a>

</p>

<p>
<a href="mailto:contact@example.com">Email Us (Mailto Link)</a>

</p>

</body>

</html>

Explanation:

1. Relative Link (href="services.html"):

o This link points to a file named services.html located in the


same directory as the current HTML file.

o Relative links are used for linking to pages within the same
website.

o To test this, you would need to create a file named


services.html in the same folder as this html file.

2. Absolute Link (href="https://www.example.com"):

o This link points to an external website using its full URL


(including the https:// protocol).

o Absolute links are used for linking to pages on other websites.

o The target="_blank" attribute opens the link in a new browser


tab or window.

3. Email Link (href="mailto:contact@example.com"):

o This link uses the mailto: protocol to create an email link.

o When clicked, it opens the user's default email client and


creates a new email message addressed to
contact@example.com.

o Replace contact@example.com with the actual email address


you want to use.

14. Tables
Question 1: Create a table that displays a weekly class schedule,
where: • Rows represent days (Monday to Friday). • Columns
represent subjects.

HTML
<!DOCTYPE html>

<html>

<head>

<title>Weekly Class Schedule</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

padding: 8px;

text-align: center;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2>Weekly Class Schedule</h2>

<table>

<thead>

<tr>

<th>Day</th>

<th>Math</th>

<th>Science</th>

<th>English</th>

<th>History</th>

</tr>
</thead>

<tbody>

<tr>

<td>Monday</td>

<td>9:00 AM</td>

<td>10:00 AM</td>

<td>11:00 AM</td>

<td>1:00 PM</td>

</tr>

<tr>

<td>Tuesday</td>

<td>10:00 AM</td>

<td>11:00 AM</td>

<td>1:00 PM</td>

<td>2:00 PM</td>

</tr>

<tr>

<td>Wednesday</td>

<td>9:00 AM</td>

<td>1:00 PM</td>

<td>2:00 PM</td>

<td>11:00 AM</td>

</tr>

<tr>

<td>Thursday</td>

<td>2:00 PM</td>

<td>9:00 AM</td>

<td>10:00 AM</td>

<td>1:00 PM</td>
</tr>

<tr>

<td>Friday</td>

<td>11:00 AM</td>

<td>2:00 PM</td>

<td>9:00 AM</td>

<td>10:00 AM</td>

</tr>

</tbody>

</table>

</body>

</html>

Explanation:

1. <table>: Defines the table.

2. <thead>: Defines the table header.

o <tr>: Defines a table row within the header.

o <th>: Defines table header cells (e.g., "Day," "Math").

3. <tbody>: Defines the table body.

o <tr>: Defines table rows for each day.

o <td>: Defines table data cells (e.g., "Monday," "9:00 AM").

4. CSS:

o border: 1px solid black; border-collapse: collapse;: Adds


borders and collapses them for a clean look.

o padding: 8px; text-align: center;: Adds padding and centers


the text within cells.

o th { background-color: #f2f2f2; }: Sets a light gray


background for header cells.

5. The times are examples, and can be changed to any schedule.


Question 2: Create a table that includes rowspan and colspan to merge
cells for a conference agenda.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Conference Agenda</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2>Conference Agenda</h2>

<table>

<thead>

<tr>

<th>Time</th>

<th>Session</th>

<th>Speaker</th>
</tr>

</thead>

<tbody>

<tr>

<td>9:00 AM - 10:00 AM</td>

<td colspan="2">Opening Ceremony</td>

</tr>

<tr>

<td>10:00 AM - 11:30 AM</td>

<td>Keynote: Future of Technology</td>

<td>Dr. Jane Smith</td>

</tr>

<tr>

<td rowspan="2">11:30 AM - 1:00 PM</td>

<td>Workshop 1: Web Development</td>

<td>John Doe</td>

</tr>

<tr>

<td>Workshop 2: Data Science</td>

<td>Alice Johnson</td>

</tr>

<tr>

<td>1:00 PM - 2:00 PM</td>

<td colspan="2">Lunch Break</td>

</tr>

<tr>

<td>2:00 PM - 3:30 PM</td>

<td>Panel Discussion: AI and Society</td>

<td>Panel of Experts</td>
</tr>

<tr>

<td rowspan="2">3:30 PM - 5:00 PM</td>

<td>Breakout Session A</td>

<td>Some Speaker</td>

</tr>

<tr>

<td>Breakout Session B</td>

<td>Another Speaker</td>

</tr>

</tbody>

</table>

</body>

</html>

Explanation:

 colspan="2":

o This attribute is used in the "Opening Ceremony" and "Lunch


Break" rows.

o It makes those cells span across two columns, effectively


merging them.

 rowspan="2":

o This attribute is used in the workshop and breakout sessions.

o It makes those cells span across two rows, effectively merging


them vertically.

 Table Structure:

o The table is organized with columns for "Time," "Session," and


"Speaker."

o The <thead> and <tbody> tags are used to structure the


table content.

 CSS:
o Basic CSS is applied to add borders, collapse borders, add
padding, and style the header cells.

 The example shows how rowspan and colspan can be used to create
complex table layouts.

Question 3: Write an HTML table to display student records with headers:


ID, Name, Age, Grade. Add a row with sample data.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Student Records</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2>Student Records</h2>

<table>

<thead>
<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

<th>Grade</th>

</tr>

</thead>

<tbody>

<tr>

<td>12345</td>

<td>Alice Smith</td>

<td>16</td>

<td>A</td>

</tr>

<tr>

<td>67890</td>

<td>Bob Johnson</td>

<td>17</td>

<td>B+</td>

</tr>

<tr>

<td>13579</td>

<td>Charlie Brown</td>

<td>15</td>

<td>C</td>

</tr>

</tbody>

</table>
</body>

</html>

Explanation:

1. <table>: Defines the HTML table.

2. <thead>: Defines the table header section.

o <tr>: Defines a table row within the header.

o <th>: Defines table header cells (ID, Name, Age, Grade).

3. <tbody>: Defines the table body section.

o <tr>: Defines a table row for each student record.

o <td>: Defines table data cells containing the student's ID,


Name, Age, and Grade.

4. CSS:

o Basic CSS is included to add borders, collapse borders, add


padding, and style the header cells for better readability.

o The table and its cells have a black border.

o The header cells have a light gray background.

o The cells have padding to provide spacing around the content.

o The text is left-aligned within the cells.

5. The table now contains three sample student records.

15. Images

Question 1: Display an image using the <img> tag and adjust the
height and width using inline CSS.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Image with Inline Styling</title>

</head>

<body>
<h2>Image Display</h2>

<img src="my_image.jpg" alt="A descriptive image"


style="width:500px; height:300px;">

</body>

</html>

Key improvements and explanations:

1. Clearer Title: The <title> tag is more descriptive ("Image with


Inline Styling").

2. Heading: An <h2> heading is added to provide context ("Image


Display").

3. Descriptive alt Text: The alt attribute is now "A descriptive


image." It's crucial to replace this with a truly relevant description of
your actual image.

4. Inline style Attribute:

o style="width:500px; height:300px;" is used to set the image's


dimensions.

o The width is set to 500 pixels, and the height is set to 300
pixels. You can modify these values as needed.

5. File Path:

o src="my_image.jpg": This attribute specifies the path to the


image.

o Crucially, you must replace "my_image.jpg" with the


actual filename and path of your image file. If the image
is in the same directory as your HTML file, you can use just the
filename. If it's in a different directory, you'll need to provide
the correct relative or absolute path.

6. Accessibility: The alt attribute is essential for accessibility. Screen


readers use it to describe the image to visually impaired users.

7. CSS Best Practices: While inline CSS is used in this example for
simplicity, it's generally better practice to use external or internal
stylesheets for larger projects. This allows for better organization
and maintainability of your CSS code.

Question 2: Write an HTML page that displays three images side by


side using the <img> tag inside a table.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Images in Table</title>

<style>

table {

width: 100%; /* Table takes up 100% of the width */

border-collapse: collapse; /* Removes spacing between table cells */

td {

text-align: center; /* Centers images horizontally */

padding: 10px; /* Adds padding around images */

img {

max-width: 100%; /* Images scale down if needed */

height: auto; /* Maintains aspect ratio */

</style>

</head>

<body>

<h2>Images Side by Side in a Table</h2>

<table>
<tr>

<td><img src="image1.jpg" alt="Image 1 description"></td>

<td><img src="image2.jpg" alt="Image 2 description"></td>

<td><img src="image3.jpg" alt="Image 3 description"></td>

</tr>

</table>

</body>

</html>

Key improvements and explanations:

 Clearer Title: The <title> is more descriptive ("Images in Table").

 Heading: An <h2> heading ("Images Side by Side in a Table")


provides context.

 Table Structure:

o The <table> element creates the table.

o The <tr> element creates a table row.

o The <td> elements create table data cells, each containing an


image.

 Images:

o Three <img> elements are used, one for each image.

o Crucially, replace "image1.jpg", "image2.jpg", and


"image3.jpg" with the actual filenames and paths to
your image files.

o alt attributes are provided for each image. Always use


descriptive alt text for accessibility.

 CSS:

o table { width: 100%; }: Ensures the table takes up the full


width of its container.

o table { border-collapse: collapse; }: Removes default spacing


between table cells.
o td { text-align: center; padding: 10px; }: Centers the images
horizontally and adds padding around them.

o img { max-width: 100%; height: auto; }: Makes the images


responsive. max-width: 100%; ensures they don't exceed the
width of their cells, and height: auto; maintains their aspect
ratio.

 Accessibility: The alt attributes are essential for accessibility.

 Responsiveness: The CSS ensures that the images scale


proportionally within their cells.

 Filepaths: Remember to change the image filepaths.

Question 3: Create an image that acts as a clickable link to another


website.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Image Link</title>

</head>

<body>

<h2>Clickable Image</h2>

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

<img src="my_image.jpg" alt="Link to example.com" style="width:


300px; height: 200px;">

</a>

<p>Click the image above to visit example.com.</p>

</body>
</html>

Explanation:

1. <a> (Anchor Tag):

o The <a> tag creates the hyperlink.

o href="https://www.example.com": This attribute specifies the


URL of the website to link to. Replace
"https://www.example.com" with the actual URL.

o target="_blank": This attribute opens the link in a new tab or


window.

2. <img> (Image Tag):

o The <img> tag is placed inside the <a> tag, making the
image clickable.

o src="my_image.jpg": This attribute specifies the path to the


image file. Replace "my_image.jpg" with the actual
filename and path.

o alt="Link to example.com": This attribute provides alternative


text for the image. Always use descriptive alt text.

o style="width: 300px; height: 200px;": This attribute sets the


image's dimensions using inline CSS. You can adjust the width
and height as needed.

3. Paragraph:

o The <p> tag provides a brief description of the link.

4. File Paths:

o Important: Make sure to replace "my_image.jpg" with the


correct file path to your image. If the image is in the same
directory as your HTML file, you can just use the filename. If
it's in a different directory, provide the relative or absolute
path.

5. Accessibility:

o The alt attribute is crucial for accessibility. Screen readers use


it to describe the image.

6. URL:

o Remember to change the url in the href attribute to the


desired website.
16. Audio and Video

Question 1: Embed an MP3 file with controls so the user can play,
pause, and adjust volume.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Audio Player</title>

</head>

<body>

<h2>MP3 Audio Player</h2>

<audio controls>

<source src="your_audio.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Explanation:

1. <audio> Tag:

o The <audio> tag is used to embed audio content in the HTML


document.

o controls: This attribute adds audio controls (play, pause,


volume, etc.) to the player.

2. <source> Tag:

o The <source> tag specifies the audio file and its type.
o src="your_audio.mp3": This attribute specifies the path to the
MP3 file. Replace "your_audio.mp3" with the actual
filename and path of your audio file.

o type="audio/mpeg": This attribute specifies the MIME type of


the audio file.

3. Fallback Text:

o "Your browser does not support the audio element." This text
is displayed if the user's browser doesn't support the <audio>
tag.

4. File Path:

o Important: Make sure to replace "your_audio.mp3" with the


correct file path to your audio file. If the audio file is in the
same directory as your HTML file, you can just use the
filename. If it's in a different directory, provide the relative or
absolute path.

Question 2: Embed a YouTube video inside an HTML page using the tag.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Embed YouTube Video</title>

</head>

<body>

<h2>Embedded YouTube Video</h2>

<iframe width="560" height="315"


src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-
write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</body>

</html>

Key improvements and explanations:

1. Correct src URL:

o The src attribute now uses the correct YouTube embed URL
format: https://www.youtube.com/embed/VIDEO_ID.

o Crucially, you must replace VIDEO_ID with the actual ID


of the YouTube video you want to embed.

2. How to Get the Embed Code:

o Go to the YouTube video you want to embed.

o Click the "Share" button below the video.

o Click the "Embed" button.

o Copy the <iframe> code provided by YouTube.

o Paste it into your HTML document.

3. width and height:

o These attributes set the dimensions of the embedded player.

o You can change these values to adjust the player's size.

4. title:

o The title attribute is essential for accessibility. It provides a


description of the embedded content.

5. frameborder:

o frameborder="0" removes the border around the embedded


player.

6. allow:

o The allow attribute specifies the features the embedded


player is allowed to use.

o web-share enables the share button in embedded videos.

7. allowfullscreen:

o The allowfullscreen attribute allows users to view the video in


fullscreen mode.

8. Replace VIDEO_ID:
o Remember to replace VIDEO_ID with the actual ID of
the YouTube video.

9. Example:

o If you want to embed the video with the ID dQw4w9WgXcQ,


your code would look like this:

HTML

<iframe width="560" height="315"


src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-
share" allowfullscreen></iframe>

Question 3: Write an HTML page with an MP4 video, ensuring it: • Has
controls • Autoplays when the page loads • Loops continuously

HTML

<!DOCTYPE html>

<html>

<head>

<title>MP4 Video Autoplay Loop</title>

</head>

<body>

<h2>Video with Autoplay and Loop</h2>

<video controls autoplay loop width="640" height="360">

<source src="my_video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>

Explanation:
1. <video> Tag:

o The <video> tag is used to embed video content.

2. controls Attribute:

o The controls attribute adds video controls (play, pause,


volume, etc.).

3. autoplay Attribute:

o The autoplay attribute makes the video start playing


automatically when the page loads. Note that some browsers
may block autoplay for videos with sound, so the user might
have to manually unmute.

4. loop Attribute:

o The loop attribute makes the video loop continuously.

5. width and height Attributes:

o The width and height attributes set the dimensions of the


video player.

o Adjust these values as needed.

6. <source> Tag:

o The <source> tag specifies the video file and its type.

o src="my_video.mp4": This attribute specifies the path to the


MP4 file. Replace "my_video.mp4" with the actual
filename and path of your video file.

o type="video/mp4": This attribute specifies the MIME type of


the video file.

7. Fallback Text:

o "Your browser does not support the video tag." This text is
displayed if the user's browser doesn't support the <video>
tag.

8. File Paths:

o Crucially, replace "my_video.mp4" with the actual


filename and path of your video file. If the video is in the
same directory as your HTML file, you can just use the
filename. If it's in a different directory, provide the relative or
absolute path.
9. Browser Autoplay Policies: Be aware that modern browsers have
autoplay policies that may prevent videos from automatically
playing, especially if they have sound. The user may need to
interact with the page or unmute the video.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy