Transcript CIS101 week 07

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
(http://csis.pace.edu/~dwyer)
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. 2.45-2.54)
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 <a> tag with name attribute to
create targets, i.e.
<a name=“education”></a>
creates a target for an internal link
Link to that target looks like this:
<a href=“#education”>Education</a>
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 centeraligned
Data cells display normal text that is leftaligned
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)
<table></table> defines table
<tr></tr> defines row
<th></th> indicates a heading cell
<td></td> indicates a data cell
See example p. 3.13
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. 3.24
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 http://csis.pace.edu/~dwyer)
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
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