Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy, it in today's class and going to be showing you how to embed an image and here html document.

So this is a different process than what you would do with any kind of normal word processing software.

So if you're used to using Microsoft Word or maybe Apple Pages or open office something like that, you're used to simply being able to copy and paste an image into your document.

It's important.

Understand, though, when you're dealing with HTML.

HTML, at its core level is simply asking text.

It is simply text.

You can't put an image in just a text file, right.

What you actually do with HTML is within that text, you create a pointer to the image that you want the Web browser to show.

So basically, you type out, you know, you type out your head or you type out your paragraphs, you type all of that stuff out.

And then when you want an image to show up somewhere on the web page, essentially what All you do is you have a point or in text, you have a pointer and you say, Hey, this image over here, I don't want this presented in the web page.

Uh, this is pretty cool, nifty and neat because it means you can do a lot of interesting things with those images s o.

The image can be out at in the same folder as HTML document itself.

So if you have, like a normal Web hosting plan, you know you have your HTML file and then you have all your pictures within the same folder.

That's one way you can point to it, or you can point to an image on a completely different server.

So let's say you set up a server that has a whole bunch of image files and you want different websites to be able to point to those image files you can actually again, Since all it is a pointer.

You can put the pointer end the 0.0.2 pictures that are on a different server.

But one of the most interesting things that you could do is you can even point two images on public websites.

One of things I'm going to show you today is you can simply copy the address of an image on somebody else's somebody else's completely different website, and you can actually pace that directly into your HTML document, because again, all we're doing is using a pointer to say we needed what?

The image that I want in this position is this image over here on.

So it's kind of an interesting thing that you can do with these images as with a lot of things in HTML.

In technology in general, this is a very easy thing to do, as long as you don't fat figure it again.

As long as you understand the basic syntax.

It's pretty simple.

Now, the only warning warning here, I guess.

I guess we gotta have a little bit of a warning warning.

Here is you may have to understand a little bit about folder structure, and you may have to understand a little bit about permission.

So if you're one of those people that's gone out, you said, I know I don't want some shared hosting plan I don't want to just be running this little Web page off the desktop of my computer.

I want to build my own Lennox Lennox server and have its own folder structure and all that kind of stuff.

One of the problems that you may run into is you do have to understand how folder structure works, and you do have to understand things like permission.

So again, if you build a Lennox server and you have a folder for all of your pictures, but then you do not give people access to that folder when basically, when the Web browser tries to go and grab that picture out of the folder that you've pointed Thio, that Web browser will not have the permission or may not have the permission that's required, and therefore that picture will not show up.

So that's one of the things you know with this.

That you do just have to keep in mind is that you do have to understand a little bit about how folder structure works and then be onto that, understand a little bit about security.

That's the only thing that might scare you up with this whole process.

So now you're all excited to learn how to put an image file into your HTML document?

Let's go over to the computer so I can show you how this works.

So here we are at my demonstration computer again, I am using a Mac.

And since I'm using a Mac, I'm using text edit.

But it is important to understand All you need is an asking editor.

So if you're on Windows, you can write this out in no pad.

If you're on Lennox, you can use g et it or them or nano or whatever you want.

All you need is a basic asking text editor.

To do what I'm showing you how to deal past that.

When you go to save, all you have to do is you have to save as a dot HTM or a dot html file.

And then when you double click on that file, it will open up in whatever your default Web browser is.

So again, I'm showing you this on a Mac, but this is this is literally just text.

This is this is it any Eddie asking editor can do this for you?

S.

So basically, what I've done here is I've created a little HTML document called image dot html and in that I have put the picture pictured J p g.

Right.

So this is a J peg image and basically is a J peg image from when I was at Web summit last year and just basically me up on the stage.

So let's say I want to put this onto my website when everybody to know.

Yes, I was on center stage of Web summit last year.

Let's go and take a look at how that this, uh, this basically this tag works.

So what we're gonna be doing is we're going to be using the image S R C tag, eh?

So you open up, you open it up, and then it's I m g.

And then it's space, and then it's S R c, and then you put equals, and then you put double quotations and then what you're going to do is you're going to put the path to the image you want embedded onto this particular web page.

So with this it's period forward slash picture dot j p g.

And so the image dot html This document is sitting on the desktop and the image the picture dodge a PG is sitting on the desktop.

So basically what this is saying is it Look for within the current folder we are in something called Picture Dodge a PG and put that into the document.

Then all you do is you close the tag and literally, this is it again, as I talked about before him on the previous classes.

I'm not building out the full web page here because I want to show you the specific tag so that you really understand.

So I don't have a t m l tag.

I don't have the head tag.

I don't have the body tag.

I'm not talking about the document type right now again.

To be clear, if you are going to be presenting this to an end user or a customer or a client, you would want to make sure the full HTML document is properly formatted.

But again, with HTML, One of the nice parts is is you don't need all of those additional tags simply to make the HTML document work so that if we simply double click on image dot html, we will Now see.

Hey, look at this.

Within safari, we have opened up this image.

It was like, Wow, OK, so this image, this image is fully in this web page and we can see the path here image dot html.

But wow, that is big.

Wow, that is big.

So let's close this because that's that's a little too big you're sitting here.

Okay, well, so if you put the image in, the image is going to show up at whatever size, the actual images.

So if we go over here and basically you do right click and we go to get info, we can take a look and we can see how big you know, height and width.

This image actually is.

And so we go down here, we can see the dimensions of this image or four R 454,577 pixels by 2931.

So that's a very large image size.

So when I simply, uh, basically point to that in the HTML document that whole thing is going to show up, so that is not useful to us.

So what we can do is we can actually simply put in a height and width constraint to say how large this image should show up on the Web page.

So in order to do that, all we do is we come in here and then I can simply just type in height and then height is going to equal some numbers I already came up with previously.

We're gonna put it at 586 pixels and they were going to do with equals again, double quotation marks on.

Then we're going to put that at 916 pixels.

And so now what we're going to say is, we're going to say we're pointing to this particular image and we're going to say, constrain the height to 586 pixels, constrain the wit to 916 pixels.

We do file save.

Now, if we're going to double click.

Okay, now we have something that is a little bit more reasonable in size.

So this is something where you can go in.

You can do the math.

You can figure out.

You know what is 20% of the size of the image?

What's 50% of size of the image?

This is one of those things that you go in and you just tweak, tweak with on See what works for you.

One of the things that I will warn you about with this process, though, is you are still you are still a referencing this image, and if we go in, we take a look at this image.

One of things you can see.

Is it still 2.5 megs and size.

Now, depending on who's coming to your website that may or may not matter If this is a website sitting on your internal network, you've got Gig Network and internally.

If the if the picture is to 2.5 megs, nobody's gonna notice another hand if you have a globally accessible Web site.

If you have one image that's 2.5 megs that may that may cause issues to to the users coming to your site.

So do realize when you're constraining the height and with you're not actually changing the file size of the image, you're just you're just changing how it shows up on the Web page.

So what's best to do as if you need a smaller picture, actually used a piece of photo editing software and actually shrink the size of the image?

Actually use a photo editing software to shrink the size, the image to whatever size that you wanted to be and then embed that.

So that's just one of those things to keep in mind when you're dealing with this.

This this does constrain that constrain how the image is viewed on the HTML document, but it's still that full, full 2.5 megs in size.

If you really want to shrink the size of the picture and not have the extra bandwidth that's required for this image, what you would do is you will go in with photo editing software You'd actually shrink in the photo editing software.

You could probably get us down like 300 or 400 kilobytes, so that's just one of those things to be thinking about.

Then the final thing when you're dealing with these images normally is you can put in an adult tag.

So what an all tag is is back back in the old days, Sometimes Web browsers would not present images properly.

And so you could put text for what?

Supposed to represent that mimic.

This could be good nowadays for things like search engine optimization.

So when I read Web crawlers go through your website, they may not be able to understand what the images.

But if you'd given all tag, basically say what the image is supposed to be that could be useful for S e O and all you do for an old tags, you simply do cult and then your equal.

And then you do double quotation mark.

And then you just put the name or what you want to call of the image.

So image of me, right?

And so basically, that's just all tag.

So for some reason, the picture doesn't show up on the Web site on the Web browser.

They'll get the image of me or again.

This can actually also be good for Web crawlers.

So again we could do file.

We're going to save, and again, we'll just double click.

Yeah, this is what we get here, and so again, Now we have the image in this document.

Now, one of the interesting things that we can do, though, is we can actually embed an image from an entirely different website.

So let's go.

Let's open up a new tab and let's go to Eli, the computer guy dot com I've heard this, Eli, the computer guys a pretty good website and, you know, maybe I want to steal a picture.

I'm looking at this picture right here.

I'm looking at this.

I'm like, Wow, that that html text picture man is this guy.

This guy knows how to use graphic software.

It's like, Wow, you know, I really want this on my website.

Well, one of the cool things that you could dio is basically, if you right, click, um, you can go and you confined copy, image address.

So this image here is actually just sitting in a folder on my Web server and Eli the computer guy dot com the the HTML code for Eli the computer guy dot com simply points to this picture references it.

One of curious things you can do is you do copy image address, and then if we go back, let me get rid of all this.

And instead of having that picture dodge a PG I conduce.

Ooh, I can actually paste in the entire address for this image on Eli the computer guy dot com So image I m g space SRC equals.

And then, instead of putting something that's in the local folder instead of putting something within the local directory file tree, I can actually reference this an image on entirely different website.

So I do file and I do save I can then go to image dot html Aiken.

Double click on it.

And if you can see now is image dot html.

The image that is showing up in this HTML document is actually an image from Eli, the computer guy dot com.

And so this is one of those important things to understand how this I am GSR see works is again.

It is simply a pointer that can show any picture that is publicly accessible from the Web browser from the person that that's viewing it.

So that's one of those things to be thinking about.

And so this is basically that the basic thing with image SRC so I m g space SRC equals and then you put in the path.