HTML provides two main ways to add descriptive text to page elements: the alt
attribute, and the title
attribute. While these two attributes may appear to work in a similar way, they have quite different purposes. This article takes a look at these two attributes, explores their similarities and differences, and shows how to use both attributes correctly.
Web Development
Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.
See also:Styling Tables with CSS
In this tutorial, we’ll take a plain old HTML table:
… and transform it into something beautiful using nothing but CSS:
Techniques we’ll cover include:
- Adjusting the spacing, padding and margin of table cells
- Styling the borders of the table and the cells within the table
- Changing text and background colours, and using background images
- Creating alternately-coloured table rows to aid legibility
- Adding a mouse hover effect to table rows
- Styling the table caption
Writing HTML-compatible XHTML
As we’ve seen in other articles in this series, XHTML offers a lot of advantages over HTML. It’s stricter, cleaner, more robust, and extensible. However, some modern browsers such as Internet Explorer don’t understand XHTML; they only understand HTML 4. Fortunately, the two languages are very similar and, by bearing a few guidelines in mind, you can write valid XHTML documents that can be processed correctly by HTML 4 browsers.
XHTML Document Types
In this article you take a look at the concept of document type definitions, or DTDs, and explore the three DTDs available to you when writing XHTML documents.
Converting HTML to XHTML
In our Introducing XHTML article, we took a look at how XHTML differs from regular HTML 4. In this article, you’ll learn how to convert an HTML 4 Web page to fully standards-compliant XHTML 1.0 by working through a practical example.
Introducing XHTML
XHTML, first introduced in 2000, is billed as the successor to HTML. It’s short for Extensible Hypertext Markup Language. XHTML 1.0 is essentially a reworking of HTML 4 in XML – Extensible Markup Language. As such, HTML 4 and XHTML 1.0 are very similar.
XHTML is stricter than regular HTML, as you’ll see in a moment. While this extra strictness requires a bit more effort when creating XHTML pages, it does mean that those pages are very easy for computers to read. HTML, in contrast, is notoriously difficult for browsers to interpret — which is partly why no two browsers seem to display a Web page in the same way!
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.
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
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…