2.2 Finding a Proper Code Editor
Before we continue on with formatting our text, I don't want you to be using NotePad or Text Edit. Instead, we should be using a code editor that was specifically created for the purposes of writing code.
(For more on Sublime Text 2 make sure you check out our other free course: Perfect Workflow in Sublime Text 2)
1.Introduction1 lesson, 00:55
2.Week 17 lessons, 50:14
3.Week 28 lessons, 56:02
4.Week 37 lessons, 1:22:49
5.Week 43 lessons, 29:23
6.Final Project5 lessons, 1:19:55
7.Closing Thoughts1 lesson, 00:39
2.2 Finding a Proper Code Editor
[SOUND] Before we continue on with formatting our text. I don't want you to be using Notepad or TextEdit. That's a really bad practice these days. Instead, we should use a code editor that was specifically made for writing code. So, I'm gonna open up my browser. And the one we'll be using in our lesson is going to be called Sublime Text 2. And I'm choosing this one because there are versions available for Windows, Mac and Linux. So, more or less whatever browser you're using, you should have an option available. Also it's a fantastic editor. So go to sublimetext.com, and if we scroll down, you'll see that there is a download link. Click that, and that will download it to your desktop. Once you've done so, simply up open the file you downloaded. And here we are. Now yours, depending on your OS, might look slightly different from mine. But it's all the same underneath the hood. So, I will take our file, and drag it in like so. Now you can see, in addition to offering quite a bit of flexibility, there is syntax highlighting so we can more easily associate where our values are, where our element names, et cetera, et cetera. If you would like to adjust some of the settings, you can always go to the app name, Preferences> Color Scheme, and you can play around with some of the options that are available. Whether you would prefer maybe a dark color, or a light. We're gonna stick with a light for this tutorial, so I will switch that back, like so. Now, we're going to move ahead and learn how to format our text. So notice here I have Hello World, but what if I want that really bold? We wanna shoot it out to the user. Well, we can use a heading element to do that. So I will type h1, and this says, the text here should be a heading level one element. That's the top-most heading, and generally that means it's going to be largest. It's going to receive the most weight when the browser looks at it. But once again, if we wanted to type, Here's my text. Let's save that. I would go to File> Save or from now on, I will type Cmd+S to do so. And now I want to go back and view this in the browser. Now notice, it says Hello World, and then it says Here is my text. So it is receiving this heavier weight. The text is bold. But this should not be bold as well, that's not right. Let's go back. And the problem is as we learned in the very first introductory lesson, we did not close the h1, so the browser just assumed everything that followed it, should be the heading level one. So, always remember to close this out. And we use the forward slash to do it. Now if I save it, and if I come back to Chrome. Reload the page. Now, only this has received Hello World. And then we have our text. Let's view the source. And this time I'm gonna use the keyboard shortcut. Rather than View Source, on my Mac, it will be Opt+Cmd+U, so I will do that now. Now notice, everything is looking good, it looks identical to what we've typed in. But, here is my text, what is that? Well, that would be, maybe a paragraph. It's a paragraph of text. However, it's always a best practice when you're creating HTML pages, to specify, to explicitly specify what your content is. So here, it's wrapped within the body, you can get away with this, but why don't we specify, this is a paragraph of text. So we do that by using the p element or tag. I'll wrap that within p. And now we're saying, from the point of the browser, it goes through here and this is okay. We have a heading one, Hello World, and then we have a paragraph of text that says, here is my text. Cmd+S to save that, come back and refresh, and it's going to look the same to you, but, it's still following best practices, and that's what I want you to do in this course. Now, we're not gonna cover too much of this until you've gotten a little bit further, but I want you to keep something in the back of your mind. How does the browser know that a h1 element should be this size, this font, and this font weight, or, meaning bold? How does it know that? And that's because browsers have some default styling in place. So, unless you override it, when a browser comes across this, it's going to say, okay, well I will generally make this bold, I will make the font size much larger, I will use this font. Now, most of the time you may find that you don't want this. But, I want you to always keep this in the back of your mind. The fact that this paragraph of text right here has a little bit of spacing above, and the fact that the heading has a little bit of spacing below, that is all coded. It's not done for you. In this case, the browser provides a default, what we call a style sheet or CSS file, that specifies that there should be what we call margins below. So, we'll get to that in a future lesson, but for now, just think about it. Next, I want add some emphasis to my. So how can we emphasize a particular word? We can do that by using the EM element. And EM stands for emphasis. So, now we're telling the browser, here is my text, it's a paragraph. But this specific word needs to receive emphasis. Now, what form that takes, I don't know. Let's save that and view it in the browser. Refresh, and now, I want you to note that if I zoom in, my is now italic. Again, this is the default. It's quite common, most people keep it. But the browser has set that by default. Any element that is emphasized should have italic text. Now what's the opposite of this? Well that would be strong, meaning we are going to make this particular string, or this particular word strong. So here, I will wrap here, within a strong element. And traditionally, this is used to make text bold, but it does not have to. It can do anything you want. While it's common to make an EM element italic, it can be anything you want at all. There is no right or wrong, just defaults. Refresh. And now, can you see here is bold because we used a strong element. My is italic because we used an EM element. Notice this is what creating HTML is, it's describing your content. In Microsoft Word, you can simply choose a font size, a font color, and then you begin typing, when you press enter, it will automatically add some spacing. But within HTML, we need to explicitly state that we're having a paragraph. We're having a heading here. And what you'll find is, while it seem like more work at first, I prefer it. If I were writing a book, I would honestly prefer to do it in HTML, rather than a program like Microsoft Word. And you might feel the same, after a few months. In the next lesson, I'm gonna teach you how to create a list of items.