All right. So in the last lesson,
we looked at how to use HTML lists that were ordered as well as unordered. In
this lesson
I want to talk about the image element and how we can incorporate images into our
website. So the image tag is again,
a self closing tag, so it doesn't need to be closed.
But for the image element,
just providing an image tag isn't enough.
You also need to specify the source and that's the source of the image that will
be displayed. That can either be a URL
so it can fetch it from the internet,
or it can be a local image that's included in the same directory as your
website. So we're going to look at both types.
The first thing I'm going to do is I'm going to look for an image of myself
online and let's have a look and
see if there's any images that are actually me. Oh, there we go.
So I already found one.
So this comes from my Twitter and you can also probably go to your own Twitter or
your Facebook and you can right-
click on the image and simply copy the image address. Now,
if I paste it here, you can see the whole URL
of where that image is located. And if I hit enter,
my browser will fetch that image from that location. Now,
if I copy this image address or image source
and I add it to my website as a HTML element,
so just above my h1, so just above my name here,
I want my image to show up.
So I'm going to use the image tag and the source
I'm just going to paste in
that URL that I got from earlier on. Now,
the next attribute here that comes up automatically is the alt or the
alternative text. And this is a case for say,
if a browser can't render the image then it will simply display an alternative
text to the user to describe what that image was about.
So I'll just put the alter text as Angela profile picture. Now,
if
you're interested in Search Engine Optimization and getting your website ranking
for certain key words,
this is something that Google looks at to try and figure out what your web page
is about. So if you're making a webpage that's about burrito
recipes
and you add an alt text that says finished burrito product
image
image1, then it helps Google to index and figure out that maybe your webpage
is related when somebody is searching for burrito recipes. All right.
So let's hit you save and let's refresh and check it out.
And I've now incorporated my first image onto my personal website.
So you can either look around for an image of yourself on Facebook or Twitter or
anywhere that would host it. Alternatively,
if you can't find any images of yourself on the web,
which is probably a good thing,
you can also create an account on Photobucket and upload your own picture in
order to get a URL.
And after you do so, you can simply click on the image and right click to copy
the image address and paste it into your source between the quotation marks.
It will work exactly the same. There we go.
Angela is now a box of biscuits. Great. Now,
when my browser looks through this file to see how it should load it up and
display it, when it comes across this image tag
it has to go and ping the servers of Twitter to try and obtain this image.
And if it gets permission to download this image,
then it will grab that image and display it over here.
So currently my image is hosted on Twitter servers and my browser has to
download it from there in order to display it inside my webpage.
Now, what if Twitter goes down? What if they die?
What if nobody wants to send tweets anymore? Well,
then their server's going to be shut down and my image will no longer be available
for download.
And you will instead end up with something that looks a little bit like this,
and you might've come across it in the past
when you've been loading up websites.
It means that the image is no longer available or is no longer hosted at the
address that's specified in the source.
So in order to remove our reliance on Twitter,
we can also put an image into our folder
HTML - Personal Site and refer to it inside our source.
So let's go ahead and do that. Now,
if I go onto my desktop inside web development, inside the folder
HTML - Personal Site,
I can drag and drop or paste an image of me into this folder.
And now my index.html and my picture called angela.png is in the same folder
and I can refer to it inside my code.
So instead of using a web address as the source of my image,
I can simply refer to the file name because they are at the same level.
So index.html and angela.png at the same hierarchical level,
they're both inside my site. Now,
if I had an images folder
and I put my image into there,
then I would have to add a path to get there.
So it would be something like this. Both ways work,
and you can do it either way you like.
And now if you hit save and you go to my site,
you'll notice this image change from square
which is what it got from Twitter, to circular
which is what it got from my local file. Now, in my case,
I cropped my image to a circle using Photoshop.
But if you wanted to create your own circular image,
you can use a tool like crop- circle.imageonline.co.
And here you'll be able to upload an image and crop the part of the image that
you're interested and get it as a circle and be able to download it
to use it in your website. And there we go.
We've managed to brighten up our homepage by adding an image of ourselves to the
top of it, using the image tag.
And we've started to look at these HTML attributes and you can see that every
single HTML element in the MDN reference also has a section on attributes.
And we're really only touching the surface here because there's other attributes
that you can add to the image element or most other elements that you decide to
use.
And we're going to be looking at these attributes as we come across them for
different HTML elements. Now, in the next lesson,
we're going to be looking at anchor tags and how we can start adding links into
our website and how we can create new pages that can be linked to from our
homepage. So for all of that and more, I'll see you on the next lesson.