HTML - Sponge Bob - Video 3

And now that I have that, I'm going to go find my code where it says sandy. And if you're having difficulty finding where you're code is, again, you can always hit hold on control and press F and type in whatever it is that you're going to be looking for. So I'm looking for sandy. Looks like sandy is right here. So I'm good. And now I'm going to enter this image right below sandy. So I'm going to actually get rid of this center tag. At the end of my center, shall I say? And I want to insert in an image. So I'll put in IMG space SRC for image source. Equals then quotes, and now I'm going to insert in my website address. By using control V, or you could also click paste. Now what I'll do is I'll put in my quotes. And close off my carrot. And then now I need to close my center tag because I just got rid of it up above. I'll save this. 

Come back to my web page and refresh. Now I have an image of sandy as well. So what I'm going to do here with sandy is I'm going to make her the same exact size as SpongeBob because I want to make sure I have consistency throughout. So now what I'll do is I'll type in the attribute of width inside of my tag gear right after PNG. Equals and now I'm going to put a 150 PX for a 150 pixels and I'm going to set my height here equal to a 150 pixels as well. I'll save this. Come back to my page. Refresh. And now sandy's gotten a little bit smaller. It looks like she's almost of the equivalent size of SpongeBob as well. So one thing that I just want to show you here really quickly is what this all means, this whole big, long thing here that could be very, very confusing. 

So the slashes mean that it's in a different folder so this is the master folder here would be like images that wiki dot com and then the sub folder would be SpongeBob, the other subfolder would be images, other sub folder, archive, four, four, so on and so forth, and then all the way until we get to this, which is our actual image. So if you ever wondering what that is, that's the file path, no different than how we have the file path of SpongeBob for our website. So when we come back, I'm going to have two images inserted in of Patrick and squidward, and you should have done the same as well. Make sure that you have the width set to one 50 in the height set to one 50 as well. Okay, so you should have inserted it in your other two images for Patrick and squidward. So now when you scroll down, I've done the same as well. I now have a picture of squidward and also a picture of Patrick. 

You should have done the same thing and made them to the size of a 150 pixels, so you have a nice clean look. And I'm going to go back to my code now. And you'll notice that the more HTML you keep writing, the more crowded it starts to look. So what we're going to do here is we're going to break this up a little bit. And what I'll do here is right after my first line break, which is this one right here. I'm actually going to hit enter a couple of times. And again, this is not going to affect my code because the only way it would affect my code is if I typed in a VR or a paragraph tag. Right below this horizontal rule, I'm going to go ahead and hit enter a couple of times. Now, I'm starting to get some breaks between my section, so it's a little bit easier to read, do the same thing here for Patrick. 

And now I have everything all split up all nice and neat. So the one thing that I'm going to add here down at the very, very bottom right below my last sentence about Patrick and directly above my last HTML tag. I'm going to insert in a sentence, so in order to do that, I'm going to go ahead and hit VR. Okay, I'll hit enter. And now I'm going to center the sentence. I'm going to. Keep it at regular font. And I'm going to put it in italics. The way you put it in an italics is I'm going to put I, just like that, and I will close the eye. And I also will close my center. And in between these two eyes, I'm also going to bold it as well, and you build it by putting B, close the B as well. And I'm going to put this is not the official SpongeBob. Page. Sorry. Okay, I'll now save this. 

Come back to my web page. Scroll way down to the bottom and refresh it. And now you'll notice I have a bolded sentence that is also an italics, and I did that using the I tag and the B tag as well. And for this first page, we are officially done. There are two stretch goals that I want you to go ahead and try and hit. One is to change the font color and the other is to also change the background color.