Ever come across a webpage without an image? I have, but I'm probably older than you, so don't worry. This video showed me how the world became able to use html for images, thus improving my web experience forever.
<img> tag. This little bit of html tagging makes it possible to add images to a web page. There is no closing tag for this little one. It does however required two attributes:
- src (source) - tells the browser where the image is located.
- alt (alternative text) - gives a text description of the image if the image can't be displayed for some reason.
When putting an image in a webpage, you have to consider the source. If the source is a file on your computer, you can use a relative URL, which is simply the file path from the folder containing the html file. If it is from the web, you would have to use an absolute URL, which is the URL address of the image (ex: http://...[etc]).
note: ever find a webpage with a missing source error where an image should be? They used an absolute URL that leads to where the image used to be! ;D
Looking further, you can define the height and width of the image by adding two more attributes named "height" and "width". The dimensions would be entered as pixels, so be sure you know how many pixels you will want each to be.
In order to put this into practice, we have to create a folder on our desktop, name it, create another folder within the named folder, name it, and then put the image we intend to use inside of the inner folder. Next, we create a new html file in VS Code.
I did all this and found that the html displays the images perfectly. Also, I used the height and width attributes and found that it worked perfectly. :D
You'll want to keep in mind that if you use pixel dimensions that aren't in ratio to the original, you'll end up stretching the image or squishing it.
Now that I learned this, it's time to find some Pikachus and make them have really long faces. ;D
Joel out!
Top comments (0)