For your eyes only

    New Section: Support & Tips

    This is a new section we created especially for all our visitors that are new to the www.
    Many of you, indeed, ask us how to save our graphics, how to use them on their sites, etc.
    Here you will find the answers to all these questions. And if you still have some doubts you can always contact us with your questions at this e-mail address:

    ball.gifHow to save our graphics
    ball.gifHow to use our graphics on your home-page UPDATED
    ball.gif Users' section: is it for free? Yes!
    ball.gifHow to customize our blank buttons
    ball.gifHow to upload them
    ball.gifHow to make graphics like ours...
    ball.gifHow to create a link to 4YEO
    ball.gifA few more tips
    ball.gifChange image On-Mouse over link
    ball.gif Meta-tags
    new.gifball.gifHow to Remove the Underline in Links

    Check back soon for our GRAPHIC TUTORIALS! :)))


    save images

    ball.gifHow to save our graphics:
    This is the first step to be able to use our graphics: when you see something that you like, point your mouse over it and right-click the item (MAC users: click and hold). A menu comes out, and you have to choose "Save image as..." (or "Save background as..." in case of a background). When you click on it, a window pops out where you have the chance to choose the folder on your computer where you want the image to be stored, and also the chance to change name of the image itself. You now have on your computer the image taken from the web-site you're visiting (4YEO, hopefully!). Note that ALL our graphics are optimized in order to be very good-looking ; ) but especially very, very light in weight!

    go up



    ball.gifHow to use our graphics on your home-page:
    Once you saved the image on your computer, you can use it on your page to create something particular. Open the program you usually use to edit/make your web page and insert the image where you want. Some of these programs will automatically write all the necessary information about the image, some others require that you do it. Here's how to: the tag to insert an image is this:
    <IMG SRC="?.GIF" HEIGHT="?" WIDTH="?" BORDER="?" ALT="?">
    Img Src (image source) is the command that fetches the image on your computer (and on your server). Be sure to give the exact path of the image (i.e., if you store your images in a specified folder - images, for example - you will have to write IMG SRC="IMAGES/?.GIF"). Naturally, you have to write the name of the image where you see a ?, and also, if the image is a JPG, change the extension after the dot.
    Heigth and Width are the information that you should always write in order to shorten downloading time for your visitors: in this way their browsers already know how big the image is.
    Border is the colored border that you might decide to have around the image. It is always better to put a 0 (zero) value unless you are using a photograph. Borders are not very nice around icons and other similar images, believe me!
    Finally, ALT (alternative text) gives you the chance to write something, a word or a sentence, "underneath" the image. This might be very helpful if one of your visitors decides not to load images (so he will instead "read" what the image is about), but also for all the other users, who can read what you wrote while they are waiting for the image to load. For example, if the image you have on your page is a smiling face, you can write "smile!". This word will also show up when you pass your mouse over it.
    Try here:


    Please, note that our images already are optmized to be very good-looking and also very very light in weight: in other words, you do not need to re-edit them in any way! The result would be ruining our graphics, and having a not-so-fine image on your site...
    Ok, now you are ready to use our graphics to create a unique web-page! Have fun!!!

    NEW: how to insert our backgrounds on your pages:
    in the BODY tag insert this
    (this is an example)
    <body bgcolor="#000000" text="#FFFFFF" background="IMG/BG.GIF">
    this tag refers to the page your are seeing just now.
    calls an image that will appear in your background repeated.
    so you have to write background="x.gif"
    where x stands for the exact url of the image you want.
    be sure the background image is stored on yor computer and not linked directly from another site/server, as that would infringe copyright and steal bandwidth!
    We hope that helps!

    go up



    ball.gifUsers' Section: is it for free?
    Some of you still ask us how to be part of our Users' Section. It is very easy: what we call Users' Section is the part of 4YEO devoted only to the requests we get through e-mails or on our guestbook from our visitors, like you. Unfortunately we get so many requests, that only a few can actually be satisfied, but for this reason we choose the most popular requests, or the most original. In this way we are sure that many, many people will enjoy the creations. So, are you looking for some really special graphics? Just let us know! Write directly at   and then check back often!
    Please, keep in mind that this is a free service, so we ask you in exchange to link back to our site - and we will not consider requests with an invalid e-mail address. One last thing, before asking for something, check the site: sometimes people ask for items that are already here!

    ps: requests that are made by people who do not know the basics of politeness will be ignored. remember this is a COMPLETELY free service!

    go up



    ball.gifHow to customize our blank buttons
    Some of the graphics you will find on 4YEO consist of buttons and banners that are blank, so that you can decide what to write on them and obtain in this way a very particular button that nobody else has (you can use them also to make your awards).
    When you have downloaded one of these buttons, open the program you ususally use to edit or create graphics (see here to find some good ones). Open the image you want to edit. Now you are ready to "write" on the button. Choose the text tool that allows you to write on images; a window opens and you can write your text : choose the font, size and color you prefer. You might find difficult the first times to match the size of the button with that of your words, but soon it will be easy, I assure you.
    Now press OK and see the result. You can still move the word you typed over the button, to center it so that it fits perfectly. Do you like what you have done? Just press save: you now have your customized button. You want an example? (In this case I used Arial, normal, 30 points)


    This is one of the buttons that you find on 4YEO site and I wrote something on it.
    Do you see how easy it is?
    Go on now, have fun!

    go up


    upload on the www

    ball.gifHow to upload the graphics onto your server:
    This point is very important: when you think that your page is ready, you have to upload both the .htm/html files and the .gif/jpg files to your server. We advice you to create a folder "images" where to store your gifs and jpegs. Open the program you usually use to upload your stuff, and be sure to upload the files at the right place, in order to avoid broken images!
    We want to emphasize this point since too many people pretend they do not know the big damage they make when, instead of uploading an image on their server, they steal our bandwidth (or that of any other site). And there is absolutely no reason to do it, since our graphics are really not heavy!

    4YEO is a completely free service, but we DO pay for our huge space on the server. If you steal our bandwidth we will either have to make you pay for it - or close down 4YEO.
    Stealing bandwidth is an uncivilized act of selfishness. Do not do it, please!

    go up


    create with us!

    ball.gifHow to make graphics like ours...
    And now, for those of you who asked us what programs our graphic designer uses to create such unique effects, here's a list of programs that every good graphic and web designer should have. Click on the program that interests you to get more info about it.

    Dreamweaver | Flash 8 Professional | Effect3D Studio

    go up



    ball.gifHow to create a link to 4YEO
    Finally, when your page is ready, please, give us credits for our work! We need your support to let more people know us on internet. This is all we ask: a link back to us! Moreover, once you have done this, let us know writing to because we will add a link to your web page in our friends' list!
    To set a link back to 4YEO site you can use one of the the following codes:

<a href="" target="4yeo">
<img src="4yeosm.gif" border="0" alt="4YEO"></a>
Here's the result:

Text-only sample code
Graphics by <a href="" target="4yeo"> 4YEO</a>
Here's the result:

Graphics by 4YEO

More linking options are displayed on at link-to-us.
...Thank you for your support!

go up


do you need more tips?!

ball.gifA few more tips
Now, just a few more general tips to make your sites good-looking.
These are just simple things, but, alas, they are ignored by too many web-masters.

I've noticed that many of you ignore the fact that you have the chance to give a title to the .html document.
Do you see the title on top of this page? Where you read "Support: how to use our graphics"?
Well, that's the title of the page. I browse many sites that have empty titles, or even worse, there is written "index.html". The title is not only the first impact on your visitors, but also what a bookmark will show, besides the url. Who would remember your page if the bookmark says "index", "home page", or nothing at all? Remember to write nice impressive titles that will catch people's attention.
The correct tag to do so is:
<TITLE>write a nice title here!</TITLE>
This goes after the <HEAD>, on top of the document.

Then, remember not to alter the dimensions of an image. Making it bigger or smaller by simply changing its width and height on your html document completely ruins the graphic. It becomes blurry and really not nice to look at. You should keep the original dimensions in order to have beautiful images.

Try to be "consistent" in your pages. Some people have fun using 20 different backgrounds and sets in each single page of their site. I can understand that it might be funny to do so, but aesthetically it is not nice to see.
It is instead preferable to choose one single web-theme that will represent your page, and maintain that one in all the pages that constitute your site; or at least, you can try using similar colors and shades of a single color if you still want to use diverse backgrounds.
This is certainly the best way to build a recognizable site that visitors will remember after a visit.

Try to limit the use of frames. Pages with frames on every side are not useful nor nice to see.
One frame for the menu should be more than enough, keeping all the contents in one main window.
When you build your site, always keep in mind that your average visitor wants to be informed and amused; he certainly does not want to waste time trying to figure out HOW your site works ; )

Finally, something obvious that too many times is ignored:
we all make home pages to show people who we are, what we do, what we like and dislike. Just like we try to be original in real life, let's try to do the same on the www. Do not steal or copy graphics without permission, and when we can take something for free, let's give credits for that work!
Moreover, create something unique and special, without copying ideas from other people. That will certainly give you more satisfaction, and visitors will appreciate much more!

go up



ball.gifOn-Mouse over link
Have fun! Improve your page with tiny nifty effects, just like this very simple javascript
that changes the image of a link:
you first need two images: one image for the regular display (the "Off" image) and one image for the mouseover (the "On" image). Most mouseovers are used in conjunction with small images, since you want the effect to be immediate you won't want to use large images that force your visitors to wait. For this reason mouseovers tend to be for small .gif images of text or buttons.
Remember it's important to use images that are the same size because the image that appears on the mouseover will size itself to the image that appears normally.

To write a mouseover, you begin by inserting the image you want displayed under normal circumstance (what I think of as the "Off" image) with a basic image tag.
In the following example I'm going to describe how to make a blue happy face ("1b.gif") turn into a red happy face ("1r.gif") whenever someone puts their cursor over the face.

Since I want the blue happy face to be the "Off" image I'll begin by writing:
<img src="1b.gif" alt="[Happy Face]">
The first step in transforming the standard image tag like the one above into a mouseover tag is to give it a name. You need to name the image so that when you write the code for the mouseover you'll have some way of referring to it without confusion. To do this, insert the NAME attribute into the IMG tag using a simple name (i.e., avoid using spaces or punctuation in your names). I'll call my happy face image by the name "face":
<img src="blueface.gif" name="face" alt="[Happy Face]">

Next you'll need to put the image inside a normal <a href> tag just as you would for any other kind of image link. Let's use 4YEO's home page:
<a href=""><img src="1b.gif" name="face" alt="[Happy Face]"></a>
So far it's pretty simple isn't it?

The only thing left to do is to add two attribute phrases to the
<a href> tag and the static image becomes a changeling.
The two attributes you'll need are OnMouseOver and OnMouseOut. Set the OnMouseOver to point at the image you want to use when a mouse goes over it and set OnMouseOut to the image users see normally.
For my example the code would be:
<a href="" onMouseOver="document.face.src='1r.gif';" onMouseOut="document.face.src='1b.gif';"> <img src="blueface.gif" name="face" alt="[Happy Face]"> </a>

Want to see an example now?
[Happy Face]

go up



ball.gif Meta-tags
Once you have created your home page, you have inserted many nice graphics, you have uploaded everything to your own server,
it's time to think about getting visitors to yor site! Well if you want your site to be found on the web ruleno. 1 is: use meta-tags!
Meta-tags are special hidden tags that most search engines read in order to categorize a website.
The most useful meta tags that you will use are description and keywords tags.
The description tag tells a search engine to display your predetermined text, typically a description of your site or page.
The keywords tag provides words for a search engine to associate with your page in order to seek it out among the thousands of other similar pages.
Now let's take a look at how to implement description and keywords tags:this is what meta-tags should look like in your page:

<HEAD> <TITLE>Cyber Cats and Cyber Dogs on Internet</TITLE>
<META name="description" content="Everything you wanted to know about Cyber Cats and Cyber Dogs on the Web.">
<META name="keywords" content="cyber cats, cyber dogs, animals & internet, cyber pets"> </HEAD>

As a result your listing will look something like this, in search engines that support the descriptions tag:

Cyber Cats and Cyber Dogs on Internet
Everything you wanted to know about Cats and Dogs on the Web.

Now, if someone searches on "cyber cats", "cyber dogs", "animals & internet", or "cyber pets", your site should come up within a search engines results. Of course, some people try to cheat and repeat 100 times the same word in the keywords, hoping that helps to get a higher position. Well, nothing could be farther from truth! Search engines are "intelligent" computers and automatically sned such sites at the end of the list.
Be sure to include only and all the words that deal with your page, so that you'll be sure to get a high ranking position!

Ok, that's all folks! We hope these few tips helped you a bit.
If there is anything more you need, remember we are here to help you!

go up



ball.gifRemove the Underline in Links
If you want to remove the underline in links,
you can use this style definition in the HEAD section of your HTML document:

go up


All site graphics © 1996-2007 by IM - Site made with Dreamweaver