Web sites are combinations of text, graphics and other elements such as forms arranged in rows and columns. So it is natural that page layout should have been modeled on tables. Today tables are being supplanted by "tableless" code based on CSS (Cascading Style Sheets).
But tableless layout is not intuitive for a beginner nor is it easy to learn. Since our goal is to provide the Web entrepreneur with the means of creating a Web site or gaining enough understanding to supervise a Web developer, we first look at page layout with tables. Once you have mastered tables you can develop a knowledge of tableless layout. (This site is primarily tableless and a look athe source code will show.)
The tutorials rely on the best reference HTML and related Web site coding available: W3 Schools. If you follow these tutorials along with our sample pages you will gain the same skills as the students enrolled in the college course.
Goals
HTML Coding
- Learn how to create an HTML table.
- Learn how to created a table within a table
- Learn about page design alternatives
- Absolute vs. relative width
- Left-justified or centered
Viewing HTML
View the page from your computer and/or upload the page to a server.
Steps
HTML Coding
- View the source of the Third Business Page
- Go over the topics in the W3 Schools HTML tutorial that deal with the code you see on the Third Business Page (our sample pages follow the HTML tutorials in order)
- Modify the page to make it personal adding whatever links or images you wish.
- Notice that the Our Products image has been replaced by a sample logo that is an image.
- Notice that the page is centered using the HTML code <div align="center"> before the first table and </div> after the last table.
- Notice that the page layout is "absolute" in that the tables are 760 pixels wide as opposed to "relative," say 100% wide. (Many Web sites using absolute width still design to 800x600 resolution for both older monitors and newer mobile devices.)
- Notice that the navigation table is a table within a table and uses a height attribute so that the current minimal content is spaced down the page.
- Notice that the HTML code <valign="top"> ensures that table cell content in different columns is aligned to the top.
- Notice that the leftmargin attribute in the <body> statement has been set to 0 since table width can now adjust the page from the left and/or right borders.
- Notice that the content for the the interior (About us, Contact us) pages is now in tables since all Web site content must be in a table (with table-based layout).
- Notice that the link and visited link colors are now the same since for an e-commerce site there would need to be a good reason to change the color of visited links.
- Remember to download the sample logo image to the same subdirectory as your Web site pages (and any other images from the Web or that you create with a graphics program).
Viewing HTML on Your Computer
- Open Notepad or any text editor.
- "Copy" the HTML code from the Third Business Page (write the code line by line)
- Save your three-page Web site as thirdpage.htm, about_us.htm and contact_us.htm.
- Rename your home page index.htm.
- Open the index.htm file in your browser (in Internet Explorer, File, Open, Browse to the subdirectory where you saved the file, Open)
Viewing HTML on a Server
- If you have access to a server (perhaps through your Internet Service Provider), you can upload your Third Business Page to the server using File Transfer Protocol (FTP)
- Try the free SmartFTP program
- Open your Web page as you would any other Web page
- Remember to upload all of the HTML pages and all of the graphics to the server.
Accomplishment
You have created your third business Web page, one that uses tables for layout.
© TheProduct.com. All rights reserved. Privacy policy | Terms of use