Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore Flipp Book class 9

Flipp Book class 9

Published by Memorica Graphics, 2021-03-11 12:04:10

Description: Flipp Book class 9

Search

Read the Text Version

Lab Activities 1. Prepare the following page using HTML. Smart Computer Science Book-9 151

HTML FORM HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as user name, password, contact number, e-mail id, etc. The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements, the information of an user is submitted on a web server. Syntax: <form action = \"Script URL\" method = \"GET|POST\"> form elements like input, textarea etc. </form> Attributes: Attributes Description action Backend script ready to process your passed data. method Method to be used to upload data. The most frequently used are GET and POST methods. target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. enctype Specifies how the form-data should be encoded when submitting it to the server (only for method=\"post\") target Specifies where to display the response that is received after submitting the form HTML Form Controls There are different types of form controls that you can use to collect data using HTML form. • Text Input Controls • Check boxes Controls • Radio Box Controls • Select Box Controls • File Select boxes • Hidden Controls • Clickable Buttons • Submit and Reset Button 152 Internet & Web Technology

Text Input Controls There are three types of text input used on forms: • Single-line text input controls: − This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Attributes: Attributes Description type Indicates the type of input control and for text input control it will be set to text. Used to give a name to the control which is sent to the server to be recognized name and get the value. This can be used to provide an initial value inside the control. value Allows to specify the width of the text-input control in terms of characters. size Allows to specify the maximum number of characters a user can enter into the text box. maxlength Example: <!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form > First name: <input type=\"text\" name=\"fname\" value=\"Rudra Narayan \"> <br> <br> Last name: <input type=\"text\" name=\"lname\" > </form> </body> </html> • Password input controls: − This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Smart Computer Science Book-9 153

Example: <!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form > User ID : <input type = \"text\" name = \"user_id\" /> <br> <br> Password: <input type = \"password\" name = \"password\" /> </form> </body> </html> • Multi-line text input controls: − This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <text area> tag. Example: Attributes Description rows Indicates the number of rows of the text area box. cols Indicates the number of columns of the text area box. name Used to give a name to the control which is sent to the server to be recognized and get the value. Example: <!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> 154 Internet & Web Technology

<body> <form> Description <br /> <textarea rows = \"5\" cols = \"50\" name = \"description\"> Enter description here... </textarea> </form> </body> </html> Check box Control Check boxes are used when more than one option is required to be selected. They are also created using HTML <input> tag, but type attribute is set to check box. Attributes: Attributes Description type Indicates the type of input control and for the check box input control, it will be set to check box. name value Used to give a name to the control which is sent to the server to be recognized Checked and get the value. The value that will be used if the check box is selected. Set to checked if you want to select it by default. Example: <!DOCTYPE html> <html> <head> <title>Check box Control</title> </head> <body> <form> <input type = \"checkbox\" name = \"maths\" value = \"on\" checked> Maths <input type = \"checkbox\" name = \"physics\" value = \"on\"> Physics Smart Computer Science Book-9 155

</form> </body> </html> Radio Button Control Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag, but type attribute is set to radio. Attributes: Attributes Description type Indicates the type of input control and for the checkbox input control it will be set to radio button. name value Used to give a name to the control which is sent to the server to be recognized Checked and get the value. The value that will be used if the radio box is selected. Set to checked if you want to select it by default. Example: <!DOCTYPE html> <html> <head> <title>Radio Box Control</title> </head> <body> <form> <input type = \"radio\" name = \"subject\" value = \"maths\" checked> Maths <input type = \"radio\" name = \"subject\" value = \"physics\"> Physics </form> </body> </html> Select Box Control A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more 156 Internet & Web Technology

options. <select> and <option> tags are used. Attributes: Attributes Description size This can be used to present a scrolling list box. Used to give a name to the control which is sent to the server to be recognized name and get the value. If set to \"multiple\" then allows a user to select multiple items from the menu. multiple The value that will be used if an option in the select box box is selected. value Specifies that this option should be the initially selected value when the page loads. selected Example: <!DOCTYPE html> <html> <head> <title>Select Box Control</title> </head> <body> <form> <select name = \"dropdown\" multiple size=5> <option value = \"Maths\" selected>Maths</option> <option value = \"Physics\">Physics</option> <option value = \"Computer\">Computer</option> <option value = \"Biology\">Biology</option> </select> </form> </body> </html> File Upload Box If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file. Smart Computer Science Book-9 157

Attributes: Attributes Description size This can be used to present a scrolling list box. accept Specifies the types of files that the server accepts.. Example: <!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <p> Live demo</p> <form> <input type = \"file\" name = \"fileupload\" accept = \"image/*\" /> </form> </body> </html> Button Controls There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to the button. The type attribute can take the following values. Value Description submit This creates a button that automatically submits a form. reset button This creates a button that automatically resets form controls to their initial values. image This creates a button that is used to trigger a client-side script when the user clicks that button. This creates a clickable button, but we can use an image as the background of the button. Example: <!DOCTYPE html> <html> 158 Internet & Web Technology

<head> <title>File Upload Box</title> </head> <body> <form> <input type = \"submit\" name = \"submit\" value = \"Submit\" /> <input type = \"reset\" name = \"reset\" value = \"Reset\" /> <input type = \"button\" name = \"ok\" value = \"OK\" /> <input type = \"image\" name = \"imagebutton\" src=\"logo.jpg\"; width=\"150\" ; height=\"50\"/> </form> </body> </html> HTML Comment Tags HTML comments are not displayed in the browser, but they can help document your HTML source code. With comments you can place notifications and reminders in your HTML. Syntax: <!-- Write your comments here --> Example: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> Smart Computer Science Book-9 159

Lab Activities 1. Prepare the following online form page using HTML. 160 Internet & Web Technology

CSS (CASCADING STYLE SHEET) CSS describes how HTML elements are to be displayed on screen and in other media. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. It saves a lot of work. It can control the layout of multiple web pages all at once. External style sheets are stored in CSS files. Advantages of CSS a. CSS reduces the code. b. It can make the global change to all documents from a single location. c. It can be defined once and can be accessed in multiple HTML page. d. Easier to maintain and update e. Greater consistency in design CSS Syntax A CSS syntax is a set of rule that consists of a selector and a declaration block: p { color: red; text-align: center;} • The selector indicates the HTML element in which you want to style. • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon. • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. CSS SELECTORS CSS selectors are used to select or find the HTML elements in which you want to style. CSS 3 supports five basic types of selectors: i) CSS element Selector ii) CSS id Selector iii) CSS class Selector iv) CSS Universal Selector v) CSS Grouping Selector Smart Computer Science Book-9 161

CSS element Selector The element selector selects HTML elements based on the element name. Example: <!DOCTYPE html> <html> <head> <style> p{ text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id=\"para1\"> I am also affected.</p> <p>Me too!</p> </body> </html> CSS id Selector • The id selector uses the id attribute of an HTML element to select a specific element. • The id of an element is unique within a page, so the id selector is used to select one unique element. • It is written a hash (#) character, followed by the id of the element to select an element with a specific id. Example: <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; 162 Internet & Web Technology

} Trick & TIP </style> • An id name cannot start with a number! </head> <body> <p id=\"para1\">I am affected by the style.</p> <p>I am not affected by the style.</p> </body> </html> CSS class Selector • The class selector selects HTML elements with a specific class attribute. • To select elements with a specific class, write a period (.) character, followed by the class name. Example-1: In this example all HTML elements with class=\"center\" will be red and center-aligned: <!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class=\"center\">Blue and center-aligned heading</h1> <p class=\"center\">Blue and center-aligned paragraph.</p> </body> </html> Example-2: In this example only <p> elements with class=\"center\" will be center-aligned: <!DOCTYPE html> <html> <head> Smart Computer Science Book-9 163

<style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class=\"center\">This heading will not be affected</h1> <p class=\"center\">This paragraph will be red and center-aligned.</p> </body> </html> Example-3: In this example the <p> element will be styled according to class=\"center\" and to class=\"large\": <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: blue; } p.large { font-size: 150%; } </style> </head> Trick & TIP • A class name also cannot start with a number! <body> <h1 class=\"center\">This heading will not be affected</h1> <p class=\"center\">This paragraph will be blue and center-aligned.</p> <p class=\"center large\">This paragraph will be blue, center-aligned, and in a large font-size.</p> </body> </html> 164 Internet & Web Technology

CSS Universal Selector • The universal selector selects all HTML elements on the page. • To select elements, write a asterisk * character. Example: <html> <head> <style> *{ text-align: center; color: blue; } </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id=\"para1\">Me too!</p> <h2>And me!</h2> </body> </html> CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions. To group selectors, separate each selector with a comma. Example: <!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; Smart Computer Science Book-9 165

color: blue; } </style> </head> <body> <h1>Biggest Heading!</h1> <h2>Bigger heading!</h2> <p>This is a paragraph.</p> </body> </html> Ways to Insert CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are three ways of inserting a style sheet: i) External CSS ii) Internal CSS iii) Inline CSS External CSS With an external style sheet, you can change the look of an entire website by changing just one file. Each HTML page must include a reference to the external style sheet file inside the <link> element of the head section. An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Example: HTML Document <!DOCTYPE html> <html> <head> <link rel=\"stylesheet\" type=\"text/ css\" href=\"mystyle.css\"> 166 Internet & Web Technology

</head> \"mystyle.css\" <body> body { <h1>This is a heading</h1> background-color: lightblue; <p>This is a paragraph.</p> } </body> h1 { color: navy; </html> margin-left: 20px; Internal CSS } An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element of the head section. Example <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { Trick & TIP color: maroon; margin-left: 40px; Note: Do not add a space between the property value and the } unit (such as margin-left: 20 px;). The correct way is: margin-left: </style> 20px; </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Smart Computer Science Book-9 167

Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Example <!DOCTYPE html> <html> <body> <h1 style=\"color:blue;text- align:center;\">This is a heading</h1> <p style=\"color:red;\">This is a paragraph.</p> </body> </html> CSS Background Color CSS color property is used to set the text and background color. Colors are specified using predefined color names. The common names of color are: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, etc. CSS/HTML support 140 standard color names. You can set the background color for HTML elements. Example: <!DOCTYPE html> <html> <body> <h1 style=\"background-color:Tomato;\">Tomato</h1> <h1 style=\"background-color:Orange;\">Orange</h1> <h1 style=\"background-color:DodgerBlue;\">DodgerBlue</h1> <h1 style=\"background-color:MediumSeaGreen;\">MediumSeaGreen</h1> <h1 style=\"background-color:Gray;\">Gray</h1> <h1 style=\"background-color:SlateBlue;\">SlateBlue</h1> <h1 style=\"background-color:Violet;\">Violet</h1> <h1 style=\"background-color:LightGray;\">LightGray</h1> </body> </html> 168 Internet & Web Technology

CSS Text Color You can set the color of text. The color property is used to set the color of the text. The color is specified by: • a color name - like \"red\" • a HEX value - like \"#ff0000\" • an RGB value - like \"rgb(255,0,0)\" The default text color for a page is defined in the body selector. Example: <!DOCTYPE html> <html> <head> <style> body { color: blue; } h1 { Smart Computer Science Book-9 169

color: green; } </style> </head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p> <p>Another paragraph.</p> </body> </html> CSS Border Color You can set the color of borders: Example: <!DOCTYPE html> <html> <body> <h1 style=\"border: 2px solid Tomato;\">Learning CSS</h1> <h1 style=\"border: 2px solid DodgerBlue;\">Learning CSS</h1> <h1 style=\"border: 2px solid Violet;\">Learning CSS</h1> </body> </html> 170 Internet & Web Technology

CSS Fonts The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used. Example: <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p{ color: red; font-family: courier; font-size: 160%; font-style: italic; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> CSS Padding The CSS padding property defines a padding (space) between the text and the border: Example: <html> <head> <style> p{ Smart Computer Science Book-9 171

border: 1px solid powderblue; padding: 30px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> CSS Margin The CSS margin property defines a margin (space) outside the border. Example: <!DOCTYPE html> <html> <head> <style> p{ border: 1px solid powderblue; margin: 50px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> 172 Internet & Web Technology

HTML <div> Tag The <div> tag defines a division or a section in an HTML document. It is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript. Any sort of content can be put inside it. The <div> tag is easily styled by using the class or id attribute. Example: <html> <head> <style> .myDiv { border: 5px outset red; background-color: lightblue; text-align: center; } </style> </head> <body> <div class=\"myDiv\"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> </body> </html> CSS Setting height and width The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element. The height and width properties may have the following values: auto - This is default. The browser calculates the height and width length - Defines the height/width in px, cm, etc. % - Defines the height/width in percent of the containing block. Example : <!DOCTYPE html> <html> <head> <style> Smart Computer Science Book-9 173

div { height: 200px; width: 50%; background-color: powderblue; } </style> </head> <body> <h2>Set the height and width of an element</h2> <p>This div element has a height of 200px and a width of 50%:</p> <div></div> </body> </html> CSS Text Alignment The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. Example : <!DOCTYPE html> <html> <head> <style> h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } p{ text-align: justify; font-size: 20px; } 174 Internet & Web Technology

</style> </head> <body> <h1>Heading 1 (center)</h1> <h2>Heading 2 (left)</h2> <h3>Heading 3 (right)</h3> <p>The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.</p> </body> </html> CSS Links With CSS, links can be styled in different ways. Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are: • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when the user mouses over it • a:active - a link the moment it is clicked Example: <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; Smart Computer Science Book-9 175

} /* selected link */ a:active { color: blue; } </style> </head> <body> <p><b><a href=\"class-9.htm\" target=\"_blank\">This is a link</a></b></p> <p>With CSS, links can be styled in different ways.Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. </p> </body> </html> The float Property The float property is used for positioning and formatting content. E.g. let an image float right to the text in a container. In its simplest use, the float property can be used to wrap text around images. The float property can have one of the following values: • left - The element floats to the left of its container. • right - The element floats to the right of its container. • none - The element does not float (will be displayed just where it occurs in the text). This is default. • inherit - The element inherits the float value of its parent. Example: <!DOCTYPE html> <html> <head> <style> img { float: right; } p{ text-align: justify; 176 Internet & Web Technology

} </style> </head> <body> <h3>Example of Float property</h3> <p ><img src=\"background.png\" alt=\"Pineapple\" style=\"width:170px;height:170px;margin- left:15px;\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </p> </body> </html> Navigation Bars A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense. Having easy to use navigation is important for any web site. With CSS you can transform HTML menus into good-looking navigation bars. Example-1: <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; Smart Computer Science Book-9 177

color: #000; <body> padding: 8px 16px; <h2>Vertical Navigation Bar</h2> text-decoration: none; <ul> } <li><a class=\"active\" href=\"#home\">Home</a></li> li a.active { <li><a href=\"#news\">News</a></li> background-color: #4CAF50; <li><a href=\"#contact\">Contact</a></li> color: white; <li><a href=\"#about\">About</a></li> } </ul> li a:hover:not(.active) { </body> background-color: #555; </html> color: white; } </style> </head> Example-2: <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; 178 Internet & Web Technology

padding: 14px 16px; <body> text-decoration: none; <ul> } <li><a class=\"active\" href=\"#home\">Home</a></li> li a:hover:not(.active) { <li><a href=\"#news\">News</a></li> background-color: #111; <li><a href=\"#contact\">Contact</a></li> } <li><a href=\"#about\">About</a></li> .active { </ul> background-color: #4CAF50; </body> } </html> </style> </head> Background Image The background-image property specifies an image to use as the background of an element. By default, the background-image property repeats an image both horizontally and vertically. Example: <!DOCTYPE html> <html> <head> <style> body { background-image: url(\"background.png\"); background-repeat: no-repeat; background-size:cover; } </style> </head> <body> <h1>Hello World!</h1> <p>This page has an image as the background!</p> </body> </html> • Cover : Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. • No-repeat : The background-image is not repeated. The image will only be shown once. Smart Computer Science Book-9 179

CSS Image Gallery CSS can be used to create an image gallery. A gallery is a collection of pictures. Images are very important to beautify as well as to interpret many complex concepts in a simple way on your web page. Example: <!DOCTYPE html> <html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; height: 230px; } div.gallery:hover { <div class=\"desc\">Add a description of the image here</div> border: 1px solid #777; </div> } div.gallery img { <div class=\"gallery\"> width: 100%; <a target=\"_blank\" href=\"pic2.png\"> height: 150px; } <img src=\"pic2.png\"> </a> <div class=\"desc\">Add a description of the image here</div> div.desc { </div> padding: 15px; text-align: center; <div class=\"gallery\"> } <a target=\"_blank\" href=\"pic3.png\"> </style> <img src=\"pic3.png\"> </head> </a> <body> <div class=\"desc\">Add a description of the image here</div> </div> <<d<aivimtcalgragssesrtc===\"\"g_\"pabillclae1nr.ykp\"\"n>hgr\"e>f=\"pic1.png\"><<//bhotmdly>> </a> 180 Internet & Web Technology

Lab Activities 1. Prepare the following online page using HTML and CSS. Smart Computer Science Book-9 181

Points to Know • The Internet is a global system of interconnected computer networks • World Wide Web, which is also known as a Web, is a collection of websites or web pages stored in web servers and connected to local computers through the internet. • A web browser is a software application used for accessing information on the Web. • Storing your website files on a Web server connected to the internet is known as the web hosting. • Web client is known as the client computer/mobile devices or user computer which is connected to the server computer. • A web page is a document, commonly written in HTML, that is viewed in an Internet browser. • A site or website is a central location of web pages. Multiple web pages make up a website. • A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the internet. • The home page is the main page of a website from which all other pages on the website can be linked. • The Hypertext Transfer Protocol (HTTP) is the client-server network protocol. • A hyperlink is an element in HTML document that links to either another portion of the document or to another document altogether. • Uploading is the process of moving digital files from your computer to a central server. • Download refers to the process of receiving data in the personal computer or device over the Internet. • IOT is a giant network with connected devices. Sensors are embedded in every physical device. • Cloud computing is the delivery of different services through the Internet which include tools and applications like data storage, servers, databases, networking, and software. • HTML (HyperText Markup Language) is the most basic building block of the Web. Terms to Know Alignment : Placement of the text on the screen. Margin : Space between the text and the edge of your document. Padding : Space that's inside the element between the element and the border. Tag : Hidden keywords within a web page that define how your web browser must Upload format and display the content. Download : Data is being sent from your computer to the Internet. : Receive data from a remote system. Password : A secret word or phrase that must be used to gain admission to a place. Attribute : A specification that defines a property of an object. Online : The condition of being connected to a network of computers or other devices. 182 Internet & Web Technology

Worksheet Objective Questions 1. Fill in the blanks: a. The ...................... is a global system of interconnected computer networks. b. A web server is a ..............................having a special software. c. A web page can be accessed by entering a ............................ address. d. Web page is viewed in an internet ............................... e. ............................ is a unique identifier used to locate a resource on the internet. f. The .............................. page is a default page of the website. g. The HTTP is the .................................. network protocol. h. A .................................. is used to link to another portion of a website. i. The ............................ tag is used to define a division or section in a HTML document j. The ............................. property is used for positioning and formatting content. 2. Write 'T' for true and 'F' for false statements: a. Internet is a network of networks. b. World Wide Web is simply known as web. c. Web server performs the intercommunication using HTTP. d. Web browser is an application software. e. Hosting is known as saving your website files on a web server. f. Web browser software is stored in the server computer. g. Web page is commonly written in word processing. h. Web page may also be used as a method to sell products or services to viewers. i. URL is a web address. Smart Computer Science Book-9 183

j. URL is divided into multiple part. k. By default the background-image property repeats an image both vertically and horizontally. l. The closing tag has the same text as the opening tag. m. The title defined by <title> tag is appeared in the title bar. n. Check boxes are used when more option is required to be selected. o. Height and width properties sets the height and width of the area outside of the padding, border and margin of element. p. Radio buttons are used when out of many options, just one option is required to be selected. 3. Circle for the correct option: a. Web browsers are: i) Chrome ii) Firefox iii) Safari iv) All of these b. URL is divided into : i) Multiple part ii) Single part iii) Both iv) None of these c. Search Engine : ii) Ask iii) Both i) and ii) iv) None of these i) Google d. HTML is created by : i) Google ii) Ask iii) Both i) and ii) iv) None of these e. HTML is created by : i) Berners-Lee ii) Gram Bell iii) Pascal iv) None of these f. The extension of HTML file: i) .txt ii) .doc iii) .htm iv) .psd g. HTML document editors: ii) Visual studio code i) Notepad iv) All of them iii) Sublime Text h. HTML tags can be: i)Two types ii) Three types iii) Four types iv) No type 184 Internet & Web Technology

i. Attributes are placed within the: ii) Closing tag i) Opening tag iv) No of these iii) Both i) and ii) j. HTML elements are placed within the: i) Opening tag ii) Closing tag iii) Opening and closing tag iv) None of these k. All the tags are contained within: ii) </html> <html> i) <html> </html> iv) None of these iii) Both i) and ii) l. Unpaired tag: ii) <br> iii) <img> iv> all of these i) <hr> 4. Write the full forms of : a. HTML............................................ b. URL .............................................. c. DNS ............................................ d. IP ................................................ e. HTTP ......................................... d. CSS ............................................... e. IOT............................................. f. WWW ............................................. 5. Match the following: Section of HTML document a. Paired tag Comment tag b. Unpaired tag Positioning of content c. Google d. <div> Protocol e. float Search Engine f. <i> <img> g. http <body> Smart Computer Science Book-9 185

Descriptive Questions 1. Answer the following questions in depth: a. What is the internet? b. What is the world wide web? c. What is a web server? d. What is the use of web browser? e. What does web client mean? f. What is web page? g. What does HTTP mean? h. Differentiate between the terms upload and down load. i. What is IOT? j. What is DNS? k. What is Netiquette? l. What is cloud computing? m. Differentiate between paired and unpaired tag. n What is HTML? o. What does <body> tag contain? p. What is meant by HTML tag? q. What is HTML element? r. What does header contain? s. Differentiate between internal and external link. t. What is CSS selector? u. Differentiate between internal and external CSS. v. Differentiate between Margin and Padding . Logic based Questions 1. Answer the following questions logically: a. Why is a web server used? b. Why do you use a web page? c. Why do you use a search engine d. Why do you use a form? e. Why do you use the element selector? f. Why do you use ID selector? g. Why do you use a class selector? h. Why do you use the universal selector? 186 Internet & Web Technology

i. In which case do you use the grouping selector? j. When do you use the in-line CSS? Application Case Study based questions 1. In the basis of given image, answer the asked questions: i) Identify the HTML element and attribute for this output. ii) Write the CSS style to display this output. iii) It seems an image is repeated both horizontally and vertically. If you want to display only one im- age and fill the full container, what should you do? iv) Write the code to display a single image in actual size of an image as a background in the center of the page. 2. Rampati chaudary's teacher has asked her to open the school's website and download the examination routine. i) Name the software she will need to open the website. ii) What is the first page of the website called? 3. Birbal Chaudary has written an HTML document to create a web page. He wants to add some more blank lines between the paragraphs. Which tag will he use for this case. 4. Jiban Sharma has written the following code to embed a style sheet in an HTML document. <style type=\"text/css\"> body { background-image: blue;background-repeat: repeat:only-x} p{ align: justify; text-color: maroon} i) Identify the error(s) and correct. ii) Write the name of selector(s) iii) Which types of selector are used? iv) Which type of way of inserting CSS is used here? 5. Look at the following CSS code (the h1, h2, and p elements have the same style definitions): h1 { text-align: center; Smart Computer Science Book-9 187

color: red; } h2 { text-align: center; color: red; } p{ text-align: center; color: red; } i) Write the name of selector(s). Which types of selector are used here? ii) It will be better to minimize the code. Which technique would you use to minimize the code? Illustrate it. 6. In the basis of given image, answer the asked questions: i) It seems the position of the image is right hand side, which property is used for this? ii) If you are willing to change the position of an image right to left, what would you do? iii) The color of the title is to be changed into blue, write the appropriate style code. 7. Jitini Chaudhary has created the following list: i) Which type of list property is used in this list? ii) She is not interested to place the bul- let marker, How should she remove? iii) After removing the list marker, she has to add the hyperlink for every item. For this case what should she do? 188 Internet & Web Technology

Lab Project Work 1. Prepare the following home page: Smart Computer Science Book-9 189

Programming Concept CHAPTER 9 Chapter Includes • Introduction of terms of Programming • Programming Language • System Development Life Cycle • Pseudo Code • Algorithm and Flowchart INTRODUCTION A computer is a machine that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks. The common terms included in the programming concept are: Program A computer program is a collection of instructions that can be executed by a computer to perform a specific task. A computer program is usually written by a computer programmer in a programming language. Programming Programming is the process of creating a set of instructions that tell a computer how to perform a task. Basic computer programming involves the analysis and development of a logical sequence of instructions to solve a problem. There can be numerous paths to a solution and the computer programmer seeks to design and code that which is most efficient. Programming can be done using a variety of computer programming languages, such as JavaScript, Python, and C++. Programmer A computer programmer is a skilled professional who codes, tests, debugs, and maintains the comprehensive instructions known as computer programs that devices should follow to execute their functions. PROGRAMMING LANGUAGE A programming language is a formal language comprising a set of instructions that produce various kinds of output. Programming languages are used in computer 190 Programming Concept

programming to implement algorithms. We have already discussed in detail about the programming language and language processor in the chapter 5. SYSTEM DEVELOPMENT LIFE CYCLE The systems development life cycle (SDLC) is a conceptual model used in project management that describes the stages involved in an information system development project, from an initial feasibility study through maintenance of the completed application. SDLC can apply to technical and non-technical systems. Project and program managers typically take part in SDLC, along with system and software engineers, development teams and end-users. SLDC includes the following phases. i) Requirement collection and analysis ii) Feasibility study iii) Design iv) Coding v) Testing vi) Installation/Deployment vii) Maintenance Feasibility study In this stage, we define the problem and scope of existing systems, overview the new system and determine its objectives and confirm project feasibility and produce the project Schedule. Requirement collection and analysis In this stage, we gather, analyze, and validate the information. It is defined the requirements and prototypes for new system, evaluate the alternatives and arrange the requirements. Examine the information needs of end-user and enhances the system goal. Finally, we prepare Software Requirement Specification (SRS) document, which specifies the software, hardware, functional, and network requirements of the system and time frame and cost to complete the project. System Design This stage includes the following: • Design of application, network, databases, user interfaces, and system interfaces using system design tools, like, algorithm. • Transform the SRS document into logical structure, which contains detailed and complete set of specifications that can be implemented in a programming language. • Ensure that the final design must meet the requirements stated in SRS document. • If there is any modification of system that is modified in this stage. • Finally, prepare a model design document which will be used during next phases. Smart Computer Science Book-9 191

Coding In this stage, program is written in the programming language according to the system design and prepare the individual source code module. Testing Testing is the process of execution of programs and finding errors and deficiency and correct them. Here, we test all the modules and ensure that meets the requirement of user like input data, processing system and report generating. Finally, all the modules and database are collected under a single roof as application package and made ready to install to the user's computer. Implementation Implementation is the process of installing software in the user's computer. In this stage, we install the software package to the user's computer, conduct the training to users and use in day to day activities of the organization for a certain time period, which tests the software in real time. System Evaluation The newly implemented system will be evaluated at this stage that helps developers and users to analyze and highlight the major strong and the weak part of the system. After completing this stage, the software is fully ready for real time use. Maintenance/Support The maintenance and support include all the activities such as phone support or physical on-site support for users that is required once the system is installed. It also includes handling the residual errors and resolve any issues that may exist in the system even after the testing phase. Some time the changes that software might undergo over a period of time, or implement any new requirements after the software is deployed at the customer location. PROGRAM DESIGN TOOLS The tools which are used to design the efficient program to meet the user requirement is known as the program design. The most common program design tools are two types: i) Algorithm ii) Pseudocode ii) Flowchart Algorithm Algorithm is a stepwise presentation of procedures of program in simple and phraseless English. It is also a programming tool used by programmer to develop software. It is a logical representation of program procedures in order to obtain 192 Programming Concept

results. So, sometimes, it is called Procedure also. There are no standard rules for algorithm designing, but we can use some common rules which are not ambiguous to another computer literates: An algorithm should have following properties: a. The steps of an algorithm should be written clearly. b. The steps of the algorithm should be executable by the computer, when converted in program code. c. The number of steps involved should be finite. d. Input should be ready before operation. e. Algorithm should give output after executing the number of steps, after writing the program. Sample Algorithm 1. Write an algorithm to convert Fahrenheit temperature into Celsius. Step-1: Start Step-2: Enter Fahrenheit temperature (F) Step-3: Application of formula: C=(F-32)(5/9) Step-4: Displaying the result (C) Step-5: Stop 2. Write an algorithm to find out the area of a triangle when sides are given. Step-1: start Step-2: read a,b and c Step-3: S=(a+b+c)/2 Step-4: A=sqrt((s-a)(s-b)(s-c)) Step-5: Display A Step-6: Stop 3. Write an algorithm to add two numbers entered by the user. Step 1: Start Step 2: Declare variables num1, num2 and sum. Step 3: Read values num1 and num2. Step 4: Add num1 and num2 and assign the result to sum. sum←num1+num2 Step 5: Display sum Step 6: Stop 4. Write an algorithm to find the largest one out of three numbers entered by the user. Smart Computer Science Book-9 193

Step 1: Start Step 2: Declare variables a,b and c. Step 3: Read variables a,b and c. Step 4: If a > b If a > c Display a is the largest number. Else Display c is the largest number. Else If b > c Display b is the largest number. Else Display c is the greatest number. Step 5: Stop Pseudocode Pseudocode is an informal way of programming description that does not require any strict programming language syntax or underlying technology considerations. It is used for creating an outline or a rough draft of a program. Pseudocode summarizes a program’s flow, but excludes underlying details. It should be simple to understand even for a layman or client, hence don’t incorporate too many technical terms. Sample Pseudocode 1. Write Pseudocode to add two numbers: Start Get first number Get Second number Add them Print the answer End 2. Write Pseudocode to find out the greater number out of two input numbers: Start Read two numbers A and B IF A>B THEN Display A is greater ELSE 194 Programming Concept

Display B is greater ENDIF Stop 3. Write Pseudocode to find out the greater number out of two input numbers: Begin Initialize counter to zero Initialize accumulator to zero loop Read input from the keyboard Accumulate input Increment counter While counter<10 Calculate average Print sum Print average End Flowchart The pictorial presentation of the program is called Flowchart. It is a tool and technique to find out solution of programming problems through some special symbols. Different Geometrical symbols are used to show the various operations to solve a problem. The flowchart symbols are connected by arrows to show the sequence of operations. Advantages of Flowchart 1. Flowcharts are used as a visual display for communicating the logic. 2. A flowchart can be used as a model of a program. The study of the flowcharts gives new ideas to solve the problems. 3. A long procedure can be shown in the form of a small flowchart. 4. Flowcharts serve as proper program documentation. A programmer who has designed it can be able to tell his approaches to a new programmer through a flowchart. New programmer can understand it easily in the absence of main programmer. 5. Once the flowchart is completed, it acts as a guideline and makes it easy to write the program. Limitation of the Flowchart 1. Flowcharts are sometimes difficult to translate into programming language code. 2. There is no uniform practice for drawing a flowchart for the same problem. 3. It is a time consuming task. Smart Computer Science Book-9 195

4. Program can be modified, but is not possible to modify the flowchart. It should be redrawn, which becomes costly. 5. When there are complex branches and loops, the flowchart becomes more complicated. Rules for Flowcharting 1. The direction of flow in the flowchart is from top to bottom or from left to right or right to left. 2. Arrowheads are used to show the flow of information or sequence of actions. 3. Use only one ‘Start’ and one ‘Stop’ point. 4. The terms used in the flowchart should be cleared. 5. Flowchart should be cleared. 6. Avoid use of computer language codes in the flowchart. Symbols used in the Flowchart Geometrical Symbol Name of the Symbol Purpose Start/Stop Symbol. It shows start and end of the task. Input/output Symbol. It shows the input output opera- tion of program. Processing Symbol. It show the process or action in the program. Logical/Decision mak- It show the decision making or ing Symbol. choice in the flowchart. Flow Lines. It show the flow of the operation. Connector symbol It is used, if flowchart is not fit on single page to show the connec- tion of different pages. Structure of Algorithm and Flowchart Basically, the following common control structures are required for writing an algorithm. Sequential : The algorithm is written in sequential steps i.e. step 1, step 2, …. , step n within Start and End structure. Selection : For the purpose of selection, If else structure can be used. Looping : Looping is used for repetitive execution. 196 Programming Concept

Worked out Examples of Flowchart Flowchart Sequential Structure START Read P, T, R 1. Nabil Bank has decided to calculate the simple interest @ 10% for their customers. Write algorithm and flowchart for this case. Algorithm Step-1 : START SI=(P*T*R)/100 Step-2 : Read principal amount, time and rate Step-3 : Calculate simple interest PRINT SI Step-4 : Display result. STOP Step-5 : STOP Flowchart 2. Bikrant has given a task to solve the problem of finding out sum, product and difference of any two Start numbers. Algorithm Read A, B Step-1 : START S=A+B Step-2 : Read any two numbers. D=A-B Step-3 : Find the sum, product and difference. P=A*B Step-4 : Display result. Step-5 : STOP PRINT S PRINT D PRINT P Selection Structure STOP 1. A group of class nine has given a class work to draw a flow chart to find out smaller number out of any two number. Algorithm START Step-1 : START Read A , B Step-2 : Ask two different numbers. Step-3 : Compare both numbers to find greater. No IS A<B ? If first number is greater, print it. PRINT B If second number is greater, print it. Yes Step-4 : STOP PRINT A STOP Smart Computer Science Book-9 197

2. Bidhu and his group are assigned a work in the class to write an algorithm and draw a flowchart to find out the greatest number out of three numbers. Algorithm START Step-1 : Start Step-2 : Ask three different numbers. Read A , B, C Step-3 : Compare three numbers with Yes No each other. IS A>B ? - If first number is greatest, print it. IS A>C ? No No Yes IS B>C ? - If second number is greatest, print it. Yes - if third number is greatest, print it PRINT A PRINT C PRINT B Step-4 : Stop STOP 3. School has conducted an exami- nation and decided the grading system in the basis of following condition. Average Grade >80 ‘A+’ >60 ‘A’ START >50 ‘B+’ >40 ‘B’ Read P <=40 C+ Now, write algorithm and draw flowchart . Yes PRINT A+ IS P>80 ? PRINT A Algorithm Step-1 : Start No Step-2 : Ask percentage marks. Yes IS P>60 ? Step-3 : Compare the percentage marks. No - If the percentage is above 80, print A+. Yes PRINT B+ IS P>50 ? - If the percentage is above 60, print A No - If the percentage is above 50, print B+. Yes PRINT B - If the percentage is above 40, print B. IS P>40 ? - If the percentage is below 50, print B+. Step-4 : Stop No PRINT C+ STOP 198 Programming Concept

Points to Know • A computer program is a collection of instructions that can be executed by a computer to perform a specific task. • Programming is the process of creating a set of instructions that tells a computer how to perform a task. • Basic computer programming involves the analysis of a problem and development of a logical sequence of instructions to solve it. • Computer programmer is a skilled professional, who codes, tests, debugs, and main- tains the comprehensive instructions to develop the computer program • A programming language is a formal language comprising a set of instructions that produce various kinds of output. • Phases of SLDC are: Feasibility study, Requirement collection and analysis, System design, Coding, Testing, Implementation, System evaluation,and Maintenance/Sup- port. • Algorithm is a stepwise presentation of procedures of program in simple and phrase- less English. • Pseudocode is an informal way of programming description that does not require any strict programming language syntax or underlying technology considerations. • The pictorial presentation of the program is called Flowchart. It is a tool and technique to find out solution of programming problems through some special symbols. Terms to Know Program : Set of instruction to tell to the computer. Programming : Processes involved to write a program. Logic : Idea to write a program. Coding : Writing instructions to a computer program. Bugs : Errors in the program. Debugging : Finding and removing errors in the programs. Looping : Repetition of task. Smart Computer Science Book-9 199

Worksheet Objective Questions 1. Fill in the blanks: a. The pictorial presentation of ............................... is called flowchart. b. ................................... is an informal way of programming description. c. Algorithm is ................................ presentation of procedures of the program. d. .................................... is the process of creating a set of instructions. e. The number of steps involved in the algorithm should be ........................ f. The direction of flow in .............................. is from top to bottom or left to right or right to left. g. .......................... are used to show the flow of information or sequence of action. 2. State whether the following statements are true of false: a. A computer is a machine that can be instructed. b. Computer can perform arithmetic or logical operation automatically via al- gorithm. c. A computer program is usually written by a programmer. d. Flowchart is a program writing tool. e. A programmer is a skilled professional. f. Programmer takes part in SLDC. g. If there are any modification in a system that is modified in the requirement collection and analysis stage. h. You can use many 'Start' and 'Stop' point. i. There is no uniform practice for drawing flowchart for the same problem. 3. Write the full form of : a. SLDC ............................................ b. SRS ............................................... 200 Programming Concept


Memorica Graphics

Flipp Book class 9
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS