Complete newbie or old-schooler? The tutorials start here.
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 »
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 »
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 »
So, you’re surfing the web, and you come across a page like this one:
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 »
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 »
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 »
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 »
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 »
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:
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:
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 »
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 »
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 »
The possible attributes for the “vertical-align” property are:
The default position varies depending on the element. Read the rest of this entry »
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 »
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.
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 »
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 »
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 »
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 »
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 »
Which takes precedence?
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 »
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.
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.
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 »
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 »
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 »
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 »
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 »