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

Up and Running with HTML
Illustration by

Lab: Controlling page content


From:

Up and Running with HTML

with James Williamson

Video: Lab: Controlling page content

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.
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

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 ...
Up and Running with HTML
4h 32m Beginner Oct 19, 2012

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.

Topics include:
  • Choosing a code editor
  • Coding a basic page
  • Adding headings
  • Formatting paragraphs
  • Creating lists
  • Inserting images
  • Linking to internal and external pages
  • Linking to downloadable content
  • Building tables with headers and captions
  • Creating inline CSS styles
  • Changing the color and font of your text
Subjects:
Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Lab: Controlling page content

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.

 
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 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

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.