Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you're developing HTML5 documents locally, it's a good idea to continually check the outline of the document as you're writing it. That way you can verify that the structure matches what you intended and that the information is being presented in the right way. Now, in our earlier chapter on HTML5 document structure, I introduced you to this site, the HTML5 Outliner. We had a lot of fun here, didn't we? If you wish. This site is really all you ever need to check your documents online. Notice that you can upload a local file to it, you can enter a valid URL, or you could do what we did, which is just basically copy and paste the code here or enter the code directly here and then outline it that way.
So feel free to use this. It's a great tool; a lot of people use it for testing locally as well. But if you're looking for a browser- specific way to check your documents online, I want to give you a couple of options, including the ones that I'm going to be using to check the documents that we're going to be creating in just a moment. First, I want to introduce you to Chrome's HTML5 Outliner extension. So I'm in Chrome now, not Firefox, and I've browsed to the Chrome web store. And really, in Chrome, all you have to do is look for extensions and just browse for HTML5 Outliner. It's a free extension.
It's very easy to install. I'm going to show you the exact process. You just go to this page, you click Install, and you are done. So now, basically, it's telling me that this icon right here is going to be visible whenever we're on a page that uses HTML5 and the document outline can be read. So if I visit such a page--and I'm going to go right here to the HTML5 Edition for Web Authors, and just reload that page--now you'll notice that because I have the extension installed, I can go ahead and click. I can get the outline for this particular document. And here's another great thing about this: Not only that we could check the document structure, but look at the functionality that this gives me.
I can now say, okay, I want to look at the full table of contents, and by clicking that, I go right down to the full table of contents. That's really cool! Now the only problem I have had with the Google Chrome extension, this extension here, is that when I'm testing the page locally, meaning that this is a local page that I've opened in my browser, the icon doesn't show up. It only seems to work when you're dealing with pages that are actually being served from a web server. For when you're testing on Opera, Opera has an extension that's almost identical to the Google Chrome extension.
So here I've gone to Opera's add-ons and extension page, I search for the HTML5 outliner extension, and again, all I have to do is just install it. Just go through the install process, which is incredibly quick, and as soon as you do that, again, I'll go to the same document. I'll just go ahead and reload that document. And notice that in Opera the icon is located over here in the upper right-hand corner, HTML5 outliner, and when I click, I get a similar outline with similar functionality. So just looking at this, I think you can start to see some of the benefits of having that HTML5 outline done correctly.
It gives people a really nice and easy way to navigate around your page. Currently, Firefox and Internet Explorer don't have an extension the way that Google Chrome and Opera have. However, if you go to code.google. com/p/h5o--that's an o, not a zero-- it's going to take you to the HTML5 outliner page, or h5o as it's referred to. This is the actual code that's used to create those extensions, and it's available in a couple of different ways, and these are ways that you can get to work in other browsers, such as Firefox.
So if you intend to use this in IE, make sure that you read the limitations and some of the problems with it. Now I'm going to click on the Bookmarklet, and when I do that, it's going to take me to a download page where I can go ahead and download the Opera extension or the Bookmarklet for IE. In this case, I want to go ahead and grab just the regular HTML. So, when you click on this, it takes you to a download page, and you can just then download the HTML file, and you can place it anywhere that you'd like on your hard drive. Now, as soon as you do that, you can open this right back up in your browser.
So here's the HTML page opened up in Firefox. I'm going to go ahead and turn my Bookmarks toolbar on, and then I'm just going to take this link right here, as instructed, drag it to my Bookmarks toolbar. There it is right there. So now, essentially I've installed the same extension in Firefox. So if I go to my HTML5 Edition for Web Authors and click on this, notice I get the exact same functionality that I have in Chrome and Opera, which is really cool. And unlike Chrome, I don't have any problems previewing local files in Firefox.
So if you're just testing the outline and you're not looking for rendering from one browser to another, you can open up your files locally inside Opera or Firefox with this extension loaded and really see what's going on. Chrome doesn't allow you to preview the local files, and as I mentioned before, there are some issues with the HTML5 outliner extension for Internet Explorer, so that has limited functionality, and probably limited value in terms of testing that locally. Okay, cool! Now that we can check our document outline as we author, we're ready to go ahead and begin structuring our HTML5 page, and we're going to do that starting in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104878 Viewers
56 Video lessons · 116735 Viewers
71 Video lessons · 85946 Viewers
131 Video lessons · 41109 Viewers
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.