| SoloWoodworker |
Page last updated ©2023 Charles Plesums Austin Texas USA | |||
We receive a small commission if you click on the ads (selected by Google), or if you link to a product recommended by us.
| Home | Why | Business | Woodworking | About us | Contact us |
This is an introduction to building a multipage web site, using the HTML language. There are separate discussions on getting started with HTML, and how to make your web site attract visitors and search engines. This will focus on the overall structure of the several pages that make a web site, and how to link between them. It will not (in this intro) focus on making the site pretty, or using a style sheet to make the appearance consistent between pages.
You want to initially build your web site on your local computer. After it is built and tested, you can easily load the entire web site (a series of files) onto a web server. First suggestion, make a directory/folder on your hard drive called "web" - C:\web . (I am not going to keep saying directory/folder. They are the same thing.) Everything we put in that "web" directory will eventually be on the internet in your domain - www.thisisme.com . Your home page will go in this directory.
In addition to your home page, you will probably have a few "independent" pages that could also go in that "root" directory. One such page is an introduction to who you are - perhaps "aboutus.html" - so your customer knows who they are dealing with. On your computer the file will be c:\web\aboutus.html. On your web site, that file will be www.thisisme.com/aboutus.html (note that on your computer you will probably use a back slash "\" but on the web you almost always use a regular slash "/").
You will probably have another "contact" page, perhaps called "contact.html" with various phone, email, physical address, perhaps a map, and snail mail addresses. It should include alternate addresses to use if you fail to respond because you your contact didn't come through. It could be stored on your computer at c:\web\contact.html.
Your home page should be in this "root" directory, but the name of your home page should be c:\web\index.html. Why? Because if a web user puts in your domain www.thisisme.com without specifying a file (web page), the browser looks for a file named "index.html" and shows that file. Bingo... just put in your domain, and get your home page. Of course, they could also enter www.thisisme.com/index.html and get the same thing. Notice again that in Windows the normal divider is a back slash (\), but on the internet the divider is always a forward slash (/). Also, on your computer it may not matter whether a file name is in capital letters, lower case, or a mixture, but on the web the capitalization must be exact - an upper case "A" is different than a lower case "a".
Beyond the basics, assume your web site will have a variety of products, with a separate web page for each product. (You did read the guidelines about how to make your web site attract visitors, so you are planning on a separate page for each product, aren't you?) Put a directory (sub folder), inside the web directory, called "prod". Why prod and not MyProducts? Because short is good. Lower case is good. But you can have any name you want. Make another directory inside the web directory for services, and name it "serv". In your real web site you could have lots of different sections, not just products and services, but those two names will be used for this tutorial. You should plan on dividing your web site into different directories to help keep track of things, so you don't have too many files in a directory.
While you are setting up directories, make a subdirectory in the prod directory called "pic" where we can store the pictures associated with products. And make a subdirectory in the serv directory called pic for the pictures associated with services. I didn't initially think I would have enough pictures on my web site to need a separate directory, but I have gone back and restructured my web sites.
There will be a lot of things in common on all your pages, so start by creating a web page like this (it should be familiar if you studied the previous page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<p align="center" ><font color="#FF0000" size="7" face="fantasy"><i>Joe's Furniture</i></font></p>
<h1></h1>
<p></p>
</body>
</html>
You might want to save this "dummy" page as "aStart.html" and then save a copy of it as each of the new web pages you start. Of course, you will need to fill in a different title on each page, a different description, a different set of keywords, etc. This starter page has and empty H1 tag since every page should have a header (title) in the body. It also has an empty paragraph to help you start the text.
There is one more line that you may not recognize. The first thing in the body is a pseudo-logo. Your logo may be a graphic, used consistently on every page (see www.plesums.com for my consulting logo, or www.plesums.com/wood for my woodworking logo, both of which are graphics). But the logo at the top of each Solowoodworker.com page is not a graphic - it is some tricky text formatting that accomplishes the same "consistent identity" of a logo. So for this example I have included a paragraph, centered, with a large red font that says "Joe's Furniture". Just for fun, I used a font-type "fantasy" rather than a specific font, so the browser will select one of the unusual fonts from your computer. (Of course, your logo should use a font that can also be used on your business cards, letterhead, and advertising.)
The first page we will work on is your home page. If people already know you (or have your ad or business card) they may start here. Most of the customers who find you through Google or another web search will likely "land" on one of your detail product or service pages, then work their way back to your home page when they want to see with whom they are considering doing business. So remember, the home page is the first impression for half you visitors, but there are lots of other entry points - you cannot assume everyone starts here. Start your home page by copying the aStart.html file into the C:\web directory with the name index.html.
For practice, edit the home page to put "Joe's Furniture, Austin Texas" between the title tags in the head section. This is what will appear on the browser's title bar, and is often overlooked as important advertising.
For practice, put "Welcome to Joe's home page" between the H1 tags. That is a terrible title for a home page, but it will be helpful as we experiment with moving around the web site. Put any text (for now) between the paragraph tags under the heading.
Add a heading level 3 below the paragraph you just entered. For now, make that heading say "Custom Furniture". Then add a paragraph below the heading that says "We build custom furniture. See examples of our products."
Add another H3 heading that says "Services" and below that a paragraph that says "We repair and refinish busted furniture. Learn about our services"
Add another H3 heading that says "Who we are" and below that a paragraph that says "We are a one-person business located in Austin Texas. Learn more about us"
Add another H3 heading that says "Contact Us"
If you want to copyright this page, you can put another paragraph,perhaps in smaller type, perhaps centered, that says ©2011 by Joe's Furniture, Austin Texas. To get the copyright symbol, enter the 6 characters ©
Your home page, C:\web\index.html should now look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Joe's Furniture, Austin Texas</title>
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<p align="center" ><font color="#FF0000" size="7" face="fantasy"><i>Joe's Furniture</i></font></p>
<h1>Welcome to Joe's home page</h1>
<p>Blah Blah Blah - getting started </p>
<h3>Custom Furniture</h3>
<p>We build custom furniture. See examples of our products.</p>
<h3>Services</h3>
<p>We repair and refinish busted furniture. Learn about our services</p>
<h3>Who we are</h3>
<p>We are a one-person business located in Austin Texas. Learn more about us</p>
<h3>Contact Us</h3>
<p align="center"><font size="-2">©2011 by Joe's Furniture, Austin Texas.</font></p>
</body>
</html>
Save the file you have been editing, and double click on the file so that it appears in your browser. It should work fine, even though it isn't pretty yet.
Your home page directed people to your products, so you want to show the variety of products you have for people who start at your home page. On the other hand, the half (or more) of the people who come to you from a search engine were not searching for "Joe's products," they were searching for an entry table, coffee table, cocktail table, dining table, breakfast table, end table, plant table, sofa table, card table, or whatever. Therefore you need to have a specific web page for every type of table you build that people might search for - a page so good that it is high on the list of Google's recommended pages. But you might not want to list every single product on your home page. Therefore, for this exercise, I will assume that there is a summary page of your products - sort of a product home page. For your home page, you could have your user enter www.thisisme.com and it would find the index.html file in your staring (root, web) directory. If you would like to allow people to enter www.thisisme.com/prod and get to your summary of products page, in the prod directory, name that "product home page" (in the prod directory) index.html. Start by copying the aStart.html file into the C:\web\prod directory with the name index.html.
For practice, edit the products page to put "Custom furniture by Joe's Furniture, Austin Texas" between the title tags in the head section. This is what will appear on the browser's title bar, and is often overlooked as important advertising.
For practice, put "We build a large variety of custom furniture" between the H1 tags. Put any text (for now) between the paragraph tags under the heading.
Add a heading level 3 below the paragraph you just entered. For now, make that heading say "Tables". Then add a series of paragraphs below the heading - each paragraph should start with a different type of table, and have a few more words about that type of table. We will play with this list later.
Add another H3 heading that says "Bookcases" and below that a paragraph that would be replaced with a whole list of types of bookcases.
Add another H3 heading that says "Dressers" . Include enough heading and content to keep you reminded about the type of page this is, but we won't work with more of it in this tutorial.
Your product page, C:\web\prod\index.html should now look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Custom furniture by Joe's Furniture, Austin Texas</title>
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<p align="center" ><font color="#FF0000" size="7" face="fantasy"><i>Joe's Furniture</i></font></p>
<h1>We build a large variety of custom furniture</h1>
<p>Blah Blah Blah - all our furniture is built with high quality materials to your specifications. We will work with you to design your piece, exactly as you require. See some examples of our work</p>
<h3>Tables</h3>
<p>Entry tables, often a small table near the primary entrance for keys, etc.</p>
<p>Dining table, often with extension leaves....</p>
<p>Breakfast table, typically a smaller dining table for use in a kitchen or breakfast room</p>
<p>Coffee table or Cocktail table, a smaller, low table in the center of a seating area</p>
<p>End table, a medium height table at the end of a sofa or between other seats...</p>
<p>Sofa table, a long narrow table behind a sofa, often used when a walk-way is behind the sofa.</p>
<p>etc.</p>
<h3>Bookcases</h3>
<p>Start the list of different types of bookcases</p>
<h3>Dressers</h3>
<p>List of dressers and chests of drawers</p>
<h3>Next type of furniture</h3>
<p>Another list</p>
</body>
</html>
Your home page could also direct people to your services, so you want to show the people who started your home page the variety of services you offer. Keep in mind that the search engines (Google, etc.) are going to be looking for specific services, so you need lots of specific web pages to attract the customers who search for you. As with the "home page" and product (home) page, I suggest you have a services (home) page that summarizes your services, and leads to pages with specific services. Start by copying the aStart.html file into the C:\web\serv directory with the name index.html.
For practice, edit the products page to put "Furniture Services by Joe's Furniture, Austin Texas" between the title tags in the head section. This is what will appear on the browser's title bar, and is great advertising.
For practice, put "Furniture Repair and Refinishing" between the H1 tags. Put any text (for now) between the paragraph tags under the heading.
Add a heading level 3 below the paragraph you just entered. For now, make that heading say "Refinishing". Then add a series of paragraphs below the heading - each paragraph should start with a different refinishing service. Although we will not play with this list, it would be built and completed like we are going to do the product page. For this example, I have made paragraphs with "Scratches and routine wear and tear", "Smoke damage" and "change color."
Then I added another section with an H3 heading that says "Repair" and below that paragraphs for Malicious damage and fire damage.
Continue with other H3 headings for each category of services, like before. The headings and content here are to keep you reminded about the purpose of this page, but we won't spend a lot of time with it in this tutorial.
Your service page, C:\web\serv\index.html should now look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Furniture Services by Joe's Furniture, Austin Texas</title>
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<p align="center" ><font color="#FF0000" size="7" face="fantasy"><i>Joe's Furniture</i></font></p>
<h1>Furniture Repair and Refinishing</h1>
<p>Blah Blah Blah - bring things back to like-new condition</p>
<h3>Refinishing</h3>
<p>Scratches and routine wear and tear</p>
<p>Smoke damage</p>
<p>Change color</p>
<p>etc.</p>
<h3>Repair</h3>
<p>Burglary or malicious damage</p>
<p>Fire damage</p>
<h3>Next type of service</h3>
<p>Another list</p>
</body>
</html>
The HTML tag to identify something or to link someplace else is called an anchor. Why? I have no idea, but the tag is <a>. The attribute (inside the first tag) is "HREF=" to say where you are going. The part between the <a> and the </a> is what the user will click to get there.
Open your c:\web\index.html page in whatever editor you are using. Find the line that says
<p>We build custom furniture. See examples of our products.</p>.
Pick the words you want the user to click - it could be "custom furniture" or "see examples" or "products." For this exercise I will use "custom furniture". Where we want our user to go is a different web page, in a different directory, specifically to prod/index.html (Remember to use / rather than \ since we are dealing with the Internet rather than Windows). Add the anchor tags so that line now looks like this:
<p>We build <a href="prod/index.html">custom furniture</a>. See examples of our products.</p>.
While we are doing the products page, let's make a similar link to the service page.
<p>We repair and refinish busted furniture. Learn about our <a href="serv/index.html">services</a></p>
Once our customer goes to one of our special pages, he can return to the home page with the back button on the browser, or the backspace key. But if the customer arrives directly to a detail page, such as from a search engine, there needs to be a link to the home page. You should add a way to "get home" from every one of your pages. If you are in the serv or prod directory, how do you define the "parent" directory? The code for parent is two dots, where you would have put the directory name. Therefore a line of HTML, such as this, could be on each page in a subdirectory. If you want to get back from a page in the same directory, just specify the file name, index.html .
<p>Go to Joe's Furniture <a href="../index.html">home page</a>.</p>
You will probably build a web page "about us" using the techniques already discussed. But rather than continuing to build practice pages, lets use "about us" to link to a different web page... such as solowoodworker.com/aboutus.html . Find this line in your home page
<p>We are a one-person business located in Austin Texas. Learn more about us</p>
We want the user to be able to click on the words "about us" and go to a different web page, so the anchor is <a href="http://www.solowoodworker.com/aboutus.html">about us</a>. We need to put in the http:// part to say it is an external web site (using hypertext transfer protocol) rather than just a file on this system. The links we have built so far have opened in the same browser window, which generally is good - I don't want to start a new browser window for each page the user visits. However, if they are going to a different web site, maybe I want to keep the window open for my site, and start a new window for the "external" web site. I can add another attribute to the anchor, target="name". If the name is "_blank" it will always be a new browser window. If I have links to several "external" web sites, such as my friends, I could have all of them share a browser window named "friends" by including the attribute target="friends". That link to "about us" now looks like this:
<p>We are a one-person business located in Austin Texas. Learn more <a href="http://www.solowoodworker.com/aboutus.html" target="_blank">about us</a>.
Contact probably deserves a whole page of phone numbers, physical address, maps, emails, etc., but for now, we will just make the Contact Us heading into a link to the customer's email system. Assume your email address is joe@thisisme.com (use an email address that includes your domain, if possible). By using a "mailto" attribute, you will use your customer's default mail system and email address... you don't have to worry about sending the mail from the customer to you. If you would like to specify a subject, you can by starting immediately after your email address with ?subject= and whatever you want for the subject. Therefore if you want to make the H3 "Contact Us" heading a link to mail to you, that line becomes:
<a href="mailto:Joe@thisisme.com?subject=I was on your web site and...."><h3>Contact Us</h3></a>
If you have been building the files on your computer as we have discussed them, you should now have saved C:\web\index.html, C:\web\prod\index.html, and C:\web\serv\index.html. You probably also have saved a file c:\web\aStart.html, but that is not part of the testing. Click (or double click) on the C:\web\index.html file, and it should open in your browser. In the browser, try clicking on the links in the home page to move to the product and service pages, and to move back. Remember, all we are looking for now is functionality, not pretty - that comes later!
Let's build a product page for end tables. I have picked a couple end table pictures and some descriptions from my plesums.com/wood web site - you need to use your own pictures and descriptions, of course, but here is how I structured the page.
First, copy the aStart.html "skeleton" page and save it as endtable.html in the prod directory. Why "endtable.html"? Users may need to type this into their browser, so real words are much easier than codes. On your computer upper/lower case probably doesn't matter, but on the web it does... EndTable is different than endtable is different than ENDTABLE. I recommend that any file name a user may encounter be all lower case. (Users do not type in names of pictures, so I use upper and lower case to help me, but I have to be perfectly consistent.) Spaces can be used in some file names, but not on the internet - if you use a space in a file name things get really messy. Don't do it!
Once we have the file c:\web\prod\endtable.html ready to edit, add "End Tables at Joe's Furniture" between the title tags in the head. Add the H1 title "End Tables". Add a generic paragraph about end tables before we start describing the first end table - you will see what I wrote in the example below.
I would like to format a picture and text side by side. I want the text to take all the horizontal room not used by the picture. If the picture is on the left, the text will be on the right, but I want the next picture on the right, with the text on the left. If there is more picture than text, I would like the text centered vertically on the picture, or vice versa. The solution is simple. HTML has a "table" that it automatically formats. I will make a table with one row and two columns for each picture. I will make a new table for each picture so the width of the columns does not have to be the same... it can be different for each picture. (And HTML cannot start displaying the table until it has the whole table, so if I have a very short table, it can be displayed while the other tables are still loading, making the web site seem faster.
The tag for a table is... <table> . But we need tags for each row of the table <tr>, and still other tags for each data element (each column) in that row, <td> .
The picture and text in the table end up very close to each other. Therefore I like to add an attribute to the table tag... cellspacing="15". This means that there will be 15 pixels of space around each cell, and the cells will not run together. (I experimented with the amount of space until I liked what I saw, and cellspacing of 12-15 looked good to me).
Rather than telling you what to type into the end table web page, let me show you what I did, then explain it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>End Tables at Joe's Furniture</title>
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<p align="center" ><font color="#FF0000" size="7" face="fantasy"><i>Joe's Furniture</i></font></p>
<h1>End tables</h1>
<p>An end table is normally used at the end of a sofa or between other chairs in a living room or family room. The height is about the height of the arms of the adjacent chairs or sofa, blah blah blah.</p>
<h3>Table with Olive Ash Burl veneer</h3>
<table cellspacing="15">
<tr>
<td><img src="pic/EndTable.jpg" width="372" height="300" alt="End Table with Olive Ash Burl veneer" border="0">
</td>
<td><p>This walnut end table incorporates lighter olive ash burl in the top and sides. The Olive Ash burl veneer is glued to a heavy substrate using a vacuum press. Edges were trimmed from the veneered top panel, so the pattern continues on the side aprons. The rest of the table is built from solid black walnut, including a piece of walnut with exceptional grain pattern for the top edges. The choices of wood for tables or other items like this is almost limitless.</p>
</td>
</tr>
</table>
<table cellspacing="15">
<tr><td><p align="right">The top of this table was made from four consecutive veneer "slices" from the burl. Consecutive pieces were joined at the center, like a book (called bookmatched... clever, huh?), then two bookmatched sets were joined in the other direction to make a four-way bookmatch. Each quarter of the top is very similar (but not identical, since they were different layers) but combine to make a very interesting pattern.</p>
<p align="right">You can have multiple paragraphs as par of the table data</p> </td>
<td><img src="pic/EndTableTop.jpg" width="463" height="300" alt="Bookmatch veneer table top" border="0"></td>
</tr></table>
<p align=center><b>$5,500 each, $10,000 for a pair<br />
Other woods, veneers, and features available</b></p>
<p>Go to Joe's Furniture <a href="../index.html">home page</a>.</p>
</body>
</html>
Start by assuming that there will be multiple end tables shown on this page (at least eventually). Therefore H1 is the page title "End Tables", followed by a general paragraph about end tables. The H3 heading is used for the section of the web page for the table with Olive Ash Burl veneer... as you can see.
Now for the first table. Start with a table tag, and the cell spacing attribute. It is helpful to be able to spot where tables start and end, so I skip a line before the starting tag, and after the ending tag. That extra line has no impact on what is displayed in the user's browser, but it helps me. Then I start the table row (there will only be one row in this table, but I still need to say where the row begins and ends).
For the first table, the picture is on the left, so is the img tag is the first piece of table data. The pictures can be anywhere you want, but I strongly recommend that a copy, shrunk and ready to use, be kept in your web directory. As the web site becomes larger and more complex, it is easier to handle if the pictures are in a separate directory related to the pages where the pictures are used, which is why I suggested the pic subdirectory. You are already in the prod directory for this web page, so you only specify the pic subdirectory with the file name. The name of the picture is in upper and lower case "EndTable.jpg" to help me glance at the name and identify the picture. I have to always use exactly that capitalization, but users will never access the picture directly, so that is not a problem. Width, Height, Alt, and border arrtibutes are as previously discussed. I could have more text and pictures in that table data, but my style is only one picture at a time. Therefore we can end this table data and start the next table data, (</td><td>) which will be the text on the right. The table data on the right is a text paragraph describing the picture, end ending the paragraph, then the end of the table data, the end of the row, and the end of the table (</p> </td> </tr> </table>)
The next table is much the same, but the text is on the left (appears first) and the picture is on the right. I think it looks good if the text is aligned along the picture, with means that the paragraph is aligned right rather than the default aligned left. The table, row, and data are begun as before - this time they are on fewer lines in the HTML code, which makes absolutely no difference - whichever you prefer. To demonstrate how easy it is, there are two paragraphs in the table data, both aligned right. Then the picture is in the second table data of the row, which places it on the right.
After the table, you can have a normal paragraph. I strongly recommend you include prices on your web site, even if you say (as I do) that the prices represent the cost to reproduce a piece exactly as shown, and will vary with features and materials, but it keeps people from expecting a $25 end table from wasting your time, and reassures people that your custom products aren't likely to cost $100,000. I hope you will sell your end tables for $10,000 per pair - that you will never take away one of my customers.
You have now learned a lot about structuring a web site. If you haven't created all the files discussed, you can download a zip file with a copy of my c:\web directory and sub directories by clicking here. Depending on how your computer is set up, the zip file will either appear in a browser window, and the files can be saved as appropriate, or it will download the zip file and you can open a program to "unzip" the files, and store them.
Now that the basic functionality is in place, you can move on to making you web site pretty, but I haven't completed that web page yet.
This site (layout and contents) is ©2008-2023 by Charles A. Plesums. The material is free for personal use. Questions? contact us. |