Physical Address

Godawari 2 Attariya Kailali

Create an Image Label

Create an Image Label

Create an Image Label

We can Create an Image Labelthat appears whenever the user positions the mouse pointer over a particular image on a web page. We can use labels to offer detailed information about the image.

Labels work differently from alternative text. Alternative text appears on the page itself when images are turned off. A label appears in a pop-up box when the user positions the mouse over the image. We add a label by including a title attribute in the <img> tag.

Create an Image Label

Step 1: Within the <img> tag, type title=”?”, replacing? with the image label, you want to appear.

Note: Label text can also help search engines determine the type of image content on your page. We can combine title information with alt information in the same image. See ” Add Alternative text” for more details

Result Output

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <style>
            h1{
                text-align: center;
                text-transform: uppercase;
            }
            span.highlight{background-color: #ffcc99;}
            body{
                background-color: #ffffcc;
            }
            ul.horiz{
                list-style-type: none;
                padding: 0;
            }
            ul.horiz li{
                float: left;
                padding: 10px;
            }

        </style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <hr>
        <ul class="horiz">
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">About Us</a></li>
            <li><a href="index.html">Contact Us</a></li>
            <li><a href="index.html">Service</a></li>
        </ul>
        <br style="clear:both">
        <ol>
            <li>Frontend Developer</li>
            <li>Back-end Developer</li>
        </ol>
        <Section class="First">
            <p> <span class="highlight">A front end developer</span> has one general responsibility: 
              to ensure that website visitors can easily interact with the page.
                and Back-end developers are the experts who build and maintain the mechanisms that 
              process data and perform actions on websites.</p>
        </Section>
        <img src="https://www.codingthai.com/wp-content/uploads/2023/01/How-To-Compile-Your-SASSSCS-To-CSS-In-Visual-Studio-Code-1024x536.png" height="250" width="50%" title="How to compile your scss to CSS">
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

Follow us on Social Media For More

Facebook, Instagram, Pinterest

Related Posts