DOCSLIB.ORG

Professor Emerita Harper College 10Th Edition Web Development and Design Foundations

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text

Load more

10th Edition Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. Professor Emerita Harper College 330 Hudson Street, NY NY 10013 A01_FELK9996_10_SE_FM.indd 3 18/09/19 5:26 PM Contents 1.7 Uniform Resource Identifiers and Domain CHAPTER 1 Names 13 URIs and URLs 13 Introduction to the Internet and Domain Names 13 World Wide Web 1 1.8 Markup Languages 16 1.1 The Internet and the Web 2 Standard Generalized Markup Language The Internet 2 (SGML) 16 Birth of the Internet 2 Hypertext Markup Language Growth of the Internet 2 (HTML) 16 Birth of the Web 2 Extensible Markup Language The First Graphical Browser 2 (XML) 16 Convergence of Technologies 3 Extensible Hypertext Markup Language (XHTML) 17 Who Runs the Internet? 3 HTML5—the Newest Version Intranets and Extranets 4 of HTML 17 1.2 Web Standards and Accessibility 4 1.9 Popular Uses of the Web 17 W3C Recommendations 4 E-Commerce 17 Web Standards and Accessibility 5 Mobile Access 18 Accessibility and the Law 5 Blogs 18 Universal Design for the Web 5 Wikis 18 1.3 Information on the Web 6 Social Networking 18 Reliability and Information on the Web 6 Cloud Computing 19 Ethical Use of Information on the Web 7 RSS 19 1.4 Network Overview 8 Podcasts 19 Constant Change 19 1.5 The Client/Server Model 9 1.6 Internet Protocols 10 Chapter Summary 20 File Transfer Protocol (FTP) 10 Key Terms 20 E-mail Protocols 11 Review Questions 20 Hypertext Transfer Protocol (HTTP) 11 Hands-On Exercise 21 Hypertext Transfer Protocol Secure (HTTPS) 11 Web Research 22 Transmission Control Protocol/Internet Protocol Focus on Web Design 23 (TCP/IP) 11 xii A01_FELK9996_10_SE_FM.indd 12 18/09/19 5:26 PM Contents xiii Relative Hyperlinks 55 CHAPTER Site Map 55 2 The Target Attribute 59 HTML Basics 25 Block Anchor 59 E-Mail Hyperlinks 59 2.1 HTML Overview 26 Accessibility and Hyperlinks 61 HTML 26 XML 26 2.18 HTML Validation 61 XHTML 26 Chapter Summary 64 HTML5 27 Key Terms 64 2.2 Document Type Definition 27 Review Questions 65 2.3 Web Page Template 28 Apply Your Knowledge 66 Hands-On Exercises 67 HTML Element 28 2.4 Web Research 68 2.5 Head, Title, Meta, and Body Focus on Web Design 68 Elements 28 Website Case Study 68 The Head Section 28 The Body Section 29 2.6 Your First Web Page 29 2.7 Heading Element 33 CHAPTER 3 Accessibility and Headings 35 Configuring Color and Text 2.8 Paragraph Element 35 with CSS 83 Alignment 36 3.1 Overview of Cascading Style 2.9 Line Break Element 37 Sheets 84 Advantages of Cascading Style Sheets 84 2.10 Blockquote Element 38 Configuring Cascading Style Sheets 85 2.11 Phrase Elements 39 CSS Selectors and Declarations 85 2.12 Ordered List 40 The background-color Property 85 The Type, Start, and Reversed The color Property 86 Attributes 41 Configure Background and Text Color 86 2.13 Unordered List 42 3.2 Using Color on Web Pages 87 Hexadecimal Color Values 88 2.14 Description List 44 Web-Safe Colors 88 Special Characters 46 2.15 CSS Color Syntax 88 2.16 Structural Elements 47 3.3 Inline CSS with the Style Attribute 89 Div Element 48 The Style Attribute 89 Header Element 48 Nav Element 48 3.4 Embedded CSS with the Style Main Element 48 Element 91 Footer Element 48 Style Element 91 Section Element 51 3.5 Configuring Text with CSS 94 Article Element 51 The font-family Property 94 Aside Element 52 More CSS Text Properties 96 Time Element 52 3.6 CSS Class, Id, and Descendant 2.17 Hyperlinks 53 Selectors 102 The A Element 53 The Class Selector 102 The Href Attribute 53 The Id Selector 103 Absolute Hyperlinks 54 The Descendant Selector 104 A01_FELK9996_10_SE_FM.indd 13 18/09/19 5:26 PM xiv Contents 3.7 Span Element 106 4.6 More About Images 164 Image Maps 164 3.8 Using External Style Sheets 107 Link Element 107 The Favorites Icon 166 Configuring a Favorites Icon 167 Center HTML Elements with CSS 112 3.9 CSS Sprites 168 3.10 The “Cascade” 114 4.7 Sources and Guidelines for Graphics 168 3.11 CSS Validation 117 Sources of Graphics 168 Guidelines for Using Images 169 Chapter Summary 119 Accessibility and Visual Elements 170 Key Terms 119 Review Questions 119 4.8 CSS Visual Effects 171 Apply Your Knowledge 120 CSS Rounded Corners 171 Hands-On Exercises 122 The box-shadow Property 173 Web Research 124 The opacity Property 177 Focus on Web Design 124 CSS RGBA Color 178 Website Case Study 125 CSS HSLA Color 180 CSS Gradients 183 Chapter Summary 185 CHAPTER 4 Key Terms 185 Visual Elements and Graphics 137 Review Questions 185 Apply Your Knowledge 187 4.1 Configuring Lines and Borders 138 Hands-On Exercises 188 Horizontal Rule Element 138 Web Research 189 The border and padding Properties 138 Focus on Web Design 190 4.2 Graphics on the Web 144 Website Case Study 190 Graphic Interchange Format (GIF) 144 Joint Photographic Experts Group (JPEG) 145 Portable Network Graphic (PNG) 146 CHAPTER 5 WebP Image Format 146 Popular Graphics Applicaitions 147 Web Design 205 4.3 Img Element 147 5.1 Design for Your Target Audience 206 Accessibility and Images 148 5.2 Website Organization 207 Image Hyperlinks 149 Hierarchical Organization 207 Accessibility and Image Hyperlinks 151 Linear Organization 208 4.4 More Visual Elements 152 Random Organization 208 Figure and Figcaption Elements 153 5.3 Principles of Visual Design 209 Meter Element 155 Repetition: Repeat Visual Components Progress Element 155 Throughout the Design 209 Contrast: Add Visual Excitement and Draw 4.5 Background Images 155 Attention 209 The background-image Property 156 Proximity: Group Related Items 210 Browser Display of a Background Image 156 Alignment: Align Elements to Create Visual The background-repeat Property 157 Unity 210 The background-position Property 159 Design to Provide Accessibility 210 The background-attachment Property 159 5.4 Who Benefits from Universal Design The background-clip Property 160 and Increased Accessibility? 211 The background-origin Property 160 Accessible Design Can Benefit Search Engine The background-size Property 161 Listing 211 Multiple Background Images 162 Accessibility is the Right Thing to Do 211 A01_FELK9996_10_SE_FM.indd 14 18/09/19 5:26 PM Contents xv Optimize Text for Mobile Use 232 5.5 Writing for the Web 212 Organize Your Content 212 Mobile Design Quick Checklist 232 Choosing a Font 213 5.12 Responsive Web Design 233 Font Size 213 5.13 Web Design Best Practices Font Weight 213 Checklist 234 Font Color Contrast 213 Line Length 214 Chapter Summary 237 Alignment 214 Key Terms 237 Text in Hyperlinks 214 Review Questions 237 Reading Level 214 Hands-On Exercises 238 Spelling and Grammar 214 Web Research 241 Focus on Web Design 241 Use of Color 214 5.6 Website Case Study 242 Color Scheme Based on an Image 214 Color Wheel 215 Color Scheme Based on the Color Wheel 216 Implementing a Color Scheme 217 CHAPTER Accessibility and Color 217 6 Colors and Your Target Audience 218 Page Layout 245 5.7 Use of Graphics and Multimedia 220 6.1 Width and Height with CSS 246 File Size and Image Dimensions Matter 220 The width Property 246 Antialiased/Aliased Text in Media 220 The min-width Property 246 Use Only Necessary Multimedia 220 The max-width Property 247 Provide Alternate Text 221 The height Property 247 5.8 More Design Considerations 221 6.2 The Box Model 248 Mobile Devices 221 Content 248 Browsers 222 Padding 248 Screen Resolution 222 Border 248 White Space 222 Margin 248 Flat Web Design 222 The Box Model in Action 249 Single Page Website 223 6.3 Normal Flow 250 5.9 Navigation Design 223 6.4 CSS Float 252 Ease of Navigation 223 CSS Clearing a Float 254 Navigation Bars 224 6.5 The clear Property 254 Breadcrumb Navigation 224 The overflow Property 255 Using Graphics for Navigation 224 Skip Repetitive Navigation 225 6.6 CSS Box Sizing 257 Dynamic Navigation 225 6.7 CSS Two-Column Layout 258 Site Map 226 Your First Two-Column Layout 258 Site Search Feature 226 Two-Column Layout Example 261 5.10 Page Layout Design 226 6.8 Hyperlinks in an Unordered List 262 Wireframes and Page Layout 226 Configure List Markers with CSS 262 Page Layout Design Techniques 228 Vertical Navigation with an Unordered List 263 5.11 Design for the Mobile Web 230 The display Property 264 Mobile Web Design Considerations 231 Horizontal Navigation with an Unordered List 264 Optimize Layout for Mobile use 231 6.9 CSS Interactivity with Pseudo-Classes 265 Optimize Navigation for Mobile Use 231 CSS Button 267 Optimize Graphics for Mobile Use 232 6.10 CSS Sprites 271 A01_FELK9996_10_SE_FM.indd 15 18/09/19 5:26 PM xvi Contents 6.11 CSS for Printing 273 7.5 Grid Columns, Rows, and Gap 324 Print Styling Best Practices 273 Grid Gap 324 The order Property 325 6.12 Positioning with CSS 275 Static Positioning 275 7.6 Two-Column Grid Page Layout 326 Fixed Positioning 275 Configure Grid Columns and Rows 327 Relative Positioning 275 Configure Grid Items 327 Sticky Positioning 276 Grid Line Numbers 327 Absolute Positioning 277 7.7 Layout with Grid Areas 329 Practice with Positioning 277 The grid-area Property 329 6.13 Fixed Position Navigation Bar 279 The grid-template-areas The z-index Property 279 Property 330 The grid-template Property 332 6.14 Single Page Website 282 Fragment Identifiers 282 7.8 Progressive Enhancement Parallax Scrolling 285 with Grid 333 CSS Feature Query 333 Chapter Summary 288 Key Terms 288 7.9 Centering with Flexbox and Grid 336 Review Questions 288 7.10 Viewport Meta Tag 338 Apply Your Knowledge 289 7.11 CSS Media Queries 340 Hands-On Exercises 292 What’s a Media Query? 340 Web Research 293 Media Query Example Using a Focus on Web Design 293 Link Element 340 Website Case Study 293 Media Query Example Using an
Recommended publications
  • 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.
  • Front 01: HTML Y

    Front 01: HTML Y

    HTML Y CSS FRONT PRIMERA PARTE Guía para directivos y técnicos V.1 Front HTML y CSS Este documento forma parte de las guías de onboarding de Autentia. Si te apasiona el desarrollo de software de calidad ayúdanos a difundirlas y anímate a unirte al equipo. Este es un documento vivo y puedes encontrar la última versión, así como el resto de partes que completan este documento, en nuestra web. https://www.autentia.com/libros/ Esta obra está licenciada bajo la licencia Creative Commons Attribution ShareAlike 4.0 International (CC BY-SA 4.0) FRONT - HTML Y CSS Hoy en día el negocio está en la que se publican y organizan los red. Es en el mercado on-line contenidos, además del grado donde se producen la mayor parte de usabilidad y accesibilidad de de los intercambios comerciales los mismos, influye directamente entre clientes y proveedores. en el posicionamiento que los El primer contacto de nuestros motores de búsqueda asignan a usuarios con nuestro negocio, y las aplicaciones. en muchos casos el único, es a través de una aplicación web o móvil. No disponer de un diseño atractivo, una experiencia de usuario agradable, accesible y que se adapte de manera adecuada para ser usada en diferentes dispositivos (Responsive), es garantía de una pérdida masiva de potenciales clientes. De la misma manera, la forma en la FRONT - HTML Y CSS “No hay una segunda oportunidad para una primera impresión” Alcanzar la habilidad de realizar diseños profesionales y usables no es algo baladí y se necesita un conocimiento profundo en marketing digital, experiencia de usuario y en tecnologías front-end.
  • CSS Containers: Making Websites Accessible to Disabled Users

    CSS Containers: Making Websites Accessible to Disabled Users

    CSS containers: making websites accessible to disabled users John R Hudson 1 May 2020∗ 1 Personal background I first became interested in page design as a student journalist at university. When I first started using a micro-computer, I was interested in how much time it could save me; when I discovered vector graphics in the mid 1980s, I realised that I could save time and produce quality output by using a computer. In the 1990s I worked with a blind student and learned how I could use my computing skills to make life easier for him. After 30 years of using my understanding to create quality printed documents and more recently PDF files, in 2010 I was inspired by a talk from David Fisher to put these principles to work in maintaining and developing websites. 2 The wider context Cascading style sheets (CSS), proposed in 1994 by Håkon Wium Lie, who worked at CERN, were first adopted by Microsoft in Internet Explorer 3 and then by Netscape and Opera. These separate the presentation of material on a website from its content and structure as defined by HTML. At the turn of the century, they went out of favour for a number of reasons and development focused on XHTML. But, a few years later, Mozilla, Apple and Opera began working on a new specification for HTML which would meet the needs of modern devices and which would rely on CSS for presentation. This was published in 2011 as a rolling release and work began on a series of rolling updates to CSS to cope with the needs of the new version of HTML and the demands of modern devices.
  • Responsive Design

    Responsive Design

    Girls Who Code At Home Activist Toolkit Part 5 Building: Make it Responsive Activity Overview Your website is looking great with the CSS you added in the last activity! For this part of the series, we will explore how to make sure your website looks great on different screen sizes like laptop, tablet, and mobile devices. This is called responsive design. Screen size on a laptop Screen size on a mobile device Materials ➔ Computer Note: If you did not complete Part 4, you can access Parts 1, 2, and 3 here. If ➔ Trinket or the text editor of your choice you have some experience with HTML, ➔ Code you wrote during Part 4 you can remix and use the Part 4 ➔ Final Project Example Code Example Code that stops at the end of Part 4. PART 1 PART 2 PART 3 PART 4 PART 5 PLANNING PLANNING BUILDING BUILDING BUILDING Research & Wireframe Intro to Intro to Make it Feedback & Mockup HTML CSS Responsive with CSS Identify and Layout the Build the Style the research a skeleton of framework of HTML Add styling cause. your website, your site elements on that adapts then add in using HTML. your site your site to your design using CSS. different elements. screen sizes. 2 Women in Tech Spotlight: Teagan Widmer When Teagan was in grad school, she noticed that safe2pee, a website helping LGBTQ community members find safe bathrooms, shut down unexpectedly. Although she majored in theater and had no experience with coding, she decided to attend a hackathon and eventually created REFUGE Restrooms, an open-source gender-neutral bathroom locator.
  • Introduction to Modern CSS

    Introduction to Modern CSS

    Introduction to modern CSS Emmanuel Aina @horlah_codes Frontend Dev, BuyCoins This talk is basically about the new technologies that have been introduced into CSS, with the aim for faster development process and accessibility Modern CSS is simply how we have chosen to write CSS as a standard, utilizing the technologies being introduced and making sure they’re being used as expected for the purpose at which they are being created Technologies being introduced ● CSS Flexbox ● CSS pre- and post-processors ● CSS Grid ● Feature Queries ● CSS Variables ● CSS Animation ● CSS Functions ● New Units - e.g. vw, vh, vmin, vmax ● CSS Methodologies Let’s pick them one after the other CSS Flexbox m avu... CSS Flexbox CSS Flexbox was proposed in 2009 but did not get implemented in browser spread adoption until 2015. Flexbox was designed to define how space is distributed across a single column or row, which makes it a better candidate for defining layout compared to using floats - Peter Jang, Dean of Instruction @Actualize Using Flexbox for the first the first time Structure of our html Basic CSS without Flexbox Expected output Basic CSS with Flexbox Output Default properties: flex-direction : row; flex-wrap: nowrap; justify-content : flex-start; Understanding Flexbox The container The items Understanding Flexbox .container { display: flex; } Understanding Flexbox .container { display: flex; justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } Understanding Flexbox .container { display: flex; flex-wrap: nowrap | wrap | wrap-reverse; } Understanding Flexbox .container { display: flex; align-items: stretch | flex-start | flex-end | center | baseline;. } Understanding Flexbox .container { display: flex; align-content : flex-start | flex-end | center | space-between | space-around | stretch; } Understanding Flexbox .items { align-self: auto | flex-start | flex-end | center | baseline | stretch; } Understanding Flexbox .items { flex-grow: <number>; } CSS Grid The s..
  • CSS Responsive Design Web Engineering 188.951 2VU SS20

    CSS Responsive Design Web Engineering 188.951 2VU SS20

    L4: CSS Responsive Design Web Engineering 188.951 2VU SS20 Jürgen Cito L4: CSS Responsive Design • Media Queries • Responsive and Adaptive Images and Fonts • Flexible Box Layouts (Flexbox) • Grid Layouts Learning Goals • Differentiate between different options to achieve responsive layouts • Understand how images and fonts can be made responsive • Properly use media queries for responsive design • Understand the role of Flexbox and Grid layouts Responsive Design is a way of implementing web layouts Web Layout Approaches based on current standards, HTML5 and CSS3. Graceful degradation Interface A Interface B Mobile-first / Progressive enhancement Interface A Interface B Responsive design Interface A Interface B Slides by Michael Nebeling and the work by Michael Nebeling and Moira C. Norrie: Responsive Design and Development: Methods, Technologies and Current Issues, In: Proc. 13th Intl. Conf. on Web Engineering (ICWE 2013), LNCS, vol. 7977, pp. 510-513. Springer, 2013. Responsive Design Let content fill the container and define min/max constraints Use relative units to specify position and size of text and media Techniques ▪ Media Queries ▪ Fluid, Grid-based Layout ▪ Responsive Images ▪ Font Scaling ▪ … Required Reading: http://alistapart.com/article/responsive-web-design/ Media Queries ▪ Previously only media types (screen, print, braille, handheld …) ▪ @media rule ▪ Additional features ▪ color ▪ aspect-ratio ▪ max-width ▪ orientation ▪ resolution ▪ scan ▪ … ▪ Build complex queries using logical operators (not, and, only) @media only screen
  • Grid Layout Website Template

    Grid Layout Website Template

    Grid Layout Website Template Paltry and flexed Huntington think, but Gershon temporarily moan her iambics. Ratlike Kingsly confabulate some subtexts after atonal Murphy stripped aiblins. Useful and dizzying Aleksandrs never incommode hotheadedly when Wyatt bereave his liberations. Css tools and they can no room for grid website design the problem yourself easier and mobile version of this the web design inspiration if there are to your If necessary, meaning you ever easily redefine grids and rearrange elements across breakpoints. Ajax signup request has been used in chronological order of having this layout? An easy ways on websites as simple css grid layout methods, does ppc cost? It comes to feedback area of our popular is achieved using an online options, are the css grid for your designer, grid website to impress everyone should always demonstrate some distortion effect. Maybe han will add it in place future. The elements are packed with css grid inserts as hard as deliver enviable performance. Unify Responsive Website Template by htmlstream. Save and name, are, we actually earn some affiliate commission. Single navbar example with a bottom navbar along with some additional content. Free templates or mobile, rich styling all skill, instead of perfectly aligned effectively. Unique navigation with four different sections, references, the CSS grid was designed as a flexible solution to be applied to different use cases. Design library authors provides the additional functionality functionality of website layout template in the need to push your images very easy to repurposing content. Both parts are nicely sprinkled with prominent examples. Never miss standing on learning about the next crucial thing.
  • CTA Specification, CTA-5000) and W3C (As a Final Community Group Report), by Agreement Between the Two Organizations

    CTA Specification, CTA-5000) and W3C (As a Final Community Group Report), by Agreement Between the Two Organizations

    CCTTAA SSppeecciiffiiccaattiioonn Web Application Video Ecosystem – Web Media API Snapshot 2017 CTA-5000 December 2017 NOTICE Consumer Technology Association (CTA)™ Standards, Bulletins and other technical publications are designed to serve the public interest through eliminating misunderstandings between manufacturers and purchasers, facilitating interchangeability and improvement of products, and assisting the purchaser in selecting and obtaining with minimum delay the proper product for his particular need. Existence of such Standards, Bulletins and other technical publications shall not in any respect preclude any member or nonmember of the Consumer Technology Association from manufacturing or selling products not conforming to such Standards, Bulletins or other technical publications, nor shall the existence of such Standards, Bulletins and other technical publications preclude their voluntary use by those other than Consumer Technology Association members, whether the document is to be used either domestically or internationally. WAVE Specifications are developed under the WAVE Rules of Procedure, which can be accessed at the WAVE public home page (https://cta.tech/Research-Standards/Standards- Documents/WAVE-Project/WAVE-Project.aspx) WAVE Specifications are adopted by the Consumer Technology Association in accordance with clause 5.4 of the WAVE Rules of Procedures regarding patent policy. By such action, the Consumer Technology Association does not assume any liability to any patent owner, nor does it assume any obligation whatever to parties adopting the Standard, Bulletin or other technical publication. This document does not purport to address all safety problems associated with its use or all applicable regulatory requirements. It is the responsibility of the user of this document to establish appropriate safety and health practices and to determine the applicability of regulatory limitations before its use.
  • Peter Gasston — «The Modern

    Peter Gasston — «The Modern

    AA GUIDEGUIDE TOTO MODERNMODERN WEBWEB DEVELOPMENTDEVELOPMENT THE MODERN WEB THE MODERN WEB THETHE MODERNMODERN WEBWEB MULTI-DEVICE WEB DEVELOPMENT Today’s web technologies are evolving at near–light speed, • Incorporate cross-platform audio and video without WITH HTML5, CSS3, AND JAVASCRIPT bringing the promise of a seamless Internet ever closer to using troublesome plug-ins reality. When users can browse the Web on a three-inch • Make images and graphics scalable on high-resolution phone screen as easily as on a fifty-inch HDTV, what’s a devices with SVG developer to do? • Use powerful HTML5 elements to design better forms Peter Gasston’s The Modern Web will guide you through PETER GASSTON the latest and most important tools of device-agnostic web Turn outdated websites into flexible, user-friendly ones development, including HTML5, CSS3, and JavaScript. that take full advantage of the unique capabilities of any His plain-English explanations and practical examples device or browser. With the help of The Modern Web, emphasize the techniques, principles, and practices that you’ll be ready to navigate the front lines of device- you’ll need to easily transcend individual browser quirks independent development. and stay relevant as these technologies are updated. Learn how to: A B O U T T H E AUTHOR • Plan your content so that it displays fluidly across Peter Gasston has been a web developer for more than multiple devices 12 years in both agency and corporate settings. The author of The Book of CSS3, Gasston has also been published • Design websites to interact with devices using the most in Smashing Magazine, A List Apart, and .net magazine.
  • Building Sites for an Anywhere, Everywhere Web

    Building Sites for an Anywhere, Everywhere Web

    IMPLEMENTING RESPONSIVE DESIGN Building sites for an anywhere, everywhere web Tim Kadlec IMPLEMENTING RESPONSIVE DESIGN: NOTICE OF RIGHTS BUILDING SITES FOR AN ANYWHERE, All rights reserved. No part of this book may be EVERYWHERE WEB reproduced or transmitted in any form by any Tim Kadlec means, electronic, mechanical, photocopying, recording, or otherwise, without the prior writ- NEW RIDERS ten permission of the publisher. For information 1249 Eighth Street on getting permission for reprints and excerpts, Berkeley, CA 94710 contact [email protected]. 510/524-2178 510/524-2221 (fax) NOTICE OF LIABILITY The information in this book is distributed on Find us on the Web at: www.newriders.com an “As Is” basis without warranty. While every To report errors, please send a note to precaution has been taken in the preparation of the [email protected] book, neither the author nor Peachpit shall have any liability to any person or entity with respect to New Riders is an imprint of Peachpit, a division of any loss or damage caused or alleged to be caused Pearson Education. directly or indirectly by the instructions contained in this book or by the computer software and Copyright © 2013 by Tim Kadlec hardware products described in it. Project Editor: Michael J. Nolan TRADEMARKS Development Editor: Margaret S. Anderson/ Many of the designations used by manufacturers Stellarvisions and sellers to distinguish their products are claimed Technical Editor: Jason Grigsby as trademarks. Where those designations appear in Production Editor: Rebecca Winter this book, and Peachpit was aware of a trademark Copyeditor: Gretchen Dykstra claim, the designations appear as requested by the Indexer: Joy Dean Lee owner of the trademark.
  • The Best of AEA's Quick Clicks

    The Best of AEA's Quick Clicks

    aneventapart.com Our favorite Quick Clicks from last year’s AEA Digest, plus some cherished deep cuts. CC oo dd ee Heading levels are still important, especially for assistive technology like speaking browsers. webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753 Tantek Çelik and An Event Apart’s Jeffrey Zeldman talk about the secret history of web standards, healing the rift between CSS lovers and toolchain fans, and whether the #indieweb can save us from the downsides of social media on The Big Web Show podcast, № 186. 5by5.tv/bigwebshow/186 James Nash explores the wonders of the cascade for component styling in A Tale of Two Buttons. medium.com/buildit/a- tale-of-two-buttons-e63185aefd5f The web’s drowning in a sea of JavaScript, awash with needless bloat, inaccessible cruft, and unsustainable patterns. A List Apart’s Jeremy Wagner shares how to build the right things the right way, using the web platform the way it was meant to be used, in Responsible JavaScript: Part I. alistapart.com/article/responsible-javascript-part-1 AEA co-founder Eric Meyer shares a small hack for showing breakpoint information on-screen during development. meyerweb.com/eric/thoughts/2018/02/21/displaying-css-breakpoint-information-with-generated-content CSS keyloggers are just the start: Jake Archibald demonstrates why Third party CSS is not safe. jakearchibald.com/2018 /third-party-css-is-not-safe In this Layout Land video, AEA speaker Jen Simmons shows exactly how to create a common card layout by nesting a Flexbox layout inside a Grid layout, all while thinking through accessibility and using zero media queries.
  • Samsteachyourself HTML, CSS, and Javascript

    Samsteachyourself HTML, CSS, and Javascript

    Jennifer Kyrnin Julie Meloni SamsTeachYourself HTML, CSS, and JavaScript Third Edition All in One Sams Teach Yourself HTML, CSS, and JavaScript All in One, Third Edition Editor-in-Chief Copyright © 2019 by Pearson Education, Inc. Mark Taub All rights reserved. This publication is protected by copyright, and permission must be obtained Editor from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmis- sion in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. Mark Taber For information regarding permissions, request forms, and the appropriate contacts within the Managing Editor Pearson Education Global Rights & Permissions Department, please visit www.pearsoned.com/ permissions/. No patent liability is assumed with respect to the use of the information contained Sandra Schroeder herein. Although every precaution has been taken in the preparation of this book, the publisher Senior Project and authors assume no responsibility for errors or omissions. Nor is any liability assumed for Editor damages resulting from the use of the information contained herein. Lori Lyons ISBN-13: 978-0-672-33808-3 ISBN-10: 0-672-33808-4 Copy Editor Library of Congress Control Number: 2018953965 Kitty Wilson 01 18 Project Manager Trademarks Suganya Karuppasamy All terms mentioned in this book that are known to be trademarks or service marks have Indexer been appropriately capitalized. Pearson cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark Ken Johnson or service mark. Proofreader Warning and Disclaimer Abigail Manheim Every effort has been made to make this book as complete and as accurate as possible, but no Technical Editor warranty or fitness is implied.