In this tutorial we’ll introduce you to SSH – a tool that allows you to send remote commands to your Web server – and show you some simple UNIX commands to help you manage your website.
Blog
Here you’ll find articles about website development, WordPress, and other topics that I’m interested in. I hope you enjoy them and find them useful. Comments and feedback are always welcome!
Making CSS Rollover Buttons
Rollovers are a nice way to add visual feedback to your website’s buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it’s clickable.
In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a fair bit of code bloat to the page, meaning longer download times, and more coding for you.
Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! Roll your mouse over this button, which is created using just HTML, CSS and a single image:
So how’s it done? Well, it all centres around the :hover
pseudo-class in CSS. Using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn the link into a button. We then simply jiggle the background image around to create the rollover effect.
New Features in Photoshop CS3
If you’re a professional Web designer, chances are that you’ve used Photoshop at least once in your life. This impressive application, nearly 20 years old, is very much the industry standard for image editing and photo retouching, and is often the software of choice for the Web designer too.
The latest incarnation – Photoshop 10, or CS3 – is just around the corner; Adobe officially launched it last week, and it’s currently available for pre-order at the time of writing.
I’ve been playing with the CS3 beta for the last few months, and it’s certainly an impressive beast. Let’s take a look at the new, fun stuff that Adobe have added to their latest release, as well as areas that they’ve improved over CS2 and earlier versions.
Creating a JavaScript Clock
One of the great things about JavaScript is that it lets you manipulate the contents of a Web page in real-time. This means that we can use JavaScript to create a digital clock, embedded in the Web page, that updates every second. This article shows you how to do just that.
JavaScript Timers with setTimeout and setInterval
JavaScript features a handy couple of methods of the window
object: setTimeout()
and setInterval()
. These let you run a piece of JavaScript code at some point in the future. In this tutorial we’ll explain how these two methods work, and give some practical examples.
[Read more…] about JavaScript Timers with setTimeout and setInterval
Styling Forms with CSS
HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.
Creating Accessible Forms
In HTML forms we looked at the basics of creating HTML forms: GET vs POST, text fields, checkboxes, radio buttons and so on. In this tutorial we’re going to go a step further and look at some of the ways you can make forms more accessible and usable for your visitors.
Web accessibility is important because it makes it easier for users to visit and use your site. This means happier visitors and more traffic!
We’ll cover the following topics:
- Using the
fieldset
andlegend
elements to group form fields in a logical way - Adding labels to form fields with the
label
element - Controlling the tabbing order of the elements in a form
- Speeding up form access and improving accessibility through the use of access keys
By the end of this tutorial you’ll be well on your way to designing wonderfully accessible forms. Read on…
Making a Custom Error Page
Introduction
You’ve probably seen the standard Apache 404 error page many times, when you’ve visited a Web page that no longer exists:
Not very pretty, is it? It doesn’t help much either. Something like the following would be much more useful:
The second error page looks better, is more friendly, and gives the visitor some more options to try (as opposed to just going to another website!).
In this tutorial we’ll show you how to set up your website to serve your own error page rather than the default Apache one.
Internet Explorer Conditional Comments
What are conditional comments?
Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.
CSS Floats
What are floats?
This box is floated right.
A float is simply a box (for example, a div
) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.
One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.
Floats are a bit like the align="left"
and align="right"
attributes in img
elements.