Html Tips
When it comes to Html, we've been there, done that, now serving 58 tips in 8 categories ranging from Design and Layout to Trouble Shooting.
What's New in HTML 5?
One of the major differences between HTML 5 and HTML 4.1 is the doctype. It's much shorter and easier to remember. To instruct the browser that you're using HTML 5, all you need to do it include this tag at the beginning of your document:
<!DOCTYPE html>
Like previous versions of HTML, you must have an opening head, title and body with appropriately-nested closing tags. However, you can now use container tags such as "<article>", "<aside"> and "<footer>" to better organize the content of the websites that you develop. Previously, you might have used divs with classes and IDs for the same function. In this way, HTML 5 is much more semantic.
The way HTML 5 handles forms is much improved, too. You can use tags to define key generators, marks and meters and even progress bars. Previously, you might have manually used tables or images to show the user progress while completing a survey, but you don't need to do this when using HTML 5.
Tags for using and show Ruby code have been implemented in the newest specification. Furthermore, you can more easily embed audio and video content with the new HTML 5 tags. A final change allows you to easily create detail and summary blocks that minimize and maximize when the user clicks them.
Embedded Blanks
Proper syntax is imperative to HTML to be interpreted by the browser as intended. If, when viewing a page that you create, it appears as if an element is missing, this is the first thing to check for.
All HTML tags require that the characters in a name be continuous. You can't add extra blanks within a tag or its surrounding markup without causing the browser to ignore the tag (which is what browsers do with tags they can't recognize).
Here's an example; This requirement means that </BODY> is a valid closing tag for a document body, but that none of the following are legal:
< /BODY>
</ BODY>
</B ODY>
</BO DY>
</BOD Y>
</BODY >
You get the idea. Don't use blanks inside tags, except to deliberately seperate a tag name from an attribute name.
Center <CENTER> ... </CENTER>
- Definition:
- Indicates that the enclosed text should be centered in the browser window.
- Attributes:
- None.
- Suggested Usage:
- Not used much anymore. Similar style sheet properties and the attribute have taken its place.
- Example:
- This table will appear in the center of the browser:
<CENTER>
<TABLE>
<TR><TD></TD></TR>
</TABLE>
</CENTER>
Head <HEAD> ... </HEAD>
- Definition:
- Defines information about an HTML document, including meta information, page title, links to other documents, and index information.
- Attributes:
- Profile="URL".
- Suggested Usage:
- Although many browsers will render an HTML document without one, <HEAD> ... </HEAD> is required. It's also a good idea if you want to include information for search engines or to establish a base URL.
- Example:
- <HEAD> This is where you would put your title tag, meta tags, and base tag. </HEAD>
Compress Your Graphics
Using graphic images on your webpage enhances the user's experience and makes plain pages pleasing to the eye. However, the average surfer will wait no more than 25 seconds for a page to load, even when the slowdown is caused by their connection, not your page.
To make sure that your page loads fast enough to keep the surfer and still allow a great amount of freedom to use the graphics you want, I highly recommend the use of a graphic compression tool. This tool will compress your .gif or .jpg files without sacrificing much in the way of image quality.
Close window link
Opening a pop-up window to provide visitors with extra information or help adds credibility to a website. Visitors like the fact that they don't have to wait for an entire page to load (although they really are!) and they also don't have to lose their place on the page they're on.
A simple link on the page that opens in the pop-up will allow the user to close the window and return to the page they were viewing. Here's the code:
Close window
