Wednesday, October 28, 2009

Creating Your First HTML File

[stream provider=video flv=x:/ hd=x:/ mp4=x:/ embed=false share=true width=640 height=360 dock=true controlbar=over bandwidth=high autostart=false /]

Alright, welcome to

This is going to be the first video tutorial that I'm creating here and it's basically going to be teaching you how to create a website and the different components that it takes to create a website. So, first of all - and I'll get into these terms later if you watch one of my other videos, but we're going to be talking about different types of web pages.

What I'm going to show you is called HTML. It stands for Hyper Text Markup Language and what we're going to be doing here is I'm going to be showing you how to construct a very very basic "Hello World!" webpage and I'll show you how to do it literally from the ground up.

Now, the first thing that I'm going to have you do is create a folder on your desktop and call it "MyWebsite."    Now, as you can tell, I have Textpad open. Textpad - if you don't know - is a document that I'm going to be using when I do these tutorials on If I don't use Textpad, I'll be using Visual Studio, but we'll get into that later. You can just download it from It's not free, so, you'll have to pay a little bit, but it's very much worth it.

So, what I'm going to do first is Save this document and we're going to put it in that folder that I just created called "MyWebsite." And the first thing that I'm going to do here in Textpad is save is "HTML" and I'm going to call this "index.htm." Now, you can "htm" or "html." It doesn't really matter. It doesn't matter if the "l" is there or not. I don't like to use it just because I like to keep my file extensions 3 characters if possible.

So, we're going to go ahead and hit "Save." And now, we'll just go ahead and double check that we've got that file in there. Now, what I'm going to do here, guys, is...The website that we create is all going to inside of this one folder. We're not going to have any files outside of this folder. All of the files will be inside of the folder called "MyWebsite." So, that's the firs thing about creating websites is that you want to start with a folder and then drop all of your files into that one folder.

Now, the first pieces of information here about how to create a website is that you should learn what's called "node." Or...some people may call it a "tag." Actually, that's probably more common is that people call it tags. So, the first thing that you should know is that in HTML - in a website - you're always going to have HTML tags. A tag consists of an open caret (<) with something inside and that's called the "opening tag." The closing tag looks something like this: </something>. So, notice that the opening tag is an open caret, then whatever the tag name is, then the close caret. Then, to close the tag, there is the open caret with a slash - notice which way the slash is, it's the slash next to the shift key. Then, you have the same tag name as the opening tag. And then your close caret.

So, if you want to see an actual HTML tag, because this is obviously not an HTML tag...the HTML tag would be something like this: <html> and then we'll go down a couple lines and then type the closing </html> tag and then we'll go ahead and save. (I just pressed CTRL + S., you're actually looking at a webpage right now! That's the first step to creating a webpage: you have your <html> tag. Notice that every tag that you open, you MUST close it. So, what I like to do is get into the habit of opening and closing a tag right then and there so I don't forget to close it. I go ahead and put in my content after that.

So, the first thing that I'll show you here is that inside this <html> tag is where you want to put your actual website. There are a couple different tags here. I'll show you the basic ones. So, inside an <html> tag, we're going to have a <head> tag. And remember what I said about closing the tag as soon as you open it! So, now, we can go ahead and type something inside this header tag. Now, there is a <title> tag that goes inside this header tag. There are a lot of different tags, but this is the main one when you're constructing your very first website. We're going to go ahead and use this <title> tag.

Do you ever notice the "Mozilla Firefox Start Page?" That's called the title. Well...guess what this is for? It's for the title! We can type in whatever we want right here for the title. So, I just saved it. You should get into the habit of saving it often. I mean...hitting CTRL + S is so easy and you don't risk losing anything. So, "whatever we want right here for the title." - that's going to be the title of the page. So, what we can do is go back to our folder and take that file and drag it on to the Firefox window...and BAM! We've got it open. Now, it doesn't look like there's anything here, but something you notice is "whatever we want right here for the title." And then it says " - Mozilla Firefox." Now, that's never going to go away because that's an applicaiton specific thing. By application, I mean - the browser puts it on there, so don't worry about that.'s the title of your website. Notice it also shows up as the title of this tab for Firefox. If you wanted to open it up in Internet Explorer, which I'm not going to do, it would be the same thing.

So...pretty cool! You just created your first page. So, now...notice here: one of the reasons I like ot open my tags and close them immediately after I type the out is because whenever you open your tags, you have to close them in reverse order. In other words, we open <html>, we open <head> second, we open <title> third. We have to close </title> immediately, followed by closing the </head>, followed by closing </html>. You need to make sure your closing your tags in the correct order.

So, if you actually want to get some text into the webpage, we open up what's called a "body" section. So, we're going to go ahead and say, <body> and like I said, you always want to close the tag as soon as you open it and then you can go ahead and type in whatever you want. So, let's go ahead and type out "Hello World!" (because that's the standard Hello World app). I just went ahead and saved it. Now, if I come back over here to Firefox, and I hit F5 or refresh, it actually shows you "Hello World!"

So, that's basically the beginnings of how you create a website. So, work with that. I will show you some other tags so that you can play around with it. This little <br /> tag is a line break. So, now, if I put a line break here...notice we have Hello World!, a break, and then Hello World! again. Basically a line break is like a return key. The internet doesn't recognize if I were to do this:

Hello World!

Hello World!

It's going to see this is one space, and that's it! So, in fact, we'll leave it like that and I'll prove it to you. So, we're going to save it and then come back here to our website, hit F5, and then BAM! Look - there's your one space, and then there's your line break. It's just like you hit return.

Another tag that you can play around with is <b>. The <b> tag actually makes the text bold. So, you can surround the "Hello Wordl!" with this <b> tag and it's going to make the text bold. So...there's your bold tag.

Side Note: The <br /> tag with the slash. This is the shorthand way of opening and closing the tag in one statement. So, the normal way, like we've talked about would be like this: <br></br>. But since there nothing that's ever going to go into a line break tag, we just use the shorthand way of opening and closing it right away. In fact, in the <head> tag, there's another tag that you can use that with. It's called the <link> tag and I'll show you what that is in a later video....or you can search it!

Another tag that you can use the <i> tag. <i> is for italics. around with that. Get used to creating websites just from the top of your head. This is what is all about - just creating websites from your head so that you know how to construct a website without using any third party software or anything like that.

So, play around with that and I will see you back here for the next video!

No comments: