All language subtitles for 017 HTML Image Elements.en_US

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.