book

Practical HTML5 Projects

by Adrian W. West

May 2012

Beginner

482 pages

12h 25m

English

Apress

Read now

Unlock full access

Moving to HTML5The New Elements in HTML5Simple Examples of Page Layout with Semantic TagsThe Solution for Internet Explorer 7 and 8The <nav> TagA More Complex Example Using Semantic TagsThe <section> vs. <article> ControversyThe <aside> TagThe <mark> TagThe <figure> TagThe <hgroup> TagThe New HTML5 Form ControlsSVG ImagesThe <details> and <summary> TagsAPIs (Application Programming Interfaces)A Strategy for Moving to HTML5Summary
An Introduction to the TechniqueA Mixture of Sizes and Formats in Three ColumnsMore Columns and More RowsPlacing the Gallery Within a Real Web PageSummary
OverviewCreate Gradient BackgroundsA Background Header ImageOverlay a Background Image with TextSuperimpose an Image on the HeaderWhat About Backgrounds in Semi-Liquid Layouts?Transparent BackgroundsBackground BulletsMultiple Backgrounds Using HTML5 and CSS2Multiple Backgrounds Using CSS3Multiple CSS2 and Images in a Real-World PageThe Rules for CSS Background ImagesSummary

Horizontal Rollover Navigation MenusThe Types of Horizontal MenuVertical Rollover Navigation MenusHorizontal and Vertical Menus on the Same PageSummary
CSS3 GradientsCSS3 Opacity and RGBA ColorsNew CSS3 Selectors and ElementsFont SelectorsUsing Current, Future, and Other ModulesSummary
When to Use Audio and Video (AV)Video Overview: Yesterday’s Video FormatsOnline Solutions: Using YouTube or VimeoTesting Your Video and MIME TypesCreate a Slide ShowSummary
A Simple JavaScript SolutionA Web Page with Rounded BordersNifty Corners on Tab MenusThe CSS3 Rounded Corners ModuleElliptical Corners with CSS3Summary of Shorthand Rules for CSS3 Rounded CornersTabs with Rounded Corners Using CSS3Summary
CSS3 Drop Shadows do not Need Shadow ImagesCreating Drop Shadows for IE 7 and IE 8The .png Shadow ImagesUsing the Shape Collage SoftwareSummary
Make a Paper-and-Paste Collage and Scan itUse a Word ProcessorUse CSS to Position Separate Images on a PageMerged ImagesUsing Proprietary SoftwareUsing a Graphics Program to Create a CollageA Picture Gallery with CaptionsSummary
How Does PayPal Work?Setting up a PayPal AccountAdd a Donation ButtonSummary
Enciphering Email Addresses to Prevent SpamA Minor Problem SolvedSecure Feedback FormsAn Example of a Hack-Proof Feedback FormThe Form Handler and Its Anti-Hack FiltersFor the Curious: An Explanation of Some of the PHP CodeThe “Thank You” Page and the Error MessagesThe New HTML5 Form ControlsUsing CAPTCHASummary
Monitors and the Problem of Color RenditionMonitor Sizes and Screen ResolutionsMonitors and the Problem with Fixed-Width LayoutsMonitors and the Problem with Liquid LayoutsMonitors and Semi-Liquid LayoutsAn Acceptable CompromiseOther Monitor-Related ConsiderationsWill the Web Site Work on a Handheld Device?Summary
AppearanceUsefulnessSummary
Laws and GuidelinesHelp for the Partially Sighted and Color BlindGeneral AdviceTesting Your Web Sites for General AccessibilityScreen Readers for the Blind and Severely Visually-ImpairedData Tables and Screen ReadersScreen Readers and Feedback FormsScreen Readers for HTML5, XHTML5, and CSS3Testing Your Web Site for Screen Reader AccessibilitySummary
The Deprecated ItemsData Tables Good, Layout Tables BadMultiple Columns Without TablesFour Columns with Differing Background ColorsAn Extendable, Colored, Central Panel with No TablesCSS Boxes and BordersThe New CSS3 Module for ColumnsSummary
OverviewBeware of False PromisesPage Rank and PopularityKeywords and PhrasesChoosing Keywords and PhrasesWell-Designed Internal LinksExternal Links to Your SiteThings You Should Never DoA Web Site Containing No Search Engine OptimizationSitemaps Help SEs Index a Web SiteLet People Know That Your Web Site ExistsSummary
Page PrintingA DIY Visitor CounterRedirectionSummary
Why You Should ValidateLogosUsing the W3C ValidatorThe .nu HTML5 ValidatorValidating CSS2Summary
Testing Your PagesIf a Browser Treats the Page As If It Has No DOCTYPEIf You Have Positioning ProblemsIf You Have a Horizontal Menu ProblemIf You Have a Server ProblemIf You Have a Browser Variation ProblemShould We Troubleshoot Problems with IE 6 and Other Older Browsers?Browsers Can Have Minor Display DifferencesIf Strange Symbols Appear on the ScreenIf You Changed the CSS, but It Looks the SameIf You Experience Float DropIf an HTML5 Page Has No Styling in IE 7 and IE 8If Data Tables Have Double BordersIf the Site Owner Is Not Receiving Replies from the Secure Feedback FormSummary
Quick Reference SectionCSS3 Quick ReferenceSummaries of TechniquesData Tables

Content preview from Practical HTML5 Projects

C H A P T E R 11

Secure Feedback Methods

Emails and feedback forms are the most popular contact methods allowing users to communicate easily with web site owners. Unfortunately, both contact methods can be abused. Hackers can hijack a form and use it to send malware to the site owner. E-mail addresses are harvested and sold to spammers. Both actions cause distress and an influx of spam to the site owner; and they don’t enhance the reputation of the web designer. This chapter discusses some options to prevent these risks.

Enciphering Email Addresses to Prevent Spam

Escrambler is a free, anti-spam device. It was originally produced as a plain, clickable link, and was later enhanced by the addition of an image of the email address by InnerPeace.org. ...