Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

A demonstration of outlining

From: HTML Essential Training

Video: A demonstration of outlining

Let's take a look at a few tools for testing the outline structure of a web page. We will use the Scissors page for these tests, as it has a known structure. So I have the Scissors page opened up here in my browser, and I've got it opened up from the Chapter 13 folder in the exercise files. And I have also loaded it up in my editor here. And coming back to the browser, I have also loaded this outliner page, and what this does is it will take any HTML source--either from a hard disk or from a URL, or you can paste it in here-- and it will give you an outline.

A demonstration of outlining

Let's take a look at a few tools for testing the outline structure of a web page. We will use the Scissors page for these tests, as it has a known structure. So I have the Scissors page opened up here in my browser, and I've got it opened up from the Chapter 13 folder in the exercise files. And I have also loaded it up in my editor here. And coming back to the browser, I have also loaded this outliner page, and what this does is it will take any HTML source--either from a hard disk or from a URL, or you can paste it in here-- and it will give you an outline.

So, I am just going to paste it in here from my text editor. So I am going to select all and copy and select all and paste. I am going to click Outline this! and now we have the outline that we expect from this page. You notice at the top is Scissors, and if you go to our source here, you see right here in header, the first h1 it sees in this h group is Scissors. So, that's the top. It's got this untitled section, and that's our nav section here, which does not have a title. It has The Story of Scissors, and that's right here, in our first article, The Story of Scissors, and then it has About These Scissors.

And if we go down after this article, we see this aside, and it has a header, and it says About These Scissors. And then under that, inside of the aside, we have these three sections which have h groups with Blades, Handles, and Color. And you see those are indented under About These Scissors: Blades, Handles, and Color. So we've got an accurate outline from this tool. So that's one way you can do this. Another way you can do this is using the tools at Google code, and I've loaded that up actually in the Chrome browser, because one of these that I want to show you is this Chrome extension, which actually works pretty well.

So, we are going to load that up. So, this is at code.google.com/p/h5o, and that's letter o, for HTML5 outliner. I am going to click on Chrome Extension here, and it loads up this Chrome Extension page, and it gives me an opportunity. It describes it here, and it gives me an opportunity to add it to Chrome. So, I am going to go ahead and click Add to Chrome, and I am going to give it permission, and it says, Outliner has been added to Chrome. All right! So every time it sees a page now, it gives you this opportunity to outline it, if it can outline it.

So, for example, if I go to google.com--I am going to open this in a separate tab-- it has this little outliner thing, and there's not much there. It has an account option. So, that's not really a conforming page that's going to give us very much information. If I try to open the Scissors page from disk, well notice it opens it up, but it doesn't give us the opportunity to outline it. It doesn't seem to work on files from your hard disk. You have to actually open it from a web server. So I have gone ahead and I've loaded this up on a web server, at html5.bw.org/esst/chapter13. And here's our Scissors page from there, and you see it's got the little Outliner icon.

And if I click on this, I get an outline, and there's our outline exactly as we saw it before. Now, there are a couple of cool differences here. One is you will notice the Untitled section. It says it's a NAV, and that's kind of nice. And if I click on it, you see it highlights it and blinks it there on the page. If I click on Scissors at the top, it blinks the entire page. If I click on The Story of Scissors, see it clicks on that; it actually scroll to it and blinks it. If I click on About These Scissors, it scrolls and it blinks the entire sidebar there.

Of course it scrolls it under itself. And if I click on Blades--I wasn't doing all the scrolling before--and Handles and Color, you see it blinks those, and unfortunately, it scrolls them in a way that you can't see them. Of course, on most computers, you are going to have a lot more room than this, and you will be able to open it up wider so that you can see the parts that you are clicking on. So, that's pretty nice. That does a good job. And finally, if you come back here to this page, you will notice that there's also this Bookmarklet, and I am going to go ahead and I am going to load that up in Firefox.

So, I am going to copy this, and I am going to go back to Firefox, and I am going to open this up in a separate tab. And so here's that same page, separate tab and we have this bookmarklet. Now, the way this works is you click on this and it brings you to a Download page, and you have a number of different choices; you've got an Opera extension. You've got the Bookmarklet. You have some Minified JavaScript that you can include in your own applications. So, FireBug extension, it says very experimental, and there's an older version of the Bookmarklet for Internet Explorer. The version I am going to show you does not work in Internet Explorer, and there are some reasons why that doesn't work.

In any event, the bookmarklet, if I click on this, I get this Download page, and if I click on that, you notice that it gives me an opportunity to save it. That's because it has it set as a text file, not as an HTML file in the Content type. And so I am just going to go ahead and I am going to save this, and I am going to Show in Finder, and there it is. Now, when I come back here to Firefox, I can open this up, I can go to my home, and I can go to my Downloads, and there it is, outliner.html. And it gives me an opportunity to drag this link to my Favorites bar, which I have closed here.

So I am going to, in my Bookmarks bar, I am going to go ahead, I am going to drag that there. And now, when I open up the Scissors page-- and this is from the file on my desktop-- I click on this and it gives me the outline. And again, it gives me the Untitled NAV, The Story of Scissors. This is actually from the same source code that the Google Chrome Extension is from. So it has the same type of an outline. Unfortunately, it doesn't do the nice little blinking thing. It does scroll to them though. So here, you have a number of different tools you can use for examining the outlines of your web pages.

These tools are a good starting point for experimenting with the outlines of your pages. Take the time to experiment. Try different structures. Understanding how HTML5 outlines work will go a long way toward creating well- structured HTML5 documents.

Show transcript

This video is part of

Image for HTML Essential Training
HTML Essential Training

82 video lessons · 101414 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 24s
    1. Welcome
      56s
    2. Using the exercise files
      1m 37s
    3. What you need to know about this course
      2m 51s
  2. 22m 0s
    1. What is HTML?
      4m 12s
    2. Examining the structure of an HTML document
      7m 50s
    3. Understanding tags and containers
      6m 4s
    4. Exploring content models in HTML5
      2m 23s
    5. Looking at obsolete elements
      1m 31s
  3. 27m 19s
    1. Understanding whitespace and comments
      3m 53s
    2. Displaying text with paragraphs
      3m 37s
    3. Applying style
      8m 5s
    4. Using block and inline tags
      6m 34s
    5. Displaying characters with references
      5m 10s
  4. 16m 36s
    1. Exploring the front matter of HTML
      2m 9s
    2. Applying CSS to your document
      3m 59s
    3. Adding scripting elements
      4m 54s
    4. Using the meta tag
      3m 34s
    5. Optimizing your page for search engines
      2m 0s
  5. 24m 59s
    1. Controlling line breaks and spaces
      2m 46s
    2. Exploring phrase elements
      1m 44s
    3. Using font markup elements
      1m 5s
    4. Highlighting text with mark
      1m 29s
    5. Adding headings
      1m 38s
    6. Using quotations and quote marks
      3m 2s
    7. Exploring preformatted text
      1m 45s
    8. Formatting lists
      2m 28s
    9. Forcing text direction
      3m 49s
    10. Suggesting word-break opportunities
      2m 29s
    11. Annotating East Asian languages
      2m 44s
  6. 29m 15s
    1. Introducing CSS
      55s
    2. Understanding CSS placement
      6m 55s
    3. Exploring CSS syntax
      10m 34s
    4. Understanding CSS units of measure
      3m 3s
    5. Some CSS examples
      7m 48s
  7. 22m 5s
    1. Using images
      4m 13s
    2. Flowing text around an image
      4m 55s
    3. Breaking lines around an image
      3m 3s
    4. Aligning images
      5m 25s
    5. Mapping links in an image
      4m 29s
  8. 22m 28s
    1. Understanding URLs
      2m 41s
    2. Working with hyperlinks
      3m 28s
    3. Using relative URLs
      4m 20s
    4. Specifying a base URL
      2m 19s
    5. Linking within a page
      4m 12s
    6. Using image links
      5m 28s
  9. 17m 2s
    1. Exploring list types
      3m 52s
    2. List elements in depth
      7m 44s
    3. Using text menus with unordered lists
      5m 26s
  10. 15m 30s
    1. Introduction to HTML semantics
      4m 9s
    2. Exploring an example
      4m 56s
    3. Marking up figures and illustrations
      2m 33s
    4. Creating collapsible details
      3m 52s
  11. 11m 18s
    1. Embedding audio
      5m 19s
    2. Embedding video
      5m 59s
  12. 11m 53s
    1. Creating ad-hoc Document Object Model (DOM) data with the data-* attribute
      4m 53s
    2. Displaying relative values with meter
      2m 57s
    3. Creating dynamic progress indicators
      4m 3s
  13. 4m 49s
    1. Overview of HTML5 microdata
      1m 8s
    2. Exploring an example with microdata
      3m 41s
  14. 7m 3s
    1. Understanding outlines
      52s
    2. A demonstration of outlining
      6m 11s
  15. 13m 1s
    1. Table basics
      7m 29s
    2. Exploring the semantic parts of a table
      2m 32s
    3. Grouping columns
      3m 0s
  16. 9m 55s
    1. Frames overview
      54s
    2. Using traditional frames
      4m 26s
    3. Exploring inline frames using iframe
      2m 7s
    4. Simulating frames with CSS
      2m 28s
  17. 53m 7s
    1. Introducing forms
      10m 24s
    2. Using text elements
      10m 12s
    3. Using checkboxes and radio buttons
      2m 37s
    4. Creating selection lists and dropdown lists
      5m 14s
    5. Submit and button elements
      8m 48s
    6. Using an image as a submit button
      2m 15s
    7. Keeping context with the hidden element
      3m 0s
    8. Setting tab order
      2m 7s
    9. Preloading an autocomplete list using the datalist feature
      5m 26s
    10. Displaying results with output
      3m 4s
  18. 19m 47s
    1. Touring a complete site
      2m 14s
    2. Touring the HTML
      8m 44s
    3. Touring the CSS
      8m 49s
  19. 29s
    1. Goodbye
      29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.