Comprehensive Web Design
Fall 2002 - Spring 2003
https://ehollywood.net/dhima/handouts/class6.htm

Class 6 Handout

HTML Lesson 2. Using tables for design. Using WS _FTP for uploading files. System hierarchy. Debugging your web page.

1. Review of homework -
We will look our Wayne websites.

2. Building tables using HTML tags-
The HTML table allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. They make it so that you can control where things fall on a webpage regardless of the browser and browser window size.
What are the HTML tags for building tables.
http://hotwired.lycos.com/webmonkey/96/47/index3a.html?tw=authoring
1) Start by sketching on a piece of paper what you want to do.
2) The table is composed of three main tags: Table: <table>, Table row: <tr>, Table cell: <td>
3) Let's make a basic cell with four quadrants using the above tags.
4) Let's add the tag: "Colspan" to stretch a cell across multiple columns.
5) Let's add the tag: "Rowspan" to stretch a cell across multiple rows.
Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

3. More on Tables-
http://hotwired.lycos.com/webmonkey/96/48/index2a.html
1) The align tag. <td align=right>, <tr align=left>, <table align=center> .
2) Cellpadding and cell spacing. They both put a little space between the cells of your table, but they do it in different ways. cellspacing makes the border of the table fatter, increasing the distance between cells. cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides. Also, border=0 works for the table border.
3) For more control, put nowrap in your table cell, like so: <td nowrap>. This means that no text in that cell will wrap, unless you manually break it with the <br> tag.
4) To make a table take up the entire page ­ no matter how big the user makes it ­ set the width and height at 100%, like so: <table width="100%" height="100%"> (warning: height=100% only works in Netscape).
5) Let's sketch the Wayne homepage grid and build it based on what we just learned.

3. WS_FTP - What does it do and how does it work.
http://www.ftpplanet.com/download.htm
1) Let's update a webpage to the server, understand the system hierarchy and test it.

HOMEWORK ASSIGNMENT:
Build the homepage(index.htm) of the Wayne Kramer site. It should include:
1) Design the Kramer Report webpage of your site using tables. Text at http://www.waynekramer.com/report.shtml. Make it look great!
2) Upload the page to a server using WS_FTP.
3) Read more below about advanced functionality using tables:
http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1