HTML basics - HTML Tutorial

- [Instructor] In HTML, there are five basic concepts that you have to know, and they are: all HTML documents are plain text, all web browsers only do what you tell them to do, you structure elements with tags, nesting tags must follow a specific pattern, and HTML tags can have attributes that add function or meaning to their elements. Since all HTML documents are just plain text, all you really need to create a webpage is a plain text editor. Now, it doesn't have to be anything fancy at all, but it must save your documents in a plain text format. I'm on a Mac so I'm going to be using the built-in TextEdit app just to show this. If you're on Windows, you can use Notepad. You'll want to check your app's preferences or settings to make sure that your documents are being saved in the plain text format. TextEdit, for example, defaults to rich text format which is not what you want. See if there's an option for displaying HTML files as HTML code rather than as formatted text. If you make any changes, open a new document to make sure that those settings took. I have the plain text document index.html open. It has some text on it, and that's all. I also have my web browser open. I'm going to open up this text document with my browser by going up to the file menu, selecting open file, and then navigating to where that index.html file is and clicking open. To your web browser, this file is just a string of text and nothing more, so that's what it displays. You can read it, but it's not very pretty or easy to read, and that's because the web browser is ignoring any white space that's included in the document. There is currently no structure inside of this document to tell the browser how to organize the information that's here. We need to mark up the document with HTML code to add the structure or scaffolding to tell the browser where to break the text up at and how to format it so that it's easier for us humans to understand. You add structure by wrapping content in tags. All HTML tags begin with a left angle bracket, or less than sign, then the name of the tag. In this case, I'm going to type in H1 to tell the browser that this is the top level heading for this page, and then type in a right angle bracket, or greater than sign. This whole tag is the starting point of our wrapper, and it tells the browser to make everything that it sees a heading one until you tell it to stop. If you save the page, then go back over to your browser and refresh the page, that's exactly what your browser does. It started at the beginning and formatted everything as a heading one. To tell your browser where you stop, you need to add a closing tag. Closing tags look just like their opening tags, but they have a forward slash after the opening angle bracket and then they repeat the name of the element. In this case, I'll type in H1 and then the closing bracket. Now, if you save and refresh, your browser, once again, does exactly what you told it to do. It made the first line of text a heading one, and then it displayed all of the rest of the text as plain text, ignoring any of the white space. If this line of text is a heading one, then what do you think the next subheading line's tag should be? If you guessed a heading two, or H2, you're right. Let's add an opening H2 tag and then a closing H2 tag around objectives, Save the page, and refresh your browser to test your work. Looking at this page, it looks like organization should also be a heading too, but I need to confess something to you: I'm lazy. Rather than typing the code, I'm going to select the heading two tag that we just typed, copy it to my clipboard, then come down here in front of organization, paste it in, then go to the end of organization, paste it again, and just add a forward slash to convert this second one into the closing tag. Now when I save and refresh my page, we can see those changes. Now your document is really starting to take shape, but let's add a little more structure to these paragraphs of text. Paragraphs are, perhaps, the most common element that you're going to find on any webpage. The HTML tag for a paragraph is, perhaps, the easiest to remember. It's simply a P. Create an opening paragraph, or P tag as it's commonly referred to, copy it to your clipboard, then go to the end of the first paragraph and paste it in, convert it to a closing tag, then add an opening paragraph tag to the next paragraph and close it at the end of the paragraph, and, while we're at it, let's wrap the learning objective paragraph in a P tag as well. Even though this is a single line of text, it technically is still a paragraph, and you need to tell your browser what it is. Let's save and refresh our page once more to see how we're doing. That's really starting to come together. Next, let's look at nesting tags. For this first line of text, we tell our learner that this course is going to be taught in an open, blended format. Now, this is clearly something that we want to emphasize to our reader. We can display that by wrapping that text with a tag which tells the browser to add emphasis to this. We do that with an EM tag. Even though there's already a paragraph tag around the entire paragraph, you can define additional regions inside of that element as being its own, unique element, and, in this case, you want the browser to add emphasis to just this portion of the parent element. Let's say you wanted to add an especially strong emphasis on the term blended format. You could do that by wrapping blended format in the strong tag. Just be sure to close that strong tag before the closing of the EM tag. Remember, web browsers are not very smart. They only do exactly what you tell them to do. Always remember, when you're nesting tags inside of one another, make sure that the innermost tag is closed before closing that tag's parent tag, and, likewise, make sure that this tag is closed before closing its parent's tag. Otherwise, you'll confuse your browser, and no one likes a confused browser. Let's save and refresh to check and see how these nested tags look. Okay, we're almost there. Just one more core concept, and that is that you can add additional function or meaning to elements with attributes. Here we tell our reader about this URL that links out to a site called stateu.org, but right now this is just text. In order for this to be a link, we have to first wrap the text in the link tag, and we'll go into this in more detail later, but the tag to create a link is an A for anchor tag. Create the opening and closing A tags around the URL stateu.org. Then save your page. Let's go back over and refresh it, and see what happens. It doesn't appear that anything has happened, and that's because, while you added the correct structure to create the anchor element, you didn't tell the browser what to do or where to go with that tag. For that you need to add an attribute. Inside of the opening A tag, type in a space, then tell the browser what attribute you want it to know about, which would be the HREF, or hypertext reference attribute, that you want it to be equal to. Then, you need to wrap that attribute in quotes and then type in the complete URL that you want the browser to take your reader to when they click on the link. You need to make sure that you type in the complete URL, including the http and add the closing quotation marks. This HREF equals quote is a functional attribute of the A, or anchor tag. We'll learn several of the most common attributes throughout this course. Okay, let's save that and then refresh our page one more time, and now we see that familiar blue underlined text that has become universally understood as a link, and, if we click on that link, it takes us to the right place on the internet. Websites can and do get a lot more complex than this, and they can even include web-based applications, but, for the vast majority of the internet, this foundation of HTML is what all webpages are based on. For the rest of this course, we're going to build on these concepts and empower you to take more control over the web.