We can Insert an image into your web pages to increase visual interest or illustrate a topic using HTML5. For example, add a photograph of a product or a company logo to a business’s web page. HTML enables you to display images as inline elements which means they appear within the body of the page along with the text.
We can use image files from digital cameras or scanners, or you can create illustrations with a graphics program. We can also obtain images online from inexpensive stock-photo websites such as istockphoto. On photo-sharing sites such as Flickr, the user often allows noncommercial use of their photo.
Insert an Image Using HTML5
Insert a photograph
Step 1: Type <img src=”?”> Where do you want to insert a photographic image, and replacing it ? with the relative path to the file you want to insert
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/2022/11/maxresdefault-1024x576.jpg">
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>Insert a Graphic File
Step 1: Type <img src=”?”> Where do you want to insert a graphic replacing? with the relative path to the file you want to insert
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>
<img src="https://codingthai.com/wp-content/uploads/2021/11/lovo.png">
<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>
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>How can I download an image from a web page?
Chrome, Internet Explorer, Firefox, and most other web browser enable you to copy an image from a website by right-clicking the image and selecting a save command. If you save an image in the same folder as your HTML file, You can then use the image on Your pages using the previous steps. Make sure you have permission from the image before using the image on your website.
How can I insert an image in my eBay auction?
Many auction sites, such as eBay, allow you to include certain HTML codes in your listing descriptions. If you have your auction item’s image file hosted on a web server, you can use an HTML <img> tag to insert the image into your auction description. Using HTML to insert an image yourself is an alternative to using ebay’s photo-hosting feature.