HTML5 - NexTGen Web HTML5 - NexTGen Web Learner’s Guide © 2013 Aptech Limited All rights reserved No part of this book may be reproduced or copied in any form or by any means – graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent or transferred without the prior written permission of copyright owner Aptech Limited All trademarks acknowledged APTECH LIMITED Head Office: Aptech House, A-65, MIDC, Andheri (East), Mumbai - 400 093 www.aptech-worldwide.com E-mail: customercare@aptech.ac.in Second Edition - 2013 Dear Learner, We congratulate you on your decision to pursue an Aptech course Aptech Ltd designs its courses using a sound instructional design model – from conceptualization to execution, incorporating the following key aspects: Scanning the user system and needs assessment Needs assessment is carried out to find the educational and training needs of the learner Technology trends are regularly scanned and tracked by core teams at Aptech Ltd TAG* analyzes these on a monthly basis to understand the emerging technology training needs for the Industry An annual Industry Recruitment Profile Survey# is conducted during August - October to understand the technologies that Industries would be adapting in the next to years An analysis of these trends & recruitment needs is then carried out to understand the skill requirements for different roles & career opportunities The skill requirements are then mapped with the learner profile (user system) to derive the Learning objectives for the different roles Needs analysis and design of curriculum The Learning objectives are then analyzed and translated into learning tasks Each learning task or activity is analyzed in terms of knowledge, skills and attitudes that are required to perform that task Teachers and domain experts this jointly These are then grouped in clusters to form the subjects to be covered by the curriculum In addition, the society, the teachers, and the industry expect certain knowledge and skills that are related to abilities such as learning-to-learn, thinking, adaptability, problem solving, positive attitude etc These competencies would cover both cognitive and affective domains A precedence diagram for the subjects is drawn where the prerequisites for each subject are graphically illustrated The number of levels in this diagram is determined by the duration of the course in terms of number of semesters etc Using the precedence diagram and the time duration for each subject, the curriculum is organized Design & development of instructional materials The content outlines are developed by including additional topics that are required for the completion of the domain and for the logical development of the competencies identified Evaluation strategy and scheme is developed for the subject The topics are arranged/organized in a meaningful sequence The detailed instructional material – Training aids, Learner material, reference material, project guidelines, etc.- are then developed Rigorous quality checks are conducted at every stage Strategies for delivery of instruction Careful consideration is given for the integral development of abilities like thinking, problem solving, learning-to-learn etc by selecting appropriate instructional strategies (training methodology), instructional activities and instructional materials The area of IT is fast changing and nebulous Hence considerable flexibility is provided in the instructional process by specially including creative activities with group interaction between the students and the trainer The positive aspects of Web based learning –acquiring information, organizing information and acting on the basis of insufficient information are some of the aspects, which are incorporated, in the instructional process Assessment of learning The learning is assessed through different modes – tests, assignments & projects The assessment system is designed to evaluate the level of knowledge & skills as defined by the learning objectives Evaluation of instructional process and instructional materials The instructional process is backed by an elaborate monitoring system to evaluate - on-time delivery, understanding of a subject module, ability of the instructor to impart learning As an integral part of this process, we request you to kindly send us your feedback in the reply prepaid form appended at the end of each module *TAG – Technology & Academics Group comprises of members from Aptech Ltd., professors from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from Software Majors & representatives from regulatory organizations/forums Technology heads of Aptech Ltd meet on a monthly basis to share and evaluate the technology trends The group interfaces with the representatives of the TAG thrice a year to review and validate the technology and academic directions and endeavors of Aptech Ltd Aptech New Products Design Model Key Aspects Scanning the user system and needs assessment Evaluation of Instructional Processes and Material Need Analysis and design of curriculum Design and development of instructional material Assessment of learning Strategies for delivery of instructions “ “ A little learning is a dangerous thing, but a lot of ignorance is just as bad Preface HyperText Markup Language (HTML) is the markup language popularly used by developers to design Web sites It is the language for the World Wide Web It is used for building Web sites that can be as large as a corporate Web site or as small as a single page classroom project This book covers basic to advanced concepts of HTML5 The book begins with an explanation of basic HTML tags and attributes It also explains the structure of Web pages using HTML Then, it proceeds to explain the concept of Cascading Style Sheets (CSS) CSS is a technology that helps Web site designers to provide a consistent formatting across large Web sites by separating the content from its styles Thus, CSS is used to control the look of the Web page by specifying the styles such as color, font, and font size for the HTML content It can also be used to control the placement of items on a page The book also explains JavaScript, which is a scripting language used for adding interactivity to Web pages JavaScript allows programs in an HTML page to respond to user’s actions These responses could be validating the user’s input, fetching and displaying the requested page, and so on Finally, the book concludes with explanations of jQuery and HTML5 mobile application support jQuery is a short and fast JavaScript library that simplifies the client side scripting of HTML, animation, event handling, traversing, and developing AJAX based Web applications The knowledge and information in this book is the result of the concentrated effort of the Design Team, which is continuously striving to bring to you the latest, the best and the most relevant subject matter in Information Technology As a part of Aptech’s quality drive, this team does intensive research and curriculum enrichment to keep it in line with industry trends and learner requirements We will be glad to receive your suggestions Please send us your feedback, addressed to the Design Centre at Aptech’s corporate office, Mumbai Design Team “ “ Nothing is a waste of time if you use the experience wisely Table of Contents Sessions Introduction to the Web Introduction to HTML5 23 Formatting Text Using Tags 39 Creating Hyperlinks and Anchors 63 Introduction to CSS3 75 Formatting Using Style Sheets 109 Displaying Graphics and CSS3 Animation 139 Creating Navigational Aids and Division-Based Layout 171 Creating Tables 205 10 HTML Forms 11 HTML5 Audio and Video 271 12 Introduction to JavaScript 293 13 Operators and Statements 333 14 Loops and Arrays 367 15 Functions and Objects 397 16 Building a Mobile Web Application 443 17 Canvas and JavaScript 483 18 HTML5 Web Storage 521 19 HTML5 Geolocation and APIs 557 235 “ “ It is hard to fall, but it is worse never to have tried to succeed Session 19 HTML5 Geolocation and APIs 19.6.1 Creating a Manifest File The manifest file is a text file that defines the caching behavior for resources used by the Web page The file should be saved with the manifest extension Code Snippet 10 demonstrates how to create a manifest file Code Snippet 10: CACHE: # Defines resources to be cached check.js styles.css images/figure1.jpg FALLBACK: # Defines resources to be used if non-cached resources cannot be #downloaded Other_images/ figure2.png NETWORK: # Defines resources that will not be cached figure3.png The following are the sections defined in the manifest file: CACHE: This section defines resources, such as check.js, figure1.png to be stored locally styles.css, and FALLBACK: This section defines alternative resource to be used, when the actual resource is not available For example, figure2.png is defined as a fallback image If a browser cannot access figure1.jpg in the images folder, then figure2.png will replace the unavailable image at the time of rendering the markup on the Web page The unavailability of the image can be due to network connection or server problem Concepts 580 of 590 NETWORK: This section specifies resources to be accessed when there is a network connection Resources in this section are not cached 19.6.2 Declaring a Manifest To associate a manifest with a Web page, assign manifest file to the attribute named manifest specified with the html element V 1.1 © Aptech Limited Session 19 HTML5 Geolocation and APIs Code Snippet 11 demonstrates how to add the manifest file in an HTML document Code Snippet 11: Web Page In the code, the “appcache.manifest” is specified with the tag The interpretation of the manifest file is similar to any other file reference The document uses a relative file path, as both the manifest file and HTML document are located in the same directory By default, a Web page declaring manifest is cached automatically Concepts The benefit of the Application Cache is that it improves the performance of a Web page by reducing the number of requests made to the Web server The Web server hosts the Web application to be accessed on the network V 1.1 © Aptech Limited 581 of 590 Session 19 HTML5 Geolocation and APIs Figure 19.10 shows how to enable the Work Offline mode in the Opera browser This enables to cache the resources of the Web application pages locally Figure 19.10: Work Offline Mode in Opera As shown in figure 19.10, Work Offline is enabled to cache the resources of the Web page Concepts Figure 19.11 shows the cached Web page in the Opera browser Figure 19.11: Output – Cached Web Page 582 of 590 V 1.1 © Aptech Limited Session 19 HTML5 Geolocation and APIs 19.7 Check Your Progress The location of a user is represented as a single on a map (A) Point (C) Mark (B) (D) Symbol Coordinates Which one of the following new properties of the navigator object is supported by HTML5? (A) Location (C) Geolocation (B) (D) Script Cookie Which one of the following objects enables to get and set the data of the element being dragged? (A) dragstart (C) drop (B) (D) drag dataTransfer Identify the steps needed to cache the resources of a Web page locally on the system (A) (C) Create a manifest file (D) Create the object of the manifest file in JavaScript Concepts (B) Obtain the resource from online Reference the manifest file in a Web page V 1.1 © Aptech Limited 583 of 590 Session 19 HTML5 Geolocation and APIs Which of the following is the correct code to load the coordinates on the Google Maps? function displayPosition(position) { var my_lat = position.coords.latitude; var my_lng = position.coords.longitude; (A) var latlng = new google.maps.LatLng(my_lat, my_lng); } function displayPosition(position) { var my_lat = position.coords.latitude; (B) var my_lng = position.coords.longitude; var latlng = new google.maps.LatitudeLongitude(my_lat, my_lng); } function displayPosition(position) { var my_lat = coords.latitude; var my_lng = coords.longitude; (C) var div_info location’); = document.getElementById(‘user_ var latlng = new google.maps.LatitudeLongitude(my_ lat, my_lng); } function displayPosition(position) { var my_lat = position.coord.latitude; var my_lng = position.coord.longitude; (D) var latlng = new google.maps.LatLng(my_lat, my_lng); Concepts } 584 of 590 V 1.1 © Aptech Limited Session 19 HTML5 Geolocation and APIs 19.7.1 Answers A C B B, C A Concepts V 1.1 © Aptech Limited 585 of 590 Session 19 HTML5 Geolocation and APIs Summary Geolocation determines the current location of a user on devices The location is represented as a single point on a map that comprises two components: latitude and longitude The Goelocation API is a specification provided by the W3C which provides a consistent way to develop location-aware Web applications Google Maps API is used to display the user’s location on the map The object of type Map is created in JavaScript, before it can be referenced in an HTML document The drag-and-drop operations defines an event-based mechanism using which elements on a Web page can be copied, reordered, or deleted HTML5 supports offline Web applications that allow a user to work with them without being online Concepts 586 of 590 V 1.1 © Aptech Limited Session 19 HTML5 Geolocation and APIs Try it Yourself Develop a mobile Web application to display the current location of a user on Google Maps The application will make use of jQuery API to handle success and failure conditions, while gathering information about the user location Create a Web page with a container containing three images and two empty containers The user can drag the images from the container and drop them in the empty containers back and forth Concepts V 1.1 © Aptech Limited 587 of 590 “ “ A little knowledge that acts is worth infinitely more than much knowledge that is idle Session - 19 (Workshop) HTML5 Geolocation and APIs In this workshop, you will learn to: Use the Geolocation and Google Maps API Use the Drag and Drop API Session 19 HTML5 Geolocation and APIs (Workshop) 19.1 HTML5 Geolocation and APIs You will view and practice how to use new API in HTML5 Working with Geolocation and Google Maps APIs Working with the Drag and Drop API Note - Please refer to the respective lab deliverable for demonstrations and guided Labs simulations 590 of 590 V 1.1 © Aptech Limited Reader’s Response Name Of Book: _ Batch: Date: The members of the design team at Aptech are always striving to enhance the quality of the books produced by them As a reader, your suggestions and feedback are very important to us They are of tremendous help to us in continually improving the quality of this book Please rate this book in terms of the following aspects Aspects Excellent Rating Very Good Good Poor Presentation style Suggestion: _ _ Simplicity of language Suggestion: _ _ Topics chosen Suggestion: _ _ Topic coverage Suggestion: _ _ Aspects Excellent Rating Very Good Good Poor Explanation provided Suggestion: Quality of pictures/diagrams Suggestion: Overall suggestions: Please fill up this response card and send it to: The Design Centre, Aptech Ltd Aptech House, A-65, MIDC, Marol, Andheri (East), Mumbai - 400 093 INDIA Your efforts in this direction will be most appreciated “ “ To learn, you must want to be taught “ “ Learning is not compulsory, but neither is survival ... V 1. 1 © Aptech Limited Concepts 17 of 590 Session Introduction to the Web 1. 11. 1 Answers A A, C, E B A B Concepts 18 of 590 V 1. 1 © Aptech Limited Session Introduction to the Web Summary HTML5. .. globe of 590 V 1. 1 © Aptech Limited Session Introduction to the Web Figure 1. 1 shows the evolution of computing Figure 1. 1: Evolution of Computing 1. 1.2 Web and Internet The Web is a way to... 293 13 Operators and Statements 333 14 Loops and Arrays 367 15 Functions and Objects 397 16 Building a Mobile Web Application 443 17 Canvas and JavaScript 483 18 HTML5 Web Storage 5 21 19 HTML5