You are on page 1of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

FIRST PRELIMINARY PERIOD


GRADED EXERCISE #1

Creating a Database and Tables


A. CREATING A DATABASE 1. Launch OpenOffice.org Base by clicking and then

2. The Database Wizard dialog will appear. (Note: If you launch OpenOffice.org for the first time, just click Next, to create a new database, otherwise, click Open an existing database file.)

then click, Finish.

Page 1 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


3. Save your New Database: In the Save in textbox, click the drop down arrow and double click your datacenter\databank in drive Z: 4. For the File name textbox follow this sample database name convention: DB01 _ _ _ _ e.g. DB01DL27 where DB01 refers to your 1st database, DL refers to the initials of your name (last name & first name) and 27 refers to your assigned class number.

5. The Database window for your new database will appear on-screen.

Page 2 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


B. CREATING A TABLE USING THE DESIGN VIEW 1. In the Tasks window, click Create Table in Design View(This will create a table by specifying the field names and properties as well as the data types.)

2. Type the following fields and choose their data type:

3. Click Save button if you want to save changes to your table.

4. Another message box will appear where you have to save your table following this name convention : TB01 _ _ _ _ e.g. TB01DL27 where TB01 refers to your 1 st table, DL refers to the initials of your name (last name & first name) and 27 refers to your assigned class number.

5. Click OK. A message box will appear asking if you want to define a primary key. Click Yes. Page 3 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

6. The Primary key will be set to the first field of your table. Rename ID to StudentID.

7. Click the Close button, and once you double click your database, you will now see the new table in the Object list of Tables.

Page 4 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


8. Double click your new table and you will see the datasheet for your table.

9. Type the following record:

10. Click the Close or Save button to update and save your table. Page 5 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


GRADED EXERCISE #2

Creating Table using Wizard

C.

CREATING A TABLE USING WIZARD 1. Open your OpenOffice.org Main Base Window DB01_ _ _ _ (e.g. DB01DL27). 2. Click the Use Wizard to Create Table.

3. The Table Wizard dialog box will appear

4. Choose Business option and in the list of Sample Tables click Employees. A list of Sample Fields for Students will appear.

Page 6 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


5. Select the following fields in the Sample Fields by clicking the Select button EmployeesID, FirstName, MiddleName, LastName, Address, City, PhoneNumber, EmailAddress. Then click Next.

6. Rename the EmployeeID to StudentID. Then click Next.

Page 7 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


7. Set primary key by clicking Use an existing field as primary key to StudentID, then click Next.

8. Name your table following this table name convention: TB02 _ _ _ _ e.g. TB02DL27 where TB02 means 2nd table, DL represents your initials, and 27 is your assigned class number. Then click Finish.

Page 8 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


9. In the datasheet, type the following records.

Page 9 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


GRADED EXERCISE #3

Changing Field Properties


1. In the OpenOffice.org Main Base Window, select your 1st table (e.g. TB01DL27) and in Edit menu click Edit to open the Table Design View. 2. The Database table design for your 1st table will appear together with its Field Properties.

3. Click each field names and change the following field properties for each of your fields: Field Name StudentID FirstName MiddleName LastName Course Units EntryDate Entry Required Yes No No No Yes Yes Yes Length Decimal Places 10 15 15 15 5 5 1 0 Default Value Format Example 09-0000

Align Center 0.0 Align - Center MMM D, YYYY Align - Center

StudentStatus No

Page 10 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


4. Click the Save button to update and save your table. 5. Change also the field properties of your 2nd table (e.g. TB02DL27). The output must be the same from the sample figure below. Consider the Length of characters especially in the field of EmailAddress and Format Example (Format & Alignment center). 6. In StudentID the format is 09-0000 and in PhoneNumber field, click the textbox of Format example and type (063) in the format code textbox.

7. Save to update your table.

Page 11 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

GRADED EXERCISE #4

Queries using Design View and Wizard


A. CREATING A QUERY USING DESIGN VIEW 1. Open your main Base Window DB01 _ _ _ _ (e.g. DB01DL27) 2. In the Database list, click the second icon, the Queries.

Figure 1 3. Click Create Query in Design. Look at Figure 2.

Figure 2 4. The query design window should appear. In the Add Tables window, Add TB01_ _ _ Look at Figure 3.

Page 12 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


Figure 3 5. This adds the table to the query.

Figure 4 6. 7. Add fields to query, by clicking the arrow in the first columns field box. In the Field properties choose StudentID, FirstName, LastName, Course and StudentStatus. Under the LastName field choose the Ascending option in Sort properties; Under the Course field type the given Criteria (BCS or BSIT) in the Criteria properties. Your screen should resemble Figure 5. Fields: StudentID, FirstName, LastName, Course, StudentStatus Criteria: Students taking up BCS or BSIT

Run

Page 13 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


Figure 5 8. 9. 10. Click the Run button the toolbar or press F5 to run the query result. Save us QR01_ _ _ _. Create the 2nd query, repeat step 2 to 7 then choose the given fields and criteria. Look Figure 6. Fields: StudentID, LastName, FirstName, MiddleName, EntryDate Criteria: Show only those students enrolled before 6/1/08

Figure 6 11. 12.

Save your query file as : QR02 _ _ _ _. Create the 3rd query, (repeat step 2 to 7) but now choose your table 2: TBO2 _ _ _ _, and follow the given fields and criteria. Look at Figure 7. Fields: LastName, FirstName, City, EmailAddress Criteria: Show only those students living in Quezon City or Manila and with the EmailAddress of Yahoo with descending order.

Page 14 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


Figure 7 B. 13. Save your query files as: QR03_ _ _ _. CREATING A QUERY USING SIMPLE QUERY WIZARD (Same Databate file: DB01_ _ _ _) 1. In the Main Base Window, click the second tab, the Queries. Then click Use Wizard to Create Query. Look at Figure 8.

Figure 8 2. In the Query Wizard Window, choose your table 2 (TB02 _ _ _ _) in the list box. Look at Figure 9.

Figure 9

Page 15 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

3.

Click the Select All button (to select all fields). Then click Next. Choose the LastName as field to sort ascending. Click Next.

Figure 10 4. To Search Conditions: e.g. LastName that starts with letter V. Click LastName in the selection of Fields textbox arrow, choose like from the choices of Condition and type V* in the Value textbox. Click Next. Refer to Figure 11.

Figure 11

Page 16 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

5.

Leave the other steps as is by clicking Next. Save your 3rd query as QRO4 _ _ _ _ in the textbox of Name of the query, then click Finish to see the result.

Figure 12 6. Select again your QR04_ _ _ _ to modify query 4. Click Edit menu Edit to switch to design view. Look at Figure 13.

Figure 13 Page 17 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

7.

Follow the given criteria. Look at Figure 14. Criteria: Lastname starts with a letter V, L, C, or R and in descending order.

Figure 14 8. Click Run button to see the result. Click Save button to update and save your query.

Page 18 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

GRADED EXERCISE #5

Creating Queries using various Operators and Commands


Given below are the additional queries, you can use simple query wizard or design view. 9. Save it as query #5 e.g. QR05DL27. (Fields to be used) In TB01: StudentID, LastName, FirstName, MiddleName, and EntryDate. In TB02: Address and City (Criteria) Entry Date between 10/7/2007 and 10/21/2009 and Student who lives in either Quezon City or Makati. When using Table1 and Table2. (Note: To avoid redundancy of records, click and drag Primary key field to other table and to create relationship between tables.) Look at Figure 1.

Click and drag Table relationship Figure 1 10. Save it as query #6. (Fields to be used) All fields of table 1. (Criteria) Show only the records of Gina Clemente and Edelita Lorico. (Sort) By LastName, but make Lorico come first before Clemente. Save it as query #7. (Fields to be used) In TBO2: EmailAddress, LastName, and FirstName. In TB01: Course and Units. (Criteria) All e-mail address with YAHOO and whose course is BSIT (Sort) By Lastname, descending order. Save it as query #8. (Fields to be used) In TB01, StudentStatus, Course, Units, LastName and FirstName. Page 19 of 50

11.

12.

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


(Criteria) Show only those students who have less than 13 units. (Sort) By Lastname, descending order. 13. Save it as query #9. (Fields to be used) All fields of TB01. (Criteria) Show only the student whose StudentID is 0028. Save it as query #10. (Fields to be used) In TBO2: LastName, FirstName and MiddleName. In TB01: Course, Units and EntryDate. (Criteria) Show those students whose course are not BSCpE (Meaning, all courses except BSCpE and those who have 18 units. (Sort) By Lastname, descending order. Save it as query #11. (Fields to be used) All fields of TB02. (Criteria) All FirstName with letter E, Y, T, or Z. (Sort) By FirstName, ascending order. Save it as query #12. (Fields to be used) In TBO1: LastName, FirstName and MiddleName. In TB02: City and PhoneNumber. (Criteria) All phone number with 9. (Sort) By City, ascending order. Save it as query #13 (Fields to be used) In TBO1: LastName, FirstName and MiddleName. In TB02: City and PhoneNumber. (Criteria) Those who live in Mandaluyong or whose MiddleName starts with letter Z. (Sort) By middlename, use ascending order. Save it as query #14. (Fields to be used) In TBO2: LastName, FirstName and MiddleName. In TB01: Course, Units and EntryDate. (Criteria) Those whose units are less than 18 units or greater than 18 units and for less than 18 units those students taking up BSN. (Sort) By Units, use ascending order.

14.

15.

16.

17.

18.

19.

Save it as query #15. (Fields to be used) In TBO2: StudentID, LastName, FirstName, MiddleName and EmailAddress. In TB01: Course and Units. (Criteria) Those students taking up BSCpE with greater than 15 units and with GMAIL email address. (Sort) By Units, use descending order. Page 20 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

GRADED EXERCISE #6

Creating Forms using Wizard and Design View


C. CREATING A FORM USING WIZARD I. Creating Form 1 1. Open your Database file: DB01 _ _ _ _ (e.g. DB01JB06) 2. In the Database panel, click the 3rd tab, the Forms. Look at Figure 1.

Figure 1 3. The Form Wizard dialog box will appear. Select table 1 by clicking drop down arrow in the textbox of Tables or queries, then click select all buttons Click Next. Look at Figure 2.

Figure 2

Page 21 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

4.

Click Next. Look at Figure 3.

Figure 3 5. Choose In Blocks Labels Above in Arrange controls. Click Next.

Figure 4

Page 22 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

6.

Click Next. Look at Figure 5.

Figure 5 7. Choose Red as Styles. Click Next.

Figure 6

Page 23 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

8.

Type the name of your form: FR01_ _ _ _. (for form 1) Click Finish.

Figure 7 9. Your form should resemble at Figure 8.

Figure 8

Page 24 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

10. 11.

Modify your form. Click the X button. In Edit menu, click Edit to open the Design View of your form window. Click and drag each of the fields to give space for the title of your form. Look at Figure 9.

Figure 9

12.

In the Form Control toolbar, click Label field button. Click and drag in the upper part of your form to insert the label field. Look at Figure 10.

Figure 10

Page 25 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

13.

Double click the label field of your form to see the Properties of your label to enhance its content and appearance. Look at Figure 10 for some modifications. Set your font size to 36 and typeface to bold. Click close button of your properties. Save to update.

double click

Figure 11 14. Open your form. You screen should resemble at Figure 12. Navigate the records by clicking the Next record button.

Figure 12 II. Creating Form 2 1. Create the 2nd form, using Form Wizard. 2. In the Form Wizard window, choose your Query 1: QR01_ _ _ _, and choose the fields: StudentID, FirstName, LastName, Course Page 26 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


3. 4. 5. D. Choose the arrangement Columnar Labels on Top and Bright Blue for its style. Type FR02_ _ _ _ as name of the form. Insert the form header, BCS/BSIT STUDENTS.

CREATING A FORM USING DESIGN VIEW III. Creating Form 3 1. Create the 2nd form, using the Form Wizard. Look at Figure 13.

Figure 13 2. Your screen should resemble at Figure 14.

Figure 14 3. Click Label Field button and drag in workspace. Double click to open Properties. Modify the label. Font size 28. Save us FR03 _ _ _ _. Click X button. Look at Figure 15.

4.

Figure 15 In View menu Toolbars Form design toolbar. Click Form button. Look Figure 15. (The form design toolbar usually appeared at the bottom of screen. Make sure that Design Mode is On) Page 27 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Form Figure 15 5. Your screen should pop-out Form Properties dialog box. Click Data Content type, choose Query. Choose QR11_ _ _ _ for the content of your form. Look at Figure 16. Click X button.

Figure 16 6. Click Add field button . Drag the fields to workspace. Look at Figure 17.

Figure 17

Page 28 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

7.

Click Gallery button choose from the selection. Click insert background. Adjust the size by clicking the sizing handle of the background. You can use the gallery button for the picture under the theme Bullets insert copy. Click Insert Horizontal Ruler OK to insert bar as separator . Look at Figure 18. Save to update. Click close button.

Figure 18.

Page 29 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Form Design 8. Sample output of your 3rd form (e.g. FR03_ _ _ _)

Figure 19

Page 30 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

GRADED EXERCISE #7

Creating Reports using Report Wizard


E. CREATING A REPORTS USING WIZARD IV. Creating Form 1 1. Open the database file where you want to create the new report : DB01 _ _ _ _ (e.g. DB01JB06) 2. In the left pane of the database window, click the Reports icon. Click Create Reports using Wizard. Look at Figure 1.

Figure 1 3. Follow the instructions in the Report Builder guide. Choose your TB01 _ _ _ _ and click select all buttons to display all the fields in your table. Click Next.

Figure 2 4. Modify the label of fields. Your screen should resemble Figure 3. Click Next.

Page 31 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Figure 3 5. Click the StudentID field as you first field groupings and click select button. Click Next. Look at Figure 4.

Figure 5

6.

Your screen should resemble Figure 6. Click Next.

Figure 6 7. Choose Outline Red & Blue for the layout and Flipchart for headers and footers. Click Next. Look at Figure 7.

Page 32 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Figure 7

8.

Type the filename of your report in Title of report. (e.g. RP01 _ _ _ _) Look at Figure 8. Click Finish.

9.

Figure 8 Open the Design View of your report. Type the Report title : STUDENTS RECORD and prepared by YOUR NAME. Sample output of your 1st report. Look at Figure 9.

Figure 9. Sample output V. Creating Report 2 1. 2. Create the 2nd report, using Form Wizard. In the Tables or queries choose TBO2 _ _ _ _, choose the following fields LastName, FirstName, MiddleName, Address, City, and PhoneNumber 3. Select City to add Grouping levels. Choose descending order. Page 33 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


4. 5. 6. Choose Outline Highlighted for Layout. Choose Worldmap for the Headers and Footers Layout. Type RP02_ _ _ _ as name of the form. Type STUDENTS DATABASE as your title/header. Your second report should resemble Figure 10.

Figure 10. Sample output VI. Creating Report 3 1. 2. fields. 3. 4. 5. 6. Select Course to add Grouping levels. Choose Outline, indented - Highlighted for Layout. Choose Controlling for the Headers and Footers Layout. Type RP03_ _ _ _ as name of the form. Type STUDENTS COURSE as your title/header. Your second report should resemble Figure 10. Create the 3rd report, using Form Wizard. In the Tables or queries choose QR01 _ _ _ _ then choose all the

VII. Creating Report 4 1. 2. following fields. Page 34 of 50 Create the 4th report, using Form Wizard. In the Tables or queries choose TB02 _ _ _ _ choose the

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


LastName, FirstName, MiddleName, Address, PhoneNumber, City, and EmailAddress Select City to add Grouping levels. Choose Outline - modern for Layout. Choose Bubbles for the Headers and Footers Layout. Type RP04_ _ _ _ as name of the form. Type STUDENTS RECORD as your title/header. Your second report should resemble Figure 10.

3. 4. 5. 6.

MIDTERM PERIOD
GRADED EXERCISE #1

Entering HTML Tags and Text


A.

Heading Tag = Largest Font Color = Pink Alignment = center Font size = 24 Font color = blue Alignment = center

Font color = cyan Underline tag

Underline tag

Font color = orange Font size = 18

Alignment = right Font color = green Font size = 18

Font color = violet Font size = 18 Page 35 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Font face = Arial Background color = Red Font color = Yellow Save as: EX01_ _ _ _.html (FirstName / LastName Initial & Assigned Workstation) (e.g. EX01EL28) B. DIRECTION: Encode the given source code, save it to your folder name and write the output in the given space below. 1.) Multimedia Outline Code <html> <head> <title>Multimedia</title> </head> <body> <H2 ALIGN="RIGHT">Multimedia in Your Page </H2> <HR NOSHADE> <H5 ALIGN="RIGHT">Animated My GIF!</H5> <H5 ALIGN="RIGHT">Movie Time</H5> <H5 ALIGN="RIGHT">Sound of [web] Music </H5> <H5 ALIGN="RIGHT">Hit Me With a Shockwave</H5> </body> </html> 2.) Guide to Automated Teller Machine Code <html> <head> <title>Automated Teller Machine</title> </head> <body> <h2>Guide to Automated Teller Machine</h2> <HR ALIGN ="CENTER" WIDTH= "200" NOSHADE SIZE="12"> <p>1. Pull up to drive-through Automated Teller Machine. <BR> 2. Insert Card<BR> 3. Enter PIN number <BR> 4. Take cash, card and receipt. </body> Page 36 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


</html>

C. DIRECTION: Create a WebPage that will display this output. The exercises uses various
combinations of the <BR>, <P>, <DIV>,<Hn>, AND <HR> tags. Write the source code. 1. Men differ from Women Page 2. Diamond Page

Page 37 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

3. Rey Tina Grocery Store

Page 38 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

GRADED EXERCISE #2
Formatting of Document
A. Horizontal rule Heading Tag = Largest Alignment = center

Break a line

Paragraph with bold and italize word

Heading Tag = 2nd to Largest

Alignment - center Underline and italic

Blockquote and Break a line Superscript and Subscript Preformatted text FirstName and LastName initials

Page 39 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


Background color = Yellow Save as: EX02_ _ _ _.html (FirstName / LastName Initial & Assigned Workstation) (e.g. EX02EL28)

B. DIRECTION:
Type this code and save it to your folder name. Write the output in the given space below.
1.) Classify Ads Page

HTML Output: <html> <head> <title>Classify Ads</title> </head> <pre> <BODY BGCOLOR="WHITE"> <HR ALIGN ="LEFT" WIDTH= "200" NOSHADE SIZE="5"> <FONT SIZE="4"><FONT COLOR= "BLACK"><FONT FACE="AMERICAN CLASSIC"><B>Bakery Equipment</B></FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">ARAKA KNEADR 1BGR 65T</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Hbrt Mxr 30QC 120T; Euro4s</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Ovn Bnw500T & more</FONT> 912-4342 <HR ALIGN ="LEFT" WIDTH= "200" NOSHADE SIZE="5"> <FONT SIZE="4"><FONT COLOR= "BLACK"><FONT FACE="AMERICAN CLASSIC"><B>Garments</B></FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">New Color Orig Lacoste</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Cel # 09182344466</FONT> <HR ALIGN ="LEFT" WIDTH= "200" NOSHADE SIZE="5"> <FONT SIZE="4"><FONT COLOR= "BLACK"><FONT FACE="AMERICAN CLASSIC"><B>Wanted to Buy</B></FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">(New Used)</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Car/Vans</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Utility Vehicles</FONT> <HR ALIGN ="LEFT" WIDTH= "200" NOSHADE SIZE="5"> </pre> </body> Page 40 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


</html>

2.) Table of Content Page <html> <head> <title>Table of Content</title> </head> <pre> <BODY BGCOLOR="WHITE"> <FONT SIZE="5"><FONT COLOR= "ORANGE"><FONT FACE="ARIAL BLACK"><B>Table of Content</B></FONT> <HR ALIGN ="LEFT" WIDTH= "350" NOSHADE SIZE="5"> <FONT SIZE="4"><FONT COLOR= "RED"><FONT FACE="ARIAL"><I>PART 1</I></FONT> <FONT SIZE="3"><FONT COLOR= "BLUE"><FONT FACE="ARIAL">Digital Nervous System</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">The Imperative for Knowledge Management .............. 1</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Knowledge Management Backgroud ........................ 5</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Element of Knowledge Management ....................... 10</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Knowledge Services .............................................. 18</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Connected Devices ............................................... 22</FONT> <FONT SIZE="2"><FONT COLOR= "BLACK"><FONT FACE="ARIAL">Organizational Devices .......................................... 25</FONT> <HR ALIGN ="LEFT" WIDTH= "350" NOSHADE SIZE="5"> </pre> </body> </html>

Page 41 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

3.) House and Lot for Sale Page <html> <head> <title>Your DreamHouse WebPage</title> </head> <body> <b>Your dream is a good investment here at Cubao Metro Central</b> <ul>Own a Commercial, Residential and Office Units <li>For as low as: <ul>25,000 Reservation <ul> <li>Ready for Occupancy <ul> <li> 88 months/)15% interest <li> Soon to open at Mandaluyong City </ul> <li> Why rent if you can afford to own a house and lot? <li> Hurry! Limited units available </ul> <li>Promo 25% discount </ul> </body> </html>

Page 42 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

C. DIRECTION: Use the font and color tags. Create HTML codes for each given WebPages. Feel free to experiment using <PRE> tag for the first page and <P> and <BR> for the second page. Write the source code in the given space below.
1. Television Schedule

Page 43 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

2. Employment Hiring

Page 44 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

FINAL TERM PERIOD GRADED EXERCISE #3


Creating Web Page using Tables and Lists Graphics and Linking Files
A.

Page 45 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

DIRECTIONS: 1. 2. 3. 4. 5. CALENDAR : Heading 1; alignment = center; with horizontal rule. TABLE: border = 15; cellpadding = 22; cellspacing = 10; bordercolor=skyblue FEBRUARY 2010: colspan = 7; font face = Burnstown Dam; font size = 72 Days of the week: Sun font color = red; Mon-Sat font color= blue. Dates: those falls on Sunday should have red font color (include HEARTS DAY! and used break a line to move text to next line); ordinary day black 6. Official List of Phil. Holidays: Heading 2 7. LIST: OL TYPE = A ; sub- list type is equal to bullet. Page 46 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


8. Use emphasis on text, ex. <b> </b> if necessary. Use your preferred bgcolor or background image to highlight your table. 9. Save your file, e.g. EX03 _ _ _ _.html.

GRADED EXERCISE #4
Creating HTML Form
DIRECTIONS: 10. Create a simple login screen where you provide your username, password, message and send information using HTML Form. 11. Use form elements such as text, radio buttons, checkboxes, drop dowm menus, etc. to establish dialog with your sites visitors. 12. Refer to sample figure below. 13. Save your file. EX04 _ _ _ _.html

Page 47 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

Sample Output

GRADED EXERCISE #5
Creating Webpage using HTML Frames with Hyperlinks to other documents
1st frame

Page 48 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES

2nd frame

3rd frame

DIRECTIONS:
1. Create three frames. 2. On 1st frame type: MY PERSONAL WEBSITE, Set Background Color = Pink, Font face = Tahoma, Font size=7, Alignment = Center. Save as: personal.html 3. On 2nd frame type: Know me My Family My Friends My Inspirations Set Background Color = Blue, Font size=5 and make it bold. Save as: know_me.html 4. On 3rd frame type: Your Personal Information, Set Background Color = Green, Font size=5 and make it bold. Page 49 of 50

JOSE RIZAL UNIVERSITY Computer Science Department

CSC 16 Integrated Application Software LABORATORY EXERCISES


Type your necessary information such as: University, Course, Name, Address, Phone No. and Email Address Save as: main_page.html 5. Save as: Click to your datacenter/databank and Create New Folder. 6. Once your new folder has created, type the filename on the text box: EX05 _ _ _ _.html. 7. Dont forget to include a target name for your three frames: target name = head target name= channel target name = main

8. Create document describing your family. Save as: Family.html At its bottom part type back to home which much be hyperlink to main_page.html. 9. Create document describing your friends. Save as: Friends.html At its bottom part type back to home which much be hyperlink to main_page.html. 10. Create document describing your inspiration. Save as: Inspiration.html At its bottom part type back to home which much be hyperlink to main_page.html. 11. Open EX05 _ _ _ _.html: Hyperlink: My Family -> Family.html (dont forget to target = main) My Friends -> Friends.html (dont forget to target = main) My Inspirations -> Inspiration.html (dont forget to target = main) 12. Save to update.

Page 50 of 50