The Slacker's Guide to HTML


[
advanced search]

Home
HTML
Basics
Text Tags and
Text Positioning
Images
Links
Forms
Tables
Frames
Adding Sound
Meta Tags
Horizontal Rules
Comment Tags
Tips & Tricks
HTML Tips
ASCII Codes
RGB Color Chart
Refreshing Pages
Viewing Source
CSS
Basics
Selectors
Properties
Values
Cursor Effects
Positioning Content
Measurement in CSS
Centering with CSS
Custom Form Buttons
CSS For Links
Site Success Center
Site Promotion
Monetize Your Site
Extras
IE Vs. FireFox
Downloads
Myspace Comment




This section of A Slacker's Guide to HTML is here for the express reason of letting you guys in on the little secrets and whatnot I've learned while screwing around with tags and stuff. You'd be surprised of the things you can do with just mixing tags or changing something around. A lot of that stuff you see on big, fancy pages is just smart tricks, ways to use HTML for more than it was meant for. To make it look nicer, more presentable, and more professional. Here we go. If you know of anything you think should be here, feel free to drop me a line.

No Underline on Links

So, you don't want any lines under those links of yours anymore? Well, here's how to get rid of them. All you have to do is add this tag to the top of your document's HTML, under the body tag:

<style type="text/css"> <STYLE> <!-- a { text-decoration: none;} --> </style>

This tag, which uses stylesheets, in one broad sweep changes all the link tags (a) into text without underlines. Simple as that. Cascading Style Sheets is a very powerful extension to HTML, and easy to learn.

Password Field in Forms

These are the forms which don't show you what you are typing so that you can protect your personal information as you are entering it into the computer.

You never know when Big Brother will be watching! Or, perhaps, someone equally menacing like an ID-theft!

So, in order to avoid such a disastrous situation, use this:

<FORM METHOD="POST" ACTION="mailto:you@there.com">
<INPUT NAME="name" TYPE="PASSWORD" VALUE="">
<INPUT TYPE="SUBMIT" ACTION="mailto:you@there.com>
<INPUT TYPE="RESET" ACTION="clear">
</FORM>
And there you have it.

Meta Tags

For a complete tutorial on meta tags, click here.

This will just be a quickie!

Meta tags are tags used in the top of the HTML. These tags tell search engines what to do with your page when they come upon them. Here are the tags for a sample meta tag.

<meta name="keywords" content="baseball, hockey">
That states that the page concerns hockey and baseball, and if someone does a search for those 2 words, that your page should come up...eventually.
<meta name="expires" content="6 December 2001">
Tells search engines when your page should be deleted from it's directory.
<meta name="description" content="A page about sports">
Tells search engines the description of your page.
<meta name="author" content="Your name here">
Tells them the human or software author of the page.

And you can put all these together by just lining them up:
<meta name="keywords" content="baseball, hockey">
<meta name="expires" content="6 December 2001">
<meta name="description" content="A page about sports">
<meta name="author" content="Your name here">

Opening Links in New Windows

In order for the browser to launch a new window when a link is activated just add this code to the normal link tag.

target="resource window"
The complete link code would appear like this:
<a href="http://www.quickrob.com" 
target="resource window">Click here</A>
Oh so very simple.

ASCII Codes

This full ASCII code chart can be found right here. Sorry about the relocation!

RGB / Hex Color Chart

This full RGB/Hex code chart can be found right here. Sorry about the relocation!

Cursor Styles

Check it out. You can quite easily change the cursor icon as people scroll over your content.

The cursor attribute is an extension to CSS. Use it just like any other CSS. If you don't understand style sheets, then click on that link and learn it. It's easy to grasp. For example, if you wanted to make the cursor turn into a crosshair when over a table you might do this:

<table style="cursor: crosshair">
There's more options here

Back & Forward Links or Buttons
<a href="javascript:history.go(-1)">Go back.</A>
<a href="javascript:history.go(1)">Go forward.</A> 
Go back
Go forward

Place those links aound img tags and you can make buttons.