Practice Problems

Create a new HTML file for each problem to apply today’s concepts.

File Name: problem1.html
Create a basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>).
Add a <h1> heading titled “Grocery List.”
Insert an unordered list (<ul>) with at least 5 grocery items (<li>).
End with a short paragraph about which item is most important.

File Name: problem3.html
Set up the standard HTML structure.
Add a <div> (block element) with some text, and within it, include a <span> (inline element) to highlight a word in a different color or style.
Underneath, add another <p> describing the difference you observe between block and inline behaviors.
(Optional) Include another inline element, like <strong>, to emphasize a key term.

Advanced Problems

File Name: problem4.html

Instructions:

Basic Structure: Start with the standard HTML document structure (<!DOCTYPE html>, <html>, <head>, <body>).
Heading: Add a <h1> heading titled “My Favorite Movies”.
Main List: Create an unordered list (<ul>) that lists 3 movie genres (e.g., Action, Comedy, Drama).
Nested Lists: For each genre, add a nested ordered list (<ol>) that includes at least 2 of your favorite movies from that genre.
Paragraph: At the end of the list, add a <p> that explains which genre you enjoy the most and why.

File Name: problem5.html

Instructions:

Basic Structure: Begin with the standard HTML document structure.
Header: Add a <header> element containing a <h1> with the title “My Website”.
Navigation Menu: Inside the <header>, create a navigation bar using an unordered list (<ul>).
Inline Links: Each list item (<li>) should contain an inline <a> (anchor) element linking to different sections of the website (e.g., Home, About, Contact).
Styling (Optional): Use inline CSS styles to display the list items horizontally (e.g., display: inline; margin-right: 10px;).
Paragraph: Below the navigation menu, add a <p> that briefly describes the purpose of the website.

File Name: problem6.html

Instructions:

Basic Structure: Set up the standard HTML document structure.
Article Section: Add an <article> element containing the content.
Headings: Within the <article>, include a <h2> titled “Daily Schedule”.
Mixed Lists:
- Create an ordered list (<ol>) for your daily tasks.
- Within one of the list items, include an unordered list (<ul>) of sub-tasks.
Inline Styling: Use inline elements such as <strong> or <em> within list items to emphasize important tasks.
Paragraphs: Add a <p> before and after the list explaining your schedule’s structure and the importance of organization.
Footer: Include a <footer> with a block-level element that contains your contact information, using inline elements for email and phone links.

HTML - Creating Lists and Understanding Block vs. Inline Elements