8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

Inserting and Styling Images in HTML: Best Practices for Beginners

Inserting and Styling Images in HTML: Best Practices for Beginners

October 14, 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>

<!-- Image inside a centered and styled div -->

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

 

Categories

Recent post

Building a Responsive Calculator Interface with HTML and CSS
October 15, 2024
Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
October 14, 2024
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
October 14, 2024
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners
October 14, 2024
Inserting and Styling Images in HTML: Best Practices for Beginners

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO