Practical Notebook for Standard XII (PDF)

 Practical Notebook for Standard XII Practical Notebook Cum Journal Price: ` 72.00.00 Pric e: ` 91 e:` Pri...

 Practical Notebook for Standard XII Practical Notebook Cum Journal Price: ` 72.00.00 Pric e: ` 91 e:` Pric 81.0 0 Practical Notebook prescribed for the subjects Biology, Physics and Chemistry for Standard Twelve as per subject scheme Based on Government approved syllabus and textbook Inclusion of all practicals as per Evaluation scheme. Inclusion of various activities and objective questions Inclusion of useful questions for oral examination Practical notebooks are available for sale in the regional depots of the Textbook Bureau. (1) Maharashtra State Textbook Stores and Distribution Centre, Senapati Bapat Marg, Pune 411004  25659465 (2) Maharashtra State Textbook Stores and Distribution Centre, P-41, Industrial Estate, Mumbai - Bengaluru Highway, Opposite Sakal Office, Kolhapur 416122  2468576 (3) Maharashtra State Textbook Stores and Distribution Centre, 10, Udyognagar, S. V. Road, Goregaon (West), Mumbai 400062  28771842 (4) Maharashtra State Textbook Stores and Distribution Centre, CIDCO, Plot no. 14, W-Sector 12, Wavanja Road, New Panvel, Dist. Rajgad, Panvel 410206  274626465 (5) Maharashtra State Textbook Stores and Distribution Centre, Near Lekhanagar, Plot no. 24, 'MAGH' Sector, CIDCO, New Mumbai-Agra Road, Nashik 422009  2391511 (6) Maharashtra State Textbook Stores and Distribution Centre, M.I.D.C. Shed no. 2 and 3, Near Railway Station, Aurangabad 431001  2332171 (7) Maharashtra State Textbook Stores and Distribution Centre, Opposite Rabindranath Tagore Science College, Maharaj Baug Road, Nagpur 440001  2547716/2523078 (8) Maharashtra State Textbook Stores and Distribution Centre, Plot no. F-91, M.I.D.C., Latur 413531  220930 (9) Maharashtra State Textbook Stores and Distribution Centre, Shakuntal Colony, Behind V.M.V. College, Amravati 444604  2530965 E-learning material (Audio-Visual) for Standards One to Twelve is available through Textbook Bureau, Balbharati... Register your demand by scanning the Q.R. Code given alongside. Register your demand for E-learning material by using Google play store and downloading ebalbharati app. ebalbharati www.ebalbharati.in, www.balbharati.in The Coordination Committee formed by GR No. Abhyas - 2116/(Pra.Kra.43/16) SD - 4 Dated 25.4.2016 has given approval to prescribe this textbook in its meeting held on 30.01.2020 and it has been decided to implement it from academic year 2020-21. INFORMATION TECHNOLOGY STANDARD - TWELVE (Science) SEO IoT, 5G E-Governance Maharashtra State Bureau of Textbook Production and Curriculum Research, Pune. The digital textbook can be obtained through DIKSHA App on smart phone by using the Q.R. Code given on title page of the textbook and useful audio-visual teaching-learning material of the relevant lesson.  © Maharashtra State Bureau of Textbook Production and Curriculum Research, Pune- 411004. The Maharashtra State Bureau of Textbook Production and Curriculum Research reserves all rights relating to the book. No part of this book should be reproduced without the written permission of the Director, Maharashtra State Bureau of Textbook Production and Curriculum Research, ‘Balbharati’, Pune. Co-ordination Information Technology Subject Committee and Study group Dr. Ajaykumar Lolage Special Officer, Work Experience, Shri. Sanjay Kulkarni, Chairman Incharge Special Officer, Smt. Neha N. Katti Health and Physical Education, Shri. Prashant M. Patil Textbook Bureau, Pune Smt. Vijaya A. Parekar Smt. Archana K. Mulay Production Smt. Dipali G. Dhumal Shri. Sachchidanand Aaphale Chief. Production Officer Smt. Jyoti J. Barge Shri. Sachin Mehata Smt. Aasha C. Mohite Production Officer Smt. Sushama S. Patil Shri. Nitin Wani Smt. Sangita A. Jaju Asst. Production Officer Shri. Tayyabali M. Sayyad Paper Shri. Nilesh S. Ghavate 70 GSM Creamwove Shri. Milind Oka Print Order Shri. Prashant D. Hakim N/PB/2022-23/8,000 Printer Shri. Satyawan B. Guram M/S. IMPRESSIONS, KOLHAPUR Shri. Nitin R. Choubey Dr. Ajaykumar S. Lolage (Member Secretary) Publisher Vivek Gosavi, Cover & Illusatrations Controller Smt. Pradnya Kale Maharashtra State Textbook Shri. Sandeep Koli Bureau, Prabhadevi, Typesetting Mumbai-400025 Textbook Bureau, Pune NATIONAL ANTHEM  Foreword Dear Students, Congratulations to all of you for the successful completion of Std XI and welcome to the second year of Higher Secondary Education. The syllabus of Information Technology (Science) at Higher Secondary Level has been revised and implemented in view of the fact that computer is used currently as a tool for various applications, especially in the field of e-Banking, e-Commerce, e-Governance, etc. Higher studies and placements, at present, greatly demand human resources with adequate knowledge in computer applications and information technology. The Information Technology aims to equip students the knowledge, skills and attitudes to become productive employees in the area of computer science and technology. In this course, you all will gain a perspective to become a successful entrepreneur in information Technology and allied sector. Scope of this textbook also provides you all with the foundation for higher studies. Information technology is one of the most significant growth catalysts for the Indian economy. I am sure after completion of HSC with IT, you will acquire skills and competence to enter in the upcoming job market. In Class XI, the syllabus focused on the fundamentals of Computer, computer network, basics of website designing and some knowledge of database. Emphasis is also given to put a strong foundation to develop problem solving skills and create computer programs using JavaScript as a scripting language. You all are also familiar with web page designing and database concepts. The syllabus of Class XII Information Technology (Science) is a continuation to that of Class XI. Hence the textbook designed in accordance with the syllabus, begins with some advance features of HTML5. It also has given vertical ladder to understand JavaScript thoroughly with loop statements. To become a full-fledged web developer with proper knowledge and understanding about server side scripting PHP with database connectivity is also an additional feature of this syllabus. Once you have developed a website it is necessary to optimize its ranking and therefore SEO is introduced in this book. One chapter is dedicated to new technologies like cloud computing, 5G, IoT and AI. The concepts such as E-commerce and E-Governance are the decisive concepts in today’s world and knowledge about the same is must. I hope this book will meet all the requirements for stepping to levels of higher education and pave the way to the peak of success. Each unit comprises of simple activities and demonstrations which can be done by you on your own. It is sure if you carefully study the text and practice the laboratory exercises, you will develop confidence in working with website development, web hosting and analyzing, scripting and also update your knowledge with new and current technologies. (Vivek Gosavi) Pune Director Date : 21 February, 2020 Maharashtra State Bureau of Texbook Bharatiya Saur : 2 Phalguna 1941 Production and Curriculum Research, Pune  For Teachers Dear Teacher, The subject Information Technology (Science) is an optional subject of the Higher Secondary Education. The content is developed in view of the fact that it should be useful to the students for their higher studies and they should be able to use computer as a tool. Besides, if somebody wishes a shift towards the IT field in higher education, the syllabus can cater to their needs. Although the field of IT continues to expand rapidly, it is not feasible to expand the size of the curriculum proportionately. As a result, the syllabus has been designed in such a manner to inculcate the current technical knowledge among the students. The textbook on Information Technology (Science) is developed as per the approaches and methods used in recent era of internet and web. As the curriculum is activity-based, process-oriented and based on constructivism, it demands higher level proficiency and dedication from the part of the teachers for effective teaching. This textbook takes two aspects into consideration - knowledge domain and process domain. The knowledge area of the curriculum of Class XII is a continuation to that of Class XI. The programming aspects to solve complex problems and handle complex data are introduced. Since we are in an era of Internet, a wide coverage is given to the contents required for designing web pages and developing web applications. It also enhances the knowledge of web hosting. The knowledge domain also initiates server side scripting using PHP. The emerging technologies such as Cloud computing, 5G, AI are also included to keep the students updated with current knowledge. The concepts such as E-commerce are also introduced and E-Governance. The knowledge about the same is must for today’s generation. The process domain gives importance to gain the Science and logical method and develop interest for deeper investigation. The SEO topic is introduced to encourage the students to design a perfect website by optimising and ranking the site at top on search engines. While transacting the concepts through activities, it should be ensured that the students are attaining the skills along with learning outcomes. The Textbook IT (Science) is prepared by a team of practicing teachers under the guidance of a panel of subject experts. All possible efforts have been taken to make the books learner-friendly and interesting. There is no denying the fact that our teachers are resourceful and committed, and hence directions towards the right path can make the transaction of the curriculum most effective and productive. Constructive criticism and creative suggestions for improvement of the book are most welcome. Information Technology Subject Committee and Study Group Textbook Bureau, Pune  Competency Statements For Information Technology Standard - XII (All Streams) Competency Theory 1. To create awareness and acquire knowledge about new technology. 2. To acquire in-depth knowledge about technologies related to AI, IOT, 3D Printing, 5G. 3. To enable the student to think and create interest in emerging technology from career point of view. 4. To make students aware about concept of E-commerce. 5. To acquire knowledge about scope of E-commerce. 6. To create awareness about different E-commerce websites and discuss its features. 7. To develop higher order logical skills based on basic knowledge acquired in 11th standard. 8. To make students aware about HTML5’s advanced tags while developing web page. 9. To make students competent in scripting language to create dynamic web page. 10. To acquire knowledge about concept of object. Skill Oriented Practicals (SOP) 1. To inculcate web designing skills using advance tags. 2. To make students confident to create website. 3. To develop skills for programming using DOM. 4. To develop ability to create dynamic web pages using advance features. 5. To develop ability to program for server side scripting. 6. To develop skill to create simple PHP Program. 7. To make student aware about connectivity with database. 8. To develop skill in handling accounting package with advance feature. 9. To make student competent to display and print different accounting report. 10. To acquire skills in recording and manipulating audios. 11. To make student skillful to mix audio. 12. To acquire skills to record, create and manipulate video. 13. To enhance the creative ability by mixing and fusion of the different media.  INFORMATION TECHNOLOGY STANDARD - TWELVE (Science) INDEX No. Title of the Chapter Page No 1 Advanced Web Designing 1 2 Introduction to SEO (Search Engine Optimization) 27 3 Advanced Javascript 35 4 Emerging Technologies (IOT, Cloud computing, AI,5G) 53 5 Server-Side Scripting (PHP) 59 6 E-Commerce and E-Governance 79 Skill Oriented Practicals (SOP) 1. Advanced Web Designing 91 2. Advanced Javascript 94 3. Server-Side Scripting (PHP) 96  1 Advanced Web Designing 1 Let us learn different versions supporting different features. HTML5 is currently used  Student can design the layout of web because it supports mobile technology. pages using CSS. The major browsers are Google Chrome,  Students can learn to design the MozillaFirefox, Microsoft Edge, Safari, website. Opera and Apple support the features of HTML5.  Student can design the web form with validations. 1.2 Forms in HTML5  Students can learn concept of image In eleventh standard we have studied map and Iframe (inline frame). different controls related to form like text, radio, checkbox, submit, reset, select and  The aim is to give the skills to create textarea. HTML WebPages, using HTML5 These controls are used to collect and CSS. different kinds of user inputs, such as contact details like name, address, single 1.1 Advanced Web Designing or multiple options from group of options, as well as clearing and submitting data We have been introduced to basic etc. terminologies related to creation of web pages. The Hypertext Mark-up Language HTML5 has introduced additional (HTML) is an evolving language, with form controls which can also be used for validation purpose. HTML5 advanced elements HTML5 introduces a number of new input type values for the type attribute of tag. Input type Description Defines a color picker Defines a field for entering a number Defines a field for entering a URL. Defines an image as a submit button. Defines a date picker with the year, month and day Defines a field for an e-mail address 1  Input type Description Defines a month and year control in format is "YYYY-MM" Define a range control. Default range is 0 to 100. Defines a date picker that includes the year, month, day and time. Defines a control for entering a time. Defines a week and year control. Defines a text field for entering a search string like a site search or Google search. Defines a file-select field and a "Browse" button for file uploads. Used to define input fields that should contain a telephone number. Input Restrictions A list of some common input restrictions is given below, few of which can be used for validation purpose. Attribute Description disabled Specifies that an input field should be disabled. max Specifies the maximum value for an input field. min Specifies the minimum value for an input field. pattern Specifies a regular expression to check the input values. read only Specifies that an input field is read only (cannot be changed). This acts as a temporary label showing the purpose of a text field placeholder without requiring a label tag. required Specifies that an input field is required (must be filled out). Specifies whether a form or input field should have autocomplete On autocomplete or Off. Specifies that the input field should automatically get focus when the autofocus page loads. height and Specifies the height and width of an width Specifies that the user is allowed to enter more than one value in the multiple element. This works with input types like email and file. 2 Some other useful attributes used with are- 1. id : This is used to identify the html element uniquely through the document object model. 2. class: It is used to apply CSS style to the individual input element. Examples : Forms in html 5 Name: E-mail: Date of Inception: Office time: Number of years completed(between 1 and 100): Office phone number: Add your homepage: The output is as follows Do it Yourself 1. Use multiple attribute in 2. Use pattern attribute in and see the Output. 1.3 tag The meta tag is a tag in html that describes some aspects of contents of a webpage. The HTML tag is used by search engines to search information 3 that is provided with the webpage. This is empty tag (singular tag) which carries information within its attributes. The tag is placed between the and tags. Metadata will not be displayed on the webpage. Attribute of tag Attribute Values Description Name The value of the name attribute Specifies the Name of the meta- can be related to any of the data like the author, keywords or following- i) Author ii) Description description. iii) Keywords iv) copyright e.g. Content It can have any textual matter related to the name as in eg. i. balbharati. ii. advance web designing. iii. like html5 , learn html5 etc. Charset UTF-8, Big5 Specifies the character encoding e.g used by the document, This is called a character encoding declaration. UTF-8 For Indian characters Big5 – for Chinese characters http-equiv refresh , set-cookie, content-type, Used for http response message expires, headers. e.g. every 5 seconds. The browser sends the cookies for the document 4 Example: meta tag examples element you want to style. It could be Declaration Block : The declaration declarations separated by a semicolon. 1. color : yellow; 2. font-size :11 px; Welcome to HTML5 Each declaration contains a property name and value, separated by a colon. Property : A Property is a type of attribute of HTML element. It could be color, border etc. 1.4 Cascading Style Sheets in HTML5 Value : Values are assigned to CSS CSS stands for Cascading Style properties. In the above example, value Sheets. CSS describes how HTML "yellow" is assigned to color property. elements are to be displayed on screen, Selector{Property1: value1; Property2: paper, or in other media. CSS saves a value2} lot of work. It can control the layout Types of CSS of multiple web pages all at once. CSS allows you to control the look and feel There are three methods of of several pages by changing a single implementing styling information to an source. HTML document. 1. Inline CSS CSS Syntax 2. Embedded stylesheet or Internal  A CSS rule set contains CSS  a selector and 3. External CSS  a declaration block. 1. Inline stylesheet : It uses the style attribute in the HTML start tag. 5  Inline CSS is used to apply CSS on a single line or element. For example : The internal style sheet is applied on this heading. Hello CSS This paragraph will not be affected. 2. Embedded stylesheet or internal CSS : This is used to apply CSS on a single document or page. It can affect all the elements of the page. It The output of above program is as is written inside the style tag within follows- head section of html. For example : h1{color: Red;} CSS Properties Property Use Value Example Color Changes the color of the text Color name h1{color: maroon} Background-color To set the background color Color name body{background- in your webpage color:yellow} Font-weight Used to bold text bold or 100, p{font-weight:300} 200…900 Font-style Used to italicize text Italic, oblique or p{font-style:italic} normal Text-decoration This property is used to add p{text-decoration: 1. strike-through marks 1. line-through underline} 2. underline 2. underline a{text-decoration: 3. overstrike 3. overline none} 4. to remove underlines from 4. none links Text-align This property is use to left, right, center h1{text- control the horizontal or justify align:center} alignment of any block-level text that are paragraphs, tables and other elements Font-family This is used to control the Font name p{font- fonts family:arial} 6  Property Use Value Example Font-size This property allows you to px, in, mm, cm, p{font-size:10px} control the size of the font pt Letter-spacing This helps in controlling the px, in, mm, cm, h1{letter-spacing: horizontal spacing between pt 5pt} characters of text Padding This property is used when Pixel h1{padding:30px} you want to add padding (blank spaces) around the content of an element. Border This property adds a border Solid, double, h1{border:double} to a webpage element groove, ridge, inset, outset, dotted or dashed Background-image To set an image as the url(''X'') body{background- background of your webpage where X is the image: path of image url('background. file jpg')} Background-repeat To set the background image repeat no-repeat background-repeat: to repeat or not repeat background-repeat: no-repeat Margin-Left Sets margin area on the left px,pt,cm etc. h1{margin- side of the element. left;10px} 3. External stylesheet : The external An external style sheet can be written style sheet is generally used when you in any text editor, and must be saved want to make changes on multiple with a.css extension. The external css pages. It facilitates to change the look of the entire web site by changing file should not contain any HTML tags. just one file. It uses the tag on Here is how the "style.css" file looks every page and the tag should like: be put inside the head section. Style.css For example : h1{color:navy;margin-left:20px} The output is as follows This is a heading 7 CSS Id Selector The class name should not start The Id selector selects the id with number. attribute of an HTML element to Let's take an example with a class "intro". select a specific element. An id is always unique within the page so it is unique element. It is written with the hash character(#), followed by the id name..intro{text-align:center;color:blue} This heading is blue and center-aligned. #para1{text-align: center; color: blue} This paragraph is blue and center-aligned. Hello Students The above code results as This paragraph will not be affected. Class Selector for specific element See the output as follows To specify only one specific HTML element should be affected then you should use the element name with class selector. Let's see an example : p.intro {text-align: center;color: blue} CSS Class Selector The class selector selects HTML elements with a specific class attribute. This heading is not It is used with a period character '.' affected (full stop symbol) followed by the class This paragraph is name. The Class selector is used when blue and center-aligned. you want to change a group of elements within your HTML page. 8 The output is as follows h1{ text-align:center;color:blue} h2{ text-align:center;color:blue} p {text-align:center;color:blue} As you can see, you need to define Universal Selector CSS properties for all the elements. It The universal selector is used as can be grouped as- a wildcard character. It selects all the h1,h2,p{ text-align:center;color:blue} elements on the Webpages. Let`s see full code as follows : * { color: green; font-size: 20px;} h1,h2,p{text-align: center; color: blue} This css style will be applied on Entire page.It does not check tag or plain text This css is applied to heading Hello Heading 1 Hello Heading 2 (In smaller it is applied to first font) paragaraph This is a paragraph. Also to second paragraph ! Output : Output : Group Selector The grouping selector is used to select Positioning in CSS all the elements with the same style CSS helps to position the HTML definitions. It is used to minimize the elements. The position property is used code. Commas are used to separate each to set position for an element. The selector in grouping. element can be positioned using the top, Let's see the CSS code without group bottom, left and right properties. selector. 9 Syntax : Output : Selector{position:value;top:value; left:value:bottom:value;right:value} Where values in positions are fixed, absolute, relative and values of top, bottom, left, right are in pixels 3. Relative Positioning : The relative There are four types of positioning in positioning property is used to set the CSS element relative to its normal position. 1. Static Positioning : This is a by- 4. Absolute Positioning : This property default position for HTML elements. sets an element in a specific location It is not affected by the top, bottom, and it is not affected by the flow of left and right properties. the page. This property positions the element at the specified coordinates 2. Fixed Positioning : This property relative to your screen top-left corner. helps to put the text fixed on the For example : browser. The FIXED property forces an element into a fixed position relative to the browser window. The fixed element will not move, even.first{position: relative;top: -10px; when the page is scrolled. right: -10px;} h2{position: absolute; Let`s see the example : left:100px;top:150px} This is heading 1 p.fixed{position: fixed; top: 50px; right: 5px; color: blue} This is heading 2 Output : This is paragraph 1 This is paragraph 2 This is paragraph 3 This is the fix positioned text. 10  In above output the Level 1 headings Balbharati with class=“first"have a relative position 10 pixels above and 10 pixels to the right This text rearranges itself to flow of it’s original position. around the element that is floated right. All level 2 headings will be positioned 100 pixels from the left of the browser window and 150 pixels from the top of Output the browser window. Float Property Float is a CSS property written in CSS file or directly in the style of an element. Display property The float property defines the flow of content. The Display property in CSS defines how the components (div, hyperlink, Following are the types of floating heading, etc) are going to be placed on properties : the web page. It specifies how the element 1. float : left : This keeps the element is displayed. As the name suggests, this float on left side of the container property is used to define the display of 2. float : right : This keeps the element different parts of a web page. float on right side of container Syntax : 3. float : none : This is default property Display : value; i.e. this shows the element as it is. Where values are : For example : Inline : It is used to display an element as an inline element. Float Example Block : It is used to display an element as an block element. It starts on a new.float-left{float:left;font- line, and takes up the whole width of the size:20px;background-color:gold} browser window..float-right{float: right; Inline-Block : This value is very similar font-size:20px;background-color:gold} to inline element but the difference is that Balbharati you are able to set the width and height. This text rearranges itself to None : The element is completely flow around the element that is floated removed. left. 11 Let's see an example Output : Based on the CSS properties studied so far, the representation of semantic tags p{ displayed in 11th standard textbook can display: inline; be coded as follows. } Example 1 : Use of semantic tags and CSS. welcome to balbharti Javascript HTML5 CSS header{background-color:pink;width:1 Output : 00%;height:20%} nav{background- color:skyblue;width:100%;height:20%} aside{background-color:grey;width:40 Example 2 : %;height:42%;float:right} section{background-color:lightyellow; width:60%;height:10%;float:left} article{background-color:violet;width: Example of CSS display 60%;height:40%} footer{background-color:orange;width a{ :100%;height:10%} display : block; background-color:orange; } HTML5 includes new semantics It includes semantic tags like Visit balbharti header, footer, nav Example of complete HTML5 Basics The markup of the future under 12 development. forum posts or individual comments. The nav element represents a section of navigation links. It is suitable for either site © 2018 Balbharti. navigation or a table of contents. http://www.w3schools.com Balbharti website 1.5 Ordered list or numbered list The tag defines an ordered Other education based websites of State list. An ordered list can be numerical or State alphabetical. Board website Pune university Attributes of tag- website Attribute Values Description Type "1" 1 is default value and Impressive Web Designing /"a"/"I"/"i" other values specify The aside element is for content the numbering type for that is tangentially related to the content around the used items. it, and is typically useful for marking up sidebars. Reversed Reversed This attribute specifies that the items of the list are specified in the Articles on:Article tag reverse order. Start Number Specifies the starting The article element represents an number of the first independent section of a document, page or site. item in an ordered list. It is suitable for content like news or blog articles, 13  Output : List of Topics Basics of IT HTML 5 PostgreSQL List of Topics start with series 1.6 Unordered list or bulleted list 50 An unordered list created using the Basics of IT tag, and each list item starts with HTML 5 the tag. The list items in unordered PostgreSQL lists are marked with bullets (small black circles), by default. Output : Example : 1 Example of HTML Unordered List HTML Unordered List Basics of IT HTML 5 Example 2 : PostgreSQL Output : List of Topics in reverse sequence Basics of IT HTML 5 PostgreSQL 14  Attributes of tag Attribute Values Description Type = disc/ style="list-style-type:disc" Sets the list item marker to a circle/square e.g bullet (default) (use style (css) instead of type style="list-style-type:circle" attribute in e.g HTML5. Sets the list item marker to a Type attribute is circle supported by style="list-style-type:square" previous e.g versions of Sets the list item marker to a HTML) square style="list-style-type:none" e.g The list items will not be marked Note : HTML5 does not support bullets, circle and square value of type attribute Example of HTML definition instead you use CSS style. List 1.7 Definition list Web To define a definition list tag is The part of the Internet that used. You can create items in definition contains websites and web pages HTML list with the and tags. The A markup language for creating tag is used to define the term whereas web pages the tag is used to define the term’s CSS definition. A technology to make HTML look Type the following code better definition List 15 Output : Multi level list : nested list Multi-level list Nested List Nested list List within another list either order Daily computing list or unordered list is called nested list. Web design Examples : Single level nested list html 5 hyperlink Inserting Images Example of HTML nested list conditional structure HTML Nested List If statment If else statement Introduction to IT case statement Introduction to DBMS loop statement Definition of DBMS applications of DBMS Advantages of DBMS Postgresql Output : Output : 16 1.8 Inserting audio and video in Attributes of tag HTML 5 Attribute Values Description HTML5 new specifications enables The audio will users to have a far more control over start playing as audio on webpages. Autoplay - soon as it is HTML5 features include native audio ready and video support without the need for The audio Flash. HTML5 includes special elements controls should (tags) allowing to include video and Controls - be displayed audio and to define controls. (i.e. play/pause Common Audio Formats : button etc.) mp3 : An audio format from The audio will start over MPEG(Moving / Motion Pictures Experts loop - again, every Group). time it is aac : Advanced Audio Coding, standard finished format on Iphone, youtube etc. This Specifies ogg : An Open container and free audio that the audio format. muted - output should Tag be muted The element enables you to Specifies the embed(or add) audio files on Webpages. src URL URL of the audio file Declare the audio tag, and specify the source attribute with the Audio file Example : location. Syntax : Audio Sample without any values. Browsers have their own policies. Autoplay attribute is supported by Microsoft Edge or Firfox, Output : when the permission from 'Privacy & Security' panel is set as 'Allow Audio Autoplay'. 17 In previous code Tag The controls attribute is used to add The HTML tag is used to audio controls such as play, pause, and embed video into your web page, it has volume. several video sources. The"source"element is used to specify There are three different formats that the audio files which the browser may are commonly supported by web browsers use. –.mp4,.Ogg and.WebM. Adding audio with multiple sources : Syntax : Multiple sources of audios are specified so that if the browser is unable to play the first source then it will Attributes of tag : automatically jump to the second source. Attribute Values Description tag Defines link to Src URL The tag is used to specify video file multiple media resources for media Specifies that elements. It is used with and the video will both. autoplay - start playing as soon as it is Example : ready Specifies that video controls should be controls - Audio Sample displayed (such as a play/pause Sets the height player the video will loop Value start over again, every time it is finished Output : Specifies that the audio output muted - of the video should be muted 18 Attribute Values Description Output : Specifies an image to be shown while the video is poster URL downloading, or until the user hits the play button Specifies if and 1. auto how the author 2. metadata thinks the video preload 3. none should be 1.9 Image map in HTML 5 loaded when the An image with multiple hyperlinks is webpage loads called an image map. Sets the width Image map is used to connect links width Pixels of the video to different regions on the webpage. An player Image map is created by marking certain The tag is used to specify regions on an image clickable. These multiple media resources for video as clickable regions are called as hotspots. well as audio media elements. Image Maps are of two types; Client Side and Server Side. We will confine Example : only to Client Side image map. The tags used to define client side image map are 1. : It is used to insert an image on a web page. To create a client side is used with value which is preceded acts as a pointer which indicates that 2. : It has only one attribute Your browser does not support the name. It specifies name of the image video tag. used for client side image map. The value of the name attribute is the value specified in usemap attribute of. 19 3) - It defines specific clickable Example : Image Map with element regions. A given element can and contain multiple element within it. is singular tag and is paired. Attributes of : image map Attribute Description An example of Image Map Defines the URL to which the clickable region It can value rect, circle or Shape the clickable regions on rectangular area with coords co-ordinates. Poly-Defines a polygon region with co-ordinates (In the above program great_wall_ specifying each point on china.html is a local file created on the the polygon. It requires machine.) four co-ordinates. Default-Region covers the entire image. No 1.10 INLINE FRAME IN HTML5 co-ordinates are required The element creates an inline frame. Inline frames are often used Specifies extra in online advertising, where the contents information about of the is an advertisement alt clickable area. It is the alternative text to the from an external party. HTML5 allows clickable region. the incorporation to be seamless (no scrollbars, borders, margins etc). 20 Attributes of : 1.11 Website Hosting Attribute Values Description In this chapter we have seen how to Specifies the create a website. But just creating of a address of the website is not sufficient. One has to make Src URL document to the website available on the Internet. embed in the These web pages are to be stored in the web servers that are connected to the Specifies the Internet, to be made available to others. Height Pixel height of an What is web hosting? Specifies the Web hosting is the service of providing Width Pixels width of an storage space. The website is made available on the Internet with the help of Specifies name of web hosting. Text an Name What is Web Host? Specifies the The companies that provides web HTML_ HTML content of hosting services are called web hosts. srcdoc code the page to show Web hosts own and manage web servers. in the These web servers offer uninterrupted Internet connectivity. For example : Types of Web hosting : Types of web hosting are 1. Shared hosting : It is cost effective. It HTML Iframes gives domain name to your website. This is the example of iframes. websites which provide you free hosting of the website for limited period of time. Output : 3. Dedicated hosting : These are paid hosting servers for large websites. Note : You can buy your own web server space, but it is the most expensive way to publish your website. Though it is very expensive, but it gives you a lot of control over your website. 21  For information purpose only Prerequisites for Free Web Hosting : webpages including image, audio 1. Three to Four pages website having files etc) and click on "Logout" first or Home Page named as index. 10. Your website is ready with the sub html. domain as 000webhostapp.com 2. Computer with internet connection. e.g.it-xi-textbook.000webhostapp. 3. Gmail id with password. com 4. Need to toggle between two websites Acquire Domain Name : https://www.000webhost.com/ and 1. Open the website https://my.freenom. http://my.freenom.com com 5. Have to acquire free web space from 2. From Use social sign in Click on web server named 000webhost.com. "sign in" Login with your gmail id 6. Have to acquire domain name for and give password your website from my.freenom.com. 3. Click on "Services" --> Register a 7. Park the website domain address with New Domain free server website i.e. with 000web- 4. Type your website name and click on host.com. "check availability" button Redirect the domain free server name 5. Choose any domain(e.g..tk,.ml.cg to the domain website i.e. with my. etc) and click on "Get it now" if avail- freenom.com. able click on "CheckOut" button Steps to Acquire free webspace : 6. Set the free period to host the website, 1. Open the website https:// click on "Continue" button www.000webhost.com/ 7. From Review &Checkout page if the 2. Click on free signup Login with your Total Due is $0.00 then only select email id and password terms and conditions 3. verification email will be send to your 8. Click on "Complete Order" button e.g. email it-xi-textbook.tk 4. open your email and click on "verify 9. From Order Confirmation Screen email" click on "Click here to go to Client 5. Click on "Get Started" Area" button 6. From My Website page click on Park the website domain : "+Create New site" button Go to http://www.000webhost.com 7. Type your website name and any website perform the following steps first password 1. Select "MyWebsite"--> "Manage 8. e.g. website name as :- it-xi-textbook Website" -->dashboard-->Tools--> 9. From File Manager box select "Up- Set Web Address load" option to upload your web pag- 2. Click on "+Add domain" button then es. Home page of the website must be select radio button Park domain and named as "index.html" (Select all then click on "Next" button 22 3. Type the site URL acquired by you 2. "My Domains"-->"Manage Domain" from Freenom.com e.g. it-xi-textbook. 3. From Domain details screen click on tk. (Remember don’t give http or / or "Management Tools" --> any special character) "Nameservers" 4. Then click on "Park domain" button. 4. Change the radio button to "Use 5. You may see domain status as custom nameservers (enter below)" "pending" for sometime. Once it is and type the NameServer1 as through from the 000webhost side you "NS01.000WEBHOST.COM"and can see the domain status as "parked". NameServer2 as 6. Configure your domain's DNS "NS02.000WEBHOST.COM" provider to point to the 5. Click on "Change Nameservers" ns01.000webhost.com and button ns02.000webhost.com as your 6. Logout from the my.freenom.com nameservers. 7. Type the website address in the Redirect the domain to free server : browser's address bar to view your Now follow the final steps given website below through my.freenom.com website 8. The website can also be seen from 1. Sign in to my.freenom.com click on your mobile. Hosting is done. "Services"--> Summary  Html5 has introduced new types in like number, date, Tel, email, search, URL, range, month, week, color.  Few attributes of can be used for validation purpose.  is used by search engines to search information that is provided with the webpage. It is inserted in the  CSS- Cascading Style Sheet describes how HTML elements are to be displayed on screen, paper, or in other media.  CSS syntax Selector{Property1: value1; Property2: value2}  The tag defines an ordered list. An ordered list can be numerical or alphabetical.  An unordered list created using the tag, and each list item starts with the tag. The list items in unordered lists are marked with bullets (small black circles), by default.  To insert Audio and Video in a web page, and are used which specifies the source with the file location.  An image with multiple hyperlinks is called an image map. The usemap attribute acts as a pointer which indicates that the image is a client side image map.  The element creates an inline frame. 23  Exercise Q 1. Fill in the blanks. Q2. State whether the following statement is True or False. 1. The………………element is a staring element in an HTML, it 1. HTML is an Object Oriented indicates that document type Programming Language. definition being used by the 2. Charset is used for character document. encoding declaration. 2. The……………. is a tag in html 3. An unordered list can be that describe some aspects of numerical or alphabetical. contents of a webpage. 4. Multilevel list can be created in 3. The tag defines HTML 5. an……………… 5. Srccode specifies the HTML 4. An unordered list is created using content of the page to show in the the…………….. tag. 6. The ‘controls’ attribute is not 5. T h e … … … … … … … e l e m e n t used to add play, pause, and creates an inline frame. volume. 6. …………….tag is used to specify 7..cs is the extension of CSS file video on an HTML document. Q.3. Choose Single correct answer 7. If a web developer wants to add from the given options. the description to an image he must use ……… attribute of 1. ………………….element used tag. to create a linking image. 8. The……………… property is a) b) used to set position for an element. c) d) 9. The float property defines 2. The ……………tag is used to the………………..of content. embed audio files on Webpages. 10. ………………is used with a) b) elements that overlap with each c) d) other. 24  3. A programmer wants to define 4. Client-side image map can be range for age between 18 to 50, created using two elements he will use a form with following …………… and………... appropriate control. a) b) a) number b) compare c) d) c) range d) Textboxes e) 4. ……….character is used to Q.5. Choose Three correct answers create id in CSS. from the given options. a) % b) $ 1. Attributes of tag c) @ d) # is…………………….. a) href b) src Q 4. Choose Two correct answers from c) coords d) data the given options. e) alt f) usemap 1. List within another list 2. Attributes used with iframe either………list or………list is are……………….. called nested list. a) srcdoc b) name a) multilevel b) order c) att d) src c) unordered d) general e) href f) loop e) cascading 3. Following are the Form 2. Image maps are of two types controls…………… ……...........and ………….......... a) Network side a) email b) search c) label d) video b) Client Side e) tel f) audio c) Computer side 4. Attributes used with d) Server Side tag………………………….. e) n-compting a) autoplay b) href 3. A CSS rule set contains……….. c) controls d) cntrl and……………………............... e) loop f) bgsound a) Set b) selector c) post d) declaration block e) < > 25  5. CSS types are …………………, 1. The background colour of the ………...... and………………… company name should be in green. a) internal b) external 2. The text colour of the c) control d) inline company name should be red. e) loop f) style 3. The heading should be large with font ''comic sans ms'' 6. Positioning types in CSS 4. The description of the are…………………… company should be displayed in blue color in a paragraph. a) Static b) fixed c) absolute d)position 2) Write Html5 code with CSS as follows- e) dynamic f) nested 1. To create form to accept 7. Types of floating properties name,age, email address, are………,…………, ………….. from the user. a) left b) zero 2. Create a submit button to c) right d) all send the data. e) none f) dock 3. The heading of the form should have a background colour and a different font Q. 6. Match the pair style. A B a) Client side 3) Write Html5 code with CSS as 1) image map follows- 2) usemap b) CSS Property 1. Create ordered list with names c) bulleted list of tourist Cities. 3) color d) Image as a 2. Create unordered list with 4) submit tourist places of those cities. button 3. Divide the list into two 5) e) inserts an sections left and right by image using CSS. Q.7. Programs.  1) Write a program using html with following CSS specification- 26  2 Introduction to SEO (Search Engine Optimization) webpage. This chapter introduces few Let us learn ways at the beginners level.  Definition of SEO  Types of SEO Do you know?  Techniques of SEO Search Engine is an online program or software that helps users to search for  SEO-Page content information on world wide web.  SEO- Keywords Examples of Search Engine include  SEO-Social Book marking Google, Yahoo and Bing  SEO-SMO 2.2 Types of SEO - There are two types 2.1 Introduction of optimization SEO stands for Search Engine  On-Page SEO : It includes Provision Optimization. SEO is a technique used of good content, good keywords for: designing and developing a website selection, putting keywords on correct to rank high in search engine results. It is places, giving appropriate title to a subset of search engine marketing. Thus every page etc. SEO is useful in increasing the number of  Off-Page SEO : It includes link visitors to a website. building, increasing link popularity There are many strategies and by submitting open directories, search techniques adopted to optimize the engines, link exchange etc. On-Page Off-Page On-Page SEO is concerned Off-Page SEO is concerned with with information that is  Website-Website relationship. displayed to the end user, SEO  Do other websites refer to you, such as text, images and do you refer to others? website navigation.  How good is your network? Fig 2.1: Types of SEO 27 2.3 Techniques of SEO  Black Hat SEO : Techniques that These are classified into two broad search engines do not approve. The categories: techniques used for optimizing the  White Hat SEO : Techniques that website are manipulative. search engines recommends as apart of good design. Refer the following strategies and differences in short about Black Hat and White Hat techniques– WHITE BLACK HAT HAT WHITE HAT STRATEGIES BLACK HAT STRATEGIES  Relevant content  Duplicate content  Well-labeled images  Invisible text and stuffed keyword  Relevant links and refernces  Cloking or re-directing the user to  Complete sentences with good spelling another site or page and grammar  Links from sites with non-relveant  Standard-compliant HTML content  Unique and relevant page titles 2.4 Optimizing Website There are various sections of a website  It is recommended to use which can be optimised for better SEO.  : Title is the first Some of the ways to optimize the webpage thing that user notices in search for SEO result list while using google for searching. Contents should 1. SEO : Page structure optimization be up to 60 characters (spaces  Html programs should start with included).  Meta-description Tag : While  If it is singular tag eg it creating a web page, Meta should be self enclosed like this- description should be used to boost your On-Page SEO.  Order of tags should be proper. Meta Description should be Most of the time recently opened between 70 and 160 characters tag will be closed first. (spaces included) 28   Heading Tags : The page Example 2 : should include proper heading tags from to wherever required. Meta tag and Image tag  Image Tags with ALT attribute : The alt attribute image, so even if the image the viewers understand the Examples of optimized Webpages /head> Let us understand Meta and Example 1 : Image for optimization Page structure with appropriate order of opening and closing tags Note : In the above example meta tag Let us understand SEO is used with important and valid Webpage optimization helps for keywords related to that image, like the higher ranking in search engines. image source as statue of liberty and There are number of ways to from the view of optimisation of opimize the pages.Even the Social tag. media plays an important role!!! 2. SEO Keywords SEO keywords are the important words and phrases related to the developed Note : In the above example check website content. A list of keywords. Need the ordering of ,and. The to be carefully choosen to optimize the innermost tag ends first, followed by search. Keyword Research and Analysis the outermost tag. The other basic tags is an important part of the Search Engine also follow a proper ordering as per the Optimization (SEO) as well as"Search HTML structure. Engine Marketing". 29  For"Search Engine Marketing”, one links to the created website it builds can pay for certain keywords. familiarity and trust about the website. There are various online Keyword 5. SEO-Backlinks Planner tools (such as Google AdWords Backlinks are links on one website Keyword Planner) to shortlist keywords. that, when clicked, take the user to This is more useful to compare the cost of another site. Backlinks are especially various keywords, if the website designer valuable for SEO because they contribute opts for Paid Search Engine Marketing. to the overall strength and value of the content. They also represent a "vote of 3. SEO Social Bookmarking confidence" from one site to another. In Social bookmarking is a powerful short, backlinks to your website are a tool in promoting a website. It is very signal to search engines that others are useful for Off-Page SEO optimization. interested to know about the contents form your website. Did you know? 6. Other factors for SEO Modern browsers support bookmark features. For example, you can save the  Speed of the website : While creating bookmark in the browser by clicking the a website, attention is given on the design, content and as many visuals star icon next to the URL in Google as possible. However, all But this can Chrome. slow down the website and obstruct Bookmarks are website links that are usability. stored for future references. They are very  Mobile friendly : Website’s mobile useful specially when Web pages with friendliness has become a ranking long URLs are not easy to remember. factor for Google. Hence, it is very Bookmarking service allows you to save, important to ensure that the created organize and share bookmarks with other website is mobile friendly 'for users. External links are the important maximum' exposure and to improve SEO factors to rank a website higher in the websites ranking. the search engine. With Social bookmarking, you can quickly create Do you know? high-quality backlinks. In Google chrome you can check if your site is mobile friendly by 4. SEO-Social Media Optimization right-clicking anywhere on the page (SMO) and clicking"Inspect. "There is an It deals with enhancing the website's icon at the left of "Elements "called" ranking, using interactive communities Toggle device toolbar "which changes like facebook, twitter, blogs, forums and the page to mobile mode when clicked. so on. When these communities have 30  Creating Robots.txt : This file Eg-Seomator, SEOptimer are few free tells search engine which pages you SEO audit tools available on net. want to exclude from indexing. For SEOptimer is a free SEO Audit Tool example, if you do not want a certain that will perform a detailed SEO Analysis. page or image being indexed, then It provides clear and actionable you can restrict that page from being recommendations that can be taken to indexed. improve your online presence. 2.5 SEO Audit The URL are as follows- An SEO Audit helps to find out https://seomator.com/free-seo-audit-tool what could be done to improve ranking https://www.seoptimer.com/ on search engines, so that consumers The following figures display the SEO could find the website with greater analysis using SEOptimer website ease. It analyses the websites health. Fig 2.2 : Search bar in SEO Audit tool Fig 2.3 : Homepage of SEOptimer 31  Fig 2.4 : Overall Analysis using SEOptimer Fig 2.5 : Detailed Analysis of SEOptimer 32 Audit Results of SEOPtimizer will have  Header content recommendations following details  Title and Meta description  Overall Ranking of the site  Body Content  Recommendations for improvements  Header Tags  Search Engine Optimization  Body content recommendations  Usability of the website  Keyword Consistency  Performance of website  Amount of content in the pages  Social links  Links  Connected social accounts  Number of backlinks  Security parameters  Broken links  SSL Enabled  Friendly links  HTTPS Redirect  On page links  Email Privacy  Technology list which is used in the website Did you know?  Crawling is a process by which search engines crawler/ spiders/bots scan a website and collect details about each page: titles, images, keywords, other linked pages etc.  Organic search results are the listings on a search engine results page (SERP) that appear because of factors such as relevance to the search term and valid search engine optimization (SEO) efforts rather than because of search engine marketing (SEM) or trickery. Summary  SEO stands for Search Engine optimization.  Apart from the Content of the website being the king of Optimization there are many other factors to improve the ranking.  Keywords used in , and heading levels play key role. Use of proper order of tags and structure, is equally important.  with alt attribute also contributes to Optimization.  Social media links and backlinks are also major factors to optimise the webpage.  Apart from this mobile friendliness, speed also rank the websites higher.  A SEO Audit tools like SEOptimer and SEOmator are the tools to determine the health of the website. 33  Exercise Q.1 Fill in the blank. Q.2. Choose corect answers from the following. (2 correct) 1. The full form of SEO is ______. 1. The page content optimization 2. _____ are links on one website can be done by using keywords that, when clicked, take the user in to another site. a) b) 3. One of the optimization factor to c) d> improve images is by using e) ______ attribute. 2. Other factors to rank the website 4. An ______ helps to find out what higher are you can be done to improve a) Desktop friendly ranking on search engines, so that consumers can find the b) Speed of the website website with greater ease. c) Creating robots. txt d) No backlinks 5. The _______ files tells search engine which pages you want to e) No external links. exclude from indexing. Q.3. Answer briefly. Q.2. Match the following. 1. Define SEO. State types of SEO. A B 2. Which are the different SEO techniques? 1. Image optimization a) meta tag 3. Explain in short White Hat 2. Links to Twittter, b) SEO technique technique. facebook 4. Explain in short Black hat 3. description about c) alt attribute technique. author 5. Explain in short SEO Keyword 4. White hat Strategy d) Social media search. optimization 6. Explain any two Page content optimization points. 7. Explain how could you optimize images.  34  3 Advanced Javascript Let us learn No need of special software to run JavaScript programs  Features of JavaScript, difference JavaScript is object oriented scripting between client side scripting and language and it supports event based server side scripting. programming facility. It is case  Looping structures. sensitive language.  DOM Objects and window object in JavaScript helps the browser to JavaScript. perform input validation without  Inbuilt objects such String, Math, wasting the user's time by the Web Array, Date and Number with its server access. properties and Methods. It can handle date and time very  Simple JavaScript programs to do effectively. validations and user interaction. Most of the JavaScript control statements syntax is same as syntax 3.1 Introduction of control statements in other programming languages. There is variety of scripting languages used to develop dynamic websites. An important part of JavaScript is the JavaScript is an interpreted scripting ability to create new functions within language. An interpreted language is a scripts. Declare a function in type of programming language that JavaScript using function keyword. executes its instructions directly and Software that can run on any hardware freely without compiling machine platform (PC, Mac, SunSparc etc.) or language instructions in precious software platform (Windows, Linux, program. Program is a set of instructions Mac OS etc.) is called as platform used to produce various kinds of outputs. independent software. JavaScript is JavaScript was initially created to "make platform independent scripting webpages alive". The programs in this language. Any JavaScript-enabled language are called scripts. browser can understand and 3.1.1 Features of JavaScript : interpreted JavaScript code. Due to different features, JavaScript is known JavaScript is light weight scripting as universal client side scripting language because it does not support language. all features of object oriented programming languages. 35 There are two types of scripting : Server validation purpose and effectively side scripting and Client side scripting. minimize the load to the server. Client-side Scripting : In this type, the 5. Special software (web server script resides on client computer (browser) software) is required to execute and that can run on the client. Basically, server-side script, whereas client side these types of scripts are placed inside an scripts requires web browser as an HTML document. interface. Server-side Scripting : In this type, the Do you know? script resides on web server. To execute There are some popular framework / the script it must be activated by client libraries. then it is executed on web server.  Angular JS : It is a java script based 3.1.2 Difference between Server side open source frontend web framework scripting and client side scripting devloped mainly for single page application. 1. Server-side scripting is used at the backend, where the source code is not  Vue JS : It is javascript based frame visible or hidden at the client side work for building interactive user interface (UI). It can be easly (browser). On the other hand, client- integrated with other projects and side scripting is used at the frontend libraries. which users can see from the browser.  React : It consists of javascript So Server-side scripting is more secure libraries for building UI for single than client-side scripting. page application and mobile 2. When a server-side script is processed application. it communicates to the server. As against, client-side scripting does not 3.2 Switch case and Looping Structures need any server interaction. Previous year we have learnt different 3. The client-side scripting language basic syntax of javascript such as variable involves languages such as HTML5, declaration, if structure, function etc. Let JavaScript etc. In contrast, us learn some extra features: programming languages such as PHP, ASP.net, Ruby, ColdFusion, Python, 3.2.1 Switch Case statement C# etc. are server side scripting JavaScript has a built–in multiway languages. decision statement known as Switch. The 4. Server-side scripting is useful in switch statement test the value of given customizing the web pages and expression against a list of case values implements the dynamic changes in and when match is found, a block of the websites. Conversely, the client- statement associated with that case is side scripts are generally used for executed. There should not be duplicity 36 between the cases. The value for the case Output : must be similar data type as the variable in switch. The default statement is not mandatory. Syntax : switch(expression) { case value1: statement block 1; break; Note : 'language' attribute of case value2: is replaced by 'type' attribute in all the statement block 2; programs as it is standardised. break; ………….... 3.2.2 Looping Statement case value n: While creating programming logic, statement block n; break; we need to execute some statements default: repeatedly. Iteration refers to the statement block ; execution of statement or a group of } statements of code for a fixed number of times or till the condition is satisfied. The Program : condition should be boolean condition. Some commonly used JavaScript looping Javascript Program statements are: 1. for…….loop use of switch case This loop executes statements as long as condition becomes true, var day=6; control comes out from the loop switch(day) when condition becomes false. { Benefit of for-loop is that it combines case 1: alert("Monday"); break; case 2: alert("Tuesday"); break; initialization, condition and loop case 3: alert("Wednesday"); break; iteration (increment or decrement) in case 4:alert("Thursday"); break; single statement. case 5: alert("Friday"); break; case 6: alert("Saturday"); break; Syntax : case 7: alert("Sunday"); break; default: alert("Invalid day"); for(initialization;condition;iteration) } { statement block; } 37  Initialization is assigning initial value condition always true then loop would be to the variable, which executes only once, executed infinitely so after some execution and then the condition is checked. Loop condition becomes false. will execute statements in statement block till the condition is true. When Example : condition becomes false control is transferred out of the loop and it will var i=1 execute remaining program. Iteration while(i