Drifting Designs
Drifting Designs Tutorials > > Coding > > HTML > > Images
Basic
Images with Alt
Bordered Images
Resizing Images
Basic
A web page is a decent one without images! The basic code for showing images is -
<img src="urlofyourimage.gif">
That's it! As you can see, it requires no end tag. Simply replace "urlofyourimage.gif"
with the url of the image you want to display.
Images with Alt
Hover over the image below.
Do you see how there's a small yellow box that shows up reading "Drifting Designs"?
The code for that effect is -
<img src="urlofyourimage.gif" alt="Drifting Designs">
Replace "Drifting Designs" with whatever text you want to show up. Please note, however,
that HTML codes don't work for alt code. For example, the code below is not valid -
<img src="urlofyourimage.gif" alt="<b>Drifting Designs</b>">
Bordered Images
Want a border around your images using HTML? The example below has a black border
4 pixels in width.
The code for that is -
<img src="urlofyourimage.gif" border="numberofpixels">
Also note that when you make images links, there will be a blue or purple border surrounding
it. That's default. Most of the time, webmasters don't like it, and to remove the
not-so-good-looking border, just set the border to 0.
<img src="urlofyourimage.gif" border="0">
Resizing Images
Sometimes you might want to resize an image if it's too big or too small. You can do that with HTML. To resize, use the following code -
<img style="width: #px; height: #px;" src="urlofyourimage.gif">
Replace "#" with the number of pixels you want for your image in width and height.
For example, this code -
<img style="width: 70px; height: 70px;" src="//i47.photobucket.com/albums/f168/nightly_drifting/Avatars/leafava.jpg">
would produce -
Back to Top
© Drifting Designs
|
|