September 23, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=208
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
Web Directions ahoy!
SitePoint is once again sending a delegation of worthy
representatives to Web Directions South 2008 [1]. And this year
it's my turn! If you are attending make sure to come and say hi.
It'd be nice to put some faces to the nebulous cloud that is the
Tech Times readership.
The lineup of speakers at Web Directions South this year is
exciting. Matt Magain, sitepoint.com's Managing Editor, has
blogged about all the SitePoint authors, bloggers, and staff [2]
who are presenting this year. I'm especially excited about seeing
the legend himself: Douglas Crockford [3].
In this issue Kevin takes a look at HTML and revisits what is
required to construct a complete HTML document.
[1] <http://south08.webdirections.org/>
[2] <http://www.sitepoint.com/blogs/2008/07/16/learn-javascript-from-the-master-at-web-directions-south/>
[3] <http://south08.webdirections.org/?cat=1#post-40>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
What is Fanatical Support(R)?
The world's hosting leader, Rackspace Hosting, is the expert
when it comes to delivering hosting solutions.
It all starts with Fanatical Support(R), the commitment to delivering
an unequaled customer experience by supporting the technology
and the customer 24x7x365.
No call centers or automated phone systems, every Rackspace customer
has a dedicated support team managing their account and teams of
experts managing the infrastructure, network and hosted solutions
for them. And that means the customer can focus on their business --
and nothing else.
Rackspace: http://www.clickaudit.com/goto/?131717
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- A Minimal HTML Document
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
by Kevin Yank
I am often surprised by just how many professionally-designed
sites are delivered in the form of incomplete HTML documents. To
be fair, however, the amount of code required for even an empty
HTML document has grown significantly over the years.
One upon a time, an HTML document only had to contain a
<!DOCTYPE> declaration and a <title> tag. From the HTML 3.2
recommendation [1]:
In practice, the HTML, HEAD and BODY start and end tags can be
omitted from the markup [...]
Every HTML 3.2 document must also include the descriptive title
element. A minimal HTML 3.2 document thus looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<TITLE>A study of population dynamics</TITLE>
At the time HTML 3.2 was the recommended spec, very few web
designers bothered with a <!DOCTYPE>, or with valid code at all,
so in practice an HTML document could be any text file containing
any combination of text and HTML tags.
These days, the needs of accessibility, search engine
optimization, document consistency for JavaScript manipulation,
and support for international characters all combine to require
more of our HTML. The minimal HTML document has gotten a lot
bigger.
Here's the very minimum that an HTML 4 document should
contain, assuming it has CSS and JavaScript linked to it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
If you want to be able to process your document as XML, then
this minimal XHTML 1 document should be your starting point
instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
Read on below for a description of each line of these minimal
documents.
[1] <http://www.w3.org/TR/REC-html32#html>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Maintaining a website can be both fun and sometimes frustrating
especially if the web host does not catch up to your needs. The
owners behind WebHostingBuzz have experienced it all.
We have been there and done it. We know what YOU want when it comes
to running a script oriented website. We know what YOU want when it
comes to value for your web hosting dollars. We host over 150,000
domains across the globe. Surely we can host yours!
Host unlimited websites under one account. Get a free domain name
for life, tons of web space and transfer for only $40 per year.
http://www.webhostingbuzz.com/website-hosting.shtml?host_sitepoint-special
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
THE BREAKDOWN
Every (X)HTML document should start with a <!DOCTYPE>
declaration [1] that tells the browser what version of (X)HTML
the document is written in. In practical terms, this tells
browsers like Internet Explorer and Firefox to use their most
standards-compliant (and therefore cross-browser-compatible)
rendering mode. The exact form of the <!DOCTYPE> declaration
depends on whether your document is HTML 4 (fine for most
purposes) or XHTML 1 (enables the page to be processed as XML):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
Next, we mark the start of the document with the opening <html>
tag [2]. This tag should should specify the primary language
for the document's content, with the lang attribute [3]:
<html lang="en">
In an XHTML document, you should also specify the
document's default XML namespace (using the xmlns
attribute) and re-specify the language using XML's
standard xml:lang attribute:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Next comes the <head> tag [4], which starts the document
header:
<head>
The first thing in the header should be a <meta> tag [5] that
specifies the character encoding [6] of the page. Usually, the
character encoding is declared by the web server that sends the
page to the browser, but many servers are not configured to send
this information, and specifying it here ensures the document is
displayed correctly even when it is loaded directly from disk,
without consulting a server:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
In an XHTML document, <meta> tags should end with a slash to
indicate they are empty:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
With the encoding established, we can safely write the first
piece of actual content in the page -- the page title [7]:
<title>title</title>
If you want to link a CSS file to the page to control its
appearance (which you usually will), a <link> tag [8] at this
point will do the trick:
<link rel="stylesheet" type="text/css" href="style.css">
Again, the XHTML version of this tag needs a trailing slash to
indicate it is empty:
<link rel="stylesheet" type="text/css" href="style.css"/>
If you want to link a JavaScript script to the page, and the
script is designed to be invoked from the header, insert a
<script> [9] tag at this point. Whether the document is HTML or
XHTML, you should include a full </script> closing tag for
backwards compatibility:
<script type="text/javascript" src="script.js"></script>
That just about does it. You can end the header, then start the
body of the page with a body [10] tag. The content of the page
is up to you, but since we're talking about a minimal
document, there need not be any body content at all:
</head>
<body>
</body>
</html>
So, how does your most recent work hold up? Have you included
all the elements discussed above? Common omissions like the lang
attribute and the content-type <meta> tag may seem unnecessary,
but they really put that final layer of polish that ensure your
site holds up with the best on the Web.
I'd love to hear your thoughts on the basic HTML elements
discussed above, or any other elements you absolutely always
include in your pages. Leave a comment and let me know!
A Minimal HTML Document [11]
by Kevin Yank
Web Tech Blog: Technically Speaking
[1] <http://reference.sitepoint.com/html/doctypes>
[2] <http://reference.sitepoint.com/html/html>
[3] <http://reference.sitepoint.com/html/core-attributes/lang>
[4] <http://reference.sitepoint.com/html/head>
[5] <http://reference.sitepoint.com/html/meta>
[6] <http://www.sitepoint.com/article/guide-web-character-encoding>
[7] <http://reference.sitepoint.com/html/title>
[8] <http://reference.sitepoint.com/html/link>
[9] <http://reference.sitepoint.com/html/script>
[10] <http://reference.sitepoint.com/html/body>
[11] <http://www.sitepoint.com/blogs/2008/09/23/a-minimal-html-document/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
No advertisement selected.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
See you next week for another issue of the Tech Times!
Andrew Tetlaw
techtimes@sitepoint.com
SitePoint Technical Editor
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
Jina Bolton on Creating Sexy Stylesheets
by Matthew Magain
Jina Bolton is a designer and artist, working and residing in
Silicon Valley. In this candid interview, she reveals where she
finds inspiration for beautiful design, why she is fascinated by
sushi and robots, and what makes a style sheet "sexy."
http://www.sitepoint.com/article/1671
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
Ajax forms -- Check Username availability -- security issue?
privacy issue?
<http://www.sitepoint.com/forums/showthread.php?threadid=572689>
Form Controls: To style or not
<http://www.sitepoint.com/forums/showthread.php?threadid=572580>
Are styles polluting our minds?
<http://www.sitepoint.com/forums/showthread.php?threadid=572093>
Considering a new host for active forum & WP site.
Recommendations?
<http://www.sitepoint.com/forums/showthread.php?threadid=570727>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
Selling Web Design Services Blog: DOWN TO BUSINESS
Why You Should Attend Two Conferences a Year (1 comment)
http://www.sitepoint.com/blogs/2008/09/23/why-you-should-attend-two-conferences-a-year/
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Facebook About to Make Lexicon Way More Useful
http://www.sitepoint.com/blogs/2008/09/23/facebook-about-to-make-lexicon-way-more-useful/
What Makes the Cloud the Cloud (1 comment)
http://www.sitepoint.com/blogs/2008/09/19/what-makes-the-cloud-the-cloud/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list, send a blank email to:
leave-2502032-2266608.e57363ef99c8b59c8667cca2fd106cbe@sitepoint.sparklist.com
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.