Transcript CIS101 week 07 v2

CIS101
Introduction to Computing
Week 07
Agenda






Your questions
JavaScript text
Resume project
HTML Project Three
This week online
Next class
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 e-mail 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 e-mail link
You will use home page in the future to link
to future assignments
Create index.htm




Start 1st Page 2000, select new HTML
document
Save file as index.htm
Add your name, email 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 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 (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


Online readings


HTML Project Three
ORT's Information Technology Foundation Course,
“Networks” chapter
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. 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
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