Practice Problems

Create a new HTML file for each problem to hone these concepts.

File Name: problem1.html
Set up a basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>).
Add a heading (<h1>) titled “My Favorite Website.”
Insert a hyperlink (<a>) to your favorite site using href.
Use target="_blank" to open it in a new tab.
Include a short paragraph explaining why you like it.

File Name: problem2.html
Use the standard HTML structure again.
Insert an image using <img> with a proper src and descriptive alt.
Add a heading (<h2>) describing the image content.
Write a paragraph (<p>) detailing why this image is meaningful or interesting to you.

File Name: problem3.html
Create a banner-like section at the top of the page:
- A heading (<h1>) for your site or blog name.
- Below it, an image (<img>) representing your banner logo or a relevant picture.
Add a link (<a>) below the banner that navigates to a “Contact” or “About” section (link can be a placeholder like href="#").
Write a short paragraph explaining the purpose of your site or blog.

Advanced problems (These may require a bit of researching on how to use some certain tags AKA. Google...)

File Name: problem4.html

Instructions:

HTML Structure: Set up the standard HTML structure (<!DOCTYPE html>, <html>, <head>, <body>).
Heading: Add a heading (<h1>) titled “My Image Gallery.”
Image Grid:
- Insert three different images using the <img> tag.
- For each image, provide appropriate src and alt attributes.
- Set the width of each image to 200 pixels.
Captions:
- Below each image, add a caption using the <figcaption> tag to describe the image.
- Wrap each image and its caption inside a <figure> tag for semantic grouping.
Link to Full Gallery:
- At the bottom of the page, add a link (<a>) labeled “View Full Gallery” that points to # (placeholder).
- Use the title attribute to provide additional information, such as “Click to view the full image gallery.”

Objective: Create a simple image gallery layout that showcases multiple images with captions and includes a navigational link.

File Name: problem5.html

Instructions:

HTML Structure: Begin with the basic HTML structure.
Header Section:
- Add a <header> tag containing a navigation menu.
Navigation Menu:
- Use an unordered list (<ul>) to create the menu items.
- Include at least three navigation links (<a> tags) such as “Home,” “Services,” and “Contact.”
- Each link should have an href attribute pointing to a section ID (e.g., #home, #services, #contact).
Icons:
- Before each link text, insert an image (<img>) that serves as an icon representing the section (e.g., a house icon for Home).
- Provide appropriate src and alt attributes for each icon.
- Set the width of each icon to 20 pixels.
Styling (Optional):
- You may add basic CSS to display the navigation menu horizontally and align the icons with the text.

Objective: Build a navigation menu that incorporates icons alongside link text to enhance visual appeal and user experience.

File Name: problem6.html

Instructions:

HTML Structure: Create a new HTML document with the standard structure.
Heading: Add a heading (<h1>) titled “Explore Our Products.”
Linked Image:
- Insert an image (<img>) representing a product.
- Wrap the <img> tag inside an anchor tag (<a>) to make the image clickable.
- Set the href attribute of the <a> tag to point to a product detail page (use # as a placeholder).
Image Attributes:
- Provide meaningful alt text describing the product.
- Set the width to 300 pixels.
Tooltip:
- Add a title attribute to the <a> tag that displays “View Product Details” when hovered over.
Description:
- Below the linked image, add a paragraph (<p>) that briefly describes the product.

Objective: Create an interactive image that serves as a link to more information, enhanced with a tooltip for better user guidance.

HTML - Working with Links and Images