Transgender

Forum

















"Being" on the 'Net

Part III

(or, a Beginner's Guide to Creating Your Own Home Page)

By Stef Matthews
TGF Assistant Editor



Subscriber's can review Part I & Part II of this series.

We've got a basic template for a web page and we know that web pages are simply HTML files composed of various tags and graphics that you create, or liberate, to decorate your page. So let's talk some about the specifics of some tags that you'll use in almost every page that you create.

The Anchor Tag

The anchor tag provides a way for the viewers of your page to navigate to other pages (mostly) and when your document is displayed, this is what they would click on. The anchor tag is <a...> and it's the three dots that you need to replace with where you want the viewer to go.

Here's how I entered the anchor to take you to Part II of this series up in the title block:

<a href="being2.html">Part II</a>

So what is that line of gobility-gook? Well the anchor tag is opened and closed and whatever is typed between the open and close is what the viewer can click on to get their browser to move there. In this case, it is the words "Part II".

There are actually dozens of anchors on the page you are reading right now! The ad at the top is an anchor, the buttons on left are all anchors, as well as my picture up above. All of these things are clickable and will take you some place else. But don't go there yet! I was trying to make the point that what you put between the anchor doesn't have to be text, it can also be a graphic and I'll show you how to do that when I talk about graphics. Just remember, when the time comes, that you can put graphics in your anchors.

The option keyword href= tells the browser where to go. In this case a HTML document named being2.html. Pretty straight forward, huh? It gets a little more complicated when the file you want to jump to is in a different directory, or on a different server, but whatever you put between the quotes is where the browser will jump to assuming it can find it.

href= also has a neat option that allows you make it easy for people to eMail you. If you were to click on my name in the byline above, your browser would activate your eMail client software with my eMail address and a subject already filled in and you could send me an eMail right from this page. Let's look at how I did this:

<a href="mailto:stef@tgforum.com?subject=Being 3 Comment">Stef Matthews</a>

Notice that in the href= quote's I said mailto:stef@tgforum.com this is what tells your eMail software who to send the message to. Also note the ?subject=. I was able to fill out the subject that I wanted in the eMail and saved the person some typing too. The subject clause optional and if you don't use the ?subject=... then the user will fill in their own subject.

Of course, I could have put a cute little graphic between the open and close anchors. Say a cute little flying envelope and you would have gotten the idea that if you clicked it you could eMail me. But, I just like seeing my name in print and it displays faster on slower connections than loading a graphic.

Speaking of Graphics

If you have played at all with any of drawing or painting programs out there you know there about a gazillion different file formats around. Well, on the 'Net there are two that are universally supported. They are JPG and GIF. Both of this formats have been around for a long time (in the fast paced world of computers) and all of the graphics you see here on TG Forum are one of these two types, we use them both. How do we decide when we create a graphic what to save it as? It all depends. That's really not a visage answer, each format has different capabilites.

JPG Graphic Files

Pronounced jay-peg is probably the format you'll see the most here on TGF. It is capable of storing 16 million some odd colors and has a built-in compression scheme. This means it is a perfect format for photographs and the compression scheme makes the files smaller than some other formats and therefore will transfer over the 'Net faster.

Depending upon the software that you use to scan, edit and save your pictures, the software often allows you to control compression level. The higher compression level the smaller the file but less colors are saved in the file and the result can look blocky. The lower the compression level, the bigger the resulting file will be, but the colors and definition is almost perfect to the original scan. Generally select for the middle of the road and you'll be happy. You'll end up with a graphic that downloads fairly fast and looks fairly nice.

Some software allows you to also specify the DPI or LPI of JPG images. I won't get too technical on this but keep it from 100 to 200 for computer screen and 300 to 600 from printing images. The computer screen you are looking at now (mostly likely) displays at 72lpi, which means if I save an image at 600lpi the file will be unnecessarily big for simple viewing on a monitor. If I save an image under 100lpi and somebody prints it we have another blocky looking picture. So a good middle ground is 200lpi as it is a compromise between quality and size. Remember what I said in Part I, nobody is going to wait to see a picture that takes forever to download!

GIF Graphic Files

Pronounced jif, has some special features that make it more suitable to use in some cases. First off, GIF files can only store 256 different colors, so this isn't really suitable to a large picture. But for really small pictures, it passes fine. The unique thing about the GIF format is their ability to do animations (like the little flying envelope I mentioned earlier) and they also allow you specify a transparent color. That means you can choose a color that won't display but will allow the background (or background color) to show through. This can make for some very neat special effects.

I'm sure you've all seen some animated graphics before, we've used a few here on TGF from time to time. Generally you need special software to create these and these basically stores a few (or dozens) of different pictures and flashes them on the screen in repetition to make it appear animated. For this reason, the files can get rather large.

There is some compression in GIF files but you don't have control over it, it's handled automatically and there are no options.

Show Me How Already!

Okay, be patient! If this stuff was really easy I wouldn't be writing a series! On this page, in the title block, appears my glowing face. This photo was taken with a digital camera, downloaded onto my computer and slightly touched up. I masked out (removed) the background (which was only my dining room) then added the "paper-looking" backdrop, put a little drop shadow behind me and then brightened up the red a bit (the flash washed out the rose colors of my face!) Though this was taken with a digital camera, it could have been as easily taken with the usual camera and then scanned into the computer, and then I could have done the touch ups. But, to get that picture to display on your computer screen, I had to use the following HTML code:

<img src="../art/authors/stef278.jpg" width=300 height=399 border=0 align="right">

All of those options allow me to (almost) precisely define how I want the image to look on the page. Let's look at them one by one:

src="" As you see the file name is stef278 and it is a JPG file. The stuff before the filename tells the browser to get the picture from a different directory than the directory this HTML file is stored in. Had the picture been saved in the same directory, I could have left that stuff off. The case of the file name on server must match the case of the name in this line. The Internet is pretty literate about those things. If I'd said "Stef278.jpg" you wouldn't find the picture, just an empty hole on the page. The convention is to keep everything lowercase!

width= & height= This is the size, in pixels, that this image is to be displayed at. It is always important to include these! If you don't your image will still display, but it will take longer. Why? Because the first thing a browser sees is your HTML page and it begins laying out the page in memory. It comes across an <img> tag so it knows it has to keep room for the graphic. After the page is laid out by the browser in memory, it displays what has "come across" so far, then it requests the graphics files from the server and they are sent, one by one. When the graphic finally arrives the browser says, "Now I have to re-lay out this page because this picture is a different size than I expected." So, it goes through the layout process again. If you have lot's of "un-sized" graphics on a page, it may have to do the layout many, many times. Here at TGF we always specify the width and height of the graphics you see.

Another thing you can do with the width & height is to make them different than the size of the graphic your are displaying. I personally don't recommend this because you must keep the aspect ratio or the picture will end up squashed or stretched if you miscalculate. I'm sure you've all seen images where the width and height didn't match! If you want to "shrink" a graphic, for a thumbnail let's say, make another image of the size you want. Why send a big old file over for a thumbnail, when a littler (read smaller file size) would transfer more quickly?

border= I set this option to zero as I like to have the border of my choosing, not the browsers. This is the number of pixels that the browser will use to draw a rectangle around your graphic. You may play with different values, in different circumstances and decide you like a border.

align= This option has a limited number of choices: left, right, top, middle, or bottom. I choose for this graphic to appear on the right of this page, so that's what I used. If you leave this option off, then the browser does what it wants, which rarely is good looking. Again, play with the different options to achieve the look you want.

There dozens of options for the <img> tag. If I knew them all, and tried to explain them, we would both fall asleep. I'll leave you to investigate them on your own.

Well my budding web-mistresses, in the next installment I'll talk you through some of the options for text. How to change the style, color and size. Until then, I remain...

TGF's Home Page