Eve' header

Tips and Tricks

Here are some tips for getting the most out of HTML.

New Misc Tricks

Making links without the underline. This can confuse some, but if you want to do it (sometimes it improves the look of the page), here's how. You put the following code in your stylesheet file or in your actual html file:

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

Ever want to know how to get rid of that horrible white space on the top of your page when you are using an image? Well, this is how to get rid of that. In the body tag, just add a couple of extra things like this:

<body leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">

This will also allow you to get rid of the white space on the left side as well. The left and top margin are for IE, the height and width are for Netscape.

Trying to get cells in two different tables to line up so there is no gap between the images? Make sure the table tag is right next to another tag--no space or linebreak.

This is kind of a cheesy, but fun trick. You can have the home page load with certain affects. Just putting this META tag in the header will do a little circle closure deal:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

Layout
 You'll notice that normal HTML pages do not leave any margin space on the sides. That makes it a bit hard to read. There are complex ways to do this like specifying the width of a table or using the new tags to format the text in columns, etc., but I prefer a simpler way.

All I do is put all of my text of the page within the <BLOCKQUOTE> and </BLOCKQUOTE> tags. It is meant to format long quotes, so it indents the text on both sides. That's the perfect amount of space for me.

Lots of sites use a sidebar graphic along the left side as a background image. A problem that I ran into with this is that on different monitors and browser window sizes, the text of the page can run into this side border. To prevent this overlap, I created a two column table with a clear gif with the width of the bar in the first column.

    <TABLE>
    <TR>
    <TD><IMG SRC="clear.gif"></TD>
    </TR>

    <TR><TD>
    Text of page
    </TR></TD>
    </TABLE>

Getting images to fit without spaces between them is necessary at times. You cannot put spaces or line breaks in your code for this to be successful. Here are a few ways you can do it:
    <IMG SRC='image.gif'><!--
    --><IMG SRC='image.gif'>
    OR

    <IMG
    SRC='image.gif'><IMG
    SRC='image.gif'>
    OR

    <IMG SRC='image.gif'><IMG SRC='image.gif'>

Frames
 Frames may seem a bit more complicated than the rest of HTML. I think the targets get a bit confusing, so I'll give you a little help.
You can specify in which frame your pages show up by naming your own frames. Also, there are a few target tags that are preset and very helpful. These are:

    <a href="URL" target="_top"> --opens a new browser for the page
    <a href="URL" target="_self"> --opens the page in the frame it is called from
    <a href="URL" target="_parent"> --opens the page in the whole window in the present browser session.

You also do not have to specify the target in each href if you put the tag <BASE TARGET="frame name"> This acts as a default target, so you only need to specify if it is something different than that.

If you want to get fancy, you can have rows and columns of frames. For example, if you wanted them to look like this:

Top Part
Side
part		 Main
part
you can make two frames pages. It's like frames within frames. The first would define the rows like this:
    <FRAMESET ROWS="35%,*">
    <FRAME NAME="head" SRC="head.html" SCROLLING="AUTO">
    <FRAME NAME="bottom" SRC="bottom.html" SCROLLING="AUTO">
    </FRAMESET>
Then you would define the columns in the bottom.html file like this:
    <FRAMESET COLS="20%,*">
    <FRAME NAME="side" SRC="side.html" SCROLLING="AUTO">
    <FRAME NAME="main" SRC="main.html" SCROLLING="AUTO">
    </FRAMESET>

Javascript
There are lots of different ways to make images change when the user goes rolls over them with their mouse. I like to use the easiest one that fits right into the image tag. Here's the code:

    <A HREF="page.html" onmouseover="nlogin.src='images/nlogin2.jpg'; onmouseout="nlogin.src='images/nlogin1.jpg'"><IMG SRC="images/nlogin1.jpg" ALT="New Log-In" BORDER=0 ALIGN="TOP" NAME="nlogin" WIDTH=130 HEIGHT=33></A>

If you'd like a little message to show up instead of the location when the user's mouse travels over a link, you can put in a little extra in the anchor tag. Here's an example:

    <a href="page.html" onMouseOver="window.status='Go here. You'll like it!'; return true">My page</A>

File Stuff
To avoid having to always rename your main page index.html or have people type in the file name as part as a URL, you can create a soft link to the file. (Ex. Say, the first page I want people to see when they visit http://www.mydomain.com/ is really named hi.html. Instead of having them type in http://www.mydomain.com/hi.html, you can set hi.html to come up by just typing on http://www.mydomain.com.

Log into your UNIX account, go into your public_html directory, and type ln -s filename.html index.html at the command prompt.

Having the problems that you cannot view your web files even though you swear you put them in the right place? Make sure that all of your directories are executable and readable. To change the permissions of the directories in UNIX, type chmod ugo+xr directoryname at the command line.

Instead of having to go through a program or ftp from DOS (I'm a PC girl), you can ftp files through dragging and dropping them into your browser window. You do this by typing in a URL is this format in your web browser: ftp://username:password@location.home.edu/directory/subdirectory/. Then you go into your file manager/explorer window and drag the file into the browser window.

META Tag (Push-like)
Do you ever wonder when you get to those pages that reload for you a number of seconds later? Well, you can do that by using a META tag:

    <META HTTP-EQUIV="refresh" CONTENT=1>
The number you put after CONTENT is the number of seconds it will wait before refreshing the screen. An annoying thing I found about this is that it doesn't stop!

Another neat extension to this is that you can reload a particular page in a specifies number of seconds as well:

    <META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.page.com/">

If you had a desire to bounce back and forth between pages every certain number of seconds, you could use this tag to do so.
Warning: this only works with a Netscape browser as far as I know.

Audio
 This META tag can be used for starting up background sounds:

    <META HTTP-EQUIV="refresh" CONTENT="2; URL=mysound.wav">

Not many people do this, though. Another way to do it is:

    <bgsound src="audio/hopeless.mid">

The usual way of putting in sounds as a link that people can click is as an anchor:

    <a href="sound.wav">

The following tag will work to put audio on your page as well. It will start when the page is loaded. This tag also shows a little player on the page and the audio is endless:

    <EMBED SRC="sound/8.mid" WIDTH="145" HEIGHT="60" autostart="true" loop="true">

This one has a hidden audio player:

    <EMBED src="audio/hopeless.mid" autostart=true hidden= true>

Tags
 The "em" dash are the longer ones. To use them, I simply use two hyphens (--), but I came across a different way. You make a single pixel black gif and put this line in your HTML code:

    <IMG SRC="black.gif" ALIGN=ABSMIDDLE WIDTH=11 HEIGHT=1>
    Ex.: I like long dashes they're cool!

I also just recently found out that there is a special character code for this: &#151; This makes sense for all of the people who are used to using Alt-0151 in their favorite applications.

If you're sick of letting the browsers display the default font all of the time, you can specify the font people see your pages with. You do this by creating a list the desired fonts for viewing text. To do this, use the tag:

    <FONT FACE="the_font_you_like">

The only trick with this is that the user must have your specified font on their computer. You may specify multiple fonts in the order of preference to increase the probability that a person has one of them. Arial usually is a pretty common one.

You can manipulate the HR tag to create a box using <HR SIZE=25 WIDTH=25>.

You can change the kind of bullets that are shown with the <LI> tag: You use <LI TYPE=type_you_want> to achieve this. The different options are: circle, disk, square, 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman numerals), and i (lowercase Roman numerals).

You can also specify the font color of individual words by using the hex code or the word of the color.

    Ex: <FONT COLOR=#ffffff> or <FONT COLOR=white>