843 Practical HTML5 Projects ebook Free download


5 months ago
Full text

Contents at a Glance

  Contents....................................................................................................................v About the Author .................................................................................................. xviiAbout the Technical Reviewer .............................................................................


The Origin of this Book

  Most manuals, forums, and web sites give snippets of code on the topics covered in this book, but then the web designer is left to work out how to apply that code inthe real world. In this book, these manuals are summarized in one chapter each, and the chapters are more than adequate for designers who wish to quickly create something such as a PayPal page or an accessible site,a web site optimized for search engines, or to acquire an introduction to HTML5 and CSS3.

Is this Book for You?

What this Book Does and Does Not Cover

  Do you want to understand and use the enhancements provided by HTML5 and The great majority of web site owners want a web site for the following reasons:To sell a service or a product This book does not discuss RSS feeds, nor does it have much discussion on JavaScript-driven APIs. The only interactiveelements covered in this book are the truly practical ones, such as methods of payment (for examplePayPal), secure feedback forms, page-printing buttons, audio and video controls, go-back buttons, and accessibility features.

The Layout

  Some topics do need the how explained—such as how screen readers help the blind to read a web site—but my general aim has been to “cut to the chase” (asfilm producers say), that is, cut the waffle and get to the exciting bit as soon as possible. My hope is that by collecting and presenting the tools, techniques, summaries, and templates in one book, web designers, students, and teachers will be spared many hours of research and testing.

HTML5 and CSS3

  They are good at describing the history behind the new recommendations and they tend to concentrate on less commonly used items such asAPIs and the new canvas element. Even though the script is fully explained, you can skip the explanations and simply insert yourown details in the templates where indicated in the PHP markup.


  The JavaScript files can be downloaded from the companion website and placed in the root folder of your web site. Cross-browser audio and <audio> and <video> tags.video will eventually be achieved without scripts by using the new HTML5 Meanwhile, a fallback solution is provided to enable audio and video to play using IE 7 and IE 8.

Conventions Used in this Book

  ■ When a piece of CSS markup cannot be contained on one line, a left-pointing arrow is used to indicate that the two lines belong together; for example:#header { width:920px; height:180px; padding:0; margin: 20px auto; border:10px white solid; background: url(images/header3.jpg) no-repeat;} Using the Book’s Markup and Templates Most of the worked examples are practical templates that readers can view and download from the companion web site. If you use markupexamples in a web site offering instruction on web design, permission is required and you will be asked to acknowledge where you found the code.

WYSIWYG Web Design Programs

  Using a CMS package for the same web site results in 17 folders with an average of 30 files in each, plus ten PHP files and severaladditional files for administering the web site. If you need to move a CMS site to another web master, you may have difficulty finding someone willing to take on the learning curve necessary to grapple with the complexities of fine-tuning a CMSweb site.

Which Browsers?

  For the present, so that your web sites reach the maximum audience, make sure they work in the five most popular browsers. ■Tip See the Appendix for a table showing the browser usage in the United States, the United Kingdom, and Europe.

C H A P T E R 1

1 ■ ■ ■

Moving to HTML5

  Because this chapter focuses on the aspects of HTML5 that will enhance the most common types of web site, you will not find a comprehensive discussion on APIs (Application Programming Interfaces);nor will you find a history of the development of HTML5. Moving to HTML5 Now is the time to take advantage of the new features in HTML5; by trying the projects in this and subsequent chapters, you will discover the benefits and enhancements made possible by the newversion of HTML.

The New Elements in HTML5

  To ensurethat the semantic tags behave as blocks in all browsers, adjust the display property by inserting the following line in the linked CSS sheet. Search engines will be able to home in on the <nav> tag to locate pages linked to the home page.

Semantic Tags Are Intended to Dispel Ambiguities

  Another semi-ambiguous HTML5 tag, <section>, is discussed in “The <section> Since 1997 the recommendation has been that tags should relate to the tag’s content, not to the content’s position or style. How this affects accessibility is a problem that must be resolved because screenreaders use the hierarchy of the headings to guide the sight-impaired person through a web page.

Best Practice

  In the <head> section on every page, add an IE conditional statement and a link to the JavaScript, as shown in bold type in the following snippet: <!doctype html><html lang=en><head><title>HTML 5 complete</title><meta charset=utf-8><link to a style sheet goes here…> <!--[if lte IE 8]> <script src="html5.js"> </script> <![endif]--> </head><body><p>Oh no! ■Note The conditional and the script must be in the <head> section and placed after any link to a style sheet,as shown in Figure 1-4.

The <section> vs. <article> Controversy

  This chapter, there was considerable confusion over the difference between<section> element as being like a chapter in a arose because some manuals and web sites described thebook. Sorry, what we’ve been doing wrong is using<section> to wrap content in order to style it, or to demarcate the main content area from the <nav>,<header>, <footer> etc.

The <article> Element

  The www.whatwg.org specification states:This is the essential characteristic of the“Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.” A blog containing ongoing and interesting discussions on this topic is at http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/The controversy still simmers. <section> and use <div>; after all, the two new tags <article> andMy own solution is to forget <section> are for the benefit of browser vendors, blogs, and web sites that provide RSS feeds; they are not particularly helpful for traditional web sites.

The <mark> Tag

  Tip The <mark> tag could be used in conjunction with a search, perhaps by employing Stuart Langridge’s■searchhi script, which can be downloaded from http://www.kryogenix.org/code/browser/searchhi/ <mark> tag, the markup uses the full word <mark>. Some manuals offer theIn Listing 1-9 for the <m>, but because the abbreviated version does not behave itself in all browsers, it is better abbreviationto use the full word.

The <figure> Tag <figure> tag can be used to connect captions to illustrations, diagrams, photos, and code listings

  For a full explanation and examples using this element see:-http://www.w3.org/TR/html5-author/the-figure-element.html Figure 1-10 shows how the new < figure> tag can provide a caption for a photograph. In Listing 1-10 you will see that the actual caption is enclosed in a<figcaption> tag, this is the companion tag to the <figure> tag.

The <hgroup> Tag

  Prior to the release of the <hgroup> tag, grouping headings resulted in <hgroup> problems with the outline of a document; this problem was called phantom nodes. The following is an example: <article><hgroup><h1>I put our holiday dates and address on a social network</h1><h2>An idiot’s tale</h2></hgroup><p>We returned to a ransacked house, even the furniture was taken.<br> Your friend,<br>Loopy Lou</p></article This tag would most probably be used within the header, but it can also be used within any of one or more <article> </article> tags on the same page.

The New HTML5 Form Controls

  The list of new HTML5 input controls includes the following: date (such as date of birth)email (e-mail address) number (a number)tel (a telephone number) datetimedatetime-local colorrange searchtime urlweek month The first four input controls in the left-hand column will probably be the most useful. For instance, the date input control would pop up a calendar so that the user can select a date toavoid the tedium of typing it in from the touchscreen.

SVG Images

  SVG images can be compressed, and as their name suggests they can be scaled; they look equally clear and sharp on a hand held device or when expanded to any size on a desktop screen. Tiger The proper SVG images for Figures 1-16 and 1-17 can be downloaded from http://croczilla.com/bits_and_pieces/svg/samples/Visit the site to examine the enormous amount of code that makes up each image.

The <details> and <summary> Tags

  The following is a list of some of the APIs and brief definitions: Canvas: Provides a rectangular drawing surface on a web page. Tip If you wish to learn more about the new APIs, try the following resources:HTML5: Up and Running by■Mark Pilgrim (O’Reilly Media, 2010); Pro HTML5 Programming by Peter Lubbers, Brian Albers, and Frank Salim (Apress, 2011);Introducing HTML5 by Bruce Lawson and Remy Sharp (New Riders Press, 2010); HTML5: Designing Rich Internet Applications by Matthew David (Focal Press, 2010).

A Strategy for Moving to HTML5

  The best time to start using HTML5 and its semantic tags would be when you add a new page to a current web site, or whenyou begin a new web site. When exploring the rest of this book, the following rules will be helpful: If an HTML5 page contains one or more semantic tags, use the Remy Sharp Note The HTML5 <video> and <audio> tags are covered in Chapter 6.

C H A P T E R 2

■ ■ ■

A Rollover Picture Gallery

  The rollover effect works when the cursor is hovered over a thumbnail picture, this causes an enlarged version of the image topop up. I am most grateful to the portrait artist Ann Roe Jones for allowing me to use the images from the web site I created for her.

An Introduction to the Technique

  This is so that they The CSS instructs any class="hid" element to remain hidden until the cursor hovers Image Size and Format The technique is easiest if all the thumbnails have the same format and dimensions, and all the enlarged images have the same format and dimensions. ■ In the CSS Listing 2-1b, the first block of MouseOut state code reserves a space on the page that will be occupied by the expanded images, but the expanded images are hidden from the user by thevisibility:hidden; property.

A Mixture of Sizes and Formats in Three Columns

  If the images all have portrait format, or all have landscape format or are all square, the thumbnails should all be created with the same height per row to give neat rows. If the final four thumbnails have a height of 95 pixels, put those in the last row.

Differing Formats

  Each row has a slightly different thumbnail height: all the thumbnails in the top row have a height of 103 pixels, the thumbnails in thesecond row have a height of 91 pixels, and those in the bottom row all have a height of 95 pixels. But to locate the gallery block on the page,■ position:relative; must be used for the gallery block itself, otherwise the gallery block will overlap the menu on large screens and large resolutions.

C H A P T E R 3

■ ■ ■



  We will also look at the creation of multiple backgrounds using the new CSS3 background properties. The web has come a very long way since the days of <body bgcolor="#00ffff">.

Create Gradient Backgrounds A gradient background looks best when it fades from a color at the top of a page to white at the bottom

  However, if the web site has a solid background color (say, a cream color), a background gradient can be superimposed on this and the gradient should fade to cream. You need to use Mozilla Firefox, Safari, or Chrome to access this online generator, which canbe found at http://www.colorzilla.com/gradient-editor/ The ColorZilla generator does not provide a gradient image; it provides CSS code that generates a gradient in a selected HTML element.

Using a Gradient Image

  The CSS markuprepeat-x spreads the gradient images from left to right; the x-axis refers to the horizontal axis, as on a Cartesian graph.body { background-color: #FFF; background-image: url(images/green-grad.jpg); background-repeat: repeat-x; margin:auto;} This can be written in CSS shorthand like this: body { background: #FFF url(images/green-grad.jpg) repeat-x; margin:auto;} (#FFF;) and the green gradient fades to white, as shown inThe background color is set to white Figure 3-2. CSS for new style sheet (gradient-pic.css) body, header { margin:0; padding:0; border:0;}/*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block;} body { margin:auto; background:url(images/green-grad.jpg) repeat-x;} header {width:920px; height:180px; padding:0; border:10px white solid; background: url(images/header3.jpg); margin:10px auto; }header3.jpg was created wider than The code in bold type adds the image to the header.

The height of the image is the same height as the header, in this case the image was 1024 × 180 pixels. This time we don’t want the header image to repeatedly tile across the header container, so the

  The rosette isadded between the <header> tags An image can be placed on the header by including it between the header tags, as shown in the following snippet of code. The photographs used in Figures 3-2 to 3-7 are used by the kind permission of Sandra and Ruth http://www.bonehayne.co.ukGould, owners of the Bonehayne Farm holiday accommodation web site Note Any IE conditionals must be placed after the main CSS links.

Multiple Backgrounds Using CSS3

  Figure 3-11 and Figure 3-10 are identical in appearance butFigure 3-11 is the result of using the CSS3 multiple image module, this does not require three <div>s. ■ The background images must be listed in reverse order, that is, the bottom layer (the gradient) is last and the beetle is listed first in the markup.

Multiple CSS2 and Images in a Real-World Page

  I chose to use the CSS2 solution<div>s because it is much easier to position the squares accurately than with the CSS3 with threemethod. ■ The multiple background image produced by Listing 3-12a and its style sheet Listing 3-12b consists of the sky and three squares that vary in size and color.

The Rules for CSS Background Images

  The following code will display the image 150 pixels from the left-hand edge and 100 pixels below the top edge:#container1 { background-image: url("tile.jpg"); background-repeat: no-repeat; background-position: 150px 100px;} ■Note If only one value is specified, it sets the horizontal position. Similarly, the width of the sidebar in Figure 3-17 is not a multiple of the tile width but is just 150 pixels wide.

C H A P T E R 4

n n n

Rollover Menus

  :link,:hover, and :active, combined with a All the examples use the CSS pseudo-classes, such as display:block attribute or the display:inline-block;. Note To meet accessibility standards for the disabled, choose text and button colors that give a contrast ration of at least 5:1 (see Chapter 14 for details on color contrast).

Horizontal Rollover Navigation Menus Horizontal menus are suitable for pages with menus containing fifteen menu buttons or fewer per row

  Listing 4-1b is the style sheet that targets the second row of menu buttons and applies the style display:inline-block; to enable the width of the buttons to be adjusted. Variable-width 3D buttons created by means of additional style attributes Listing 4-5a is the same code as the 2D buttons in Listing 4-3a, except that it has a different title and is linked to a different style sheet, called variable-3d.css, as noted in bold.

Released for free under a Creative Commons Attribution 2.5 License  Name : Yosemite-->

  The Events page is selected The markup for creating the Events page is the same as Listing 4-12a, except for the title, which changes to Events page, also the menu list on that page has modified markup as follows:This code snippet shows the class current is now placed next to the link for the Events page. However, the applies to the (the tab), not to the right-hand background image.float:left li The two remaining steps to complete the sliding door menu are: 1.prepare two more tab images and modify them; 2.amend the HTML5 markup so that the tab for the selected page is highlighted when that page is active.

C H A P T E R 5

n n n

Moving to CSS3

  Two plain, box elements using CSS3 and RGB to set the background colors For reasons that will become clear later in Figure 5-7, the front box has been given a 4-pixel wide border in the same color as the background, the border is therefore not visible in Figure 5-5. If If the user’s browser does not support src: local(mickealmouse') item will instruct the user has the mickealmouse font already installed, the the browser to use the installed version so that the font does not have to be downloaded.

C H A P T E R 6

■ ■ ■

Audio, Video, and Slide Shows

  The current file formats for video are mentioned briefly and this is followed by information <video> tag, the files that it uses, and instructions for embedding video clips into an about the HTML5HTML5 web page. If using video from another URL (with permission, of course), the owner of the source would supply you with the URL that points to the video file on her web site.

Dokumen baru