>> DAVID MALAN: How about a web page with an image?
Let's suppose that in, advance, I've already downloaded a JPEG of an image
from the internet, say, a cat.
The internet is filled with them.
And I've put that into my public directory.
In this same public directory, let's create a page called
image.html as follows.
>> I've already gotten things started here in gedit with some open tags and
some close tags.
Inside of the body then of this page, let's do open bracket, image--
just img, though, not the full word--
space alt equals.
alt allows me to provide alternate text for this image, just in case the
user can't actually see the image I'm about to provide.
So let's simply describe this image as a Grumpy Cat.
And now let's specify that the source of this image, src--
so again, not the full word, just src--
equals quote, unquote, "cat.jpg", which again, is the file done in
advance I downloaded into this public directory.
>> Let's now close the quotes and close the tag as follows.
Consider that for an image, there's really no notion of starting an image
and stopping an image.
It's either there, or it's not.
So it would feel a little strange to actually have an explicit close tag or
end tag for this image tag.
So HTML allows us to open and close the tag simultaneously, simply by
including that forward slash at the very end of the start tag, still
inside of the angled brackets.
>> Let's now save this file, change its permissions, and view
it inside of a browser--
chmod a+r image.html.
Let's now open up Chrome and visit http://localhost/image.html.
A broken image icon--
now, why might that be?
>> Well, let's take a look at the command line at whether I did indeed put this
file in the public directory.
Let's go back to gedit, into the terminal window, and do ls -l.
And there's cat.jpg.
>> But look at the file's permissions.
It seems to be the case that only I, the owner, can read and write this
JPEG at the moment.
We need to similarly give permissions to the whole world to
this day JPEG as well.
>> Not a problem--
chmod a+r cat.jpg.
Let's confirm that that's correct with another ls -l.
And indeed now, both cat.jpg and image.html have read permissions for
the whole world.
>> Let's now go back to the browser.
Let's click reload or Control-R. And there is, indeed, a grumpy cat.