Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

Inserting and Styling Images in HTML: Best Practices for Beginners

October 18, 2024

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Insertion and Styling</title>
<style>
.image-container {
text-align: center; /* Centers the image horizontally */
background-color: #f0f0f0; /* Light gray background */
padding: 20px;
border: 2px solid #ddd; /* Adding a border around the container */
}
.highlight {
color: red;
font-weight: bold;
}
.img-span {
border: 2px solid blue; /* Adding a blue border around the image */
display: inline-block;
padding: 5px; /* Adds space between image and border */
}
</style>
</head>
<body>

<h2>Welcome to My Photo Gallery</h2>

<div class="image-container">
<p>Here's an amazing picture of a <span class="highlight">beautiful scenery</span>:</p>
<span class="img-span">
<img src="img/scenery.jpg" alt="A beautiful scenery" width="400" height="300">
</span>
<span class="img-span">
<img src="img/scenery2.jpg" alt="A beautiful scenery" width="400" height="300">
</span>
</div>

</body>
</html>

Explaination:

1. Inserting the Image Using <img>

The <img> tag is used to display an image on the webpage. It has a few key attributes:
src (source): This tells the browser where the image is located (its file path or URL).
alt (alternative text): This is a description of the image that appears if the image can't load. It’s also important for accessibility (e.g., for screen readers).
width and height: These define the size of the image in pixels.

2. Using the <div> Tag to Group and Style the Image

We often use the <div> tag to group elements together. In this case, the image was placed inside a <div>. The <div> acted as a container for the image, and it helped us:
Center the image: We can use CSS to align the content within the <div>, like centering the image horizontally.
Add padding: Padding creates space between the content inside the <div> and its border.
Add a background color or border: This enhances the appearance, creating a clean visual layout around the image.

3. Internal CSS (Using the <style> Tag)

We used internal CSS by placing a <style> tag inside the <head> of the HTML document. Here’s what internal CSS does:
Internal CSS allows us to style the webpage directly within the HTML file. We define styles (like background color, border, alignment) inside the <style> tag.
This method is useful when you’re working on a single webpage and don’t want to create a separate CSS file.
For example:
Text alignment (text-align: center;) centers the content inside the <div>, making the image appear in the middle of the page.
Padding and border: We added padding inside the <div> to give space around the image and applied a border to the <div> to enhance its appearance.

4. Using the <span> Tag for Inline Styling

The <span> tag is used when we want to style specific parts of text or inline content. In this example:
We used the <span> tag to apply styles directly to text (like making certain words bold or a different color) or to the image to add a border around it.
Inline styling like this allows us to apply styles to just a small part of the content, rather than affecting the whole block of text or image.

5. Using Class Attributes:

We can define style in CSS using the class selector, Which is represented by a dot(.)
We can also define the multiple classes to an element by seprating them with spaces.

This approach helps make your HTML page look clean, organized, and visually appealing while ensuring that all elements are properly aligned and styled.