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.
In this lab, I want you to practice not only using the correct syntax for formatting content, but I also want you to focus on the decision making that goes behind choosing that formatting as well. I should warn you that this is the biggest lab of the entire course, and we are going to be editing multiple files, so don't be surprised if it takes you a couple of sessions to get all the way through it. Don't let that intimidate you though, because we're not going to be doing anything in this lab that you haven't already done earlier in the chapter. The first thing I want to do is just kind of show you the finished files, and what we are going to be working on is, again, our Up and Running with HTML reference site that I made for you guys.
The first page is this Introduction to HTML. And if I scroll through it, I can see that we have a brief history of HTML. Then we have this nice little HTML timeline down here on the bottom. We have HTML syntax. If I scroll through that syntax, we see we have examples of syntax and different things like document type definitions and attributes, replaced attributes, valid and invalid syntax, things like that. One of the things that I want you to pay attention to as we are looking through these files is there is a defined structure to each one of these.
If I go to Creating links, for example, you can see that it's using the same structure of formatting, in terms of the way the headings are structured, the way the paragraphs are structured. You can see that we have text that's being bold or emphasized throughout the site. We also have a page on HTML reference, and here we have a glossary of terms for HTML. Below that, we have a table that gives information on some of the most commonly used named-character entities. And if I go all the way back up towards the top and click on the Next Steps, our final one has a little bit of advice on how to approach learning web design.
And then I have a series of links here for external resources that allow you to maybe learn a little bit more about HTML and dig a little deeper into it. These are the pages that you're going to be working with, so it might be helpful if you just open up these files, and you can find this site in the finished_files folder of 03_10 directory. And don't necessarily look at the code, because it's going to give you the answers to the instructions that I am about to give you, but rather, look through the pages in terms of how the pages are formatted, how are they structured and organized, and really start to think about the semantics of these files and how these files are organized so that you can replicate that when we go in to working with the files individually.
I am going to switch over to my code editor, and in this code editor I have a few files open here. Inside the 03_10 directory, I have the intro file open, intro.htm, lab_instructions.txt, which is a text file. Then I have links, next, reference, and syntax opened. The only file I haven't opened is the styles.css file, and that file is controlling the visual formatting of the page, and we are going to work with that a little bit later on in the title. The file I really want to focus on right now is the lab_instructions.txt.
Now, normally, in a lab, I will have the instructions up at the top of a page wrapped in a comment tag the way I did with our last lab, but since we are going to be editing multiple pages, I wanted to go ahead and put those instructions in one central location for you. So I created a text file to do that. It's just a raw text file with no formatting in it whatsoever. And I did that so that you could open this up regardless of what you are using. So, even though it may look a little bit different, the text is still the same. So let's go through all the steps we are going to be doing one at a time. The first thing I want you to do is to determine a header strategy.
Just below the instructions I have, how many pages that applies to it, and this applies to all pages. So, the first thing you're going to do is you're going to go through every single one of these pages. You're going to scan the text of the page itself, you're going to look at that formatting, and then you're going to determine a structure and a plan for those headings: where do the headings go, what level headings should they be? That sort of thing. Then you are going to determine which content should be represented as headers. So, of the content that I am looking on a page, well, which of these are headers, and then which level of header you should use for each page.
The thing you really want to focus on here is being consistent in how you assign headers for each page. So if you do them certain way on syntax page, it needs to be done exactly the same way on the links page and all the way throughout the site. So, after you've determined what your strategy is going to be, then you need to go through each of those pages and then you need to actually format the headers based on the strategy that you've developed. Obviously, you probably really want to start off with the heading 1 and then determine which level of headings to go down to, based on that first initial heading.
Think about the document outline that you want to create. Headings create sections, so if you could think of the document as having a TOC, what would you want the TOC to display? Where are you going to be creating new sections? And if you're creating a new section, is that new section as important as the one you just did? If it is, then it's the same level header; if it's not, you go down a level. So, those are things that you need to think about as you are going through those pages. So, the first thing: determine a header strategy. The second thing that you're going to be doing is formatting paragraphs. I wasn't going to make you do that for every page.
You're only going to need to go into the intro.htm page to do this. And if I flip over to code for intro-- I'm just going to turn on my Word Wrap so this is a little bit easier to read-- you can see on this page that we have a lot of unformatted text. So we have a block of text here. We have more text here more text here. Some of these are going to be paragraphs, and some of them aren't. Your job in going through this is to determine where your paragraphs are going to be. Remember, they are the most basic sort of will block-level tag that we can use for content, so you really need to determine which of the content on the pages should be represented through paragraphs.
Since you've already done your headings at this point, that should be pretty easy to do. The next thing I want to focus on is creating lists, and we are going to be working with three documents to do this--intro, next, and reference-- and in each of those documents, we are going to be focusing on a specific section. So, the first thing we are going to look at is the HTML timeline that's at the bottom of intro.htm. You need to determine which list format is best suited for that particular timeline and then code it appropriately. So, if I go into intro and I scroll down towards the bottom, here I have all these different elements right here, underneath our HTML timeline.
So, that's going to be a list, and you need to determine which type of list to use here and then format it using the appropriate syntax. The next thing we are going to do is we are going to go to the next.htm. We have a list below our web design resources which is a list of links. The list is already there, so you don't have to re-create this list. But what you do need to do is concentrate on how to make sure that the items are being nested properly. So we have certain options for the section HTML Specifications. So, if I click over on next--and again, I am going to turn on Word Wrap to make this a little bit easier for us to read-- looking at this list, right under Web Design Resources, it's an unordered list and it's got several nested lists inside of it.
What we need to do is this one right here, where it says HTML Specifications, this content inside of HTML Specifications needs to be nested. So, you can sort of reference the syntax above it and below it to determine how to nest this. But one of the easiest things to do is to preview this in a browser first, and then, if we scroll down to the bottom, you can see this is nested, this is nested, this is nested, these guys are nested. So, underneath HTML Specifications, all of this stuff right there need to be nested as well, so you will need to modify this syntax to do that.
Finally, for list, we are going to go to reference.htm. You're going to examine the content for the HTML Terms section. Then you're going to determine which list format would best serve this sort of glossary of terms that we have here and then format that accordingly as well. So, if I go to the reference.htm, you can see that all these different terms and then the description of those terms are currently nested inside paragraphs. Well, you're going to need to change that because it need to be inside of a list, and then you are going to determine which type of list best suits that.
Next, you are going to be determining emphasis on text. And again, I am not going to make you do the entire site; we're going to focus on simply the next.htm file, although it might be helpful for you to look at other pages to determine what strategy is being employed in using these tags. What we need to do is that we need to examine the four pieces of advice that I've got for you, in terms of learning web design. So if I go to Next and I scroll up a little bit, you can see that I have four different pieces: I've got Learn how the web works, Determine an area of focus, Never stop learning, and my favorite really, Break things! What we need to do for those is that first line that I was showing you guys, you need to determine how to emphasize that first line.
So, you need to think about ways that you can isolate it so that it looks like it's maybe by itself but it's not a header. And then I want it to appear very strongly emphasized. Now, in the last paragraph, the last advice paragraph that we have, we need to display the quotes on the page in italics. Now what quotes are those? Well, if I go in to Next, and I go into Break things! you can see, There is no better teacher than experience. Build and experiment constantly. Ask yourself, what would happen if I...? Or, I wonder if I could build...? So, those elements I want italicized.
And then, in the same paragraph, you need to go to the line that says, "Always challenge yourself," and it's at the very bottom of this paragraph. It's the last sentence. That I want emphasized so that the reader or the user agent knows that that line is also very, very important. Then finally, one more thing for emphasizing the text, in this list that's below the advice section, make sure that all the top-level list items appear in bold. So again, if I go down and we go into the lists that you were working on earlier, you are going to see that we have a lot of top-level elements in this list, for example, the lynda.com Online Training Library, HTML Specifications, the Mozilla Developer Network.
The best way to visualize this is to actually preview this within the browser, and you can see each one of these guys right here, that's a top-level element. So HTML specifications, lynda.com, you want to bold all of those. We've got two more big things to do here. One is to displaying special characters, and to do that we are going to jump over to reference.htm. Now, in reference.htm, there is a table. Now, we haven't learned about tables yet. We are going to learn about them a little bit later on. But this table is fairly simple. There are three columns and several rows to this.
The first column indicates the character itself, the next one indicates the description, and then finally, we have the actual entity reference itself. Well, this one is incomplete. As a matter of fact, if I preview this in the browser and scroll down, I can see that yes, the entity is appearing here, but I don't actually see what it looks like. So, your job is to find where these go, and they are very easy to find because they're the only what's known as td--table cell-- they are only paragraph right here that's empty. Here, for example, you would do the double quotation mark right here.
And you are going to do that for each one of these guys. Now, it's actually should be pretty easy for you because you're going to have the reference to actually look at. You can say okay, this is what I need to show up here in order for that quotation mark to appear. So, you're just going to need to go through the table and make sure that all the special characters are displaying in the appropriate table cell. One last thing we need do here for displaying special characters is, again, in the reference file, there is the definition for the elements topic. We need to define the word tags, and we need to wrap it in quotes using the appropriate left and right quote special characters.
So again, you can just use the table to reference what those characters are and then display them properly. And just to show that to you, if I go over to Reference, and I am looking at these terms, if I go down into Elements, this is the word tags. I want to wrap that in quotation marks. One last thing. On the Intro page, we already have one image on the page. So, if I go into Intro and scroll up to one of these top-level paragraphs, you can see right here, we have an image on the page. What we want to do is we want to locate the text shortly after the 1.0 specification.
So if I scroll down, and it's this little guy right here. And your image is going to go just in front of that. There are a couple of things you need to do here. You need to use attributes within the image tag to point it to the correct resource. Notice that this is inside the _images directory. You are going to give it some alt text. You're going to give it values for width and height, and then you are going to do something that we haven't done yet. You are going to apply a class to this. Now, in the case of the previous image, one of the things you are going to see is it has this class called "flowRight".
Well, if you remember from our earlier exercise on placing images on the page, we used that deprecated align attribute wrap text around it, and I told you that's really not the way to do that. You should do that through styles. Well, that's what we are doing here. And we'll focus on the actual styles themselves a little bit later on. What we're focusing on right now is we are using a class attribute to either flow the text around the right or left side of the image. And if you look at this in the browser-- let me go back up to intro--you can see that this is indeed flowing to the right of the text itself.
So the next one will flow to left, and we need to give it that class of "flowLeft". Now, classes are case-sensitive, so make sure you use lower case f and the upper case L, all one word. As a matter of fact, if you just want to copy and paste from here, that's fine. I know that's a lot, but I really wanted you to have the experience of having to consider multiple pages across your site when you're developing strategies for how content is formatted, because that's what you're going to need to do when you start working on your own sites. Take your time on the lab, and be sure to check out the finished files when you are done and compare them with your work.
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.