Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Setup and Introduction to HTML

In this first lesson, I will show you how to set up your computer and write some basic HTML. You will learn the standard tag structure, and how “first in/last out” works.

1.2 Setup and Introduction to HTML

Welcome back. So what is HTML? Well literally put, HTML stands for HyperText Markup Language, but don't let those words intimidate or worry you. HTML is nothing but a standardized list of tags that everyone uses to present content for their web pages. In fact, HTML is so easy to learn, the only tools you'll need for this course are a text editor and a modern web browser. I'll actually be showing you two text editors in this course. The first one is very basic and will only be used for demonstration purposes in this video. The second one will be our primary tool going forward. As mentioned, you can also use any modern web browser. But if you'd like to follow along step by step with me, I strongly recommend using Google Chrome. The easiest way for me to teach you HTML is to simply start showing it to you. So, as and overly simplistic example, here's the obligatory Hello World site coded in HTML. A couple of key points to notice. Notice that the html tag is nothing but an opening angle bracket followed by a keyword, like html or h1, and then a closing angle bracket. The opening tag is usually followed by some content and then closed by the closing tag. The only difference between a closing tag and an opening tag is that a closing tag has a forward slash immediately following the angle bracket. Also note that HTML also follows a first in, last out approach. In other words, the html tag itself will be one of the first things you ever type to start a page. And the closing html tag will be one of the last tags you type at the bottom of the page. Everything inside these tags is in fact HTML, so it makes sense that we nest everything within the html tags. Notice the same pattern here with the h1 tag. You'll soon learn about the h1 tag, and other header tags, but for now, just notice that it surrounds the words we want to make as our first headline. Now that you've seen the basic syntax pattern of HTML, let's walk through creating this example ourselves. So because I'm on a Mac, I'm gonna launch the default text editor, which is TextEdit. If I was on a PC I'd use Notepad. Just keep in mind that Microsoft Word or Apple Pages will definitely not work. Those are word processors, not text editors, there is a difference. The other thing you need to know is that TextEdit is gonna try to do something called rich text formating. That's not gonna work either. So if you're using a Mac and you launch TextEdit and you see the ability to change the color, the font size, and things like that, you're gonna want to go to View and then Make Plain Text. Now let's go ahead and do the example like we saw in the slide. So I'm gonna do an open bracket, html, and a close bracket, I'm going to hit Enter, space over two, do an open bracket, h1, close bracket, and then the words Hello World with an exclamation point. Then I'm going to close that h1 tag. Again, we're gonna cover headers and the html tags and all of that later on. The important thing is just for you to see the syntax here. So I'm going to hit Enter again and I'm going to close the html bracket. Again, anytime you want to see an opening tag, it's just two brackets surrounding the actual keyword we used to create the tag. A closing tag is set apart because it has that slash in between the opening bracket and the actual keyword itself. Let's go ahead and come up here to File and hit Save, and I'm going to label this as index.html. And I'm going to save it to my desktop. TextEdit's gonna ask me if I wanna use the default .txt format, or if I'm sure I wanna use .html. I'm absolutely positive I wanna use .html. Once it's saved to my desktop, I can simply double-click to launch it, or I can right-click and chose Open With. If Google Chrome isn't my default browser, I could chose Google Chrome from the list. But since it's my default browser, I'm just going to double-click on it. And we see Hello World! Our first website has been successfully created. If I wanted to confirm the source code for this, I could right-click and go to View Page Source. And here we see the exact source code I used to create our very first website. Hello World. I'm going to go ahead and use Cmd+W to close that particular source tab, and we're back to our Hello World in big, beautiful headline text. Let's flip back over to TextEdit and change the Hello World from being an h1 tag to simply a paragraph tag, which is an open bracket, the letter p, and a close bracket. Because we set off a paragraph tag, we're gonna wanna close the paragraph tag as well. I'm gonna use Cmd+S to quickly save this file, toggle back to Chrome, and use Cmd+R to refresh. And now we see the phrase, Hello World, has changed from being a headline to just a standard paragraph. That's the difference between headlines and paragraphs. Headlines take on a naturally heavier weight and bigger bolder letters. Whereas paragraph text is usually just normal, standard-looking text. While we're here, I'd like to point out a couple of shortcuts I'm going to use throughout the course to make things go by a little bit faster and make life a lot easier for you. Learning these shortcuts will make you a much faster web developer. Whenever I want to refresh the screen, and I'm in the Chrome browser, I'm going to use a Cmd+R. I'm not going to actually click this little Refresh button up here, cuz I don't know where my mouse is, it could take me longer to move it all the way across the screen. Likewise, when I'm changing things in my text editor, if I change this back to an h1 tag and I decide to save it, I'm not going to go up and hit File > Save. I'm going to actually use the Cmd+S shortcut. So here I am holding down Cmd and tapping the S once. I see that the file is saved, I can toggle back to my browser, and instead of hitting the Refresh button, I'm going to use a Cmd+R, and now we have the h1 back. So as refresher, when I'm in my Chrome web browser, Cmd+R will do the refreshing, and when I'm in my text editor, Cmd+S will do the saving. There's another problem we're running into though. This is kind of a plain Jane text editor. There's no autofill of text. There's no visual indication, so if I type something wrong, it's just not a very good way to go about developing for the web. There's a much better and free to try text editor out there that I wanna introduce you to. It's called Sublime Text. Toggle back to your web browser, open a new tab, and go to www.sublimetext.com. When it opens up, click the download link from the top navigation and choose the version that best fits your operating system. The download will kick off and once it completes, follow the installation instructions to get Sublime Text 2 installed on your system. Then go ahead and launch it. Your screen should now look something very similar to this. In the lower right-hand corner, click on the word Plain Text. Then choose HTML. We do this because we're telling Sublime Text that we plan on typing HTML. And one of the big benefits of that, is text expansion. So that means I can type HTML and hit Tab and it automatically generates some brand new HTML tags for me. Now, a lot of these we'll be covering very soon, but for right now, I want to get them out of the way so that we can focus on redoing our example. So I'm going to only keep the opening html tag and closing html tag. Now, once again, we want to create an h1 tag, so I'll space over twice, type the letters h1, and hit Tab to automatically create my h1 tags. I'm going to type Hello World, throw in an exclamation mark. And once again, do a Cmd+S to save it as index_02.html and we'll save that to the desktop. I'm going to use Cmd+H to hide Sublime. There's my index_02.html. Fire that up, and I once again see my obligatory Hello World there. Let's go back to Sublime and take a look at one other key feature too. As I'm typing this tag, if I miskey something, you'll see that the next tag down automatically changes colors. That's a great way for me to visually see that I've done something incorrect and I can automatically fix it as I go. Notepad did not offer that to us. That's another great thing about Sublime Text. Once again, it's built for web developers, so there's a lot of common sense built into it. So now that we understand some of the key features of Sublime, and why we'd want to use that over, say, Notepad, or TextEdit. Let's take a look at some of those tags that we skipped over before, and why they're important. I'm going to use Cmd+A to select all, and then just hit Backspace. Then I'm going to type html again and hit Tab. Let's take a look at some of these new tags. First we have the head tag, then the title tag, and finally, the body tag. Every proper HTML site has all of these tags included in it. We just skipped over some of them to show you a quick Hello World example. Let's take a look at the head tag first. The head tag usually is reserved for meta data. Things like including external JavaScript sheets or style sheets and the only thing that can really impact in terms of what the user actually sees is the title tag. That's why its nested inside the head tag. If I put the title of Hello World up here and hit Save and then come back to index_02 and refresh it. You'll notice the Hello World is gone because we didn't include any h1s or paragraphs or anything to actually show content on the page. But if you notice up here in the tab, the title for the tab itself or the title for the website has become Hello World. That's where the title tag actually comes into play. That's the only real change you can make that actually shows up in the web browser. Everything else is done within the body tags. So, if I want to bring that h1 tag back, I'll go inside the body tags, space over twice, do the h1, hit Tab and then I'll put Hello World here. I'll save it, I'll toggle back over to the browser, I'll hit Refresh. And the Hello World is once again back in its usual headline format. So, once again, the Hello World that's in big bold letters is coming to us courtesy of this h1 tag that's inside the body tag. Any content we put on the actual webpage itself will be nested within the body tags. The title for the tab, Hello World up here comes from this title tag. And anything that we wanna hook up externally or change about the browser itself, that actually happens inside the head section. So going forward, understand that every site you create will have html tags at the top and bottom. Inside those html tags, we'll break the website into two parts, the head section and the body section. Anytime we're dealing with meta data or changes to the browser title, it's gonna be in the head section. Anytime we're actually creating content, that will go in the body section. Most of the tags we learn going forward will actually end up inside the body section as they're content-driven tags. In the next video, I'll show you how to set up the layout of your website, using div tags and span tags and the difference between those two. Thanks for watching.

Back to the top