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

Building a main home page: main body content

From: XHTML and HTML Essential Training

Video: Building a main home page: main body content

Now that we have our template built, we can start putting content in the website. So, here in the home-pt1 folder in the Exercise Files, you will see there is the template.html and that's the template that we built in the last lesson and you will also see a text folder here that has home.txt. That's the text that goes in the page and then we have the CSS folder, of course, which has our beginning place for the CSS and this is all loaded-up in my text editor and so here is the template.html.

Building a main home page: main body content

Now that we have our template built, we can start putting content in the website. So, here in the home-pt1 folder in the Exercise Files, you will see there is the template.html and that's the template that we built in the last lesson and you will also see a text folder here that has home.txt. That's the text that goes in the page and then we have the CSS folder, of course, which has our beginning place for the CSS and this is all loaded-up in my text editor and so here is the template.html.

Here is our beginning.css and here is the text file with all the text that will go in the home page. So, let's get started. First thing we do, of course, is to do the Save As. In this case, we are going to save it as home.html. So, we'll be building the left-hand side in this lesson and the right-hand side in the next lesson. We are still going to call this home.html, save that and then the beginning and the CSS will be saved as main.css and the text file we are not going to be writing over, so we can leave that alone at this point.

All right, so now, let's go down here to the place where the main content goes and I'll just select these two lines and I'm going to copy everything from this point, all the way down to here. This is the end of the content for the first half of the page, the left-hand side and then down here, where it says sidebar, that's the content for the sidebar. We'll be dealing with that in our next lesson. And so I'm going to go ahead and press Ctrl+C to copy on the PC, we'd use Command+C on a Mac, come over here to home, where I have selected this and I'm going to press Ctrl+V to paste.

And so, there we are done. Ha! Not really. Now, we need to put in our heading levels. I'm going to wrap the HTML around this, so this will be a

and close the

at the end and then here we are going to have the beginning of our paragraph and here goes the end of the paragraph and then the beginning of a paragraph here and I'm going to be sneaky and do copy and paste and have an end a paragraph and a begin a paragraph in my copy buffer, so I press Ctrl+C to copy and then I paste here and I have the ended that paragraph.

Of course, this doesn't begin a paragraph here, so I'll just take that and I'll move it down here, a little one more, and then I can paste an end a paragraph here and now we have another heading. Now, this heading level here is going to be

and the

there and an

for this, because we are using

on the right-hand side, so this will be an

and then we have more paragraphs.

Add an ending paragraph here and this is another

,

, add a paragraph here and an ending paragraph here. I didn't get to use my paste buffer for that very much, did I? And this is a link and the link will have this text in it here. So, I'll cut and paste and then just take out this extraneous text at the end. Scrolling down, I have another

, and another paragraph and there is a couple of links in this one, the one here.

I'll do the same Cut and Paste and you get rid of this at end and do the same thing here. I missed the equal sign. That's the beauty of the syntax highlighting text editor. And there we have it. So that's our content and now I like to indent stuff. I'm just like that. It makes everything pretty. But we are not quite done, are we? Go ahead and indent anyway at this point and every editor has a different way to do this.

Once you have it highlighted, in this particular editor, which is Notepad++, I'll hit the Tab key. I know that in BBEdit it's something like Command+Right bracket or something like that. I actually use BBEdit a lot and my fingers remember how to do it, but I don't always remember what it is I'm doing. It's just that my fingers remember it and so anyway. This is going to be an unordered list and so that ends at the bottom. So, I'm cutting and pasting and put that there and then each of these has a

  • at the beginning and an end
  • at the end and so I'll use copy and paste for this.

    Copy, paste, paste, paste, paste, paste. And copy, and paste, paste, paste, paste, paste. There we go. So, that is our content, rather than going through all that. I wanted to go through it this time just to show you what my workflow looks like as I do this sort of thing. In the subsequent lessons, for the rest of them, I have them all HTML-ified in the text file.

    So, that will make it easier for you to cut and paste them. So, now that we have this content in here, let's just go ahead and take a look at it in our browser. We are going to do a little bit more CSS on it, but it's not going to look too bad, as it is right now. There are a few styles that we haven't yet installed. I'm going to take the home file and drag it into the browser and there we have it. That's not bad. That's pretty close. There are a few things we are going to do. We need to enter these

    and

    levels and these links don't quite look right, and we are going to do a little bit of formatting also on this unordered list.

    So, let's go into our CSS file and we'll scroll down here to the bottom and actually it's not at the bottom. We are going into the main content part. All right there and we are going to enter the

    level. So, I'm just going to copy this one because it's just a little change from there. You see, I actually do this a lot in real life, create two copies of that. One of them will be

    and one of them will be

    and then we can just change them.

    So h2, font-size is 1.2em and the color is 3C3809 and it does not have this font-weight:bold in it and the margin is the same, 0.4em. Now the h4, it's 1.1em in size and it is bold and the color is this gray and the margin, this is the bottom margin now, it is actually -0.2em.

    So let's go ahead and take a look at all of that and see what that looks like in the browser. Oh, it's lovely. And that's what it looks like over here as well. Excellent! Now, these links aren't right, you see the links? Look at what the links do in the finished version. They have this orange color and they change to gray and they get this dashed underline, which is actually not an underline at all. It's a dashed bottom border. So, I'm going to go ahead and actually in our CSS, we are going to make this the default anchor style and it goes in the outer table up here.

    And we say outerTable a:link and outerTable a:visited. That's for the visited and the unvisited links and I'll get text-decoration:none, so that takes out the underline and I'll get this color. And then we do outerTable a:hover and that's the style for the mouseover.

    When your mouse is hovering over the link, this is the style that you get there and it will have this color of 566440 and border-bottom: 1px dashed #566440. So, when we save this, we'll see that our links look like we except them to see. There we are, see that? And that's how we want those to look and so that will also happen in the sidebar because we put it in the outerTable level.

    Finally, what we need to do now is this is unordered list. And that will go down here in the main content, right here. #mainContent ul. And that will be Georgia and font- size 0.9em, just like in the paragraphs.

    margin-bottom. So it would be the spacing after the whole list, 1.4em, and then finally the li, which is the line items themselves, those will have a margin-bottom of 0.6em. So, that's the spacing between those items. We will go ahead and save that and look out it the browser and there now, our list looks like we expect our list to look.

    So, that's the left content there, that page. That's pretty easy once we have the template all done. You can see that the rest of these pages are going to go fast. In our next lesson, we'll do the sidebar content and we'll be all done with this main page.

    Show transcript

    This video is part of

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

    59 video lessons · 80299 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 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.