cs100notes
TRANSCRIPT
Lectures on Computer Fundamentals
Dr. John Wang
Department of Mathematics and Computer Science
Virginia Wesleyan College
Monday, December 26, 2005
Table of Contents
CHAPTER 1 OVERVIEW .............................................................................................. 1
WHAT IS A COMPUTER? ................................................................................................... 1
WHAT IS A COMPUTER SYSTEM? ..................................................................................... 1
LAB – DESKTOP SETTINGS ............................................................................................... 2
LAB – FILES ..................................................................................................................... 2
SOFTWARE ....................................................................................................................... 2
LAB - H DRIVE AND MY DOCUMENTS ............................................................................. 3
LAB - CREATING FOLDERS............................................................................................... 3
BINARY NUMBER AND ARITHMETIC ................................................................................ 4
HEXADECIMALS AND DECIMALS...................................................................................... 5
Conversion: Hex and Binary ...................................................................................... 6
Conversion: Binary to Decimal .................................................................................. 7
LAB – DISK CAPACITY..................................................................................................... 7
CHARACTER AND ITS STORAGE........................................................................................ 7
TYPES OF COMPUTERS ..................................................................................................... 8
DEVELOPMENT OF COMPUTERS ....................................................................................... 9
Generations of the Modern Electronic Computers................................................... 10
CHAPTER EXERCISES ..................................................................................................... 12
CHAPTER 2 HARDWARE........................................................................................... 16
THE BASIC COMPONENTS OF CPU................................................................................. 16
INPUT DEVICES .............................................................................................................. 19
LAB – PRINT SCREEN ..................................................................................................... 20
OUTPUT DEVICES........................................................................................................... 21
LAB – MS WORD 2000 STATISTICS AND PASSWORD TO OPEN ...................................... 23
CHAPTER EXERCISES ..................................................................................................... 23
CHAPTER 3 SOFTWARE ............................................................................................ 25
SYSTEM SOFTWARE ....................................................................................................... 25
LAB – DOS FEATURE .................................................................................................... 26
APPLICATION SOFTWARE ............................................................................................... 26
LAB – INTERNET SEARCH .............................................................................................. 26
LAB – SINGLE-CLICK ON DESKTOP ................................................................................ 27
CHAPTER EXERCISES ..................................................................................................... 27
CHAPTER 4 PROGRAMMING CONCEPTS............................................................ 29
PROGRAMMING .............................................................................................................. 29
ALGORITHMS ................................................................................................................. 29
PROGRAMMING LANGUAGES ......................................................................................... 29
PROGRAMMING TECHNIQUES......................................................................................... 32
DATABASE CONCEPTS ................................................................................................... 33
LAB – SHORTCUT ON DESKTOP...................................................................................... 34
LAB – EMAIL SIGNATURE .............................................................................................. 34
CHAPTER EXERCISES ..................................................................................................... 34
CHAPTER 5 INFORMATION TECHNOLOGY ....................................................... 37
DIGITAL INFORMATION .................................................................................................. 37
DOMAIN NAME AND INTERNET ...................................................................................... 38
SERVER/CLIENT SYSTEMS ............................................................................................. 39
LAB – IP ADDRESS ........................................................................................................ 40
SECURITY ISSUES. .......................................................................................................... 40
SOCIAL ISSUES. .............................................................................................................. 41
CHAPTER EXERCISES ..................................................................................................... 42
MICROSOFT WORD 2000 LAB.................................................................................. 44
PROGRAM INTERFACE .................................................................................................... 44
EXERCISES ..................................................................................................................... 44
SPECIAL KEYS................................................................................................................ 44
EXERCISES ..................................................................................................................... 45
ADVANCED FEATURES ................................................................................................... 45
MICROSOFT EXCEL 2000 LAB................................................................................. 47
TUTORIAL 1 ................................................................................................................... 47
TUTORIAL 2 ................................................................................................................... 47
MICROSOFT ACCESS 2000 LAB............................................................................... 50
CREATE TABLES ............................................................................................................ 50
USING A FORM ............................................................................................................... 51
HTML - WEB PAGE DESIGN ..................................................................................... 53
YOUR FIRST WEB PAGE ................................................................................................. 53
HTML TAGS ................................................................................................................. 54
BACKGROUND COLOR SETTING ..................................................................................... 55
Image Background .................................................................................................... 55
HTML HYPERLINKS ...................................................................................................... 56
HTML IMAGES.............................................................................................................. 57
IMAGE LINKS ................................................................................................................. 57
HTML FONTS................................................................................................................ 57
LISTS.............................................................................................................................. 58
Unordered Lists ........................................................................................................ 59
Ordered Lists ............................................................................................................ 59
SECTION EXERCISES ...................................................................................................... 61
TABLES .......................................................................................................................... 62
STYLES .......................................................................................................................... 62
JAVASCRIPT ................................................................................................................... 63
BIBLIOGRAPHY........................................................................................................... 65
Chapter 1 Overview
- 1 -
Chapter 1 Overview
What Is a Computer?
A computer is a computing device. It receives information, process (compute) it, and
output the result to user.
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)
The CPU is the heart of a computer. It includes the control unit (CU), the arithmetic/logic
unit (ALU), registers and other components.
Without the monitor, keyboard, or other input/output (I/O) devices, we cannot use the
computer well.
What Is a Computer System?
A computer system refers the computer, monitor, keyboard, mouse, and peripherals
(printer, scanner, speaker, etc).
Desktop computer Laptop or notebook
CPU Memory Hard drive
A computer system
Chapter 1 Overview
- 2 -
Lab – Desktop Settings
Desktop is the display area on the monitor.
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.
You may test other selections in the Display Properties window.
Lab – Files
File name format: name.extension
The file name extension represents its type and the program used for the file.
File1.doc --- MS-Word
File2.ppt --- MS-PowerPoint
File3.xls --- MS-Excel
Picture files: P1.jpg, p2.jpeg, p3.gif
The instructions to show/hide the file extension in Window XP are as follows.
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
Step 2: Click Tools menu � Folder Option…
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
Chapter 1 Overview
- 3 -
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 folder or a directory is an entity that contains a group of (related) files.
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.
A modern computer usually contains a floppy-drive or A-drive, a hard drive or C-Drive,
and a Compact-Disc (CD) or DVD drive. Some new computers may have a zip drive and
USB ports that can connect a USB flash drive to the computer.
Compare: a driver is a computer program that provides an instructional (software)
connection between an I/O device and the CPU.
Acronyms: abbreviation
BASIC: Beginner’s All-purpose Symbolic Instruction Code.
WWW: World Wide Web
Lab - H Drive and My Documents
Question The folder “My Document” and folder “My Computer\H:” are the same folders
in VWC campus computers. True or false?
Open the two folders to compare their contents.
Lab - Creating Folders
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.
Check if file name extension is shown or not. If not, set it shown.
Build a MS-Excel file named ex2.xls; build another MS-PowerPoint file named ex3.ppt;
build another plain text file named ex4.txt.
Chapter 1 Overview
- 4 -
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
For example, my screen name is zwang, so the URL would be:
http://student.vwc.edu/~zwang/ex1.doc
What is shown in the IE?
Binary Number and Arithmetic
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.
BIT stands for BInary digiT. 0 or 1
Byte (B) is a group of 8-bit. It is the basic unit for computer memory.
x x x x x x x x
The smallest number for a byte is 0000 0000 = 0
The largest number for a byte is 1111 1111 = 255
Addition: 0 + 0 = 0, 0 + 1 = 1, 1 + 0 = 1, 1 + 1 = 10, 10 + 0 = 10, 10 + 1 = 11, 10 + 10 =
100, 11 + 1 = 100, 100 + 1 = 101, 101 + 1 = 110, 110 + 1 = 111, 111 + 1 = 1000, …
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, …
Using vertical formula: 10101 + 10110 = ?
1 0 1 0 1
1 0 1 1 0
+ 1
-- --------------------
1 0 1 0 1 1
Chapter 1 Overview
- 5 -
Exercise Perform the following binary additions:
a) 101 + 11 = ___________
b) 1101+ 1011 = ___________
c) 1111 + 11 = ____________
KB (kilo-byte): 2^10 B = 1,024 B ~ 1000 B
MB (mega-byte): 2^20 B = 1,048,576 B ~ 1 million B
GB (giga-byte): 2^30 B
Hexadecimals and Decimals
Binary digit: 0, 1
Hexadecimal (hex) digit: 0, 1, 2, ..., 9, A, B,…, F
Decimal digit: 0, 1, …, 9
Binary Hex Decimal
--------- ----- ------------
0000 0 0
0001 1 1
0010 2 2
0011 3 3
0100 4 4
0101 5 5
0110 6 6
0111 7 7
1000 8 8
1001 9 9
1010 A 10
1011 B 11
1100 C 12
1101 D 13
1110 E 14
1111 F 15
1 0000 1 0 16
1 0001 1 1 17
1 0010 1 2 18
……
1111 1111 F F 255
Chapter 1 Overview
- 6 -
……
Binary-Hex Conversion Rule: a 4-bit binary is corresponding to a 1-digit hex number.
Conversion: Hex and Binary
Example Convert the following hex (H) to binary.
1A = _0001 1010___
10 = _0001_0000___
110 = _0001_0001_0000__
2201 = _0010_0010__0000_0001_
Example Convert the following binary to hex.
10 1010 = __2_A_
010101010 = __0AA_
1 1111 1111 = _1FF___
1 1011 0101 = _1B5_
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 = ___________
Chapter 1 Overview
- 7 -
Conversion: Binary to Decimal
Convert the binary 101010 to decimal? Using vertical formula:
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 = ___________
Lab – Disk Capacity
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.
Character and its Storage
Each printed symbol has its only binary representation (ASCII code). ASCII: American
Standard Code for Information Interchange.
‘A’: 0100 0001 = 41H = 65
‘a’: 0110 0001 = 61H = 97
‘1’: 0011 0001 = 31H = 49
Chapter 1 Overview
- 8 -
Here, 41H represents the hex number 41 while 65 is its corresponding decimal form.
“ABC” stored in computer in the following form: 01000001 01000010 01000011 or
in the hex representations: 41H 42H 43H
Types of Computers
There are four types of computers: microcomputer, mini-computer, mainframe, and
supercomputer.
a. Microcomputers
.
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.
IBM: international business machines.
Apple (Macintosh) computers are not IBM PC-compatible.
An embedded system is a special-function computer system: elevators, mobile (cellular)
phones, missiles, printers and etc.
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
PC Notebook Macintosh
Chapter 1 Overview
- 9 -
Larger size and more powerful than minicomputer. A banking mainframe can process
lots of data from ATMs; used by bank or large company.
ATM: automatic teller machine.
d. Supercomputer
The most powerful computer; used for researches, weather forecasting and space
missions.
There are thousands of processors (CPUs) working simultaneously.
SGI Origin 2800 at Mississippi Center for
Supercomputing research: 128 CPUs, 64 GB RAM, 1.6
TB fiber-channel disk. OS: IRIX 6.5 (UNIX like).
The fastest supercomputer -- IBM's Blue Gene/L. 32,768
processors. Capable of 135.5 TFLOPS (1012 FLOPS).
Compare: A Pentium 4 PC -- 2GHz CPU, a few GFLOPS (109 FLOPS)
Development of Computers
The oldest simple mechanical calculator is abacus. Used over thousands years.
Analytical engine – designed by Charles Babbage in 1830s. It is a more advanced
mechanical programmable “computer”.
SGI Origin 2800
Abacus
Chapter 1 Overview
- 10 -
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)
The first commercial computer: UNIVAC (Universal Automatic Computer) (1951).
FORTRAN (FORmula TRANslator) was the first high-level programming language
(1957)
COBOL (COmmon Business Oriented Language): commonly used in business area
(1960)
Generations of the Modern Electronic Computers
Analytical engine
ENIAC
UNIVAC
Chapter 1 Overview
- 11 -
1st generation (~51 - 57): use vacuum tubes
2nd
generation (~58 - 63): use transistors
3rd
generation (~64 – 69): use integrated circuits (ICs).
Computers begin to be popularly used in business. Magnetic core is used for storing
computer instructions.
4th
generation (~70 - 90): PC generation; use large-scale integrated circuits (LSICs) or
very large-scale integrated circuits (VLSICs)
Vacuum tubes
Transistors
Integrated circuits
Magnetic core
Chapter 1 Overview
- 12 -
In 1981, IBM built the popular PC/XT with MS-DOS of Microsoft.
5th
generation (~91 – present): network (Internet, WWW) and supercomputing
generation.
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?
VLSICs
IBM-PC/XT
Internet and WWW
Chapter 1 Overview
- 13 -
3. When was the first commercial computer built that is named UNIVAC? (1980’s,
1950’s, 1930’s, 1910’s, 1890’s).
4. FORTRAN is abbreviation of ________________________________________.
5. Who is called the world’s first programmer (first name)?
6. Write down the four types of computers.
7. Each printed symbol has its own and only one ASCII code. True or false? ____.
8. Explain the concept of a byte?
9. Macintosh computers are not IBM-compatible. True or false? ____.
10. Bit is the abbreviation of ________________________. Bit maybe include 0, 1, or 2.
True or false? _____
11. 1KB is 1000 bytes. True or false? ______.
12. What is the highest (decimal) value that a single byte can have?
13. CU is the abbreviation of ______________________
14 ALU is the abbreviation of ____________________
15. Explain the concept of software.
16. What is the native language of computer?
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 ______.
22. Convert the binary numbers to decimals: (Binary � Decimal)
10000 = __________
Chapter 1 Overview
- 14 -
100101 = __________
101= __________
100111 = __________
1000 = _________
10010 = __________
23. Convert the binary numbers to hexadecimals: (Binary � Hexadecimal)
1101 0100 = __________
0111 1011 0011 = __________
1110 0000 1111 1010 = __________
1001 = _______
10 = _______
1010 = _________
101010 = ____________
24. Convert the hexadecimals to binary numbers: (Hexadecimal � Binary)
15 = _____________________________
7 = _____________________________
51A = ___________________________
1000 = ___________________________
AA = _________
101 = ________________
1011 = _______________
25. Fill the answers for the following binary additions:
0 1010 1010 + 101 = ____________
Chapter 1 Overview
- 15 -
1 1111 1111 + 11 = ____________
1 1011 0111 + 10101 = ____________
26. True or false?
_____ Each printed symbol has its only one binary representation.
____ 1st generation computer uses vacuum tubes.
_____ Dell, HP, IBM, Compaq, and Gateway computers are IBM-compatible computers.
_____ COBOL was commonly used in business area in1960s.
Chapter 2 Hardware
- 16 -
Chapter 2 Hardware
The Basic Components of CPU
CPU consists of control unit (CU) and arithmetic and logic unit (ALU) and other
components (registers, clock and internal cache, etc.).
CU: control operations (+, -, *, /, AND, OR, ) performed in ALU.
ALU: do operations: +, -, 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
CPU
RAM
I/O
Devices
System Bus
Computer architecture (a)
Computer architecture (b)
Chapter 2 Hardware
- 17 -
Data bus: transfer data.
System clock: synchronize all operations in computer. Measured in Hz: cycle per second.
266MHz ~= 266 000 000 cycles/s
Memory: contains the instruction for computer to work on.
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.
If computer reboots, data in RAM will change while data in ROM not.
Cache: vary fast RAM; very expensive. Hold frequently used information
VRAM: video RAM. Improve graphics on monitor.
CPU diagram
Memory
Chapter 2 Hardware
- 18 -
Virtual memory: (use) a part of hard disk as memory,
BIOS: basic input and output system. It is the software contains control routines for
booting, keyboard, monitor, etc.
Stored in ROM.
EEPROM: Electrically-Erasable Programmable Read-Only Memory. Used for flash
memory or USB flash drive.
USB (Port): Universal Serial Bus. Support high-speed I/O devices, such as flash drives,
printers, mouse, and digital camera.
Network adapter card: used to connect a computer to a LAN (local area network).
VRAM
Flash drives
USB port
Chapter 2 Hardware
- 19 -
Modem card: used to connect a network over phone line
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.
Formatting: process of organizing the disk for storage
Floppy disk: 1.44MB, 3.5-inch disk
CD-ROM: non-magnetic storage. ~650MB.
DVD: 4.7GB
Input Devices
Keyboard is the primary input device.
Network cards
Magnetic disks: hard disk and floppy disk
Chapter 2 Hardware
- 20 -
Short-Cut and Special Function Keys:
Ctrl – c: copy
Ctrl – x: cut
Ctrl – v: paste
Ctrl – s: save
Ctrl – z: undo
Ctrl – y: redo
Ctrl – *: show all
Alt-f: File menu; then n for New…
Alt-e: Edit menu; then p for Paste
Ctrl – Alt – Delete: show CPU processes or reboot.
Enter: LF (line feed) + CR (carriage return)
Page – Up
Page – Down
Print Screen/SysRq: copy whole screen (desktop).
Alt + PrintScrn: copy the selected object
Lab – Print Screen
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.
Keyboards and mouse
Special function keys
Chapter 2 Hardware
- 21 -
Bar code reader: scan UPC (universal product code). Used in every shopping store.
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: output data to screen as images (soft copy)
Other names for monitor: VDT (video display terminal), CRT (cathode ray tube), LCD
(liquid crystal display for portable computer). Fig. 3.7, 3.8
Two-button mouse and three-button mouse
UPC reader
Digital camera, scanner and touch screen
Monitor and
printer
Chapter 2 Hardware
- 22 -
Pixel: the dot or element to compose an image. It is the unit to measure the resolution for
a monitor.
Monitor size: diagonal length of viewing screen. 15”, 17”, …
Resolution: number of pixels in the horizontal and vertical lines.
The higher resolution, the better the image.
Printer: output data to papers as hard copy.
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.
Local printer: directly connect to the computer.
Voice output devices
Pixels on
screen
Screen resolution
Dot-matrix printer, inkjet printer and laser printer
Chapter 2 Hardware
- 23 -
Speaker is connected to computer via sound card. Plug-in and play.
Lab – MS Word 2000 Statistics and Password to Open
a) Count how many words for the current documents: Tools → Word Count …
b) Set up a password to open a document: Tool → Options… In Option window, click
Save tab, then fill the password.
Chapter Exercises
1. System bus is used for transferring information among CPU, memory and I/O devices.
True or false? ________
2. What is the short-cut key for save?
3. When the computer is shutdown and reboot, the information in ROM will be gone.
True or false?_______
4. Data in RAM will change. True or false?______
5. RAM stands for ____________________________.
6. ROM stands for ____________________________.
7. What is the primary input device of a computer?
8. What is the primary output device of a computer?
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?______
Chapter 2 Hardware
- 24 -
16 BIOS stands for ______________________
Chapter 3 Software
- 25 -
Chapter 3 Software
Also called computer program. Computer program is a set of instructions for computer
to follow.
Two types of software: System Software; Application Software.
System Software
System software controls the computer system.
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.
Popular OS: MS-Widows; Mac OS; UNIX/Linux
MS-Windows: MS-DOS, Widows 95/98/Me, Widows NT/2000/XP.
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.
Window XP, Mac OS, and Red-hat Linux
MS-DOS and Windows 98
Chapter 3 Software
- 26 -
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.
Widows NT/2000/XP: server OS. High security.
OS/2: IBM replacements of DOS.
Lab – DOS Feature
Run the Command Prompt; type help to list some commonly used commands.
MacOS: OS used for Apple Macintosh computers.
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.
Utilities: perform system maintenance services, such as defragmenter, scandisk, etc.
Viruses’ protection software: Norton, McAfee viruScan, etc.
Application Software
The software that does a general task (application), such as, word processing,
spreadsheet, database, communication, etc.
Commonly used application software: IE, Microsoft Excel, Microsoft Office or
WordPerfect, etc.
Communication software: Internet browsers (IE, Netscape), email programs; WebPages
editors, such as MS-FrontPage.
Lab – Internet Search
Windows 3.1
Chapter 3 Software
- 27 -
How do you find your father’s phone #. Type in ONLY first name, last name, and state
name (Virginia, …)
http://www.anywho.com
Exercise True or false?
a) MacOS is the application software Apple Macintosh computers.
b) UNIX is written with C.
c) DBMS (database management system) is system software.
d) Internet explore is an application software.
Exercise What are the two popularly used DBMS?
Lab – Single-click on Desktop
How do you set up your desktop with single clicking an icon to open the program?
Chapter Exercises
1. GUI stands for ________________________________
2. The three most popularly used operating systems are
_________________________________
3. MS-DOS stands for ____________________________
4. DBMS stands for _____________________________
5. Two popular used DBMS are ____________________
6. UNIX is written with _____. a. Java b. Fortran c. C d. Cobol e. C++
True or false.
7. _____ System software does a general task or application, such as word processing,
spreadsheet, database, etc.
8. _____ System language is C++.
9. _____ Window 3.11 is a real OS.
Chapter 3 Software
- 28 -
10. _____ System software includes operating system (OS), utilities, device driver, and
computer language translators.
11. _____ DBMS (database management system) is system software.
12. _____ Application software manages resources, provide a user interface and run
applications
13. _____ The short-cut key for paste is Ctrl-P in MS-Word.
14. _____ Norton, McAfee viruScan, etc. are application software.
15. _____ Red wavy line represents a grammar error in MS-Word
16. _____ MacOS is the application software for Apple Macintosh computers.
17. _____ Internet explore is an application software.
Chapter 4 Programming Concepts
- 29 -
Chapter 4 Programming Concepts
Programming
What is programming (coding)? Process to make a program (code).
Program is the special code or instruction for computer to follow.
How to program? a) Find/create the procedure (algorithm) to solve the problem. b)
Convert the algorithm to the corresponding computer code.
You (programmer) have to know the (computer) programming language(s), such as
C/C++, Java, FORTRAN, SQL.
PDLC – Program Development Life Cycle:
Phase I: problem solving, that is, find the best algorithm;
Phase II: implement, also called coding;
Phase III: maintenance.
Algorithms
What is algorithm? The step-by-step procedure or method for solving a problem in a
limited time.
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
What is the (computer) programming language? A language including strict grammar
(rules), symbols, and special words to construct a computer program.
High-level language: C/C++, Java, SQL, Fortran, etc. Machine independent. Easy to use
FORTRAN (FORmula TRANslation): the first high-level compiled language (1950s). A
mathematical language
Here is a Fortran code example (file named hello.f) to print “Hello, CS100” to monitor:
Chapter 4 Programming Concepts
- 30 -
program hello
c This program outputs greetings
write (*,*) 'Hello, CS100'
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
c This program reads a real number r and prints
c the area of a circle with radius r.
write (*,*) 'Give radius r:'
read (*,*) r
area = 3.14159*r*r
write (*,*) 'Area = ', area
stop
end
Low-level language: machine language and assembly language. Machine dependent.
Hard to use
Machine language: native language with binary code that can be executed directly by
CPU.
Assembly language: symbolic version of machine language.
Interpreters: translate each statement into machine code and executed. QBASIC, DOS
Shell, UNIX Shell
Compilers translate the entire program and create an executable file.
COBOL (common business oriented language) was a major programming language in
business area. Now Java, C++, SQL (structured query language)
C (1970s) is called system language. UNIX/Linux is written with C.
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:
Chapter 4 Programming Concepts
- 31 -
#include<stdio.h>
main()
{ float r, area;
printf("Give radius r: ");
scanf("%f", &r);
area = 3.14159*r*r;
printf("\nArea = %f\n", area);
}
Object-oriented programming (OOP): based on object (data and operations). Example:
smalltalk, C++, JAVA
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;
}
Here is the corresponding Java code (Area.java):
import java.io.*;
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.
Chapter 4 Programming Concepts
- 32 -
Programming Techniques
Flow charts: use charts/graphics to describe the procedure of a program.
Pseudo-code: use simple English statements to describe the procedure of a program.
Three basic program structures: sequence, selection, and repetition
Sequence: one statement after another statement.
Example (C++/Java):
int a, b, c; // comments: declare three integer variables a = 1;
b = 2;
c = a + b;
Selection (if-then-else):
If condition is true, then action I; else (the condition is false), action II
Example (C++/Java):
int score; char grade;
…
if ( score > 60 )
grade = ‘P’;
else
grade = ‘F’;
Repetition (iteration or loop):
While the condition is true, the action will be executed again and again until the
condition is false.
Action I Condition True
False
Action II
Flow-chart for selection
Chapter 4 Programming Concepts
- 33 -
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
Database: a collection of related data.
There are three organizational structures of database: hierarchical or tree, network,
relational
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.
Personal DBMS - MS-Access, MY-SQL, etc.
Enterprise DBMS – Oracle, MS-SQL Server.
SQL (structured query language) is used to build, destroy, and modify a database.
Action Condition True
False
Flow-chart for repetition
Chapter 4 Programming Concepts
- 34 -
Lab – Shortcut on Desktop
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
Lab – Email Signature
The communication information about the sender, such as email address, web URL,
phone #, fax #, mailing address, etc.
Step 1: log in your webmail.
Step2: click option buttons.
Step3: input your name, mailing address, phone #, fax #, email address and web URL,
etc.
Chapter Exercises
I. Fill the blank with the best appropriate answer.
1. HTML is the abbreviation of _____________________.
2. SQL is the abbreviation of _______________________.
3. _____ (high, low)-level language is machine independent.
4. Native computer language is _________ ( C++, Basic, Pascal, Fortran, assembly
language, machine language )
5. What is the earliest high-level language mainly used in business area __________
6. Three structures for database are _________________________________
7. Based on the last question, which database structure does Oracle use? ___________
II. True or false questions.
8. Algorithm is a set of rules, symbols and special words used to construct a computer
program. ______
9.C is an object-oriented language. _______
10. Assembly language can’t be translated to many different versions of machine
languages. _______
Chapter 4 Programming Concepts
- 35 -
11. Machine language can be executed directly by CPU. _______
12. Compilers translate the entire program and create an executable file. _______
III. Computer terminology.
13. What are the three basic program structures?
14. Based on the last question, which structure does the following code belong to?
(a) __________________
if ( grade > 60)
gpa = 3.0;
else
gpa = 0.0;
(b) _________________
int num1, num2;
int area;
area = num * num3;
(c) _________________
while ( grade < 90 )
{ work ++;
party --;
}
15. What is the so-called system language?
16. What is the difference between compiler and interpreter?
17. What are the low-level languages?
18. List 4 high-level languages?
19. What are the phases for PDLC?
20. What is the world’s first compiled high-level language?
Chapter 4 Programming Concepts
- 36 -
21. What is the extension for a Microsoft Word file, a PowerPoint file, an Excel file and
an Access file?
22. What is the extension for an image files?
Chapter 5 Information Technology
- 37 -
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.
Modulation: conversion from digital signal to analog one.
Demodulation: conversion from analog signal to digital one.
Modem: a device for modulation and demodulation.
Analog signal
Discrete signal
Digital signal
Modulation
Chapter 5 Information Technology
- 38 -
Most modems are designed for both data and fax (facsimile) transmission
Modem speeds are measured in bits per second (bps)
Dial-up (56K) modem: use traditional phone line. 56,000 bps
DSL (digital subscriber line): use phone line to transmit digital signals at high
speed.128K ~ 54 Mbps
Cable modem: use TV cable. 500K ~ 54 Mbps
Wireless or satellite connection: convenient. ~10Mbps.
Connection Media: twisted pair cable (phone line), coaxial cable (TV cable or LAN
cable), and fiber-optical cable.
Domain Name and Internet
Internet: interconnected network
History: Began in the late 1960s; originally connected only four mainframe computers at
large universities
Protocol: communication rules.
TCP/IP (transmission control protocol/internet protocol): Internet protocol.
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.
IP address: the numeric form of a domain name.
DNS (domain name system): translates computer name to the corresponding IP address
for the client computers in the domain (a group of computers).
Modems
Chapter 5 Information Technology
- 39 -
Intranet: a local network inside an organization with the firewalls to prevent illegal
hackers from the Internet.
Internal IP address: the IP address inside an intranet.
External IP address: the IP address on the Internet.
URL (Universal Resource Locator): consist of a computer address preceded by a
protocol, such as, http://www.vwc.edu; ftp://facultystaff.vwc.edu;
FTP (File Transfer Protocol) is the protocol of transferring files over the Internet
HTTP: HyperText Transfer Protocol
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.
LAN (Local Area Network): share hardware and software resources.
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
Star topology Ring topology Bus topology
Chapter 5 Information Technology
- 40 -
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.
A server may be a PC. But in most cases, a mainframe or a supercomputer is used as a
server.
Server software identifies its function. For example, a web server may be running the
Apache program or other web server programs.
Commonly used OS for servers: Linux/UNIX, Windows NT/2000/XP
Client: an individual computer requesting services from a server. Commonly used OS for
clients: Windows 95/98/Me.
A typical client computer is a PC.
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
a) Check your computer TCP/IP settings:
In Command Prompt (Start � All Programs �Accessories � Command Prompt), type:
H:\> ipconfig /all
b) What is the IP address for student server?
Open command prompt, type command:
ping student.vwc.edu
c) What is the IP address for VWC web server?
Open the command prompt, type the command:
ping www.vwc.edu
Security Issues.
To prevent the potential damage form viruses, update your computer OS or virus
protection software frequently.
Chapter 5 Information Technology
- 41 -
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.
Download carefully: some programs may have viruses.
If possible, use the computers inside of an intranet.
Back up files. Save typed material frequently.
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.
Copy right problem: download files legally.
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.
Chapter 5 Information Technology
- 42 -
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.
8. Modem can’t do fax (facsimile) transmission. (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? _____
Chapter 5 Information Technology
- 43 -
18. DNS stands for (a) data network server. (b) Domain name system. (d) Domain
network service. (d) Digital name service.
Microsoft Office Labs
- 44 -
Microsoft Word 2000 Lab
Program Interface
Title bar -- File name; Program name.
Menu bar – File, Edit, View, ..
Toolbars: Standard (New, Open, Save, ..), Formatting (Style, Font, Font Size, …)
Ruler
Workspace: insertion point; mouse pointer; end_of_file marker
Status bar.
Templates. Default settings – pre-defined settings.
View buttons. Normal; web layout; print layout; outline
AutoCorrect
Red wavy line indicates spelling error
Green wavy line indicates grammar error
Selection bar
Single click – select the whole line
Double click - select whole paragraph
Triple click – select whole document
Exercises
a) Format a document’s content with 2 columns
b) Insert a table to the document
c) Insert a image to the document
d) Insert a hyperlink to the document
Special Keys
Home: starting point of a line
Microsoft Office Labs
- 45 -
End: ending point of a line
Ctrl-Home: starting point of a document
Ctrl-End: ending point of a document
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
a) Move one paragraph from one place to another place?
Cut/paste – this works even cross documents.
or
Drag/drop – this works only inside the document.
b) Find the thesaurus for a word?
Right click it - Synonyms.
c) Insert current date to the document?
Insert menu – Date and Time …
d) Draw a graph (flow chart, square, or other shapes) in the document.
e) Insert symbols with superscript, subscript, and math formula.
Lab Preparation: Download the data files from http://zeus.vwc.edu/~zwang/word/ to
your folder H:\cs100\.
Advanced Features
Print layout view: Click and type at print layout view
Add footnotes: insert menu – footnote…
Header/footer: view menu – Header and Footer
− Insert � Break � Section break types
Styles (at format toolbar): names with fixed formats.
Heading 1
Heading 2
Microsoft Office Labs
- 46 -
…
Normal
You can change the setting.
Outline view
Create or modify the styles: in outline view, use promote/demote keys
Document map: in Toolbar
Table of contents: insert menu – index and tables …
Microsoft Office Labs
- 47 -
Microsoft Excel 2000 Lab
Tutorial 1
Worksheet: spreadsheet. P. EX1-3
Cell: column # - A, B, C, …; row # - 1, 2, 3, …
Example. B12: 12th
row, B column
Enter data to cell. P.1-10
Delete data. Clear an entry. P.1-12
Select data/cells.
Insert row or column
Copy/paste data/formula: from menu or use fill handle
Using formula: +, -, *, /, ^ (exponent)
(A2) = B2 + C2 – D2
Lab Preparation: Download the data files from http://zeus.vwc.edu/~zwang/excel/ to
your folder H:\cs100\.
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\
c) Study and follow instructions from Page 1-25 to Page 1-63.
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
Microsoft Office Labs
- 48 -
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.
Question: giving the following table of data.
X Y
------------
-3 9
-2 4
-1 1
0 0
1 1
2 4
3 9
Draw the curve based on the points (X, Y).
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
…
Chart types. P.2-3
Column chart
Line chart
XY chart
Pie Chart
…
Chart elements. P.2-4
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:
Microsoft Office Labs
- 49 -
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).
Microsoft Office Labs
- 50 -
Microsoft Access 2000 Lab
MS-Access 2000 is a personal RDBMS (relational DBMS). A RDBMS consists of a lot
of related tables and each table is called a relation.
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:
STUID FIRSTNAME LASTNAME GENDER
----- ----------- ----------- -----------
1001 Josh Smith Male
1002 Ann Brown Female
CRSID TEACHER ROOM STUID
------ -------- -------- -----
CS100 701 CLK125 1001
CS100 701 CLK125 1002
MAT105 602 BL15 1001
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.
Lab Preparation: Download the data files from http://zeus.vwc.edu/~zwang/access/ to
your folder H:\cs100\.
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.
Double-click Create Table in Design View. Type ID in Field Name column.
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.
Microsoft Office Labs
- 51 -
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 Save and type STUDENT for the table name.
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:
CRSID Text (Field Size 10) course id
TEACHER Text (Field Size 3) faculty id
ROOM Text (Field Size 10) room id or name
STUID Text (Field Size 4) student id
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.
Save your work and close the Access 2000 program.
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 Design View and check the field settings.
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.
Microsoft Office Labs
- 52 -
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.
Print the form sheet for the record of Lisa Sutton.
HTML – Web Page Design
- 53 -
HTML - Web Page Design
Your First Web Page
HTML: Hypertext Markup Language
Markup language is the language that its output (result or print-out) is controlled by some
specific commands.
Simple steps to create a HTML web page:
Preparation: Create an H:\www\ folder if you don’t have.
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
Type the following text to the 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.
Step 4: Refresh IE, then something happens. Then close it.
Step 5: Your home page URL (universal resource locator) is:
http://student.vwc.edu/~(your user name)
It contents is the same as the above IE file.
Go back to Step 2 – Step 5 to do more modifications to your home page when you learn
more HTML tags.
HTML – Web Page Design
- 54 -
HTML Tags
For HTML, (HTML) tags control the results. Most (HTML) tags are used in a pair:
� Opening tag, such as <TITLE>, <CENTER>
� Closing tag, such as </TITLE>, </CENTER>
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>
This is not good:
<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:
<H1>heading 1</H1> (largest)
<H2>heading 2</H2>
<H3>heading 3</H3>
…
<H6>heading 6</H6> (smallest)
Title tag: <TITLE> title of the web page </TITLE>.
The title will be shown on the IE title bar.
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)
HTML – Web Page Design
- 55 -
Horizontal line tag <HR width = 77% size = 5 >
Line break <BR>
Example <HR SIZE= “5” WIDTH = “80%” ALIGN = “center” NOSHADE>
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.
Background Color Setting
Use <BODY BGCOLOR= “color_name”> tag that should be put on the start of HTML
code.
Closing tag </BODY> should be located at the end 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 BGCOLOR = “silver”>
(Whole HTML code goes here)
</BODY>
Image Background
<BODY BACKGROUND = ??? >
Exercise What are the URLs of CS100 and your personal web page?
HTML – Web Page Design
- 56 -
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
Type the following text to the Notepad
<TITLE>
My Family Web
</TITLE>
<BODY BGCOLOR= “light green”>
<CENTER>
<H1>
Welcome To (your name)’s Family Page
</H1>
</CENTER>
</BODY>
Review HTML tags, <HR>, <P>, <BR>
HTML Hyperlinks
<A HREF = “(file name or URL)”> hypertext here </A>
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).
Click here to go to my Assignment 1.
<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/
Link to CS 100 web page.
HTML – Web Page Design
- 57 -
<P>
<A HREF = “http://www.vwc.edu/~zwang/cs100/”>
Link to CS 100 web page
</A>.
</P>
Exercise Insert the above HTML to your web page.
HTML Images
<IMG SRC = “file name” ALIGN = ? ALT = “alternative text”>
Here, ? may be right, left (default), middle, top, bottom, etc.
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.
<IMG SRC = “me.jpg” ALIGN = “right” ALT = “Me: (your name)”>
Exercise Insert the above HTML to your web page.
Image Links
Example Insert the image file me.jpg to your web page and link the image to your home
page.
<A HREF = “http://student.vwc.edu/~zwang (or your screen-name)” >
<IMG SRC = “me.jpg” ALIGN = “right” ALT = “Me: John Wang”>
</A>
HTML Fonts
Used to modify the part of the web page text to different font, size or color.
Use <FONT COLOR=? SIZE=? FACE=?> tag.
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.
The value of SIZE may be 1 (smallest) to 7 (largest). Default value is 3.
HTML – Web Page Design
- 58 -
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.
I study hard in CS100.
<P>
<FONT FACE= “courier new” COLOR= “blue” SIZE= “7”>
I study hard in CS100.
</FONT>
Some other font tags:
<U> (underlined text) </U>
<I> (italic text) </I>
<STRIKE> (stroked text) </STRIKE>
<B> (bold text) </B>
Superscript and subscript:
Example: HTML for 23 is:
2 <SUP> 3 </SUP>
HTML for A1 is:
A <SUB> 1 </SUB>
Lists
How can we create the following lists?
Fall’05 classes:
• CS100-1
• CS100-2
• CS207-1
• INST110-17
• CS491-1
I am busy enough!
HTML – Web Page Design
- 59 -
Here is the HTML code:
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
Leading with disc: <UL> (lists here) </UL>
Tag for each list item: <LI>
Exercise insert the above code (use your courses) to your web page.
Leading with circle or square:
<UL TYPE = “circle or square”> (lists here) </UL>
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!
Here is the answer:
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
HTML – Web Page Design
- 60 -
5. CS491-1
I am busy enough!
Here is the HTML code:
Fall’05 classes:
<OL>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
<LI>INST110-17
<LI>CS491-1
</OL >
I am busy enough!
Ordered lists leading with Arabic numbers:
<OL> (lists here) </OL>
Ordered lists leading with letter:
<OL TYPE = “X” START = “n”> (lists here) </OL>
Here: X may be the following choices:
A – capital letter
a – lower case letter
I – capital roman letter
i – lower case roman letter
1 – number (default)
n is the starting value; must be number; 1 is 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!
Answer (HTML code):
Fall’05 classes:
<OL TYPE = “A” START= “3”>
<LI>CS100-1
<LI>CS100-2
<LI>CS207-1
</OL >
HTML – Web Page Design
- 61 -
It is fun!
Some HTML tags have one or more attributes to modify its usages.
In most cases, attribute may be optional.
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.
In most times, value should be lowercase.
Try this:
<OL TYPE = “1” START= “1”>
<LI> Smile
<LI> Exercise
</OL>
Then try this:
<OL>
<LI> Smile
<LI> Exercise
</OL>
The above two lists are the same.
The value “1” for attribute TYPE is named as default.
The default value for attribute START is “1”.
Example what is the default value for attribute TYPE in HTML tag <UL TYPE=?>
Answer: “disc”
Tag <UL TYPE = “disc”> is the same as <UL>
If there are more attributes, they may be any order. Using space to separate them. Don’t
use comma.
Section Exercises
1. Write the HTML to link the following text to VWC URL.
HTML – Web Page Design
- 62 -
Virginia Wesleyan College
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
The HTML code to create above table is as follows.
<TABLE>
<TR> <TD> Datum 11 </TD> <TD> Datum 11 </TD> </TR>
<TR> <TD> Datum 21 </TD> <TD> Datum 21 </TD> </TR>
</TABLE>
Example write the HTML code to create the following table:
Friend Family Work Hobby
The HTML code to create above code is as follows.
<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:
selector, selector { attribute: value; … }
HTML – Web Page Design
- 63 -
The selector is just a HTML tag name to be modified.
For example, the following code is enclosed by the <head> tags:
<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
It is a language embedded in HTML to achieve dynamic performance.
Following is an example of using the 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>
HTML – Web Page Design
- 64 -
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/
- 65 -
Bibliography
Michele Bock and Michael Bock, Technology Essentials 1999 edition, QUE E&T, 1999
http://en.wikipedia.org/wiki/Computer