CIS101 Introduction to Computing Week 07

Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class

Resume project HTML assignment is to create and upload an electronic resume to your web space Look at examples from last semester (

Resume project requirements Due in two weeks All html and images files must be loaded to your web space Resume must load properly on your web space Hand in hard copy of: Print version of resume Html code

Required elements Resume elements, including objective, education, experience, and awards Images: Digital picture of yourself Picture of Pace University Background image

Required elements cont. Links Text link and image link Internal links between sections Menu bar (today’s project) Refer to handout in week 07 for specific requirements

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 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 Copy these files from HTML data disk (or tclogo.jpg hrcolor.jpg anything.htm members.htmhttp://csis.pace.edu/~dwyer 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

This week online 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 (last time) Start work on resume project