play the game
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
>>
I just got 250 business cards for $10, get yours!
 -- CSS, Web Design, HTML, JQuery
- Bob's HTML Course - Take HTML5 Lessons - Twitter - Dave's Blog - Learn on your iPad
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under

Chapter 18

Introduction: Creating a Site Map and Making Your Page Fit the Screen

HTML Guide - Chapter 18 - Chapter 19 - Chapter 20 - Chapter 21 - Chapter 22 - Chapter 23
Creating a Multi-page Web Site with HTML code

Have you made it through most of the other chapters of this tutorial? Great! Now you're ready to actually see the construction of a real web site from scratch with HTML code.

Planning the Site

For a small site, planning can easily take less than an hour. (For big sites, such as those made by large companies, the planning phase can last weeks or even months!)

Here are the major things to think about:

  • Get an Idea - What's the site about?
  • Will the site be just one web page, or several?

If it's just one page, grab a pen and paper and sketch out how you want it to look. If your site will be more than one page, you'll need to draw a page map, and then think about each page individually.

Once you have drawn your site map on paper, decide on the layout. Where will the pictures go? Where will the text go? Where will I put all my web links?

After you layout your site, you'll need grab all your "assets," that is, all your pictures, sounds, anything that's going to be on your page, and put them in one folder on your computer. (As sites get more advanced, sometimes you'll make a sub-folder called "images" or "sounds" but our practice site will be much more simple.)

Site Map (Drawn)

For our practice site, I decided to write my personal web page. It's a topic I know well, and you might also decide that your first site will be about you. It's a great way to practice HTML.

Site Map - Drawn

Take a look at the site map I drew (above) and you'll have a good idea how the final site will fit together. I made slight changes after I drew the map, but nothing major.

Ready to code?

Let's Start Coding

Before you fire up your text editor to code, you'll need to do two things:

  1. Create a new folder on your computer and give it a name.
  2. Drag all the pictures, sounds, movies--anything that'll be on your site--into your new folder.
  3. Remember your folder name! - You don't want to forget where to find it!
Assets in My Folder

I edited two pictures in Adobe Photoshop: a scanned photo of me as a kid, and a picture I took with the camera in my cell phone. I saved them both as JPG.

I created a header graphic (meaning a graphic that shows at the top of the web page) and I also added three page images that are just text with shadows (shown below):

topheader.gif (full size: 700x100)
topheader.gif

daveface.jpg (full size: 200x173)
daveface.jpg

davekid.jpg (full size: 300x150)
davekid.jpg

thingsilike.gif (full size: 300x150)
thingsilike.gif

mypassions.gif (full size: 300x150)
mypassions.gif

mybookmarks.gif (full size: 300x150)
mybookmarks.gif

Starting with a blank HTML file

So now I need to create a blank text file, and add the most basic HTML code:

<html> <head> <title>Dave Kristula's Internet Home</title> </head> <body> </body> </html>

I want to customize the colors on my web page. I want the background color to be white, the text to be black, un-visited links to be blue, and visited links to be red.

It's best to use hexadecimal color codes instead of the color name if we want our web page to look perfect for everyone.

I looked up the color codes for my page with a simple Google Search for hexadecimal color codes. Here are the numbers I need:
  • white: #FFFFFF
  • black: #000000
  • blue: #0000FF
  • red: #FF0000
Try the Search:
Google
  Web davesite.com

You might remember from Chapter 5 that you add the colors you pick to the <body> tag at the top of the web page:

  • bgcolor is the background color, so I add bgcolor="#FFFFFF"
  • text is the text color (surprise!), so I add text="#000000"
  • link is the unvisited link color, so I add link="#0000FF"
  • vlink is the color of links already visited, so I add vlink="#FF0000"
Adding to the <body> tag

So now my body tag looks like this, included with the rest of the HTML file so far:

<html> <head> <title>Dave Kristula's Internet Home</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000"> </body> </html>
Adding a Background Image

If you want to add a background image, you could just add background="graphic_filename" inside the <body> tag for any GIF, JPG, or PNG in your folder. To make things easy, I decided to just use a background color instead. If my background file was greatbackground.jpg my code would have looked like this:

<html> <head> <title>Dave Kristula's Internet Home</title> </head> <body background="greatbackground.jpg" bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000"> </body> </html>

If you do decide to add a background graphic, remember to also set the bgcolor to a similar color as the graphic. If you don't, your page may not show any text to people who are browsing the web without graphics.

Scenario: You have a black-colored background file, and white text--but you forget to set the bgcolor ...someone surfing with images off may see white text on a white background, which would appear to them as a totally blank page!

Thinking about Web Page Width

If you take a good look at my site map and outline drawing, you may have noticed all the pages have a header graphic, which we're going to link to the this first page we're working on. Most designers place the header graphic not only on sub-pages, but also on the main page, which is exactly what we'll be doing.

Now, we're almost ready to do the regular coding--but we have a decision to make. Do we want the page to free-flow and look different on different computers, or do we want a fixed-width page that looks the same on nearly all computers?

For this web site, I'm designing a fixed-width for a minimum 800x600 screen resolution. That means it'll look great for people with almost any computer. By my last count, over 95% of typical web users will see this web site almost perfectly. The few who don't will see a great site--just with a horizontal (bottom-of-the-page) scroll bar. Not a big deal.

When you design for 800x600, you can't make a web page that's actually 800 pixels (dots) wide--you need to take into account that there will be a scollbar on the right side of the web browser window. So your range should be somewhere between 700 and 760.. it's really up to you.

I'm going to design my site for a width of 730 pixels across. So how do I do this? Simple--I make something called a border-less table. (See chapter 12 for a refresher on tables.)

Here's how it works: We use just a standard regular ol' HTML table, with one cell, and set border="0", cellpadding="0", and cellspacing="0" since the table is just one cell. So here's the code:

<table border="0" width="730" cellpadding="0" cellspacing="0"> <tr><td> The actual page text and graphics are found inside here. </td></tr> </table>
Aligning the Layout Table

Now, this code, as it stands, will put our table--holding our graphics and text--on the left side of the screen automatically. That's fine for most people, but I prefer the table to be centered. (Some people even prefer it to be on the right side of the screen!)

To make sure my page contents are centered, I simply add a <div> alignment around the table.

<div align="center"> <table border="0" width="730" cellpadding="0" cellspacing="0"> <tr><td> The actual page text and graphics are found inside here. </td></tr> </table> </div>

Okay, so now our page will be the proper size. We'll be using this setup for all the other pages too, so it'll be helpful to save a copy of this page the way it is, before we add graphics and text. I'm calling mine layout.html but you could pick any name you want for layout page.

Now onto adding the page contents! Time for Chapter 19!

Previous Chapter (17) | HTML index: html code guide | Next Chapter (19)
Copyright © 2005 Dave Kristula. All Rights Reserved.
All trademarks are the sole property of their respective owners.
www.davesite.com