At our March meeting, we started by comparing the document type declaration in a typical HTML4 webpage with the doctype now used in HTML5: <!doctype html >.
To understand why we can use that doctype now, we worked on seeing what the doctype actually does and how it relates to validation and to the appearance of a webpage.
We used a sample HTML file, swapped out doctypes, added and deleted errors, and then validated the file using different doctypes. The result was that the browser (Firefox) displayed the page the same way with each version, while the validator showed different errors each time.
Next month,we will have a couple of final points on this topic before moving on.
The validator we used is at the W3C website.
For more on doctypes, see this somewhat dated article at the W3C site.
March 18, 2012
March 13, 2012
March 2012 Meeting Announcement -- HTML5 - The Disappearing DOCTYPE
We have been working with HTML5 this season. We have talked about some of the new tags in HTML5, and how to use them, and how to make them work.
Another aspect of HTML5, though, is the simplification of some aspects of website development. In the next couple of meetings, we will look at these changes, and we will start this month with the always exciting subject of the document type.
When we are done, you might never have to think about the topic again.
Another aspect of HTML5, though, is the simplification of some aspects of website development. In the next couple of meetings, we will look at these changes, and we will start this month with the always exciting subject of the document type.
When we are done, you might never have to think about the topic again.
February 26, 2012
February 2012 Meeting Report
We resumed meeting in February, after a snowed-out January meeting.
First, we checked a NY Times experimental implementation of HTML5 for creating an interactive crossword puzzle.
After a review of the stylesheet and script that we use to enable reliable use of HTML5, we looked at the source of a couple of sites that use these techniques -- a WordPress site that uses the Twenty Ten theme, and our workshop blog on Google.
We also touched briefly on the script called Modernizr, which is an HTML5 shiv and more. We will get into that subject when we work with CSS3.
We concluded by pointing out that development of XHTML2 was cancelled by the W3C. We will have more to say about that next month.
First, we checked a NY Times experimental implementation of HTML5 for creating an interactive crossword puzzle.
After a review of the stylesheet and script that we use to enable reliable use of HTML5, we looked at the source of a couple of sites that use these techniques -- a WordPress site that uses the Twenty Ten theme, and our workshop blog on Google.
We also touched briefly on the script called Modernizr, which is an HTML5 shiv and more. We will get into that subject when we work with CSS3.
We concluded by pointing out that development of XHTML2 was cancelled by the W3C. We will have more to say about that next month.
February 11, 2012
February 2012 Meeting Announcement -- HTML5 - What Happened to the "X"?
In December, before the snow hit, we looked at browser behavior to see how the new HTML5
structural tags can be made to work in legacy browsers. This month, we
will work on more aspects of this new standard and see how it will make
the job of a web developer simpler. In the process, we will consider
whatever happened to XHTML.
January 20, 2012
January meeting cancelled
The PACS meeting scheduled for January 21, 2012, is cancelled due to the severe weather forecast.
January 16, 2012
January 2012 Meeting Announcement -- HTML5 - What Happened to the "X"?
Last month, we looked at browser behavior to see how the new HTML5 structural tags can be made to work in legacy browsers. This month, we will work on more aspects of this new standard and see how it will make the job of a web developer simpler. In the process, we will consider whatever happened to XHTML.
December 29, 2011
December 2011 Meeting Report
At our December meeting, we considered how to use HTML5 elements across browsers, even old ones. It turns out that there are two tricks that make that possible.
HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.
A couple of examples:
Eric Meyer:
We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.
HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.
A couple of examples:
Eric Meyer:
/* HTML5 display-role reset for older browsers */HTML5Doctor.com:
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
article,aside,details,figcaption,figure,These resets, however, do not work with Internet Explorer before version 9, because earlier versions of IE do not style unknown tags. Solving that requires a second trick -- using a script called "the HTML5 shiv." This javascript can be called by simply adding this statement to the head of your page:
footer,header,hgroup,menu,nav,section {
display:block;
}
<!--[if lt IE 9]>The shiv creates elements in the DOM that do not otherwise exist. The reset will then take those created elements and style them as blocks.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
?</script>
<![endif] -->
We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.
December 11, 2011
December 2011 Meeting Announcement -- New Web, Old Browsers
The next meeting of the PACS CSS Workshop will be Saturday, December 17, at our usual 9-10 hour. Our topic this month is New Web, Old Browsers.
We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.
In the process, we will reveal publicly for the first time a new, never before seen HTML tag.
We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.
We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.
In the process, we will reveal publicly for the first time a new, never before seen HTML tag.
We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.
November 20, 2011
November 2011 Meeting Report
At the November meeting, we covered the new structural elements in HTML5. There are five of them, and we compared two versions of the same three-column page to see how these new tags compare to the div's that we are used to using for things like headers and footers. The new tags are listed in this article from IBM where their use on a blog page is demonstrated.
Some other places to read about HTML5 are below.
We will continue next month on how to use HTML5's structural semantics across browsers.
Some other places to read about HTML5 are below.
We will continue next month on how to use HTML5's structural semantics across browsers.
November 15, 2011
November 2011 Meeting Announcement -- New Web, New Foundation
The next meeting of the PACS CSS Workshop will be Saturday, November 19, at our usual 9-10 hour.
Our topic this month is New Web - New Foundation. We will be looking at new tags introduced in HTML5 to define the structure of a webpage. They will make styling easier and cut down on "div-itis." But will they work across browsers? We'll see.
Be sure to check the PACS website for the full schedule of sessions this month. Google+, website analytics, and WordPress are features at three of our web-related SIG's.
Our topic this month is New Web - New Foundation. We will be looking at new tags introduced in HTML5 to define the structure of a webpage. They will make styling easier and cut down on "div-itis." But will they work across browsers? We'll see.
Be sure to check the PACS website for the full schedule of sessions this month. Google+, website analytics, and WordPress are features at three of our web-related SIG's.
Subscribe to:
Posts (Atom)