DOCSLIB.ORG

The Missing Manual by Matthew Macdonald

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text

Load more

HTML5 The book that should have been in the box® Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo HTML5: The Missing Manual by Matthew MacDonald Copyright © 2011 Matthew MacDonald. All rights reserved. Printed in the Unites States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Printing History: August 2011: First Edition. Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. HTML5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-30239-9 [LSI] [2013-06-28] Table of Contents The Missing Credits .............................. xi Introduction ................................... 1 Part One: Meet the New Language Chapter 1: Introducing HTML5 ....................... 11 The Story of HTML5 ....................................... 11 XHTML 1.0: Getting Strict ................................... 12 XHTML 2: The Unexpected Failure .............................. 12 HTML5: Back From the Dead ................................. 13 HTML: The Living Language ................................. 14 Three Key Principles of HTML5 .................................. 15 1. Don’t Break the Web .................................... 15 2. Pave the Cowpaths..................................... 17 3. Be Practical ......................................... 17 Your First Look at HTML5 Markup ................................ 18 The HTML5 Doctype ..................................... 20 Character Encoding ...................................... 21 The Language ......................................... 21 Adding a Style Sheet ..................................... 22 Adding JavaScript ....................................... 22 The Final Product ....................................... 23 A Closer Look at HTML5 Syntax ................................. 24 The Loosened Rules ..................................... 24 HTML5 Validation ....................................... 25 The Return of XHTML ..................................... 27 iii HTML5’s Element Family ..................................... 29 Added Elements ....................................... 29 Removed Elements ...................................... 30 Adapted Elements ...................................... 30 Tweaked Elements ...................................... 32 Standardized Elements .................................... 33 Using HTML5 Today ........................................ 34 Evaluating Browser Support ................................. 34 Browser Adoption Statistics ................................. 36 Feature Detection with Modernizr .............................. 38 Feature “Filling” with Polyfills ................................ 40 Chapter 2: A New Way to Structure Pages ............... 43 Introducing the Semantic Elements ................................ 44 Retrofitting a Traditional HTML Page ............................... 45 Page Structure the Old Way ................................. 47 Page Structure with HTML5 ................................. 49 Subtitles with <hgroup> ................................... 52 Adding a Figure with <figure> ................................ 53 Adding a Sidebar with <aside> ................................ 56 Browser Compatibility for the Semantic Elements ........................ 57 Designing a Site with the Semantic Elements .......................... 60 Deeper into Headers ..................................... 61 Navigation Links with <nav> ................................. 62 Deeper into Footers ..................................... 67 Deeper into Sections ..................................... 69 The HTML5 Outlining System ................................... 70 How to View an Outline ................................... 70 Basic Outlines ......................................... 71 Sectioning Elements ..................................... 73 Solving an Outline Problem ................................. 76 Chapter 3: Meaningful Markup ...................... 81 The Semantic Elements Revisited ................................. 82 Dates and Times with <time> ................................ 83 JavaScript Calculations with <output> ............................ 84 Highlighted Text with <mark> ................................ 86 Other Standards that Boost Semantics .............................. 87 ARIA (Accessible Rich Internet Applications) ........................ 88 RDFa (Resource Description Framework) .......................... 89 Microformats ......................................... 89 Microdata ........................................... 95 Google Rich Snippets ....................................... 97 Enhanced Search Results ................................... 98 The Recipe Search Engine .................................. 101 iv table of contents Part Two: Creating Modern Web Pages Chapter 4: Web Forms, Refined ...................... 107 Understanding Forms ...................................... 108 Revamping a Traditional HTML Form .............................. 109 Adding Hints with Placeholders ............................... 113 Focus: Starting in the Right Spot ............................... 115 Validation: Stopping Errors .................................... 116 How HTML5 Validation Works ................................ 116 Turning Validation Off .................................... 118 Validation Styling Hooks ................................... 119 Validating with Regular Expressions ............................ 120 Custom Validation ...................................... 121 Browser Support for Validation .............................. 123 New Types of Input ....................................... 125 Email Addresses ...................................... 128 URLs ............................................ 128 Search Boxes ........................................ 128 Telephone Numbers .................................... 129 Numbers .......................................... 129 Sliders ............................................ 130 Dates and Times ....................................... 131 Colors ............................................ 132 New Elements .......................................... 132 Input Suggestions with <datalist> ............................. 133 Progress Bars and Meters ................................. 135 Toolbars and Menus with <command> and <menu> ................... 138 An HTML Editor in a Web Page ................................. 138 Using contentEditable to Edit an Element ......................... 138 Using designMode to Edit a Page .............................. 141 Chapter 5: Audio and Video ........................ 143 Understanding Video Today .................................. 144 Introducing HTML5 Audio and Video .............................. 145 Making Some Noise with <audio> ............................. 145 Getting the Big Picture with <video> ............................ 148 Format Wars and Fallbacks ................................... 149 Meet the Formats ...................................... 150 Browser Support for Media Formats ............................ 152 Multiple Formats: How to Please Every Browser ..................... 154 The <source> Element ................................... 154 The Flash Fallback ..................................... 155 Controlling Your Player with JavaScript ............................. 160 Adding Sound Effects .................................... 160 Creating a Custom Video Player .............................. 163 JavaScript Media Players .................................. 166 Captions and Accessibility ................................. 168 table of contents v Chapter 6: Basic Drawing with the Canvas ............... 171 Getting Started with the Canvas ................................. 172 Straight Lines ......................................... 174 Paths and Shapes ....................................... 177 Curved Lines ......................................... 179 Transforms ......................................... 182 Transparency ........................................ 185 Building a Basic Paint Program ................................. 188 Preparing to Draw ..................................... 189 Drawing on the Canvas ................................... 190 Saving the Picture in the Canvas .............................. 192 Browser Compatibility for the Canvas ............................. 195 Polyfilling the Canvas .................................... 196 The Canvas Fallback and Feature Detection ......................... 197 Chapter 7: Deeper into the Canvas ...................
Recommended publications
  • CSS Browser Selector Plus: a Javascript Library to Support Cross-Browser Responsive Design Richard Duchatsch Johansen Talita C

    CSS Browser Selector Plus: a Javascript Library to Support Cross-Browser Responsive Design Richard Duchatsch Johansen Talita C

    CSS Browser Selector Plus: A JavaScript Library to Support Cross-browser Responsive Design Richard Duchatsch Johansen Talita C. Pagani Britto Cesar Augusto Cusin W3C Accessibility WG Member and Assistant Coordinator Professor at Faculdade Paraíso do Senior Front-end Developer at of Educational Projects - MStech Ceará and W3C Accessibility WG Eventials – Rua Itapaiúna, 2434 Rua Joaquim Anacleto Bueno, 1-42 Member – Rua da Conceição, 1228 São Paulo – SP – Brazil, Zip Code Bauru – SP – Brazil, Juazeiro do Norte – CE – Brazil, 05707-001 Zip Code 17047-281 Zip Code 63010-465 +55 14 9711-7983 +55 14 3235-5500 +55 15 8100-4466 [email protected] [email protected] [email protected] ABSTRACT means you can use CSS Media Queries to tweak a CSS for a Developing websites for multiples devices have been a rough task mobile devices, printer or create a responsive site. for the past ten years. Devices features change frequently and new Media queries is an extension to the @media (or media=”” devices emerge every day. Since W3C introduced media queries attribute, in <link> tag) specification on CSS, allowing in CSS3, it’s possible to developed tailored interfaces for multiple declaration of conditional queries expressions to detect particular devices using a single HTML document. CSS3 media queries media features, such as viewport width, display color, orientation have been used to support adaptive and flexible layouts, however, and resolution [1], as shown on Table 1. it’s not supported in legacy browsers. In this paper, we present CSS Browser Selector Plus, a cross-browser alternative method Table 1.
  • SPARQL with Xquery-Based Filtering?

    SPARQL with Xquery-Based Filtering?

    SPARQL with XQuery-based Filtering? Takahiro Komamizu Nagoya University, Japan [email protected] Abstract. Linked Open Data (LOD) has been proliferated over vari- ous domains, however, there are still lots of open data in various format other than RDF, a standard data description framework in LOD. These open data can also be connected to entities in LOD when they are as- sociated with URIs. Document-centric XML data are such open data that are connected with entities in LOD as supplemental documents for these entities, and to convert these XML data into RDF requires various techniques such as information extraction, ontology design and ontology mapping with human prior knowledge. To utilize document-centric XML data linked from entities in LOD, in this paper, a SPARQL-based seam- less access method on RDF and XML data is proposed. In particular, an extension to SPARQL, XQueryFILTER, which enables XQuery as a filter in SPARQL is proposed. For efficient query processing of the combination of SPARQL and XQuery, a database theory-based query optimization is proposed. Real-world scenario-based experiments in this paper showcase that effectiveness of XQueryFILTER and efficiency of the optimization. 1 Introduction Open data movement is a worldwide movement that data are published online with FAIR principle1. Linked Open Data (LOD) [4] started by Sir Tim Berners- Lee is best aligned with this principle. In LOD, factual records are represented by a set of triples consisting of subject, predicate and object in the form of a stan- dardized representation framework, RDF (Resource Description Framework) [5]. Each element in RDF is represented by network-accessible identifier called URI (Uniform Resource Identifier).
  • Android Cookbook.Pdf

    Android Cookbook.Pdf

    Android Cookbook Android Cookbook Android Community Experts Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Android Cookbook by Android Community Experts Copyright © 2011 Ian Darwin and Contributors. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://safari.oreilly.com). For more information, contact our corporate/ institutional sales department: (800) 998-9938 or [email protected]. Editor: Ian F. Darwin Indexer: Production Editor: Cover Designer: Copyeditor: Interior Designer: Proofreader: Illustrators: and November 2011: First Edition. Revision History for the First Edition: See http://oreilly.com/catalog/errata.csp?isbn=9781449388416 for release details. Android is a trademark of Google, Inc. for their open-source operating environment for mobile devices. Linux is a trademark of Linus Torvalds. Java is a trademark of Oracle America Corporation (formerly Sun Microsystems). Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. !!FILL THIS IN!! and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations uses by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein.
  • Bibliography of Erik Wilde

    Bibliography of Erik Wilde

    dretbiblio dretbiblio Erik Wilde's Bibliography References [1] AFIPS Fall Joint Computer Conference, San Francisco, California, December 1968. [2] Seventeenth IEEE Conference on Computer Communication Networks, Washington, D.C., 1978. [3] ACM SIGACT-SIGMOD Symposium on Principles of Database Systems, Los Angeles, Cal- ifornia, March 1982. ACM Press. [4] First Conference on Computer-Supported Cooperative Work, 1986. [5] 1987 ACM Conference on Hypertext, Chapel Hill, North Carolina, November 1987. ACM Press. [6] 18th IEEE International Symposium on Fault-Tolerant Computing, Tokyo, Japan, 1988. IEEE Computer Society Press. [7] Conference on Computer-Supported Cooperative Work, Portland, Oregon, 1988. ACM Press. [8] Conference on Office Information Systems, Palo Alto, California, March 1988. [9] 1989 ACM Conference on Hypertext, Pittsburgh, Pennsylvania, November 1989. ACM Press. [10] UNIX | The Legend Evolves. Summer 1990 UKUUG Conference, Buntingford, UK, 1990. UKUUG. [11] Fourth ACM Symposium on User Interface Software and Technology, Hilton Head, South Carolina, November 1991. [12] GLOBECOM'91 Conference, Phoenix, Arizona, 1991. IEEE Computer Society Press. [13] IEEE INFOCOM '91 Conference on Computer Communications, Bal Harbour, Florida, 1991. IEEE Computer Society Press. [14] IEEE International Conference on Communications, Denver, Colorado, June 1991. [15] International Workshop on CSCW, Berlin, Germany, April 1991. [16] Third ACM Conference on Hypertext, San Antonio, Texas, December 1991. ACM Press. [17] 11th Symposium on Reliable Distributed Systems, Houston, Texas, 1992. IEEE Computer Society Press. [18] 3rd Joint European Networking Conference, Innsbruck, Austria, May 1992. [19] Fourth ACM Conference on Hypertext, Milano, Italy, November 1992. ACM Press. [20] GLOBECOM'92 Conference, Orlando, Florida, December 1992. IEEE Computer Society Press. http://github.com/dret/biblio (August 29, 2018) 1 dretbiblio [21] IEEE INFOCOM '92 Conference on Computer Communications, Florence, Italy, 1992.
  • Netscape 6.2.3 Software for Solaris Operating Environment

    Netscape 6.2.3 Software for Solaris Operating Environment

    What’s New in Netscape 6.2 Netscape 6.2 builds on the successful release of Netscape 6.1 and allows you to do more online with power, efficiency and safety. New is this release are: Support for the latest operating systems ¨ BETTER INTEGRATION WITH WINDOWS XP q Netscape 6.2 is now only one click away within the Windows XP Start menu if you choose Netscape as your default browser and mail applications. Also, you can view the number of incoming email messages you have from your Windows XP login screen. ¨ FULL SUPPORT FOR MACINTOSH OS X Other enhancements Netscape 6.2 offers a more seamless experience between Netscape Mail and other applications on the Windows platform. For example, you can now easily send documents from within Microsoft Word, Excel or Power Point without leaving that application. Simply choose File, “Send To” to invoke the Netscape Mail client to send the document. What follows is a more comprehensive list of the enhancements delivered in Netscape 6.1 CONFIDENTIAL UNTIL AUGUST 8, 2001 Netscape 6.1 Highlights PR Contact: Catherine Corre – (650) 937-4046 CONFIDENTIAL UNTIL AUGUST 8, 2001 Netscape Communications Corporation ("Netscape") and its licensors retain all ownership rights to this document (the "Document"). Use of the Document is governed by applicable copyright law. Netscape may revise this Document from time to time without notice. THIS DOCUMENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. IN NO EVENT SHALL NETSCAPE BE LIABLE FOR INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND ARISING FROM ANY ERROR IN THIS DOCUMENT, INCLUDING WITHOUT LIMITATION ANY LOSS OR INTERRUPTION OF BUSINESS, PROFITS, USE OR DATA.
  • CSS 3 Margins Divs

    CSS 3 Margins Divs

    VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 __________________________________________________________________________________ CSS 3 - LAYOUT BASICS A FUNDAMENTAL CONCEPT – WHAT IS MEANT BY CASCADING The cascade is how CSS resolves conflicts when more than one rule is applied to the same element 4 style sheets applying: Internal styles External styles sheet Internal styles Browserʼs default style sheet Inline will beat out all – WHY? It is lowest in the cascade. Order of CSS rules is important The later a rule appears in a style sheet the more weight it is given MARGINS, BORDERS, PADDING See Ch. 10 – Web Standardistas Book About spacing – the space around our elements The effect the relationship of one element to another. The all important BOX MODEL All elements treated as boxes. Some are block-level Some are inline-level Each box is comprised of a content area and optional margins, borders and padding Up to now these have all be set by the Browserʼs default style all these can be specified The width of an element includes all – e.g. Margin-left + border-left + padding left – element width + padding-right + border-right + margin right Applying margins borders and padding See short html page in Ch. 10 First pass – no margins – fits to left edge of page Second pass - add background colour so we can see the block-level paragraph element Third pass - Before we add margins we must remove margins set by the browserʼs default style sheet. Set margin on body and on p to margin: 0; Once this is done you can add margin: 40 px; This sets margin on all four sides to 40 pixels.
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration

    Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration

    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
  • QUERYING JSON and XML Performance Evaluation of Querying Tools for Offline-Enabled Web Applications

    QUERYING JSON and XML Performance Evaluation of Querying Tools for Offline-Enabled Web Applications

    QUERYING JSON AND XML Performance evaluation of querying tools for offline-enabled web applications Master Degree Project in Informatics One year Level 30 ECTS Spring term 2012 Adrian Hellström Supervisor: Henrik Gustavsson Examiner: Birgitta Lindström Querying JSON and XML Submitted by Adrian Hellström to the University of Skövde as a final year project towards the degree of M.Sc. in the School of Humanities and Informatics. The project has been supervised by Henrik Gustavsson. 2012-06-03 I hereby certify that all material in this final year project which is not my own work has been identified and that no work is included for which a degree has already been conferred on me. Signature: ___________________________________________ Abstract This article explores the viability of third-party JSON tools as an alternative to XML when an application requires querying and filtering of data, as well as how the application deviates between browsers. We examine and describe the querying alternatives as well as the technologies we worked with and used in the application. The application is built using HTML 5 features such as local storage and canvas, and is benchmarked in Internet Explorer, Chrome and Firefox. The application built is an animated infographical display that uses querying functions in JSON and XML to filter values from a dataset and then display them through the HTML5 canvas technology. The results were in favor of JSON and suggested that using third-party tools did not impact performance compared to native XML functions. In addition, the usage of JSON enabled easier development and cross-browser compatibility. Further research is proposed to examine document-based data filtering as well as investigating why performance deviated between toolsets.
  • CSS 2.1) Specification

    CSS 2.1) Specification

    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Editors Draft 26 February 2014 This version: http://www.w3.org/TR/2014/ED-CSS2-20140226 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/REC-CSS2-20110607 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Editors: Bert Bos <bert @w3.org> Tantek Çelik <tantek @cs.stanford.edu> Ian Hickson <ian @hixie.ch> Håkon Wium Lie <howcome @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1]. It supports media- specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface. CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented.
  • Qumu HTML5 Multicast Extension Deliver Video Across the Enterprise—With No Plugins Required

    Qumu HTML5 Multicast Extension Deliver Video Across the Enterprise—With No Plugins Required

    DATASHEET Qumu HTML5 Multicast Extension Deliver video across the enterprise—with no plugins required What is it? The Qumu HTML5 Multicast Extension is a revolutionary solution to the problem introduced by modern browsers— delivering Multicast video behind the firewall, to users who no longer have browsers that support Microsoft Silverlight. The HTML5 Multicast Extension from Qumu provides a seamless way to play a Multicast live broadcast natively in newer versions of Google Chrome, Internet Explorer, Microsoft Edge and Firefox. How does it work? Deployed with Qumu’s on premise solution, enterprises simply install the extension on each desktop to allow employees to experience live streaming with Multicast on the browser of their choice. By working together with the Qumu VideoNet Edge that originates multicast throughout the corporate network, the HTML5 Multicast Extension provides a complete solution for delivering and rendering multicast video in corporate environment. What are the benefits? Organizations can leverage current infrastructure on the Network and WAN to support multicast in modern browsers The extension supports HTML5 with no additional requirements for Windows Media, Flash, or Silverlight The Qumu HTML5 Multicast Extension delivers high-quality video to the entire organization with minimal network impact Qumu on premise platform customers can expand their video delivery footprint to thousands of users—quickly and cost effectively The extension can be deployed and managed via a software- only solution, 100% behind the firewall. Playlist failover from RTP Multicast to RTSP Unicast is supported, and so are in-band slides and events What are the technical details? Client Support: Formats Supported: · Windows 7, 8.1 and 10 · IE11 (Win10) Live – RTP Multicast, RTSP Unicast · Google Chrome · Microsoft Edge · Firefox Want to Know More? Contact Us.
  • Advanced XHTML and CSS

    Advanced XHTML and CSS

    CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 4 Advanced XHTML and CSS Copyright © 2014 by Stephen Makonin Slides based on course material © SFU Icons © their respective owners 1 Learning Objectives In this unit you will learn the following. • Use XHTML to create valid web pages. • Design HTML so it can be easily styled with CSS. • Develop CSS rules to create particular appearances. • Understand CSS colour codes for a given colour. • Construct a CSS that implements a visual design. • Justify the separation of content and structure from visual appearance. • Select appropriate HTML tags to correctly describe the different parts of the page. Copyright © 2014 by Stephen Makonin 2 Topics 1. Validating XHTML 2. Common Mistakes Lecture 1 3. Block vs. Inline Elements 4. Character Entities 5. Generic Tags, IDs and Classes Lecture 2 6. Style Selectors Revisited 7. Positioning Elements Lecture 3 8. Steps in Webpage Creation Copyright © 2014 by Stephen Makonin 3 Valid XHTML Valid XHTML means your markup follows a set of rules: • Have a document type (DOCTYPE) at the top of the. • Specific the namespace in <html>. • Open tags must close in order. • Inline tags must be inside block tags. • Some tags such as <li> can only be in <ol> or <ul>. • Special characters (e.g. <) in content must be encoded. • Markup tags and attributes name are lowercase. If these rules are followed the a validator says: �� Otherwise: Copyright © 2014 by Stephen Makonin 4 �� Empty Valid XHTML Copyright © 2014 by Stephen Makonin 5 Document Type You MUST declare a document type as the 1st line in your XHTML document.
  • HTML5 Indexeddb

    HTML5 Indexeddb

    HHTTMMLL55 -- IINNDDEEXXEEDDDDBB http://www.tutorialspoint.com/html5/html5_indexeddb.htm Copyright © tutorialspoint.com The indexeddb is a new HTML5 concept to store the data inside user's browser. indexeddb is more power than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster. Why to use indexeddb? The W3C has announced that the Web SQL database is a deprecated local storage specification so web developer should not use this technology any more. indexeddb is an alternative for web SQL data base and more effective than older technologies. Features it stores key-pair values it is not a relational database IndexedDB API is mostly asynchronous it is not a structured query language it has supported to access the data from same domain IndexedDB Before enter into an indexeddb, we need to add some prefixes of implementation as shown below window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange if (!window.indexedDB) { window.alert("Your browser doesn't support a stable version of IndexedDB.") } Open an IndexedDB database Before creating a database, we have to prepare some data for the data base.let's start with company employee details. const employeeData = [ { id: "01", name: "Gopal K Varma", age: 35,