Section 2.15 - ICT 280: Introduction to Web Development |2.15 LAB: HTML practice

1/27/25, 11:49 PM Section 2.15 - ICT 280: Introduction to Web Development | zyBooks




2.15 LAB: HTML practice


fullscreen
LAB
ACTIVITY
2.15.1: LAB: HTML practice open_in_new


This lab consists of two HTML files, a CSS file, and an image file. The index.html file
contains <section> and <h2> elements for each of the numbered items below. Implement
each item below between the corresponding <section> and </section> tags. Do not remove
any existing tags in index.html.


1. (2 points)

Given:

Your work is going to fill a large part of your life, and the
only way to be truly satisfied is to do what you believe is
great work. And the only way to do great work is to love what
you do. If you haven't found it yet, keep looking. Don't settle.
As with all matters of the heart, you'll know when you find it.
-- Steve Jobs

a. Copy and paste the entire quote.
b. Use two <p> elements, one for the quote and another for -- Steve Jobs.
c. Use an <i> element in the first paragraph to enclose the entire quote.


2. (1 point)

Print an ampersand in an HTML comment:

<!-- & -->
Place the answer inside a <p> element. Use character entities for the <, >, and & characters
only so the actual tags are visible on the webpage.
Ex: &lt;img src="test.png"&gt; renders as <img src="test.png">


3. (1 point)

Using character entities for < and >, print:

<p>Nice!</p>
Like the previous solution, the actual tags should be visible on the webpage.
https://learn.zybooks.com/zybook/UNMICT280Spring2025/chapter/2/section/15 1/11

, 1/27/25, 11:49 PM Section 2.15 - ICT 280: Introduction to Web Development | zyBooks


4. (1 point)

Create two links in two separate paragraphs:

a. To fixit.html, which is in the same directory as index.html, using link text "Fix it",
without the quotes.
b. To the "Garbage Disposal" section (the 2nd section) in fixit.html, using link text "Fix
your garbage disposal", without the quotes.


5. (1 point)

Create an image link to https://www.zybooks.com/, using the zyBooks_logo.png image,
which is in the same directory as index.html. The image's alt text should read "zyBooks
logo".


6. (2 points)

Recreate the list shown in the image below:




The outer list is an order list, and the nested lists are unordered.


7. (2 points)

Create a table with three rows and three columns. The top row contains one cell that spans
three columns. The leftmost cell on the next row spans two rows. All other cells span a
single row and column.

Each cell has only a single number. The image below shows what the table should look like.
CSS is used to give the table and cells a gray border.




https://learn.zybooks.com/zybook/UNMICT280Spring2025/chapter/2/section/15 2/11