Step 4: CSS Navigation Bars and Web Images Tutorial

1. CSS Navigation Bar

Navigation bars are crucial for any website, providing a user-friendly way to navigate through the site. With CSS, you can transform simple HTML menus into stylish navigation bars.

Navigation Bar = List of Links

A navigation bar is fundamentally a list of links, making the <ul> and <li> elements a logical choice.

Example:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

To style the list as a navigation bar, start by removing bullets, and default margins and paddings:

Example:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Vertical Navigation Bar

For a vertical navigation bar, style the <a> elements within the list, in addition to the previous styles:

Example:

li a {
    display: block;
    width: 60px; /* Adjust as necessary */
}

Vertical Navigation Bar Example:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px; /* Adjust width as needed */
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

2. Adding Images to Web Pages

Images can be embedded in a webpage via CSS, offering advantages such as responsive design adjustments. CSS can change an image's display properties based on the screen size, ensuring optimal layout across devices.

Image File Types

• .jpg: Small file sizes facilitate quicker loading times, ideal for photographs due to good color reproduction. However, quality may decrease when scaled up.
• .png: Known for supporting transparencies and maintaining color depth with high quality, but larger file sizes may slow down web loading times.
• .gif: Best suited for animations, offering small file sizes and sharp image quality. Though it supports transparency, it can result in a halo effect around images.
• .svg (Scalable Vector Graphics): Excellent for graphics that need to scale without loss of quality, such as logos and icons.
• .webp: Offers superior compression techniques, achieving high quality with smaller file sizes compared to jpg and png. Well-supported in modern browsers.
• .pdf: While not traditionally used for web images, PDFs are becoming more common for certain types of web content.
• .tiff: Once used in early web design, TIFF files are now impractical for web use due to their size.

Steps for Implementing an Image

1. Determine the maximum display dimensions of the image.
2. Use an image editor like Photoshop or a free alternative to create a canvas at the desired size.
3. Insert the image onto the canvas and adjust its size appropriately.
4. Save the image in the chosen format, considering the balance between quality and file size.
5. Include the image in your HTML using the <img> tag or CSS, depending on the context and requirements for responsiveness.
6. For responsive design, use CSS to control the image's max-width and height properties, ensuring it scales properly across devices.

Steps for Getting an Image Ready for Web Use

1. Edit the image to the largest needed size, considering the viewing context and device types.
2. Save the image for the web, choosing a format that offers a good balance between quality and load time.
3. Use tools or plugins within your image editing software to further optimize the image size without sacrificing quality.
4. Test the image's load time on various devices and connections to ensure a good user experience.

Always store original, unedited image files separately for future editing needs.

To embed an image in your page:

1. Determine the correct placement in your HTML code.
2. Embed the image using the <img> tag, and then adjust its width and height for responsiveness.
3. Ensure the 'alt' attribute is descriptive and accessible, improving SEO and accessibility for users with visual impairments.

Example: