Placeholder Image

字幕列表 影片播放

  • Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

  • 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.

  • If you want to shrink this, you can add the height and width constraints.

  • But again, to be clear, when you add those hiding with constraints, it does not actually shrink the image.

  • If you want the image actually shrunk, you have to you have to actually modify it within photo editing software yourself on.

  • Then, if you want to put in that all tag again, you know you're supposed to Good to practice is put in the all taxi putting the all tagging basically say what the image is supposed to be and really with that, that's all there is to embedding images within an HTML document.

  • So there you go.

  • Now you know how to embed an image into an HTML document again.

  • Remember, on the camel world you're dealing with, ask you text so anything that can actually be typed out as text basically simply has to be a reference to as a point or so again if you're doing a video file, if you're doing audio file, if you're doing a picture any of these multimedia documents they're not actually embedded in the document itself.

  • They have to be somewhere that's accessible by the user's Web browser on then you simply put a pointer and you point to where that that file is.

  • And then when the Web, When the Web browser compiles the page, it's able to bring that in.

  • This is one of the things you have to be thinking about from a security standpoint is depending on what your file structure is and what your security structure is.

  • There may be issues with users trying to view an image s so this is something to be thinking about again, especially if you create your own server.

  • So if you created a bond to server, let's say you're using a graphical user interface.

  • And so you log into the bond to server.

  • You're using a Web browser to look at an HTML document.

  • All the pictures may show up for you.

  • The reason being is because when you're walking in Maur less as route right, you created these folders you created.

  • The image is therefore you have permission to view the images when you then try to allow people from the outside world to take a look at your Web page.

  • Remember, they may not have permission to view the images, and so basically, you'll get a whole bunch of these exes on your Web page, and then people get frustrated.

  • S O.

  • This is something where you do have to understand things about folder structure and basically how to be a reference files a little bit about security.

  • But again, it shouldn't be too complicated.

  • If you're learning this stuff, then you're gonna need to learn that, too.

  • But it is also an interesting thing to show where it's kind of curious again in this modern Web world, where you can actually reference you can reference Resource is off of other people's websites off of other people, servers and, literally, just in html code again.

  • You can point to to a picture that's in the current directory Oregon Point to a picture that simply publicly accessible on somebody else completely different website.

  • And you can put that into your Web page as if it's your own.

  • Now again in the modern world, copyright and all that kind of stuff.

  • Be careful, be care.

  • I am showing you what you technically condone, what you are legally allowed to do that gets into a gray area.

  • I'm not going to go into here, but again putting images into your into your documents are pretty simple.

  • Now, if you've used the I am GSR see tag in the past in a t.

  • M.

  • L four, it was standard where they allowed you to do some other things with with image files.

  • Put borders around the image files, do some other modifications of the image when it's presented to the end user.

  • But now, with HTML five in the modern world, that is all supposed to be done with CSS.

  • So when we do a CSS Siri's of classes, I will show you how to modify.

  • The image is a little bit more using CSS.

  • So that's just one of those things to keep in mind.

  • You're sitting there and you're looking like Okay, well, this is pretty simple, but can't I do Maur with an image on my website?

  • Absolutely, Yes, you can, but you would use a different language for that.

  • You'd either use cascading style sheets again for a little bit of different formatting for the image.

  • Or, if you want some interactivity with the image again, rollover effect, that type of thing, you would actually use something called a Java script.

  • We'll talk about that in different classes again.

  • It's very important to understand in the Web development world, you'll be using multiple different languages to present that final document to the end user again.

  • To be clear, HTML is simply the structure of the website.

  • It's it's the beams of the website.

  • It's the foundation of the website.

  • It's it's the rafter is that type of thing in order to make some of that fancy or stuff.

  • That's where you some of these other different languages.

  • So as always, I enjoy doing this video and look forward to seeing the next one.

  • If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

  • Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.

  • Example.

  • All of that is freely available and in front of the pay wall.

  • But if you want to watch opinion videos, or if you want to be able to comment, you do need to become a member.

  • Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.

  • If you don't want to become a member, you just want to give a one time donation.

  • There is also a donate button where you can do that.

  • Please understand.

  • In order to provide the education that I am.

  • It does cost money, servers, cost money, equipment costs, money, travel costs, money.

  • All of these things cost a reasonable amount of money.

  • And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to.

  • So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

HTML介紹 - 嵌入圖片 (HTML Intro - Embed Images)

  • 8 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字