Although it doesn't technically count as formatting existing content,
inserting images is an important part of writing HTML.
So, we're going to take a brief moment to go over the basics of
placing images on a page.
To demonstrate this, we're going to use the images.htm file which I
currently have open from the 03_08 directory inside my browser.
As you can see our sample image on the page.
This is actually taken down in the low country of South Carolina.
To place an image on the page you use an img or image tag.
Now images are considered what we call replaced content.
And that means that when they're encountered, the browser or
user agent will use the information within that tag to replace its contents with
the resource that you've asked for.
With that in mind, the attributes of the image tag become incredibly important.
The src or source attribute is used to tell the browser where to
actually go out and find that image.
The alt attribute allows you to pass along descriptive text which is representative
of the image, and is very useful for screen readers or other assistive devices.
You also have the width and the height attributes.
Now these are optional, but
they can be used to pass the dimensions of the image to the browser.
If you omit them, the browser will still display the image at its native width and
height, but there might be some rendering issues.
So it's always a good idea to put them in there,
unless there's a compelling reason to leave them off.
So I'm going to go back into my code editor,
where I've opened up the images file from that same directory.
Now, let's take a look at the sample syntax before we actually create our own.
We have our image tag right here after the opening paragraph tag.
So its flow content is just right inside the inline
level content within the paragraph.
We have our source attribute, and it's pointing to _images/lowcountry.jpg.
Now, this is probably the most difficult part for
folks that are brand new to HTML, learning in terms of how to resolve this path, or
how do I know which path to type in.
Well, essentially you're describing to the browser where to
go find this image from your current location.
So you'll notice if I look over here in my folder.
I'm inside the images.htm.
And inside of this directory there's another folder called Images.
If I open that up, I have two images inside that.
I have the Lowcountry.jpeg and the sc_flag, which we'll use in just a moment.
So essentially, when I type in this path, I am saying.
Go find the Images folder, go inside that folder, then go and find lowcountry.jpeg.
So the more you do it, the better you'll get at resolving that path.
Now, this is absolutely critical.
If any of this is wrong, if I spell something wrong,
if I do the spacing wrong, then it just doesn't work.
So, for example, if I come in and remove the underscore.
From the images directory,
if I go back in the browser, you can see the image doesn't display anymore,
so spelling counts, everything counts, when you're resolving these paths.
After that, I pass the width and
the height in, notice, I don't use any units of measurement.
This is in pixels and
I just type in 300 by 300 if that's the dimensions, which it is.
Now you can alter these, if I wanted to display this at a slightly different size,
I could say 400 by 300.
And if I save that, you can see it's doing it for me, but it's distorting the image.
And I really don't recommend that.
I want to make sure that as a best practice,
you're displaying the image at a 100% of its size.
And the last thing that we have here is the alt text: low country South Carolina.
So here I'm just trying to do some small, short, descriptive text of the image, so
that if the image doesn't load or somebody's using a screen reader.
That they're still getting some information about the image itself.
Now the last thing I want you to notice is that the image tag does not have
a closing tag, doesn't need one.
So you just use an opening IMG tag.
All right, so now we're ready to do our own image.
I'm going to scroll down to the very last paragraph.
And right down there I'm going to place my cursor just after the opening
paragraph tag.
And I'm going to go ahead and open up an IMG tag.
So again, you don't need a closing tag, just an opening IMG tag.
And then we're going to start passing in some attributes.
So I'm going to type space right after IMG, still inside the tag, and
I'm going to start by using the source attribute, or SRC.
Inside that I'm going to type in _images.
Again, I need to tell it to go inside that folder.
Then I'm going to type in a forward slash and I'll say go inside the folder.
And then find sc_flag.png.
Now you'll notice that my code editor's trying to help me along the way here,
which is very nice of it.
Most authoring tools are going to give you a little bit of help in finding these
images, but I want you to spend some time resolving those paths on your own, so
that you'll know whether the path is correct or not.
Now in this case, we're finding a folder and going down into it.
If we wanted to go up a directory.
We would use ../ to go up one directory and
then we could find the image if we needed to.
So now I'm going to save this.
And if I were to look at the page in the browser, I would actually see the flags.
So all the other attributes other than the source area really optional.
You don't necessarily have to have them.
However, they are very important.
So I don't recommend leaving them off.
So after the source, I'm going to type in width.
And for width I'm going to do 400 pixels, because this image is 400 by 400.
Then I'll follow that by height.
And I'll do 400 as well.
You can do height or width first.
Does not matter.
And then right after that, I'm going to use my alt text.
And for my alt text.
I'm just going to type in South Carolina flag.
And I'll Save that.
And if I go back into my image, it doesn't look any different, but
I'm passing the information I need to into it.
Now there are other attributes that you can use.
You'll note, for example, that the text doesn't really wrap around these images.
The image and the text are considered to be on the same line.
Your user agents don't really differentiate between the fact
that this one is 300 pixels tall and this one is only 16 pixels tall.
To it they're both on the same line.
So if we wanted to make the text wrap around it,
there are some attributes that we can use.
For example, I could come up here to my image source and
I could use the align attribute, and I could set align equal to say right.
If I did that, and went back in, you would see that it's aligning this to
the right and it's wrapping the text around it.
Now this has actually been deprecated from HTML because this is
now the responsibility of CSS.
So I don't recommend using them.
I do want to point out however that they are supported by almost all
browsers out there.
So, in a pinch, if you have to do it, you could do a line left, or a line right, and
the text would wrap around it.
However, strongly recommend learning how to do that with CSS,
instead of using those attributes.
Okay, so as we've seen, the syntax required to replace an image on the page,
really isn't all that complex.
Remember, you need to test the path carefully to the image
to make sure the browser's going to be able to retrieve that image.
And do not forget the alt attribute.
Since it's important for all of your sites to be as accessible as possible,
you really ought to view the alt text as required.
So it's a best practice to get in the habit of always adding it.