ITC (Lab Manual)

CS101: Introduction to Computing
Contents
Lab Practical Week #1..................................................................................................................................5
Operating System (System Software)......................................................................................................5
Windows xp,7,8,10..............................................................................................................................5
MICROSOFT OFFICE (Application Software):............................................................................................6
Installation ( Steps ):............................................................................................................................7
Lab Practical Week#2..................................................................................................................................9
Some of Most commonly used email addresses and service providers...................................................9
Email account sign up:.............................................................................................................................9
Lab Practical Week#3................................................................................................................................13
Microsoft Word (word processor).........................................................................................................13
Ribbon ( toolbar ):.................................................................................................................................13
To create a new blank document:.........................................................................................................14
Inserting Page Numbers :...................................................................................................................14
Adding Line Numbers :......................................................................................................................14
Creating and Inserting Screenshots:..................................................................................................15
Checking the Spelling and Grammar of the Entire Document:..........................................................15
Checking the Spelling and Grammar Word-by-Word:.......................................................................16
Pre-Formatted Margins :....................................................................................................................16
Customizing Your Margins:................................................................................................................16
Turning off the AutoFormat:..............................................................................................................17
Using, Formatting, and Removing Styles:..........................................................................................17
Lab Practical Week #4................................................................................................................................20
Microsoft Word ( Continued).................................................................................................................20
Adding a Cover Page:........................................................................................................................20
Inserting a Page Border:....................................................................................................................20
Inserting a Table:...............................................................................................................................21
Inserting a Chart:...............................................................................................................................22
Inserting Clip Art:...............................................................................................................................22
Inserting an Image Saved on Your Computer:...................................................................................23

Microsoft Excel:.....................................................................................................................................24
THE FILE BUTTON:..............................................................................................................................24
Protected View..................................................................................................................................24
THE QUICK ACCESS TOOLBAR:...........................................................................................................25
Worksheet.........................................................................................................................................25
NAVIGATING AROUND SPREADSHEET:..............................................................................................26
CREATING A BASIC SPREADSHEET:....................................................................................................26
FORMATTING SPREADSHEET:............................................................................................................27
Merging Cells.....................................................................................................................................27
Wrapping Text...................................................................................................................................28
INSERTING FUNCTIONS......................................................................................................................28
Calculating a Sum..............................................................................................................................28
Function Library.................................................................................................................................28
CONSTRUCTING YOUR OWN FORMULAS:.........................................................................................29
Guidelines for CreatingFormulas.......................................................................................................30
Microsoft PowerPoint............................................................................................................................31
Keys to effective PowerPointTM Presentations.................................................................................34
HTML.....................................................................................................................................................36
HTML Tags.........................................................................................................................................36
HTML document has two portion:.....................................................................................................37
HTML Page Structure :.......................................................................................................................37
Heading Tags:....................................................................................................................................38
HTML Lists:............................................................................................................................................42
Unordered List:..................................................................................................................................42
Ordered List:......................................................................................................................................43
Description List:.................................................................................................................................45
Tables:...................................................................................................................................................46
Passive Web Pages:...............................................................................................................................51
Interactive Web Pages:..........................................................................................................................51
Interactive Forms :.................................................................................................................................52
Lab Practical Week #10..............................................................................................................................59
JavaScript (Client-side scripting)............................................................................................................59
Scripting:............................................................................................................................................59
Types of scripting:..............................................................................................................................59
New Concept: Client-Side Scripts.......................................................................................................60
Advantage of Client-Side Scripting :...................................................................................................60
Why JavaScript?.....................................................................................................................................61
What is JavaScript?................................................................................................................................61
JavaScript:..........................................................................................................................................61
Types of Objects................................................................................................................................68
Lab Practical Week # 11.............................................................................................................................69
Data types:............................................................................................................................................69
Variables:...............................................................................................................................................70
Declaration of Variable:.....................................................................................................................70
Initializing a Variable:.........................................................................................................................70
Operators:.............................................................................................................................................71
Conditional Statements:........................................................................................................................72
if Statement:......................................................................................................................................72
if-else Statement:..............................................................................................................................73
Multiple if Statements:......................................................................................................................73
Switch Statements:............................................................................................................................74
Loops:....................................................................................................................................................75
for Loop:............................................................................................................................................75
while Loop:........................................................................................................................................75
do-while Loop:...................................................................................................................................76
Difference between while and do-while loop:...................................................................................76
Arrays:...................................................................................................................................................76
Lab Practical Week #12..............................................................................................................................80
Function:................................................................................................................................................80
Methods :..............................................................................................................................................82
Lab Practical Week #1
Operating System (System Software)
An operating system (OS) is system software that manages and controls the overall operation of
computer hardware.
Example:
Windows xp,7,8,10
 Linux,UNIX
 Mac OS X etc
Windows 7 Installation:
The steps to install windows 7 operating system are as follow:
1. Start your computer. Press f2 or delete at start up to enter the bios menu. Select
First boot device as ‘CD ROM’ if you installing from DVD ROM. Second boot device
as ‘Hard Disk’ so that the computer boots from Hard disk if OS is not in DVD ROM.
Press f10 to save your settings and select yes to restart your computer.
2. Insert the installation disc for Windows 7 and start your computer. The computer
will ask you to ‘Press any key to boot from CD/DVD’. Press any key on your
keyboard and it will start loading the operating system from the CD.
3. After loading windows 7 successfully, it opens an install window. Enter the
Language time & currency format and keyboard or input method. Click ‘Next’. The
‘Install windows 7’ screen will appear.
4. Click ‘Install now’. Setup will start and you will see a message on the screen ‘Set
up is starting…’
5. Now it will show the License agreement screen. Check the ‘I accept the License
terms’ and click ‘Next’. The ‘Install windows’ wizard will appear.
6. Select Custom (Advanced) option. The screen will prompt you to select the
location to install windows. Click drive option (Advanced menu). Click on ‘New’,
you are then asked to allot a size on the disk for installation. Enter the appropriate
volume size and then click ‘Apply’ to create partitions for the installation, click
‘Next’. Windows will start the installation. Now the installation status screen
appears. You will have to wait for the following tasks to get complete.
 Copying Windows
 Expanding Windows files
 Installing features
 Installing updates
 Completing Installation
 The computer will restart several times during this process so do not
worry.
7. After successful installation of Windows 7 it will ask you to specify the ‘computer
name’. It will also ask you enter a ‘User account’ and ‘Password’. Enter the
password in the respective field and also the password hint, click ‘Next’.
8. The setup key will open the ‘Product Key’ option. Enter the correct product key,
make sure that ‘Automatically activate windows when I am online’ check box is
selected and click ‘next’.
9. Now a window to set time on your computer will be displayed. Set the correct
‘Time Zone’, date and click ‘Next’ option.
10. The ‘Computer network location’ option will be displayed if your computer is
already connected to a network. Select ‘Network type’ and click ‘next’.
11. Windows will now finalize the setup and start to prepare your Windows 7
Desktop.
MICROSOFT OFFICE (Application Software):
Microsoft Office or Microsoft Office System is a collection of computer programs made by

Microsoft. The programs are created for all users.There are different versions of the software
for home users and for business users.
Products:
The versions available are made up of some or all or more of the following programs:
 Microsoft Word ( word processor )

 Microsoft Excel ( spreadsheet )
 Microsoft PowerPoint ( presentations )
Installation ( Steps ):
1. Insert the Microsoft Office media disc into the DVD drive. Click "Start" followed by "Computer."
Double-click the disc drive if Windows fails to launch setup automatically.
2. Enter your product key when prompted and click "Continue." Read the license terms and then
check "I Accept the Terms of This Agreement." Click "Continue."
3. Click "Customize." Select the first program or tool from the list and then choose "Run From My
Computer," "Run All From My Computer," "Installed on First Use" or "Not Available" from the
options.
4. Repeat the previous step for each application or feature. Click "Install Now" to install
Microsoft Office to the laptop
Lab Practical Week#2
Email:
Short for electronic mail, email (or e-mail) is defined as the transmission of messages over
communications networks.
Email is a message that may contain text, files, images, or other attachments sent through a
network to a specified individual or group of individuals.
The first e-mail was send by Ray Tomlinson in 1971.
Some of Most commonly used email addresses and service providers.
 Gmail
 Yahoo Mail
 Outlook.com
 Mail.com
Email account sign up:
Creating account in Gmail step by step:
1. Open the Gmail website. Click the blue “Create an account” button below the login box.
This will take you to the “Create your Google Account” page.
2. Fill out the required information. You will need to enter your first and last name, your
birthday (for age verification), your gender, your phone number in case you lose access
to your account, and a verification email address. You also need to enter which country
you reside in.
3. Come up with a username Your username will become your new Gmail email address
and the password you entered will be the password for your email address.
4. Complete the CAPTCHA. This is a verification tool that ensures that a real person is
creating the account.
5. Agree to the privacy policy.
6. Click Next Step

7. Click Next Step once more. Your Gmail account has been created.
Lab Practical Week#3
Microsoft Word (word processor)
Microsoft Word 2010 is a word-processing program, designed to help you create

professional-quality documents. With the finest document formatting tools, Word
helps you organize and write your documents more efficiently. Word also includes
powerful editing and revising tools so that you can collaborate with others easily.
Ribbon ( toolbar ):
“The Ribbon” is the professional term for the Microsoft Word toolbar, and is a part of
many Microsoft programs, including Outlook, Excel, and PowerPoint. You can use the
Ribbon to access virtually every feature of Word.
 The File tab provides options for basic administrative tasks involving your
document, such as saving, printing, and opening a new document.
 The Home tab provides options to edit aspects of the basic formatting your
document, such as the font (type, size, color, etc.), text alignment, and creating
bulleted or numbered lists.
 The Insert tab provides options to place visual enhancements in your document,
such as pictures, tables, and charts.
 The Page Layout tab provides options for more advanced formatting of your
document, such as margins, page orientation (i.e. portrait/landscape), and size.
 The References tab provides options for using various citations in your document,
such as footnotes, bibliographies, and captions.
 The Mailings tab provides options for sending out your document, such as selecting
recipients and inserting a greeting line
 The Review tab provides options for editing your document’s content, such as a
Spelling and Grammar check, a translator, and inserting comments in specific areas.
 The View tab provides options for examining your document, such as a full screen
view, print previewing, and zooming in or out.
To create a new blank document:
 Open Microsoft Word and Microsoft Word will open up automatically into a new
document ready for you to start typing.
 If Microsoft Word is already opened but you wish to start a new document, click File at
the top left-hand corner of your document.
 A new document will open up. You’re now ready to type into your document.
Inserting Page Numbers :
 Select the Insert tab and select the Page Number option. A list of options appears.
 Select your preferred option. The page numbers appear in the place you have selected.
Adding Line Numbers :

 Select the Page Layout tab and Select the Line Numbers option and Scroll through
the options and select your preference.
Creating and Inserting Screenshots:
 Open the window(s) you wish to capture on your desktop and Press the
PrintScreen/SysRq key (located in the upper right of your keyboard). Windows copies
your entire screen. Note that this key is sometimes abbreviated to PrtScrn or PrtSc.
 Open a new Microsoft Word document and Press the Paste option on the ribbon at the
top, or the Ctrl and V keys simultaneously. Either method inserts the copied screenshot.
Checking the Spelling and Grammar of the Entire Document:
 Select the Review tab and Select on the Spelling & Grammar icon and Choose the
appropriate correction from the suggestions that Word presents.
 Select the Change button to apply the correction and If you wish to ignore Word’s
suggestions, select Ignore or Add to Dictionary.
Checking the Spelling and Grammar Word-by-Word:
 Select a word or phrase that Word has marked misspelled or grammatically

incorrect and Right-click your cursor. Choose the appropriate correction from the
suggestions that Word presents by selecting it. If you wish to ignore Word’s
suggestions, select Ignore or Add to Dictionary
Pre-Formatted Margins :
 Select the Page Layout tab and Select the Margins option. A drop-down menu with
pre-formatted options appears
 Select your preference. Word automatically applies your changes.
Customizing Your Margins:
 Follow Steps 1 and 2 of Pre-Formatted Margins and Select the Customize Margins
option at the bottom of the drop-down menu. A box appears on your screen. Fill in
the opinions according to your preferences and Select OK.
Turning off the AutoFormat:
There are many positive aspects of Microsoft Word’s AutoFormat features, which can
format bulleted lists, symbols, and more. However, you can to turn it off and customize
your document to your own personal preferences
 Select the File tab and Select the Options choice from the tab. A box appears on your
screen .Now Select Proofing from the menu on the left-hand side of the box and
Select the AutoCorrect Options button from the options that appear. Select the
option you wish to customize.
 Click to select or clear the checkboxes beside the options that you want to enable or
disable. If you choose to clear them, you can then format these items based on your
preferences. Select OK. This box disappears, and only the “Proofing” box remains.
Select OK on the “Proofing” box to confirm your preferences.
Using, Formatting, and Removing Styles:

Styles are formatting characteristics that you can apply to text, titles, and headings in your
document. You can use one of the pre-formatted options Word provides or customize your
own.
Using Styles
 Select the Home tab and Select the text you wish to style. In the Styles box, select
the style you would like to use. For additional styles, select the down arrow on the
right-hand side of the Styles box.
Formatting Styles
 Select the Change Styles option. A drop-down menu appears. Scroll through the
options and select your preferences. You can make changes to colors, fonts, and
more.
Removing Styles
 Select the styled text you want to remove and Select the Normal option from the
Styles Ribbon. Your text switches back to your default font and font size.
Using the AutoSave:
 Confirm that the document you are working on is already saved on your computer.
 Select the File tab.
 Select the Options choice from the tab. A box appears on your screen.
 Select the Save option from the menu on the left-hand side of the box.
 Edit the options according to your preferences and Select OK.

Microsoft Word ( Continued)
Adding a Cover Page:
You can use a cover page to provide some basic information about your document. Word
offers approximately twenty cover page templates that you can choose for your document.
 Select the Insert tab from the Ribbon. Choose the first option on the left, Cover Page.
Scroll through the templates Word offers.
 Select your preference. Fill in the information to suit your document.
Inserting a Page Border:
 Select the Page Layout tab and Select the Page Borders option near the center.
 A box with multiple border options appears on your screen.Select your preference
and click OK.
Inserting a Table:
Tables are an efficient way to display information in a concise and simple manner. You can
use tables for presentations, tutorials, articles, and more.
 Select the Insert tab and Select the Table option.

 A drop-down menu appears.
 Scroll through the menu to create a table with your preferred dimensions.
 When you have your dimensions, click your cursor. Your table appears. Each
individual box is called a “cell.”
 To edit each individual cell, click on the one you wish to edit. You can now fill it
according to your preferences.
Inserting a Chart:
 Select the Insert tab. Select the Chart option. A box appears on your screen.
 Select the type of chart you want to insert into your document. Select OK. Your
screen splits, and the chart appears on the left in a Word document, while a
Microsoft Excel spreadsheet with the chart’s dimensions appears in another
Inserting Clip Art:
The term “Clip Art” refers to the pre-made images Word has stored that you can use to
illustrate your document. You can browse through many different options, or search for a
specific image.
 Select the Insert tab. Select the Clip Art option. A search box appears on the right
side of your screen.
 Type your search terms in the entry field labeled Search for. Your search results
appear below. Scroll through and select the image that you would like to use in your
document
Inserting an Image Saved on Your Computer:
You can insert your own images into a Word document to complement a set of directions, a
presentation, or anything similar. You can insert any images saved on your computer into
your document.
 Select the Insert tab.

 Select the Picture option. Your documents box appears.

 Browse through your folders until you find the picture you wish to insert.
 Select the Insert option. Word inserts the selected image into your document.
Microsoft Excel:
Microsoft Excel is a spreadsheet developed by Microsoft for Microsoft Windows, Mac OS X, and

iOS. It features calculation, graphing tools, pivot tables, and a macro programming language
called Visual Basic for Applications.
THE FILE BUTTON:
The purple File button, located in the top left corner of your screen, replaces the Office
button found in Excel 2007.
The File button allows you to carry out:
 Saving of file
 Printing
 Opening a new and old file
 Sending a file Online
Protected View
In an effort to increase Office 2010’s security, Microsoft has instituted this feature
across all its products. Documents that are opened froman
―untrusted‖source(i.e.,aspreadsheetdownloadedfromGmailoropened from Outlook) will
appear in so-called Protected Mode. In Protected Mode, you cannot edit, print, or save files
to yourcomputer.
THE QUICK ACCESS TOOLBAR:
The Quick Accesstoolbar, which used to be located to the right of the Office button, is now
directly above the Filebutton. By default, itcontains the three most frequently used buttons:
Save, Undo, andRedo.
EXCEL TERMINOLOGY:
To understand Excel better, you should familiarize yourself withthe following terminology:
spreadsheet, workbook, andworksheet.
Spreadsheet and Workbook

A spreadsheet is a grid of data divided into numbered rows and lettered columns.
Each block in this grid is called a cell, and it can hold an individual piece of text or data. A
cell has a lettered column and numbered row. In Excel, a file/document is considered a
spreadsheet, although it is commonly referred to as aworkbook.
Worksheet
The worksheet is a page of data in your spreadsheet (or workbook) that is

organized by the labeled tabs displayed at the bottom of the Excel window. Each worksheet
14 20
has 2 (~16,000) available columns and 2 (~1 million) available rows, so Excel can
easily accommodate largedatasets.
NAVIGATING AROUND SPREADSHEET:
In order to enter data in Excel and/or create functions and formulas,you should be able to
identify the active—or selected—cell(s).
Locating an Active cell
 A thick dark border surrounds any active cell or range of cells.

 The corresponding column letter and row number will behighlighted in orange (in
the example below, the active cell is A1).
Changing Active Cell
 Using your mouse, click on acell. OR
Press Tab to move right, Shift+Tab to move left, Enter to move down and Shift+Enter
to move upward.
CREATING A BASIC SPREADSHEET:

Entering Data
 Click to select the cell where you wish to enter your data.
 Type the new data into the cell.
Editing Existing Data

 Double click on the cell and do simple deleting/cutting/coping and pasting.
 Copying and Pasting:
Cutting, copying, and pasting allow you to move your data (or copies of that data) from
its current location to another location in your spreadsheet.
Type something and select the cell or range of cell to copy data.
FORMATTING SPREADSHEET:
 Inserting Column and Rows

 Deleting Column and Rows
 Resizing Column and Rows
Can be done in Cell area of Home ribbon
Merging Cells
Especially when making headers for tables, it is often useful to merge two cells together.
Cells can be merged both vertically and horizontally. To mergecells:
 Select the cells you wish to merge together.
 Locate the Alignment area of the Home ribbon.
 Click the Merge & Center button.
Wrapping Text
 Select the cell or range of cells you wish to enable wrapping for.
 Locate the Alignment area of the Home ribbon.
 Click the Wrap Text button.
INSERTING FUNCTIONS
Calculating a Sum
 Select on the cell into which you want to enter your function.
 Type “ =sum( “
 Select the range of cells you wish to sum. A blinking dashed border will be around the
cellrange.
 Type “) “and press enter.
Function Library
 Locate the Function Library area of the Formulas ribbon.

 There are different built-in functions that can be easily used.
 Example (Maximum number among the list)

o Select on the cell into which you want to enter your function.
o Go to Function Library area of the Formulas ribbon.
o Click on Insert Function.
o Select MAXfrom the list.
o Select the range of cells from which you want to find out the maximum
number. A blinking dashed border will be around the cellrange
OR
Type the range directly from the keyboard, “ Cellx:Celly”
o Click on OK button.
Other Functions
And similarly we can find different functions there such as AVERAGE, COUNT,
IF(conditional-function), SIN, SUMIF and many others.
CONSTRUCTING YOUR OWN FORMULAS:
In addition to Excel’s built in functions, you can create custom formulas.

Guide lines for Creating Formulas
 All formulas must begin with the = symbol. Excel will not recognize your
formula as a formula without an = as the first character.
 Excel uses the following symbols as mathematical operators.
 Excel calculates your formula in the followingorder:

o From left to right
o Starts with any exponents
o Performs all operations with in parentheses.
o Then performs any multiplication and/or division
o Followed by addition and/or subtraction.
 Example:
o =10*(5-2)-18/9
o Excel will first calculate (5-2), then multiply that by 10, and then subtract the
result of 18 divided by 9.
Microsoft PowerPoint
Microsoft PowerPoint is a slide show program currently developed by Microsoft.

PowerPoint is useful for helping develop the slide-based presentation format, and is
currently one of the most commonly-used presentation programs available.
PowerPoint presentations consist of a number of individual pages or "slides". Slides may
contain text, graphics, sound, movies, and other objects, which may be arranged freely. The
presentation can be printed, displayed live on a computer, or navigated through at the
command of the presenter. For larger audiences the computer display is often projected
using a video projector.
How to create slides in PowerPoint:
Before you start, here are some terms to familiarize yourself with the tools used in
PowerPoint.
Now that you have reviewed the terms, you are ready to use the tools to create a
PowerPoint presentation.
Basic Effective PowerPoint Tools
1. When you first open PowerPoint, a new presentation will open. The default slide design is
a white background with black lettering.
2. To choose a new design background click on formatfrom the toolbar, and then select
slide design. Then simply click on the desired design.
3. Once you have selected the slide design, click in the placeholders to add the title and
subtitle of the presentation. If the PowerPoint is used to supplement a paper, then use the
title of the paper. If your paper does not have a subtitle, then you can include the names of
those who participated in the presentation.
1. Now that the title slide is complete you are ready to create the next slide. To create a
new slide, click on the inserttab from the toolbar and then select new slide. You can also
click on the new slidetab located on the right side of the formatting toolbar.
5. The new slide that appears is the default layout. This has a title placeholder and a text
placeholder. Notice that different slide layout options automatically appear in the task
pane. To choose a different layout, simply click on one of the choices.
6. Continue this process until you have completed your presentation.
7. If you need to delete a slide select editfrom the toolbar and then select delete slide. You
can also move the mouse cursor over the slide you want to delete in the slide/outlinetab.
Then right click on the slide, and select delete slide.
8. During the creation of the presentation, you can go back and forth between slides by
clicking on the slide you want to view in the slide/outlinetab.
9. To view a slide show of your presentation, select slideshowfrom the toolbar, and then
select viewshow. To move between sides, click the mouse anywhere on the screen.
These are the basic steps to completing an effective PowerPoint presentation. There
are other tools that can be used such as, inserting pictures (pictures from the internet
often have copy right restrictions), transitions between slides, and music. However,
music and sound effects are not generally acceptable for academic PowerPoint
presentations.
Keys to effective PowerPointTM Presentations
 Use no more than six words per line

 Use no more than six lines per slide
 Use no more than one topic per slide
 Use clear simple fonts, such as Arial, as they areeasier to read
 Use light colored font on dark backgrounds,or dark colored fonts on light backgrounds
 Insert a slide with a chart or graph to break up reading slides
 When considering Clipart, use quality images or none at all
 Remember copyright laws when taking an image fromthe internet
Good luck and have fun creating your next PowerPointpresentation

HTML
HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language

 A markup language is a set of markup tags
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
Tags are of two types:
 Paired Tag i-e <body></body>
 Singular Tag i-e <br>
HTML Example:
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
HTML document has two portion:
 Head Portion i-e title,metadata etc.
 Body Portion i-e content of the webpage.
HTML Page Structure :

Heading Tags:
 <h1>This is heading 1</h1>


Result:
Paragraph Tag:
The HTML <p> This is paragraph</p> tagdefines a paragraph.
Result:
Text Formatting Tags:
The HTML formatting tags formats the output of the text .
 <br> for line break

 <b></b>Defines bold text
 <u></u> underline the text

 <i></i>Defines italic text
 <small></small>Defines smaller text
 <emp></emp Defines emphasized text

 <strong></strong>
 <tt></tt> Typewriter Tag
Code:
<html>
<head>
</head>
<body>
<p>This text is <br> normal.</p>
<p><b>This text is bold</b>.</p>
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
<p>This text is normal.</p>
<p><u>This text is underline.</u></p>
<p><em>This text is emphasized</em>.</p>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
Result:
More Tags :
 <hr> Horizontal Line

 <font></font
 <basefont></basefont>
HTML Attributes :
 HTML Tags can have attributes

 Attributes provide additional information about a Tag
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
Example:
The <HR> Tag has the following Attributes:
 Align (center,left,right)
 Width
 Size
 Shade/Noshade
Code Example:
<hr width=50% align=center size=10px shade>
Result:
HTML Lists:
 Unordered list<ul></ul>
 Ordered list<ol></ol>
 Description list <dl></dl>
Unordered List:
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
Example Code:
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</body>
</html>
Example Result :
Unordered List Attributes:
 Type (disc,circle,square)
Example Code:
<ul type="circle">
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
Example Result:
Ordered List:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example Code:
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
Example Result:
Ordered List Attributes:
 Type ( 1/A/a/i/I)
Example Code:
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>C++</li>
</ol>
Example Result:
Nested List:
<ul>
<li>Chapter 1</li>
<li>Chapter 2
<ul>
<li>List</li>
<li>Tables</li>
</ul>
</li>
<li>Chapter 3</li>
</ul>
Result:
Description List:
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<dl>
<dt>C++</dt>
<dd>Object Oriented Programming Language </dd>
<dt>Javascript</dt>
<dd>Object base Programming Language</dd>
</dl>
Result:
Tables:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
Example Code:
<html>
<body>
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Result:
Table Attributes:
 Border
 Width
 Height
 Background
 Bordercolor
 Bgcolor
 Cell padding
 Cell Spacing
Example Code:
<table border="1" width=50% height=50% bordercolor=purple bgcolor=lightgrey cellpadding=2

cellspacing=2 >
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Result:
Table <TH> , <TD> and <TD> Attributes:
 Colspan
 Rowspan
 Bgcolor
 Background
 Align
 Valign
Example Code: <td colspan=2 bgcolor=grey align=center>Eve</td>
Result:
Example Code: <td rowspan=2 bgcolor=grey align=center>Steve</td>
Result:
Passive Web Pages:
Web Pages are “Read Only” .it just provides information to the user
Interactive Web Pages:
Web Pages which gives information and also accept information.
 GUI Based
Example:
Interactive Forms :
Code for the Form :
<FORM name="sendEmail" method="post" action="sendMailScriptURL">Elements of the

form</FORM>
Form Attributes :
 Name
 Method (Post/Get)
 Action
Elements of Form:
 Text Field
 Buttons
 Text Area
 Check Boxes
 Scrollable List
Single-Line Text Input Field:

<P>From: <INPUT type="text" name=“sender" size="50"></P><P>Message: <INPUT

type="text" name="message" size="50"></P>
Result:
Submit Button Input :
<INPUT type="submit" name="Submit" value="Send Email" >
Result:
“Send Email is Button”
Multi-Line Text Input Area :
<TEXTAREA name=”Message” cols=”20” rows=”10”>
Result:
Password Input Field:
<INPUT type=“password” name=“fieldName” size=“widthInCharacters”

maxlength=“limitInCharacters” value=“initialDefaultValue” >
Complete Code:
<form name="login" method="post" action="loginScript"><table><tr><td>User Name:

</td><td><input type="text" name="userName" size="10"></td></tr><tr><td>Password:
</td><td><input type="password" name="password" size="10"></td></tr><tr><td
colspan="2"><input type="checkbox" name="remember" value="remember">
Remember my user name and password<br></td></tr><tr><td colspan="2"><input
type="submit" name="login" value="Log me in"></td></tr></table></form>
Result:
Checkbox Input Element:
<INPUT type=“checkbox” name=“checkboxName” checked value=“checkedValue” >
Complete Code:

colspan="2"><input type="checkbox" name="remember" value="remember">
Remember my user name and password<br></td></tr><tr><td colspan="2"><input
type="submit" name="login" value="Log me in"></td></tr></table></form>
Result:
Radio Button Input:
<INPUT type=“radio” name=“radioButtonName” checked value=“selectedValue” >
Complete Code:

valign="top">Logging in from:</td><td><input type="radio" name="from" value="home">
Home<br><input type="radio" name="from" value="office"> Home<br><input
type="radio" name="from" value="university" checked> University </td></tr><tr><td
colspan="2" align="right"><input type="submit" name="login" value="Log me
in"></td></tr></table></form>
Result:
Select from a (Drop Down) List:

<SELECT name=“listName” size=“numberOfDisplayedChoices” multiple >
<OPTION value=“value1”> text1 </OPTION><OPTION value=“value2” selected> text2

</OPTION><OPTION value=“value3”> text2 </OPTION>
</SELECT>
Complete Code:

valign="top">Logging in from:</td><td><select size="2"
name="from"></select></td></tr><tr><td colspan="2"><input type="submit"
name="login" value="Log me in"></td></tr></table></form>
Result:
File Upload Input Element:
<INPUT type=“file” name=“buttonName” value=“nameOfSelectedFile”

enctype=“fileEncodingType” ><form name=“uploadForm” method=“post”
action=“uploadScript” <input type=“file” name=“uploadFile” enctype=“multipart/form-
data” ><input type=“submit” name=“submit” value=“Upload” ></form>
Result:
JavaScript (Client-side scripting)
Scripting:
You can create an attractive, colorful Web page just using HTML. But without some
scripting, the page will just sit there, unresponsive to user actions.
Types of scripting:
Scripts can run either on the Web server (server-side scripting) or on the user's
computer (client-side scripting).
Client-side scripting:
Client-side scripting generally refers to the class of computer programs on the web that
are executed client-side, by the user's web browser, instead of server-side (on the web server).
Languages:
The most widely used client-side scripting language is JavaScript, which was invented by
Netscape Communications.
Server-side scripting:
Server-side scripting is a technique used in web development which involves
employing scripts on a web server which produce a response customized for each user's
(client's) request to the website.
Languages:
There are a number of server-side scripting languages available, including:
 Python
 PHP
 JavaScript using Server-Side JavaScript etc.
New Concept: Client-Side Scripts
Small programs that are a part of the Web page and run on the user’s (client’s) computer. They
interact with the user to collect info or to accomplish other tasks. Once it has been collected,
they may help pass the collected info on to a server-side script We’ll use JavaScript to do client-
side scripting. However, there are many other languages that can be used for that purpose, e.g.
VBScript.
Advantage of Client-Side Scripting :
Reduced server load as it does not have to send messages to the user’s browser about missing
or incorrect data.
Disadvantages :
Client-side scripts do not work with all browsers.
Scripting Example:
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=
“if (document.sendEmail.sender.value.length < 1)
window.alert(‘Empty From field! Please correct’)”
>
Why JavaScript?
HTML is great for static Web pages; however, supports only rudimentary interactivity through
forms and hyperlinks .
JavaScript can be used (along with HTML) to develop interactive content for the Web
What is JavaScript?
A programming language specifically designed to work with Web browsers.
It is designed to be used for developing small programs – called scripts – that can be
embedded in HTML Web pages .
JavaScript:
Is an interpreted language
Supports event-driven programming
Is object-based
Object Based?
Everything that JavaScript manipulates, it treats as an object – e.g. a window or a button
An object has properties – e.g. a window has size, position, status, etc.
Properties are modified with methods – e.g. a resize a window with resizeTo(150, 200)
Not Object-Oriented!
JavaScript is not a true object-oriented language like C++ or Java It is so because it lacks two key
features: A formal inheritance mechanism Strong typing Nevertheless, it does include many key
concepts that are part of almost all objectoriented languages, and therefore is referred as an
object-based language
Object:
A named collection of properties (data,state) & methods (instructions,behavior).

PropertiesObjects may have a single or several properties A property may have one of the
following values: Number -- Text -- Boolean Array -- Functions Objects (Example: “document”
– a property of the “window” object – is an object in itself. A “document” in turn may contain a
“form” object as a property, and then that “form” may contain a “button” property, which,
once again, is an object in itself)
Referring to a Property:
Example: 1
<HTML>
<HEAD>
<TITLE>Change Property Demo # 1</TITLE>
<SCRIPT>
function changeStatus() {
window.status = “Mouse has touched the button”;
</SCRIPT>
</HEAD>
<BODY>
<H1>Change Property Demo # 1</H1>
<FORM name=“dummy” method=“” action=“”>
<INPUT type=“submit” name=“” value=“Change Status“
onMouseOver=“changeStatus()”>
</FORM></BODY></HTML>
Result:
Example 2:
One More Example:
Let us try to change the background color of the window

Types of Objects
JavaScript objects
Objects that are part of JavaScript Examples: window, document
Browser objects
Objects that contain info not about the contents of the display, but the browser itself
Examples: history, navigator User-defined object
Now we have established what we mean by objects: a named collection of properties and
methods
And that JavaScript treats everything that it manipulates as an object.
We have also learnt how to change the properties of these objects by selecting a property
and equating it to a new value.
Methods: Functions (code, instructions, behavior) associated with objects
Methods are functions associated with an object that can be used to manipulate that object
Example:
window.close()
Here “close()” is a method that has been defined for the “window” object. Its function
is to close the “window”.

A few more methods associated with the “window” object.
alert()
confirm()
prompt()
close()
open()
focus()
blur()
setTimeOut()
Lab Practical Week # 11
Data types:
There are different types of data in JavaScript

 Numbers (consist of real numbers i.e., integer & float) e.g., 2.3, -45, 2 e-3.
 Strings(It includes special characters, alphabets and numbers) e.g.,“Num1”, “Hello!”
 Boolean (It have only two values) i.e., TRUE & FALSE
 Undefined (will be define later or by execution)
Variables:
Variables are containers that hold values.

 Value of variable varies during execution code
Example:
X = 5;
X = X + 5;
New value of “X” is “10”
Declaration of Variable:
Variables are declared by the key word “var”.

Example:
var name1,name2;
var length, width;
Initializing a Variable:
After declaration we initialize some data to the variables,

Example:
name1=”Khan”;
name2=”Sameer”;
length =10.5;
width =5;
We can also initialize value during declaration
var name=”Aslam”;
JavaScript Variables are Dynamically Typed:
var sum; (After execution of 1st statement data type of sum is undefined)
sum = 43; (After execution of 2st statement, the data type )
sum=”empty”; (Here the data type changes to string)
Elements of JavaScript statements:
 Identifiers
 Operators
 Literals
 Punctuations
Identifiers:
Identifiers are the names used to refer to variables.
Rules:
 All identifiers must begin with alphabets (a-z or A-Z) or underscore “_”.
 Subsequent character can be an alphabet (a-z or A-Z) or number (0-9) or
underscore “_”.
 JavaScript keywords can’t be used as identifiers.
Example:
var num1, Num_1, _Num1;
Operators:
 Assignment Operator ( = )
Num1 = 45;
Address = “University road, Jawad tower, shop # 20”
 Arithmetic Operators ( + , - , / , * ,% )
X =( ( 5 + 5 )* (20 – 10)) /2; ( 100/2 = 50) X = 50

Y = X % 6; (50%6 = 2) Y = 2
 Comparison Operators ( >, <, >=, <= ,== , != )
A=5
B=7
(A==B) (A equals B) returns FALSE
(A > B) (A greater than B) returns FALSE
(A < B) (A less than B) returns TRUE
(A != B) ( A not equals B ) returns TRUE
 Logical Operators (AND ,OR , NOT)
o X && Y AND TRUE if both are TRUE

If ((pitch==”hard”)&&(bowler=”fast”))
Mystatus = “Pulled Muscle “;

o X || Y OR TRUE if either or both are TRUE
o !X NOT TRUE if X is FALSE
 String Operator ( + )
The “+ “ operator is used to concatenate/add two strings

Example:
Title=”bhola”+”continental”;
The value of “Title” is “bholacontinental”.
Literals:
Literal is the value given to the variables
 Numeric Literals
45, 89.55, -23,67 e-3
 String Literals
“bhola” , “continental”
 Boolean Literals
TRUE or FALSE
Punctuations:
Punctuation are the marks, such as comma, semicolons and brackets, used in writing
a JavaScript statement.
Conditional Statements:
 If statement
 If-else statement
 Multiple-if statements
 Switch statement
if Statement:
“if” is a conditional or decision making statement
General Syntax:
If (conditional expression)
{Statements ;}
Example:
var A,B;
document.write(A);
document.write(B);
if (A > B)
{window.prompt(“A is greater than B”);}
if-else Statement:
General Syntax:
{Statements ;}
else {statements;}
Example:
If (A==B)
{window.prompt(“A is equal to B”);}
else
{window.prompt(“A is not equal to B”);}
Multiple if Statements:
General Syntax:
{Statements ;}
else if{statements;}
else (statements;}
Example:
var grade,points;
document.write(grade);
if (grade = “A”) {points = 4;}
else if (grade = “B”) {points = 3;}
else if (grade = “C”) {points = 2;}
else if (grade = “D”) {points = 1;}
else {points = 0;}
window.prompt(points);
Switch Statements:
General Syntax:
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block}
Example:
var grade,points;
document.write(grade);
switch(grade) {
case “A”:points=4; break;
case “B”:points=3; break;
case “C”:points=2; break;
case “D”:points=1; break;
default:points=0;}
window.prompt(points);
Loops:
Loops in JavaScript are used to execute the same block of code a specified number of times
or while a specified condition is true.
Types:
 for
 while
 do-while
for Loop:
General Syntax:
for(initialization expression ; conditional expression ; update statement)

{statements;}
Example:
var x;
for(x=1 ; x >10 ; x=x+1)
{window.prompt(x);}
while Loop:
General Syntax:
while(conditional expression)
{statements;}
Example:
var choice=”y”;
while(choice!=”N” || choice!=”n”)
{document.write(choice);}
do-while Loop:
General Syntax:
do
{statements;}
while(conditional expression);
Example:
var i=0;
do
{window.prompt(i);
i=i+1;}
while(i<20);
Difference between while and do-while loop:
The difference between while and do-while loop is that:
 In while loop the conditional expression is above the statements.

 So first condition is checked then statements are executed.
 If the condition is false, no statement inside the loop will be executed.
 In do-while loop the conditional expression is below the statements.
 So first statements are executed then condition is checked.
 If the condition is false, the statement inside the loop will be executed at least once.
Arrays:
Array is an indexed list of elements.
Example:
var fruit[5];
fruit is identifier of the array, size of the array is 5

fruit[0],fruit[1],fruit[2],fruit[3] and fruit[4] are elements of the array.
Example:
var student1,student2,student3,student4;
document.write(student1);
window.prompt(student1);
Now the same program using array
var student[4] ,i ;
for(i=0 ; i<4 ; i=i+1)
{document.write(student[i]);}
for(i=0 ; i<4 ; i=i+1)
{window.prompt(student[i]);}
JavaScript Arrays are Heterogeneous:
Unlike many other popular languages, a JavaScript Array can hold elements of multiple data
types, simultaneously
a = new Array( 9 ) ;
b = new Array( 13 ) ;
b[ 0 ] = 23.7 ;
b[ 1 ] = “Bhola Continental Hotel” ;
The ‘length’ Property of Arrays:
d = new Array ( 5 ) ;
document.write( d.length ) ;
Array Methods:
 Sort( )
 Reverse( )
Sort( ):
Sorts the elements in alphabetical order.
Example:
x = new Array ( 4 ) ;
x[ 0 ] = “Waseem” ;
x[ 1 ] = “Waqar” ;
x[ 2 ] = “Saqlain” ;
x[ 3 ] = “Shoaib” ;
x.sort( ) ;
for ( k = 0 ; k < x.length;
k = k + 1 ) { document.write( x[ k ] + “<BR>” ) ;}
Reverse( ):
Reverses the order of the elements.
Example:
x = new Array ( 4 ) ;
x[ 0 ] = “Waseem” ;
x[ 1 ] = “Waqar” ;
x[ 2 ] = “Saqlain” ;
x[ 3 ] = “Shoaib” ;
x.reverse( ) ;
x.sort( ) ;
for ( k = 0 ; k < x.length; k = k + 1 ) { document.write( x[ k ] + “<BR>”) ; }
Program:
Function:
A group of statements that is put together (or defined) once and then can be used (by
reference) repeatedly on a Web page .Also known as subprogram, procedure, subroutine.
Example:
Advantages of Functions
 Number of lines of code is reduced

 Code becomes easier to read & understand
 Code becomes easier to maintain as changes need to be made only at a single location
instead multiple locations
Example:
Now the Above Example is Reduced to the Following Code By Functions:
Function Identifiers:
The naming rules for function identifiers are the same as were discussed for variable and array
identifiers
Arguments of a Function :
A comma-separated list of data Arguments define the interface between the function and the
rest of the Web page Arguments values are passed to the function by value (some popular
languages pass arguments ‘by reference’ as well).
Methods :
Methods are functions They are unusual in the sense that they are stored as properties of
objects
Object:
A named collection of properties (data, state) & methods (instructions, behavior)
Predefined, Top-Level or Built-In Functions:
There are many of them, but here we discuss only two:
 parseInt( ),
 parseFloat( )
parseInt( ):
General Syntax: parseInt(String)
Example:
string1 = “3.14159” ; document.write( parseInt( string1 ) ) ;
parseFloat( ):
General Syntax: parseInt(String)
Example:string1 = “3.14159” ; document.write( parseInt( string1 ) ) ;
Scope of Variable :
Defining the space in which a variable is effective is known as defining the scope of a
variable. A variable can be either local or global in scope.
Local Variables :
Local or Function-level Variable Effective only in the function in which they are declared
Global Variables:
Global Variables Visible everywhere on the Web page

ITC (Lab Manual)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ITC (Lab Manual)

Uploaded by

Copyright:

Available Formats

CS101: Introduction to Computing

Inserting an Image Saved on Your Computer:...................................................................................23

Lab Practical Week #1

Operating System (System Software)

The steps to install windows 7 operating system are as follow:

MICROSOFT OFFICE (Application Software):

Microsoft Office or Microsoft Office System is a collection of computer programs made by

 Microsoft Word ( word processor )

Lab Practical Week#2

Some of Most commonly used email addresses and service providers.

Email account sign up:

Creating account in Gmail step by step:

5. Agree to the privacy policy.

6. Click Next Step

Lab Practical Week#3

Microsoft Word (word processor)

Microsoft Word 2010 is a word-processing program, designed to help you create

To create a new blank document:

Inserting Page Numbers :

Adding Line Numbers :

Creating and Inserting Screenshots:

Checking the Spelling and Grammar of the Entire Document:

Checking the Spelling and Grammar Word-by-Word:

 Select a word or phrase that Word has marked misspelled or grammatically

Customizing Your Margins:

Turning off the AutoFormat:

Using, Formatting, and Removing Styles:

Using the AutoSave:

 Edit the options according to your preferences and Select OK.

Lab Practical Week #4

Microsoft Word ( Continued)

Adding a Cover Page:

 Select your preference. Fill in the information to suit your document.

Inserting a Page Border:

 Select the Insert tab and Select the Table option.

Inserting Clip Art:

Inserting an Image Saved on Your Computer:

 Select the Insert tab.

Lab Practical Week #5

Microsoft Excel is a spreadsheet developed by Microsoft for Microsoft Windows, Mac OS X, and

THE FILE BUTTON:

The File button allows you to carry out:

THE QUICK ACCESS TOOLBAR:

Spreadsheet and Workbook

The worksheet is a page of data in your spreadsheet (or workbook) that is

NAVIGATING AROUND SPREADSHEET:

Locating an Active cell

 A thick dark border surrounds any active cell or range of cells.

Changing Active Cell

 Using your mouse, click on acell. OR

CREATING A BASIC SPREADSHEET:

Editing Existing Data

 Inserting Column and Rows

Can be done in Cell area of Home ribbon

 Locate the Alignment area of the Home ribbon.

 Click the Merge & Center button.

 Locate the Function Library area of the Formulas ribbon.

 Example (Maximum number among the list)

CONSTRUCTING YOUR OWN FORMULAS:

In addition to Excel’s built in functions, you can create custom formulas.

Guide lines for Creating Formulas

 Excel uses the following symbols as mathematical operators.

 Excel calculates your formula in the followingorder:

Lab Practical Week #6