Complete newbie or old-schooler? The tutorials start here.

Registration Issues?

It has come to my attention that my anti-spam plugin for WordPress, Sabre, has been stopping legitimate registration attempts, so this plugin is now disabled. If you tried to register before and were unable, please try again.

In fact, I have decided to Read the rest of this entry »

HTML5, CSS3, and Responsive Design

More than three years have passed since my last entry here, and a lot has happened in the coding world since then. xHTML is becoming a thing of the past, and more and more browsers are able to decipher CSS3. Even Internet Explorer 9 finally caught up with CSS3 media queries, which didn’t really work so well in Internet Explorer 8, but have worked in all the other modern browsers for quite a while now. Yes, leave it to IE to limit us in what we can do. 🙄

Making the change from xHTML to HTML5

If you have been coding everything in strict xHTML like I taught you, making the transition to HTML5 is easy. All you absolutely need to do in order to make this transition is Read the rest of this entry »

Accessible Forms

When you create a form for your website, you need to keep in mind that not everyone will be able to see them, and not everyone will be able to use a mouse to fill them in. For those who can see and use a mouse, they may have poor motor control, finding it difficult to click on small checkboxes and radio buttons.

Some companies have been sued over the fact that people with certain disabilities are unable to use their forms, when it’s very easy to create a form that they can use. If you’re not concerned with legal repercussions, then you should at least consider how many potential customers you will be missing out on if people can’t order your product, subscribe to your newsletter, or send you an email.

I will cover styling forms elsewhere. First, it’s important to know how to make your forms functional for as many people as possible. Read the rest of this entry »

Soft Word Breaks For Long Words

It used to be that, whenever you wanted to allow a long word to break at the end of a line without forcing it, then you might have added a <wbr> there. Since most browsers wouldn’t insert a dash at the break, it was also necessary to use a CSS pseudo-class to display that dash. However, since IE didn’t recognize pseudo-classes until IE8, and the majority of people on the internet were still using IE, this was hardly a solution. Read the rest of this entry »

Custom 404 Page Not Found Error Pages

So, you’re surfing the web, and you come across a page like this one:

Page not found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please try the following:

If you typed the page address in the Address bar, make sure that it is spelled correctly.

  • Click the Back button in your browser to try another link.
  • Use a search engine like Google to look for information on the Internet.

HTTP 404 – File not found

What do you do? If you’re like most people, you might back out of it and move on to another website.

Don’t lose potential website visitors over something like this!

Instead, customize that error page and make it useful. Read the rest of this entry »

Flexible-width, content-first layout with fixed-width, equal-height sidebar

Wow, that’s a wordy title, but I wanted to make sure people will know what to expect before they click on my link.

To see what you’ll be creating today, see a working example here.

Creating this type of layout without tables may sound like a tall order right now, but not only will I show you how to do it, I’ll also try to help you understand how it works so you’ll be able to create these things without the need for a cheat sheet later.

Nope, it won’t take a miracle. Just a little 2+2. Ok, maybe 20+80, or 25+75. Ready? Here goes… Read the rest of this entry »

Making Accessible Image Maps with CSS

You may have seen these around the web, images with various clickable areas that will take you to a different page, or to a different section of a page. To see how this was done in the past, see w3schools.com‘s tutorial on the <map> tag. For an example of the end result, click on the “Try it Yourself” button near the top of that page, then hover over the sun and planets in the sample.

There are some major drawbacks to using that method: Read the rest of this entry »

CSS: Putting Equal-Height Columns to Practical Use

If you haven’t gone through Equal Height Columns with CSS yet, you should do so before reading any further. This tutorial will continue from there, and I’ll show you a way to add content under those columns in a way that works with all the most popular browsers, as well as the dreaded IE6 that many people are still using. Read the rest of this entry »

Equal-Height Columns with CSS

Aug 4, 2009 edit: It has been brought to my attention that the overflow:hidden; required for this layout causes a bug when dealing with links that lead to a specific part of the page, and I don’t know why I hadn’t considered that before. After researching this issue and seeing others say it’s impossible to correct, I tried various methods myself to no avail. With no actual fix, I’ll see if I can at least come up with a good workaround and amend this page again. At any rate, if anchor links aren’t an issue for you, continue with the original tutorial… Read the rest of this entry »

CSS Pseudo-elements

Pseudo-elements are very similar to pseudo-classes. So similar, in fact, that I’m not even sure why they consider them two different things.

All that really matters is understanding how they work, and that’s what I’m going to show you today.

Pseudo-elements you can use are:

  • :first-letter
  • :first-line
  • :before
  • :after

Read the rest of this entry »

CSS Pseudo-classes

Pseudo-classes give you more control over the visual presentation of your pages without needing to add extra markup (xHTML) to the page itself, and in many cases it allows you to do things that wouldn’t be possible at all without pseudo-classes. Internet Explorer doesn’t recognize the first-child pseudo-class, but does recognize the following four when used on anchor-links:

  • :link
  • :visited
  • :hover
  • :active

Since these are used in most websites, I will start with them, after which the rest should be easier to understand. Read the rest of this entry »

Website Review: bestbuy.com

I have to say, I was pretty disappointed when I ran bestbuy.com through w3c’s markup validator and it displayed 1223 errors and 1185 warnings.

I’ve always liked my local brick and mortar Best Buy. Their staff are always friendly and knowledgeable, and they’ve never steered me wrong. They even have their famous Geek Squad (ouch, I might have to review their site next), who specialize in computers and networking. So why can’t they find and hire someone who will code their website properly?

Judging by most of the HTML on that page, I would say the easiest way to clean up most of their errors is to Read the rest of this entry »

CSS line-height property

Attributes for the “line-height” property may be defined in em or px for web pages, although em is better because it is relative to the font-size.

For printing on paper, you could use pt, mm, cm, or in. Read the rest of this entry »

CSS vertical-align property

The possible attributes for the “vertical-align” property are:

  • top
  • middle
  • bottom

The default position varies depending on the element. Read the rest of this entry »

Server-Side Includes (SSI)

Would you like to change one link in one file and have it change on all of your pages instantly?

Server-side scripting isn’t the same as xHTML or CSS, and it can be an advanced topic for people who are just starting out. But, ‘including’ a content file into every page can be just as easy as including a CSS file, and the benefits can be huge. Read the rest of this entry »

CSS Photo Gallery

There are many ways to make a photo gallery. Some use javascript to pop up a larger image in the same or a different window. Some load a new page for every enlarged image. You could easily use an iframe, but since those are bad for accessibility, I stay away from iframes as much as possible. Ajax is good for photo galleries as you can see here, but I’ll save ajax for another day as it’s more advanced and requires javascript.

Today, I’ll show you how to create a photo gallery with nothing but pure xHTML and CSS.

Below is a screen shot from this page. When you hover on a thumbnail, an enlarged version of the image appears.

Screen Shot of Photo Gallery

Read the rest of this entry »

Is Your Layout Not Working Out Right?

Does your sidebar keep dropping below your content instead of sitting beside it? Is there a huge gap between the two? Where is all that extra space coming from below the header? Why are the sidebar and content overlapping?

Sometimes these problems arise from a missing or extra </div> in your xHTML. Other times, it is something in your CSS that’s causing it. Here, I’ll address the different causes, how to find and fix them, and offer other tricks to help you figure out what, exactly, is going on with your layout. Read the rest of this entry »

Screen Resolutions

One thing you always need to keep in mind when designing a web page, is that it will never look the same size on everyone else’s screen as it does on yours.

What’s that? You read me right. Never. Yes, it will look the same for many people, but not even nearly all. Not only do you have different browsers to consider, but you also have things like mobile devices with their tiny little screens, as well as different screen resolutions and ratios. Here, I will focus on screen resolution just to keep it simple. Read the rest of this entry »

Easily Find and Correct Errors in Your CSS

CSS Validation

Now that we’ve covered xHTML validation, let’s move on to CSS validation.

You may find this a little trickier at first, because instead of “mismatched” start and end tags, you run into things like “parse errors” and “lexical errors,” and when you run into one of these, the error is usually somewhere before the area that is pointed out to you by the validator.

Take, for example, this CSS I found on the web, which is incidentally one good reason to make your CSS more readable to the human eye… Read the rest of this entry »

Easily Find and Correct Errors In Your xHTML

Before putting any xHTML or CSS file online, you should always check it for errors. A good way to do this is to run your code through w3c’s Markup Validator and CSS Validator.

As good as these and similar services are, I have found that some beginners have trouble understanding what the errors mean and how to fix them. With this in mind, I decided to do a segment on both of w3c’s validators. Read the rest of this entry »

HTML or xHTML, What to Teach Beginners?

I didn’t realize this until just recently, but there actually seems to be a raging debate in the web developer community about whether HTML should be taught before xHTML, or whether beginners should start off with xHTML from the beginning.

Why is this even a question to anyone? Isn’t the answer a no-brainer? Read the rest of this entry »

The Cascade in CSS: Tags, classes, pseudoclasses, etc.

Which takes precedence?

  • tag
  • .class
  • tag.class
  • tag:pseudoclass
  • tag.class:pseudoclass

What if you add ids into the mix?

It can seem confusing when you start adding all these little details to the rules of CSS precedence, but you should always keep in mind that the more specifically-targeted elements will always take precedence over the more generically(or generally)-targeted ones. By the time you finish reading this tutorial, you should have a better grasp on things. Read the rest of this entry »

Ask Lesa

If you have a question about xHTML or CSS that you don’t see answered on this website, please ask in a comment below.

If you have simply overlooked it, I will give you the link to it. If it’s something that can be answered in a short sentence or two, I will post the answer in a reply here.

If I feel that it warrants a whole new tutorial, I will write one, then post the link to it in a reply here. 🙂

The Cascade in CSS: Different Ways to Target the Same Element

Which one takes precedence?

I’ve had to discover these rules through trial and error over the years and have never tried explaining it to anyone else in detail, so please bear with me and feel free to ask questions in the comments below if any of it needs clarification.

Note: If you don’t know the difference between id and class and how to target each with CSS, you should take my easy-to-follow beginner’s tutorials before continuing. Read the rest of this entry »

The Cascade in Cascading Style Sheets (CSS)

Ok, so “Style Sheet” makes sense. It’s a sheet full of styling definitions for a web page. But, what’s with this “Cascading” bit?

Well, cascading style sheets follow a certain flow. Generally, you start with Read the rest of this entry »

Target Still Missing the Mark

Now that we’ve made it through the first series of tutorials, I thought I’d skip tutorials for a day and post a little editorial instead.

I stumbled upon this little piece Sunday night, it’s not really news since it happened a few years ago. But, it’s a perfect example of why it’s important to pay attention to web standards, which includes accessibility for the blind.

In May of 2005, Target was sued by the US National Federation of the Blind because their website wasn’t accessible to the blind. According to the article I found at WebStandards.org, the site was no more accessible 9 months after the lawsuit than it was the day they were sued. With a corporation as big as Target, one might expect them to afford a decent web developer.

The main problems with their website, according to the lawsuit, were: Read the rest of this entry »

xHTML Meta Tags

In the previous page of these tutorials, titled Inside the Head of a Web Page, we covered pretty much everything inside the <head> section except <meta> tags. Here, you will learn some of the different uses for these tags. Read the rest of this entry »

Inside the Head of a Web Page

In the previous post of these tutorials, we got into the anatomy of a web page. There, we covered the <!DOCTYPE>, <html>, <head>, and <body> tags.

Now we’ll delve into the <head> section, starting with the <title> tag. Read the rest of this entry »

Anatomy of an xHTML page

Up until this point, we have only dealt with the content (xHTML between the <body> and </body> tags) and styling of a page (through the use of an external Cascading Style Sheet), but there is more to creating a web page than that. In addition, each page also has what is called a <!DOCTYPE> declaration, <html> and </html> tags, <head> and </head> tags, and other things that are nested between the <head> and </head> tags.

Why am I saving the first for last in the beginner’s tutorial series? Read the rest of this entry »

xHTML and CSS Glossary – em

An “em” is a unit of measurement, which is the same width and height of the capital letter “M”. If “em” is defined inside an element that has a font-size of 12px, then both the width and the height of one “em” will also be 12px.

← Older posts