HTML - Sponge Bob - Video 2

Okay, so now here in video two, what we're going to do is I'm going to teach you how to bold some text. In addition to that, I also show you how to insert some images and last but not least, I will show you how to insert some horizontal lines across the screen to go ahead and break up the page a little bit. Before we do that though, I want to just quickly recall the basic HTML layout. So the basic HTML layout starts with the HTML tag here and the closing HTML tag. And basically the HTML basic layout consists of 6 tags. It's HTML, head, then body, and then you close the HTML. So 6 tags in total one, two, three, four, 5, and 6. And also in addition to that, we know that HTML is basically like the human body because the head is up at the top and below the head is the body and there's also even a tag for the footer which would be down here and that would be at the bottom of your web page. So now the next thing that I want to do is I want to insert in some line breaks. So let's say I want to have a section here where I focus on squidward. So what I'll do is I'm going to insert in a tag here for horizontal rule. And I will close the tag, save it, come back to my page. Refresh it. And now you'll notice now that I have an actual tag right here that an actual line that comes right across the screen. So if I want to change the size of this, I can put in size equals and then I can add maybe a 6. And I can save it. Come back to my screen. Refresh it. And you'll notice here that my horizontal line has gotten a little bit bigger. However, it's a little tough to tell because it doesn't have any color, so we can even add some color to this tag. So I'll put in color. Equals, and I will put this color as red. And I'll save it. Refresh over here. And now I have a red line that's going across the screen. So now that we have this line in place, we'll come back to our HTML code. And basically what we did here is we added some things called a tributes. So size would be an attribute and also color would be an attribute as well. If we don't put in a value though, it's not going to show up as anything. And the way that we add value here is by putting it inside of quotes. So size comes in a range, and you can put that in many different numbers. And color, you're basically taking this attribute here. And when you put an equal sign, we're setting this color equal to whatever color we put inside the quotes. So HTML recognizes this text red as the color red. In addition to that, we can also put in hex colors, which we will cover later on. So now that we have this beautiful horizontal line running across our screen, we're going to put in here the character of sandy. So we're going to put it in a heading for her. So we want to make sure that this is centered the first. So I'll type in the center tag. And I'm going to close the center tag. And now anything I put inside these two tags will be centered. I'm also going to put it as an H one for a heading one. And I'm going to close that heading. Like so. And I'm going to put insert in the character sandy. And I will put some text here. And again, I have to put in a line break. So BR. And I'll write sandy is a character. And a SpongeBob. She lives inside of a bubble. Because she can not breathe underwater. Okay, now I'm going to insert in another line break. So all I have to do here is I can hit enter again. It doesn't matter. I'm just going to insert it in a brand new library. So I'll put HR or HR for horizontal rule. I'll put size equals 6 again. And the color, this time, I'll set it to blue. I'll save this. Come back to my web page here and refresh it. And now I have a sandy section. You'll notice that sandy is in this great text here. She's got a heading text in which her the size of her heading is the exact same as our SpongeBob page, so you can see that we're starting some consistency. We also have to do that for our text as well. So for my text right here, I'm going to go ahead and put in H three. For heading three. I'm going to add this with an H three as well. I'll put it in a slash. I'll save this. Come back to my page and refresh. And now my text is the same. We'll create another one here for the next character. So we're going to go ahead and center. This text for this one as well. And we're going to put that heading one tag as well. H one and this character, as we stated up above, is going to be squidward. And we're going to put a VR here. So go ahead and break off the text. So we have a nice clean line. Insert in our H three tag for heading three. So we have a nice consistent font. We're going to close the tag as well. So that anything we put in here is going to be consistent throughout. So for heading three, I'm going to put squidward is a squid that lives. And it's going to involve the world. Every time Patrick and SpongeBob see him. He is always grouchy. It's a pretty grouchy character. Okay. Now that we got that, we'll insert in another line to go ahead and break up the text. HR. Size equals this time we'll do a different size just to show you what it looks like. We'll put size equals three. And color this time, we'll do pink, why not? Close the tag and save it. And again, we just adjusted the tributes, refresh, and now we have squidward. We got this nice section here as well. So now the last character that we've got to talk about is Patrick. So center this. Close my center tag. Like so. And inside of here, I'll put H one with Patrick. And close H one. And put in my BR tag to go ahead and break off the text. And this time I'm going to put Patrick I have forgot to put my H three tag. Close my H three tag. Patrick is SpongeBob's best friend. Is a pink goofy. And funny starfish. Okay. Now we'll save this. Come back to our web page and refresh. And now you'll notice that we have all these sections. So now we've got all these sections. We need to start inserting in some images. So how we insert in some images, we could do a couple of different things. One thing that we can do is we can save all the images and put them inside of folders, which I will show you further down the line, but an easy way to do it is to actually insert it in from a hyperlink. So the first thing that we're going to do is we're going to go find some images that we like. So I want to have an image right underneath SpongeBob's fan page. I want to have an image of sandy and image of squidward, Patrick, so on and so forth. So what I'm going to do here is I'm going to show you how to go find some good images. So what I'm going to do is I'm at Google. And you want to type in whatever character you want. So I'm going to type in SpongeBob. Okay. And now we want to type PNG, PNG is a file extension that allows for you to basically eliminate the background. So I've got a couple of different images of SpongeBob here. I'll take this goofy one. And you'll notice that this one doesn't have a background. You do not have to take the same photo or same image. Don't feel inclined to do so. But you'll notice this has a blank background so that when I set my background color, I want to have this white image that shows up in the background. So the PNG is basically saying, I'm going to just take out the cutout image of whatever it is I'm looking for. So I'm going to go ahead and right click on this. And I will copy image URL. Now I'll come back to my web page. And now what I'm going to do is below my center tag, okay? I'll hit enter tab it a couple times. And now I'm going to insert in a new tag. This new tag is called image source, and it's abbreviated, so it's going to be IMG. SRC equals, and now we're going to set this tag equal to a certain value. And that certain value is going to be and again, make sure you put your double quotes, this entire thing here. So that's my link address, and I'll close the quotes. Close my carrot. I'll save this. Now we come back to our page. And refresh it. Now I have an image of SpongeBob. But he's kind of off to the center. So maybe I want to insert him inside of my center tag, so I'll come back and I'll modify that. And the only thing I have to do here is just take this center tag. Cut it. And paste it at the end of my image. And that basically says that anything inside of these two center tags will be centered. So I'll save this. Come back to my page. And now SpongeBob is centered. And let's say, for instance, here that I don't like the size of this image. So we can change the attributes of this image as well. So we don't do size though because pictures come in with a height. So if I type in width, and I put equals, I'll put in quotes. 300 PX because in websites, things are measured in pixels. And I'll put height equals 300 PX. And I'll save, come back, and you'll notice now that my SpongeBob is bigger. Okay? And again, I can change this if I don't like that. Maybe I say that's too big, and I want to do a 150 pixels. And change the height of this. To a 150 pixels, save it, come back and refresh. And now I have a smaller SpongeBob. Okay, so in the next video, I will show you how to insert in some more images. And also how to change those attributes as well.