Lab Manual

Lab Manual
Session-2018
Semester Fall 2018
CS-101L Computing Fundamentals Lab
Department of Mechanical Engineering
University of Engineering & Technology

Lahore. (KSK Campus)
CS-101L Computing Fundamentals Lab Manual
Detailed Lab Plan:

Week Topics Student Learning
Hours
Week 1 Lab: Introduction to Computing 3
Week 2 Lab: Medium and Types of Computer 3
Week 3 Lab: Computer Organization, Hardware, Software, Device Drivers 3
Week 4 Lab: Intro to Programming and High Level, Low Level Programming 3
Languages
Week 5 Lab: MS Word 3
Week 6 Lab: MS PowerPoint 3
Week 7 Lab: MS Excel 3
Week 8 MID Term Lab Exam 3
Week 9 Lab: Introduction to Web Technologies and History of web and Internet 3
Week Lab: Introduction to HTML 3
10
Week Lab: Discussion on HTML 3
11
Week Lab: Introduction to CSS 3
12
Week Lab: Discussion on CSS 3
13
Week Lab: Discussion on HTML + CSS 3
14
Week Lab: Discussion on other Programming Languages i.e. C and C++ 3
15
Week Lab: Semester Projects: Presentation & Evaluation 3
16
1 LAB 1 (INTRODUCTION TO DOCUMENTATION TOOLS)
1.1 GOALS OF THE DAY:

 Creation of email accounts
 Familiarizing with labs submission interface
 Introduction to Microsoft Word
1.1 INTRODUCING THE WORD USER INTERFACE:

The Word user interface provides intuitive access to all the tools you need to develop a
sophisticated document tailored to the needs of your audience. When you're working with a
document, it is displayed in an app window that contains all the tools you need to add and
format content.
Figure 1: A document displayed in the app window
Identify app window elements

The Word app window contains the elements described in this section. Commands
for tasks you perform often are readily available, and even those you might use
infrequently are easy to find.
• Ribbon
• Title bar
• Status bar
1. Using the technique that is appropriate for your operating system, start Word.
2. When the Start screen appears, press the Esc key to create a new blank document.
The ribbon is located below the title bar. The commands you'll use when working with a
document are gathered together in this central location for efficiency. (Figure 2)
Figure 2: Your ribbon might display additional tabs
Across the top of the ribbon is a set of tabs. Clicking a tab displays an associated set of
commands arranged in groups. Commands related to managing Word and documents (rather
than document content) are gathered together in the Backstage view, which you display by
clicking the File tab located at the left end of the ribbon. Commands available in the
Backstage view are organized on named pages, which you display by clicking the page tabs in
the coloured left pane. You redisplay the document and the ribbon by clicking the Back arrow
located above the page tabs. (Figure 3)
On each tab, buttons representing commands
are organized into named groups. You can
point to any button to display a ScreenTip that
contains the command name, a description of
its function, and its keyboard shortcut (if it has
one) (Figure 4).
Some buttons include an arrow, which might
be integrated with or separate from the button.
To determine whether a button and its arrow
are integrated, point to the button to active it.
(Figure 5)
Maximizing and minimizing the word
interface impacts on the ribbon and title page.
You can see Figure 6 for 1024 pixels wide
screen.
Figure 3: Backstage view
To auto-hide ribbon and other customization options, click on fourth-left icon on the
extreme top-left side of word application. See Figure 8 for details. It is also called Ribbon
Display Options menu.
Figure 5: Examples of buttons with separate

and integrated arrows
Figure 4: ScreenTips can include the

command name, keyboard shortcut, and
description
Figure 6: At 1024 pixels wide, most button labels are visible
Figure 7 You can specify which items to display in status bar
Figure 8: Ribbon display options menu
Figure 9: The title bar elements are always on the left end, in the centre, and on the right end
of the title bar
At the top of the app window, title bar displays the name of the active file, identifies the
app, and provides tools for managing the app window, ribbon, and content. (Figure 9)
The Quick Access Toolbar at the left end of the title bar can be customized to include any
commands that you want to have easily available. The default Quick Access Toolbar in the
Word app window displays the Save, Undo, and Redo/Repeat buttons. On a touchscreen
device, the default Quick Access Toolbar also includes the Touch/Mouse Mode button.
(Figure 9).
Across the bottom of the app window, the /status bar displays information about the current
document and provides access to certain Word functions. You can choose which statistics and
tools appear on the
/status bar. Some items, such as Document Updates Available, appear on the /status bar
only when that condition is true. (Figure 7)
The View Shortcuts toolbar, Zoom Slider tool, and Zoom button are at the right end of the
/status bar. These tools provide you with convenient methods for changing the display of
document content. (Figure 10).
Figure 10: You can display different content views and change the magnification from the
status bar
1. Right-click the status bar to display the Customize status Bar menu. A check
mark indicates each item that is currently enabled.
2. Click to enable or disable a status bar indicator or tool. The change is
affected immediately. The menu remains open to permit multiple selections.
3. When you finish, click away from the menu to close it.
1.2 CREATE AND MANAGE DOCUMENTS:

You can use Word 2016 to create many different types of documents, for many different
purposes. Word is widely used in schools, businesses, and organizations of many kinds to
create letters, newsletters, reports, resumes, and other documents that contain text. Word
provides a lot of flexibility in document design, so you can also create documents that
contain images and content that doesn’t fit a standard sheet of paper, such as trifold
brochures, greeting cards, business cards, certificates, and signs.
2.2.1 Create documents:

When creating a document in Word, you can create a blank document of the default file
type or create a document based on one of the templates provided with Word. Each
template incorporates specific design elements such as fonts and colours. Many templates
also include typical information that you can modify or build on to create a useful
document. (Figure 11)
When you base a new document on a template, that template is said to be attached to the
document. The styles defined in the attached template appear in the Styles pane so that you
can easily apply them to any content you add to the document. You can change the
document template by attaching a different one.
Formatting: Most templates contain formatting information, which in addition to styles can
include page layout settings, backgrounds, themes, and other types of formatting. A
template that contains only formatting defines the look of the document; you add your own
content.
Building blocks: Some templates make custom building blocks, such as headers and
footers or a cover page, available for use with a document. They might also include
AutoText, such as contact information or standard copyright or privacy paragraphs.
Custom tabs, commands, and macros: Sophisticated templates might include custom
ribbon tabs or toolbars with commands and macros that are specific to the purposes of the
template. A macro is a recorded series of commands that permits a user to perform a
process with the click of a button. The topic of macros is beyond the scope of this book; for
information, refer to Word Help.
Figure 11: The Start screen appears by default
Figure 12: Templates Figure 13: Templates

(Category search)
2.2.2 Writing text in Word using Tabs:

File tab: File menu has many important features which includes save which is used to save
documents, open used to open saved documents, new used to open new blank document and
print used to print documents.
Insert tab: It has many options like inserting table, pictures, smart art, charts, header and
footer.
Home tab: It is used to change the appearance of text. It can make text bold, italics and
underlined. It is also used to change the colour spacing and alignment of text.
Design tab: It contains command related to changing the overall appearance of a document
such as page borders, page colours and watermark etc.
Exiting Ms Word:
You can exit word by clicking the close button in the upper right corner of title bar. Or by
selecting file menu and click on close option.
You can use options explained in Figure 14 and Figure 15 for applying fonts, colours and
text effects on your writing. You can also use shortcut keys for quick tasking. For
example, for saving a document press Ctrl key with S key. (Figure 16)
Figure 14: Font-group and text effects

Figure 15: Alignment options
Ctrl+P Printing a document

Ctrl+V Paste
Ctrl+X CUT
Ctrl+C Copy
Ctrl+Z Undo an action
Ctrl+Y Redo an action
Ctrl+S Saving a document
Figure 16: Widely used
short-cut keys
2 LAB TASKS (TO BE PERFORMED IN LAB)

Steps:
1. Start Ms Word from the start button as mentioned above. And open new document by
clicking on new option and selecting blank document. (Figure 18)
2. Start typing in the blank working area according to the given format.
3. Appearance of document can be changed. You can make the heading bold, italics and
underlined. Select the text you want to format. On the Home tab from the font group, font
size and style can be changed. (Figure 19)
4. Font size can be changed by clicking the font size arrow and selecting the desired font.
(Fig 20)
5. Font style can be changed by clicking the font arrow and selecting the desired one.
(Figure 17)
6. Change Indentation and alignment of the text if needed. The text in the application can be
left, right, centre and justify. Indention of the paragraph can be increased or decreased.
All this can be done from Home tab in the paragraph group. (Figure 21)
7. After all the formatting, document can be saved. To save a document click on File tab and
then select Save As. Click on the browse button. (Figure 22 and Figure 23)
8. The save as dialog appears. Enter the name of the file in the bar next to File Name. And
in the Save As Type box enter the format in which you want to save the file. Then press
OK, file will be saved.
Sample
2.1 WRITE AN APPLICATION TO THE CHAIRMAN OF DEPARTMENT FOR THE

CHANGE IN DISCIPLINE.
Figure 19: Font group
Figure 17: Changing font
Figure 20: Changing font
Figure 18: New document
Figure 21: Paragraph group

Figure 22: Saving a document Figure 23: Saving your file

2.2 CREATE A POSTER FOR SPORTS GALA FOR CS &E DEPARTMENT UET.
1. Open a new blank Word document.
2. Set the paper width and height to 22” by 22’’. For this click on the layout tab and select
size. From drop-down list select more paper sizes. (Figure 24)
3. Page Setup dialog box appears. Change the width and height to 22’’ and click OK. (Figure
25)
4. First, insert the picture related to the given topic. Click Insert tab and select pictures
options. (Figure 26)
5. Insert pictures dialog box appears. Select the desired picture you want to insert and then
click insert. (Figure 28)
6. To format the picture, select the picture and then select Format Picture from drop-down
list. (Figure 27)
7. Format picture pane appears, which helps to crop the picture, changing picture colours,
applying 3-D rotation and many more. (Figure 30)
8. Text can be inserted by selecting the picture and then select wrap text option from the
drop-down list or from the layout options. (Figure 29)
9. Text colours can be changed from the theme colours available in Font group from Home
tab. (Figure 31)
10. Text highlight colour and text effects can also be applied from the font group. (Fig 32)
11. On Insert tab, click on arrow and select desired Word Art. (Figure 34)
12. Colour of background can also be changed. Go to Design tab and select Page Colour and
change the colour to the desired one.
13. Check the print preview of the poster. To do this, select the File tab and then select Print
option (Figure 35)
14. After checking the print preview, save the poster with desired name. (Figure 36)
Sample
Figure 25: Page setup dialog box
Figure 24: Paper types in Word
Figure 26: Insert pictures

Figure 28: Insert picture dialog box
Figure 27: Format picture option
Figure 29: Wrap text options Figure 30: Formatting options

Figure 31: Font color palette
Figure 32: Text

effects
Figure 33: Text highlighting colour palette
Figure 34: Word art

Figure 35: Checking print preview

Figure 36: Print preview of document
Figure 37: Symbols
Figure 38: Symbols dialog box
Figure 39: Education information table

2.3 CREATE A BIO DATA FORM AND FILL IT.
1. Open a New blank Word document. Set the paper size to letter and start creating form
according to given specimen.
2. Insert picture in the form (UET logo) and select “in line with text’’ from the wrap
text option and add text.
3. Start entering text in the form. Shapes will be inserted in the form. To insert shapes in the
form, select the insert tab and in the illustrations group, click on the shapes option and
select the desired shape.
4. In this form, we have used rectangle shape to insert picture and symbols and line shape to
underline the text.
5. Symbols must be inserted in the form. To do this select the insert tab and in the symbols,
group click on the symbol button. (Figure 37)
6. To view all symbols, click on the ‘’more symbols’’ options. Symbols dialog box appears.
And select the tick symbol which is used in the form in this assignment. (Figure 37 and 38)
7. Also, add your education in table. Go to insert tab and click on table. Hover the mouse
over the grid and decide how many columns and rows you want. When decided, click on
it. Add headings in first row and data in other rows. (Figure 39)
8. After completing the form, fill the form with appropriate information and save it.
2.4 CREATE REFERENCES IN IEEE FORMAT

Write a paragraph in Word of 1000 words on any topic you like and read information from
at least 5 websites, book, research paper or any document available on internet. Add these 5
references using references tab in word and make sure it appears in the end.
1. On the References tab, in the Citations & Bibliography group, click the arrow next
to Style and select IEEE.
2. Then, click on manage sources button. Source manager dialog box will appear.
(Figure 40)
3. Click on New and the following box will appear. (Figure 41)
4. Select the type of source. Enter all the specifications and click OK.
5. Similarly, to create more references again click on new option and select the source
type and fill all the specifications.
6. After completing all the references, click on close option.
7. After doing that, click on arrow next to BIBLIOGRAPHY and select REFERENCES
from the dropdown menu. (Figure 42 and 43)
8. References will appear on the document.
Figure 40: Manage resources
Figure 41: Create source dialog box
Figure 42: Bibliography

Figure 43: Design option for references
2 INSTRUCTIONS
 Question1 is mandatory to be completed in lab.
 Rest of the questions will be homework and will be evaluated in coming labs.
 Cheating or plagiarism will result in 0 for both the copier and one who allows his/her
to get copied.
 Bring printed versions of your submitted homework tasks in next lab. Viva will
also be conducted.
 Soft copies (e-copy) of your work will be submitted via email. (Already
explained in class).
 Email your queries to zramzan@uet.edu.pk.
PowerPoint Exercise
This exercise will help you explore some creative, and less standard, ways of using
PowerPoint to create an interactive presentation. Read through the instructions on the
following pages for an idea of some of the things you can do with this program. For this
exercise, you will create a PowerPoint slide show that includes the following six slides (Item
numbers from the following instructions are included in parentheses to help you create each
slide.)
1. A “homepage” slide with a title and links or buttons to each of your other five pages. (see #
1, 2, 7, 8, 20, 22, 23)
2. A slide that uses arrows (and/or circles) and text to label different aspects of a photograph
or graphic image. (see # 4, 8, 9, 10, 11)
3. A slide that uses no words but is an image collage that builds itself automatically. (In other
words, images appear on the page one-at-a-time, automatically timed, to create one large
collage). (see # 16, 19)
4. A slide that has a bulleted list of items that are animated so that the items appear on the
page one-at-a-time. Set it up so that each item dims as the next item appears. (see # 1, 18)
5. A slide that uses a sound effect that is integrally tied to the information on the page (either
as an auditory example of something you are talking about, or as an element that helps to
create the context for what you are talking about – for example, birds singing as you talk
about the rain forest.) (see # 25, 26)
6. A slide that links to a web page. (see # 21, 22, 23)
NOTE: Rather than using one of the standard design templates that comes with PowerPoint, this
exercise has you designing your own color scheme and slide layout.
ANOTHER NOTE: Be sure that all sound files are saved in a folder with your PowerPoint
presentation. (This does not include sound effects added from PowerPoint; only sound files that
you have inserted from the Web or from your own computer). (see #25 for instructions)
In the Mac Lab, PowerPoint is on your Dock under Microsoft Office (with Word). Double-click to
open it, then select PowerPoint presentation and click OK.
Using PowerPoint
1. To change your slide layout

From the Format menu, choose Slide Layout
Select the option you desire for your slide layout and click OK
2. To change your background color

From the Format menu, choose Slide Background
Click on the arrow next to the colored (or white) bar to view options
Select a color from the initial choices, from More Colors, or from Fill Effects
When satisfied, Click OK, then select Apply to change the background on one slide
OR select Apply to All to change the background on all slides in your program.
3. To make design changes that will apply to ALL slides

From the View menu, choose Master > Slide Master
To change fonts or text styles, click on the text box you wish to change, then make changes
using the Font toolbar
When satisfied, from the View menu, choose Normal
You are now ready to enter your information
4. To create new slides

From the Insert menu, choose New Slide
If desired, change the layout following the instructions in Step 1.
Continue until you have the basic layout for your slide show.
5. To view all of your slides in a storyboard format

Click on View, then Slide Sorter
Click on View, then Normal to return to your design view
6. To move text elements

Click on the words, then click and drag the edge of the box to a new location.
7. To change typeface
Click and drag to highlight the words, then use the text tools to change formatting.
8. To create a new text box

Click on the Text tool on the Drawing Toolbar, circled below (box with A in it on PC)
Click and drag on the slide to create a rectangle

Simply type to enter words in the space
Note: you may also type in any shape you create.
Note2: sometimes the Drawing toolbar is arranged vertically on the left side of the screen.
9. To add lines or shapes

Click on the appropriate tool on the drawing toolbar. (diagonal line, square, or try some fun
auto shapes)
Click and drag to create a shape or line.

(Note: If the drawing toolbar is not visible, from the View menu, choose Toolbars, then
select Drawing.)
10. To change line weight

Click on the line to select it
From the Format menu, choose Colors and Lines (or use the lines on the drawing toolbar)
Select the line size and color you desire, then click OK
11. To move overlapping elements to the front or back

Click on the element to select it
Click on the arrow next to Draw on the Drawing toolbar (circled below)
Select Arrange
Select Send to Back or Bring to Front
12. To fill (or unfill) a shape

Click on the shape to select it
Click on the arrow next to the paintbucket on the toolbar to turn the fill on or off
13. To change fill color

From the Format menu, choose Colors and Lines
Change the Fill color to the desired color
OR click on the arrow next to the paintbucket and change the color
14. To add shadows to text

Highlight the text you wish to shadow
From the text toolbar, click the icon showing a shadowed S
It will automatically add a shadow in the color you chose in your color scheme
15. To add shadows to shapes

Highlight the element you wish to shadow
Click on the arrow at the end of the drawing toolbar (circled below)
Select the type of shadow you want

Click the icon showing a shadowed square
It will automatically add a shadow in the color you chose in your color scheme
Click on the icon showing a shadowed square again
Choose Shadow Settings to nudge your shadow up or down, right or left
16. To add images from a file

From the Insert Menu, choose Picture, then From File
Locate the file you wish to insert
Click Insert
17. To add clipart

From the Insert Menu, choose Picture, then Clipart
Select the picture you want and click Insert
Move it to the location you want it in and resize it, if desired
OR, if you chose a slide layout with a box for clipart, simply double click on the square
to access clip art files
18. To have lists appear one line at a time

Create a slide with a numbered or bulleted list
Select the text in your list
From the Slide Show menu, choose Preset Animations
Select a transition
From the Slide Show menu, select Animation Preview to view the results
OR from the Slide Show menu, select Custom Animation

From the list (top left corner of pop-up box), select the text you want to animate
Click The Add Effect button
Choose the entrance effect you want and click OK
In the Start box, choose On Click to make each item appear on the click of the mouse
 Choose With Previous to make items appear simultaneously with the previous action
 Choose After Previous to make each item appear after the previous action is complete
In the Speed box, adjust the speed at which your items will appear
Click on the Effect Options button
Click on the arrow next to the Sound button to select a sound effect (use carefully!)
To Dim text when the next item appears:
Click on the arrow next to After Animation to choose a color that text will Dim to
When satisfied, click OK (then OK again)
To view results, view in the Slide Show mode.
19. To have pictures appear one at a time

Follow instructions in step 18, but choose pictures instead of text
Set the animation preferences for each picture individually, in the order they will appear
Set the Timing so that each picture animates After Previous (instead of “on click”)
20. To turn text into a hyperlink to link to other slides

Highlight the text you want to be able to click on
From the Insert menu, choose Hyperlink
In the center of the pop-up screen, click on the “Document” button
Next to the Anchor box, click on the Locate button
Choose one of the options, or click the arrow next to Slide Titles and choose a slide
Click OK, then OK again (your text will become an underlined hyperlink)
NOTE: the link will only work when in the SlideShow mode
21. To turn text into a hyperlink to link to a webpage
Highlight the text you want to be able to click on
From the Insert menu, choose Hyperlink
In the center of the pop-up screen, click on the “Web Page” button
In the “Link To” box at top of screen, type/paste the website URL (starting with http://)
Click OK (your text will become an underlined hyperlink)
NOTE: the link will only work when in the Slide Show mode
22. To add a button that links to another page or website

From the Slide Show menu, choose Action Buttons
Click on the button style you want
With your cursor, drag a small square or rectangle on your slide
In the box that pops up, click the button next to “Hyperlink to”
Click the arrow next to the “Hyperlink to” box and drag down to choose a slide
Choose “Slide” to select specific slides in your presentation
OR drag down and choose URL > then type the complete web address in the box
Click OK
To change the color of your button, click the arrow next to the paint bucket on the Drawing
toolbar.
Select the color you want
23. To turn graphics or other elements into active links

Click on the graphic or element you want to turn into a link
From the Slide Show menu, choose Action settings
In the box that pops up, click the button next to “Hyperlink to”
Click the arrow next to “Hyperlink to” and drag down to choose a slide
OR drag down and choose URL > then type the web address in the box
Click OK
24. To add a movie

From the Insert Menu, choose Movies and Sounds > Movie from File
Locate your movie in your PowerPoint folder (see NOTE under Item 25)
NOTE: your movie must have been saved as a QuickTime movie (.mov)
Select your movie and click Choose
Choose yes or no to the option to have your movie play automatically when the slide opens
Click and drag your movie to the location you want it on the slide
NOTE: don’t make your movie larger or it will become fuzzy
A movie toolbar will appear. Using this toolbar you may:
 Preview your movie
 Select a frame to show before the movie starts playing
 Add a border to your movie
NOTE: If you did not choose to have your movie play automatically, you must click on
your movie to start it playing during your slide show. Make sure you wait for the hand to
show before you click or it will simply move to the next slide.
25. To find a sound on the Internet

Try one of the following websites:
http://www.findsounds.com/
http://www.stonewashed.net/sfx.html
http://www.sounddogs.com/start.asp (click on Sound Effects in left column)
Or simply do a Google search for free sound effects
When you locate a sound you would like to use, Control-click on the link
Choose Save Target As
Save the file to your PowerPoint folder
Formats supported by PowerPoint include: WAV, MP3, AIF, AIFF, MIDI, MID, MOV
NOTE: you must save both your PowerPoint and your sound files in the same folder
To create a new folder for both, click your mouse on the Desktop
From the File menu, choose New > Folder
An untitled folder will appear on the Desktop
Click on the name to rename the folder
Put your sound files and your PowerPoint presentation in this folder
OR When your slideshow is complete, save it as a PowerPoint Package
File>Save As, then change the Format from PowerPoint presentation to
PowerPoint Package
This will automatically generate a folder with all necessary files included
26. To add a sound to your slide show

From the Insert Menu, choose Movies and Sounds > Sound from File
Locate your sound in your PowerPoint folder, and click Insert
Click Yes if you want your sound to play automatically when the slide opens
Click No if you want the sound to play when you click on it
Drag the sound icon to an unobtrusive place on the slide
The sound will only play in the Slide Show mode
27. To add a transition between slides

From the Slide Show menu, choose Slide Transition
Change the Effect from “No transition” to one of the choices
Change the speed, if desired
Click Apply (for the current slide) or Apply to All (to change all transitions in slide show)
28. To make slides advance automatically

From the Slide Show, choose Slide Transition
In the Advance box, select Automatically After
Type in the number of seconds you wish to wait
Click Apply (for the current slide) or Apply to All (to change all transitions in slide show)
29. To view your slide show

From the View menu, choose Slide Show

OR from the Slide Show menu, choose View Show
With the mouse, click through the entire show
PowerPoint
PowerPoint is a presentation software package. With PowerPoint, you can easily create slide
shows.
 The Microsoft Office Button

 The Quick Access Toolbar
 The Title Bar
 The Ribbon
 Rulers
 Slides, Placeholders, and Notes
 Status Bar, Tabs, View Buttons, and More
 Create a Title Slide
 Create New Slides
 Make Changes to Your Slides
 Apply a Theme
 Run Your PowerPoint Slide Show
The PowerPoint Window
The Microsoft Office Button
In the upper-left corner is the Microsoft Office button. When you click the button, a menu
appears. You can use the menu to create a new file, open an existing file, save a file, and perform
many other tasks.
The Quick Access Toolbar

Next to the Microsoft Office button is the Quick Access toolbar. The Quick Access toolbar
provides you with access to commands you frequently use.
The Title Bar
The Title bar is located at the top in the center of the PowerPoint window. The Title bar displays
the name of the presentation on which you are currently working.
The Ribbon
1 Tabs
2 Command Group
3 Command Buttons
4 Launcher
You use the Ribbon to issue commands. The Ribbon is located near the top of the PowerPoint
window, below the Quick Access toolbar.
Rulers
Rulers are vertical and horizontal guides. You use them to determine where you want to place an
object. If the rulers do not display in your PowerPoint window:
1. Click the View tab.

2. Click Ruler in the Show/Hide group. The rulers appear.
Slides, Placeholders, and Notes

1 Slide
2 Placeholders
3 Notes
Slides appear in the center of the window. You create your presentation on slides.
Placeholders hold the objects in your slide. You can use placeholders to hold text, clip art, charts,
and more.
You can use the notes area to creates notes to yourself. You can refer to these notes as you give
your presentation.
Status Bar, Tabs, View Buttons, and More

Status Bar 6 Vertical & Horizontal

1 Splitter Bars
2 Outline Tab 7 Minimize Button
3 Slides Tab 8 Maximize/Restore
Button
4 View Buttons 9 Close Button
5 Zoom
The Status bar generally appears at the bottom of the window. The Status bar displays the
number of the slide that is currently displayed, the total number of slides, and the name of the
design template in use or the name of the background.
The Outline tab displays the text contained in your presentation. The Slides tab displays a
thumbnail of all your slides. You click the thumbnail to view the slide in the Slide pane.
The View buttons appear near the bottom of the screen. You use the View buttons to change
between Normal view, Slider Sorter view, and the Slide Show view.
Normal View
Normal view splits your screen into three major sections: the Outline and Slides tabs, the
Slide pane, and the Notes area.

Slide Sorter View
Slide Sorter view shows thumbnails of all your slides. In Slide Sorter view, you can
easily add, delete, or change their order of your slides.
Slide Show
Use the Slide Show view when you want to view your slides, as they will look in your
final presentation. When in Slide Show view:
Esc Returns you to the view you were using previously.
Left- Moves you to the next slide or animation effect.

clicking When you reach the last slide, you automatically
return to your previous view.
Right- Opens a pop-up menu. You can use this menu to

clicking navigate the slides, add speaker notes, select a pointer,
and mark your presentation.
Zoom allows you to zoom in and zoom out on the window. Zooming in
makes the window larger so you focus in on an object. Zooming out makes the window smaller
so you can see the entire window.
You can click and drag the vertical and horizontal splitter bars to change the size of your panes.
You use the Minimize button to remove a window from view. While a window is minimized,
its title appears on the taskbar. You click the Maximize button to cause a window to fill the
screen. After you maximize a window, clicking the Restore button returns the window to its
former smaller size. You click the Close button to exit the window and close the program.
Creating Your First PowerPoint Presentation
You create your PowerPoint presentation on slides. You use layouts to organize the content on
each slide. PowerPoint has several slide layouts from which to choose.
Themes are sets of colors, fonts, and special effects. Backgrounds add a colored background to
your slides. You can add themes and backgrounds to your slides.
Create a Title Slide
When you start PowerPoint, PowerPoint displays the title slide in the Slide pane. You can type
the title of your presentation and a subtitle on this slide. To enter text:
 Click and type the title of your presentation in the "Click to add title" area.
 Click and type a subtitle in the "Click to add subtitle" area.
If you do not wish to use the title slide, click the Delete Slide button in the Slides group on the
Home tab.
Create a Title Slide

1. Open PowerPoint. You are presented with a title slide.
2. Enter the information shown here. Type College Scholarships and Financial Aid in the
Click to Add Title text box. Type Paying for College in the Click to Add Subtitle text
box.
Create New Slides
After completing your title slide, you can create additional slides. To create a new slide:
1. Choose the Home tab.
2. Click the New Slide button in the Slides group. The Office Theme dialog box
appears and displays several layout templates.
3. Click the layout you want. The layout appears in the Slide pane of the
PowerPoint window.
3. To add text, click inside the placeholder and type.

4. To add an additional slide to your presentation, do one of the following:
Right-click the slide layout. A menu appears. Click Layout and then click the layout you
want.
Choose the Home tab, click the New Slide button , and then choose the slide
layout you want.
Create New Slides

appears.
3. Click the Title and Content Layout. The slide appears on the Slides tab.
4. Enter the information shown here. Type Here is what to do: (including the colon) in the
Click to Add Title text box. Type the bulleted text in the Content text box.
Create an Outline
If you need to present the information in your slide in outline form, you can easily create an
outline by using the Increase List Level button to create a hierarchy.
appears.
3. Click the Title and Content layout.
4. Enter the information shown here. Click the Increase List Level button in the
Paragraph group to indent the bullets for Stafford Loans and PLUS Loans.
If you ever need to decrease an indent, use the Decrease List Level button in the
Praragraph group.
Use Two-Column Text
You can also place text in two separate columns.
appears.
3. Click the Two Content layout.
4. Enter the information shown here.

Make Changes to Your Slides
After creating a slide, if you want to add text:
1. Place the mouse pointer at the point at which you would like to add text.
2. Type the information you want to add.
If you would like to change text:
1. Select the text you want to change.

2. Type the new text.
You can use the Backspace key to delete text. You can also delete text by highlighting the text
and pressing the Delete key.
Apply a Theme
A theme is a set of colors, fonts, and special effects. Themes provide attractive backgrounds for
your PowerPoint slides.
To apply a theme to all of the slides in your presentation:
1. Choose the Design tab.

2. Click the More button in the Themes group.
3. Click the design you want.
To apply a theme to selected slides:
1. Click the Slides tab, located on the left side of the window.
2. Hold down the Ctrl key and then click to select the slides to which you want to apply a
theme.

5. Right-click the theme you want to apply. A menu appears.
6. Click Apply to Selected Slides. Excel applies the theme to the slides you selected.
You can add a dramatic effect to your theme by applying a background.

2. Click the Background Styles button .
3. Click the background you want.
Apply a Theme

3. Click the theme you want. PowerPoint applies the theme to all of the slides in your
presentation.
Add a Background

2. Click the Background Styles button .
3. Click the background you want. PowerPoint applies the background to your slides.
Run Your PowerPoint Slide Show

After you create your slides, you can run your slide show:
1. Do any one of thefollowing:
o Press F5.
o Choose the Slide Show tab. Click the From Beginning button in the Start
Slide Show group.
o Click the Slide Show icon in the bottom-right corner of your screen.
Your slide show appears on your screen.
Run Your Slide Show

1. Press F5 to run the slide show.
2. Use the arrow keys on your keyboard to move forward and backward through your slides.
3. Use the Esc key to return to Normal view.

Navigating the Slide Show
Task Procedure
Go to the next slide. Do one of the following:
 Press the Right Arrow

key.
 Press the Enter key.
 Press the Page Down
key.
 Left-click the slide.

Go to the previous slide. Do one of the following:
 Press the Left Arrow

key.
 Press the Backspace
key.
 Press the Page Up key.

Press the Esc key.
End the slide show and return to
PowerPoint.
The PowerPoint Window
PowerPoint is a presentation software package. With PowerPoint, you can easily create slide
shows.
Animations, Transitions, Spell Check, Outline Tab, Slides Tab, Sorter View, and Printing
Animations control how objects move onto, off of, and around your slides. Transitions control
how your presentation moves from one slide to the next.
Add Animations
You can animate the objects on your PowerPoint slides. PowerPoint provides four types of
animations: Entrance, Emphasis, Exit, and Motion Paths. An Entrance animation determines the
manner in which an object appears on a slide; for example, an object can move onto a slide. An
Emphasis animation does something to draw attention to an object; for example, the object can
become larger. An Exit animation determines the manner in which an object leaves a slide; for
example, an object can move off a slide. A Motion Paths animation determines how an object
moves around a slide; for example, an object can move from left to right.
If the Auto Preview box is checked on the Custom Animation pane, PowerPoint provides you
with preview of your animation after you create it and each time you modify it. You can also use
the Play button on the Custom Animation pane to preview an animation.
To choose an effect:
1. Select the object you want to animate.

2. Choose the Animations tab.
3. Click the Custom Animation button . The Custom Animation

pane appears.
4. Click the Add Effect button . A menu appears.

5. Choose the type of effect you want. A submenu appears.
6. Click the effect you want. PowerPoint applies the effect.
To modify an effect:
1. Click the down arrow next to the Start field on the Custom Animations pane and then
select the start method you want.
2. Click the down arrow next to the Property field on the Custom Animations pane and
the select the property you want. The Property field might be labeled Direction,
Size, or some other property.
3. Click the down arrow next to the Speed field on the Custom Animations pane and then
select the speed you want to apply to your animation.
To preview the animation, click the Play button on the Custom Animations pane.
Add an Animation to a Slide
1. Click Slide 2 on the Slides tab.

2. Select "Start saving early."
4. Click the Custom Animation button . The Custom Animation

pane appears.

6. Choose Entrance. A submenu appears.
7. Click Fly In. PowerPoint applies the effect. If the Auto preview box is checked,
PowerPoint automatically provides you with a preview of the animation.
Modify the Effect
1. Click the down arrow next to the Start field and then select After Previous.
2. Click the down arrow next to the Direction field and then select From Bottom.
3. Click the down arrow next to the Speed field and then select Medium.
Add Another Animation
1. Select "Apply for financial aid."

3. Choose Entrance. A submenu appears.
4. Click Fly In. PowerPoint applies the effect. If the Auto preview box is checked, PowerPoint
automatically provides you with a preview of theanimation.
Modify the Animation
1. Click the down arrow next to the Start field and then select After Previous. The Apply
for Financial Aid field appears in the center of the Custom Animation pane.
2. Click the down arrow next to the Apply for Financial Aid field and then click Timing.
The Fly In dialog box appears.
3. Type 0.05 in the Delay text box.

4. Click OK.
5. Click the down arrow next to the Direction field and then select From Bottom.
6. Click the down arrow next to the Speed field and then select Medium. If the Auto
preview box is checked, PowerPoint automatically provides you with a
preview of the animation. You can click the Play button on the Custom
Animation pane at anytime to preview an animation.
Add Transitions
Transitions determine how your presentations move from one slide to the next. For example, a
slide can move up onto the screen and replace the previous slide. PowerPoint provides several
transition methods. You can add sound to a transition and you can control its speed. You can
apply a transition to selected slides or to all of the slides in your presentation.
A transition can occur when the presenter clicks the mouse or after the amount of time you
specify.
To apply a transition to selected slides:
1. On the Slides tab, hold down the Ctrl key and then click the slides to which you want
to apply the transition.
3. Click the More button in the Transition to this Slide group. A menu of
transitions appears.
4. Click the transition you want to apply. PowerPoint applies the transition. As you roll your
pointer over each transition, PowerPoint provides you with a live preview of the
transition.
To apply a transition to all slides:

3. Click the transition you want to apply. As you roll your pointer over each transition,
PowerPoint provides you with a live preview of the transition.
4. Click the Apply to All button in the Transition to This Slide group.
To add a sound to a transition:

2. Click the down arrow next to the Transition Sound field and then click the sound you
want. As you roll your pointer over each sound, PowerPoint plays the sound.
To set the speed of a transition:

2. Click the down arrow next to the Transition Speed field and then click the speed you want.
Add Transitions

s
3. Click the Push Up transition. As you roll your pointer over each transition,
PowerPoint provides you with a live preview of the transition.
Add Sound and Set the Speed
1. Click the down arrow next to the Transition Sound field and then click Click.
2. Click the down arrow next to the Transition Speed field and then click Slow.
Advance Slide
1. Check the On Mouse Click check box.

2. Click the Automatically After check box.
3. Type 00:07 in the Automatically After text box.
4. Click the Apply to All button . PowerPoint applies all of your

changes to all of the slides.
5. Click Slide 1 on the Slides tab.
6. Type 00:03 in the Automatically After text box. PowerPoint changes the timing for
Slide 1.
Spell Check
PowerPoint checks your spelling as you type and displays errors with a red wavy line under the
misspelled word. You can right-click and then select the correct spelling from the list of offerings
on the menu that appears or select Spelling to open the Spelling dialog box. If you need to, you
can initiate a spell check anytime you like. To start a spell check, do one of the following:
 Press F7.
 Choose the Review tab and then click the Spelling button .
If the spell check finds a possible spelling error, the Spelling dialog box opens with the spelling
error highlighted. You can respond in several ways.
Response Procedure
Do not change spelling. Click Ignore.
Correct spelling. 1. Click the correct spelling in

the Suggestions box.
2. Click Change.
Add to dictionary. Click Add.
Word is correct. Do not Click IgnoreAll.

change presentation.
Word is incorrect. Change entire Click Change All.

presentation.
Spell Check
1. Press F7
2. Correct any spelling errors PowerPoint finds. If PowerPoint doesnot find any errors, the
Spelling Check is Complete message box appears. Click OK.
Use the Outline and Slides Tabs

By default, the Outline and Slides tabs are located on the left side of your PowerPoint window.
The Outline tab displays the text contained in your presentation. The Slides tab displays a
thumbnail of all your slides. You click the thumbnail to view the slide in the Slide pane.
Use the Outline and Slides Tabs
1. Choose the Slides tab to view thumbnails of your slides.

2. Choose the Outline tab to view the text of your presentation as an outline.
Use Slide Sorter View

After you have created your PowerPoint slides, you can move, cut, copy, paste, duplicate,
navigate, and view them in Sorter view. To view the slides in Sorter view, do one of the
following:
 Choose the View tab and then click the Slide Sorter button in the
Presentation Views group.
 Click the Slide Sorter button in the bottom-right corner of the PowerPoint window.
Slide Sorter View
Task Procedure
Move to first slide. Use Ctrl+Home.
Move to last slide. Use Ctrl+End.
Move to next slide. Use the right arrow.
Move to previous slide. Use the left arrow.
Select a slide. Single-click the slide.
Open a slide in Normal view. Double-click the slide.
Select a single slide:

Select slides.
1. Click the slide you want to
select.
Select multiple slides:
1. Hold down the Ctrl key.
2. Click the slides you want to

select.
1. Select the slide or slides

Delete a slide.
Slide Sorter View
Task Procedure
you want to delete.
2. Press the Delete key.

you want to delete.
2. Choose the Home tab and

then click the Delete button
.
1. Select the slide.

Copy a slide.
3. Click the Copy button

in the Clipboard group.
1. Select the slide.
2. Press Ctrl+C.
1. Select the slide after which

Paste a slide. you want the new slide or
slides to appear.
3. Click the Paste button in

the Clipboard group.
1. Select the slide after which

you want the new slide or
slides to appear.
2. Press Ctrl+V.
1. Select the slide or slides you
Cut a slide. want to cut.
Slide Sorter View
Task Procedure
3. Click the Cut button in

the Clipboard group.
you want to cut.
2. Press Ctrl+X.
1. Select the slide (or

Move a slide. slides) you want to
move.
2. Drag it to the new

location.
1. Select the slide (or
Duplicate a slide. slides) you want to
duplicate.
2. Press Ctrl+D.
EXERCISE 5
Use Slide Sorter View
1. Choose the View tab.

2. Click Slide Sorter in the Presentation Views group.
3. Double-click a slide to view it in Normal view.
Print
PowerPoint provides you with many printing options. You can print a large view of your slides or
you can print your slides as handouts with 1, 2, 3, 4, 6, or 9 slides per page. You can also print
your Notes pages or the Outline view of your slides.
To: Print:
1. Click the Microsoft Office button. A menu appears.
2. Choose Print.
3. Click Print Preview.
4. Click the down arrow next to the Print What field in the Page Setup group and then select
what you would like to print. A preview appears onscreen.
5. Click the Print . The Print dialog box appears.
6. Click the down arrow next to the Color/Grayscale field to select whether you want your
slides to print in color, grayscale, or black and white. If you are using a black and white
printer, choose black and white. You will use less ink or toner.
7. Click Ok.
Print an Outline

2. Choose Print.
3. Click Print Preview. The Print Preview tab appears.

Outline View.
5. Click the Print button . The Print dialog box appears.
7. Set the other print settings.
8. Click OK. Your outlineprints.
Print Your Slides

2. Choose Print.
Slides.

8. Click OK. Your slides print.

Print Your Slides as a Handout
2. Choose Print.
4. Click the down arrow next to the Print What field in the Page Setup group and then
select Handouts (4 slides perpage).

8. Click Ok.
1 LAB 3 (INTRODUCTION TO ANALYSIS TOOL)
1.1 GOALS OF THE DAY:

• Introduction to Microsoft Excel
2 SECTION A
Microsoft Excel is a powerful electronic spreadsheet program you can use to automate
accounting work, organize data, and perform a wide variety of tasks. Excel is designed to
perform calculations, analyze information, and visualize data in a spreadsheet. Also, this
application includes database and charting features.
When you create a new Excel 2016 workbook, the app presents a blank workbook that
contains one worksheet. You can add or delete worksheets, hide worksheets within the
workbook without deleting them, and change the order of your worksheets within the
workbook. You can also copy a worksheet to another workbook or move the worksheet
without leaving a copy of the worksheet in the first workbook. If you and your colleagues
work with many documents, you can define property values to make your workbooks easier to
find when you and your colleagues attempt to locate them by using the Windows search box.
Another way to make Excel easier to use is by customizing the Excel app window to fit your
work style. If you find that you use a command frequently, you can add it to the Quick Access
Toolbar so it's never more than one click away. If you use a set of commands frequently, you
can create a custom ribbon tab, so they appear in one place. You can also hide, display, or
change the order of the tabs on the ribbon.
To save your workbook by using a keyboard shortcut, press Ctrl+S. Students often ask, "How
often should I save my files?" It is good practice to save your changes every half hour or
even every five minutes, but the best time to save a file is whenever you make a change that
you would hate to have to make again.
Open Microsoft Excel and create a file named Lab2.
2.1 TABS IN EXCEL:

There are following tabs in excel.
Home tab: it has many important groups like font, alignment, numbers, cells group which has
many important features like font size, font style, merge cells etc.
Insert tab: it has many important features like inserting pictures, tables, charts, header and
footer.
Formulas tab: used to insert formulas in sheet. It’s insert function and AutoSum features are
mostly used.
Review tab: its spelling and thesaurus features are mostly used.
2.2 FEATURES OF EXCEL
Quick Access Toolbar: Displays quick access to commonly used commands.

Title Bar: Displays the name of the application file.
File Tab: The File tab has replaced the Office button. It helps you to manage the
Microsoft application and provide access to its options such as Open, New, Save, As
Print, etc.
Name Box: Displays the active cell location
Cell: The intersection of a row and column; cells are always named with the column letter
followed by the row number (e.g. A1 and AB209); cells may contain text, numbers and
formulas. 6
Range: One or more adjacent cells. A range is identified by its first and last cell address,
separated by a colon. Example ranges are B5:B8, A1:B1 and A1:G240.
Status Bar: Displays information about the current worksheet.
New Sheet: Add a new sheet button
Ribbon: Displays groups of related commands within tabs. Each tab provides buttons for
commands.
Formula Bar: Input formulas and perform calculations
Worksheet: A grid of cells that are more than 16,000 columns wide (A-Z, AA-AZ, BA-
BZ…IV) and more than 1,000,000 rows long.
View Option: Display worksheet view mode.
Figure 1: Methods to navigate around a sheet
Formula: You can create any type of math calculation on your own using the following
mathematical operators:
Figure 2: Symbols used in formulas
For example: = A1 + A5 ….
Let’s start practicing. Add some numbers in cells of your choice as shown in Figure 3.
Figure 3: Dummy data written in excel worksheet
1. Click in the empty cell which will contain the formula. In current example case,
it will be E2.
2. Type an equal sign (=). (Figure 4)
3. Type the cell address or click the cell that contains the first number. (Figure 4)
4. Type the math operator (+ - / * ^). (Figure 4)
5. Type the cell address or click the cell that contains the second number. (Figure 4)
6. Continue in this manner until the formula is complete.
7. Use parenthesis for clarification.
8. Press the Enter key. Result will be added to that cell.
9. To use same formula for all rows, hover mouse to the right most bottom point
until mouse pointer changes to plus sign (+). Click at corner of cell and drag it to
the bottom of the same column. Formula will automatically be copied to other
cells according to their cell references.
Figure 4: Adding sum formula for addition of marks
2.3 INSERT FUNCTIONS:

Go to formula tab. This selection demonstrates how to use the Insert Function menu to create a
formula. Click on the Insert Function button or from the AutoSum drop-down arrow and select
More Functions to display a list of over 200 functions available in Excel. The Insert Function
dialog box displays the function categories from the drop-down menu list. The function names
will appear in the function name box below. (Figure 5)
Figure 6: Function argument box
Figure 5: Insert function dialog box
Once you select a category and a function name, click on the OK button. The Function
Arguments palette will appear. (Figure 6) Type any numbers, cell addresses, ranges, or any
other parameters in the required boxes, and then click on the OK button to insert the
completed formula in the spreadsheet.
AutoSum:
Adding is the most common math operation performed in Excel. The Home ribbon includes
an AutoSum button for adding. This button provides a shortcut to typing formulas. (Figure 7)
Sum:
Adding is the most common function performed
in
Excel. The SUM function adds values.
Specify
values, individual cell addresses and/or range
addresses in the number’s variables.
Syntax =SUM(number1,number2,...)
Examples =SUM(A10:A25)
=SUM(B15:C20)
Averag
e:An average sum all values and divides by the
total of values. Specify values, individual
number
cell
addresses and/or range addresses in the
number’s
variables. You can simply select the range of
cells
and select average from AutoSum button
Syntax =AVERAGE (number1, number2…)
Examples =AVERAGE (15, 255, 45)
=AVERAGE (B2:B18)
Figure 7: AutoSum button
Maximum (MAX): Minimum (MIN):
Maximum indicates the largest value in Minimum indicates the smallest value in the
the
designated list of numbers. designated list of numbers.
Syntax =MAX (number1, number2...) Syntax =MIN (number1, number2...)
Examples =MAX (A15:A35) Examples =MIN (A15:A35)
=MAX (D10:D200, =MIN (D10:D200, D225:D325)
D225:D325)
3 LAB TASKS (TO BE PERFORMED IN LAB)
3.1 CREATE ACADEMIC RECORD OF A STUDENT.

Steps:
1. Start Microsoft Excel and open blank workbook. To do this, select the new tab
and click on blank workbook.
2. Start typing the given record in the workbook. In this case, I have given heading at
the top and then inserted picture. To insert picture, go to the insert tab and select
insert picture button. The insert picture dialog box will appear. Figure 8
3. Select the desired picture and click on insert button at the bottom of dialog box.
4. Enter the given data in the workbook. To underline the text, I have used shapes.
Go to the insert tab and click the down arrow to the right of shapes button. Figure
9
5. Use the line shape to underline the text
6. To change the appearance of the text, go to Home tab and in the font group, font
style and sizes etc. can be changed. And in the Alignment group, Merge & Centre
is used to merge the text. Figure 10
7. To calculate total of the values, place the cursor in the cell where you want to
display total and go to the Formula tab and click the down arrow of AutoSum and
select Sum. Figure 11
8. And select the values you want to total as follows: Figure 12.
9. Similarly, calculate average of all values. Go to the formulas tab and in the
AutoSum button select average and then select the cell on which you want to
apply average formula. For example, in Figure 13.
10. To add colour shading to values, select the values and in the home tab in the
font group select the desired colour from fill colour
11. To calculate percentage, I have typed the following formula in the formula bar
according
to my data. Figure 15: Percentage calculationFigure 15
12. After calculations, you can save record. Go to the file tab and select saves as.
Then select browse.
13. Save as dialog box will appear. Enter the name of the file and location where you
want to save the file. Then click save button. File will be saved.
Figure 8: Insert picture dialog box
Figure 9: Shapes
Figure 10: Font and alignment group
Figure 11: Calculation sum Figure 12: Sum Figure 13: Calculating average
calculation
Figure 15: Percentage calculation
Figure 14: Sample output

3.2 CREATE PIE AND BAR CHART WITH THE DATA OF STUDENT’S
RECORD PROVIDED IN THE PREVIOUS ASSIGNMENT.
1. First, select the data values of which you want to create the chart. In case of pie chart, it is
between obtained and total marks. Select the values. See Figure 18
2. Then go to the insert tab and select pie chart in chart group. And select 2-D in pie
chart option. See Figure 19 for details.
3. The pie chart will be created according to the data values. (Figure 20)
4. Now click on the chart title text box to enter the title and to change colour
scheme. (Figure 21)
5. After adding title and changing colours, save the chart with specified name.
6. For bar chart, select the required data values as shown in Figure 22.
7. To create chart, go to the insert tab and in the chart group, select the recommended
chart and select the clustered column chart. (Figure 23)
8. The chart will be created. Add title of the chart and tick the check boxes of which
chart elements you want to include in your chart. (Figure 24)
9. In this chart five chart elements are included, which are shown in the above
figure. Legends are defined at the bottom of graph. (Figure 25)
10. Add axis titles and chart titles and you can also change the colour and style of graph.
11. After doing all above steps, chart will be created in desired form and it can now be saved.
12. See Figure 16 and Figure 17 for sample output.
Figure 16: Output Pie

chart Figure 17: Output Bar chart
Figure 18: Selecting values for graph
Figure 20: Pie chart
Figure 19: 2D Pie Chart
Figure 21: Adding chart title and colours

Figure 22: Selecting values for bar chart
Figure 23: Creating bar chart
Figure 24: Chart elements

Figure 25: Adding legends
3.3 CREATE A PLAN CHART AS GIVEN IN SAMPLE.

1. Open a new blank Excel document.
2. Select the cells you want to merge. On Home tab, in Alignment group, click on
Merge and centre. (Figure 26)
3. Add text in it and change its font style, colour and size. (Figure 28)
4. On Home tab, in Font group, click on arrow
5. From the drop down, menu select Line Style and then select line of desired
thickness. (Figure 28)
6. Again, click on arrow , click on Line Colour and select desired colour for
border. (Figure 29)
7. A pencil will appear. Draw the border the cells.
8. Select the cells whose column width you want to change. On Home tab, in Cells
group,
click on arrow below Format and select Column Width from drop down
menu. (Figure 30)
9. Change the Column Width and click OK. (Figure 35)
10. Column width of selected cells will be changed.
11. Merge the required cells by the methods described previously.
12. To fill colour in cells, right click on it and select format cells from the
dropdown menu. (Figure 31)
13. Click on Fill from Format Cell dialogue box and select desired fill colour. (Figure
32)
14. Select the merged cells and on Home tab, in Alignment group, click on and
then select Vertical Text from drop down menu. (Figure 34)
15. Add text. It will appear vertically. (Figure 36)
16. Again, select other merged cell, click on and select Rotate Text Up from the list.
17. Add text in cell and text will appear in this way.
18. In some cells, text will appear in this way. (Figure 37)
19. To resolve this, select the cell and click on Home tab, in Alignment group,
select Wrap Text. (Figure 40)
20. Text in cell will then appear in the form of Figure 38.
21. Text in the cell is Upper Aligned. (Figure 39)
22. Complete the task and save the document.
23. See Figure 33 for sample output.
Figure 26: Cells are merging
Figure 27: Text is formatted
Figure 28: Adding borders to cells

Figure 29: Changing colour ofborder Figure 30: Changing of column width
Figure 31: Formatting of cells
Figure 32: Colour fill of cells is changing
Figure 33: Sample output

Figure 34: Insertion of vertical Figure 37: wrapped in
text cell without Figure 38:
cell
Text in
wrapping Text is
Figure 39:
Alignment
buttons are
Figure 35: Writing column width shown
Figure 36:
Vertical text is
shown
Figure 40: Wrapping of text

Lab 2: CLO: 1
INRODUCTION TO HTML
1.1. Internet
Internet is an important source of information sharing. Internet means International Network.
When we share different resources (resources includes information and hardware both) between
more than one computers it is called Network and the way of sharing resource among all
computers of the world is called Internet. Internet is a global system of interconnected computer
networks. Internet is such a network where millions of private, public, academic, business, local
and government networks are linked to each other or in other words we can say that internet is
collection of many networks.
The Internet carries a vast range of information and services. One of the greatest things about the
Internet is that nobody really owns it. It is a global collection of networks, both big and small.
These networks connect together in many different ways to form the single entity that we know
as the Internet.
Via internet you can send and receive e-mail. You can chat with text or voice. You can browse
the World Wide Web. And you can perform countless other tasks with the appropriate software.
Internet (a network of networks) [1.1]
1.2. World Wide Web (WWW)

The World Wide Web, or simply Web, is a way of accessing information over the medium of the
Internet. It is an information-sharing model that is built on top of the Internet. We access the
Document using URLs (Universal Resource Locators). For example http://www.google.com is
URL where http is name of protocol and www.google.com is address of document that we want
to view.
1.2.1 Web Page and Website
A document over the WWW is call web-page it may contain text, images, videos. It may also
contain the links to other web pages these links are called Hyperlinks. If we want to write a
webpage then we have to do it in HTML. This is language which we use to create web-pages. A
website is collection of related web-pages. When same kind of web-pages combine and put
under into one name that is called website.
1.2.2 Web Browser
Web browser is a program that is used to view a web-page/website. We write URL(address) of
website that we want to view in address bar of web browser and it will take us to that website.
There are different web browsers are available like Internet Explorer (IE), Google chrome,
Mozilla Firefox. We can use any of them.
1.2.3 HTML
As in last section we discuss that HTML is language that use to create web-pages. HTML stands
for Hyper Text Markup Language. Remember it is not a programming language it is a mark up
language. HTML documents contain HTML tags and plain text.
Fig 1.2 Web-browser and its elements

2. Writing First Web Page in HTML
Tags: In html we use tags to tell web browser how to show web-page. Everything in html file
that start with “<” and end with “>” is called tag. For example <html> , <head> and <body>.
Every HTML page start with <html> and ends with </html> tags. First tag <html> is called
opening of tag and second one </html> is called closing of tag. All remaining tags used for
developing the web page will be written in these two tags
There are two sub portion of <html> tag one is <head> </head>and other is <body> </body>
Both body and head tags have their own uses. The information that we want to show to user
should be written inside opening and closing tags of body tag. The purpose of head tag will be
discussed in some other course.
We have enough background knowledge to start our first website.
1. Task: Open Notepad (Go to start menu click at run and type Notepad )
Explanatory Note: To make web site we can use any Text editor .there are many text editors
available on the internet: Textpad, notepad++. For this course we will use notepad.
2. Task: Write following line of code into text editor.
code In this code some text is included
in body opening and closing tags
Whatever written inside <body>
tag show to user.
3. Task : Now Save html file (Press ctrl+s) . Type any name for the file and don’t forget to
change the extension from .txt to html or htm. Also choose All File option from bottom
[important].
Fig 1.3 Choose a file name and file type

4. Open the file in any web browser by double clicking on it and the output will be:
Note 1: Now whenever you need to make changes to your HTML file you can open this file in
notepad and make changes and then save it. If you want to view these changes just open this file
in your web browser.
Note 2: The browser does not display the HTML tags, but uses the tags to interpret the content
of the page.
In last we saw how to create a simple web page. We can do lot more then that for example we
can bold the text , italic the text and add pictures on web page. In this we get familiar with
more html tags; <b> , <i> , <p> , <br> .
2.1 Bold Tag

<b> tag is used to bold the text. Any text written in opening and closing tags of html will get
bold.
3. Task: Open your html file in Notepad

In this code b tag is included in body tag and
some text is written in the b tag. This text text
will be displayed as bold.
5. Now Save html file (Press ctrl+s) .
2.2 Italic Tag

<i> tag is used to italicize the text. Any text written in opening and closing tags of html will get
italic.

In this code i tag is included in body tag and
some text is written in i tag. Resultantly this is
italic text will be displayed as italicized.
2.3 Hierarchical structure of HTML

One thing which is very important to know is that we can use a tag inside another tag.

In this code i & b tags are included in body tag
and some text is written in the innermost tag.
Text will take a combined effect from these
tags and result will be an italic bold text.
Explanatory Note: That means when we use tag inside tags. Important is inner tag should be
closed before the outer tag. You can not write something <b><i> italic text </b> </i> this is
incorrect method. If a tag open inside another tag then it should be close before opening tag.
Correct way to write above is <b><i>italic text</i></b>
2.4 Paragraph Tag

<p> is called paragraph tag. It is used to write a paragraph.
<p> tag leaves a line break before and after it.

In this code some text is separately included in
two p tags. These paragraphs will be displayed
with one space between them. As p tag leave
one line before it and one line after it text
3. Now Save html file (Press ctrl+s).
2.5 Break Tag

<br> is called break tag. It is used to give a line break after it.

In this code some text is separately
included in two p tags. And a break tag
is also included in these tags. Due to br
tag a space will be introduced before the
stuff where br tag is placed.
Attributes of tags
All html tags have a number of attributes. It includes id, class, style etc.id attribute is used to
assign a unique value to an element or tag. Class attribute is used to give a unique class name to
an element. 2.6 Image tag
To put an image on a web page <img> tag is used. For this purpose the attribute of <img> tag
that is necessarily be used is src. Src attribute is used to give the path to the image.

Here we have used an image tag to display an
image in the browser. “src” property of <img>
tag is used to give path of the image
Note: Path of the image will be given in this way only when image is located in the same folder
as the html document.
Image tag has some other attributes like width and height which are used to control the
dimensions of the images that is to be displayed.In this we will learn about some more tags of
html that includes links and list tags i.e.<a>, <ul>, <ol>
3.1 Hyperlink
We can link pages using hyperlink tag. Linking mean we can go from one web page to other by
simply clicking on it. In <a> tag a stands for anchor. And <a> tag must use it attribute href to
give the website address in it.

In this code a link is applied to text. href
arrtibute of anchor tag is used to give URL of
the web page. As shown in the last step of this
task yahoo is shown as a link to a web page
clicking it will take you to yahoo.com
Up till now we learned to make a hyperlink on a text now we proceed by making a hyperlink
over an image. It can be done very easily. As we have already talked in the html hierarchy that
we can use a tag within another tag.
To create a link to an image we will use image tag inside the anchor tag.

In this code a link is made to yahoo.com web
page but this time we have applied link to an
image. By clicking on image you can open
yahoo.com
Explanatory Note: Now when you open html file in your browser ,you will see the image whose
path has been gave in src attribute now if you place your mouse on displayed image it will
change its shape form arrow to hand. By clicking over it you will be directed to the page whose
address is given in href attribute. In this case it is yahoo.com.
3.2 List
Sometimes we need to show information in numbering or in bullets format. For this html provide
us un-order list <ul> and ordered <ol> list.
3.2.1 Un-ordered List Tag
HTML offers authors several mechanisms for specifying lists of information. To present list of
Information in bulleted format we can use <ul> tag.

In this example we have presented a list of
information in the bullet ed form.
Default bullet is a circular.
Note: There are different styles of bullets like square ,disc, circle. But customized bullets can be
used.
3.2.2 Ordered List Tag

To present list of Information in numbering format we can use <ol> tag.

In this example we have presented a list of
information in the Numbered form.
Default Numbering is 1,2,3……
3. Save html file (Press ctrl+s).
Note: To specify the type of the numbering, type attribute of the <ol> is used.
For different styles of numbering there are three built in types of bullets like A, i, 1.
3.3 HTML Tables

HTML also have table tag. Mostly this tag is use to show the data in tabular form. Content that is
appearing on a web page can be included in a html table. This is called tabular form. As a table
contain rows and columns. In html, to present the rows in a table <tr> tag is used, <tr> tag is
included as many times in table tag as many rows are required in the table. To present the
columns <td> tag is used , <td> tag is included as many times as many columns are required in
the table.
The intersection of a row and a column is called a cell. Like other tags of html .table tag also
contain the border attribute.
This is simplest form of the table containing

only one row and one column.
Now we do little bit complex example.

This is another table. In this table we have used
border attribute to apply a border other than a
default border
This table contains 3 rows and two columns for

each row
3. Now Save HTML file (Press ctrl+s).
In this we will see more details of html tables.
To give an organized an appealing look to a web page, its content may be shown within a table.
we can define entire structure of the web in a table.
In this picture whole webpage structure in defined in a table
Fig 4.1 web page containing table with rowspan and columnspan
Now we will learn some more attributes of table tag that includes column-span and row-span.
4.1 Column-span
Column-span is applied to increase the size of a column.

In this code column-span=2 is applied so that
the cell on which this span is applied get space
equal to two columns.
Explanatory Note: In this example 2nd row of table contain columns that have a span of 2.That
means through column-span we gave this cell a space equal to two columns. 4.2 Row-span
Just like column-span we can also apply row span over the rows of the table.

In this code row-span=3 is applied so that the
cell on which this span is applied get space
equal to three rows.
On a web page along with text content ,image and video content can also be included in a table
to make the web page more arranged and attractive.
Fig 4.2 This picture is an example of multimedia content on the webpage
This can be done easily. Let see how to do it.

So again we will use anchor tag to add an image to table.

In this code we have tried to develop a
web page that contains text and images
placed inside the table element.
Using Table enhances the look and feel
of the page.
Till now we only have talked about those tags that are related to make a website “Presentable
and organized”.
But now we will talk about html forms that are used to create interactivity between a website
and a user. You will not find a single website on the internet that doesn’t include html forms.
Every website is using more or less number of tags of html forms.
For example forms are used in an online shopping websites and creating user registration on any
website.
Fig 5.1 This picture is an example of forms on a webpage
5.1 Html Forms
In this we will read about forms in html and input tags. Form also possess closing and opening
tags like html tag
<form>
This is form opening tag
</form>
This is form closing tag
Now remaining form code is typed in these two tags .There are different input items available for
forms e.g. Buttons, textboxes, check box, radio buttons etc.
To use these input items ,we have to specify them in the type attribute of the form input tag.
5.1.1 Text input
This item is used to take a single line input from a user. It can be used for typing an email
address, username, address etc. Indeed this is the only input item which is very common.

Form input Text is used to include a textbox in
html web page
5.1.2 Password
It can be used on the user registration page or on user log in page
1. Open your html file in Notepad

Form input password is used to include a
textbox in html based web page that will take
the text as hidden text.
5.1.3 Checkbox
This input item is provided to allow users to select more than one options out of a number of
available options.
Here we have used form input checkbox

Type attribute is given value checkbox to place
a checkbox in the page.
5.1.4 Radio-buttons
This item is provided to the user to make one selection out of a number of available options.
1. Open your html file in Notepad

Here we have used form input type =Radio
Type attribute is given value radio to place a
radio-button in the page. Radio button allow
user to choose only one option out of many.
5.1.5 Drop-Downlist
To select one item out ofa large number of available options

2. Write following line of code into text editor.
this code is including a dropdown or a

selection menu in the web page
Select tag is used under the form tag to place a

selection menu in the web page
5.1.6 Button
To include button which is the most essential part of the forms in html ,it can be added to the web
site in this manner.
2. Write following line of code into text editor.

In this code the type property of input tag is
assigned a value Button to declare that we want
to place a button in our web page.
INTRODUCTION TO CSS
CSS stands for Cascading Style Sheets. CSS is effectively the clothing that we put on a web page.
CSS is an tremendous addition to plain HTML. With plain HTML you define the colors and sizes
of text and tables throughout your pages. If you want to change a specific element you will have to
change the entire document.
With CSS we define the colors and sizes in "styles". Then as you write your web pages you refer to
the styles. In short we can say that we use CSS to control the style and layout of multiple Web
pages all at once.
Let us show you how CSS works!
Simple Web page before applying CSS
Simple Web page after applying CSS
2.1 How to define styles?
Styling information for a web page can be defined in three ways
• Inline
• Embedded (page-level style)
• CSS (external style-sheet)
2.2 Inline style
As already mentioned, that every HTML tag possesses some attributes. In case of Inline way of
styling, we apply the style using the attribute right inside the elements of your HTML code, and
this method of styling is referred to as inline CSS .This attribute specifies style information for the
current element only.
Below is the general form for setting inline CSS in any HTML element.
Pseudo Code
<htmltag style=”attribute: value ; attribute : value;”></htmltag>
Task: Open Notepad (Go to start menu click at run and type Notepad++)
Explanatory Note: To add inline styling to a web site we can use any Text editor in this case we
are using notepad ++. For this course we will use notepad.
Lets add some Inline CSS styling to our

html file
In this code styling
information is given
within the tag. Inline
styling has the highest
priority out of any
method of styling. This
styling detracts from the
true aim of using CSS, so
we use it rarely.
To use Inline styling we

use style attribute defined
inside the tag of the
element which is to be
styled.
For example, To apply

background effect to a
paragraph we have used
the style attribute of the
tag p. This tag is for the
paragraph element.
2. Task : Now Save html file (Press ctrl+s) . Type any name for the file and don’t forget to
change the extension from .txt to html or htm. Also choose All File option from bottom
[important].
Choose a file name and file type
2.3 Embedded styling
Embedded style is fairly an intermediary between inline styles and an external style sheet. An
internal style sheet should be used when a single document has a unique style. The style element
requires both start and end tags <style>...</style> which are inserted between the
<head>...</head> tags of your html file. The type attribute of the style tag defines the type of style
sheet being used so we'll put text/css as the value.
Below is the general form for setting embedded CSS in any HTML element.
Pseudo Code
<style type="text/css"> htmltag{attribute: value;}</style>
Explanatory Note: To add embedded styling to a web site we can use any Text editor. For this
course we will use Notepad++.

Add This code to your html file

information is given within
the tag. Embedded styles are
styles that are embedded in
the head of the document.
Embedded styles affect only
the tags on the page they are
embedded in.
Styling information is same

as we add it into inline style.
End result is same only
difference is definition of
style you will get more on it
in next .
2. Task: Now Save html file (Press ctrl+s) .
3. Task: Open the file in any web browser by double clicking on it and the output will be:
2.4 External styling
Using external style sheets is the definitive web designer tool in that it allows you to apply
formatting to many different web pages at once with a single .css file.An external style sheet is
simply a text file containing a list of CSS rules sets. The file is saved with a .css extension and
saved to any directory that can be accessed by the web pages using it.
Below is the general form for setting External CSS in any HTML element.
Pseudo Code
Selector {attribute: value;}
Explanatory Note: To add external styling to a web site we can use any Text editor. For this
course we will use notepad++.
We have to perform two tasks separately. There are two files css and html.
1. Task: We write our Html file (see HTML for more details)
In this code one line of code

is included in the head tag of
HTML. No other changes are
required to link the external
styling to our web page. Link
tag with three attributes rel
type and href are used to
include an external styling to
our web page.
Value of href is equal to
name of the file containing
our styling whose extension
is .css .
2. Task: Write following lines of code into separate file.

Add this code to your .css file

information for the p tag is
typed in our .css file. As a
result all the p tags of the
web page referenced to this
.css sheet will style their p
tags according to this
formatting.
3. Task: Now Save css file (Press ctrl+s).While creating a style-sheet, Just save the file as
Filename.css and put it in the same directory as your referenced html file.
4. Task: Open the html file in to web browser by double clicking on it and the output will be:
In this we will get knowledge regarding different types of selectors and the precedence of these
selectors.
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors
called “Tag”, "id" and "class".
3.1 Tag Selector

Styling information applied using a default tag of HTML is called a tag selector. The tag selector is
used to redefine existing HTML tags. Select this option if you want to change the formatting
options for an HTML tag, such as the H1 (heading 1) tag or the UL (unordered list) tag.
If we define css style for a tag then this style will be applied for all appearances of that tag in our
html file. For example if we add style for tag p then all <p> that occur in html file will have that
style.
Note: Html tag is called also selector while Attribute-value pair is called declaration.
We have to perform two tasks separately. There are two files css and html. 1.
Task: We write our Html file (see HTML for more details)

HTML .And this line is
referencing our style-sheet.
In this code we have used
three p tags to display three
paragraphs in our web page.
Now in our .CSS file we will
straightly use name of
paragraph tag to apply
formatting on all three
paragraphs at once.
Task: Write following lines of code into a separate file.
Add this code to your .css file In this styling information is
typed in our .css file. When
you use the tag selector; the
style definition is
automatically applied to any
text or other element that has
been formatted with the
corresponding tag. Thus, if
you’ve formatted a paragraph
with the p tag and then create
an p style it will
automatically apply to the
paragraph.
3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
3.2 ID Selectors
ID selectors initiate such rules in embedded or external style sheets that focus individual HTML
elements. To apply different styling to an Html tag we need to assign a unique name to that
element. The id selector uses the id attribute of the HTML element, and is defined with a "#". ID is
assigned to an element in the html file while this id is used in .css file to assign styling to the
element.
IDs allow you to get very specific about which elements your styles are applied to. This is basically
a subject of staying organized and can also help a lot once you start creating more complex CSS
selectors.

referencing our style -sheet.
In addition to this we have
used ID attribute of p t ag to
assign unique value to the
two p tag s separately.
2. Task: Write following lines of code into a separate file.
Add this code to your .css file In this code styling

information is typed in our
.css file.
Now in our .CSS file we
have straightly used id value
of paragraph tags to apply
formatting on the two
paragraphs separately.
Explanatory Note: So resultantly we have used id selector and applied different formatting or
styling on same type of HTML tag. This is p tag in current example.
3.3 Class Selectors

A CSS class selector will allow you to put one or more style declarations into a group and give it
any name you like so that you can apply it to specific web page components.
This allows you to set a particular style for any HTML elements with the same class. The syntax
you use is simply a "." followed by any name you like . class is assigned to an element in the html
file while this class name is used in .css file to assign styling to group of elements.
In th is code one line of code

referencing our style -sheet.
used Class attribute of p t ag
to ass ign a class to the two p
tags separately.
All the elements with the
same class name will have
same formatting.
One ID can be assigned to
only one element
But one class name can be
assigned to more than one
elements.

Add this code to your .css file In this code styling
information is typed in our
.css file.
Now in our .CSS file we
have straightly used class
name of paragraph tags to
apply formatting on the two
paragraphs separately.
Paragraphs with no class
name doest have any
formatting so no formatting
is applied to them. As there
is no tag selector is used as
well.
4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Note: A good practice is to name classes according to their function rather than their appearance.
Classes can be a very effective method of applying different styles .The difference between an ID
and a class is that an ID can be used to identify one element, whereas a class can be used to identify
more than one.
In this we will explore Colors in CSS, color setting methods, Hexadecimal Color codes,
background color and background image properties.
4.1 Introduction
The colors selection is very vital part of look and feel of any web site, so please spend a suitable
amount of time on surfing a number of websites and ponder on the available color range, color
matching and color contrast.
There are many methods to define color in css.
• Color Name
 Define colors by simply entering the name of the desired color.
 Format to define Color name is :
.mycolors{color:blue; background-color:green;}
• Hexadecimal value
 Define colors with the use of hexadecimal values, similar to defining colors in plain
HTML.
 Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F)
 Format to define Hexadecimal is

.mycolors{color:#00002F; background-color:#FFCE02;}
 Hexadecimal number has values from 0 to 9, A , B , C , D, E , F... e.g if you want to

write 10 in hexadecimal then you have to write A and if you want to write 255 in
hexadecimal then we you have to write FF.
 Hex Code of pure RED color which id FF0000 and GREE Color WHICH is 00FF00 and
BLACK color which is 000000 and WHITE COLOR which is FFFFF.
 A color code FFAA20 specifies that this color contain RED component equal to FF(255
maximum part of red color)] and Green component equal to AA (170 in decimal ) and
BLUE is 20(32 in decimal).Look at ref [1] for more details
• RGB value
 Define colors with the use of RGB values, by simply entering the values for amounts of
Red, Green and Blue.
 Format to define rgb color is :
.mycolors{color:rgb(255,201,202); background-color:rgb(40,51,110);}
 Colors are made up by three components RED GREEN and BLUE.
 In rgb: r stands for red g stands for green and b stands for blue.
Below are a screenshots of some websites presenting the use of very reasonable background
colors and background images . he lowest value that can be given to one of the light sources is 0
(hex 00). The highest value is 255 (hex FF).
Figure: 1 Figure: 2 Figure: 3
Now let’s find out the how we can apply background color and set background image in Html using
CSS styling.
CSS properties used for background effects:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
As name identifies that background color will help us applying a color at the background of an
element.

used ID attribute of p tag to
two p tags separately.

Add this code to your .css file In this case different styling
is applied to different
paragraphs.
Different background colors
are applied to different
paragraphs
While the color attribute is
maintained white in all the p
elements
Default value of a color is
black
i.e if no color is specified for
an element e.g for H1element
,then automatically it will be
none other than black.
3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file
as Filename.css and put it in the same directory as your referenced html file.
4. Task: Open the html file in to web browser by double clicking on it and the output
will be:
As now you just saw that how easily we can add color to the background of any element.
Note: Here we have used id selector to apply color to elements. But we can make use of Tag
selector (specifically) and class selector (generically) to apply our color styling as well.
Now we learn the how we can add image to the background of any element.
It’s very simple just use background image property. And you are done!

two p tags separately.
Now we will use id’s of these
paragraphs to apply styling at
them.

Add this code to your .css file In this code three paragraphs
will be displayed with three
different background images.
To apply background image
to an element, we will use
background-image property
inside the id of that element.
First paragraph will have
background.jpg image in its
background
Second paragraph will have
twitter.jpg in its background
While third paragraph will
also have twitter.jpg in its
background.
3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file
as Filename.css and put it in the same directory as your referenced html file.
4. Task: Open the html file in to web browser by double clicking on it and the output
will be:
4.2 Background-repeat
In the above example if we see carefully, the width of the each paragraph is 400px.In the
paragraph one and two; image is repeated while in the third paragraph image is not repeated.
Reason is that if the Background image is smaller than the given size of the element then the
image is repeated along the height and width of the element to completely fill the background of
the element.
If we do not want to repeat the background image then we have to explicitly declare that we do
not need to repeat the image in background. Method for this is follows
background-repeat:no-repeat. By default, the image is repeated in both x and y direction so it
covers the entire element.
The background-repeat property sets if/how a background image will be repeated. You can
have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or
in neither direction
4.3 Background-position
The background-position property defines the initial position of an element.If you would like to
define where exactly an image appears within an HTML element, you may use CSS's background-
position. Please take note that there are three different ways of defining position: length,
percentages, and keywords. For instance we are using Keyword.
Three ways to define the position of an element
• Keywords
 center top bottom top left top center top right bottom left bottom center bottom right
• Percentages
 background-position: 50% 50%;
• Lenghts
 background-position: 200 200;
Note: If no background-position has been specified, the image is placed at the default top-left
position of the element (0,0), which is located within the top-left corner of the element
See how background repeat and position property works!


In this code we have used p
tags to display a paragraph in
our web page.
assign unique value to the p
tag.
Then we will use id’ of the
paragraphs to apply styling
on it.

Now in the css file we have
specified the position for our
element with the p1 id whih
is a paragraph in this
example
It will be displayed at the
right top position in thw web
page.
In this we will see that what is html box model, how to set margins, border of an element, how to
give padding, how to handle floating Images, text and font Properties.
First of all we take a look at box model followed by the elements of html.
CSS Box Model
TB
LB TP
RB
Content
RP
LP
BP
BB
BP
Detail figure of CSS Box Model
Stands For?
TM stands for top margin RM-Right Margin LM-Left margin BM-Bottom margin TM-Top
Border RM-Right Border LM-Left border BM-Border Bottom TP-Top padding RP-Right Padding
LP-Left Padding BP-Bottom Padding
Boundary of any element is called border. Distance between the content of any element and its
boundary is called Padding.While the distance between two elements of html is called Margin.
CSS Border, allow you to completely customize the borders that appear around HTML elements.
To alter the thickness of your border use the border-width attributes. You may use key terms or
exact values to define the border width.
Note: You must define a border-style for the border to show up. Available terms: thin, medium,
thick. The border has been made visible, in our example work for each element, so you may more
readily see the effects of padding margin.

In this code we have made
two headings.Id of one
heading is heading1 and the
id of the other heading is
heading2
In our CSS file we will set
margin and padding of these
elements.

In this code heading1 & heading2 are both of
white color which means that the text within
them will be of the mentioned color value. Both
elements are surrounded by the 2 px thick
border. The two heading elements will be of
40px apart because margin-top of the lower
heading is set to 40px.Here we will get the same
result if we do not set the margin-top property of
the heading2 but we set the margin-bottom
property of the heading1 to be equal to
40px.Both cases will do the same function.
While the left top and bottom padding are also
defined separately. These settings will create the
space between the content of the headings and
their boundary. Space between the content of the
heading1 and upper boundary will be 10 px asn
the padding-topwhile the content of the
heading1 will be 10 px away from the left
boundary as padding-left=10px
We continue with the formatting text stuff! Basically, we can adjust the size, alignment, style and
the weight of our text to be displayed. Let’s format our text straight away!
Add This code to your html file This code is typed in the
HTML file. We will set
different text styling on the
paragraphs elements.you can
set different font families
provided they are installed on
client machine.

In this CSS code p1 element
font is courier and the width
of this paragraph element is
set to 400 px.
While size of font is set to
small in the second
paragraph. Font size of an
element can be set to large
larger medium small smaller
and it can be set using px
unit e.g 20 px. Texttransform
is a quick way to modify the
capitalization of your text.
HTML file.
.In our CSS file we will
apply formatting to our
paragraphs and heading
elements.

Different alignments can be
set such as center left right
justified.
In this code paragraph width
is set to 400px.Otherwise the
paragraph will be displayed
straight away along the
length of the window of the
web browser.
3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Now we move to the most interesting part of CSS which is “Floating”. Float is a CSS positioning
property.
Float Left
Float right
Left and Right Floating

You can float elements on the web page to the right or the left. With CSS float, an element (text
/Image) can be moved to the left or right, allowing other elements to wrap around it.
Float is very often used for images.
For example, if you float an image to the left, any text or other elements following it will flow
around it to the right. And if you float an image to the right, any text or other elements following it
will flow around it to the left An image that is placed in a block of text without any float style
applied to it, will display as the browser is set to display images.
Why Float is used?
Add This code to your html file Simple html coding is shown
in this example including two
paragraphs and reading
styling from .css file

In this CSS code we will just
notice that how an image is
displayed by the browser when it
is placed in the paragraph tag with
some text without any float. After
this in the next example we will
apply float property to this image.
By default HTML elements
follows Box model, so as there are
two paragraph elements hed1 and
hed2 described in the HTML file,
hed1 is of 300px width and the
hed2 of 300px width. Then due to
box model, hed1 and will not be
placed side by side with hed2 .In
fact #hed2 will be placed below
#hed1.
4. Task: Open the html file in web browser by double clicking on it and the output will be:
By using float we will place elements side by side.
Add This code to your html file In this case we have placed
two paragraphs in this file.
Paragraphs in this file will
take their styling from .css
file.

In this example we have
added flaot property to the
#hed2 element.so that it is
shifted to the right side of
#hed1 element and fulfil our
objective.
4. Task: Open the html file in web browser by double clicking on it and the output will be:
Up till now we have played with two text elements and why to apply float on them, now we
will play with image and text and apply float on them.
Add This code to your html file This coding is showing

simple html file with one
heading, a paragraph element
and an image element inside
it.

In this CSS code we will just
notice that how an image is
displayed by the browser
when it is placed in the
paragraph tag with some text
without any float. After this
in the next example we will
apply float property to this
image.
Explanatory Note: In this example we have just noticed that if we do not apply floating to the
image appearing within the paragraph tag. It will give an unordered and unstructured look and
feel.
Note: While floating images, it should be noted that a margin should be added to images so that
the text does not get too close to the image. There should always be a few pixels between words
and borders, images, and other content.
Now in the Following example, we will apply float property to position the image at a suitable
place.
1. Task: We write our Html file and save it.(see HTML for more details)
HTML file.
.In our CSS file we will
apply formatting to our
paragraph and image element
to get adjusted in the
paragraph text nicely.
In this code we have floated
our image element to the left
as a result text will be moved
towards right.
Floats can be used to create entire web layouts.
In this we will get more knowledge about floating and the scenarios arising when floating is
applied, what is clear, and also will get basic understanding of div (division) in CSS.
A already mentioned that one of the powerful tools and the backbone of CSS is floating action.
Floating can be even used to design the entire layout of a web site same as what we said about a
table in html.
Let’s perform floating to place two paragraphs side by side! Obviously using left and right floating.
Add This code to your html file Type the code shown in the
image in your html file.

In this Code img element is
floated left setting the left,
right and top padding. Along
with that two paragraphs are
floated left and right
respectively.
But you can see in step # 3
that #p1 didn’t allow to give
spare place to #p2 as it is box
model. That problem will be
solved in next task. Go ahead
and see its output in step#3
We just saw from the output that #p1 didn’t allow #p2 to lay aside. Again the problem is same as
described above that elements are using Box model and didn’t allow two paragraphs to lay side
by side even if there s some space is left after the first paragraph.And this space is enough to be
occupied by the paragraph2,But default behavior of Paragraph to follow box model pushed
paragraph2 below it.
How to place them aside by side with each other. Again solution is to use floating.
Also use another useful element of CSS which replaces table of HTML. The <div> element is
well-suited to take over from tables as a layout tool. It is an element that is used to divide the
page into sections, and can hold whatever you need inside it. Each section can then have its own
formatting. Using div it becomes easy to manage and manipulate the web page easily.
image in your html file.

floated left setting the left
right and top padding. Along
with that two paragraphs are
floated left and right.
Container div gave us
remarkable solution and
place two elements side by
side which were positioned
using Floats.
Controlling the width of the container div we can minimize the distance between the two elements
.the more we reduce the width .the more they come close to each other.
Elements following a floated element will wrap around the floated element. If you do not want this
to occur, you can apply the "clear" property to these following elements. The clear property is used
to control how the subsequent elements of floated elements in a document shall behave. By default,
the subsequent elements are moved up to fill the available space which will be freed when a box is
floated to a side.
Now we see one problem by the use of float and find out its solution.
image in your html file

right and top padding. Now
the problem is that third
element occupied the space
which is left between the
two floated elements. This
gives the effect of
overlapping. And resultantly
disturb our design.
This problem is raised by the
use of
Now this is the time to take our new element (which is a paragraph at the moment) out of the empty
space left due to other floating elements.
Use clear as the solution
Clear property can be used to clear from left or from right or both. Clear both means that element
having clear:both styling defined in its tag should have both lefts and right clear.
image in your html file

right and top padding.
Problem is solved using clear
property.
#p3 is given a property
Clear:both
Use of clear is solving the
problem raised by the use of
float.
Clear is clearing both sides
of third paragraph and
resultantly placing the this
third element of div container
without any float at the
bottom of the two floated
elements within the same
div.
Lab 5: CLO: 1
Quiz 1 (Program the given screen shots using HTML, CSS, Bootstrap)
C++ Programs:
Example: Hello World Program
#include <iostream>
using namespace std;
int main()
{
cout << "Hello, World!";
return 0;
}
Output
Hello, World!
Every C++ program starts from the main() function.
The cout is the standard output stream which prints the "Hello, World!" string on the monitor.
The return 0; is the Exit status" of the program.
Example: Print Number Entered by User

#include <iostream>
int main()
{
int number;
cout << "Enter an integer: ";

cin >> number;
cout << "You entered " << number;
return 0;
}
Output
Enter an integer: 23
You entered 23
This program asks user to enter a number.
When user enters an integer, it is stored in variable number using cin.
Then it is displayed in the screen using cout.
Example: Program to Add Two Integers

#include <iostream>
int main()
{
int firstNumber, secondNumber, sumOfTwoNumbers;
cout << "Enter two integers: ";

cin >> firstNumber >> secondNumber;
// sum of two numbers in stored in variable sumOfTwoNumbers

sumOfTwoNumbers = firstNumber + secondNumber;
// Prints sum
cout << firstNumber << " + " << secondNumber << " = " << sumOfTwoNumbers;
return 0;
}
Output
Enter two integers: 4
5
4 + 5 = 9
In this program, user is asked to enter two integers. These two integers are stored in
variables firstNumber and secondNumber respectively.
Then, the variables firstNumber and secondNumber are added using + operator and stored
in sumOfTwoNumbers variable.
Finally, sumOfTwoNumbers is displayed on the screen.
Example: Compute quotient and remainder

#include <iostream>
int main()
{
int divisor, dividend, quotient, remainder;
cout << "Enter dividend: ";

cin >> dividend;
cout << "Enter divisor: ";

cin >> divisor;
quotient = dividend / divisor;
remainder = dividend % divisor;
cout << "Quotient = " << quotient << endl;

cout << "Remainder = " << remainder;
return 0;
}
Output
Enter dividend: 13
Enter divisor: 4
Quotient = 3
Remainder = 1
The division operator / is computes the quotient (either between float or integer variables).
The modulus operator % computes the remainder when one integer is divided by another (modulus operator
cannot be used for floating-type variables).
Example: Find Size of a Variable

#include <iostream>
int main()
{
cout << "Size of char: " << sizeof(char) << " byte" << endl;
cout << "Size of int: " << sizeof(int) << " bytes" << endl;
cout << "Size of float: " << sizeof(float) << " bytes" << endl;
cout << "Size of double: " << sizeof(double) << " bytes" << endl;
return 0;
}
Output
Size of char: 1 byte
Size of int: 4 bytes
Size of float: 4 bytes
Size of double: 8 bytes
Example: Swap Numbers (Using Temporary Variable)

#include <iostream>
int main()
{
int a = 5, b = 10, temp;
cout << "Before swapping." << endl;

cout << "a = " << a << ", b = " << b << endl;
temp = a;
a = b;
b = temp;
cout << "\nAfter swapping." << endl;

cout << "a = " << a << ", b = " << b << endl;
return 0;
}
Output
Before swapping.
a = 5, b = 10
After swapping.
a = 10, b = 5
To perform swapping in above example, three variables are used.
The contents of the first variable is copied into the temp variable. Then, the contents of second variable is
copied to the first variable.
Finally, the contents of the temp variable is copied back to the second variable which completes the
swapping process.
Example: Print ASCII Value in C++

#include <iostream>
int main()
{
char c;
cout << "Enter a character: ";
cin >> c;
cout << "ASCII Value of " << c << " is " << int(c);
return 0;
}
Output
Enter a character: p
ASCII Value of p is 112
When we explicitly print the integer value of a char type, it's corresponding ASCII value is printed.

Lab Manual

Uploaded by

Document Information

Original Title

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

Lab Manual

Uploaded by

Copyright:

Available Formats

Lab Manual

Department of Mechanical Engineering

University of Engineering & Technology

Detailed Lab Plan:

1 LAB 1 (INTRODUCTION TO DOCUMENTATION TOOLS)

1.1 GOALS OF THE DAY:

1.1 INTRODUCING THE WORD USER INTERFACE:

Figure 1: A document displayed in the app window

Identify app window elements

Figure 2: Your ribbon might display additional tabs

Figure 5: Examples of buttons with separate

Figure 4: ScreenTips can include the

Figure 6: At 1024 pixels wide, most button labels are visible

Figure 7 You can specify which items to display in status bar

Figure 8: Ribbon display options menu

1.2 CREATE AND MANAGE DOCUMENTS:

2.2.1 Create documents:

Figure 11: The Start screen appears by default

Figure 12: Templates Figure 13: Templates

2.2.2 Writing text in Word using Tabs:

Figure 14: Font-group and text effects

Figure 15: Alignment options

Ctrl+P Printing a document

2 LAB TASKS (TO BE PERFORMED IN LAB)

2.1 WRITE AN APPLICATION TO THE CHAIRMAN OF DEPARTMENT FOR THE

Figure 19: Font group

Figure 17: Changing font

Figure 20: Changing font

Figure 18: New document

Figure 21: Paragraph group

Figure 22: Saving a document Figure 23: Saving your file

Figure 25: Page setup dialog box

Figure 24: Paper types in Word

Figure 26: Insert pictures

Figure 28: Insert picture dialog box

Figure 27: Format picture option

Figure 29: Wrap text options Figure 30: Formatting options

Figure 31: Font color palette

Figure 32: Text

Figure 33: Text highlighting colour palette

Figure 34: Word art

Figure 35: Checking print preview

Figure 37: Symbols

Figure 38: Symbols dialog box

Figure 39: Education information table

2.3 CREATE A BIO DATA FORM AND FILL IT.

2.4 CREATE REFERENCES IN IEEE FORMAT

Figure 40: Manage resources

Figure 41: Create source dialog box

Figure 42: Bibliography

Figure 43: Design option for references

6. A slide that links to a web page. (see # 21, 22, 23)

1. To change your slide layout

2. To change your background color

3. To make design changes that will apply to ALL slides

4. To create new slides

5. To view all of your slides in a storyboard format

6. To move text elements

8. To create a new text box

Click and drag on the slide to create a rectangle

9. To add lines or shapes

Click and drag to create a shape or line.

10. To change line weight