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

Creating a layout template: main body area

From: XHTML and HTML Essential Training

Video: Creating a layout template: main body area

Continuing with the development of our website, in this lesson we are going to start building the content portion of the webpage. We are going to start with this middle image. I call it the ID image, because it changes with each of the pages, so it sort of helps to ID the page, and then we are going to start building the styles for the page itself. We are going to start with the left- hand side, the main content in this lesson, and in the following lesson we'll do the right-hand side, the sidebar content, and then we'll have a template that we can use to begin building the pages for the rest of the website.

Creating a layout template: main body area

Continuing with the development of our website, in this lesson we are going to start building the content portion of the webpage. We are going to start with this middle image. I call it the ID image, because it changes with each of the pages, so it sort of helps to ID the page, and then we are going to start building the styles for the page itself. We are going to start with the left- hand side, the main content in this lesson, and in the following lesson we'll do the right-hand side, the sidebar content, and then we'll have a template that we can use to begin building the pages for the rest of the website.

So let's get started. So I have loaded up in my text editor here. I have the beginning.html and I have the beginning.css from the 05- layout-left folder in the Exercise Files, and so we'll start by saving as, because that's what we always do. That gives us a working space where we're not writing over the exercise files themselves. This one we'll call template.html, because that's what we are going to end up at the end of these lessons here, with the template for working with the rest of the website and we'll Save As the main.css for CSS file and so now we have our working space setup.

So I'm going to go ahead and insert another table row and so this is starting to get more confusing here, all these table row beginning and ends next to each other like that and so what I'm going to do is I'm going to put in a comment, so we'll know that this is the end of this here. So I'm going to just say mainMenu. I like to do this. It helps to keep track of where you are in the page, so I can see easily that that's the end of that, even though they line up and my editor is very nice.

It gives me a little line here to help line things up, but it's nice to have that. And then we are going to have a table inside of this table cell and that will end here, and again, this is going to be a big enough table. It's going to be a lot of stuff in between here, so I'm just going to go ahead and put in the comment now. And then I'll always know where I am, and so this table will have one row and it will have two columns and so there will be a column for the contentLeft.

And it will end here. And again, I'll just put in a comment, as there will be stuff in between there, and it will have another row for the content right. I'll just go ahead and copy this, Ctrl+C or Command+C if you're on a Mac and instead of contentLeft that will be contentRight. I'll change the comment for that one and there we have it.

We now have space for our right and left content tables and I'm going to save and we'll go ahead and put in a div for our mainContent and we'll do the sidebar in the next lesson. And then we'll just go ahead and put in a little bit of content here, just so we can look at it on the screen. All right, so we'll save this. I'll just look it over, make sure it all looks reasonable. There is our begin div, and end div, or begin td and end td, and our table.

We can see here in table row, table row ends, table ends, this all looks like it should work, and if we go ahead and load this up in the browser, drag the template.html into the browser and there we have it. We have a space with our main content. This is the default font, remember that, and so it's not lined up exactly how we would like it to be lined up, but we are going to take care of that in our CSS right now. So just go ahead and do the CSS part of this.

Scroll down to the bottom. Enter comment here. We'll start with viewing table cell, contentLeft, and we want to give that the white background color, and a width of 505 pixels. Now I have already measured all of this out with the content that was given to me by the client.

The mainContent, this is our div for the main content, and it has padding 0 and 15 pixels. I'll explain that in a moment. Margin of zero. Now it's important at this point to understand the difference between margin and padding. So what I'm going to do, I'm going to save this and I'm going to go ahead and I'm going to put a border on this, so that you can see what it is And this is just temporary, this is just for illustration purposes, so you can see what the margin and the padding is all about.

Let's look at this in the browser. I reload here. You see this box. This is the border that we just put in for the div, and you see it goes all the way up to the edge of the image above it into the edge on the left and edge on the bottom, and of course, the edge on the right, but this is the width of 505 pixels there. Now if I put a margin on that, let's say we put a margin of 10 pixels. So this will put 10 pixels all the way around, top, right, bottom, and left, and so we'll save that and you will see what a margin looks like, because we have this border here.

You can see that the margin goes on the outside and it actually increases the size of the div. It pushes everything out. So it adds those 10 pixels all the way around and the div itself is inside of the margin, so the margin goes outside of the content box. Padding on the other hand goes on the inside of the content box and so if we make that margin zero, and let's just make this padding something large so that we can see it, say 50 pixels, and so that I'll put 50 pixels on the top, on the right, on the bottom, and on the left.

I'm just making it really big, so you can see what it does. It actually increases the size of the content box and it adds that padding on the inside of the content box, so that's the difference between padding and margin. Padding and margin are: margins on the outside, padding is on the inside, and they both actually increase the size of the box, so that the content on the inside is still the dimensions that you asked for. So we can go ahead and make this what we wanted it to be, which is zero and 15 pixels, and so that's zero on the top and the bottom and 15 pixels on the left and the right.

Save that and we'll take off this border, because that was just for illustration purposes and we'll go ahead and enter the next part of it. So the reason I did it the way that I did it and that will become clear in a moment. Save that. So this is the p tags, so all the p tags within the mainContent context will have this formatting and this is laid on top of, remember that this cascades, this is laid on top of our defaults up here, which have these margins. And so, the margin for the left is getting overridden to be zero and what that does is it puts it up against this 15 pixel padding on the div, and I make the margin left for all of our different elements.

The reason I do that is because the relative margin sizes for the different sizes of text, like the heading size and the paragraph size, they tend to be a little bit different. So I make them all zero and I just use the padding in the div instead to create that margin. It's just a little trick. This is the way I like to do it. It makes my life easier. And so I set a padding to be a certain size on the right and left in the mainContent and I set that margin-left to be zero in the paragraphs and also in the headings, and that way everything lines up nicely, just the way that I want it.

So I'm going to go ahead and enter some default styles for the headings. Let me use the copy and paste, because I don't like to type all of these. I'll go ahead and change this one to a 2, this one to a 3, and there we have that. Now I made the font-family for the paragraph for the body text, this nice serif Georgia font, and I say serif as a fallback, and this is the Trebuchet MS for the sans-serif for the headings.

Again, a lot of these style choices were made for me by the client. And then the mainContent h1. So what I'm able to do is I'm able to set defaults for all of them like that and then I can make adjustments from that starting point in a separate style just from mainContent h1 and this is again is taking advantage of the cascading property in the CSS cascading style sheets. Again, I'm setting all the margins to zero except that bottom margin and that bottom margin is just going to give us a little space between the heading and the body paragraph, but that left margin is set to zero just like it is here for the paragraphs and so that will take advantage of this 15 pixel padding on the left-hand side and the div.

So there we have it. This is our style for the main content on the left-hand column and we'll go ahead and reload here and we see that that's exactly how we want it to look. The only piece missing now is that middle ID element. Let's go ahead and add that in the HTML. And so that gets another row right in here. and this is our page ID image and it gets this image source=images/home_ banner.jpg, and there will be a different banner for each of the pages.

So there will be a gear banner for the gear page, etcetera, and the width is our standard 770 pixels, height is 90 pixels, alt says Welcome to Surfing Paradise. We'll save that and go and load up the page. So we see I missed the equal sign here between width and my syntax highlighting editor makes it in red, which makes it nice and obvious there.

So just put in that equal sign and I'll save there, go ahead and load it up in the browser, and there we have it. So there is our ID image in the middle, here is our main content. You notice that the ID image also gives us a little bit of a nice little extra white space here. It has this sort of organic look to it. That is the part of the ID image right there. If I right-click on this and say View Image, you can see that that white part is part of the image there. So there we have it. This is our main content on the left- hand side and we have space over here for the sidebar content on the right.

Show transcript

This video is part of

Image for XHTML and HTML Essential Training
XHTML and HTML Essential Training

59 video lessons · 80931 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 10s
    1. Welcome
      1m 16s
    2. Using the exercise files
      1m 23s
    3. Choosing a text editor
      2m 31s
  2. 15m 46s
    1. Introducing HTML and XHTML
      2m 53s
    2. Understanding versions of HTML and XHTML
      2m 25s
    3. Exploring a simple XHTML page
      4m 47s
    4. Understanding the structure of an XHTML document
      2m 58s
    5. Understanding document containers
      54s
    6. Creating and using templates
      1m 49s
  3. 42m 4s
    1. Understanding how empty space is formatted in XHTML
      2m 42s
    2. Using paragraph tags
      2m 42s
    3. Aligning paragraphs
      2m 49s
    4. Understanding block-level and inline tags
      1m 24s
    5. Controlling line breaks and spaces
      5m 43s
    6. Formatting text with phrase element tags
      3m 28s
    7. Formatting text with font markup elements
      3m 24s
    8. Adding document structure with headings
      3m 25s
    9. Formatting quotations and quote marks
      2m 19s
    10. Preserving pre-formatted text
      1m 30s
    11. Selecting a typeface
      4m 33s
    12. Selecting a type size
      2m 11s
    13. Using ordered and unordered lists
      5m 54s
  4. 7m 48s
    1. Using inline images
      3m 17s
    2. Flowing text around an image
      2m 4s
    3. Breaking lines around an image
      2m 27s
  5. 22m 34s
    1. Working with hyperlinks
      7m 46s
    2. Using relative URLs
      3m 5s
    3. Specifying a base URL
      2m 4s
    4. Linking within a page using fragments
      4m 28s
    5. Creating image links
      5m 11s
  6. 22m 56s
    1. Introducing tables
      4m 37s
    2. Formatting tables with CSS
      8m 50s
    3. Aligning images with tables
      5m 7s
    4. Reviewing an alternative solution using CSS
      4m 22s
  7. 14m 31s
    1. Introducing frames
      7m 56s
    2. Hiding frame borders
      3m 15s
    3. Creating inline frames using iFrame
      3m 20s
  8. 20m 50s
    1. Introducing forms: part 1
      10m 37s
    2. Introducing forms: part 2
      7m 45s
    3. Using CGI with forms
      2m 28s
  9. 25m 42s
    1. Introducing CSS
      3m 11s
    2. Understanding levels of inheritance
      6m 10s
    3. Learning CSS syntax
      11m 23s
    4. Using units of measure in CSS
      4m 58s
  10. 1h 45m
    1. Comparing table layout and CSS layout
      1m 25s
    2. Exploring the finished web site
      2m 37s
    3. Building a document header
      8m 18s
    4. Placing a banner and a contact button
      8m 13s
    5. Laying out a main menu
      6m 55s
    6. Creating a layout template: main body area
      13m 31s
    7. Creating a layout template: sidebar area
      5m 17s
    8. Creating a layout template: footer content
      4m 46s
    9. Building a main home page: main body content
      11m 24s
    10. Building a main home page: sidebar content
      8m 52s
    11. Creating a page with a menu, graphics, and formatted links
      13m 26s
    12. Creating a page containing an ordered list
      6m 44s
    13. Creating a page containing video
      10m 45s
    14. Touring the finished site
      3m 45s
  11. 53s
    1. Goodbye
      53s

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 XHTML and 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 preferences from 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.