Beruflich Dokumente
Kultur Dokumente
Chapter 1 Overview
What Is a Computer?
A computer refers its hardware and software. The computer hardware means the physical
device of computer and is similar to a human brain. The software likes the human
knowledge.
The basic components of a computer are the central processing unit (CPU), memory, and
storages (hard disk, CD-ROM disk, Zip disk, etc)
Without the monitor, keyboard, or other input/output (I/O) devices, we cannot use the
computer well.
A computer system refers the computer, monitor, keyboard, mouse, and peripherals
(printer, scanner, speaker, etc).
A computer system
-1-
Chapter 1 Overview
Step 1: Right click it and select Properties, then the Display Properties window pops up.
Step 2: Select desktop tab and choose your favorite background.
Step 3: Then select Screen Saver tab and choose your favorite screen saver.
Lab – Files
The file name extension represents its type and the program used for the file.
Step 1: open My Computer by clicking the icon on the desktop (the display area of the
monitor). If there is no icon, you can create one from Start button right click My
Computer Show on Desktop
Step3: Click View tab. In advance settings text box, clear or select the check box - Hide
extensions for known file types. Then click OK.
Software
Also called the computer program. It is a set of instructions for computer to follow.
A C++ program
-2-
Chapter 1 Overview
IPO (input – process – output): computer (program) receives raw information as the input
from a user, then process it, and output the result back to the user.
A file is an entity that contains a computer program or other data. In other word, a
program is usually carried in a file.
A drive is the physical equipment that can hold a storage device (for example, a disk) that
stores many files and folders. The drive provides a physical (hardware) connection
between the storage device and the CPU.
Acronyms: abbreviation
Question The folder “My Document” and folder “My Computer\H:” are the same folders
in VWC campus computers. True or false?
In the H-drive, that is the same place as the My Documents folder, build a new folder
named www; Build a folder named cs100; build other folders for your classes you are
taking.
Click cs100 so go to the folder, build a MS-Word document named ex1.doc. Type one
sentence in the document: My name is xxx (your name), and I am studying CS100. Then
close the document.
Build a MS-Excel file named ex2.xls; build another MS-PowerPoint file named ex3.ppt;
build another plain text file named ex4.txt.
-3-
Chapter 1 Overview
Copy the ex1.doc to H:\www\ folder with drag-drop. Open the Internet Explore (IE), type
the following URL (web address):
http://student.vwc.edu/~your-screen-name/ex1.doc
http://student.vwc.edu/~zwang/ex1.doc
A binary number is a number whose digits can only be 0 or 1, for example, 1000001,
1100001, 10, 1001, and etc.
All data/instructions stored and executed in computer are binary numbers. In other words,
the CPU can only understand (read/write) the combinations of 0 or 1.
The native language of computer is called machine language (ML), which consists of 0
and 1. For example, the letter ‘A’ is stored as 0100 0001 and ‘a’ is stored as 0110 0001.
Byte (B) is a group of 8-bit. It is the basic unit for computer memory.
xxxxxxxx
Subtraction: 0 – 0 = 0, 1 – 0 = 1, 1 – 1 = 0, 10 – 0 = 10, 10 – 1 = 1, 10 – 10 = 0, 11 – 1 =
10, 11 – 10 = 1, 100 – 1 = 11, 100 – 10 = 10, 100 – 11 = 1, …
1 0 1 0 1
1 0 1 1 0
+ 1
-- --------------------
1 0 1 0 1 1
-4-
Chapter 1 Overview
a) 101 + 11 = ___________
c) 1111 + 11 = ____________
GB (giga-byte): 2^30 B
Binary digit: 0, 1
Decimal digit: 0, 1, …, 9
-5-
Chapter 1 Overview
……
1A = _0001 1010___
10 = _0001_0000___
110 = _0001_0001_0000__
2201 = _0010_0010__0000_0001_
10 1010 = __2_A_
010101010 = __0AA_
Each digit of a hex number represents the four digits of a binary. Therefore, a hex is a
short version of a binary.
Exercise Convert the following binary numbers to the corresponding hex numbers.
a) 1 0010 = _______
b) 10 1111 = ________
c) 011 1100 = _______
d)101 1111= ________
Exercise Convert the following hex numbers to the corresponding binary numbers.
a) E00 = _________
b) 1E = ________
c) E1 = ________
d) 201 = __________
e) 12 = __________
f) 100 = __________
g) F1 = __________
h) 1F = ___________
-6-
Chapter 1 Overview
Binary: 1 0 1 0 1 0
Decimal: 32 16 8 4 2 1
-------------------------------------------------------------------
Accumulation: 32+ 8+ 2 = 42
Here, the accumulation sums up the decimals corresponding to the binary digit 1.
Example Convert the following binary numbers to the corresponding decimal numbers.
a) 10000 = ___________
16
b) 10001 = __________
16 + 1 = 17
c) 10100 = ___________
16 + 4 = 20
Exercise Convert the following binary numbers to the corresponding decimal numbers.
111 = ___________
1010100 = ___________
100010 = ___________
Find the capacity (in GB) of the hard disk for your computer. (Click the My Computer
icon and then select the hard disks) and the capacity of your H:\ drive.
Each printed symbol has its only binary representation (ASCII code). ASCII: American
Standard Code for Information Interchange.
-7-
Chapter 1 Overview
Here, 41H represents the hex number 41 while 65 is its corresponding decimal form.
Types of Computers
a. Microcomputers
. PC Notebook Macintosh
The microcomputers or PC (Personal Computers) are the small size computers and
basically used for family or office activities. The commonly used microcomputers are
various desktop and laptop (or notebook) computers.
The most popular PC manufacturers are Dell, HP, IBM, Compaq, and Sony.
b. Minicomputer
More powerful than PC but its size is smaller than mainframes; used as server.
Server is the computer that provides services such as printing, web, file, mail, etc. The
computer requesting service is called client. Server usually is a multi-user and multi-task
computer.
c. Mainframe computer
-8-
Chapter 1 Overview
Larger size and more powerful than minicomputer. A banking mainframe can process
lots of data from ATMs; used by bank or large company.
d. Supercomputer
The most powerful computer; used for researches, weather forecasting and space
missions.
Development of Computers
The oldest simple mechanical calculator is abacus. Used over thousands years.
Abacus
-9-
Chapter 1 Overview
Analytical engine
The world’s first programmer: Ada Byron (or Ada Lovelace). She contributed so
called the first algorithm (program) being implemented (programmed) on the Babbage’s
analytical engine.
The first electronic computer was built in early 1940s: ENIAC (Electronic Numerical
Integrator and Computer)
ENIAC
UNIVAC
- 10 -
Chapter 1 Overview
Vacuum tubes
Transistors
Integrated circuits
Computers begin to be popularly used in business. Magnetic core is used for storing
computer instructions.
Magnetic core
4th generation (~70 - 90): PC generation; use large-scale integrated circuits (LSICs) or
very large-scale integrated circuits (VLSICs)
- 11 -
Chapter 1 Overview
VLSICs
IBM-PC/XT
Computers in the world are connected as a huge network: share resources; instant (words,
voice, graphics) communications; digitalized
Chapter Exercises
1. What is a computer?
2. When did the PC/XT appear? Which company made it? What operating system did
the PC use?
- 12 -
Chapter 1 Overview
3. When was the first commercial computer built that is named UNIVAC? (1980’s,
1950’s, 1930’s, 1910’s, 1890’s).
7. Each printed symbol has its own and only one ASCII code. True or false? ____.
12. What is the highest (decimal) value that a single byte can have?
17. Machine language consists of reserved words form English. True or false?______
18. In the first generation computer, CPU is made of __________ (a) LSIC (large-scale
integrated circuits) (b) integrated circuits (IC) (c) transistors (d) vacuum tubes
19. Which high level language is used basically for business filed before? _____ a.
Fortran b. Basic c. C d. Cobol e. Ada
20. Which is the world’s first high level programming language? _____ a. FORTRAN
b. COBOL c. C d. JAVA e. C++.
21. Binary number 0111 is increased by 2, and then the binary number becomes ______.
10000 = __________
- 13 -
Chapter 1 Overview
100101 = __________
101= __________
100111 = __________
1000 = _________
10010 = __________
1001 = _______
10 = _______
1010 = _________
101010 = ____________
15 = _____________________________
7 = _____________________________
51A = ___________________________
1000 = ___________________________
AA = _________
101 = ________________
1011 = _______________
- 14 -
Chapter 1 Overview
_____ Each printed symbol has its only one binary representation.
_____ Dell, HP, IBM, Compaq, and Gateway computers are IBM-compatible computers.
- 15 -
Chapter 2 Hardware
Chapter 2 Hardware
System Bus
CPU consists of control unit (CU) and arithmetic and logic unit (ALU) and other
components (registers, clock and internal cache, etc.).
System bus: connect all components of computer (CPU, memory, and storage devices,
etc.). There are three types of system bus: control bus, address bus, data bus
- 16 -
Chapter 2 Hardware
System clock: synchronize all operations in computer. Measured in Hz: cycle per second.
266MHz ~= 266 000 000 cycles/s
CPU diagram
RAM (random access memory): also called primary memory or volatile storage; require
power to keep the data.
ROM (read only memory): one of the non-volatile storages; keep its data even the power
is off.
Memory
If computer reboots, data in RAM will change while data in ROM not.
Cache: vary fast RAM; very expensive. Hold frequently used information
- 17 -
Chapter 2 Hardware
VRAM
BIOS: basic input and output system. It is the software contains control routines for
booting, keyboard, monitor, etc.
Stored in ROM.
Flash drives
USB (Port): Universal Serial Bus. Support high-speed I/O devices, such as flash drives,
printers, mouse, and digital camera.
USB port
Network adapter card: used to connect a computer to a LAN (local area network).
- 18 -
Chapter 2 Hardware
Network cards
Long-term storage device: also called secondary memory, the device can store data
permanently; one of the non-volatile storage devices. It includes: hard disk, floppy, zip
disk, CD-ROM (Compact Disc – ROM, related to laser beam technique), flash
drive/memory, tape, etc.
Spinning magnetic disk: hard disk and floppy disk. Related magnetic technology; access
data fast.
Magnetic tape: sequential access data; slow access. Similar to a cassette tape. Large
capacity and used for data backup.
DVD: 4.7GB
Input Devices
- 19 -
Chapter 2 Hardware
Ctrl – c: copy
Ctrl – x: cut
Ctrl – v: paste
Ctrl – s: save
Ctrl – z: undo
Ctrl – y: redo
Ctrl – *: show all
Page – Up
Page – Down
Use Print Screen key to copy the present screen to a MS-Word document. Then copy an
object on your Desktop to the same document.
Mouse: move the cursor over long distance and click on icons fast.
- 20 -
Chapter 2 Hardware
Bar code reader: scan UPC (universal product code). Used in every shopping store.
UPC reader
Other popularly used input devices: Digital camera, Scanner, Touch screens.
Output Devices
The primary output device is monitor. Printer is the secondary output device.
Monitor and
printer
Other names for monitor: VDT (video display terminal), CRT (cathode ray tube), LCD
(liquid crystal display for portable computer). Fig. 3.7, 3.8
- 21 -
Chapter 2 Hardware
Pixel: the dot or element to compose an image. It is the unit to measure the resolution for
a monitor.
Pixels on
screen
Screen resolution
Dot-matrix printer: oldest, simple, black and white, cheap. Similar to typewriter.
Inkjet printer: spray tiny droplets of ink -- cartridge contains (color) ink – at high speed
onto paper, cheap. Slower than laser printer. Used at home.
Laser printer: sharpest and high quality (high dpi: dots per inch) and fast, expensive.
Used at office. Its technology is similar to photocopy machine.
Network printer: the printer is connected to local network with a specific IP.
- 22 -
Chapter 2 Hardware
a) Count how many words for the current documents: Tools → Word Count …
Chapter Exercises
1. System bus is used for transferring information among CPU, memory and I/O devices.
True or false? ________
3. When the computer is shutdown and reboot, the information in ROM will be gone.
True or false?_______
9. What is the capacity of a floppy disk? (a) 650MB (b) 4.7GB (c) 1.44MB (d) 64 KB
10. What is the capacity of a CD-ROM? (a) 650MB (b) 4.7GB (c) 1.44MB (d) 64 KB
11. What is the capacity of a DVD? (a) 650MB (b) 4.7GB (c) 1.44MB (d) 64 KB
12. Which type of printer whose technology is similar to a photocopy machine? (a) local
printer (b) Dot-matrix printer (c) Inkjet printer (d) Laser printer
13. Which type of printer whose technology is similar to a typewriter? (a) local printer (b)
Dot-matrix printer (c) Inkjet printer (d) Laser printer
14. The lower resolution, the better the image. True or false?______
15. Pixel is the unit to measure the size of a monitor. True or false?______
- 23 -
Chapter 2 Hardware
- 24 -
Chapter 3 Software
Chapter 3 Software
Also called computer program. Computer program is a set of instructions for computer
to follow.
System Software
Including operating system (OS), utilities (scandisk, disk defragmenter, and virus
protection software, etc.), device driver, and computer language translators.
OS: managing computer resources (CPU, memory, files, etc.) and operations (booting,
communication, etc.), provide user interfaces, and run applications.
MS-DOS (Microsoft disk OS): OS used for 1st IBM-PC/XT. Console OS (non-
graphical). But later version Microsoft Windows operating systems are based on MS-
DOS and still include the fundamental DOS features.
Windows 3.1: GUI (graphical user interface) based on DOS; not a real OS.
- 25 -
Chapter 3 Software
Windows 3.1
Windows 95/98/Me: integrates GUI with DOS and becomes a graphic OS. Personal OS.
Can’t separate GUI from DOS for Window 95 or later versions. Provide a similar
interface with MS-DOS: MS-DOS Prompt, Command Prompt.
Run the Command Prompt; type help to list some commonly used commands.
UNIX: run on most mainframes and supercomputers as server OS. Owned by AT&T.
Written with C. Console OS.
Linux: UNIX-like OS run on PC as server. Free software. Written with C. Provide GUI
for personal desktop. Provide C/C++, Fortran language compilers for free.
Application Software
The software that does a general task (application), such as, word processing,
spreadsheet, database, communication, etc.
- 26 -
Chapter 3 Software
How do you find your father’s phone #. Type in ONLY first name, last name, and state
name (Virginia, …)
http://www.anywho.com
How do you set up your desktop with single clicking an icon to open the program?
Chapter Exercises
True or false.
7. _____ System software does a general task or application, such as word processing,
spreadsheet, database, etc.
- 27 -
Chapter 3 Software
10. _____ System software includes operating system (OS), utilities, device driver, and
computer language translators.
12. _____ Application software manages resources, provide a user interface and run
applications
16. _____ MacOS is the application software for Apple Macintosh computers.
- 28 -
Chapter 4 Programming Concepts
Programming
Algorithms
For example, the algorithm to calculate the area of a circle is: A=PI*R*R, here A
represents area and R represents radius.
Find a word from a dictionary? It is sorted. Use divided and conquer (binary search)
algorithm.
Find a word in a page of the newspaper? It is hard because it is not sorted. Word by word
to look at: sequential search.
Programming Languages
High-level language: C/C++, Java, SQL, Fortran, etc. Machine independent. Easy to use
Here is a Fortran code example (file named hello.f) to print “Hello, CS100” to monitor:
- 29 -
Chapter 4 Programming Concepts
program hello
stop
end
Following is an example of Fortran code (file named area.f) to calculate the area of a
circle:
program circle
real r, area
stop
end
Interpreters: translate each statement into machine code and executed. QBASIC, DOS
Shell, UNIX Shell
Here is a C code example (file named hello.c) to print “Hello, CS100” to monitor:
#include<stdio.h>
main()
{ printf("Hello, CS100\n");
}
Following is an example of C code (file named area.c) to calculate the area of a circle:
- 30 -
Chapter 4 Programming Concepts
#include<stdio.h>
main()
{ float r, area;
printf("Give radius r: ");
scanf("%f", &r);
area = 3.14159*r*r;
printf("\nArea = %f\n", area);
}
Following is an example of C++ code (file named area.cpp) to calculate the area of a
circle:
#include<iostream>
using namespace std;
int main()
{ float r, area;
cout << "Give radius r: ";
cin >> r;
area = 3.14159*r*r;
cout << "Area = " << area << endl;
return 0;
}
class Area
{
public static void main(String[] args) throws IOException
{ float r, area;
BufferedReader in;
in = new BufferedReader( new InputStreamReader(System.in) );
System.out.print("\nGive redius r: ");
String str = in.readLine();
r = Float.parseFloat(str);
area = 3.14159f*r*r;
System.out.println ("Area = " + area);
}
}
Event-driven language: based on interactive events (click, mouse move on). Example:
Visual Basic/C++/J++. Most GUI based programs are produced with event-driven
language.
HTML: HyperText Markup Language. Used to design web pages that are *.html or *htm
files.
- 31 -
Chapter 4 Programming Concepts
Programming Techniques
Example (C++/Java):
Selection (if-then-else):
True Action I
Condition
False
Action II
Example (C++/Java):
int score;
char grade;
…
if ( score > 60 )
grade = ‘P’;
else
grade = ‘F’;
While the condition is true, the action will be executed again and again until the
condition is false.
- 32 -
Chapter 4 Programming Concepts
True Action
Condition
False
Example (C++/Java):
int x;
int sum = 0;
for ( x=1; x<10; x=x+1 )
sum = sum + x;
Batch processing: process vast amounts of similar data without human interference. In
DOS, the *.bat files are batch files. In UNIX, script files are batch files.
Database Concepts
Hierarchical or tree database represents data as a hierarchy or tree. A child can only
have one parent.
Network database: data items can be linked in more than one way. A child can have
several parent records.
Relational database: stores data in the form of tables. All modern database systems are
relational. The table is called a relation.
DBMS (DataBase Management System) is used to enter, organize, format, and retrieve
data in different ways, and then print that data in a report.
SQL (structured query language) is used to build, destroy, and modify a database.
- 33 -
Chapter 4 Programming Concepts
Build a shortcut icon on desktop that can invoke the calculator program:
From Start Button Program Accessories Calculator, right click it and then
choose Send to … Desktop
The communication information about the sender, such as email address, web URL,
phone #, fax #, mailing address, etc.
Chapter Exercises
5. What is the earliest high-level language mainly used in business area __________
7. Based on the last question, which database structure does Oracle use? ___________
8. Algorithm is a set of rules, symbols and special words used to construct a computer
program. ______
- 34 -
Chapter 4 Programming Concepts
12. Compilers translate the entire program and create an executable file. _______
14. Based on the last question, which structure does the following code belong to?
(a) __________________
(b) _________________
(c) _________________
- 35 -
Chapter 4 Programming Concepts
21. What is the extension for a Microsoft Word file, a PowerPoint file, an Excel file and
an Access file?
- 36 -
Chapter 5 Information Technology
Digital Information
Analog signals: continuous or smooth forms of information, for example, telephone line
signal, electrical signal, and all traditional form signals.
Digital signals: discrete binary forms of information. Computer signals, for example,
telegraph signals.
Analog signal
Discrete signal
Digital signal
Modulation
- 37 -
Chapter 5 Information Technology
Modems
Most modems are designed for both data and fax (facsimile) transmission
DSL (digital subscriber line): use phone line to transmit digital signals at high
speed.128K ~ 54 Mbps
Connection Media: twisted pair cable (phone line), coaxial cable (TV cable or LAN
cable), and fiber-optical cable.
History: Began in the late 1960s; originally connected only four mainframe computers at
large universities
Any computer or network devices can become part of Internet by using TCP/IP.
Domain name is the computer name, alias name or its address. Such as www.vwc.edu is
the address of VWC web server computer; student.vwc.edu is the address of VWC
student server computer.
DNS (domain name system): translates computer name to the corresponding IP address
for the client computers in the domain (a group of computers).
- 38 -
Chapter 5 Information Technology
Intranet: a local network inside an organization with the firewalls to prevent illegal
hackers from the Internet.
FTP (File Transfer Protocol) is the protocol of transferring files over the Internet
Hypertext refers to highlighted text (or an icon) that creates a link (called hyperlink) to
other information
ISP (Internet Service Provider) is a telephone-based company that your computer dials
into and it provide some other Internet service, such as email, web browser, web search,
etc. AOL, NetZero, etc.
A web browser is a software designed to help you use the web easily and efficiently;
Internet explore; Netscape.
Search engines are programs that search for Web sites based on categories or keywords
that you provide. Commonly used: google.com, yahoo.com, anywho.com, etc.
Network architecture or topology: how the computers in the network are connected.
Star, ring, and bus are the three basic topologies of network. Most networks are mixed of
the three.
Server/Client Systems
- 39 -
Chapter 5 Information Technology
Server: a central computer that provides services. File server, print server, web server,
email server, database server, etc. Server refers the computer’s hardware and software.
Server software identifies its function. For example, a web server may be running the
Apache program or other web server programs.
Client: an individual computer requesting services from a server. Commonly used OS for
clients: Windows 95/98/Me.
A server computer can also be used as a client. But in most cases, the server computer
can only be physically accessed by the administrators or super-users, and it is not for a
general use (as a client).
Lab – IP Address
ping student.vwc.edu
ping www.vwc.edu
Security Issues.
To prevent the potential damage form viruses, update your computer OS or virus
protection software frequently.
- 40 -
Chapter 5 Information Technology
To prevent from the hackers, use password wisely. Don’t put your birth date to web page.
Use different password for different account according to the security level.
Use other web browsers other than IE. A lot of spy-wares or ad-wares may be attached
with the use of IE.
Social Issues.
Search the web with appropriate key words to avoid some sensitive sites.
Watch for the web crimes. Register in a chat room with appropriate personal information.
Don’t put the illegal or impropriate information (religion, politics, and races, etc) on the
web or emails. Don’t steal others’ secret information on the Internet.
- 41 -
Chapter 5 Information Technology
Chapter Exercises
1. In MS-Excel, fill handle is used to ________. (a) Copy data. (b) Do calculation. (c)
Copy formula. (d) Fill a datum.
2. B12 is the cell at 12th row and B column. (a) True. (b) False.
3. Email signature is ______. (a) A signature. (b) Email address. (c) Sender’s handwriting
with Email. (d) Communication information about the sender.
4. Analog signals are discrete binary forms of information. (a) True. (b) False.
5. Examples of Analog signals are ________. (a) Telegraph signals. (b) Computer
signals. (c) Telephone line signal. (d) Image files.
6. Modulation is conversion from digital signal to analog one. (a) True. (b) False.
7. Modem is the device for modeling and demodeling. (a) True. (b) False.
9. BPS stands for _____. (a) Bytes per second. (b) Bites for second. (c) Binary peer
system. (d) Bites per second.
10. Dial-up modem uses traditional phone line to send digital data. (a) True. (b) False.
11. DSL stands for _______. (a) Digital symbolic locator. (b) Digital subscriber line. (c)
Data system language. (d) Digital system language.
12. Which connection media transfers data with highest speed? (a) Twisted pair cable
(phone line). (b) Coaxial cable (TV cable or LAN cable). (c) Fiber-optical cable. (d)
Cable modem.
13. Internet is ______. (a) Local network. (b) Intranet. (c) Ethernet. (d) Interconnected
network.
14. Internet began in _______. (a) 1990’s. (b) Late 1960s. (c) Early1980s. (d) 1930s.
15. Protocol is _______. (a) A kind of liquid. (b) Food. (c) Gas. (d) Communication rule.
16. What is Internet protocol? (a) IP. (b) Internet messenger. (c) TCP/IP. (d) FTP.
17. Any computer or network device can’t become part of Internet without using TCP/IP.
True or False? _____
- 42 -
Chapter 5 Information Technology
18. DNS stands for (a) data network server. (b) Domain name system. (d) Domain
network service. (d) Digital name service.
- 43 -
Microsoft Office Labs
Toolbars: Standard (New, Open, Save, ..), Formatting (Style, Font, Font Size, …)
Ruler
Status bar.
AutoCorrect
Selection bar
Exercises
Special Keys
- 44 -
Microsoft Office Labs
Ctrl-Enter: create a hard page break. Soft page break is created automatically.
Delete a hard page break: in normal view, locate the insertion point to “Page Break”
dash line, then push Delete key.
Exercises
Advanced Features
Heading 1
Heading 2
- 45 -
Microsoft Office Labs
…
Normal
Outline view
- 46 -
Microsoft Office Labs
Tutorial 1
Select data/cells.
(A2) = B2 + C2 – D2
Lab Procedures:
a) Go to H:\cs100 folder. Open the file named “café Budget.xls”. All required data files
should be located at this folder.
b) Input your name as the author of the file. Save it as “Café Forecast.xls” to folder
H:\www\
When you finished, make sure that you save the modified file (named “Café
Forecast.xls”) and print it. Also copy the document to your floppy disk.
d) Hand in a folder or envelop with the document (called hard copy) and floppy disk
inside before due date (declared in the class website).
Tutorial 2
- 47 -
Microsoft Office Labs
Exercise: select two columns of data that are not next to each other.
Select first column of data; push/hold Ctrl button and the select second one.
X Y
------------
-3 9
-2 4
-1 1
0 0
1 1
2 4
3 9
Using MS-Excel.
Open MS-Excel.
Input source data as above (copy/paste)
Select the data source
Click Chart Wizard button from Standard ToolBar
Select XY chart type
…
Column chart
Line chart
XY chart
Pie Chart
…
Legend
X-axis
Y-axis
X-axis title
Y/Value-axis title
Chart locations: (a) as a new sheet. (b) as an object (entity) in the present sheet.
Lab Procedures:
- 48 -
Microsoft Office Labs
a) Go to H:\cs100 folder. Open the file named “café Sales.xls”. All required source files
should be at this folder.
b) Input your name as the author of the file. Save it as “café Sales Chart.xls” to folder
H:\cs100\
c) Study and follow instructions from Page 2-6 to Page 2-33 (NOT the last page -- Page
43). Your work includes Chart1, Chart2, and Sheet1.
When you finished, make sure that you save the modified file (named “café Sales
Chart.xls”) and print ALL your work. Also copy the document to your floppy disk/CD.
d) Hand in a folder or envelop with the document (called hard copy) and floppy/CD
inside before due date (declared in the class website).
- 49 -
Microsoft Office Labs
The vertical column of the table is called a field, which characterizes the properties or
functions for the table. For example, a STUDENT table may have ID, FIRSTNAME,
LASTNAME, GENDER, and other fields.
The horizontal row of the table is called a record, which represents an entity according to
the fields. The following are the STUDENT and REGISTRATION tables:
The primary key (PK) of a table uniquely identifies the different entities. For example, in
STUDENT table, the PK is STUID. In REGISTRATION table, the PK is a combination
of CRSID and STUID, that is called the composite primary key.
Create Tables
Start Access 2000. Select Blank Access Database and click OK. Type my_db in File
Name list box.
Open the Save In list box and click My Document from the drop-down list and then click
CS100 from the list. Press the Enter key or click the Create button.
Open the Data Type drop-down list and observe the list of data types. Select Text. In
Field Size text box, replace the default value 50 with 4.
Click the Description text box for the ID field and type Student ID. Click the Primary
Key button from the Table Design Bar.
- 50 -
Microsoft Office Labs
Press Enter button and type FIRSTNAME in Field Name; select Text in Data Type and
fill 20 for the Field Size. Fill the same information for LASYNAME. For the GENDER
field, set the data type as text and its size 6.
Click Datasheet View or double-click student in database window. Enter the STUDENT
table with the above records.
Similarly you can design the REGISTRATION table with the following fields, data
types, and descriptions:
Here is the way to set the composite primary key: select the CRSID row, and then hold
Ctrl key and select the STUID row, and then click the Primary Key button in the Table
Design Bar.
Save the table name as REGISTRATION. Enter the table with the above records.
Using a Form
Start Access 2000. Select Open an existing file. Click OK. From Look in drop-down list
box, select My Document, and then select CS100 folder. Select Employee Records.mdb
file, and click Open.
Click Open (Employee table should be selected as default) or double click the Employee
table. Observe the table contents.
Click the Datasheet View, click a record in the Last Name field, click Sort
Ascending/Descending button in the Table Datasheet bar. Try the Find button.
In the Access program window, click Forms from the Objects list. Double click Create
form by using wizard.
In Form Wizard, select First Name from the Available Fields, click > button to transfer to
the Selected Fields. In the same manner, select the following fields to the Selected Fields:
Last Name, Street, City, State, Zip Code, Home Phone, Picture. Click Next.
- 51 -
Microsoft Office Labs
Columnar should be selected as the default for the layout. Click Next. Blends should be
selected as the default for the style. Click Next. Type Employee Information Form for the
title. Click Finished. Maximize the Form window. Check for the records in forms.
From the View menu, select the Design View. In the Form Header, add a label and type
in Employee Information Form. You may also add a label and type in Designed by xxx
(your name).
Save the work and view the form by selecting the Form View from the View menu.
You may switch to the Datasheet View and sort the records according the last name, then
view the form again.
- 52 -
HTML – Web Page Design
Markup language is the language that its output (result or print-out) is controlled by some
specific commands.
Step 1: Open H:\www\ folder, create a new html file and name it as index.html or
index.htm (you may create a text file first, then rename it).
Step 2: Edit your home page: open the IE file by clicking it. Then click the Edit pull-
down menu and choose Edit with Windows Notepad
<TITLE>
My Web
</TITLE>
<BODY>
<CENTER>
<H1>
Welcome To (your name)’s Home Page
</H1>
</CENTER>
</BODY>
Step 3: Save it from the (Notepad) File menu or push both buttons Ctrl-s.
Go back to Step 2 – Step 5 to do more modifications to your home page when you learn
more HTML tags.
- 53 -
HTML – Web Page Design
HTML Tags
For HTML, (HTML) tags control the results. Most (HTML) tags are used in a pair:
Tags are case insensitive. This means: <title> is the same as <TITLE>.
Traditionally, use all capital letters for the tag to distinguish its contents.
The opening/closing tag should not intersect (or cross) with other opening/closing tags.
This is good:
<CENTER>
<H1>
Welcome To (your name)’s Home Page
</H1>
</CENTER>
<CENTER>
<H1>
Welcome To (your name)’s Home Page
</CENTER>
</H1>
Nested tags: a pair of the opening and closing tags can enclose other opening/closing
tags.
Heading tag:
Center tag: <CENTER> contents here </CENTER>: contents will be shown in the
center of the IE page.
Paragraph tag <P> (text) </P> (this closing tag may be omitted)
- 54 -
HTML – Web Page Design
Here, the value for SIZE is height of the horizontal line in pixel (dot or element of an
image on screen). The value for WIDTH may be value in pixel or percentage of the
screen width. Value for ALIGN may be left, right, or center. NOSHADE is optional:
solid bar or not.
Use <BODY BGCOLOR= “color_name”> tag that should be put on the start of HTML
code.
Here color_name may be one of the following 16 predefined color names: red, green,
blue, yellow, black, gray, purple, olive, silver, teal, cyan, maroon, lime, magenta, navy,
white.
Or you may use the hex values for the colors: #rrggbb. Here r stands for red; g stands for
green; b stands for blue.
Combining the red, green and blue produce different colors. For example: #FF0000 is
red; #00FF00 is green; #0000FF is blue; #FFFFFF is white; #000000 is black.
The following web page presents the details of the hex color names:
http://www.w3schools.com/html/html_colors.asp
Example Change the background color of your home page to silver or other color except
dark color, such as blue or black color.
</BODY>
Image Background
Exercise What are the URLs of CS100 and your personal web page?
- 55 -
HTML – Web Page Design
Example Create your family web page: display “Welcome to (your name)’s Family
Page” and set the background color light green.
Step 1: Open the H:\www\ folder, create a new html file and name it as family.html or
family.htm
Step 2: Edit your family page: open the IE file by clicking it. Then click the Edit pull-
down menu and choose Edit with Windows Notepad
<TITLE>
My Family Web
</TITLE>
HTML Hyperlinks
Here, tag A stands for Anchor and HREF stands for Hyper-REFerence. Clicking the
hypertext, browser will go to the specific file or URL.
Example: Write down the HTML to link the following underlined text to the file
“paper1.doc” (which is at the same folder with the web page file).
<P>
Click
<A HREF = “paper1.doc”>
here to go to my Assignment 1
</A>.
</P>
Example Write down the HTML to link the following text to CS100 URL:
http://www.vwc.edu/~zwang/cs100/
- 56 -
HTML – Web Page Design
<P>
<A HREF = “http://www.vwc.edu/~zwang/cs100/”>
Link to CS 100 web page
</A>.
</P>
HTML Images
The alternative text is used to describe the image: who is he? Where? …
Exercise Download a picture file from your MARSIS account and save it to H:\www\
folder as me.jpg file.
Example Insert the image file me.jpg to the web page; put it to the right side of the web
page; use “Me: (your name)” or other alternative text to describe the image.
Image Links
Example Insert the image file me.jpg to your web page and link the image to your home
page.
HTML Fonts
Used to modify the part of the web page text to different font, size or color.
The corresponding closing tag is </FONT> that should be put to the end of the text to be
modified.
Here the value of the attribute COLOR may use hex value for colors or color name
introduced as above.
- 57 -
HTML – Web Page Design
The value of FACE may be the font name found in MS-Word 2000 Formatting Bar –
Font. Commonly used font face names are: “Time New Roman”, “Comic Sans MS”, “Arial”,
“Courier New”.
A pair of double quotes should be used if the value name has spaces.
Example Write down the HTML code to make the following text as courier new font;
largest font size; blue font color.
<P>
<FONT FACE= “courier new” COLOR= “blue” SIZE= “7”>
I study hard in CS100.
</FONT>
2 <SUP> 3 </SUP>
A <SUB> 1 </SUB>
Lists
Fall’05 classes:
• CS100-1
• CS100-2
• CS207-1
• INST110-17
• CS491-1
I am busy enough!
- 58 -
HTML – Web Page Design
Fall’05 classes:
<UL>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
<LI>INST110-17
<LI>CS491-1
</UL >
I am busy enough!
Unordered Lists
Exercise insert the above code (use your courses) to your web page.
Example Write down the HTML code to create the following list in web page.
Fall’05 classes:
o CS100-1
o CS100-2
o CS207-1
It is fun!
Fall’05 classes:
<UL TYPE = “circle”>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
</UL >
It is fun!
Ordered Lists
Fall’05 classes:
1. CS100-1
2. CS100-2
3. CS207-1
4. INST110-17
- 59 -
HTML – Web Page Design
5. CS491-1
I am busy enough!
Fall’05 classes:
<OL>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
<LI>INST110-17
<LI>CS491-1
</OL >
I am busy enough!
A – capital letter
a – lower case letter
I – capital roman letter
i – lower case roman letter
1 – number (default)
Example Write down the HTML code to create the following list in web page.
Fall’05 classes:
C. CS100-1
D. CS100-2
E. CS207
F. CS310
It is fun!
Fall’05 classes:
<OL TYPE = “A” START= “3”>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
</OL >
- 60 -
HTML – Web Page Design
It is fun!
Some HTML tags have one or more attributes to modify its usages.
In the above HTML tag <OL TYPE = “A” START= “3”>, there are two attributes TYPE
and START.
Value for attribute TYPE is “A” and value for attribute START is “3”.
If the value of an attribute has no space, the double quote may be omitted.
Try this:
<OL>
<LI> Smile
<LI> Exercise
</OL>
Example what is the default value for attribute TYPE in HTML tag <UL TYPE=?>
Answer: “disc”
If there are more attributes, they may be any order. Using space to separate them. Don’t
use comma.
Section Exercises
- 61 -
HTML – Web Page Design
2. Write down the HTML code to create the following list in web page.
CS100-1 Assignments
Assignment 1
Assignment 2
Assignment 3
3. Write down the HTML code to link each list item to the corresponding documents:
hw1.doc, hw2.doc, and hw3.doc.
CS100-1 Assignments
Assignment 1
Assignment 2
Assignment 3
Tables
Datum11 Datum 12
Datum 21 Datum 22
<TABLE>
<TR> <TD> Datum 11 </TD> <TD> Datum 11 </TD> </TR>
<TR> <TD> Datum 21 </TD> <TD> Datum 21 </TD> </TR>
</TABLE>
<TABLE>
<TR> <TD> Friend </TD> <TD> family </TD>
<TD> Work </TD> <TD> Hobby </TD>
</TR>
</TABLE>
Styles
CSS (cascading style sheet) is a language to format the fonts (text, background, and etc),
colors and other layout issues for a web page. It consists a set of rules. Each rule has a
selector and a declaration block:
- 62 -
HTML – Web Page Design
<style>
<!--
h1, h2 { color: red; background: yellow }
div#part1 { color: green; font-family: “Arial”; font-size: 10px}
div.class1 { color: red; }
-->
</style>
Here, <div> stands for division, or a group of code. It has two attributes: <div
class=class1 id=part1>.
Based on the above style definition, test the following code (enclosed by <body> tags):
<h1>
Here is H1 text.
</h1>
<p>
Normal text here.
<h2>
H2 text goes here.
</h2>
<div id=part1>
The first division code.
</div>
<div class=class1>
The second division code.
</div>
JavaScript
<HTML>
<HEAD>
<TITLE>
Test JavaScript
</TITLE>
</HEAD>
<BODY>
<SCRIPT TYPE="text/JavaScript">
alert("Hello, CS100!")
</SCRIPT>
<H1>
I am studying JavaScript.
</H1>
</BODY>
</HTML>
- 63 -
HTML – Web Page Design
The following code prompts user to input a name then output a message.
<HTML>
<HEAD>
<TITLE> Test JavaScript </TITLE>
</HEAD>
<BODY>
<H1>
<SCRIPT type="text/JavaScript">
name = prompt("Your name?", "Type here");
document.write("I am " + name + ".");
</SCRIPT>
<p>
I am studying JavaScript.
</H1>
</BODY>
</HTML>
Copy JavaScript from the following web site and insert to your web pages:
http://www.dynamicdrive.com/
- 64 -
Bibliography
Michele Bock and Michael Bock, Technology Essentials 1999 edition, QUE E&T, 1999
http://en.wikipedia.org/wiki/Computer
- 65 -