GREEN Computer Book-8 201 HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form are: < form> input elements < /form> The Input Element The most important form element is the input element. It is used to select user information. It can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below. Text Fields <input type="text" /> defines a one-line input field that a user can enter text into:
202 GREEN Computer Book-8 The form itself is not visible. Also note that the default width of a text field has 20 characters. Password Field <input type="password" /> defines a password field: Radio Buttons <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE limited number of choices:
GREEN Computer Book-8 203 Checkboxes <input type="checkbox" /> defines a checkbox. Checkboxes let a user select one or more options of a limited number of choices. Submit Button <input type="submit" /> defines a submit button. A submit button is used to send data entered in form to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: < form name="input" action="html_form_action.asp" method="get"> Username:< input type="text" name="user" /> < input type="submit" value="Submit" /> < /form>
204 GREEN Computer Book-8 If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action. asp". The page will show you received input. Some commonly used HTML Tags TAGS ATTRIBUTES FUNCTIONS <BODY> </BODY> BGCOLOR = " " Changes the colour of the body background BACKGROUND = " " Sets a picture as body background TOPMARGIN = " " Sets the top margin of a page BOTTOMMARGIN = " " Sets the bottom margin of a page BOTTOMMARGIN = " " Sets the bottom margin of a page LEFTMARGIN = “ ” Sets the left margin of a page <HR> SIZE = " " Lets to set the size of the horizontal line in pixels or percentage <BR> WIDTH = " " Sets the width of the horizontal line in pixels COLOR = " " Sets the colour of the line ALIGN = " " Sets the alignments of the line in the page to left, right or center <P> ALIGN = " " Sets the alignment of text in a paragraph to left, right, center or justify <!> Sets comments or remarks <FONT> </FONT> FACE = " " Sets the font style of text SIZE = " " Sets the font size of text COLOR = " " Sets the font colour of text
GREEN Computer Book-8 205 <IMG> </IMG> SRC = " " Sets the path of a picture ALIGN = " " Sets the alignment for a picture to left, right or center BORDER = " " Sets the border of a picture HEIGHT = " " Sets height of a picture WIDTH = " " Sets width of a picture ALT = " " Displays text in case image is not displayed by the user <OL> </OL> TYPE = " " START = " " <UL> TYPE = " " Declares type of bulleted list as fill round, disc, square, circle etc <LI> </LI> Defines item list within a cell <TABLE> </TABLE> Inserts a table into a web document BORDER = " " Sets the width of shaded border around a table BORDERCOLOR = " " Sets the colour of the border CELLSPACING = " " Defines the amount of space between the cells in a table CELLPADDING = " " Defines the amount of space between the edges of the cell and its content HEIGHT = " " Sets the height of a table WIDTH = " " Sets the width of a table <TR> </TR> Defines a table row Align = " " Sets alignment to left, right or center BACKGROUND = " " Sets background picture for a cell BGCOLOR = " " Sets background colour for a cell BORDERCOLOR = " " Sets the border colour of a cell. <TH> Sets the table heading
206 GREEN Computer Book-8 <TD> </TD> Defines a cell containing data ALIGN = " " Sets the alignment of text inside the cell to left, right or center VALIGN = " " Sets the vertical alignment of text in the cell to top, middle or bottom BACKGROUND = " " Sets background picture for a cell BGCOLOR = " " Sets background color for a cell COLSPAN = " " Combines number of columns together ROWSPAN = " " Combines number of rows together BORDERCOLOR = " " Sets border color of a cell <A> </A> Creates a link with other document/s or within the same page HREF = " " Specifies the path of webpage file NAME = " " Specifies name of the section to be linked within the same web page TITLE = " " Displays message on a link while Mouse over <MARQUEE> </MARQUE> Scrolls text around a page BEHAVIOR = " " Sets movement behavior of text as alternate, scroll or slide DIRECTION = " " Sets the direction of marquee text movement, left or right BGCOLOR = " " Sets background colour for marquee text
GREEN Computer Book-8 207 POINTS TO REMEMBER 1. HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display. 2. HTML Tags are the instructions which are used to create HTML document that can be opened by the browsers and by other agents worldwide if uploaded in WWW. 3. Attributes are the additional instructions that further define the behavior of the element. 4. The BODY of the document contains the actual information. 5. On a web page, text flows continuously across the page regardless of carriage returns or white spaces in the html code. 6. Table is the best tool for organizing data in rows and columns. 7. A horizontal rule is a dividing line placed across the page of the document. 8. An input element can be of type text field, checkbox, password, radio button, submit button, and more. 9. Links or hyperlinks are the most important part of the World Wide Web. 10. The description lists in which a word and their associated definitions are paired together, as in a glossary, each with its own tag. 11. A form can contain input elements like text fields, checkboxes, radiobuttons, submit buttons and more. 12. A submit button is used to send data entered in form to a server. 13. <HEAD> tag defines the information that would appear in the header section of documents. 14. <TITLE> tag displays the title text on the Title bar of browser’s window. 15. Check boxes let a user one or more options of a limited number of choice. Exercise 1. Answer the following questions: a. What do you know about HTML? b. What is the difference between tag and attributes? c. Write importance of BODY tag in HTML. d. What is the use of <IMG> tag?
208 GREEN Computer Book-8 e. How can we put link in a web page? f. What is the use of <TABLE> tag? g. Differentiate between <OL> and <UL> tag. h. What is Tag in HTML? Write its type. 2. What are the following tags used for in HTML? a. <FONT> b. <TABLE> c. <TR> d. <TD> e. <BR> f. <HR> g. <TH> 3. State whether the following statements are TRUE or FALSE: a. The horizontal rule tag is used to break a text in a paragraph. b. Container tags are the ones which have only Start tag. c. MARQUEE tag scrolls text top to button only. d. The head section specifies the main content of an HTML document. e. There are six levels of headings in HTML. 4. Fill in the blanks with the correct option: a. HTML stands for ........................... b. All HTML tags are enclosed within ........................... and ........................... brackets. c. Internet Explorer is a ........................... d. The three types of lists that can be inserted in HTML are ..........................., ........................... and ........................... e. We can insert images in an HTML document by using the ........................... tag. f. We use ........................... tag to link to another document. 5. Write HTML tags to create following page. TAGS ATTRIBUTES FUNCTIONS
GREEN Computer Book-8 209 LAB Practice1 1. Let us try to solve example. A. Type the following codes in notepad: <html> <body> <table width="100%" border="0" height="100%"> <tr height="25%"> <td colspan="2" bgcolor="#FFA500"> <h1>I love Nepal</h1> </td> </tr> <tr height="50%" valign="top"> <td bgcolor="#FFD700" width="100px" align="top"> <a href="page3.htm">Mountains<br/></a> <a href="page4.htm">Himalaya<br/></a> Festivals<br/></a> <a href="page5.htm">Tourism</a><br> <a href="page6.htm">Photo Gallery</a> </td> <td bgcolor="#EEEEEE" height="200px" width="400px" align="top"> <h4> Festivals of Nepal </h4> <OL> <a href="dasain.htm"><li>Dashain</a> <li>Tihar <a href="Chhath.htm"><li>Lhosar</a> <li>Udhauli Uvauli <li>Holi <li>Teej
210 GREEN Computer Book-8 <li>Dipawali <li>Bakra Id </ol></td> </tr> <tr height="15%"> <td colspan="2" bgcolor="#FFA500" align="center"> Copyright ©</td> </tr> </table> </body> </html> B. Save the file as "yyy.htm". Practical questions 1. Write HTML tags to create table and enter some data. 2. Write HTML tags to display data in ordered list. 3. Write HTML tags to display data in unordered list. 4. Prepare a webpage to describe your school. 5. Prepare a webpage to describe Dahain festival. 6. Prepare a webpage to describe the beautiful places of Nepal. Use hyperlink and images in the webpage.
GREEN Computer Book-8 211 16 Multimedia Introduction Multimedia is an interactive media and provides multiple ways to represent information to the user in a powerful manner. It provides an interaction between users and digital information. It is a medium of communication. Some of the sectors where multimedia is used extensively are education, training, reference material, business presentations, advertising and documentaries. By definition "Multimedia is a representation of information in an attractive and interactive manner with the use of a combination of text, audio, video, graphics and animation." In other words, we can say that multimedia is a computerized method of presenting information by combining textual data, audio, visuals (video), graphics and animations. For examples: E-mail, Yahoo Messenger, Video Conferencing, and Multimedia Message Service (MMS). Multimedia as the name suggests is the combination of Multi and Media that is many types of media (hardware/software) used for communication of information. Hardware and Software Components of Multimedia Hardware components of multimedia: Capture devices: Video Camera, Video Recorder, Audio Microphone, Keyboards, mouse, graphics tablets, 3D input devices, tactile sensors, Digitizing/Sampling Hardware Storage Devices: Hard disks, CD-ROMs, drives, DVDs, Blu-ray, etc. Multi Media + Many or more than one Media of communication
212 GREEN Computer Book-8 Communication Networks: Ethernet, Token Ring, FDDI, Intranets, Internets. Computer System: Multimedia Desktop Machines, Workstations, MPEG/VIDEO/ Hardware. Display Devices: CD, quality speakers, HDTV, SVGA, Hi-resolution monitors, colour printers, etc. Hardware Software Required for Multimedia: Multimedia software enables hardware components to perform various tasks like texts and graphics manipulation, audio and video player and animating graphics, etc. Some of the multimedia software are: • Window Media Player • MX player • Animation Pro • Adobe Photoshop Elements of Multimedia Software
GREEN Computer Book-8 213 Elements of Multimedia: • Text- All multimedia productions contain some amount of text. The text can have various types of fonts and sizes to suit the profession at presentation of the multimedia software. • Graphics- Graphics make the multimedia application attractive. In many cases people do not like reading large amount of textual matter on the screen. Therefore, graphics are used more often than text to explain a concept, present background information. “It is said that a picture speaks a thousand of words”. etc. There are two types of Graphics: Bitmap images- Bitmap images are real images that can be captured from devices such as digital cameras or scanners. Generally bitmap images are not editable. Bitmap images require a large amount of memory. Vector graphics- Vector graphics are drawn on the computer and only require a small amount of memory. These graphics are editable. • Audio- A multimedia application may require the use of speech, music and sound effects. These are called audio or sound element of multimedia. • Video- The term video refers to the moving picture, accompanied by sound such as a picture on television. Video element of multimedia application gives a lot of information in small duration of time. Digital video is useful in multimedia application for showing real life objects. • Animation- Animation is a process of making a static image look like it is moving. An animation is just a continuous series of still images that are displayed in a sequence. Animation can be used effectively for attracting attention. It also makes a presentation light and attractive. Animation is very popular in multimedia application. Applications of Multimedia: The following are the common areas of applications of multimedia. Multimedia in Business Multimedia can be used in many applications in a business. Multimedia technology along with communication technology has opened the door for information of global wok groups. Today the team members may be working anywhere and can work for various
214 GREEN Computer Book-8 companies. Thus the work place will become global. The multimedia network should support the following facilities: • Voice Mail • Electronic Mail • Multimedia Based FAX • Office Needs • Employee Training • Sales and Other types of Group Presentation • Records Management Multimedia in Marketing and Advertising Multimedia are extensively used in marketing and advertisement of new product and services to promote sales and revenue. Multimedia boosts communication at an affordable cost which opened the way for the marketing and advertising personnel. Presentations that have flying banners, video transitions, animations, and sound effects are some of the elements used in composing a multimedia based advertisement to appeal to the consumer in a way never used before and promote the sale of the products. Multimedia in Entertainment Entertainment and multimedia are inseparable. Almost all the elements of multimedia are used in the field of entertainment. Multimedia is use in making feature films, cartoon films and animation films. Now a days highly animated movies used multimedia to make special characters and screen the movies. Some of the animated
GREEN Computer Book-8 215 movies are Jurasic Park, Avatar, Bahubali, etc. Multimedia can be used by music arranger and musician for music composition and record of music. Multimedia in Education Many computer games with focus on education are now available in market. Consider an example of an educational game which plays various rhymes for kids. Children can paint pictures, increase the reduced size of various objects etc apart from just playing rhymes. Several other multimedia packages are available in the market which provide a lot of detailed information and playing capabilities to kids. Multimedia in Banks Bank is another public place where multimedia is being more and more applicable in recent times. People go to a bank to open saving/ current accounts, deposit funds, withdraw money, know various financial schemes of the bank, obtain loans, etc. Every bank has a lot of information which it wants to impart on its customers. For this purpose, it can use multimedia in many ways. Bank also displays information about its various schemes on a PC monitor placed in the rest area for customers. Today on-line and Internet banking have become very popular. They use multimedia extensively. Multimedia is thus helping banks give services to their customers and also in educating them about the attractive finance schemes of a bank. Multimedia in Hospital Multimedia are used in hospital for real time monitoring of the condition of patients in critical cases such as illness and accident. The conditions are displayed continuously on a computer screen and can alert the doctor/nurse on duty if any changes are observed on the screen. Multimedia makes it possible to consult a surgeon or an expert who
216 GREEN Computer Book-8 can watch an ongoing surgery live on his PC monitor and give online advice at any crucial juncture. Communication Technology and Multimedia Services The advancement of high computing abilities, communication ways and relevant standards have started the beginning of an era where you will be provided with multimedia facilities at home. These services may include: • Basic television services. • Interactive entertainment. • Digital audio. • Video on demand. • Home shopping. • Financial transactions. • Interactive multiplayer or single player games. • Digital multimedia libraries. • E-newspapers, e-magazines. Careers in Multimedia Careers in multimedia are as varied and as numerous as multimedia products. Multimedia work is usually done by teams. List of some professions are given below: a. Art Director: S/he directs the creation of all art for the project. This work involves a variety of original media, which are changed to digital form for manipulation on the modern artists canvas, the computer. b. Animator: Animators use their finished work by photographing models and sculptures or hand-drawn and painted pictures. 2-D and 3-D software are used specially for animation. c. Graphics Designer: S/he designs and creates products using graphics software such as Photoshop.
GREEN Computer Book-8 217 d. Videographer: S/he creates the video footage that interfaces with the interactive technology of the product. Video is often the most complex, time consuming and resource demanding medium to create. e. Technical Lead: S/he ensures that the technologies and the process of a project works and that it accommodates all project components and media. POINTS TO REMEMBER 1. Multimedia is the combination of text, audio, video, graphics and animation. 2. Graphics make the multimedia application attractive. 3. The term video refers to the moving picture, accompanied by sound such as a picture in television. 4. The text can have various types of fonts and sizes to suit the professional presentation of the multimedia software. 5. Animation is a process of making a static image look like it is moving. 6. Multimedia software are: Adobe Photoshop, MX-player, Animation pro. 7. Hardware components include: Capture devices, storage devices, communication networks, display devices and computer system. 8. Animators use their finished work by photographing models and sculptures or hand-drawn and painted pictures. Exercise 1. Answer the following questions: a. Define the term multimedia. b. List out the hardware components of multimedia. c. List out the elements of multimedia. d. What is the software component of multimedia? List commonly used multimedia software. e. What is animation? f. List out the application of multimedia. g. How is multimedia important in the field of education? h. List out some professional carriers in multimedia
218 GREEN Computer Book-8 2. Match the following. Font moving picture Animation audio Animation pro graphics Image text Video static image looks like it is moving Sound multimedia software 3. State whether the following statements are “True” or “False”. a. Multimedia computers are capable of presenting text, graphics, video, animation and sound in an integrated way. b. Much of the content on the web today can be termed as hypermedia. c. The information presented only in one form is better than the ones which are presented in many formats. d. Multimedia is used only in the field of entertainment. e. Multimedia enhances the interactivity of information to the viewers. 4. Write correct technical terms for the following statements: a. It is the combination of text, audio, video, graphics and animation. b. It is a process of making a static image look like it is moving. c. It is a moving picture, accompanied by sound such as a picture on television. d. They are real images that can be captured from devices such as digital cameras or scanners. e. They are drawn on the computer and only require a small amount of memory. Project Work : Collect the name of highly animated movies and explain how multimedia is used in those movies.
GREEN Computer Book-8 219 Graphics Application (Adobe Photoshop) 17 Introduction Graphic is a very powerful element of multimedia. It makes your document attractive and meaningful. It is said that “A picture speaks a thousand words”. Photoshop is a program that manipulates graphics. Photoshop program is called effective and creative program. Adobe Corporation develops this package. It is specially used for photo editing, cover page designing, photo scanning and giving different types of effect to image. It is not only gives different types of effects but also shapes in required images and the process to decrease the image. It's not possible to publish any effect without Photoshop program. It is a type of multimedia application program. Loading Photoshop • Click Start • Select on Program • Click on Adobe • Click on Photoshop Here you will be able to name your file, set up the correct page size, and orientation for your document.
220 GREEN Computer Book-8 Page Size and Orientation Change the page size by typing in new values for width and height. Page size represents the final size you want after bleeds or trimming other marks outside the page. In the Preset dropdown menu, you can find such common sizes as letter, legal, tabloid, etc. Typing in exact values for height and width gives you more control over the size and orientation of your page. Resolution Resolution is a number of pixels on a printed area of an image. The higher the resolution, the more pixels there are on the page, the better is the quality of the image. However, high resolution increases the size of the file. The standard recommended resolution for printed images is 150 - 300, for Web images - 72. Color Mode Choose a color mode that will best fit your project. For example, when making a graphic for a web site, choose RGB. When making an image for print, choose CMYK. Background Contents • Choose the background: white, color, or transparent. • When you have entered all of your document settings, click OK. • We will get new Photoshop Screen. Opening an Image from a Disk If the image you have is saved on a disk, select File > Open, and then Choose the image file and click Open. To save your file, select File > Save As and type in the new name of the file in the dialogue box.
GREEN Computer Book-8 221 Adobe Photoshop Interface Menu Image name Toolbar The image History Info Swatches Layers Menu Bar: If you look at the top of the screen you will see the Menu bar which contains all the main functions of Photoshop, such as File, Edit, Image, Layer, Select, Filter, View, Window, and Help. Tool Bar: Most of the major tools are located in the Tool bar for easy access. The Image: The image will appear in its own window once you open a file. Image Name: The name of any image that you open will be at the top of the image window as shown above. Palettes: Palettes contain functions that help you monitor and modify images. By default, palettes are stacked together in groups. These are the palettes that are usually visible:
222 GREEN Computer Book-8 Navigator, Color, Histogram, Layer. If none of the palettes are visible, go to Window in the Menu bar and choose palettes you need to work with. Below is the description of the most commonly used palettes in Adobe Photoshop CS3. Navigator The Navigator palette allows you to resize and move around within the image. • Drag the slider, click on the Zoom In and Zoom Out icons, or specify the percentage to navigate the image. Colour, Swatches, Styles The Colour palette displays the current foreground and background colors and RGB values for these colors. You can use the sliders to change the foreground and background colors in different color modes. You can also choose a color from the spectrum of colors displayed in the color ramp at the bottom of the palette. Swatches: In the Swatches palette you can choose a foreground or background color or add a customized color to the library.
GREEN Computer Book-8 223 Styles: The Styles palette allows you to view, select, and apply preset layer styles. By default, a preset style replaces the current layer style. You can use the styles in the palette or add your own using the Create New Style icon. Layers Layers let you organize your work into distinct levels that can be edited and viewed as individual units. Every Photoshop CS3 document contains at least one layer. Creating multiple layers lets you easily control how your artwork is printed, displayed, and edited. Layer Visibility: The eye shows that the selected layer is visible. Click on or off to see or to hide a layer. Layer Locking Options: Click the checkered square icon to lock Transparency; click the brush icon to lock the Image; click the arrow icon to lock the Position; click the lock icon to lock all options. Layer Blending Mode: By choosing a particular blending mode from the dropdown menu you can create a variety of special effects. Fill Fill by typing in a value or dragging the color of the image or object.
224 GREEN Computer Book-8 Opacity: By typing in a value or dragging a slider you can specify the transparency of the entire layer. Layer Lock The icon shows when the layer is locked and disappears when it is unlocked. Double-click the icon to unlock the layer. Layer Options Menu Click the black triangle to see the following options: New Layer, Duplicate Layer, Delete Layer, Layer Properties, etc Link Layers Can be used to link layers together. Layer Styles If a layer has a style, an "F" icon is shown at the bottom of the Layers palette. Click the little black triangle to see style options. Layer Mask A grayscale image, with parts painted in black hidden, parts painted in white showing, and parts painted in gray shades showing in various levels of transparency. Layer Set This option helps to organize images with multiple layers. Click the icon to create a folder for several layers. Create New Fill or Adjustment Layer Click this icon to create a new layer. Delete Layer To delete a layer, select a layer in the Layers palette and drag it to the trash can icon; or, select a layer and click the icon.
GREEN Computer Book-8 225 Tool Box There are many tools but only the basic tools will be discussed here. A B C D F G E Selection Tools Marquee: The Marquee Tools are used for selecting objects such as rectangles, squares, and ellipses. • Click the tool button, choose a rectangular or an elliptical marquee.
226 GREEN Computer Book-8 • Drag the marquee over the area of the image you wish to select. Move: The Move Tool is used to move selections, objects, and layers. • Click the tool button, then click on any object on the page you wish to move. Lasso: There are several Lasso Tools which are used to make irregular selections. There is a polygonal lasso tool for polygon selections, and a magnetic lasso tool which automatically follows edges of objects. Magic Wand: The Magic Wand Tool selects an area of similar colors in a single click (such as the white in the cloud logo and here in duck picture). • Click the tool button, then • Click on the area of the image you wish to select Crop and Slice Tools Crop Tool: The Crop Tool allows users to redefine their active image area but not resize the ENTIRE image. It’s sort of like cutting out a smaller picture from a larger photo with a pair of scissors. • Select and cut parts of an image. • Click the tool button, then click and drag the tool over the part of the image that you want to keep. Resize the selected area • Drag the squares at the sides and corners. Click the RETURN key when your crop box is sized correctly. Slice Tool: Used to cut images into slices, which can be exported to a web page.
GREEN Computer Book-8 227 Retouch Tools Healing Tools: There are several healing tools in Photoshop which are used to repair imperfections in images, or handle blemishes and red-eye. Clone Stamp Tool: With the Clone Stamp Tool, a user may select a source starting point somewhere on an image, and then paint elsewhere using that starting point as a reference, effectively cloning the source. Eraser Tool: The Eraser Tool can be used to erase parts of an image, selection, or layer. Sharpen Tool: The Sharpen Tool is used to sharpen edges in an image, while the Blur Tool blurs edges. The Smudge Tool smudges an image, similar to using the finger paint.
228 GREEN Computer Book-8 Dodge Tool: The Dodge Tool lightens parts of an image while the Burn Tool darkens. The Sponge Tool is used to saturate, or de-saturate parts of an image. Painting Tools Brush and Pencil: The Brush and Pencil tools are used to paint strokes in graphics. These tools can be highly customized for very effective painting. Fill Tools: The Fill Tools are used to fill entire layers, selections and areas with a solid color, or gradient. Drawing & Type Tools Type Tools: The Type Tools are used for creating and setting type in an image. Both vertical and horizontal type can be created.
GREEN Computer Book-8 229 Pen Tools: The Pen Tools are used to create clear shapes and paths which can be used as vector objects that can be scaled to any size. Custom Shapes: Custom Shapes are vector objects that can be created from a list of presets (including user created shapes). Foreground / Background Color A foreground color and background color can be set to be used to paint with, color text, and fill objects among other things. This view provides an easy way to see what colors are currently selected, and allows for easy switching between two different colors. Saving Saving Document Remember to save your work often. Saving frequently reduces the risk of losing the work you have been doing. To save your Photoshop document, do the following: 1. Click File > Save. 2. Navigate to the place you would like your document to be saved by using the dropdown menu and the navigation window. 3. Enter the name of your document in the Save As text field.
230 GREEN Computer Book-8 4. Choose a format to save your project from the Format dropdown menu. 5. Click the Save button in the bottom right corner of the dialogue box. 6. Check to make sure that your document is saved in the place you intended. Note: If you save your file as PSD (default Photoshop saving format) your layers will be preserved, but the file size will be large. If you save your file as JPEG (a common image format) your layers will be flattened and become one layer. The file size though will be significantly smaller. Important shortcut keys Photoshop Effect Shortcut Keys New layer via cut Ctrl+Shift+J Increase or decrease size of selected text by 10pts Ctrl+Alt+Shift+>/< Selecting Ctrl+Shift+D Hue or Saturation Ctrl+U Select all layers Ctrl+Alt+A Flatten layers Ctrl+Alt+Shift+E Free Transform Cmd+T Fill Shift+F5 Content Aware Move Shift+J Black and white dialog box Shift+Ctrl+Alt+B Zoom in Ctrl+plus(+) Select bottom layer Alt+Comma(,) Blending modes Shift+plus(+) or minus(-) Render Opt+Shift+Ctrl+R Deselect all but the intersected area Shift+Alt+drag Increase or decrease kerning or tracking Alt+Right/Left Arrow Invert selection Ctrl+Shift+I New layer via copy Ctrl+J
GREEN Computer Book-8 231 Select a colour from an image Alt+Brush Tool First or last brush </> Show or Hide selection on selected type Ctrl+H Copy multiple layers Shift+Ctrl+C Close & go to bridge Ctrl+Shift+W Change image size Ctrl+Alt+i Deselect from the selection area Alt+drag Toggle airbrush option Shift+Alt+P Deselect the entire image Ctrl+D Create clipping mask Ctrl+Alt+G Auto Tone Shift+Ctrl+L Saving and closing Ctrl+Shift+Alt+S Show or Hide Polygons Opt+Ctrl+X Color Balance Ctrl+B Reveal All Opt+Shift+Ctrl+X Move a selection Spacebar+Marquee Tool Zoom out Ctrl+Minus(-) Viewing Ctrl+Alt+0 Align text left or center or right Ctrl+Shift+L/C/R Previous or next brush ,/. Lens correction Shift+Ctrl+R Select individual channels Ctrl+3(red), 4(green), 5(blue) Send layer back Ctrl+[ Bring layer to top of stack Ctrl+Shift+] Text in Photoshop Ctrl+Shift+>/< Increase or decrease brush size ]/[ Send layer to bottom of stack Ctrl+Shift+[
232 GREEN Computer Book-8 Desaturate Ctrl+Shift+U Bring layer forward Ctrl+] Fit on screen Ctrl+0 Camera Raw Filter Shift+Ctrl+A Curves Ctrl+M Merge visible Layers Ctrl+Shift+E Content aware scale Ctrl+Shift+Alt+C Increase or decrease brush hardness }/{ Select top layer Alt+Period(.) Find the sizing handles Ctrl+T, then Ctrl+0 Adaptive Wide Angle Opt+Shift+Ctrl+A POINTS TO REMEMBER 1. Photoshop is a type of multimedia software. 2. It is specially used for photo editing, cover page designing, photo scanning and giving different types of effects to images. 3. Resolution is the number of pixels on a printed area of an image. 4. Palettes contain functions that help you monitor and modify images. 5. The Navigator palette allows you to resize and move around within the image. 6. The Marquee Tools are used for selecting objects such as rectangles, squares, and ellipses. 7. Lasso Tools are used to make irregular selections. 8. The Crop Tool allows users to redefine their active image area but not resize the ENTIRE image. 9. The Sharpen Tool is used to sharpen edges in an image, while the Blur Tool blurs edges. 10. The Brush and Pencil tools are used to paint strokes in graphics. 11. The Type Tools are used for creating and setting type in an image.
GREEN Computer Book-8 233 Exercise 1. Answer the following questions: a. Define is graphics. b. What is Adobe Photoshop? c. Write steps to open Adobe Photoshop. d. Write steps to save Photoshop document. e. What is the function of the marquee tool? f. What is layer? List out its options? g. What are the functions of palette? h. Define resolution. What is standard recommended, resolution for printed image and web image? 2. Fill in the blanks. a. ………….is used to sharpen edges in an image, while the Blur Tool blurs edges. b. ……………… tools are used to paint strokes in graphics. c. ……………… palette allows you to resize and move around within the image. d. ………………. can be used to erase parts of an image, selection, or layer. e. …………………tools are used to paint strokes in graphics. f. ………………….. are used for creating and setting type in an image. 3. Write the functions of the following shortcut keys: a. Shift + F5 b. Ctrl + J c. Shift + J d. CMD + T e. Ctrl + U f. Ctrl + (+) g. Ctrl + M h. Ctrl + B i. Ctrl + [ j. Ctrl + D 4. Match the following. a. custom shape i. effectively cloning the source b. clone stamp tool ii. distinct level that can be edited viewed c. crop tool iii. vector objects that can be created from a list of presets d. layer iv. select an area of similar colours e. magic wand v. allow user to redefine their active image area
234 GREEN Computer Book-8 LAB Practice 1 This exercise can be solved using the following functions: Paint Bucket Tool, Color Picker, Brush Tool Use the Paint Bucket Tool to color the picture. Make sure to pick the right layer before you use the tool. 1. Save the picture mypic.psd to your folder. 2. Open any picture that is in your computer in Photoshop. It should be in .psd-format because it consists of several layers. 3. Use the Paint Bucket Tool to color each part of the picture. Read about how to pick a color under Color Picker and Eye Dropper Tool in the Tools. 4. Use the Brush Tool to paint a face in it. LAB Practice 2 This exercise can be solved using the following functions: New Picture, Brush Tool, Layers, Eraser Tool 1. Create a new picture. Make it 300 pixels high and 400 pixels wide. The resolution should be 72 pixels/inch. Read more about it under Create A New Picture in the compendium. 2. Use the Brush Tool and various brushes to paint a picture on it. Read more on how to pick different brushes under Brush Tool, and how to change paint colors under Color Picker And Eye Dropper Tool. 3. Do not paint anything on the Background layer. 4. You will make mistakes. Try using the Eraser Tool on some of them to see how it works. 5. Feel free to use several layers for every "thing" in the picture if you want. 6. Rename each layer as you see fit (except for the Background layer, which you can't rename).
GREEN Computer Book-8 235 LAB Practice 3 This exercise can be solved using the following functions: Transform, Move Tool, Opacity, Eraser Tool Use the function Transform to change sizes, places and rotations of all the things in this picture. 1. Save the picture change.psd to your folder. 2. Open any picture as given above the picture in Photoshop. 3. The picture consists of eight layers: seven things and one background. Your task here is to move the things around and use the Transform function to put them where you think they should be, and make them look the way you want. 4. Put the diver out in the water. Use the Eraser Tool set on a medium Opacity to make him look like part of him is below the water's surface. LAB Practice 4 This exercise can be solved using the following functions: Crop 1. Save the pictures crop1.jpg and crop2.jpg to your folder. Open them in Photoshop. 2. Use the Crop Tool on the three pictures to cut them the way you think they'll look the best.
236 GREEN Computer Book-8 Program Development Life Cycle (PDLC) 18 Introduction Whatever things you create or develop, you need to undergo several processes in order to get your work done correctly. If you are constructing a building, you need to analyze several factors like the design of the house, cost of materials required, number of rooms, numbers of storeys, etc. It is the same with the development of a computer program. When you are going to develop a new computer program, you have to accomplish few processes which have been termed as Program Development Life Cycle. When programmers build software applications, they just do not sit down and start writing codes. Instead, they follow an organized plan, or methodology, that breaks the process into a series of tasks. Program Development Life Cycle The process of developing software according to the desired needs of a user by following a basic set of interrelated procedures is known as Program Development Life Cycle. It is a tool used to guide computer programmers through the development of an application. It is an outline of each of the steps used to build software applications. The different steps of program development life cycle have been defined as follows: 1. Problem Analysis 2. Program Design 3. Program Coding 4. Testing and Debugging 5. Documentation 6. Maintenance or Redesign Problem Analysis Maintenance or redesign Problem Design Problem Coding Documentation Testing and Debugging
GREEN Computer Book-8 237 1. Problem Analysis It is very difficult, even impossible to solve a problem by using a computer without a clear understanding and identification of the problem. The process of identifying the problems to be solved before a program is developed is known as Problem Analysis. It is necessary to understand what the user wants and what are the problems that are to be solved by a program. A programmer specifies the kind of input, processing, and output required during this process. This step is very critical for the completion of a satisfactory program. Inadequate identification of a problem leads to the poor performance of the system. The programmer should invest a significant portion of his time in problem identification. If he does not spend enough time at this stage, he may find that his well written program fails to solve the real problem. This step is the process of becoming familiar with the problem. It starts when the programmer is assigned a task. This step includes the collecting and finding requirements and system. The process ends when all the programmer’s questions have been resolved and the requirements of the program are understood. 2. Program Design Once the problem has been identified, the next stage is the program design. A computer is both fast and versatile, but it requires the careful specification of what actions it should take. For the user, there is seldom an opportunity to allow the computer to make an undirected decision. Therefore, the programmer must decide, prior to writing his program, exactly which steps the computer should take to solve an identified problem. Such a functional description of the task is either called an algorithm or results in a diagram called flowchart. Most of the program developers use tools such as pseudo code, flow chart, and hierarchy chart to design programs. 3. Program Coding The third step is the process of transforming the logic documents into a computer language format. This stage translates the program design into computer instructions. These instructions are the actual program or the software product. During this step the programmer eliminates all the syntax and formal errors from the program and all logic errors are detected and resolved during this process. They use programming language like VB, C#, Java, ASP, etc.
238 GREEN Computer Book-8 4. Debugging and Testing This stage is finding and correcting errors in program. Only few programs run correctly for the first time, so debugging is an important and time consuming stage of software development. Programming theorists often refer to program debugging and testing as verification and validation, respectively. Verification ensures that the program does what the programmer intends to do. Validation ensures that the program gives the correct results for a set of tested data. Testing refers to the validation of the program. Testing ensures that the program performs correctly the required tasks. Program testing and program debugging are closely related. Testing is essentially a later stage of debugging in which the program is validated by trying it on a suitable set of cases. Program testing is, however, more than a simple matter of exercising the program a few times. In-depth testing of all possible cases is the best alternative, but this process is usually impractical. Formal validation methods exist, but are only applicable to very simple programs. Thus, program testing requires a choice of tested cases. Among the rules that can aid in program testing are the following: • Make the test plan part of the program design. • Check all minor and special cases. • Select test data on a random basis. • Plan and document software testing just like hardware testing. • Use the maximum and minimum values of all variables as tested data. • Use statistical methods in planning and evaluating complex tasks. There are two goals in preparing a test plan. Firstly, a properly detailed test plan demonstrates that the program specifications are understood completely. Second, the test plan is used during the program testing to prove the correctness of the program. During this step, a general approach to the testing of the program is prepared and documented, indicating the number of tests needed and the purpose of each test. 5. Documentation This stage is the documentation of the program so that those who use and maintain it can understand it, and program can be extended to further applications. Documentation is a stage of software development that is often overlooked. Yet proper documentation is not only useful in the testing and debugging stages, it is also essential in the maintenance and redesign stages. A properly documented program can be easily reused when needed;
GREEN Computer Book-8 239 an undocumented program usually requires so much extra work that the programmer might start from scratch. Among the techniques commonly used in documentation are flowcharts, comments, memory maps, parameters and definition lists, and program library forms. Proper documentation combines all or most of the methods mentioned. Documentation is a time consuming task that the programmer performs simultaneously with the design, coding, debugging and testing stages of software development. Good documentation simplifies maintenance and redesign, and makes subsequent tasks simpler. 6. Program Maintenance This stage is the updating and correcting of the program to account for changing conditions or field experience. Proper testing and documentation should significantly reduce the frequency and extent of required maintenance. Unlike student programs that used for a long time, changes may occur due to: • Newly discovered bugs. • Specification changes. • Specification expansion. • New equipment. The costs involved in program maintenance are usually grossly underestimated by most programmers. It has been studied that in a typical programming environment, over 50% of the time is spent on maintaining the existing programs. So, it becomes really necessary to reduce the costs and the time spent on maintenance. This can be done by the use of the following steps: • Clarity and readability of code. • Portability and generality. • Structured code. • Modularity. • Debugging and testing. • Documentation.
240 GREEN Computer Book-8 POINTS TO REMEMBER 1. The process of developing software according to the desired needs of a user, by following a basic set of interrelated procedures is known as Program Development Life Cycle. 2. The process of identifying the problems to be solved before a program is developed is known as Problem Analysis. 3. Algorithm and flowcharts are Program Designing tools. 4. Coding is the process of transforming the logic documents into a computer language format. 5. The process of finding and correcting of programming errors is known as debugging. 6. Testing is the validation of the program to ensure that the program performs the required tasks correctly. 7. Documentation of the program is done to facilitate those who use and maintain it can understand and extend to further applications. Exercise 1. State whether the following statements are TRUE or FALSE: a. A programmer follows a series of steps before he/she starts coding the program. b. A software program is free of errors at its first design itself. c. An algorithm and flowchart provides basic information to write a program. d. Documentation helps in testing and debugging of a software program. e. Software programs may need to be extended or redesigned. 2. Answer the following questions: a. What is PDLC? b. What are the different stages of PDLC? c. Why is problem analysis important in programming? d. What are the different methods of program design? e. Define debugging with examples. f. Is it necessary to test a program? If yes, why? g. What is documentation? h. Explain the maintenance and redesign stage of PDLC. i. Write any two differences between testing and debugging.
GREEN Computer Book-8 241 Algorithm and Flow Chart 19 Introduction A computer program is developed by programmers. There are so many people who work behind it. Before writing the programming code, a problem needs to be analyzed and designed. Algorithm and flow charts are designing tools. They help in designing program in a sequential set of steps and pictorial representation. Algorithm An algorithm can be defined as a set of clearly defined rules and instructions in a sequence to solve a problem. It is a step-by-step procedure for solving any particular kind of problem including computer oriented computational problems. An algorithm can be written in different kinds of notation such as natural languages and pseudo code. An algorithm helps a programmer in writing a computer program to solve a problem. There is no hard and fast rule for writing an algorithm. Properties of an algorithm 1. There should be a finite number of steps. 2. All steps of an algorithm should be clear and understandable. 3. Steps specified in an algorithm should be applicable in a computer program. 4. An algorithm should be capable of producing output from the given input of instructions after the finite number of steps. 5. Stop the algorithm
242 GREEN Computer Book-8 Example: 1 An algorithm for preparing a cup of Milk tea (Tea Recipe) Step 1 : Start. Step 2 : Pour a cup of milk into a tea kettle. Step 3 : Put the kettle on the fire. Step 4 : Add tea leaves appropriately. Step 5 : Wait for some time until the milk with tea leaves in the kettle boils. Step 6 : Put sugar in a tea cup and pour the tea from the kettle. Step 7 : Serve the tea and drink. Step 8 : Stop. The above example of an algorithm for preparing tea includes all necessary instructions to prepare a cup of tea. It’s a recipe. Let’s see another example that illustrates mathematical computations. Example: 2 An algorithm for calculating and displaying a sum of two different numbers. Step 1 : Start. Step 2 : Read the first number and store in variable. (a) Step 3 : Read the second number and store in variable. (b) Step 4 : Add the a and b and store the calculated value to a variable sum. (sum=a+b) Step 5 : Display the calculated value as result. (sum) Step 6 : Stop. Example: 3 An algorithm to find the greatest of three different numbers. Step 1 : Start. Step 2 : Read the first number as A. Step 3 : Read the second number as B. Step 4 : Read the third number as C.
GREEN Computer Book-8 243 Step 5 : Is A greater than B and A greater than C? If Yes: Print "A is the greatest". If No: Go to Step 6. Step 6 : Is B greater than A and B greater than C? If Yes: Print "B is the greatest". If No : Go to Step 7. Step 7 : Print "C is the greatest". Step 8 : Stop. Example: 4 Write an algorithm to print first ten natural numbers Step 1 : Start. Step 2 : assign a value 1 to variable P (P=1). Step 3 : is p is less than or equal to 10? If “Yes” then . Step 4 : print p. Step 5 : Increase the value of P by 1 i.e. (P = P + 1) and repeat from step 3. If “No” then go to step 6. Step : 6: Stop. Flowchart A flowchart is a diagrammatic or graphical representation that illustrates the sequence of operations to be performed with different symbols to get the solution of a problem. In other words, a flowchart is pictorial representation of an algorithm with different symbols. It presents the flow of instructions in a pictorial way. A flowchart plays a vital role in the programming of a problem in any high level language.
244 GREEN Computer Book-8 Different processes or operations are represented in different symbols and arrows are used to connect the symbols/boxes and to represent flow of control. Flowcharts are used in analyzing, designing, documenting or managing a process or program in various fields. There are different types of Flowchart which are as follows: The flowcharts can be categorized under different types. But we discuss only about program flowchart. 1. Document Flowchart 2. Data Flowchart 3. System Flowchart 4. Program Flowchart Symbols used in Flowchart Name and Symbols Descriptions Oval Start and Stop: They are ovals or rounded rectangles that usually contain the word "Start" or "End". Parallelogram Input and Output: It is a parallelogram which represents the instruction about the input or output in a flowchart. Rectangle Processing: Rectangle symbol allows you to write the instruction of calculations and computations within the symbol. Diamond Decision making: Diamond symbol is used to write conditions to make decision. This symbol branches the control flow to different parts of the flowchart responding ‘Yes’ or ‘No’. Circle Connector: Circle with label is used to represent a point at which the flowchart connects with another process. The name or reference for the other process should appear within the circle.
GREEN Computer Book-8 245 Annotation Annotation: It allows you to write remarks or comments about symbols or logics used in flowchart. Arrows Flow lines: It allows you to connect different symbols to show the flow of program. It shows the flow of direction to up, down, left and right in a flowchart. Example 1 Draw a flowchart to find the sum and product of two numbers. Start Read two numbers (a, b) Add a and b and store in sum (Sum = A + b) Display output (sum) Stop
246 GREEN Computer Book-8 Example 2 Draw a flowchart to find the greatest number from two input numbers. Yes No Start Is a > b? Read a and b Print a is greater Print b is greater Stop Example 3 Draw a flowchart to print the sum of first 10 natural numbers. Yes No Start Is A < = 10 A = 1, S = 0 S = S + A A = A + 1 Prin A Stop
GREEN Computer Book-8 247 Exercise 1. Answer the following questions. a. What is an algorithm? b. Why is an algorithm used by programmers? c. List five major features of an algorithm. d. What do you mean by a flowchart? List its types. e. What is program flowchart? f. What are the different types of flowcharts? g. What is a system flowchart? h. Draw and name the standard symbols of flowchart. 2. Write an algorithm and draw a flowchart for the following problems: a. To calculate the area of a rectangle. b. To calculate the area of a circle. c. To calculate the volume of a cube. d. To find profit or loss from the input Selling Price and Cost Price. e. To find the sum and average of five input numbers. f. To calculate simple interest. g. To check whether an input number is "odd" or "even". h. To print first 10 natural numbers. i. To print first 10 odd numbers. j. To print the multiplication table of 9. 3. Write True or False for the following statements: a. An algorithm can be executed in a computer. b. A flowchart is a video representation of an algorithm.
248 GREEN Computer Book-8 c. A system flowchart shows how an entire system works by demonstrating how data flows and what decisions are made to control this event. d. A data flowchart illustrates how data pass through a system. e. Document flow chart is a group of columns that are divided by vertical lines. 4. Write the name and function of the following symbols. Project work : Assume that you are a system analyst. Now you have to gather information by analyzing system of your school.
GREEN Computer Book-8 249 20 Fundamental of QBASIC Introduction BASIC stands for Beginners All-Purpose Symbolic Instruction Code and was first invented by Professor J. G. Kemeny and T. E. Kurtz of Dartmouth College, U.S.A. in 1964. As the name suggests, right from the beginning BASIC was designed to be a beginners’ language but it can be used to write very complex and useful programs. It is a very user-friendly language. BASIC facilitates to develop customized software packages for business application, music and games packages. BASIC language is intended to be simple to learn and to use. It is a generalpurpose language, suited to a wide range of applications. Its mathematical and character handling features are equally powerful. BASIC is intended to be an interactive language. It facilitates the design of program, which permits a ‘conversion’ between the user and the computer. The graphics capabilities of recent version have enhanced the features. There are various types of BASIC programming. Some of them are: BASICA, GWBASIC, TURBO- BASIC, Q-BASIC, QUICK BASIC, APPLE-BASIC etc. QBASIC QBASIC is a product of Microsoft Corporation and is available with MS-DOS version 5. QBASIC has a simple user interface and menu structure. Its design serves to aid the user in developing programs with the least number of steps. The intelligent editor checks the syntax as the program lines are entered. The program is compiled as it is typed. Errors are identified and reported in a way that allows the user to correct immediately. Features of QBASIC QBASIC editor is called a smart editor because of the following features: i. It checks the syntax of the statement as lines are entered. If mistakes are found, it reports accordingly. ii. It converts the reserved words into upper case if syntax is correct.
250 GREEN Computer Book-8 iii. It maintains the space between operator and operand. iv. It provides online help about QBASIC reversed words. iv. QBASIC programs are portable. v. It allows us to write/test/debug the program. Starting QBASIC Make sure that QBASIC.EXE or QB.EXE file exists in your computer and follow the steps. 1. Open the folder containing essential files of QBASIC . 2. Find and select the file QB.EXE 3. Double click on the filename or press Enter key. Or 1. Create a shortcut of QB.EXE to your desktop. 2. Find and select the shortcut of QB.EXE. 3. Double click on it or press Enter key to open. After loading QBASIC, you will see QBASIC window screen on your desktop with Welcome Dialog box.