HTML - Sponge Bob - Video 1

Hello everybody. Today I'm going to teach you how to create a website. So the first thing that we got to do is we want to have a central folder where we're saving everything. So what I'm going to do is I'm going to right click on the desktop. And I'm going to go down to new, I'm going to select folder. And the actual thing that we're going to be creating today is going to be a SpongeBob website. So I'm going to go ahead and type in sponge_Bob. And it's very important here to have your underscore make sure you have your underscore because it's going to matter later on. And I will explain to that to you in detail. So now that I've got my SpongeBob folder, I'm going to go ahead and double-click inside of it. And it's best practice to always have a folder for images, so this way you can separate out everything. So you see up here I'm inside the SpongeBob folder. Now the next thing I'm going to do is I'm going to create another new folder by going over here and clicking the folder. And I'm going to call this images. And if I'm storing any images for this website, this is where I will store them. So what I'm going to do now is I'm actually going to open up notepad. So you can open up notepad by going down to the start button. And while you're in the start button, you open up notepad right here. Okay, now that I've got notepad opened up, the first thing that I want to do is I want to click on file. I want to go to save as and I want to make sure I'm inside of my SpongeBob folder, so I'll click on desktop. Go find my SpongeBob folder. And the next thing that we need to do, and this is very important. You'll notice that this is trying to save this file as a dot TXT, which stands for text. HTML files have the file extension of dot HTML. So what we have to do here is we have to switch from text document to all files. And we're going to call this index dot HTML. Now, the reason why we call this index is because index lets the server know later on down the road when we want to upload our website that this is going to be our homepage. So you always set your homepage to index dot HTML, no matter what your site is, your homepage is never going to be home dot HTML, and always be indexed that HTML. So I'm going to go ahead and save it. And now that I have this blank canvas, I'm going to go ahead and I'm going to you guys don't have to do this, but I'm just going to increase my font so you can see a little bit more clearly here. Make mine a size 15. Okay, looks like we're still having a little bit of trouble. Switch this bold I want to go your new perfect. Cool. So now the first thing I'm going to do is I'm going to type carrot dot HTML and then close my carrot. And what this lets the program know is that you're going to be creating an HTML page. So I'll then hit enter a couple of times, and I'm now going to close the HTML page. And how you close the tag is with this slash. So what you have here is a tag. This tag is letting the computer know that we are working in the language of HTML. HTML stands for hyper hypertext, markup language. So now what we're going to do is we're going to continue creating our HTML shell. And now that I have HTML, the next thing that comes is the head. Okay. And I'm now going to close my head. And it's always best practice to get in the habit of once you open a tag, and this is an open tag right here. To close the tag. And you close the tag here with a slash. So the next thing that I'm going to do is I'm now going to create a title. Like so. And I am going to close my title. The title always goes inside of the head because no different than the human body, the head is up at the top, and usually you're going to find titles up at the top. So HTML makes a lot of sense and some of the correlations that they drive with some of the tags that they've created. So now right below the head, we have, you guessed it the body. And the body is going to be the bulk of your website. So I'm going to, like I said, I just open this. I'm now going to close this. Like so. And anything in between these two tags is going to be actually visible on the website. So now the next thing that I'll do is I'm actually going to give my title, I'm going to actually give my website a title. I'm going to just go ahead and put them home. And what I'll do is I'm going to go click on file. And I'm going to save it. And if you now go back to your folder. That you've created on your desktop. You can actually click on index. And you can see that the website. The home actually created up here is comes from the title tag. So the home or the text that shows up is always going to appear inside of the tab of the top. So instead of home, maybe I could switch this out and I can actually just call it SpongeBob. And I could put a space here, it doesn't matter. I can save this using control S and then come over to my website and refresh it. And now you can notice that my title has changed. Okay? So now I'm going to go back into editing the HTML. And I can put whatever I want inside of here, but if it's not inside of a tag, it's not going to work. So the next thing I'm going to do here, I'll hit the tab key a couple times to start writing some text. And I'm going to put welcome to my SpongeBob fan page. SpongeBob has been on Nickelodeon. For over ten years. Some of the characters. Include. Sandy, squidward, and of course we can not forgo. Patrick. So now I'll save this and you can click on file and then click save or you can hold on control and press S either one works. Now I'll come back to my page. And I'll refresh it by holding down control R, or I could just click the refresh button. And you notice now that my text appears. But if I expand my page, you'll notice that it went from paragraph form here. To just straight across the screen like so. So we can do a couple of things here to change that. So HTML is kind of funny. It doesn't recognize enter. So if I hit enter a couple of times here and I put the sky is blue. And I save it. I go back to my page and I refresh it. The sky is blue shows up here. That's because, again, HTML doesn't recognize returns. So instead, if we want to have this show up as a return, we have to put in some tags and the tags that we're going to insert are called paragraph tags. So paragraph tags start off with the carrot like so. Then the letter P and we close it with another carrot. We can then insert in another paragraph like so. We'll actually enter in a couple of them. Save this. I'm going to save mine by using control S, come back over to the web page. And refresh it. And now you'll notice that the sky is blue has popped up. So I don't need all these. It's only going to recognize the one P however, if I was closing each paragraph like so. And then inserting in new ones, you might have some size difference now. Nope, still recognizes just the one piece. So paragraph is funny because it'll only recognize one P in a row. Another way that we could insert in a break is just by simply now I'm going to move my car so down here to below or at the end of the sky is blue. I'm now going to answer the tag called BR, which stands for break. And I'll put yes it is. And you'll notice now that my text will be broken apart. So I'll save this. Come back over here and refresh. And you'll notice that my text is now on a separate line. If I come back here, I get rid of the brake tag. Save it and come back. It looks like my text went right back. So we need that brick tap. So since this website is going to be about Patrick and SpongeBob and squidward and all that, we don't actually need this. So we're going to get rid of this. We can do a couple of things here with the font. So one thing that we can do is we can make this font bigger. By inserting in an H one tag. And you always want to get in the habit of if you open a tag like I said before, you want to close the tag. So the next thing I'll do here is I will close the H one tag, like so. Save it. Come back to my page and refresh it. And now you'll notice I have this my text is now big across the screen. Now I want to put SpongeBob has been on Nickelodeon for over ten years on a separate line. So what I'll do here is I'm going to insert in a break. And then I'll actually end up putting SpongeBob on a separate line. Save this. Come back to my page and refresh. And now you'll notice I have all my other stuff on a brand new line. So after I've done that, I want to actually center this because this actually looks like this is going to be my title. So since this is going to be my title, I want to make sure it's centered. It looks nice and neat, so we can do that by just simply inserting in a center tag. And since we've opened a door, we have to now close it, so I'm going to close the tag. I'll save, and now once I refresh this, this is going to go right in the center of my page. And there we go. So when I make this full screen, you'll notice again that this has become centered. Okay, the next thing that I'm going to do is I'm going to put in some heading tags. And again, this tag here is a heading. So there's 6 different types of headings. There's H one H two H three H four H 5 H 6. And as you get higher with the number, the smaller the font gets. So now if I put this in here and a H 6, you'll see how tiny the font gets. And then again, I'm going to go ahead and close my H 6 tag. Because if I leave this open, all the font that I type afterwards is all going to be in this H 6 5. So I'll save this. Come back and refresh. And now you'll see that my fine here has become very, very tiny. So maybe each 6 might not be the best. So instead, we'll switch this out, we'll do H three instead. Save it, come back and refresh it. That looks to be a little bit better. So in the next video, what I'm going to do here is I'm going to teach you how to insert in some line breaks. And also, I'll teach you how to change the color of the font. As well.