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.

Once you’ve completed these exercises, call Mike over for feedback on your newly created HTML documents.

Advance 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.

Day 2- Working with Links and Images