Building HTML5 Pages from Scratch

Exclusive offer: get 50% off this eBook here
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery — Save 50%

Harness the cutting edge features of Dreamweaver for mobile and web development

$23.99    $12.00
by David Karlins | October 2011 | Web Development

In this article by David Karlins, author of Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery, we will learn to build web pages in Dreamweaver relying entirely on HTML5 layout tags. There are four things we will accomplish by learning to do that:

  • Building page layouts relying exclusively on HTML5 layouts will hone our skills at using these new tools for page design, and introduce HTML5 Code Hints in Dreamweaver
  • Relying on standardized, defined HTML5 layout elements (as opposed to custom-defined, irregularly implemented Div tags) streamlines page design
  • There are actual, significant real-world scenarios where building pages relying exclusively on HTML5 layout elements is the best way to design them (for example, when designing pages for iPhones or iPads)
  • There are functional advantages beyond design considerations for organizing page content in HTML5 layout elements. We will examine those advantages as we build HTML5 pages

 

(For more resources on HTML5, see here.)

In the course of building pages using just HTML5 layout elements, in this article, we will explore all four advantages of relying on HTML5 as listed above.

Dreamweaver CS5 and HTML5

Before diving in to create HTML5 pages from scratch, let's survey how we are going to get our money's worth out of Dreamweaver in the process.

All recent versions of Dreamweaver (CS3, CS4, and CS5) with the HTML5 Pack installed can assist our work in creating HTML5 pages from scratch in three ways.

First, with the HTML5 Pack installed, code hints that automatically prompts us in completing HTML5 coding are updated in Code view for HTML5 elements. Those code hints will help us avoid mistakes in spelling elements or constructing the (minimalist) coding syntax that we will need to place HTML5 elements.

Second, we will avail ourselves of Split view, so that we will see our layout congealing in Design view as we sketch out what code we need to create in Split view.

Third, we will take advantage of what is arguably the single most valuable panel in Dreamweaver—the CSS Styles panel. We will be defining CSS Style rules to associate with each of the HTML5 layout elements we use. Without styles, HTML5 layout elements are nothing, so the interplay between the HTML5 elements we create and formatting we do with the CSS Styles panel will drive our page design process.

Moreover, here it is important to review, or at least reinforce two foundational techniques in building any professional-quality website in Dreamweaver:

  • Do nothing without first defining a Dreamweaver site.
  • Secondly, and not quite so essential but still pretty foundational, we always work with external style sheets. This allows the styles we define to be applied globally, across an entire website, and makes updating sites possible. As we begin to coordinate styling in the CSS Styles panel and constructing pages with HTML5 elements, I will be reminding you and when necessary walking you through the steps required to make sure all styles are saved to an external style sheet.

With this as a preview, and cautionary reminder, let's dive in to creating pages with HTML5 layout elements.

Building an HTML5 page from the top

As opposed to laying out pages with tables (grids of rows and columns), or non-standardized Div tags (layout blocks you name and define yourself), we will use HTML5's new, standardized layout elements.

The most basic of these are self-explanatory <header>, <nav>, <article> and <section>, <aside>, and <footer> tags.

In addition, as alluded to in the introduction to this article, we will use additional elements to help make content more accessible to search engines. For example, within articles, we will use new HTML5 elements that make it easy for people looking for online content (or those making such online content accessible through various forms of search engines) to find things such as the publication date of content, or the date of an upcoming event.

HTML5 structural elements

In order to alert browsers that we are presenting HTML5 content, we need to indicate at the top of our HTML5 code that this is an HTML5 page. As for those browsers that respond, "huh, what's that?", we will address that challenge shortly. However, first use the following steps to create a new HTML5 page from scratch:

  1. With your Dreamweaver site defined, choose File | New. In the New Document dialog, choose Blank Page from the category list on the left of the dialog. Choose HTML in the Page Type column. Choose None in the Layout column.
  2. In the Layout CSS popup if you already have a CSS file you use with HTML layouts, you can choose Link to Existing File, and select your existing HTML5-related CSS file as the styles file for your page.
  3. From the DocType popup choose HTML5 as shown in the following screenshot:

    (Move the mouse over the image to enlarge.)

  4. Click on Create to generate the blank page.

A blank page appears in Design view of the Document window. In Split view, we can see some basic code has been generated:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> </head> <body> </body> </html>

Let's briefly walk through this to situate ourselves. The <!DOCTYPE HTML> and <html> tags are sort of evolutionary holdovers from previous versions of HTML, and not actually required for HTML5 browsers. This code though, might be useful when taking into account non-HTML5 browsers, as we will examine shortly. The <head> and </head> tags d emarcate head content that is not displayed on the page, but serves as instructions to browsers.

In this case, the content inside identifies that the current, most widely applicable character set, UTF-8, is implemented. This character set allows the display of characters from a wide range of languages.

All the content we create for the page will be placed within the <body> and </body> tags. For this reason, our first step in creating our CSS styles for this page, will be to define a couple of basic attributes for the </body> tag.

Finally, save this page as an HTML file. Choose File | Save. In the Save As dialog, make sure the folder selected in the Where popup is your Dreamweaver site folder (or a subfolder within that). Give the file a name, like html5_test, and click on Save.

While we are at it, enter a descriptive title in the Title box of the Document toolbar. Resave periodically.

Creating a CSS file

H and-in-hand with our HTML5 fi le, we will create and use a CSS fi le to organize and manage all the styling in the page. Therefore, let's create that CSS fi le now, and as we do, add a line that will make our HTML5 page compatible with all current browsers, and most older ones.

To do that, follow these steps:

  1. Choose File | New, and in the New Document dialog, choose the Blank Page category on the left, and CSS from the Page Type category. Click on Create to generate, and open a new CSS file.
  2. The file opens in Code view. We will be editing it in the CSS Styles panel, so except as a learning experience we won't need to view this page again. However, we do need to save it. Choose File | Save, and give the file a name like html5_layout.css. Make sure the site folder is selected in the Where pop up, and click on Save as shown in the following screenshot:

  3. In the tab bar at the top of the document window, toggle back to the HTML file you created, as shown in the following screenshot:

  4. View the CSS STYLES panel if it is not visible (choose Window | CSS Styles), and click on the Attach Style Sheet icon as shown in the following screenshot:

  5. The Attach External Style Sheet dialog appears. Use the Browse button to navigate to the CSS fi le you just created, and click on OK to attach the style sheet. The CSS fi le appears in the CSS Files panel (use the All tab in the CSS Styles panel as the norm, unless you are doing particular styles detective work that requires the Current tab). You will also see the link to the CSS file in Code view if you look.

Next, we will add a single attribute that enables most browsers to interpret the HTML5 elements, even if they are not HTML5 compliant.

To do that, follow these steps:

  1. Click on the New CSS Rule icon at the bottom of the CSS Styles panel, it is just to the right of the Attach Style Sheet icon identified in the preceding screenshot. The New CSS Rule dialog opens.
  2. In the New CSS Rule dialog, choose Compound from the first popup. We are creating a rule that will apply to more than one HTML5 layout element. These are HTML5 tags that we want to prevent from collapsing when viewed in non-HTML5 browsers.
  3. In the Choose or Enter a Name for Your Selector field, enter header. We actually want to apply the rule we are working on to additional HTML5 elements, but we will add those shortly. In the Rule Definition section of the dialog, make sure your attached CSS fi le is selected (it will be by default). Click on OK.
  4. In the CSS Rule Definition for header dialog, select the Block category, and choose block from the display popup as shown in the following screenshot, then click on OK.

  5. The Header style appears in the CSS Styles panel when you expand the CSS Styles file linked to the page. You can see that the display property for the header style has a block attribute associated with it in the CSS styles panel.
  6. We want to expand the list of HTML5 elements to which this display:block attribute is assigned. The long, slow way to do that is to duplicate steps we have traversed so far for each additional element. To do that the quick, easy way, click once in the header row, in the top half of the CSS Styles panel, and edit the list of elements to include address, article, footer, nav, section. Use commas (",") to separate the additional elements as you type them in. These are HTML5 tags that we want to prevent from collapsing when viewed in non-HTML5 browsers. The CSS Styles panel should now look like the following screenshot:

With the preceding set of steps, we have told most non-HTML5 browsers to keep our basic HTML5 building-block elements on their own distinct horizontal row, so they don't smush into each other.

Our basic model and scenario here is creating pages that are intended only for HTML5 browsers (like iPhones or iPads).

Using HTML5 to make content accessible

Having set up our HTML5 document with basic web page coding, we are now ready to create and format the HTML5 layout elements that will define how the page looks.

But wait… as the TV pitchmen say… there's more! Before diving into the page design dimension of HTML layout elements, it will be helpful to quickly survey another reason to use HTML layout elements to organize content: accessibility.

As alluded to in the introduction to this article, there are advantages beyond design considerations for relying on HTML5 layout elements to organize page content. These advantages revolve around the way HTML5 layout elements package content for metadata compilers (such as search engines). This emerging connection can make content organized into HTML5 layout elements more searchable, easier to organize and access. Moreover, this will be even more the case in the future as search engines and other web content organizing tools integrate HTML5 layout elements.

We will take a rather simple, but interesting example of how this works right now. If you have ever copied and pasted the content between apps on an iPhone (for example, the address of a web page into an app that helps you find public transportation options or content from an article or posting that you read online in an e-mail), then you maybe familiar with the routine where you hold your finger down on the screen and are prompted with a Copy prompt. The next step is to use the somewhat awkward process of using one's fingers to define the content to copy to the clipboard, as shown in the following screenshot:

 

On the other hand, when content is organized into articles (or sections), a touch on the iPhone screen instantly selects an article or article section for copying, as shown in the following screenshot:

 

Now, in terms of added value to a website, the convenience associated with iPhone users easily selecting articles or article sections probably isn't going to turn the world upside down, although visitors are likely to note positively the convenience they experience selecting articles from your page to share. However, the fact that the iPhone browser recognizes sections (and articles, and other HTML5 layout elements) also gives a sense of the potential for the associations between content and HTML5 layout elements to make content more accessible. We can expect, for example, that in the not-so-far-off-future, people will be able to tune their search engine queries for "articles" about this or that topic.

HTML5 layout and search engines: By relying on HTML5 layout elements to organize page content, you are building (in advance) support for search tools and other ways that HTML5 will facilitate finding content.

HTML5 layout strategy

Having surveyed the emerging value of organizing content into HTML5 layout elements, we turn to the more dramatically impactful aspect of using HTML5 layout elements: design. However, keep in mind; design and content are linked in HTML5. Unlike previous generations of web page markup language, HTML5 organizes content both to facilitate displaying that content, and to facilitate accessing that content.

A basic HTML5 page layout is illustrated in the following screenshot, with self-explanatory placeholder text:

The visible borders in the preceding screenshot, by the way, are a product of Dreamweaver CS5's CSS Layout Outlines (if they are not functioning, choose View | Visual Aids | CSS Layout Outlines).

Again, before diving into an exploration of the specific elements in HTML5 layouts, and how they are implemented, keep in mind they both define design components of the page, and organize content.

Using code hints

Dreamweaver, with the HTML5 Pack, is HTML5-friendly, but not exactly HTML5-compatible. By this, I mean that it is necessary to resort to Code view to apply HTML5 elements. However, within that, you get help.

As noted earlier, Dreamweaver CS5 helps create the coding for HTML5 code hints. As you begin typing HTML5 elements in Code view, beginning with "<", Dreamweaver prompts you with a set of tags that begin with the letter you type. So, for example, typing <he produces the following code hints, from which you can click on <<>header and press Enter (Windows) or Return (Mac) to place the code.

You can use control spacebar on Mac or PC to bring up the full code hinting list.

To close (define the end of) an HTML5 layout element, simply type </. When you do that, Dreamweaver auto-enters the close coding for the open element, as shown in the following screenshot:

 

As we walk through the coding involved in defining different HTML5 layout elements in the remainder of this article, you can enter the necessary code in Split view, utilizing code hints, and seeing the results in the Design half of Split view.

 

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery Harness the cutting edge features of Dreamweaver for mobile and web development
Published: September 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(For more resources on HTML5, see here.)

Adding header, header nav, and hgroup

The <header> element is used to organize all the content that goes at the top of a page. As you saw in the preceding screenshot, this includes a main heading, a subheading (where that is used), and the navigation structure.

Navigation within a header

So, the <nav> content—the links at the top of a page—are included in the <header> element when they are placed at the top of a page. Navigation elements placed in sidebars are also enclosed within the <nav> element, but as—in this case—they are not part of the header, they are not enclosed in the <header> element.

Within a <header> element, CSS styles associated with tags (such as <h1>, <h2>, and so on), or with class Div tags can be used to supply additional formatting rules for how content will be displayed.

Organizing header content with hgroups

With the aim of making content within a header more easily categorized, HTML5 includes the hgroup element. The formal requirements for hgroup content is that it be content with heading tags applied (<h1>, <h2>, <h3> , <h4>, <h5>, or <h6>).

The concept is that heading content such as subheadings, alternative titles, or taglines all be grouped, within a header, for easy access. So, for example, in the following screenshot, the two heading lines have been wrapped in an <hgroup> element. However, the navigation content, although part of the header, is not included in the <hgroup> element.

In the following code, an <h1> heading and an <h2> heading, along with a <nav> element, with its own <h5> heading (and three placeholder links) are all part of a <header> element.

<header> <hgroup> <h1>Page header</h1> <h2>Header 2 </h2> </hgroup> <nav> <h5>Navigate: <a href="#">link 1</a> | <a href="#">link 2</a> | <a href="#">link 3</a></h5> </nav> </header>

The following screenshot illustrates how this looks in Split view in Dreamweaver (with Live view on in the Design view side of Split view).

Creating articles and sections

If you write for a living, as I do, you learn to organize content into chunks, and sub-chunks, concepts and sub-concepts, ideas and more detailed ideas, and so on. The basic rule for organizing content in this way is that if you create a sub-section, you have to create two sub-sections. Otherwise, there is no point in creating a sub-section.

In line with our recurring theme of the unity between content and design in HTML5 layout, content in HTML5 pages (where it has to be broken down) is broken down into articles . Moreover, where there is a need for distinct sub-sections within an article, those sub-sections are sections.

As you create a CSS fi le to match your HTML layout elements, you might well assign specific formatting to articles, and to sections. For example, you might choose to indent section content, or place a unique background behind it. In the following example, article content is set off with a unique background and text color, and within articles, sections are indented.

Th e code for the <article> and <section> elements in the preceding illustration, including placeholder text and headings is:

<article> <h3>First article</h3> <p>First article content ....</p> <p>more content....</p> <section> <h3>1st section heading</h3> <p>1st section content</p> </section> <section> <h3>2nd section heading</h3> <p>2nd section content</p> </section> </article>

Or… you might not apply specific CSS rules to articles and sections, and simply wrap content in the <article> and <section> elements for content organizing purposes, while relying on the <body> tag, the <p> (paragraph) tag, or custom class styles that you define in Dreamweaver for formatting article and section content.

Adding aside content

Aside content is reserved for sidebar content that is dependent on content in an article or section of an article. The <aside> element is not intended, for example, to serve as a container for navigation content (navigation content is supposed to be identified by, and wrapped in the <nav> element discussed earlier).

Given that aside content is generally formatted as a sidebar, there is a particular style generally associated with the use of <aside> elements: Float.

The CSS Float attribute moves a container to the left (Float:left) or right (Float:right) of other content, and flows other content around the container.

Defining CSS Attributes: In this article, we will simply note CSS attributes that are assigned to HTML5 elements without walking through the steps to implement those attributes. The short version, however, is to create a new CSS Rule for each HTML5 element, and define those rules, all using the New CSS Rule in the CSS Styles panel. For another angle on defining and applying CSS Styles to HTML5 elements, see the Recipe at the end of this article where we will walk through that process step-by-step.

The following screenshot shows an <aside> element defined at 33% of the page width, and floated left.

Creating a footer

The final piece of an HTML5 page layout is usually a <footer> element. Early in this article, when we walked through standard HTML5 page coding, we noted the <footer> element (along with <header> elements and others have the display: block attribute assigned to them). That attribute, which prevents other content from "sharing" the horizontal row on which the footer content is displayed, is pretty much the main, and only essential formatting element required for footer.

Beyond that, you can apply features such as height, background color, and so on by defining a CSS Style rule for the <footer> element. Do that by clicking on the New CSS Rule icon at the bottom of the CSS Styles Panel. Choose Tag from the Selector Type popup, choose Footer in the Selector Name popup, in the Rule Definition popup, choose the external style sheet fi le to which you are saving your CSS rules, as shown in the following screenshot, and then click on OK to define rules for the <footer> element.

As with all HTML5 layout elements, <footer> elements have content assignments. Footers usually include content site author information, legal notices (such as copyright information), and so on. While it is technically allowable to have more than one footer on a page, it is difficult to envision a situation where more than one footer would be appropriate—the point of the element to organize all the information that should be available at the bottom of a page.

Adding metadata

The HTML5 layout elements that we have explored thus far have—as we have seen—a dual function: they serve as stylable elements that can control how content is displayed, and they organize content for accessibility.

Both the style and content dimensions of HTML5 layout elements are evolving, but they already serve as tools for designing pages, and for delivering content. The example we explored earlier of selecting an article, or an article section easily for copying in an iPhone gives a taste of how this is likely to evolve in the near future.

In addition to the key layout elements explored so far, it is worth briefly noting a few HTML5 elements whose main role is to index content (even as they can be used to apply styles as well).

Defining an address

Often, one of the first things a visitor to a site is seeking is contact information—an URL if the page is not a site home page, an e-mail address, a physical address, if he or she is looking to locate the hottest underground club or nearest highly rated shish-kabob stand.

A <footer> element can be associated with (placed within) an <article> element if it is providing contact information for the author of (or topic of) the article. Alternatively, an <address> element can be associated with (placed within) a <footer> element if it is providing contact information for the entire page. The following shows an <address> element embedded in a footer along with the associated HTML5 code, in Dreamweaver's Split view.

Figures and captions

The <figure> and <figcaption> elements identify (intuitively enough) a figure and an associated caption. Again, assigning these elements to content helps content aggregators and indexing programs (such as search engines) interpret your page content, and make it more accessible. Moreover, you can use these elements to style figures and/or captions as well.

The following screenshot, for example, has a <figure> element wrapped around both an image, and the caption (<figcaption>). Moreover, as is illustrated in the CSS Styles panel (as shown in the following screenshot), some basic styling has been applied to the <figure> element, including float: right (which right aligns the <figure> element and everything within it), a width, a background color, and margins and padding. Note the coding in the Code side of Split view.

Indicating date and time

Speaking of using HTML5 elements to convey content, there are different HTML5 elements associated with different kinds of time and date information.

The <time> element is used to mark off times and dates for upcoming events, along with other date-specific content. It is not intended to define every reference to a date and time. For example, you would not, use the <time> element when writing a historical article citing dates for different historical events. The <time> element can be used to set off a specific time, as in the following HTML5 code:

The show starts at <time>12:00 midnight</time>.

Alternatively, date and time information can be encoded within text using the datetime parameter, as shown in the following example:

<time datetime="2012-01-01">all night jam session!</time>

The format for time and date is: YYYY-MM-DDThh:mm:ssTZD, where TZD is the time zone.

You are unlikely to use the <time> element as a styling tool. Instead, it is best used to demarcate dates and times of upcoming events.

Recipe Part 1: Build a style sheet for an HTML5 page layout

In this two-part recipe, we will first define a CSS style sheet that will supply formatting for the HTML5 elements we need for our page, and then we will build a page, applying those CSS styles as we associate HTML5 elements with page content.

At this stage of our journey, we can rather quickly walk through the process for creating a CSS fi le, and defining CSS rules for HTML5 elements. We can focus more on which parameters we are applying in this recipe, and why.

As always, before embarking on this recipe, be sure you have a Dreamweaver site defined. If you are not sure what that means, or whether you are working in one. Working within a Dreamweaver site is essential in coordinating the HTML5 page and CSS style sheet that need to work together here.

  1. To begin, choose File | New to open the New Document dialog. From the Page Type category, choose CSS, and click on Create. A new CSS file opens in Code view (which is the only way you can view a CSS page, as it is just code).
  2. Save the CSS file (choose File | Save), name it html5_layout.css. A blank CSS page appears (with the exception of two lines of code, one defining the character set and the other a comment).
  3. Let's create our first style for the <body> tag using the CSS Styles panel:
    • Click on New CSS Rule in the CSS Styles Panel (if it is not open, choose Window | CSS Styles).
    • In the Selector Type popup, choose Tag. In the Selector Name popup, choose Body. In the Rule Definition popup, leave the setting at (This Document Only). Click on OK to open the Rule Definition dialog.
    • In the Type category of the Rule Definition dialog, select the Verdana group. In the Background category, select a background color of medium gray (#999). Click on Apply to generate CSS code for the tag. You can see the code in the CSS fi le, as shown in the following screenshot. Then click on OK.

  4. Having defined the <body> tag using the CSS Styles Panel, let's use a different technique to define style attributes that will apply to most of the HTML5 layout elements—display:block to prevent content from different elements from appearing on the same line; and padding: 10px (10 pixels) to create spacing within each of these elements. Do this by simply typing the code into the CSS page, after the "}" character that closed the definition of the <body> tag:

    header, address, article, footer, nav, section{ display: block; padding: 10px; }

Your CSS page will look like this:

Now that we have reviewed two ways to generate CSS code, choose one or the other to create the following additional CSS code, and save the page:

header { color: #FFF; background-color: #CCC; } footer { color: #000; background-color: #FFF; } article { color: #000; } aside { float: right; width: 25%; border: thin solid #FFF; background-color: #999; padding: 10px; margin: 10px; } figure { background-color: #CCC; margin: 10px; padding: 10px; float: right; width: 160px; height: 180px; } section { padding: 0px; }

A few notes on the CSS we created: We are using very minimalist background and text colors (shades of gray plus white and black) both to make a minimalist aesthetic statement and to keep our project simple.

The float attribute on the <aside> element aligns the aside (sidebar) box with the right side of the page, fl owing content around it to the right. The extra padding and margin enforce spacing between both the aside content and the border of the box, and between the box and content that flows around it. We will see how this works out in Part 2 of this recipe, shortly.

Similarly, the float and margin attributes assigned to the <figure> element align the box that will hold images and captions to the right side of the page.

Setting the margin to zero for the article sections keeps that content from indenting further, beyond the indent inherited from the margin assigned to the <article> and <section> elements in step 4.

Recipe Part 2: Build an HTML5 layout from scratch

Having defined and saved CSS styles, we are ready to create a page that can serve as a customized, fully HTML5, customizable page layout of our own.

A trick to have up your sleeve before we start: We will be working in Split view, and doing much of our work in the Code side of the split. Take advantage of code hints. Start typing a tag as indicated, and press Enter (Windows) or Return (Mac) when the code hint settles on the code you need. To close the code, simply type </, and press Enter (Windows) or Return (Mac).

With Dreamweaver's code hinting at the ready, create a new HTML5 file and connect your CSS file with placeholder text using the following steps:

  1. Choose File | New. In the New Document dialog, choose Blank Page in the first column, HTML from the Page Type column, <none> from the Layout column, and HTML5 in the DocType pop up. However, do not click on Create quite yet!
  2. Click on the Attach Style Sheet link next to the Attach CSS File box. Navigate and select the html5_layout.css file created in the first half of this recipe. Don't worry about the warning message that the fi le should be saved to ensure the validity of the link between the HTML fi le and the CSS style sheet. We will address that in the next step. Now click on Create.
  3. Save your new file as html5_layout.html.
  4. Under the first <body> tag, avail yourself of code hints to enter the following code that will generate a <header> element, an <hgroup> element within the header with placeholders for a heading 1 title and heading 2 subtitle, and a <header> element with placeholder links:

    <header> <hgroup> <h1>Page header</h1> <h2>Header 2 </h2> </hgroup> <nav> <h5>Navigate: <a href="#">link 1</a> | <a href="#">link 2</a> | <a href="#">link 3</a></h5> </nav> </header>

  5. Now comes the heart of the page layout—an article, with an aside, a figure, and two sub-sections. Any of these elements can be duplicated when the page is used as a template layout, and customized actual content pages are created. The article code is:

    <article> <aside> <h3>sidebar content </h3> <p>placeholder text </p> </aside> <h1>First article headline </h1> <h3>Subhead for first article... </h3> <p>placeholder text. <section> <figure> <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="" alt="fig goes here" name="figure_placeholder" width="160" height="120" style="background-color: #FFFFFF"> <br>Caption here <figcaption> </figcaption> </figure> </section> </p> <section> <h3>1st section heading </h3> <p>placeholder text </p> </section> <section> <h3>2nd section heading </h3> <p>placeholder text </p> </section> </article>

    A few notes on this code: Within the <figure> element, we are using a placeholder to save space for a figure that will be inserted. The figure size is defined at 160 px wide, and 120 px high—a nice setting for thumbnails that will appear in our target browsing environment, an iPhone screen.

  6. After closing the <figure> element, we can complete our page with coding for a footer that includes an <address> element by adding the final code:

    <footer> <h4>Footer content here</h4> <address> contact this site at <a href="http://www.xyz.com"> http://www.xyz.com</a> </address> </footer>

After you save your page, you can view a rough preview of how the page will look in an iPhone by defining a 480 pixel wide by 320 pixel high iPhone preview screen (for an iPhone turned sideways). Do this by first choosing Edit | Preferences (Windows) or Dreamweaver | Preferences (Mac), and selecting the Status Bar category in the Preferences dialog. Create a new preview size of 480 pixels wide and 320 pixels high, as shown in the following screenshot, and then click on OK.

Once defined, this Status Bar setting can be used to preview your page in Dreamweaver as you experiment and tweak the layout, as shown in the following screenshot:

Summary

In this article, we completed a survey of building HTML5 pages, using HTML5 layout elements. We saw how these elements function as both design containers, and as content identifiers. We also saw how, for some environments, an entire page could be built using only a few basic HTML tags, plus HTML layout elements.

Based on what we have covered so far, we are ready to design HTML5 pages that work, differently, in different media such as iPhones, iPads, and laptops.



Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery Harness the cutting edge features of Dreamweaver for mobile and web development
Published: September 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


David Karlins

David Karlins is a web design consultant, teacher, and author of dozens of books on web design, including Building Websites All-in-One For Dummies, John Wiley & Sons Inc. (co-author with Doug Sahlin), Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, Peachpit, and Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery, Packt Publishing.

Books From Packt


Squid Proxy Server 3.1: Beginner's Guide
Squid Proxy Server 3.1: Beginner's Guide

Yii 1.1 Application Development Cookbook
Yii 1.1 Application Development Cookbook

CakePHP 1.3 Application Development Cookbook
CakePHP 1.3 Application Development Cookbook

jQuery Mobile First Look
jQuery Mobile First Look

Drupal Intranets with Open Atrium
Drupal Intranets with Open Atrium

Python 3 Web Development Beginner's Guide
Python 3 Web Development Beginner's Guide

Node Web Development
Node Web Development

haXe 2 Beginner's Guide
haXe 2 Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
h
4
L
n
f
D
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software