HTML Tutorials Category Archive

Jan 6 Styling a Definition List Nicely Written by: Curtiss | No Comments »

Definition lists (dl) can be somewhat of a bear when trying to style them nicely. Because of the fact that the term/definition sets don’t have any kind of wrappers, you can’t successfully and reliably float them to place the terms on the left and the definitions on the right (however, once CSS2 and CSS3 selectors become more widely supported, you should be able to get more control).

However, you can do some nice things with definition lists. This article will show two examples of how definition lists could be used on your site and how to style them nicely. (more…)

Sep 21 A Look Into HTML5 and CSS3 Written by: Curtiss | 1 Comment »

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place. (more…)

Sep 15 How Your Pages Should Be Laid Out Written by: Curtiss | 2 Comments »

This is intended to be a quick tutorial explaining how you should lay out your HTML pages to ensure that your site works properly for all visitors and search engines. This tutorial assumes that you already have a general knowledge of HTML and CSS.

Your document should begin with the head section, followed by the main content of your page, then any navigation menus you want included. Finally, at the bottom of your document, you should include any javascript files and functions that need to be present. (more…)

Jul 20 Redirecting and Duplicating Content Properly Written by: Curtiss | No Comments »

There are certainly times when all Web developers and “information architects” find themselves in a situation where they need to move content from one page to another. When you do so, you need to redirect visitors from the old location to the new location, and you need to do so properly. To do that, you need to make sure that the old location returns the correct status code (301 – Moved Permanently). There are a number of ways to do this. The most efficient way, for apache users, is to set up a redirect inside of your .htaccess file. However, if you don’t have permission to set up redirects within .htaccess, you can use PHP (or any other server-side scripting language) to do so. Using meta refresh tags and javascript is not generally the best way to redirect your visitors. (more…)

Jul 3 Accessibly Use Image Headers Written by: Curtiss | No Comments »

A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:

<h1 src="myimage.png">This is my alt text</h1>

However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.

This article will briefly explain how to do so using purely CSS. (more…)

Apr 22 Eight Links – April 22 Written by: Allen | No Comments »

Here are today’s Eight Links — links for web developers:

  1. JsPDF – create PDF files completely using JavaScript
  2. The Database Rant – begins with “It’s time for SQL to die.”
  3. iPhone app sales – a developer explains the income his app has generated and how changing pricing didn’t change sales
  4. Why writing software is like writing
  5. 18 Seriously Helpful Cheat Sheets for Easier Coding
  6. Google Analytics API Launched
  7. Finding and Fixing Memory Leaks in Python
  8. A Design for a Distributed Transaction Layer for Google App Engine

Feb 19 Web Development Links for February 19 Written by: Allen | 1 Comment »

Here are some great resources for today:

Feb 13 Internet Explorer and “Quirks Mode” Written by: Curtiss | No Comments »

A few years ago, someone at Microsoft had a brilliant idea to create something called “Quirks Mode” for Internet Explorer. The reasoning behind it is still a bit beyond me, but apparently it has to do with trying to make the browser render old Web sites the way they were initially intended to look. Basically, “quirks mode” turns all versions of IE into IE 4 (as it essentially attempts to render the page the way it would have been rendered with IE 4, ignoring quite a bit of CSS and XHTML). (more…)

Jan 19 CSS Table Gallery Written by: Allen | 2 Comments »

Last week I was looking for good examples of HTML table layouts. Not for the code, but for the style… the colors, the borders, etc. After some searching, I found a site from Chris Heilmann in the UK. He put together a really nice list of CSS styles for HTML tables. He links out to each of the styles so you can download the ones you like. But what really makes his gallery special is that you can click a style and the gallery table changes to that style so you can see a preview instantly.

Check it out here: http://icant.co.uk/csstablegallery/index.php

Jan 11 External Links: Same Window or New Window? Written by: Allen | 3 Comments »

Back in the mid-to-late ’90s, the general rule was never to pop a window on an external link. During the early 2000s, my company decided on a policy that opened a new window on any external links but not for internal links. The reasoning was that we didn’t want users to lose their place when we pointed to an additional resource on a topic.

It seems like today we are back to the 90s regarding external linking. Blogs almost never open a new window and most websites also seem to stay in the same window when opening external websites.

What’s your take on opening new browser windows – yes or no? If yes, in what circumstances? If no, why not?