Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Class 8 - Term 2 (2014-2015) - Theory Lab Notes

5,880 views

Published on

Class 8 - Term 2 (2014-2015) - Theory Lab Notes

Published in: Education
  • Be the first to comment

Class 8 - Term 2 (2014-2015) - Theory Lab Notes

  1. 1. Theory Assignment ‐ 1 Class 8 2 mark questions: 1. Name the tag that defines how to divide the window into frames. The <FRAMESET> tag defines how to divide the window into frames. 2. Name the tag that specifies the HTML document to put in a frame. The <frame> tag specifi es which HTML document to put in a frame. 3. Which attribute will you use if you do not want frame windows to be resizable ? The NORESIZE attribute is used if you do not want frame windows to be resizable. 4. Identify the errors and write the correct HTML code. <FRAMESET ROWS="30%,80%"> Error – 80%. The correct HTML code is: <frameset rows="30%, 70%"> 5. Explain how frames can be linked in HTML. A link in one frame can be used to open a page in another frame. For this, frames have to be given names. This is done using the NAME attribute of the <FRAME> tag. <FRAME SRC = “frame2.html” NAME=”main”> Named frames can be targeted by using the TARGET attribute of the <A> tag. <A TARGET = “main” HREF=”frame2.html”>HTML TUTOR/A> Theory Assignment ‐ 2 2 mark questions: 1. Name three software applications used for creating commercial Web Sites. Adobe Dreamweaver, BlueVoda, and Microsoft Publisher are three software applications used for creating commercial Web sites. 2. What do you mean by 'site' in Dreamweaver ? The term ‘site’ refers to a local or remote storage location for the documents on a Web site. 3. Name the two folders used for creating a Web site in Dreamweaver. Local root folder and remote folder are used for creating a Web site in Dreamweaver.
  2. 2. - 2 - 4. How will you insert an image in a Dreamweaver document ? Place the cursor where you want to insert an image on the Web page and follow these steps: i. Click the Images button down arrow and select Image from the menu. ii. The Select Image Source dialog box appears. Navigate to the location of the image file, select the image, and click OK. 5. What is a hyperlink ? A hyperlink is a word, phrase, or image that you can click on to move to a new document or a new section within the current document. 6. Name any four components of the Dreamweaver CS3 window. Title bar, Standard toolbar, Insert bar, and Property Inspector are four components of the Dreamweaver CS3 window. 7. What is the importance of Property Inspector? Property Inspector lets you see and edit the most common properties for the currently selected page element, like text, image, etc. 8. What is the function of the Show Code view button on the Document window toolbar? The Show Code view button on the Document window toolbar displays the HTML code for the Web page. 9. What is the SRC field on the Property Inspector for image properties used for? The SRC field on the Property Inspector for image properties is used to specify the source file for the image. 10. When you move the cursor over a hyperlink, what change is seen in the cursor? When you move the cursor over a hyperlink, the cursor changes to a small hand pointing at the link. 11. Write a short note on the Insert bar of the Dreamweaver CS3 window. The Insert bar contains buttons for creating and inserting objects, including tables and images. When you move the pointer over a button, a tooltip appears with the name of the button. The buttons are grouped into categories, which you can see by clicking the tabs on the top. 12. Write a short note on the Status bar of the Document window. The Status bar is at the bottom of the Document window. It provides additional information about the document you are creating. a. Select tool b. Hand tool c. Zoom tool and Set Magnification d. Window Size e. Document Size and Download time 13. What is a named anchor? What is its purpose? You can link to a particular point of a Web page by creating a named anchor. A Named Anchor is a named position in a document. A Named Anchor lets you set a marker in the document, typically at the beginning of a topic or on top of a long page. Then you can create a link to the named anchor. 14. Write the steps to create a named anchor in a document. i. In Design view, place the cursor where you want the named anchor. ii. Select Insert Named Anchor. or Click Named Anchor in the Insert panel of the Common category. iii. The Named Anchor dialog box appears. Type a name for the anchor, for example, Top, and click OK. The name cannot contain any space. The anchor icon appears where the cursor is in the Document window.
  3. 3. - 3 - 15. Why is the Files panel so important ? The Files panel lets you manage fi les and folders on a local machine or remote server. It also lets you access files on your local disk in the same way as Windows Explorer. 16. How will you insert a Flash Button in a document ? Follow these steps to insert a Flash button in a document: i. Place the cursor where you want to insert the Flash button. ii. In the Insert bar of the Common category, select Media and click the Flash Button option of the menu. Or Select Insert _ Media _ Flash Button. iii. The Insert Flash Button dialog box appears. Select the Style for the button and type the Button text. Select the Font and font Size. Browse to the fi le linked to this button. Theory Assignment ‐ 3 2 mark questions: 1. What are the three image formats supported by most browsers ? Most browsers support the following three formats: i. Graphics Interchange Format (GIF) ii. Joint Photographic Experts Group (JPEG) iii. Portable Network Group (PNG) 2. What is a rollover image ? How many image files are required for a rollover image ? A rollover image, when viewed in a browser, changes as the pointer moves across it. For this, we have two images: i. A primary image that is displayed when the Web page is first loaded ii. A secondary image that appears when the pointer moves over the primary image 3. What is an image map ? An image map is an image divided into clickable regions called hotspots. 4. What are the shapes available for creating image map in Dreamweaver ? Rectangle, circle, or polygon shapes are available for creating image maps in Dreamweaver.
  4. 4. - 4 - 5. What is a frameset ? A frame set is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of each, and the URL of each page that appears in each frame. 6. What happens when you select the Save All option of the File menu ? When the Save All option of the File menu is selected, the Save As dialog box appears. Suitable names for the frameset and frames can be entered, and the OK button is clicked. 7. What are the two ways of selecting a frameset ? To select a frameset, click one of the frameset’s internal frame borders in Design view, or click the frame border in the Frames panel. 8. How will you link to a file so that its content is displayed in a particular frame ? Follow these steps to link a file so that its content is displayed in a particular frame: i. In Design view, select the text or image that will become a hyperlink. ii. Drag the Point to File icon to the linked file in the Files panel. iii. Select the frame name in the Target menu of Property Inspector. Notice that frame names also appear in the menu, besides the usual _top, _self, _parent, and _blank options. 9. How can you change the background color of a document in a frame? The steps required to change the background color of a document in a frame are: a. Select the frame. b. Click Page Properties in the Property Inspector. The Page Properties dialog box appears. c. Click the Background color menu and select a color. 10. How do you select a frameset? What happens to the border when selected? To select a frameset, click one of the frameset’s internal frame borders in Design view or click the frame border in the Frames panel. When a frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line. 11. How do you save a frameset file with frame documents? To save a frameset file with frame documents, click File --> Save All. The Save As dialog box appears. Enter suitable names for the frameset and frames, and click OK. When you save a frameset file with the frame documents, the Save As dialog box appears for saving the frameset and for saving each frame. While saving a frame, you will see a border around the frame. 5 mark questions: 1. Tabulate the attributes of the <FRAME> tag. 2. List out the steps to invoke Dreamweaver. 3. Explain the components of a Dreamweaver window. 4. Explain the options available in Property Inspector. 5. List out the steps to create a Hyperlink in Dreamweaver. 6. List out the steps to create a Named Anchor Link. 7. List out the steps to add Flash Buttons in Dreamweaver. 8. List out the steps to create a rollover image in Dreamweaver. 9. How do you add a link to a Word or Excel application to an existing web page. 10. Explain Image Maps concept in Dreamweaver.
  5. 5. - 5 -
  6. 6. TERM ‐ II (Lab Activity) The Skeletal System Ex. No.:1 Class 8 Note : Create a folder and store all the html files into it. Open the file (index.html) in the browser (Internet Explorer) window to view the output. index.html <HTML> <FRAMESET ROWS="15%,*" FRAMEBORDER="0"> <FRAME SRC="top.html" NORESIZE SCROLLING="no"> <FRAMESET COLs="15%,*" FRAMEBORDER="0"> <FRAME SRC="buttons.html" NORESIZE SCROLLING="no" NAME="frame1"> <FRAME SRC="home.html" NAME="frame2"> </FRAMESET> </FRAMESET> </HTML> top.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="YELLOW"> <FONT FACE="Monotype corsiva" SIZE="12" COLOR="RED"> The Skeletal system</FONT> </BODY> </HTML> buttons.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="#FDF293"> <TABLE> <TR><TD><A HREF="skull.html" TARGET="frame2">SKULL</A></TD></TR> <TR><TD><A HREF="backbone.html" TARGET="frame2">BACK BONE</A></TD></TR> <TR><TD><A HREF="ribcage.html" TARGET="frame2">RIB CAGE</A></TD></TR> <TR><TD><A HREF="limbs.html" TARGET="frame2">LIMBS</A></TD></TR> </TABLE> </BODY> </HTML> home.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="red"> <FONT FACE="Times New Roman" SIZE="5" COLOR="white"><B> Skeletal system is the support system of the human body. It protects the vital organs in our body. It acts as appendages for the muscular system. At birth, the human body has about 270 bones, but the time adulthood is reached, some bones are fused together to give a total of 206 bones in the body.</FONT> </BODY> </HTML>
  7. 7. skull.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="red"> <FONT FACE="Times New Roman" SIZE="5" COLOR="white"><B> Skull is a bony structure in the head of most vertebrates that supports the structure of the face and forms a protective cavity for the brain. The skull is composed of two parts : the cranium and the mandible. Mandible is the only movable jaw in the skull, whereas the upper jaw is called maxilla which is fixed to the cranium. The skull has two sockets known as orbital sockets and the eyes are placed inside these sockets.</FONT> </BODY> </HTML> backbone.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="red"> <FONT FACE="Times New Roman" SIZE="5" COLOR="white"><B> Backbone is normally referred to as vertebral column or spine which is ‘S’ shape. It consists of 33 vertebrae and it is classified into 5 types. They are cervical, thoracic, lumbar, sacral and coccygeal vertebrae. The highest no. of bones are in the thoracic region (12). Unlike other vertebrates, which have tails, humans don’t have tail, since the sacral and coccygeal regions are fused together.</FONT> </BODY> </HTML> ribcage.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="red"> <FONT FACE="Times New Roman" SIZE="5" COLOR="white"><B> The Rib cage is an arrangement of bones in the thorax of humans. It is formed by the vertebral column, ribs and sternum and encloses the heart and lungs.</FONT> </BODY> </HTML> limbs.html <HTML> <HEAD></HEAD> <BODY BGCOLOR="red"> <FONT FACE="Times New Roman" SIZE="5" COLOR="white"><B> A limb is a jointed, appendage of the human body. The upper and lower limbs are commonly called the arms and the legs. Human legs and feet are specialized for two legged locomotion. Human arms are weaker, but very mobile allowing us to reach at a wide range of distances and angles, and end in specialized hands capable of grasping and fine manipulation of objects.</FONT> </BODY> </HTML>
  8. 8. Output: Adobe Dreamweaver Ex. No.:2 The Computer Science teacher has asked the students to make a tutorial in Dreamweaver CS3. Akshay has decided to make a Web site about Input ‐ Output devices he learnt about in class V. The web site consists of three pages : index.html, input.html & output.html SOLUTION Before we invoke Dreamweaver, let us create a folder named devices that contains three image files : input.png , output.png & home_button.png Select New Site option from the Site menu. The Site Definition dialog box appears. Now choose the Advanced Tab.  Now type IO Devices in the Site Name text box.  Click on the Local root folder button to select the folder we have created and click the OK button.  Right click on the Files Panel, choose New File. A new file named untitled.html is created. Rename it as index.html  Similarly, create two more files named input.html and output.html  Now double click on index.html in the Files panel to open that file.  Now type the following text as shown below.
  9. 9.  Now select the text Computer Peripherals and click on the Bold button. The words will then appear in Bold.  Similarly, select ‘Computer Peripherals’ in the second line and click on the Italics button. The words will be displayed in Italics.  Now select the text Input Devices. In the Link Text Box, drag the Point to File icon to input.html in the Files panel. The text will now be blue in color and underlined. This shows that the text is hyperlinked.  Similarly, select the text Output Devices and link it to output.html in the Files Panel. This text will then be hyperlinked.  Double click input.html in the Files Panel to open it in the Document window. Now type the details of the input devices and insert the image input.png in the document. Inserting an Image Place the cursor where you want to insert an image on the web page and follow these steps: • Select Image from the Insert menu. Select Image Source dialog box appears. • Now select the image input.png and click O.K. The image tag accessibility attribute dialog box appears. Type input in the alternate text and click o.k. • Now insert the image home_button to set a link to index.html  Now select the image Home. In the Link Text Box, drag the Point to File icon index.html in the Files panel. This shows that the home button is hyperlinked.  Similarly, Double click output.html in the Files Panel to open it in the Document window. Now type the details of the output devices and insert the image output.png in the document. Insert the button Home and link it to index.html  Preview the index.html file by clicking Preview/Debug in browser. Choose the option Preview in IExplore . Outputs:

×