HTML Your First Web Page

Hello: Welcome to the first lesson in Educator.com's HTML course!0000

In this lesson, we are going to just get a very quick introduction to how to create your very first web page.0005

From having zero knowledge or experience, after this lesson, you should be able to have a web page0012

that is just like any other web page on the Internet, that you can view in a browser.0018

Before we start looking at that, I just want to point out a little bit about what HTML is.0026

It is basically the backbone of the Internet; every single website on the Internet uses HTML.0033

And that counts for the oldest web page that has ever been created, which is this one.0041

(it is one of the simplest, as well) to some of the newer ones, like YouTube.0048

And it is actually very easy to get into the source and look at the HTML.0053

In your browser, you can hit Option+Command+U, or Command+U, or Ctrl+U, depending on which browser you are using.0059

And it will pull up the HTML source.0066

And this is the HTML source for the first web page on the Internet.0069

And it won't make sense to you right now, if you are completely new to this; but it is actually fairly simple.0074

You can see, right away, that there is a little bit of correspondence between text here and text that shows up.0080

But there is also a lot of code there that you don't understand.0086

Now, when you get to something like YouTube, and you view the source,0090

there is going to be a lot more that you are not understanding, because there is a lot more going on.0093

For example, this is all scripting--JavaScript--and then you get down...there are a lot of divs, and a lot of things are styled with CSS.0099

And you can see: it is also much longer code.0106

But essentially, it is the same thing: it is just HTML, and it is what makes the Web work.0108

You can also, for example, look at...this is the HTML5 specification.0117

And you can see that it has styling and content mixed all together, and you can view it; and this is our normal experience with web pages.0124

But you can separate out just the content, which is what I have done here.0135

This is that same page; but this is only the content viewed, and it is just a lot of text.0139

And in essence, this is the most important part of any web page.0146

And it is what the whole Internet is about--sending content.0150

It is not just style and fluff and a lot of cool programming stuff; what we really care about is the content.0154

But when you just have this marked up like this, with no HTML, it is kind of hard to make sense of what is going on, compared to this.0160

What HTML does is tells the computer what the meanings of all these different contents are.0172

It is called semantics: semantic means meaning, and it will semantically0179

mark up the different parts of your content and tell to the computer what it is.0182

And based on that, the computer will give some default styling.0188

But the actual purpose of HTML is not the styling, but rather the semantics.0191

This is that same page content, marked up with HTML; I will show you the source, really quickly.0196

And then, you can see: there are actual HTML tags--there is a lot of it (scrolling all the way down to the bottom).0207

And when the browser encounters these semantic tags...for example, this is an h1; it now knows that this is the first-level heading, and it will make it bigger.0214

Although you can see that when there is no styling applied (this is only the HTML), it is fairly basic, and that is a way to get things started;0224

what you will learn later on is to take CSS and style it to look the way you want it to, and to control things like that.0235

And then, you will also want to learn JavaScript at some point, to pick up on some of the more advanced things that you can do.0243

What you need to create a web page is a computer and a text editor.0252

Any computer has these; this is my text editor here.0260

If you are on Windows, you can pull open Notepad; you can pull up TextEdit on a Mac.0264

This happens to be a little bit more fancy one; and all you have to do is save it as a .htm file.0270

Here is a brand-new file: say I want to write something on the Internet.0281

I click Save, and I am going to call it Hello; and the most important thing is that you give it this .html extension.0295

And of course, you need to be aware of where you are saving it.0306

And then, go over to your browser and find your file and open it.0311

And now, you have just created your first web page.0320

This is as valid of a web page as any other website on the Internet, even though all you have done, really, is some text.0324

If you hit Ctrl+U, this is the source; and this is the text that you edited here.0330

And it is the same as the source, clearly, because you haven't put any HTML in yet.0338

And that is all you really need.0344

So, if you are starting to make a website, you probably want to start with some content.0347

Here, I have prepared the content for a basic web page that I want to create.0353

And I recommend that, as you go through this course, you do the same thing:0359

you create a basic website for yourself, and as you take each lesson, you can add the different parts0362

that you are learning, and add pages and links to them, and use it as a reference for yourself for later on0369

(and also, just a way to show off what you are learning!)0376

So, this is an entire website here; and right now it is just a page, but it is going to be a website, because it includes plans for links to various places.0379

And I am going to show you how to mark this up in HTML.0391

The first thing that is important in an HTML page is the html element.0393

These little tags indicate that this is an element.0401

And then, at the end of my content, I am going to put the corresponding closing element.0406

This little slash indicates that this ends the element that began up here.0413

This is start HTML; end HTML (or stop HTML).0420

Now, the next thing I want to do is add a title here.0429

And the way to do that is: a title, you are probably familiar with, shows up up here, in the top of the page--not actually part of the main body.0434

And the way that you mark this up is using the head element, and then the title element.0445

I am going to move this little note I gave myself.0454

And that is going to mark this up as a head with a title.0463

Now, the main body all is going to occur here; and of course, I need to end it.0469

So, I am saving that; and I am going to tab over to the web page; and this is the content that I had prepared.0481

And as you can see, it is not formatted at all; it is not marked up.0489

The computer doesn't know what to do with it.0492

Now, I will refresh; and the title changes, although the rest of it still needs to be marked up.0494

This is going to be the first-level heading; save; refresh.0503

I think I hit Ctrl+A instead of Ctrl+S.0514

And things are starting to come together.0520

Now, say we want to include an image; I have this image that I have prepared of myself, and I want to include it next in this website right here.0523

The way to do that is with the image tag; and you give it a source, actually, to indicate where the image is.0532

Save, tab over, refresh; and here is my little image.0542

This next group right here--this group of text--is a paragraph.0549

And the HMTL semantic tag for marking this up is the <p> tag; it stands for paragraph.0554

And you may want to look in here and add some additional markup, like if I want to emphasize this word.0563

OK, save, and refresh; now this is marked up as a paragraph.0576

And this word has been emphasized with the <em> tag.0582

It has a lot of other tags that you can use.0584

Now, here I am going to have a couple of second-level headers; I am actually going to do all of them at once.0588

And I am actually just going to copy this and paste it; that is a bit quicker.0598

And now, I come over here to refresh and double-check again; you can see that it is marking them up a little bit larger; OK.0613

Now, this is going to be a list of links of things that I have mastered.0627

So, since I have obviously mastered how to create a web page, I am going to have it link to itself.0631

And the way to link a page to itself (which is kind of a silly thing to do) is to put this little hash code, which will just refresh the page.0639

But just for the purpose of demonstrating: this anchor tag has a hyper reference attribute;0648

and then you put the URL of the page (which, in this case, is itself); refresh; and this has become a link.0655

So now, if I hover over it, my cursor becomes a hand; and if I click, it refreshes and goes back to the same place it was.0662

And you will notice that this little hash has been added to the URL.0668

Now, this is a list of some things that I will master by the end of this course.0673

In fact, it is an unordered list (ul); and this is the first list item (li) and the second one, and so on.0680

These are all things that, if you take this course all the way through, you should master by the end: stop ul.0697

Now, you will notice: I actually didn't put the closing list item tags for all of these.0705

And that is because these are self-closing; this is something that HTML5 allows, and other versions of HTML; something like XHTML wouldn't.0711

I am going to save this and show you what a marked-up list looks like; there we go, and now it is a list.0721

And as you go through, you can take these, turn them into links, and add them to this here--things that you have mastered, as you master them.0733

And then lastly, this is going to be another unordered list.0745

Stop unordered list; and the list items...although they are actually going to be a list of links.0752

I am going to put the link here, and I am going to put the full URL.0764

We don't need little end thing anymore.0776

And I suggest that you keep track of websites that are very helpful as you go through this course (and just in general),0780

to reference them later; and you will always be able to find what you need quickly.0791

If you remember looking at something, and you can't find it as easily, it can be frustrating.0798

And notice that the editor that I have here automatically colors my text, depending on the syntax that I use.0813

As it recognizes that I have completed an attribute, it turns it blue.0827

And when I close off the elements, it changes the colors, as well.0833

Let's take a look, after I save and refresh; and here is my list of links.0839

OK, now this down here is actually a footer; it has some information about the copyright and how to contact me.0849

That is what the footer tag is for; and this is a strong emphasis, because I am trying to point out that this is something that needs to be looked at.0860

However, the emphasis doesn't change the meaning of this.0876

And that is part of the meaning of the strong tag.0881

All right, the last thing I will do is: I am going to mark up this email address with mailto,0885

which starts out the same as a normal tag (and I am going to copy this), but you begin it with mailto, and then a little colon.0900

And this is set up so that, when browsers see this, they will automatically know that it is an email address.0911

And they will think about opening an email program when you click on it, depending on how you have it set up,0918

although this is probably a bad idea to put on the general Internet, because, because it is semantically defined0924

that this is an email address, now computers know that this is an email address--which is the point of HTML--it is semantics--0932

but it can be bad for email addresses, because some computer programs are web crawlers0939

that are spam-bots, trying to collect information so that they can send out spam.0944

So, you need to use an obfuscator to make sure that this is not visible.0949

But that is more of a JavaScript sort of a functionality.0954

All right, so this is our very first website.0959

And it seems like there might be something missing; it is just basic HTML at this point.0963

You can go in later, and you can go into the CSS course if you get bored and don't feel like waiting, and learn how to use CSS right away.0969

But I have prepared a little bit of CSS--just really basic CSS; I am going to put it up in the header here.0979

This is actually head, not to be confused with the header element.0988

And this CSS will give a couple of styling rules for the body element, and some of the other things,0994

so that when I refresh, it is starting to look more like a real website.1003

This is the first website, set up like this--very nice-looking.1010

Thanks for watching Educator.com.1020