New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

HTML Essential Training
Illustration by

Exploring an example


From:

HTML Essential Training

with Bill Weinman

Video: Exploring an example

Let's take a look at an example of a page that uses a lot of the semantic markup elements. Let's make a working copy of scissors.html, and we will go ahead and rename this to -working and open it in the text editor. And let's go ahead and open this as well in our browser, so we can see what that looks like. So here we have mostly a lot of Lorem Ipsum, and it's just a page advertising scissors. Yo'llu notice this has a couple of CSS sheets, and I am going to go ahead and open those and show them to you; they're not really the focus of what we are looking at here.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML Essential Training
5h 34m Beginner Sep 11, 2012

Viewers: in countries Watching now:

This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).

Topics include:
  • What is HTML?
  • Using HTML tags and containers
  • Understanding block vs. inline tags
  • Controlling line breaks and spaces in text
  • Aligning images
  • Linking within a page
  • Using relative links
  • Working with tables
  • Creating progress indicators with HTML5
  • Adding buttons and check boxes to forms
  • Applying CSS
  • Optimizing your pages for search engines
  • Building document outlines
Subjects:
Developer Web Web Foundations Web Development
Software:
HTML
Author:
Bill Weinman

Exploring an example

Let's take a look at an example of a page that uses a lot of the semantic markup elements. Let's make a working copy of scissors.html, and we will go ahead and rename this to -working and open it in the text editor. And let's go ahead and open this as well in our browser, so we can see what that looks like. So here we have mostly a lot of Lorem Ipsum, and it's just a page advertising scissors. Yo'llu notice this has a couple of CSS sheets, and I am going to go ahead and open those and show them to you; they're not really the focus of what we are looking at here.

We have the main.css. which is why Reset css that we have been using throughout this course. Very simple. And then there is the rps.css. RPS stands for Rock Paper Scissors, which is the name of the fictional company that created this web page. You can see that at the bottom there. And this is the specific CSS. You will notice that this is a lot longer; it's 216 lines. And you don't need to type all this in. It's in the exercise files. But you can see that all of the presentation, all of the formatting is done here.

It's just the content that's in the HTML file, and the HTML file, as a result, is very simple and straightforward. You see we have a nav section at the top here, and this is our menu, and it's a simple unordered list, which makes it very easy to edit and view in the HTML, and yet it creates this lovely little menu at the top, and that's all done in CSS. But we called it out with nav. Of course we could've used the div here and it would have worked exactly the same, and it would have looked exactly the same on the screen, but using nav tells automated processes this is the navigation element; don't put this in the outline.

We do have a div here, and this is the only div in the entire file, and its purpose is to create this nice cream-colored box around here visually. It has absolutely no meaning semantically and so it doesn't need to have a section or article or one of those others. Notice if I collapse this, this is bulk of the document. You know, the document now becomes pretty much very small at that point. See, there is the whole body of the document, and I expand this and all of our content is in there and all of our content has that nice cream background around it. So that's entirely presentation and that's the reason I used a div there.

Header is used for this section up here, and article is used for the story of scissors, which is all this Lorem Ipsum here. And then this section over here is in the aside; that's a sidebar. And if I scroll down here, we see aside. aside has its own header, and that's this part up here, About These Scissors Quality is everything! These are amazing scissors, by the way. So the header has the About These Scissors and Quality is everything, and These are amazing scissors is actually in a paragraph outside of the header.

So how you organize these things, I could have put the other paragraph inside of the header, outside of the header. It just depends on what I want the outline to look like; a lot of this is really subjective. And then we have sections. These aren't articles, because they are not a lot of prose that you would put in an RSS feed or anything. These are just little items within this sidebar, so I put them in sections. And inside of each of these sections is an h group, because I have two headers in there. And you'll notice when we make an outline--and we'll look at outlines later on in this course--that only the highest- ranking header actually shows up in the outline.

And so I have a number of sections there, and then I have another little div. I thought I only had one. I do have two. This one again is presentational. Because everything here is floating in the CSS--and again its presentational; it has to do with the CSS-- if I take that out--and I'll go ahead and I'll take that out right now and I'll save that and reload it--you'll notice that my little cream box disappears. That's because all the content inside of that box is floating, and it has no actual height. And so this div with the clear in it, it forces that and that other ones the bottom of the other div, so it's really just this one here.

That's the bottom of the div from way up above. So that forces this outer div box to have some height to it. And then down here we have the footer, and the footer has our little copyright information. It could have a lot of stuff. It could be one of those fat footers that you see on websites these days with a one million links to other sections of this massive corporate website. It can be whatever looks like a footer to you from the perspective of how you want your document outline to look. So this example shows how to use the sectioning and other semantic markup elements.

These elements are not about display; this document would look exactly the same if we use div elements for all of these sections. But this document will outline properly and automated processes will be able to understand how it's organized.

Find answers to the most frequently asked questions about HTML Essential Training.


Expand all | Collapse all
please wait ...
Q: The horizontal nab bar built in Chapter 8 doesn't work correctly in Internet Explorer 8. Do you have a solution?
A: Internet Explorer 8 does not support HTML5 and the NAV element.

The nab bar can work in IE 8 if you change the nav element to div, and update the CSS accordingly. You will also need to move the "display: inline" from the "ul.menu li a" rule to the "ul.menu li" rule.
 
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.
Upgrade now


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.

join now Upgrade now

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

Notes cannot be added for locked videos.

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.