DOCSLIB.ORG

Web Standards Solutions the Markup and Style Handbook Special Edition

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Web Standards Solutions the Markup and Style Handbook Special Edition Web Standards Solutions The Markup and Style Handbook Special Edition Dan Cederholm Web Standards Solutions: The Markup and Style Handbook, Special Edition Copyright © 2009 by Dan Cederholm All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1920-0 ISBN-13 (electronic): 978-1-4302-1921-7 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)ju<olnejcan)o^i*_ki, or visit sss*olnejcankjheja*_ki. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail ejbk<]lnaoo*_ki, or visit sss*]lnaoo*_ki. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at dppl6++sss*]lnaoo*_ki+ejbk+^qhgo]hao. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at sss*bneaj`okba`*_ki in the Downloads section. Credits Lead Editor Associate Production Director Ben Renow-Clarke Kari Brooks-Copony Technical Reviewer Production Editor Matt Heerema Laura Cheu Editorial Board Compositor Clay Andres, Steve Anglin, Mark Beckner, Lynn L’Heureux Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Proofreader Michelle Lowman, Matthew Moodie, Duncan Parkes, Lisa Hamilton Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Indexer Matt Wade, Tom Welsh Broccoli Information Management Project Manager Interior and Cover Designer Richard Dal Porto Kurt Krames Copy Editor Manufacturing Director Liz Welch Tom Debolski CONTENTS AT A GLANCE Foreword ..................................................................xvii About the Author ........................................................xviii About the Technical Reviewer .......................................... xix Acknowledgments .........................................................xx Introduction ............................................................... xxi PART ONE GET DOWN WITH MARKUP ........................... 1 Chapter 1 Lists .............................................................. 3 Chapter 2 Headings ........................................................17 Chapter 3 Tables are Evil? ................................................29 Chapter 4 Quotations .....................................................49 Chapter 5 Forms ...........................................................61 Chapter 6 <Strong>, <Em>, and Other Phrase Elements ..............83 Chapter 7 Anchors ........................................................103 Chapter 8 More Lists .....................................................119 Chapter 9 Minimizing Markup ...........................................133 iv PART TWO SIMPLEBITS OF STYLE ...............................147 Chapter 10 Applying CSS .................................................149 Chapter 11 Print Styles ...................................................167 Chapter 12 CSS Layouts ..................................................179 Chapter 13 Styling Text ..................................................207 Chapter 14 Image Replacement .........................................223 Chapter 15 Styling <body> ..............................................243 Chapter 16 Next Steps ...................................................255 Index ...................................................................... 263 v CONTENTS Foreword ..................................................................xvii About the Author ........................................................xviii About the Technical Reviewer .......................................... xix Acknowledgments .........................................................xx Introduction ............................................................... xxi PART ONE GET DOWN WITH MARKUP ........................... 1 Chapter 1 Lists .............................................................. 3 Let’s go shopping ...............................................................4 Quiz time .....................................................................4 Method A: The <br /> breakdown ..............................................4 It’s a wrap ..................................................................5 Method B: The bullet that bites ................................................6 Validation, please ........................................................6 Method C: Getting closer .....................................................6 Method D: Wrapper’s delight ..................................................8 Summary ......................................................................8 Extra credit ....................................................................9 Bite the bullet ..............................................................9 Getting fancier with custom bullets ............................................10 Lists that navigate ..........................................................11 Mini-tab shapes ............................................................14 Chapter 2 Headings ........................................................17 What is the best way to mark up the title of a document? .............................18 Method A: Meaningful? ......................................................18 Method B: The p and b combo ................................................19 Difficult to style .........................................................19 vii CONTENTS Method C: Style and substance ................................................19 Easily styled ............................................................19 Default distaste .........................................................20 Search engine friendly. 20 An aside on heading order ................................................21 Summary .....................................................................21 Extra credit ...................................................................22 Simple styling .................................................................22 Adding backgrounds ........................................................23 Backgrounds and borders .................................................24 Tiled backgrounds .......................................................24 Swappable icons ...........................................................25 Easy updates ...............................................................25 The chameleon effect .......................................................26 Aligning the <img> element ...............................................26 Wrapping up ..................................................................27 Chapter 3 Tables are Evil? ................................................29 Totally tabular .................................................................30 A table that everyone can sit at ..................................................30 Adding a summary .............................................................33 The head(s) of the table ........................................................33 Header and data relationships ....................................................35 Using the abbr attribute ........................................................36 <thead>, <tfoot>, and <tbody> ..................................................37 Are tables evil? ................................................................39 Extra credit ...................................................................39 Creating a grid .............................................................39 Collapsing the gaps .........................................................40 An IE/Mac note .........................................................41 Spaced out .............................................................41 Customizing the headers .....................................................42 Headers with background images ..............................................43 Tiny tile ...............................................................43 The CSS ...............................................................43 Assigning icons to IDs .......................................................44 The icons ..............................................................45 The CSS ...............................................................45 Combining
Load more

Recommended publications
  • Opera Software the Best Browsing Experience on Any Device
    Opera Software The best browsing experience on any device The best Internet experience on any device Web Standards for the Future – Bruce Lawson, Opera.com • Web Evangelist, Opera • Tech lead, Law Society & Solicitors Regulation Authority (2004-8) • Author 2 books on Web Standards, edited 2 • Committee member for British Standards Institution (BSI) for the new standard for accessible websites • Member of Web Standards Project: Accessibility Task Force • Member of W3C Mobile Best Practices Working Group Web Standards for the Future – Bruce Lawson, Opera.com B.A., Honours English Literature and Language with Drama Theresa is blind But she can use the Web if made with standards The big picture WWW The big picture Western Western Web A web (pre)history • 1989 TBL proposes a project • 1992 <img> in Mosaic beta. Now 99.57% (MAMA) • 1994 W3C started at MIT • 1996 The Browser Wars • 1999 WAP, Web Content Accessibility Guidelines (WCAG) • 2000 Flash Modern web history • 2000-ish .com Crash - Time to grow up... • 2002 Opera Mobile with Small Screen Rendering • 2005 WHAT-WG founded, W3C Mobile Web Initiative starts • 2007 W3C adopts WHAT-WG spec as basis for HTML 5 • January 22, 2008 First public working draft of HTML 5 Standards at Opera • 25 employees work on standards • Mostly at W3C - a big player • Working on many standards • Bringing new work to W3C • Implementing Standards properly (us and you!) (Web Standards Curriculum www.opera.com/wsc) Why standards? The Web works everywhere - The Web is the platform • Good standards help developers: validate; separate content and presentation - means specialisation and maintainability.
    [Show full text]
  • Designing and Implementing the OP and OP2 Web Browsers
    Designing and Implementing the OP and OP2 Web Browsers CHRIS GRIER, SHUO TANG and SAMUEL T. KING, University of Illinois at Urbana-Champaign Current web browsers are plagued with vulnerabilities, providing hackers with easy access to computer systems via browser-based attacks. Browser security efforts that retrofit existing browsers have had lim- ited success because the design of modern browsers is fundamentally flawed. To enable more secure web browsing, we design and implement a new browser, called the OP web browser, that attempts to improve the state-of-the-art in browser security. We combine operating system design principles with formal methods to design a more secure web browser by drawing on the expertise of both communities. Our design philosophy is to partition the browser into smaller subsystems and make all communication between subsystems sim- ple and explicit. At the core of our design is a small browser kernel that manages the browser subsystems and interposes on all communications between them to enforce our new browser security features. To show the utility of our browser architecture, we design and implement three novel security features. First, we develop flexible security policies that allow us to include browser plugins within our security framework. Second, we use formal methods to prove useful security properties including user interface invariants and browser security policy. Third, we design and implement a browser-level information-flow tracking system to enable post-mortem analysis of browser-based attacks. In addition to presenting the OP browser architecture, we discuss the design and implementation of a second version of OP, OP2, that includes features from other secure web browser designs to improve on the overall security and performance of OP.
    [Show full text]
  • Automated Cross-Browser Compatibility Testing
    Automated Cross-Browser Compatibility Testing ∗ Ali Mesbah Mukul R. Prasad Electrical and Computer Engineering Trusted Systems Innovation Group University of British Columbia Fujitsu Laboratories of America Vancouver, BC, Canada Sunnyvale, CA, USA [email protected] [email protected] ABSTRACT web browsers render web content somewhat differently [18, With the advent of Web 2.0 applications and new browsers, 24, 25, 26]. However, the scope and impact of this problem the cross-browser compatibility issue is becoming increas- has been rapidly growing due to two, fairly recent trends. ingly important. Although the problem is widely recognized First, modern, rich-content web applications have a heavy among web developers, no systematic approach to tackle client-side behavioral footprint, i.e., they are designed to ex- it exists today. None of the current tools, which provide ecute significant elements of their behavior exclusively on the screenshots or emulation environments, specifies any notion client-side, typically within the web browser. Further, tech- of cross-browser compatibility, much less check it automat- nologies such as Ajax [12], Flash, and event-handling for ically. In this paper, we pose the problem of cross-browser dynamic HTML, which support this thick-client behavior, compatibility testing of modern web applications as a `func- are the very aspects in which web browsers differ. tional consistency' check of web application behavior across Second, recent years have seen an explosion in the num- different web browsers and present an automated solution ber of available web browsers. There are nearly 100 different for it. Our approach consists of (1) automatically analyzing web browsers available today [31].
    [Show full text]
  • Appendix a the Ten Commandments for Websites
    Appendix A The Ten Commandments for Websites Welcome to the appendixes! At this stage in your learning, you should have all the basic skills you require to build a high-quality website with insightful consideration given to aspects such as accessibility, search engine optimization, usability, and all the other concepts that web designers and developers think about on a daily basis. Hopefully with all the different elements covered in this book, you now have a solid understanding as to what goes into building a website (much more than code!). The main thing you should take from this book is that you don’t need to be an expert at everything but ensuring that you take the time to notice what’s out there and deciding what will best help your site are among the most important elements of the process. As you leave this book and go on to updating your website over time and perhaps learning new skills, always remember to be brave, take risks (through trial and error), and never feel that things are getting too hard. If you choose to learn skills that were only briefly mentioned in this book, like scripting, or to get involved in using content management systems and web software, go at a pace that you feel comfortable with. With that in mind, let’s go over the 10 most important messages I would personally recommend. After that, I’ll give you some useful resources like important websites for people learning to create for the Internet and handy software. Advice is something many professional designers and developers give out in spades after learning some harsh lessons from what their own bitter experiences.
    [Show full text]
  • FOSS Philosophy 6 the FOSS Development Method 7
    1 Published by the United Nations Development Programme’s Asia-Pacific Development Information Programme (UNDP-APDIP) Kuala Lumpur, Malaysia www.apdip.net Email: [email protected] © UNDP-APDIP 2004 The material in this book may be reproduced, republished and incorporated into further works provided acknowledgement is given to UNDP-APDIP. For full details on the license governing this publication, please see the relevant Annex. ISBN: 983-3094-00-7 Design, layout and cover illustrations by: Rezonanze www.rezonanze.com PREFACE 6 INTRODUCTION 6 What is Free/Open Source Software? 6 The FOSS philosophy 6 The FOSS development method 7 What is the history of FOSS? 8 A Brief History of Free/Open Source Software Movement 8 WHY FOSS? 10 Is FOSS free? 10 How large are the savings from FOSS? 10 Direct Cost Savings - An Example 11 What are the benefits of using FOSS? 12 Security 13 Reliability/Stability 14 Open standards and vendor independence 14 Reduced reliance on imports 15 Developing local software capacity 15 Piracy, IPR, and the WTO 16 Localization 16 What are the shortcomings of FOSS? 17 Lack of business applications 17 Interoperability with proprietary systems 17 Documentation and “polish” 18 FOSS SUCCESS STORIES 19 What are governments doing with FOSS? 19 Europe 19 Americas 20 Brazil 21 Asia Pacific 22 Other Regions 24 What are some successful FOSS projects? 25 BIND (DNS Server) 25 Apache (Web Server) 25 Sendmail (Email Server) 25 OpenSSH (Secure Network Administration Tool) 26 Open Office (Office Productivity Suite) 26 LINUX 27 What is Linux?
    [Show full text]
  • Cascading Style Sheet Web Tool
    CASCADING STYLE SHEET WEB TOOL _______________ A Thesis Presented to the Faculty of San Diego State University _______________ In Partial Fulfillment of the Requirements for the Degree Master of Science in Computer Science _______________ by Kalthoum Y. Adam Summer 2011 iii Copyright © 2011 by Kalthoum Y. Adam All Rights Reserved iv DEDICATION I dedicate this work to my parents who taught me not to give up on fulfilling my dreams. To my faithful husband for his continued support and motivation. To my sons who were my great inspiration. To all my family and friends for being there for me when I needed them most. v ABSTRACT OF THE THESIS Cascading Style Sheet Web Tool by Kalthoum Y. Adam Master of Science in Computer Science San Diego State University, 2011 Cascading Style Sheet (CSS) is a style language that separates the style of a web document from its content. It is used to customize the layout and control the appearance of web pages written by markup languages. CSS saves time while developing the web page by applying the same layout and style to all pages in the website. Furthermore, it makes the website easy to maintain by just editing one file. In this thesis, we developed a CSS web tool that is intended to web developers who will hand-code their HTML and CSS to have a complete control over the web page layout and style. The tool is a form wizard that helps developers through a user-friendly interface to create a website template with a valid CSS and XHTML code.
    [Show full text]
  • Website Development and Web Standards in the Ubiquitous World: Where Are We Going?
    WSEAS TRANSACTIONS on COMPUTERS Serena Pastore Website development and web standards in the ubiquitous world: Where are we going? SERENA PASTORE INAF-Astronomical Observatory of Padova National Institute for Astrophisics (INAF) Vicolo Osservatorio 5 – 35122 - Padova ITALY [email protected] Abstract: - A website is actually the first indispensable tool for information dissemination, but its development embraces various aspects: the choice of Content Management System (CMS) to implement production and the publishing process, the provision of relationships and interconnections with social networks and public web services, and the reuse of information from other sources. Meanwhile, the context where web content is displayed has dramatically changed with the advent of mobile devices that are very different in terms of size and features, which have led to a ubiquitous world made of mobile Internet-connected devices. Users’ behavior on mobile web devices means that developers need new strategies for web design. The paper analyzes technologies, methods, and solutions that should be adopted to provide a good user experience regardless of the devices used to visualize the content in its various forms (i.e., web pages, web applications, widgets, social applications, and so on), assuring that open standards are adhered to, and thus providing wider accessibility to users. The strategies for website development cover responsive technology vs. mobile apps, the interconnection with social networks and web services in the Google world, the adoption
    [Show full text]
  • Download Text, HTML, Or Images for Offline Use
    TALKING/SPEAKING/STALKING/STREAMING: ARTIST’S BROWSERS AND TACTICAL ENGAGEMENTS WITH THE EARLY WEB Colin Post A thesis submitted to the faculty at the University of North Carolina at Chapel Hill in partial fulfillment of the requirements for the degree of Master of Arts in Art History in the College of Arts & Sciences Chapel Hill 2019 Approved by: Cary Levine Victoria Rovine Christoph Brachmann © 2019 Colin Post ALL RIGHTS RESERVED ii ACKNOWLEDGMENTS Many people have supported me throughout the process of writing this thesis—support duly needed and graciously accepted as I worked on this thesis while also conducting research for a dissertation in Information Science and in the midst of welcoming my daughter, Annot Finkelstein, into the world. My wife, Rachel Finkelstein, has been steadfast throughout all of this, not least of which in the birth of our daughter, but also in her endless encouragement of my scholarship. All three of my readers, Cary Levine, Victoria Rovine, and Christoph Brachmann, deserve thanks for reading through several drafts and providing invaluable feedback. Cary has also admirably served as my advisor throughout the Art History degree program as well as a member of my dissertation committee. At times when it seemed difficult, if not impossible, to complete everything for both degrees, Cary calmly assured me that I could achieve these goals. Leading the spring 2019 thesis writing seminar, Dr. Rovine helped our whole cohort through to the successful completion of our theses, providing detailed and thoughtful comments on every draft. I also deeply appreciate the support from my peers in the course.
    [Show full text]
  • Designing Beneath the Surface of the Web Sarah Horton Dartmouth College 6224 Baker/Berry Hanover, NH 03755 USA 603 646-1087 [email protected]
    Designing Beneath the Surface of the Web Sarah Horton Dartmouth College 6224 Baker/Berry Hanover, NH 03755 USA 603 646-1087 [email protected] ABSTRACT clarity influence how well software can read and interpret the At its most basic, the web allows for two modes of access: visual source code. Nonvisual web access can be improved by applying and non-visual. For the most part, our design attention is focused the following guidelines for source code design. on making decisions that affect the visual, or surface, layer — Shneiderman defines universal usability as an approach to design colors and type, screen dimensions, fixed or flexible layouts. that is focused on “enabling all citizens to succeed in using However, much of the power of the technology lies beneath the information and communication technologies to support their surface, in the underlying code of the page. There, in the unseen tasks” [18]. A focus on page code design improves the universal depths of the page code, we make decisions that influence how usability of web pages by addressing access challenges in a well, or poorly, our pages are read and interpreted by software. In variety of contexts. For instance, the small viewport on mobile this paper, we shift our attention beneath the surface of the web devices presents many of the same challenges as nonvisual access. and focus on design decisions that affect nonvisual access to web This paper concludes with a discussion of how these guidelines pages. can be applied to improve web access for mobile users. Categories and Subject Descriptors 2.
    [Show full text]
  • NIST SP 800-28 Version 2 Guidelines on Active Content and Mobile
    Special Publication 800-28 Version 2 (Draft) Guidelines on Active Content and Mobile Code Recommendations of the National Institute of Standards and Technology Wayne A. Jansen Theodore Winograd Karen Scarfone NIST Special Publication 800-28 Guidelines on Active Content and Mobile Version 2 Code (Draft) Recommendations of the National Institute of Standards and Technology Wayne A. Jansen Theodore Winograd Karen Scarfone C O M P U T E R S E C U R I T Y Computer Security Division Information Technology Laboratory National Institute of Standards and Technology Gaithersburg, MD 20899-8930 March 2008 U.S. Department of Commerce Carlos M. Gutierrez, Secretary National Institute of Standards and Technology James M. Turner, Acting Director GUIDELINES ON ACTIVE CONTENT AND MOBILE CODE Reports on Computer Systems Technology The Information Technology Laboratory (ITL) at the National Institute of Standards and Technology (NIST) promotes the U.S. economy and public welfare by providing technical leadership for the nation’s measurement and standards infrastructure. ITL develops tests, test methods, reference data, proof of concept implementations, and technical analysis to advance the development and productive use of information technology. ITL’s responsibilities include the development of technical, physical, administrative, and management standards and guidelines for the cost-effective security and privacy of sensitive unclassified information in Federal computer systems. This Special Publication 800-series reports on ITL’s research, guidance, and outreach efforts in computer security and its collaborative activities with industry, government, and academic organizations. National Institute of Standards and Technology Special Publication 800-28 Version 2 Natl. Inst. Stand. Technol. Spec. Publ.
    [Show full text]
  • HTML5 Multimedia Developme
    HTML5 Multimedia Development Cookbook Recipes for practical, real-world HTML5 multimedia-driven development Dale Cruse Lee Jordan BIRMINGHAM - MUMBAI HTML5 Multimedia Development Cookbook Copyright © 2011 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: May 2011 Production Reference: 1160511 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849691-04-8 www.packtpub.com Cover Image by Jacqueline Stetson ([email protected]) Credits Authors Project Coordinator Dale Cruse Leena Purkait Lee Jordan Proofreader Reviewers Clyde Jenkins Shi Chuan Christopher Scott Hernandez Indexer Monica Ajmera Mehta Laurentiu Nicolae Rekha Nair Acquisition Editor Steven Wilding Production Coordinators Shantanu Zagade Development Editor Melwyn D'sa Kartikey Pandey Cover Work Technical Editor Shantanu Zagade Arun Nadar Foreword Maybe you've heard the story—or probably urban legend—about the university that didn't lay any grass or pour any concrete when it first opened, leaving the campus grounds as solid dirt.
    [Show full text]
  • Taking Your Talent to the Web (PDF)
    00 0732 FM 4/24/01 1:38 PM Page i Taking Your Talent to the Web A Guide for the Transitioning Designer By Jeffrey Zeldman 201 West 103rd Street, Indianapolis, Indiana 46290 00 0732 FM 4/24/01 1:38 PM Page ii Taking Your Talent to the Web: Publisher A Guide for the Transitioning Designer David Dwyer Copyright 2001 by New Riders Publishing Associate Publisher Al Valvano All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means—electronic, mechani- Executive Editor cal, photocopying, recording, or otherwise—without written permission Karen Whitehouse from the publisher. No patent liability is assumed with respect to the Acquisitions Editor use of the information contained herein. Although every precaution Michael Nolan has been taken in the preparation of this book, the publisher and au- thor assume no responsibility for errors or omissions. Neither is any li- Technical Editor ability assumed for damages resulting from the use of the information Steve Champeon contained herein. Development Editor Victoria Elzey International Standard Book Number: 0-7357-1073-2 Product Marketing Library of Congress Catalog Card Number: 00-111152 Manager Kathy Malmloff Printed in the United States of America Managing Editor First Printing: May 2001 Sarah Kearns Project Editor 05 04 03 02 01 7 6 5 4 3 2 1 Jake McFarland Interpretation of the printing code: The rightmost double-digit number Copy Editor is the year of the book’s printing; the rightmost single-digit number is Chrissy Andry the number of the book’s printing.
    [Show full text]