Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course is designed to quickly lead you through the steps of building an HTML website, from creating a new page to building links and tables. Author James Williamson simplifies the coding process, with straightforward steps you can recreate on your own. The course explains the basic structure of an HTML document, shows how to add text and images, and introduces font styling with CSS. James also offers a bonus design challenge at the end of each chapter, where he asks you to think of a solution before offering his own.
Earlier I stated that you could learn the basics of authoring HTML in about five minutes, and in this movie I'm going to put that to the test. I'll start by using the syntax.htm file that you can find in the 01_03 folder in the Chapter 1 folder of the exercise files. Now, keep in mind that as a markup language you're going to be using HTML to identify or, if you will, tag page content. To do that we wrap content in HTML tags. Let's say for example that we want to identify the line that we have on the page here as a paragraph.
So to do that all I have to do is place my cursor just in front of the line and I'm going to start a paragraph tag. Tags consist of several different pieces. the first thing we're going to use is a left angle bracket. It looks kind of like a less than symbol. Then I'm going to type in a p. p of course stands for paragraph, so there was always a character or characters that identifies which tag this is. And then finally, I'm going to do a right angle bracket that essentially finishes what's known as the opening tag.
So, we've identified this as a paragraph by opening a tag, and once a tag has been opened, all of the content that follows it is assumed to be part of that. So, when the content ends, we need do have a closing tag. So I'm going to go to the very end of the line and I'm going to add a closing tag. Now, closing tags look exactly like the opening tags, with one big difference. So I'm going to go ahead and do left angle bracket, but right after that I'm going to do a forward slash. That forward slash tells the browser or user agent at that point that, hey, this is where this particular element ends, and in this case of course, it's a paragraph.
So we have the opening tag here and we have the closing tag there, and it's the p character that identifies that as being a paragraph. Another thing that you can do to allow these elements is to have an attribute that tells the browser or the user agent a little bit more about that particular paragraph or heading or whatever it is that you are formatting. Now, not all elements have attributes, but most do. In the case of a paragraph, for example, one of things that we could tell a user agent is exactly which language this particular paragraph is in, and that's extremely helpful if you, say, for example, have a section of text that's all English and then one paragraph that's Spanish.
Well, you could tell the browser that this paragraph is Spanish. It's especially helpful for screen readers and other devices that might need to translate that for example. In this case, I'm going to place my cursor in the opening tag just after the p, and I'm just going to type in a space, because you want a little bit of whitespace between the tag's identifying characters and then in any attribute that's going to follow that. Now, the attribute that I'm going to do here is language. Now you'll notice that I have code hinting turned on and that's going to help me out a little bit, but you're free to type this in. I am just going to go ahead and type it.
For the language attribute, it's lang. Attributes are made of two parts. You have the name and then you have the value, so it's always the sort of name value pair. So the name of this attribute is language. I want to type in an equals so that I can pass the value of this, and then in quotation marks I'm going to type in "en" for English, and then close the quotation marks. So it doesn't really matter which attribute you're using. They'll always have this format: name on the left-hand side--whatever the name of the attribute is--an equals to pass a value, and then the value itself, and the value is always going to be in quotation marks.
So in this case we're saying, hey, this is a paragraph and the language that we're using for this paragraph is English. Now of course, you don't have to identify every single paragraph as English. Later on I'll show you guys how to do that document-wide, but I'm just giving you an idea of what an attribute looks like. Every time you use a tag to identify the content that goes inside of it, you can make the structures of your document and the formatting of your documents a little bit more complex, by nesting one tag inside of another. For example, let's say we wanted to italicize some of the text or emphasize some of the text within this paragraph.
An easy way for us to do that is to use the emphasis tag, or the em tag. So I'm going to go right into the same sentence here, and in front of this I'm going to start another tag. So you'll notice the format is exactly the same. We're going to do left angle bracket and then an em, and then close that, so there is our opening em tag or our emphasis tag. And then directly after the last sentence there, I'll go ahead and do a closing emphasis tag. So you'll notice that we have a tag or an element, if you will, nested inside of our paragraph.
The only rules that you have to follow when you're nesting one tag inside of another is that if you open a tag inside of a parent tag, you have close that child tag first. Let's say we wanted to go a little deeper. We could take paragraph and wrap that in a strong tag. Now strong is the same as bold really, so it's pretty much the same thing. So emphasis and strong means emphasizing this text, and strong means I am strongly emphasizing this text. So we've opened up a strong element. Now if I were to come in here and place the closing strong tag after the em tag, this would be incorrect, because I am opening a tag and then I'm closing another tag before I close that one. And that is incorrect, because now the nesting order is wrong.
So I need to take that closing strong tag and move it so that it closes before its parent tag closes. Now, you can see, I have two nested tags--the strong tag and the emphasis tag--and they all close in order. So, when you are building these more complex structures that's a syntax rule that you really need to keep in mind. The basic syntax of HTML really simply consists of tags and then occasionally their attributes. Let's take a look at a completed HTML page and then explore how the syntax works in a bit of a wider context.
So I'm going to go over to my exercise files and in the same folder, the 01_03, I'm going to open up the sample.htm file. Now again, if you're using a different code editor than mine, you may have to open that up a slightly different way. It does not matter, just as long as you can open it up and take a look at the code. Here we see a basic structure of an HTML document, and you'll notice the syntax behind nesting tags here as well. So at the very top of an HTML document, you have an HTML tag, and it identifies this document as being an HTML file. And then there is our closing HTML tag. Notice it is wrapping all of other contents so there is that rule of making sure that we close everything inside of a tag before we close the tag itself.
After the opening HTML tag, we have the head of our document. The structure of an HTML file is very, very simple; there are really three main elements. One would be regional tag itself. The second one would be the head, which we're looking at right now. We're going to go into this in more detail a little bit later on, but the head is where all of these sort of invisible stuff goes that makes the page work. Meta tags that have more information about the document, scripts that execute behaviors, styles that change the formatting of the page, things like that are going to go within the head.
Immediately following the head we have our body tag, and the body tag is where all of the visible content goes. So this is the stuff that you actually see within the browser. You can see, for example, we have a heading. This is our main heading. Then we have a paragraph, and then we have some code that's formatted in a preformatted tag. So we have all these different tags that we can use to identify content on the page, and that content is always going be within this body tag. Another thing that you may have noticed if you're quickly looking through this code is that this tag, the meta tag up here on line number 3, doesn't have a closing tag.
Not all tags have both an opening and a closing tag; some simply have an opening tag. With the meta tag, for example, it doesn't have any content inside of it like the title tag does, so it does not have a closing tag. In other instances, closing tags are optional. So those of course are all rules that you're going to have to learn as you begin to learn these elements, which ones need closing tags, which ones don't have them at all, and which ones are optional. That's the basics of HTML syntax, all in about five minutes or so. Now, from this point it's really just a matter of learning the different HTML tags and the attributes that you can use with them.
There are currently no FAQs about Up and Running with HTML.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.