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

Exploring an HTML document

From: Up and Running with HTML

Video: Exploring an HTML document

Once you know the basics of structuring an HTML document, it's a lot easier to begin writing and editing your own HTML. In this chapter we're going to strip an HTML document down to its most basic parts so that we can focus on just the essentials of what makes up an HTML file. Now before we do that, I want to show you a little something about looking through other HTML files out there on the web, because one of the best ways to learn about HTML is to see how other people are doing it.

Exploring an HTML document

Once you know the basics of structuring an HTML document, it's a lot easier to begin writing and editing your own HTML. In this chapter we're going to strip an HTML document down to its most basic parts so that we can focus on just the essentials of what makes up an HTML file. Now before we do that, I want to show you a little something about looking through other HTML files out there on the web, because one of the best ways to learn about HTML is to see how other people are doing it.

I have a pager opened in the browser, and one of the things that you can do, regardless of what browser you're using, you can always go and view the page source for a page. In this case I am in Firefox, so I am just going to go up to the menu and we go to Web Developer, and I am going to say show me the page source for that. So this is one way to do this. And the thing that I found about this over the years, especially when I was before starting to learn HTML, is that yes, I can sort of look at this and I can kind of look at the page, but the problem is it's very difficult for someone who is new to HTML to understand what this is in relation to what they're seeing on the page.

I want to show perhaps an easier way of sort correlating the visual elements on the page with the code that it represents. So I am going to close that window, and I want to show you a little tool that Firefox has that pretty much all modern browsers have at this point, and it's the ability to inspect the page at sort of a granular level by looking at the code. Now, in Firefox this called Firebug, and it's an add-on for Firefox. If you have Firefox installed and you are using it and you don't see the little Firebug icon the I am going to show you, simply go to the add-ons and download it. But all of them have this type of functionality.

Opera has Dragonfly; Chrome and Safari have WebKit Web Inspector; Microsoft Internet Explorer has the Developer Tools built into it; so you'll always have access to this kind of functionality, regardless of which browser you're using. So in Firefox, I am just going to go over and hit this little Firebug icon over here, and when I do that, this little pane shows up at the bottom of the window. Now there I can see the source code for this page, just as I was looking at a minute ago. It's collapsed at the moment, but I can open it up and take a look at all of the different elements. Now what's really nice about this is that I have this little feature right here, which is click an element to inspect the HTML.

So if I select that tool, I can now move around the document and as I move around the document and highlight different elements on the page, you can see it's going down into the code and it's showing me what I'm looking at. If there is a page that you want to learn from or there's something out there that you're like I wonder how they did that, or what code is used to represent this particular element or particular structure, this is a very quick and easy way for you do that. You can just pull up the browser, go into Firebug or WebKit Inspector for whatever and then you can find exactly the code that you're looking for within the source code of the document.

So definitely keep that in mind as you are learning HTML. I'm going to close this for a moment and I am going to go back into the editor that I'm using, which is the Komodo Edit editor. And I've got a page opened up from our exercise files. In the 02_01 directory, I have opened up the structure.htm file. Now, if you open that up in whatever editor you're using, the code is probably going to look a little bit different than mine does, and that's because I've modified the editor a little to collapse some of the code so that I am looking at just the basic structure of the page.

Don't worry about doing this yourself; just follow along with me and take a look at the different elements. So really, HTML documents are made up of three major pieces. The first major piece is the html tag itself. If you don't have html tag, you don't have an HTML document. So, that's going to the parent tag of the entire document itself. You'll have an opening tag, you'll have of the rest of html page, and at the very, very bottom of it you'll the closing html tag. Directly after the html tag comes the head of the document and if I expand this out a little bit, inside the head I have got more information about the files.

So this could to be meta information, title of the page, links to external scripts; it's not necessarily visual information, but it's information that is relevant to the page and that's necessary for the page to function properly. So that's the head of the document, and again, you see that section, the opening head tag and closing the head tag and then its contents inside of it. And the last basic structural part to an html document would be the body itself, and if I open this tag up, you can see the inside the body. This is where all the visual content goes.

So your headings, your paragraphs, your images, your tables, your lists, anything that you have inside the page needs to be visible within the browser or user agent is going go inside that the body element. That's really it. It can be very confusing when you open up a complex HTML page and you see all this content on the page. But if you can really sort of isolate it into those three things that, hey, I have an html tag surrounding all of this, and then inside that html tag I have a head and I have a body. The head is where the information for the document goes and links to external resources, and the body is where the actual visual content goes.

If you break it down into those three areas, it's a little easier to digest and a little easier to start thinking of structuring your own documents. Now that we have gone over the overall structure of the page, we need to focus on each area individually as we build them. We are going to start that in our next movie by discussing the one tag on the page here that I didn't talk about as we went over this, and that would be this one right here: the doc type declaration.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 25731 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

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.

Join now "Already a member? Log in

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 Up and Running with HTML.

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.