The Slacker's Guide to HTML: Extras: Tips & Tricks, HTML embedding, passwords, ascii, resource windows, fnts, meta data, and more HTML tags.

Tips and Tricks to HTML

Pick a Trick

Embedding Text Into Other Text
Password Forms
Getting Rid of the Underline When Making Links
Meta Tags
ASCII Codes
Changing the Font
Opening Up Content in a New Window

This section of the 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.

FUN WITH TABLES

It's a little complicated to add those words to the right, but it

This is

the example,

dig it?

all makes sense when you think about it. If a table had no borders and no color fill, then all you would be able to see is the words inside the table floating around in their perspective, yet invisible, boxes. In order to get a little snippet of text to show up and look independent of the rest of the text, but still with it (following this...?), you have to align a table somewhere on that page near the text. It doesn't work if you do not include the ALIGN tag in the HTML for the table, though, so be sure to remember it. And if you want to change the color or the size of the words in each box of the table, then you have to do each box seperately. They each function independently. Check out the example that is "embedded" into this paragraph:

That was done with this HTML:

<table border=0 align="right">
<TR><TD><h3>
This is</h3></td></tr>
<TR><TD><h3>
the example,</h3></td></td>
<TR><TD><h3>
dig it?</h3></td></tr>
</table>

Also, in case you're wondering, the table was inserted in between the words "it" and "all" in the first line.

For a tutorial on using tables to help with the layout of your site, then click here.

PASSWORD FORMS

I do a bad job explaining this, so you might want to go here if this doesn't help you much.
Actually, just go now and save yourself the trouble.
Ohhh. Password forms. Never heard of 'em? You might not have, because I just made up that name now. I have no idea what they are technically called. It's them forms that don't show you what is being typed in, on the off-chance that some evil spy is peering over your shoulder unnoticed, ready to steal all that top-secret info you're dealing with. So, in order to avoid such a disastrous situation, use this:

Now that you've played with the form and inspected it to make sure it meets your standards, here is the top-secret HTML for the form:

And there you have it.

NO MORE UNDERLINED 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:

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.

META TAGS

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 META TAG:

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.

Tells search engines when your page should be deleted from it's directory.

Tells search engines the description of your page.

Tells them who made the page.

And you can put all these together by just lining them up:

THEM DAMN COPYRIGHT THINGS

The way people create all these great, official looking symbols is through ASCII. What exactly is ASCII? I don't know and I don't care:-)

Here is how to make this:®

Here is how to make this:™

There really isn't much to say about that stuff.

CHANGING THE FONT

To change the font put this around the selected text you want to change:

<FONT FACE="arial">This is the almighty arial font</FONT>

You can use a number of different fonts, just plug 'em in and see if it works. Ultimately, a font will only work if the visitors computer has the font stored on their own hard drive.

OPENING UP NEW WINDOWS

In order for the browser to launch a new window when a link is activated, add this in the HTML for a normal link:

TARGET="resource window"

The complete link would appear like this:

<A HREF="http://www.deadhorse.com"
TARGET="resource window">Click here</A>

Oh so simple.