DOCSLIB.ORG

Servlets and JSP Chapter 4

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Servlets and JSP Chapter 4 Chapter 4 A crash course in HTML5 and CSS3 Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Code the HTML that defines the content and structure of a web page using any of the elements and attributes presented in this chapter. 2. Code the CSS that provides the formatting of the web pages using any of the techniques presented in this chapter. 3. Code HTML forms that use text boxes, check boxes, radio buttons, combo boxes, list boxes, and buttons to send data to a servlet. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 2 Objectives (continued) Knowledge 1. Describe the use of HTML’s head, title, and body elements. 2. Describe the use of HTML’s h1, h2, p, img, form, a, input, label, and br elements. 3. Described the use of HTML5’s header, nav, aside, and footer elements. 4. Describe the use of HTML’s div and span tags. 5. Describe the use of HTML’s table, tr, th, and td tags. 6. Explain why it’s a best practice to use an external style sheet. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 3 Objectives (continued) Knowledge 7. Name and describe three types of CSS selectors. 8. Name and describe the components of a CSS rule set. 9. Name and describe the components of a CSS rule. 10. Describe how to use HTML to display text boxes, check boxes, radio buttons, combo boxes, list boxes, and buttons. 11. Explain how to use an HTML form to send data to a servlet. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 4 The generated HTML for a new page <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div>TODO write content</div> </body> </html> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 5 The HTML after it has been modified <!DOCTYPE html> <html> <head> <title>Murach's Java Servlets and JSP</title> <link rel="stylesheet" href="styles/main.css" type="text/css"/> <meta charset="UTF-8"> </head> <body> <div>TODO write content</div> </body> </html> The title displayed in the browser’s tab Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 6 How to start a web page The DOCTYPE element specifies the document uses HTML5. The title element specifies the name the browser shows in its title bar or tab. The link element references the external style sheet that contains the CSS for the page. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 7 Common HTML elements Element Type Defines h1 Block A level-1 heading with content in bold at 200% of the base font size. h2 Block A level-2 heading with content in bold at 150% of the base font size. p Block A paragraph at 100% of the base font size. img Block An image. form Block A form that can be submitted to the web server for processing. a Inline A link that goes to another page or a location on the current page when clicked. input Inline A control on a form like a text box or button. label Inline A label that identifies a control on a form. br A line break that starts a new line. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 8 How to code HTML elements Two block elements with opening and closing tags <h1>Email List application</h1> <p>Here is a list of links:</p> Two self-closing tags <br> <img src="logo.gif" alt="Murach Logo"> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 9 How to code the attributes for HTML elements How to code an opening tag with attributes <a href="contact.html" title="Click to Contact Us"> How to code a Boolean attribute <input type="checkbox" name="mailList" checked> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 10 How to code an HTML comment <!-- The text in a comment is ignored --> How to code a character entity for a space <td>&nbsp;</td> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 11 An introduction to HTML An HTML document contains HTML elements that specify the content of a web page. By default, block elements are displayed on new lines, but inline elements flow to the right of the elements that precede it. An attribute consists of an attribute name, an equals sign, and a value in quotation marks. But to show that a Boolean attribute is on, code just the name of the attribute. Comments can be used to describe or comment out portions of HTML code. Character entities provide for special characters, like a non-breaking space (&nbsp;) Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 12 The primary HTML5 semantic elements Element Contents header The header for a page. section A generic section of a document that doesn’t indicate the type of content. article A composition like an article in the paper. nav A section of a page that contains links to other pages or placeholders. aside A section of a page like a sidebar that is related to the content that’s near it. figure An image, table, or other component that’s treated as a figure. footer The footer for a page. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 13 A page with header, section, and footer elements <body> <header> <h1>San Joaquin Valley Town Hall</h1> </header> <section> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!</p> </section> <footer> <p>&copy; San Joaquin Valley Town Hall.</p> </footer> </body> The page displayed in a web browser Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 14 How to use the HTML5 semantic elements HTML5 provides new semantic elements that you should use to structure the contents of a web page. Using these elements can be referred to as HTML5 semantics. Two benefits that you get from using the semantic elements are (1) simplified HTML and CSS, and (2) improved search engine optimization (SEO). Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 15 The div and span elements Element Description div A block element that provides a container for other elements. span An inline element that lets you identify text that can be formatted with CSS. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 16 The way div elements were used before HTML5 <div id="header"> <h1>San Joaquin Valley Town Hall</h1> </div> <div id="contents"> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!</p> </div> <div id="footer"> <p>&copy; San Joaquin Valley Town Hall.</p> </div> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 17 Span elements in HTML for JavaScript <label>Email Address:</label> <input type="text" name="email_address1"> <span id="email_address1_error">*</span><br> <label>Re-enter Email Address:</label> <input type="text" name="email_address2"> <span id="email_address2_error">*</span><br> Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 18 The div and span elements with HTML5 Before HTML5, div elements were used to organize the content within the body of a document. Then, the ids for these div elements were used to apply CSS formatting to the elements. Today, HTML5 semantic elements should replace most div elements. That makes the structure of a page more apparent. Before HTML5, span elements were used to identify portions of text that you could apply formatting to. Today, a better practice is to use elements that identify the contents. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 19 The current browsers and their HTML5 ratings (perfect score is 500) Browser Release HTML5 Test Rating Google Chrome 33 505 Opera 20 496 Mozilla Firefox 29 467 Apple Safari 7 397 Internet Explorer 11 376 The website for these ratings http://www.html5test.com Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 20 Guidelines for cross-browser compatibility Test web pages on all major browsers, including all older versions of browsers that are still commonly used. Use HTML5 features supported by all modern browsers, especially HTML5 semantic elements. Use two workarounds that follow so these applications run on older browsers too. Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 21 Two workarounds for HTML5 semantic elements The JavaScript shiv <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> The CSS rule set article, aside, figure, figcaption, footer, header, nav, section { display: block; } Murach's Java Servlets/JSP (3rd Ed.), C4 © 2014, Mike Murach & Associates, Inc. Slide 22 How to ensure cross-browser compatibility Today, there are still differences in the way that different browsers handle HTML and CSS, and especially HTML5 and CSS3. As a developer, though, you want your web pages to work on as many different web browsers as possible. This is referred to as cross-browser compatibility. To provide for cross-browser compatibility, you need to test your applications on all of the browsers that your users might use.
Load more

Recommended publications
  • Building Native Apps for BB10/Playbook for Ios Developers
    Building native apps for BB10/PlayBook for iOS developers Ranbijay Kumar & Prakash Sainani Developer Relations – Research In Motion BlackBerry 10 SDKs Java ActionScript C/C++ C++/Qt HTML5 BlackBerry ® Android ™ ™ Adobe ® AIR ® Native SDK Cascades WebWorks Runtime Architecture Native & HTML5 Apps Android Apps Adobe AIR Apps HTML/CSS Open GL Java Action Script Cascades QML JavaScript Open AL .apk .swf WebKit JavaScript C++ C/C++ Android Runtime AIR Runtime Platform APIs Qt C++ C/C++ Network Storage Audio/Video Graphics Push i18n … QNX Kernel BlackBerry 10 Foundations Platform APIs & Core PackagesApplications Android Native Web AIR Player Runtime Runtime Runtime Application BBM™ Application Payment Advertising Push Data Notification Phone Calendar Infrastructure Service Platform Invocation Share Analytics Contacts Messages Tasks … Configuration Cascades Search Config Balance Backup / Lifecycle Utilities i18n Instrument n … Restore System Service Authenticatio Navigator Installer Launcher Multimedia SQLite NFC n Window WebKit Protocols Network DRM Crypto … Manager OSOS Memory Process Power Device IPC File System … Management Management Management Drivers The Platforms iOS BB10 UIKit Cascades / QML Application Frameworks Webkit Application Frameworks [Maps, Message …] [Qt, Maps, PIM, Share …] Graphics and Audio Graphics and Audio Core Services Core Services (/BPS) iOS (Kernel) & Drivers Posix BB10 (QNX micro-kernel) & Drivers Types of Apps iOS BB10 Native Native (Objective C and Cocoa Touch (C/C++, QML, Cascades, UIKit , OpenGL) OpenGL) Web Apps Web Apps Native with Webview Native with Webview PhoneGap… WebWorks, PhoneGap… Native and Web Apps in BB10 C/C++ is used widely due to it’s portability. It’s a true cross-platform language (combined with POSIX) Enables Lots of BB10 Open Source Frameworks iOS can also run C/C++ apps (Objective-C++).
    [Show full text]
  • 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.
    [Show full text]
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
    [Show full text]
  • 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.
    [Show full text]
  • Copyrighted Material
    05_096970 ch01.qxp 4/20/07 11:27 PM Page 3 1 Introducing Cascading Style Sheets Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what back- ground images or colors are used, as well as a variety of other visual effects. CSS was created in language that is easy to learn and understand, but it provides powerful control over the presentation of a document. Most commonly, CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page — the hyperlinks, paragraphs, headings, lists, and tables — and are the glue of a web docu- ment. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like, and JavaScript, which is another language that pro- vides dynamic and interactive functionality. HTML and XHTML are very similar languages. In fact, for the majority of documents today, they are pretty much identical, although XHTML has some strict requirements about the type of syntax used. I discuss the differences between these two languages in detail in Chapter 2, and I also pro- vide a few simple examples of what each language looks like and how CSS comes together with the language to create a web page. In this chapter, however, I discuss the following: ❑ The W3C, an organization that plans and makes recommendations for how the web should functionCOPYRIGHTED and evolve MATERIAL ❑ How Internet documents work, where they come from, and how the browser displays them ❑ An abridged history of the Internet ❑ Why CSS was a desperately needed solution ❑ The advantages of using CSS 05_096970 ch01.qxp 4/20/07 11:27 PM Page 4 Part I: The Basics The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented.
    [Show full text]
  • Next Media Deliverable Template
    WP 1 AND EREADING AND D 1.1.4.1 STATE-OF-THE-ART-STANDARDS Deliverable number 1.1.4.1 State-of-the art, html5-standard Author(s): Olli Nurmi Confidentiality: Public Date and status: 7.9.2011 - Status: Version 1.0 This work was supported by TEKES as part of the next Media programme of TIVIT (Finnish Strategic Centre for Science, Technology and Innovation in the field of ICT) Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011) Version history: Version Date State Author(s) OR Remarks (draft/ /update/ final) Editor/Contributors 0.9 30.6.2011 draft Olli Nurmi 1.0 1.9.2011 update Olli Nurmi 1.1 28.9.2011 final Olli Nurmi 1.2 4.10.2011 final Olli Nurmi Issues about Onix is removed to separate deliverable next Media www.nextmedia.fi www.tivit.fi WP 1 AND EREADING AND D 1.1.4.1 1 (12) STATE-OF-THE-ART-STANDARDS Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011) Table of Contents 1 Introduction ............................................................................................................. 3 1.1 Web browsers ................................................................................................. 3 1.2 HTML5 – an open standard ............................................................................ 4 1.3 CSS - Cascading Style Sheets ....................................................................... 6 1.4 HTML5 vs native applications ......................................................................... 6 2 HTML5/CSS3 standards ........................................................................................
    [Show full text]
  • 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.
    [Show full text]
  • Chapter 10 Document Object Model and Dynamic HTML
    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
    [Show full text]
  • How-To Guide: Copy and Adjust Skins (SAP CRM 7.0).Pdf
    How-to Guide: Copy and Adjust Skins ® SAP CRM 7.0 Target Audience System administrators Technology consultants Document version: 1.1 – December 2008 SAP AG Dietmar-Hopp-Allee 16 69190 Walldorf Germany T +49/18 05/34 34 24 F +49/18 05/34 34 20 www.sap.com © Copyright 2007 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their Some software products marketed by SAP AG and its distributors respective logos are trademarks or registered trademarks of SAP AG contain proprietary software components of other software vendors. in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their Microsoft, Windows, Outlook, and PowerPoint are registered respective companies. Data contained in this document serves trademarks of Microsoft Corporation. informational purposes only. National product specifications may vary. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, These materials are subject to change without notice. These materials xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, are provided by SAP AG and its affiliated companies ("SAP Group") Tivoli, Informix, i5/OS, POWER, POWER5, OpenPower and for informational purposes only, without representation or warranty of PowerPC are trademarks or registered trademarks of IBM Corporation.
    [Show full text]
  • Head First HTML with CSS & XHTML
    Head First HTML with CSS & XHTML Wouldn’t it be dreamy if there was an HTML book that didn’t assume you knew what elements, attributes, validation, selectors, and pseudo-classes were, all by page three? It’s probably just a fantasy... Elisabeth Freeman Eric Freeman Beijing • Cambridge • Köln • Sebastopol • Taipei • Tokyo Head First HTML with CSS and XHTML by Elisabeth Freeman and Eric Freeman Copyright © 2006 O’Reilly Media, Inc. 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 Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Associate Publisher: Mike Hendrickson Series Creators: Kathy Sierra, Bert Bates Series Advisors: Elisabeth Freeman, Eric Freeman Editor: Brett McLaughlin Cover Designers: Ellie Volckhausen, Karen Montgomery HTML Wranglers: Elisabeth Freeman, Eric Freeman Structure: Elisabeth Freeman Style: Eric Freeman Page Viewer: Oliver Printing History: December 2005: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The Head First series designations, Head First HTML with CSS and XHTML, and related trade dress 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.
    [Show full text]
  • Framework for Developing Offline HTML5 Applications
    MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Framework for Developing Offline HTML5 Applications DIPLOMA THESIS Petr Kunc Brno, 2013 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Advisor: doc. RNDr. Tomás Pitner, PhD. ii Acknowledgement Above all, I would like to thank my advisor doc. RNDr. Tomáš Pitner, PhD. for leading not only this diploma thesis but also for leading me during my studies. I would also like to thank my colleagues in Laboratory of Software Architectures and Information Systems, especially Mgr. Filip Nguyen and Mgr. Daniel Tovarˇnákfor priceless advice on implementation and for providing their knowledge. Nevertheless, I would like to thank my colleagues in Celebrio Software company. iii Abstract The aim of this thesis is to provide detailed information about developing offline web ap- plications. The thesis presents important technologies in the development and mostly deals with Application cache technology. It summarizes advantages and also disadvantages and problems of the technology. Then, it offers solutions to some of the problems and introduces framework for build- ing offline web applications more sophisticatedly. At last, demonstration application is pre- sented which shows the benefits of proposed technology. iv Keywords HTML5, offline, web applications, application
    [Show full text]
  • Get Started with HTML5 ● Your Best Bet to Experiment with HTML5 – Safari – Chrome As of – Beta: Firefox 4 and IE 9
    BibhasBibhas BhattacharyaBhattacharya CTO,CTO, WebWeb AgeAge SolutionsSolutions [email protected]@webagesolutions.com www.webagesolutions.com/trainingwww.webagesolutions.com/training Get Started With HTML5 ● Your best bet to experiment with HTML5 – Safari – Chrome As of – Beta: FireFox 4 and IE 9. October 2010 ● Test your browser: – html5test.com – html5demos.com – www.findmebyip.com/litmus ● JavaScript library to test for HTML5 features – www.modernizr.com Browser Support ● Dreamweaver CS5 11.0.3 update will install HTML5 compatibility pack. ● CS4 and CS3 users should download the pack from Dreamweaver Exchange. ● See a demo: – www.youtube.com/watch?v=soNIxy2sj0A DreamWeaver Story - The canvas element - Custom audio & video player - New semantic elements - Geolocation (header, section, footer etc.) - Local data storage - New form input elements - Web SQL & IndexedDB (e-mail, date, time etc.) - Offline apps - Audio and video - Messaging - CSS3 - Web worker - Push using WebSocket For web page designers For developers What's New in HTML5? SimplifiedSimplified <!DOCTYPE html> DOCTYPEDOCTYPE <html> <head> <title>Page Title</title> Simplified <meta charset="UTF-8"> Simplified charsetcharset settingsetting </head> <body> <p>Hello World</p> </body> </html> Basic HTML 5 Document ● Elements that have no special visual styling but are used to provide structure and meaning to the content. ● HTML4 semantic elements – div (block) – span (in line) ● HTML5 semantic elements – header, footer, section, article, aside, time and others..
    [Show full text]