CIS101 Introduction to Computing Week 07

Agenda Your questions JavaScript text Resume project HTML Project Three This week online Next class

Discussion Board What role should moderator fill in discussion board? This week: Jim and Nick

CIS101 JavaScript Text JavaScript Text is in the PLV bookstore (as of 10/17*) Will begin JavaScript week after next (week 09) *expected delivery date

Your digital picture This week’s resume adds a digital picture of yourself Use classroom scanner to scan a photograph or Use digital camera

The resume project Your uploaded resume should now have: Use of bold, italics, and color in text A background image (see Week 5's sample resume) A horizontal rule image An link under your phone number An an image of Pace University, with text wrap in your Education section A text link to Pace University's Web site An image link to Pace University's Web site

View the resumes Updated version of your online resume should be posted to your Web space Go to Course Material, click Student Web Space Addresses to view your classmates’ online resumes

Creating Your Home Page A home page is the main page of a Web site index.htm is default home page Visitors view the home page first Your home page will include link to resume project Should also include an link You will use home page in the future to link to future assignments

Create index.htm Start 1 st Page 2000, select new HTML document Save file as index.htm Add your name, address link Add link to your online resume

Add link from resume.htm to index.htm Copy the HTML file containing your online resume to your computer (use WS-FTP or the browser) Add a link to your online resume returning to your home page

Upload and Test Upload index.htm to your Web space using WS-FTP Uploaded your updated online resume (resume.htm) Open your Web site with a browser and test the links from your home page to your your online resume, and back again

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 (from f: drive or from course.com download) 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

This week online Readings HTML Project Three Online readings ORT's Information Technology Foundation Course, “Networks” chapter ORT's Information Technology Foundation Course This week’s Quiz HTML Project Three

This week’s resume update Create a menu bar Create link targets for the sections of your resume Add internal links to allow the viewer to navigate up and down your resume

Resume update cont. Include your picture and name and address information in a table Use tables to organize other sections of your resume See Course documents, week 07, HTML Project Three folder for exact 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

Next class meeting Bring your HTML book to class Upload your latest resume, class will use your URLs to look at your work next week