CIS101 Introduction to Computing Week 07 Spring 2004

Agenda Your questions Review Project Two Review WS-FTP HTML Project Three This week online Next class

Managing your web site Set up folders for each project Be sure all required files are loaded into the right directory

Review: Internal links Internal links and target covered in project two (p ) Allow visitor navigation up and down your page Use links and targets to do this Targets are spots in your page that you can link to

Creating targets Use tag with name attribute to create targets, i.e. creates a target for an internal link Link to that target looks like this: Education The # symbol means the link is on this page

Project Three Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with images only Create a list of links with text Create a borderless table with text only Create a menu bar with links

Project Three cont. Create a table with borders Change the horizontal alignment of text Add color to individual cells Add color to entire rows Insert a caption beneath a table Alter the spacing between cells using the CELLSPACING attribute

Project Three cont. Alter the spacing within cells using the CELLPADDING attribute Use the ROWSPAN attribute Use the COLSPAN attribute

Tables and Web Design Primary formatting and layout element of Web pages Tables help make the content on Web pages clear, interesting, and easy to read Tables are like spreadsheet – have rows, columns, and cells Cells can contain text, links or images

Table elements (p. 3.08) Tables consist of rows, columns, and cells A row is a horizontal line of information A column is a vertical line of information A cell is the intersection of a row and a column Heading cells display text as bold and center- aligned Data cells display normal text that is left- aligned

Other table parts (3.09) Table borders are lines that encompass the perimeter of the table Table headers are bold text that indicate the purpose of the row or column A table caption is descriptive text located above or below the table that further describes the purpose of the table

Table attributes Cellspacing – spacing between cells Cellpadding – spacing within cells Column spanning – sets number of columns spanned by a cell Row spanning – sets number of rows spanned by a cell

HTML Table Tags (p. 3.12) Table tags (see table 3-1) defines table defines row indicates a heading cell indicates a data cell See example p See also Table Tag Attributes (table 3- 2)

Start Project Three create project 3 folder on your computer Start entering HTML tags (p. 3.15) First table will hold Web page images Enter text up to p Create folder project three on desktop Save html file with name tchome.htm in project three folder

Project three files Download zipped HTML image file from Extract these files tclogo.jpg hrcolor.jpg anything.htm members.htm Preview with browser, should match printout on p. 3.26

Creating a Menu Bar (p. 3.30) Allows for visitors to move easily from one page to another within Web site You will add a menu bar to calendar.htm (see picture p. 3.30) You will also add a Menu Bar to your resume to access each section

Table format techniques Use CELLSPACING to insert space between cells Use CELLPADDING to insert space inside cells (see p. 3.38) Use ROWSPAN and COLSPAN to insert headings that go across rows or columns (see p. 3.43)

Spacing, Column Widths, and Captions Cellspacing and Cellpadding alter the size of table cells Cells are the minimum size when you don’t specify cellpadding or cellspacing Cellspacing is the number of pixels between cells Cellpadding is the number of pixels within a cell

Summary of Project Three Create a borderless table with images only Create a list of links with text Create a borderless table with text only Create a menu bar with links Create a table with borders Change the horizontal alignment of text

Summary cont. Add color to individual cells and entire rows Insert a caption beneath a table Alter the spacing between cells using the CELLSPACING attribute Alter the spacing within cells using the CELLPADDING attribute Use the ROWSPAN and COLSPAN attribute

Final Group Project Form groups of 5 students You will create a group web site on an assigned topic After break groups can select form list of topics Groups will create a web site on the topic

This week online Upload project 3 to web page Readings HTML Project Three Concepts, chapter 7, “Storage” This week’s Quiz Concepts, chapter 7, “Storage”

Next class meeting Bring your HTML book to class Internet research paper due 3/23 Have a great break !