Today the web is full of poorly written scripts with a low level of attention to detail. In this article I'm going to share with you some of the hottest development techniques of our time that will no doubt streamline your development and impress you friends. So without further ado: The seven hottest web 1.0 techniques to trick out your webpage.
7) Spacing
There are a few ways you can manipulate the spacing between elements on a webpage. By far, the most popular - is the spacer gif. If you haven't got one of these around,
download one from akamai servers. It's already edge-cached and optimized for speed. However there are a few things you might not know about the historical spacer gif. For example, to minimize byte-size, if the image is only 1x1, you need not add the
src attribute. And if you're developing in quirks mode, you also need not quote your attributes. This means you can simply get away with the following:
spacer.gif optimized
<img width=1 height=1>
For anything larger, you may not have even heard of it before, but you can use the infamous
<spacer> tag where by which you can lose the extra http request to download the spacer.gif image, thereby reducing the load time of your page! Feel free to use any size!
the spacer tag
<spacer type=block width=20 height=4>
See the
example demonstration page.
6) Columnar layouts
Believe it or not, this is easier than you might think. With the use of a
<table>, this is a mundane task! For example, to make a three column layout, just do the following:
a three column layout
<table>
<tr>
<td>column one </td>
<td>column two </td>
<td>column three </td>
</tr>
</table>
To increase the amount of rows, simply add another
<td> element subsequent to the last one. It's easy! See the
example demonstration page.
5) Remove those nasty underlines on links
If you want your webpage to look slick and professionally done, show your users that you know how to hack away those nasty underlines below each of your links with the following piece of code. Simply add this between the head tags of your document.
underline removal
<head>
...
<style>
a { text-decoration: none; }
</style>
...
</head>
Your users will definitely be impressed! See the
example demonstration page.
4) Rollovers!
Only the truly advanced will want to dig in this deep. This is why the internet was invented. Really. However this involves getting your hands dirty with "the JavaScript." We'll start off by adding a function to the window's onload event handler, and then begin adding the magic on top of it.
Rollover magic
<script>
window.onload = function() {
var example = document.images[0]; // change this number appropriately
example.onmouseover = function() {
// the keyword 'this' is an OO concept, you wouldn't understand
this.src = 'over.jpg';
};
example.onmouseout = function() {
this.src = 'out.jpg';
};
};
// be sure to name your images appropriately to match the script.
// which means you'll need to put an image called over.jpg and out.jpg
// in the same directory as this script
</script>
<table>
<tr>
<td><img width=100 height=100></td>
</tr>
</table>
Voila! Image rollover magic! Your webpage is now teh awesome. See the
example demonstration page.
3) (Font) Size Matters
Are
<font> tags not cutting it for you? Frustrated that you can't make anything larger than size 6? Look no further than the
<big> tag! With the ability to nest this puppy as many times as you like, you can go as large as your heart desires.
bigger font makes a huge impression
<big>big</big>
<big><big>bigger</big></big>
<big><big><big>biggest</big></big></big>
<big><big><big><big>Freaking' Huge!</big></big></big></big>
See the
example demonstration page.
2) Animation without JavaScript
Believe it! It's true. Drop those old scripts that made your website scroll and blink because why bother programming JavaScript when plain 'ol HTML can do it for you! These are the ever-so-beloved
<blink> and
<marquee> tags.
blink and marquee
<blink>Sale! Sale! Sale! Buy now and save big!</blink>
<marquee>Welcome welcome welcome! Today is the beginning of the end, buy now!</marquee>
See the
example demonstration page.
1) Open a new window
Despite thousands of articles written on
unobtrusive JavaScript (probably some library framework of some sort) to add "progressive enhancement" behavior to your webpages, one of the most common behaviors on websites these days is to let your users open links in new windows (you wouldn't want them to leave, right?). Believe it or not, this is also possible without JavaScript thanks to a little attribute called
target.
target new windows
<a href="http://google.com" target="_blank">visit my work</a>
See the
example demonstration page.
Note to the reader
Thanks for reading my website. I hope you enjoyed these tips. And to my loyal readers who make this place so popular. Check out my current hits just today!
i am dustin diaz
