How to insert an image to a webpage with coding

DistrictND

Just previously I made a tutorial on how to create a website with coding and I didn't include how to add Images to the webpage or how to add a background image to your webpage, but am going to do that now I'll show you a full tutorial on how to do this.

First of all take note of these attributes:

(i) <img >: This tag accepts the attributes in

the following table (as well as the HTML 5 global attributes and HTML 5 event handler content attributes).

Attribute Description

(ii) alt Alternate text: This specifies text to

be used in case the browser/user agent can't render the image.

(iii) src: Location of the image (This is normally in URL form)

(iv) crossorigin: This attribute is a CORS settings attribute. CORS stands for Cross-

Origin Resource Sharing. The purpose of the crossorigin attribute is to allow you to

configure the CORS requests for the element's fetched data. The values for the crossorigin attribute are enumerated.

Possible values:

Value & Description

The word's in [ ] are the values.

(a) [anonymous] : Cross-origin

CORS requests for the element will not have

the credentials flag set. In other words, there will be no exchange of user

credentials via cookies, client-side SSL

certificates or HTTP authentication.

(b) [use - credentials] : Cross origin CORS requests for the element will have the credentials flag set. If this attribute is not specified, CORS is not used at all. An invalid keyword and an empty string will be handled as the anonymous value.

(v) ismap: For image maps. See the <map >

element.

(vi) usemap: For image maps. See the <map >

element.

(vii) width: Specifies the width of the image.

(viii) height: Specifies the height of the image.

Now let's go to the

Steps to add an image to a webpage with coding

1 Go to html editor you can download this one here 

2 According to the  tags I explained above paste this code, 

<img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUBqVpTTxvwxFWmY4J56NcTCW2qY7_90UKKCZRIQe4NAVjVCkpA35s2R-QnBabejs-UihqFHEBfz57Nn_0Gafb3g2Z1puFkj0rpNpVTio6kS_D3-CyXfYaU2nLiagLnNk6957e6ckzTEM/s1600/districtnd+icon.png"

style ="max-width:100%" alt= "Sample picture" >

This is what that code above will display in a browser

You can edit and remove that link in that code and put the link of your image

How to add Background image to webpage with coding

Yes you can actually add an image to the background of your webpage by just inserting this lines of codes.

<div style ="background-image:url(<img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUBqVpTTxvwxFWmY4J56NcTCW2qY7_90UKKCZRIQe4NAVjVCkpA35s2R-QnBabejs-UihqFHEBfz57Nn_0Gafb3g2Z1puFkj0rpNpVTio6kS_D3-CyXfYaU2nLiagLnNk6957e6ckzTEM/s1600/districtnd+icon.png"
style ="max-width:100%" alt= "Sample picture" >);padding:5px;width:150px;

height:200px;border:1px solid

black;" >

<p> Your text </p>

</div>

You can edit that URL and put the URL of the image you want, you can also edit that text that is written your text then put the text you want to appear in the image

Note: If you add Images to your webpage it will not show unless you upload that webpage online and in order to upload your webpage online follow these steps

(i) With windows or  Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.

(ii) With Android: Find a web hosting company and host your webpages.

Now it Will display your work

Note: 

Any text code that concerns displaying images will not display unless you save your webpage and name it index.html then upload it to your browser, follow these steps on how to upload your webpage file to your browser.

(i) With windows or  Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.

(ii) With Android: Find a web hosting company and host your webpages.

Now it Will display your work.

Warning

Don't miss a single line of code or text because it could lead to error.

Conclusion 

Now that you know how to add Images to webpages and add background images to webpages it's upto you to test your skills and be a web developer.

If you found this tutorial helpful and you want to thank the publisher just go to the support and motivate us page and support us there thanks.