Introduction

Most of the web standards curriculum is based on the last stable version of HTML — HTML 4.01. The HTML 4.01 spec was completed in 1999, over 10 years ago as of the time of this writing! But unless you’ve been hiding under a rock for the last year or so, you’ll be well aware that there is a new version of HTML in production — HTML5!

So why have we been teaching you HTML 4.01 in spite of this?

HTML5 is a really good thing for web developers and designers, because it:

• Is mostly backwards compatible with what’s already there — you don’t need to learn completely new languages to use HTML5. The new markup features work in the same way as the old ones (although the semantics of some elements have been changed and the new APIs are based on mostly the same JavaScript/DOM that developers have been programming in for years.
• Adds powerful new features to HTML that were previously only available on the Web using plugin technologies like Flash, or with complex JavaScript and hacks. Form validation and video are prime examples.
• Is better suited to writing dynamic applications than previous HTML versions (HTML was originally designed for creating static documents).

What does HTML5 mean to me?

To start with, let’s answer that question you’ve had circling round your head since you started reading this article — why did we teach you most of the web standards curriculum using HTML 4.01, if HTML5 is on the horizon?

First of all, when the WSC was first published in 2008, HTML5 was a lot more in flux than it is now, and we didn’t want to teach you something that would likely be changed at a later date.

Second, and more importantly, HTML5 is backwards compatible — in practical terms, this means that all the stuff inside HTML 4.01 is also in HTML5. So by learning HTML 4.01, you are also learning a large chunk of HTML5.

Some parts of HTML5 are implemented in a stable enough fashion across browsers to be used safely even on a production site (as always, you will have to make a judgement call depending on your site’s target audience and features). Plus if a feature is not supported in certain browsers, you can work around this.

To give you a short concluding answer, HTML5 is the future of the Web, and a large part of your future as a web designer or developer. I’d recommend that you start learning HTML5 as soon as you are ready — many of the new features will make your existing work a lot easier, and it will future proof your knowledge.

HTML5 features

HTML5 contains many new features to make HTML much more powerful and suitable for building Web applications. In the list below I’ve summarized the main ones you really should know about.

Some of the features listed below are NOT actually part of the HTML5 spec itself, but are defined in closely related specs, therefore they are still valid parts of the new movement towards modern web applications, and useful for you to know about.

New semantic elements: As you will already know, semantics are very important in HTML — we should always use the appropriate element for the job. In HTML 4.01 we have a problem — yes, there are many elements for defining specific means such as tables, lists, headings, etc., but there are also many common web page features that have no element to define them. Think of site headers, footers, navigation menus, etc. — up until now we have defined these using <div id=”xxx”></div>, which we can understand, but machines can’t, plus different web developers will use different IDs and classes. Fortunately, HTML5 comes with new semantic elements such as <nav>, <header>, <footer> and <article>.

New form features: HTML 4.01 already allows us to create usable, accessible web forms, but some common form features are more fiddly than they should be, and require hacking to implement. HTML5 provides a standardized, simple way to implement features such as date pickers, sliders and client-side validation.

Native video and audio: For years, video and audio on the Web has been done using Flash, generally speaking. In fact, the reason Flash became so popular around the dawn of the 21st century is because open standards failed to provide a cross-browser compatible mechanism for implementing such things, with different browsers implementing different competing ways of doing the same thing (eg <object> and <embed>) and thereby making the whole process really complicated. Flash provided a high quality, easy way of making video work cross-browser.

HTML5 includes <video> and <audio> elements for implementing native video and audio players really easily with nothing but open standards, and it also includes an API to allow you to easily implement custom player controls.

Canvas drawing API: The <canvas> element and associated API allows you to define an area of the page to draw on, and use JavaScript commands to draw lines, shapes and text, import and manipulate graphics and video, export in different image formats, and a whole lot more.

Geolocation: The Geolocation spec (again, not a part of the HTML5 spec) defines an API that allows a web application to easily access any location data that has been made available, for example by a device’s GPS capabilities. This allows you to add all kinds of useful location-aware features to your applications, for example highlighting content that is more relevant to your location.

Introducing HTML5 structural elements

HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. However, it does have its shortcomings. We still rely heavily on <div> and <span> elements with different id and class attributes to define various other features, such as navigation menus, headers, footers, main content, alert boxes, sidebars, etc. Something like <div id=”header”> works in terms of developers and designers knowing what it is for, and being able to use CSS and JavaScript to apply custom styles and behaviour to make it understandable to end users.

But it could be so much better. There are still problems with this kind of set up:

• Humans can tell the different content apart, but machines can’t — the browser doesn’t see the different divs as header, footer, etc. It sees them as different divs. Wouldn’t it be more useful if browsers and screen readers were able to explicitly identify say, the navigation menu so a visually impaired user could find it more easily, or the different news items on a bunch of blogs so they could be easily syndicated in an RSS feed without any extra programming?
• Even if you do use extra code to solve some of these problems, you can still only do it reliably for your web sites, as different web developers will use different class and ID names, especially when you consider the international audience — different web developers in different countries will use different languages to write their class and id names.

It therefore makes a lot of sense to define a consistent set of elements for everyone to use for these common structural blocks that appear on so many web sites. The new HTML5 elements we will cover are:

• <header>: Used to contain the header of a site.
• <footer>: Contains the footer of a site.
• <nav>: Contains the navigation functionality for the page.
• <article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
• <section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
• <time>: Used for for marking up times and dates.
• <aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.
• <hgroup>: Used to wrap more than one heading if you only want it to count as a single heading in the page’s heading structure.
• <figure> and <figcaption>: Used to encapsulate a figure as a single item, and contain a caption for the figure, respectively.

Why isn’t there a <content> element?

While this may seem like a glaring omission, it really isn’t. The main content will be the top level block of content that isn’t the <header>, <nav> or <footer>, and depending on your particular circumstance, it might make more sense to mark the content up using an <article>, a <section>, or even a <div>.

Presenting an example HTML5 page

Some meta-differences
The first thing is that the doctype is much simpler than in older versions of HTML:

<!DOCTYPE html>

the creators of HTML5 chose the shortest possible doctype string for this purpose — after all, why should you, the developer, be expected to remember a huge great long string containing multiple URLs, when in reality the doctype is only there to put the browser into standards mode (as opposed to quirks mode)?

<header>
The document’s header looks like this:

<header>
<hgroup>
<h1>A History of the World</h1>
<h2>Introducing the Big Bang Theory</h2>
</hgroup>
</header>

The purpose of the <header> element is to wrap the section of content that forms the header of the page, usually containing a company logo/graphic, main page title, etc.

<hgroup>
You’ll notice that in the above code, the only contents of my header are an <hgroup> element, wrapping two headings. What I want to do here is specify the document’s top level heading, plus a subtitle/tag line. I only want the top level heading to count in the document heading hierarchy, and that’s exactly what <hgroup> does — it causes a group of headings to only count as a single heading for the purposes of the document structure. you’ll find more out about how heading hierarchies work in HTML5, in the HTML5 outlines, and the HTML5 heading algorithm section, below.

<footer>
You’ll see this code:

<footer>
<h3 id="copyright">Copyright and attribution</h3>
</footer>

<footer> should be used to contain your site’s footer content — if you look at the bottom of a number of your favourite sites, you’ll see that footers are used to contain a variety of things, from copyright notices and contact details, to accessibility statements, licensing information and various other secondary links.
Note: You are not restricted to one header and footer per page — you could have a page containing multiple articles, and have a header and footer per article.

<nav>
You’ll come across this structure:

<nav>
<h2>Contents</h2>
<ul>
<li><a href="#Intro">Introduction</a></li>
<li><a href="#History">History</a>

<!-- other navigation links... -->
</ul>
</nav>

The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the <nav>, but it’s not compulsory.

<aside>
We have the following:

<aside>
<table>

<!– lots of quick facts inside here –>

</table>
</aside>

The <aside> element is for marking up pieces of content that are related to the main content, but don’t fit directly into the main flow. For example we can have a bunch of quick fire facts and statistics about the company, which wouldn’t work so well shoehorned into the main content. Other suitable condidates for <aside> elements include lists of links to external related content, background information, pull quotes, and sidebars.

<figure> and <figcaption>
The dynamic duo of <figure> and <figcaption> have been created to solve a very specific set of problems. For a start, doesn’t it always feel a bit semantically dubious and unclean to mark up an image and its caption as two paragraphs, or a definition list pair, or something else? And second, what do you do when you want a figure to consist of an image, or two images, or two images and some text? <figure> is on hand to wrap around all the content you want to comprise a single figure, whether it is text, images, SVG, videos, or whatever. <figcaption> is then nested inside the <figure> element, and contains the descriptive caption for that figure.

<figure>
<img src="pwei.png" alt="Old poppies logo" />
<figcaption>
The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/">
Original picture on Flickr</a>, taken by bobcatrock.
</figcaption>

</figure>

<time>
The <time> element allows you to define an unambiguous date and time value that is both human and machine readable. For example:

<time datetime="1989-03-13">1989</time>

The text in between the opening and closing tags can be anything you want, as appropriate for the people reading your site. If you wanted, you could also put it like this:

<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time>

Conversely, the date inside the datetime attribute is an ISO standard (see W3C Tip: Use international date format (ISO) for more information) machine readable date, so you get the best of both worlds. You can also add a time onto the end of the ISO standard, like so:
<time datetime=”1989-03-13T13:00″>One o’clock in the afternoon, on the 13th of March 1989</time>
You can also add a timezone adjustment, so for example to make the last example pacific standard time, you would do this:

<time datetime="1989-03-13T13:00Z-08:00">One o'clock in the afternoon, on the 13th of March 1989</time>

<article> and <section>
Now we turn our attentions to probably the two most misunderstood elements in HTML5 — <article> and <section>. When you first meet them, the difference might appear unclear, but it really isn’t so bad.

Basically, the <article> element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it’s transcript, a news story, or a single part of a serial story.

The <section> element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections. So for example:

<article>
<section id="Intro">
<h2>Introduction</h2>
</section>

<section id="History">
<h2>History</h2>
</section>

<section id="Discography">
<h2>Discography</h2>
</section>
</article>

But you could also have a structure like this:

<section id="rock">
<h2>Rock bands</h2>
<!-- multiple article elements could go in here -->
</section>

<section id="jazz">
<h2>Jazz bands</h2>
<!-- multiple article elements could go in here -->
</section>

<section id="hip-hop">
<h2>Hip hop bands</h2>
<!-- multiple article elements could go in here -->
</section>

Where does that leave <div>?

So, with all these great new elements to use on our pages, the days of the humble <div> are numbered, surely? NO. In fact, the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. For example:

#wrapper {
background-color: #ffffff;
width: 800px;
margin: 0 auto;
}

<mark>
The <mark> element is for highlighting terms of current relevance, or highlighting parts of content that you just want to draw attention to, but not change the semantic meaning of. It’s like when you are going through a printed article and highlighting lines important to you with a highlighter pen. So for example, you might want to use this element to markup lines in a wiki that need to be given editorial attention, or to highlight instances of a search term that the user has just searched for on a page, and then give them appropriate styling in your CSS.

How to get it working in older browsers

Older browsers: always the bane of our very existence when trying to get to grips with using shiny new toys on the Web! In fact, the problem here is all browsers – no browsers currently recognise and support these new HTML5 structural elements, as such. But never fear, you can still get them working across browsers today with the minimum of effort.

First of all, if you put an unknown element into a web page, by default the browser will just treat it like a <span>, ie, an anonymous inline element. Most of the HTML5 elements we have looked at in this article are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in your CSS:

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}

This solves all your problems for all browsers except one. Have a guess which one? … Yup, amazing isn’t it, that IE should prove to be trickier than the other browsers, and refuse to style elements it doesn’t recognise? The fix for IE is illogical, but fortunately pretty simple. For each HTML5 element you are using, you need to insert a line of JavaScript into the head of your document, like so:

<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>

IE will now magically apply styles to those elements. It is a pain having to use JavaScript to make your CSS work, but hey, at least we have a way forward? Why does this work exactly? no-one I’ve talked to actually knows. There is also a problem with these styles STILL not being carried through to the printer when you try to print HTML5 documents from IE.

^{Above material from Dev.Opera. Get familiar with HTML5! and New structural elements in HTML5 By Chris Mills}

GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

• Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
• Transparency – Defines one color to be transparent
• Animations – Format supports multi-frame animations
• Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

• Best for – Photographic images, complex images, images with soft edges
• No transparency or animation
• Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

PNG format

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

About the PNG‑8 format

More information about the PNG format can be found here.

Image optimization using Photoshop

Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Determine the color of the web page background that the image will be displayed against
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
• Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
• Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
  Perceptual - Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  Selective - Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
  Adaptive - Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  Web - Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
• Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
• Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
• If you want the image to display while downloading,select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

• Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
• If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
• Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
• Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
• Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
• Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
• If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

For the HTML tags below, please be sure you understand all tags outlined in the notes below.  Remember, if you have any questions on how to use the tag, please take a look at the example located here: HTML Example directory

Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see example). If you view the source of the example page, you can see exactly how the page is coded.

1. background color

body { background-color: #000000;}

2, background image

body { background-image:url("images/an_image.gif"); }

3. Heading styles

 <h1>The biggest heading</h1>
<h2>The second biggest heading</h2>
<h3>The third biggest heading</h3>
<h4>The fourth biggest heading</h4>
<h5>The fifth biggest heading</h5>
<h6>The sixth biggest heading</h6>

4. Line break

some text using a br with a line break at the end<br />

5. Paragraph

 <p>some text in a paragraph, always has a blank line after it</p>

6. Bold and italic

<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br>
<strong>Some Bold Text AND <em>some bold and Italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

7. Horizontal rule

<hr />

<hr size=”20″ />
<hr width=”100″ align=”left” />
<hr width=”50%” />

8. Image

<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />

9. Links
A link to another web site

<a href=”http://www.nytimes.com/”>Link to the New York Times</a>

A link to a page within the website

<a href=”about.html”>About </a>

A link that sends an email.

<a href=”mailto:jane@jane.com”>Email Jane</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href=”#lowerpoint”>Link to a location lower on this page</a>
<a name=”lowerpoint”>Some text lower on the same page</a>

10. Font

body { font-family: Arial, Verdana, sans-serif; }

11. Indenting a paragraph, creates a paragraph and adds margin on left and right

<blockquote>some indented text</blockquote>

12. Bulleted list

<ul>
<li>this is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>

13. Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type=”i”>
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>

14. Navigation using the list tag

<ul>
<li><a href=”http://www.website.com/about.html/”>About</a></li>
<li><a href=”http://www.website.com/portfolio.html/”>Portfolio</a></li>
<li><a href=”http://www.website.com/services.html/”>Services</a></li>
<li><a href=”http://www.website.com/contact.html/”>Contact</a></li>
</ul>

15. Preformated text allows use of extra spaces and line breaks to format your text

</pre> 

alskf asldk
     aslfk asldkf asdlk

         als faslfk alskfa sldk

            aksdf alsfk laskf alsdkf

     alskf asldk aslkf
als kfasdlk

</pre>

16. Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

<img src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>

17. Text colors text=basic text color, link=links color, vlink=visited links, alink=link when mouse down

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

18. Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>
<meta name=”description” content=”The New York Times on the Web”>
<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19. Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>

20. Linking CSS file to your HTML page

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

Markup, the basis of every page

HTML is a markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to markup the various different types of content in documents, specifying what each bit of content is supposed to be rendered as in web browsers (for example headings, paragraphs, tables, bulleted lists etc.) As you’d expect, elements define the actual content type, while attributes define extra information about those elements, such as an ID to identify that element, or a location for a link to point to. You should bear in mind that markup is supposed to be as semantic as possible, i.e.– it is supposed to describe the function of the content as accurately as possible.

Figure 1 shows the anatomy of a typical HTML element.

Figure 1: Anatomy of an HTML element.Read Figure 1 description

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML

A simple example of a web page

<html>
<head>
   <title>Basic HTML</title>
</head>

<body>
   Some text for a web page that demonstrates the basic form of HTML in a web page.
</body>
</html>

Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons:

• Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
• You will become a better web designer. Learning HTML and how a web site is built will give you the advantage of understanding how to design a better site for your client.
• You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won’t be able to do this.
• If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers

The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

• Server software runs on the server machine
• The web site files are on a hard disk attached to the server
• The server software formats and delivers each web page element based on HTTP requests
• Elements are delivered to many clients at the same time
• A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
• A web page is composed of many elements, therefore each page accessed generates many hits
• Hits vs. page visits vs. site visit

Clients

The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.

• The web browser runs on the client
• The client requests elements from the server
• It receives and “parses” the elements delivered by the server
• First reads the HTML
• Formats the page, and displays the text
• Gets additional elements (images, audio, etc.) specified in the HTML
• Displays additional elements
• Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
• Runs client-side software (JavaScript, Java, plug-ins)

Composition of a web page

A web page is composed of the following elements:

• The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
• Elements that come from the same server where the HTML files is, or from a different server
• Image files (.gif, .jpg, .png)
• Audio files (.mp3, .au, .ram, .mov)
• Other multimedia objects (QuickTime movies, Flash, Real, etc.)
• JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

• Can you find the .jpg and .gifs images? Where are they located?
• What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
• Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that we know will be available on the computers of the users that will look at their web sites—it is no use just designing for yourself on the web!

Limitations of web typography include:

• A reduced selection of fonts
• No hyphenation, making full justification look ugly when a column of text gets narrow
• Poor control over kerning (ie, the spacing between the letters)
• A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

Let’s look at these points in a bit more depth.

Reduced selection of fonts

The reduced selection of fonts is often the first thing you will run up against when styling your text. Although you can specify any font you like in your CSS, visitors to your sites will only see your text displayed in that font if they happen to have it installed on their own computer—if they don’t, their browser will either use an alternative font that you’ve specified in your CSS, or resort to the browser default (usually Times New Roman). So, you may like to see all your body text displayed with special fonts like Trump Medieval or Avant Garde, but unless your target audience is heavily biased towards designers your viewers likely aren’t going to get the benefit. For this reason, most web designers limit themselves to the most commonly-available fonts across all systems, which are usually limited to the following:

Andale Mono
Times New Roman
Georgia
Verdana
Arial/Arial Black
Courier/Courier New
Trebuchet MS
Comic Sans (this is an unprofessional, many would say ugly font—don’t use this, except perhaps sparingly on sites aimed at children)
Impact

These look like Figure 1:

Figure 1: The most commonly available fonts across all systems are limited to the above.

Specifying any of the above fonts means you’re reasonably likely to be picking a font that most of your visitors will also have. Microsoft also introduced six new fonts designed for screen use in Windows Vista and XP, and, oddly, chose to begin all their names with the letter C. If you want to use them, they are Cambria, Calibri, Candara, Consolas, Constantia and Corbel. I’d advise against using these, however, because they are not likely to be available on the Mac or Linux platforms.

So, compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen. But is this a serious limitation? Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

Hyphenation

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, centre-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container, can look more attractive than text with a “ragged” edge, and you’ll see it a lot in magazines and books. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To fully justify the block of text, all the browser can do is adjust the spacing between the words, which can lead to “rivers of white space” running vertically through the block—this usually happens when the line length within the block is too short and there aren’t enough spaces to adjust subtly, as shown in Figure 2.

Figure 2: Rivers of whitespace can spoil justified text blocks.

As you can see in this screenshot, the lack of hyphenation to break words at natural points has caused the spacing between certain words to grow to unacceptable sizes. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning

Kerning is the process of adjusting the spacing between particular pairs of letters when the font in use is a proportional one (such as Times New Roman, where the space between each character varies from character to character) rather than a monospaced one (such as Courier, where the space between each character is the same each time). It’s used in print to tighten up the space between letters that align naturally, such as a W followed by an A, and can give a more professional look and feel to the text. Most professional fonts come with kerning instructions built in, to provide spacing information to the type renderer. See Figure 3 for an illustration of the difference kerning makes.

Figure 3: Kerning can certainly improve the look of text.

In the above screenshot, the first word has not been kerned. The second word, though, has had the spacing between the W and the A reduced, whilst the space between the A and the S has been increased a touch.

On the web, kerning with this level of precision is effectively unavailable. The only thing we have that comes close to it is the ability to use tracking, which in the print world means adjusting the space between characters throughout the copy, no matter what those characters are—so, you could decrease the space between your W and your A, but you’ll also be affecting the space between every other letter. On the web, tracking is better known as letter spacing, and is controlled with CSS—this is illustrated in Figure 4.

Figure 4: Proper kerning is not available on the Web; the closest we have available is more general letter spacing.

In the above screenshot, the spacing between each character has been increased by the same amount. Whilst this has helped separate the A and the S, the space between the W and A is now too much. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

A lack of control

With all this talk of the print world, there’s something very important worth bearing in mind, and that is that the web is not print. So where the print designer doesn’t have to worry about the end viewer resizing the text, or not having the desired set of fonts, or not having aliasing enabled, we do, and there’s often a temptation to try and force a particular design upon the viewer—fixing a rigid text size for instance, or placing text in fixed-width and fixed-height containers, or even replacing whole chunks of text with images.

This lack of control needn’t be a problem however—you just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways. You shouldn’t try to stop them, or make it difficult for them—if they want to read your content then it should be as easy to do so as possible. They may wish to read it on their mobile device during their commute home; they may prefer to print everything out and read it on paper instead of a screen; they may be visually impaired and need to increase the font size somewhat. This is why, when you style your text on the web, what you’re really doing is providing a guide to all the different browsing devices as to how you’d prefer that text be seen. Devices are free to ignore everything you say, of course, but that’s ok—what matters is that you’re not trying to force your design decisions on your entire audience.

How is typography done on the web?

Typography on the web is controlled entirely with CSS, and by using CSS you gain a lot of control: not just over the size, colour and typeface selection but also over the line height, the letter spacing, the level of capitalisation (all caps, initial caps, small-caps or no capitalisation at all) and even control over how the first letter or first line of your text is styled.

By styling the text’s containing block, you also have control over the level of justification of the text and the line length. Not only that, you also only have to create your style rules in one location—your stylesheet—to have those rules apply to all of your text, across your whole website (or you can be specific and target particular paragraphs, or areas on the page). Furthermore, if you ever find yourself needing to increase your website text size, or change the body font, you only have to change the value in your stylesheet.

Quick tips

Here are some quick tips to help you out with typography on the Web.

Select a range of fonts

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia”, you could specify “Georgia, Cambria, “Times New Roman”, Times, serif”. So, first the browser will attempt to use a font named Georgia, but if this font isn’t installed it will try for Cambria, then Times New Roman, followed by Times, followed by whatever the operating system has assigned to the “serif” keyword.

Line length

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line, though this should vary depending on your audience (children prefer shorter line lengths, adults prefer longer). An ideal line length is shown in Figure 5:

Figure 5: 60 characters per line—the ideal line length.

The text in the screenshot is about 60 characters per line. Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

Line height

Line height refers to the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default (which also allows more space for subscript and superscript characters)—see the difference between the two paragraphs in Figure 6:

Figure 6: Line height can make a big difference to the look and feel of text.

The first paragraph in the above screenshot has a default line height, and can feel a little cramped. The second paragraph has had its line height increased, and the text has a bit more room to breathe, making it a bit more readable. Too much line height, though, and you make the text harder to read again, so be careful.

Drop caps

By targeting the first-letter pseudo-element with something like p:first-letter { }, you can style the first letter of a line differently from the rest—such styling is usually known as a drop cap, where the first letter takes up about 3–4 lines of text—see Figure 7.

Figure 7: A typical drop cap.

Small caps

Often, fonts come with a small-caps variation—a set of capitalised letters that are uppercased but approximately the size of the lowercase variant. This is useful for when you want to capitalise something but don’t want to draw too much attention to it, so it can be used for abbreviations, for example. Even if the system doesn’t have a small-cap variant of the specified font, that’s ok—the browser will generate its own version by using full capitalisation and then shrinking the characters to around 70% of their normal size. Figure 8 shows small caps in action.

Figure 8: Small caps in action.

Hanging punctuation

A good typographical effect can be used if your sentence starts with quote marks. Using the text-indent CSS property combined with a negative value—either a value in ems (-10em), points (-10pt), pixels (-10px) or percent (-10%)—allows you to shunt the quote mark out into the left, maintaining the left vertical line of your block of text, as shown in Figure 9:

Figure 9: Hanging punctuation.

Typographically-correct punctuation and other entities

You can make your text look more professional and elegant by using the wide variety of typographic HTML entities that are available such as “smart” or “curly” quotes and en– and em—dashes. A lot of blogging and word processing software will automatically do this for you as you type, turning your regular straight quotes into the typographically-correct curly variety, and turning strings of dashes into en and em dashes. See Figure 10 for examples of typographically-correct punctuation.

Figure 10: Typographically-correct punctuation

Once you start peppering your copy with smart punctuation, your text can look far more elegant and professional—more like something from a magazine or a book than from online. Bear in mind though that this sort of punctuation can look a little pixellated for people with older screens or with aliasing disabled, so use with caution.

Then there’s entities—bits of special HTML that you can insert into your copy to generate special characters not easily available from your keyboard. Figure 11 contains a number of entities:

Figure 11: HTML entities

These can be typed in by hand, but a lot of content management software can convert or insert these for you with ease.

Pull-quotes

A pull-quote is a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. You’ll have seen them in almost every magazine you’ve ever read, and they’re an effective way of breaking up your text and highlighting key quotes or phrases—and they’re also easy to do on the web with some simple markup and styling. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done. There are also some more advanced solutions that involve JavaScript picking out selected text and automatically populating a pull quote from it, which can save you having to write the same text twice in your markup.

Summary

So that’s typography, and typography on the web; hopefully you can see that text online needn’t be limited to Verdana, small, #333333—there is a wide range of typographic tricks and tips that can help make your text stand out from the rest of the crowd. For most websites, the reason people will be visiting is to read what you or your authors have written; it makes sense, then, to make that reading as pleasurable as possible.
 
 
^{This information about Typography on the web is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.}

CSS Properties for Typography

font-family value: one or more quotation mark-enclosed font names followed by an optional generic font name
font-style values: Italic, normal
font-variant values: normal, small-caps
font-weight values: bold, normal, lighter, bolder, integer (100-900)
font-size values: an absolute size, a relative size, a length, a percentage
letter-spacing value: either normal or a length
line-height value: either normal, a number, a length, a percentage
text-align value: one of left, right, center, justify
text-decoration values:blink, line-through, none, overline, underline
text-indent values: either a length or percentage
text-transform values:capitalize, lowercase, uppercase
vertical-align values: either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length
word-spacing values: either normal or a length

Examples of Good Typography in Websites

A List Apart
Jason Santa Maria
Analog
Kari Jobe

Creating a simple contact form can be easy once you know the steps involved in creating one. Below is a how-to on creating the HTML/CSS for a contact form. Making the form active will require a script and is beyond the scope of the tutorial below.

Introduction

A form online is any area where you can input information into a web page, for example entering text or numbers into a text box, checking a tick box, causing a radio button to “fill in”, or selecting an option from a list. The form is then submitted to the web site when you push the submit button.

You’ll see forms used on the Web everywhere, for entering user names and passwords on login screens, commenting on blogs, filling your profile in on a social networking site, or specifying billing information on a shopping site.

So, let’s start with the most basic and simple form that one could possibly want to use and build our way up in complexity after that—in this article I’ll cover all the basics you need to know to create elegant, accessible form structures with HTML. The article structure is as follows:

• Step one: The basic code
• Step two: Adding structure and behaviour
• Step three: Adding semantics, style and a bit more structure
• Summary
• Further reading

Step one: The basic code

Let’s start off with a really basic comment form, the sort of form you would use on a web site to allow people to give you feedback on something such as an article you’ve written, or allow someone to contact you without knowing your e-mail address. The code looks like this:

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

If you enter this into an HTML document and then open that document in a browser, the code is rendered as shown in Figure 1.

Figure 1: The first, basic form example.

Try it for yourself—enter the above code into your own sample HTML document and load it in a browser, or click here to navigate to the form in a separate page. Try playing around with the different form controls to see what you can do with them.

As you read the code, you’ll see an opening <form> tag, a </form> closing tag, and some bits in between the two. The element contains two text inputs in which the page’s reader can enter their name and email address, and a textarea that can be filled with a comment to submit to the site owner.

What have we got here?

• <form></form>: These two tags are essential to start and end a form—without them you don’t have a web form. Every form must start and end with <form> and </form> tags.The <form> tag can have a few attributes, which will be explained in Step Two, but please do note that you can’t nest forms inside each other.
• <input>: This tag defines the area where you can insert information. In our case above, input tags define text boxes where site visitors can type in their name and email.Every input tag must have a type attribute to define what it will receive: the possible attribute values are text, button, checkbox, file, hidden, image, password, radio, reset or submit.Every <input> tag must also have a name (except in special cases where the value attribute is always set to the same value as the type attribute, eg type=”submit” or “reset”), which you the coder can decide on. The name attribute informs the thing the data is sent to when the form is submitted (be it a database, or an email sent to the site’s administrator via a server-side script) what the name of the information in the input box is. When the form is submitted, most scripts use the name attribute to place the form data into a database or into an email that can be read by a person.Thus, if the <input> element is for the site visitor to enter their name into, then the name attribute would be name=”name” or name = “first name”, etc. If the <input> tag is for an email address, then the name attribute would be name=”email”. To make it easier on yourself, and the person who will use the form, it is recommended that you name the <input> element in a semantic fashion.By semantically, I mean naming it according to what its function is, as detailed above. If the input is to receive an email address, then name it name=”email”. If it is to be the street address of the site visitor, then name it name=”street-address”. The more accurate the word usage the easier it is not only for you to code the form and then perform maintenance tasks on later, but also for the person or database receiving the form to understand it. Think lean and mean with accurate meaning.
• Every <input> tag should also have a value attribute. The value can be set to blank—value=””—which will tell the processing script to just insert whatever the site visitor types into the box. In the case of a checkbox, radio button, hidden, submit, or other type attributes you can set the value to equal what you want the default to be. In other cases, such as submit or hidden, you set the value to equal the final input. Examples: value=”yes” for yes, value=”submit” for a submit button, value=”reset” for a reset button, value=”http://www.opera.com” for a hidden redirect, etc.Examples of how to use the value attribute:A blank value attribute, which the user input determines the value of:

The code says: <input type=”text” name=”first-name” id=”first-name” value=”” />
The user inputs: Jenifer
The value of first-name is sent as “Jenifer” when the form is submitted.

A predetermined value:
The code says: <input type=”checkbox” name=”mailing-list” id=”mailing-list” value=”no” />
The user checks the box as they wish to join the website’s mailing list.
The value of mailing-list is sent as “yes” when the form is submitted.

• After the two <input> elements, you can see something a bit different—the textarea element.The folks at textarea bring you a nice, new, improved space to input text into. Not your ordinary, plain old one line text box that our friend <input> provides, the textarea element provides multiple lines of input, and you can even define how many lines are available to enter text into. Note the cols and rows attributes—these are required for every textarea element, and specify how many columns and rows big to make the text area. The values are measured in characters.
• Last but not least, you have a special <input> element with the attribute value=”submit”. Instead of rendering a one line text box for input, the submit input will render a submit button that, when clicked, submits the form to whichever target the form has specified to send its data to (currently this isn’t defined at all, so submitting the form will do nothing.)

Step two: Adding structure and behaviour

So, you clicked on the form #1 link above, filled it out and clicked Submit—why didn’t it do anything, and why does it look so bad and all in one line? The answer is that you haven’t structured it yet, or defined a place for the data the form is collecting to be submitted to.

Let’s go back to the drawing board, with a new form:

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

This form looks like Figure 2 when rendered in a browser:

Figure 2: The second form example—looking better, but still not perfect.

You can play with the improved form on a separate page by clicking here.

Here I have made a few additions to the basic, simple form. Let’s break it down so you know what I did:

• There are some new attributes inside the <form> tag. I added an id attribute to not only semantically name what this form is called, but also to provide a unique ID to identify the form so it can be more easily styled using CSS or manipulated using JavaScript if required. You can only have one of each id per page; in this case I called it contact-form.
• Lights, camera, action! When you pressed the submit button in the first form and it did not do anything, this was because it had no action or method. The method attribute specifies how the data is sent to the script that will process it. The two most common methods are “GET” & “POST”. The “GET” method will send the data in the page’s URL (you will sometimes see URLs along the lines of http://www.example.com/page.php?data1=value1&data2=value2…; these are bits of data being transported using the “GET” method). Unless you have a specific reason to use “GET”, it is probably best to not use it if you are trying to send secure information as anyone can see the information as it is transmitted via the URL. “POST” sends the data via the script that powers the form, either to an email that is sent to the site’s administrator, or a database to be stored and accessed later, rather than in the “GET” URL. “POST” is the more secure and usually the better option.If you are very concerned about the security of the data in the form, for example if you are submitting a credit card number to a shopping site, then you should use the https protocol with a secure socket layer (SSL). Basically, this means that data will be sent over the https protocol, not the http protocol. Have a look at the URLs next time you are paying for something on a shopping site, or using online banking—you’ll probably see https:// in your address bar, not http://. The difference is that an https connection is a bit slower to transmit than http, but the data is encrypted, so anyone hacking into the data connection can’t make any sense out of it while it is in transit. Talk to your web host for information on how they can provide you with https and SSL.
• The action attribute specifies what script file the form data should be sent to for processing. Many web hosts will have a generic send mail script or other form scripts available for use (see your host’s documentation for information) that they have customized to their servers. On the other hand, you could use a server-side script that you or someone else has created to power your form. Most of the time, folks use languages such as PHP, Perl or Ruby to create a script that will process the form—you could for example send an email containing the form information, or input the form information into a database to be stored for later use.It is outside of the scope of this course to write up a server-side script for you, or teach you how to write server-side code yourself—please inquire with your host to find out what they offer, or find a nice programmer to befriend.Here are a few resources to get you started if you would like to investigate server-side scripting:

Perl: http://www.perl.com/
PHP: http://www.php.net
PHP documentation on Forms: http://uk3.php.net/manual/en/tutorial.forms.php
Python: http://python.org/
Ruby: http://www.ruby-lang.org
Sendmail: http://www.sendmail.org/
ASP.NET: http://www.asp.net/

• The second line that’s been added to our Step Two form is the “hidden” input field—this is a redirect. What?Under the goal of separating markup structure from presentation and behaviour, it is ideal to use the script that will power the form to also redirect the user once the form is submitted. You don’t want your users to be left sitting there looking at the form page, wondering what the heck to do next after they’ve submitted the form; I’m sure you’ll agree that it is a much better user experience to instead redirect your users to a thank you page featuring “what to do next” links, after a successful form submission. This line in particular specifies that after this form is submitted, the user will be redirected to the Opera homepage.
• To improve the look of the form, I have put all the form elements into an unordered list so that I can use the markup to line them up cleanly and then use CSS to polish the look.Some folk would argue that you should not use an unordered list to markup a form, but use a definition list instead. Others would argue that one should not use a list at all but use CSS to style the <label> and <input> tags. I will let you research this debate and make up your own mind on which is more semantically correct. For our simple exercise I will use the unordered list.
• Last but not least in step two, I’ve labeled the form elements. Both in terms of meaning and making the form accessible to a wide range of internet enabled devices, it is best to give all the form elements labels—check out the contents of the label elements – these labels are tied to their respective form elements by giving the input and textarea elements ids that have the same value as the labels’ for attributes. This is great because it not only gives a visual indicator of the purpose of each form field on the screen, but it also gives the form fields more meaning semantically. For example, a visually impaired person using the page with a screenreader can now see which label goes with which form element. The ids can also be used to style individual form fields using CSS.By now you are probably wondering why id attributes are included as identifiers in form elements as well as name attributes. The answer is that input elements without name attributes are not submitted to the server, so those are definitely needed. id attributes are needed to associate form elements with their corresponding label elements. You should therefore use both.

The 2nd form displays a bit better, but it has been beaten with the default ugly stick. Time to add a few more bits and bobs before applying some style.

Download the files for the Contact Form outlined in Step three here.

Step three: Adding semantics, style and a bit more structure

Now I’ll finish off what I started at the beginning of the article, with the following final version of my example form:

<form id="contact-form" action="script.php" method="post">
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
       <label for="mailing-list">Would you like to sign up for our mailing list?</label>
       <input type="checkbox" checked="checked" name="mailing-list" value="Yes, sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

When rendered in a browser, this form looks as shown in Figure 3.

Figure 3: The final form example in all its glory.

To see this form live in a browser and play with it, following this link to the form on a separate page.

The last two major elements I have added to this form are fieldset and legend. Both of these elements are not mandatory, but are very useful for more complex forms and for presentation.

The fieldset element allows you to organize the form into semantic modules. In a more complex form, you could for example use different fieldsets to contain address information, billing information, customer preference information, and so on. The legend element allows you to name each fieldset section.

I’ve also applied a little bit of CSS to this form, to style the structural markup. This is applied to the third form example using an external stylesheet—click on this link to see the styles. The two most important tasks I wanted the basic CSS to do is add margins to line up the labels and input boxes, and get rid of the unordered list’s bullet points. Here is the CSS that resides in the external stylesheet:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

What does it do? The first line styles the fieldset border to not take up the whole page; you could also set the border to none using {border: none;} if you didn’t want one. The second line puts a margin of 10 pixels on the li elements to help give a little visual room between each list item. The third and fourth lines set a left margin on the input and textarea elements so that they don’t crowd the labels and line up properly. If you would like more information on the styling of a form please consult this article on Styling Forms in this Web Standards Curriculum or Nick Rigby’s A List Apart article on “Prettier Accessible Forms”.

Summary

In this article, I have covered the most basic three steps to a web standards compliant form. There is much more in form world I did not cover here and that is left for you to explore for now. There are access keys, checkboxes and radio buttons, custom submit and reset buttons, and select boxes.

In the above Step three Form, I added a checkbox to show how you can use the additional attributes in the input element to collect information that is beyond the single line text input or the multiple line text area input. The checkbox and radio button attribute values could be used to add the ability to ask short questions and give the reader a list of options to choose from (checkboxes allow you to select multiple options, radio buttons only one). Radio buttons can be very useful in a survey form.

The select element, also not featured in this article, can be used for a drop down menu of choices (for example a list of countries, or states/provinces).

Further reading

• Cameron Adams, “Accessible, stylish form layout”: http://www.themaninblue.com/writing/perspective/2004/03/24/.
• Brian Crescimanno, “Sensible Forms: A Form Usability Checklist”: http://www.alistapart.com/articles/sensibleforms/.
• Simon Willison, “Easier form validation with PHP”, http://simonwillison.net/2003/Jun/17/theHolyGrail/.
• The Spec. Not any old specification, but THE W3C SPEC—http://www.w3.org/TR/html401/interact/forms.html. If you ever have a bout of insomnia in which a warm glass of milk, counting sheep, and Ambien are not putting you to sleep, go read the whole spec for HTML 4.01 or XHTML 1.0 at the w3.org. It is cheaper and more effective than any remedy out there. [Insert name of deity here] bless the engineers of the world.
• The nice folk over at the W3.org have defined the differences between “GET” & “POST” and when to use them: http://www.w3.org/2001/tag/doc/whenToUseGet.html.
• Many blessings upon Mr. Rigby: http://alistapart.com/articles/prettyaccessibleforms.


Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

1. Install WordPress on your server
2. Add a theme
3. Set permalinks
4. Use more pages and less posts. (Turn off comments)
5. Add plugins
6. Edit the CSS
7. Edit the templates (php)
8. Add social media icons
9. Use widgets
10. Customization

1. Installation on your own server

Dreamhost

One-Click Self-Installation of WordPress with Media Temple
One-Click Self-Installation of WordPress with Blue Host

2. Add a theme

Finding the right theme for your project is critical. Here are some resources:

• Free Minimal, Swiss Design WordPress Themes (4 Themes)
• Smashing Magazine frequently features good themes
• Theme Forest
• Graph Paper Press
• plaintxt.org Themes: minimalist themes that allow you to customize

The folder for the theme should be uploaded or “installed” to wp-content > themes

3. Set permalinks

Settings > Permalinks > Custom structure
/%postname%/

This will give the page names the name of your post.

4. Use more pages and less posts. (Turn off comments)

In settings you can also go to Reading > front page displays and set this to a static page rather than a post.

5. Add plugins

Plugins can greatly improve the functionality of WordPress and are one of the primary reasons to use WordPress. Here are some to start with:

• Maintenance Mode
• Google Analytics for WordPress
• Akismet
• All in One SEO Pack
• YouTuber
• iframe
• Galleria WP
• Easy Contact
• Sociable
• Database backup (choose from several)

6. Edit the CSS

Appearance > Editor > style.css

Backup the original version of your style.css, just in case!

7. Edit the templates (php)

Appearance > Editor > see the right hand side for the list of templates. Some things you may need to handcode such as footer copyright information.

8. Add social media icons and/or feeds

Check out the plugins and widgets for adding social media to your site.

9. Use widgets

• Search
• Pages
• Links
• Categories
• Special Text
• Certain themes have special widgets or widgets for footers and sidebars

10. Customization

The more you use WordPress and build sites in it, the better you will get at customizing the website.

Resources

WordPress.tv: Your Visual Resource for All Things WordPress
Ultimate Guide To Using WordPress For a Portfolio
WordPress Tutorial Collection
110+ Massive WordPress Video Tutorial Collection
Top 60 WordPress Resources
Beginners Guide for WordPress
WordPress Resources- Lorelle on WordPress
WordPress as a CMS
CSS Tricks

WordPress Themes
Free Minimal, Swiss Design WordPress Themes (4 Themes)

Below is the HTML and CSS “starter” code for each of the major column layouts. Normally your design will fall into one of these 3 main structures: 1, 2, or 3 column layout. From there your design may get more complex then the illustrations below.

Is it one-column?

“Starter” HTML

<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="header"> </div>

<div id="content"> </div>

<div id="footer"> </div>

</div>

</body>
</html>

“Starter” CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#content {
    width: 990px;
}
#footer {
    height: 50px;
    clear: both;
}

Resource: VIDEO: One Column CSS Layout (Parts 1- 3)
 

Is it two-column?

“Starter” HTML

<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

<div id="header"> </div>

<div id="sidebar"> </div>
<div id="content"> </div>

<div id="footer"> </div>

</div>

</body>
</html>

“Starter” CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#sidebar {
    width: 390px;
    float: left;
}
#content {
    width: 600px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}

Resource: VIDEO: Two Column CSS Layout (Parts 1- 2)
 

Is it three-column?

“Starter” HTML

<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

<div id="header"> </div>

<div id="leftsidebar"> </div>
<div id="content"> </div>
<div id="rightsidebar"> </div>

<div id="footer"> </div>

</div>

</body>
</html>

“Starter CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 130px;
}
#leftsidebar {
    width: 245px;
    float: left;
}
#content {
    width: 500px;
    float: left;
}
#rightsidebar {
    width: 245px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}

Other Resources (Sample Code)

Two Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column/
Two Column Faux CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column_faux/
Three Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/3-column/

2 Column CSS Layout: Fixed Width And Centered
3 Column CSS Layout: Fixed Width And Centered