Change image code in HTML

Silver

Active Member
Aug 17, 2016
152
28
I have website home page in HTML, the image code already is without size but I need to change it to another image I have saved on my computer anyway. Where do I begin?
 

M8than

yes
Mar 16, 2012
463
102
You just use the image tags src property and set it to the image file location in relation to the homepages location.
 

Silver

Active Member
Aug 17, 2016
152
28
I've never ever done code like that at all before in my life. Can you provide a guide?

I'm assuming something like this;
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

What is 'alt'?
What will happen if it is the wrong size?
 

M8than

yes
Mar 16, 2012
463
102
If its the wrong size you will only see a portion of the image, alt comes up if the image cannot be displayed by the browser.
 

Silver

Active Member
Aug 17, 2016
152
28
doesn't matter

you haven't shown me a code or where to put it

like i said, i didn't do this before so..
 

JynX

Posting Freak
Feb 6, 2016
710
438
<img src=" " style="Basic CSS goes here" alt="Image Name"
So If I wanted to make a logo for DevBest I could do
<img src=" " style="width:50px;height:65px;padding-left:25px" alt="DevBest Logo">
Also, this can go on the top of the page and you can use CSS to move it and position it to your liking. Sometimes trying with the dev console on chrome can help to find the best way to do it and then add it to your css file or <style> element.

If you don't know what basic CSS is check it out .
Hope I helped :)
 

Silver

Active Member
Aug 17, 2016
152
28
Learning it on the way but you can understand how it has confused me because there is no image code so I would have to randomly put one somewhere in my page's HTML and hope for my logo to show up in the right place.
 
<img src=" " style="Basic CSS goes here" alt="Image Name"
So If I wanted to make a logo for DevBest I could do
<img src=" " style="width:50px;height:65px;padding-left:25px" alt="DevBest Logo">
Also, this can go on the top of the page and you can use CSS to move it and position it to your liking. Sometimes trying with the dev console on chrome can help to find the best way to do it and then add it to your css file or <style> element.

If you don't know what basic CSS is check it out .
Hope I helped :)

I found this really useful.

The HTML command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in a subdirectory called "images". That means place the image in a directory (to be called "images") under the directory where your web pages are located (which would be the "root" directory for your site).

Now that I have the image code similar to this;
<meta itemprop="image" content=" ">
But using the same image code as before (if you can call that a image code?) it still hasn't replaced the old image yet.
 
Last edited:

Silver

Active Member
Aug 17, 2016
152
28
For styling i think you shouldnt put it in the html tags, use CSS

CSS like this?
<img src=" " style="width:50px;height:65px;padding-left:25px" alt="DevBest Logo">
That is like trying to land an airplane onto a ant. Also I would have to remove image from before that I cannot do.
 

Velaski

winner
Aug 4, 2015
562
165
img
{
background-image: url();
width:50px;
height:65px;
padding-left:25px;
}

thats what i would of done but dw, your one is kool.
 

Silver

Active Member
Aug 17, 2016
152
28
yeah my way will only work if building a site from scratch otherwise it'll have to be done with xampp
 

Benden

maging ang maganda mamatay
Jun 4, 2010
2,286
1,482
I would have to randomly put one somewhere in my page's HTML and hope for my logo to show up in the right place

Not at all true, if you coded your website you should know where to put it for where you want, and Even if you didn't code it you should be able to read the code to figure it out
 

Users who are viewing this thread

Top