Inserting an Image in an HTML Document

Video Transcript

"Hi, I'm Dorian Winterfield on behalf of Expert Village. I have been doing web programming for ten years. Today we are going to cover the basics of HTML. Ok, so we are back to our basic html page, you can see the page in the web browser and you can see our html code in our Microsoft Notepad. Again to recap every tag has a corresponding close tag. Here is our text, Hello Expert Village, here is our link. I am going to move on and I am going to show you how to add a picture or an image to your web page. I happen to already have an image that I am going to link to, hopefully you will have images that you will want to use either in a jpeg or a gif format which is outside of this class, but we will get into that later. Here is the syntax for adding an image; we are going to open the tag with img that means image space src for source equals. Notice how it is kind of similar to this tag above, image, source, equals. Now in my case I have an image, ev logo dash new dot gif. EV that I got earlier, logo dash new dot gif close quote. Now I can close the tag like this, now I have to explain the image and some other tags are a little bit different. When a tag has no text with in it instead of having a corresponding close tag, we close the tag like this. In other words the tag rather than having corresponding close tags, it closes itself. Let's try saving this and let's go to our web browser and hit reload and what do you know! There is our image Again the image which I had on my computer EV logo dash new dot gif. It is the logo for Expert Village. There you have it. That's the basics. Again there is a lot more to having images on your webpage but the very basics is this tag img space src equals the name of the image and then a closing slash and bracket."