Breadcrumbs

[GoodGuy17]

Hello,

Today, we are going to learn about everything imgs. First off, we need to talk about what it is and how we use it.
The way we use images in HTML is using this tag:

Code: Select all

<img src = picture.jpg>

Where picture.jpg is the image. Now, note, using the picture.jpg is telling the web browser that the web surfer opened your page that the image is in the same directory as the .htm or .html file. So, for example, when you create your .htm or .html file, and you want to use an image using the "Relative Reference", you must have the image in the same directory as the .htm or .html file.
Another way to tell the browser where the image is, is using URLs. For example,

Code: Select all

<img src = http://www.google.com/image1.jpg>

would show the image at http://www.google.com/image1.jpg.
The best file formats to use in HTML are .jpeg and .gif. Now, in HTML, you use .jpeg by saying .jpg. The difference between .jpg and .gif is:

GIF files compress the image better. Which means, the size of the image is greatly reduced. But along with that, the number of colors in a .gif is capped at 256, which is far from realistic looking images. So though the size of your image is greatly reduced, so may the quality.

JPEG files compress the image less. Which means, the size of the image is smaller, but not as small as the .gif format. Using this will give you millions more colors available in your image. Which makes for very realistic images. But some downsides of the JPEG file are:
Quality goes down (rapidly) each time the image is compressed and uncompressed.
Backgrounds may not be transparent.

Back to the img tag, there is more you can do, such as:

Code: Select all

<img src = picture.jpg alt = "Picture">

Which displays the text "Picture" when picture.jpg is unavailable.

Code: Select all

<img src = picture.jpg align = right>

Which aligns the text after the image to the right. So, that means, when using this, you are not aligning the image, but rather aligning the text after the image. There are more alignments, which are:

Code: Select all

Left
Right
Texttop
Top
Middle
Absmiddle
Bottom
Absbottom

Code: Select all

<img src = picture.jpg height = 600 width = 600>

Which resizes picture.jpg to a height of 600 and width of 600. Expanding the height and width greatly will decrease quality, and lowering it will not lower size, and it may even cause it to be slower to load.

Code: Select all

<img src = picture.jpg border = 5>

Which surrounds the image with a border, size of 5. 0 is off.

Code: Select all

<img src = picture.jpg align = left hspace = 20>

Which adds a bit of space to the sides of an image when used with the align tag.

Code: Select all

<img src = picture.jpg align = left vspace = 20>

Which adds a bit of space to the top and bottom of an image when used with the align tag.

Now, this was a tutorial on everything images in HTML.
Please +REP if I helped!
Credits to http://www.homeandlearn.co.uk for some help.

~GoodGuy17

[Usman55]

Nice tutorial, do one on links too. I'm learning HTML.

[GoodGuy17]

Whoops! I forgot the ending of the tags. Updated now!

[mandai]

The syntax should be that you use quote marks for attribute values, and there should be no spaces between the equals sign. img elements should also have a self closing tag.

[GoodGuy17]

Mandai, there is a self closing tag. There can be spaces between the equals, as it still works, and you don't have to use quote marks for attribute values. Your statement is invalid. You don't have to do any of that.

[mandai]

W3C can't guarantee that it will work in all web browsers if you don't do it the way the rules say.
A self closing tag looks like this: />

[GoodGuy17]

It works for me without any of that in Google Chrome.