IMAGE URL HELP TUTORIAL

html can look very daunting to many people, and urls look very confusing. if you're having trouble figuring out what the "url of your uploaded tsu-chan" is, here's a quick tutorial to help you.

a url is pretty much like a street address for your web files. we'll say for example you have the username "joesmiley45" on the free server brinkster, and you want to put your adopted tsu-chan on your adoptions page.

when you log into your account, you have the option of making folders to upload your images into. folders are nice because you can keep things neat and easy to find in your directories, but they can get confusing if you have a lot of them.

let's say you have a folder for all your web site images called "images". you uploaded your tsu-chan image into this folder and named it "cutiewings.gif". you have an adoptions page called "adoptions.html" in your main directory (the first thing you see when you log into your account) that you want to put the tsu-chan on, so you open up the page to edit it, copy the html from tsubasa to put the tsu-chan on your site, and now you realize you have to figure out what the url of your uploaded tsu-chan is.

it's actually pretty easy - all you have to do is start by writing out the address to your main site, minus any page names if you normally put one in. for example, you would type "http://www23.brinkster.com/~joesmiley45/". that's your site's "street address" on the internet. right now that link is just looking directly in the front door of your site. now you have to tell it what "room" your image is living in. since you saved your image in the folder called "images", you need to tell the browser that what it's looking for is in there. so add "images/" to the end of that first url section.

ok, so now it's looking through your images folder, but you still have to tell it what it's going to display. this is where you tell it the filename of your tsu-chan (the name you saved it as). so all you have left to do is add "cutiewings.gif" to the end of your url and you're done. here's the full url example shown as an image html tag:

<img src="http://www23.brinkster.com/~joesmiley45/images/cutiewings.gif">

if you saved your image in a new subfolder within the images folder (say a folder called "adoptions"), then your url would read:

<img src="http://www23.brinkster.com/~joesmiley45/images/adoptions/cutiewings.gif">

if it helps you, try to think of it as telling the browser which doors to go through to get to your files - think of your folders as rooms or apartments for your files. think of the "/" marks as the command "open the door to..." - so the above url would be telling the browser "go to http://www23.brinkster.com/~joesmiley45, open the door to images, open the door to adoptions, and find the file cutiewings.gif living there."

it's always best to check and make sure you have the right url written before saving and uploading a page. i recommend opening a new browser window, typing in the url for your tsu-chan, make sure it's correct (the image will show up instead of a 404 error page), and then copy and paste directly from the browser address bar into your html file. remember that it is always best to never put spaces in the names of any of your folders or files. if you want a space, use a - or an _ instead. it's also a good idea to put any urls in "quotes" in your HTML tags, especially if you did save any files with spaces in them.

here are two basic fill-in formulas for your url if you are more comfortable with the copy-and-paste method. replace the parts in BOLD for either copy-and-paste url that applies to you. (remember if your tsu-chan is saved in a folder that is inside another folder to add as many more FOLDERNAME/'s as required before the IMAGE.gif.)

my image is not saved in a folder:
http://www.YOURHOST.com/~YOURUSERNAME/IMAGE.gif

my image is saved in a separate folder from my page:
http://www.YOURHOST.com/~YOURUSERNAME/FOLDERNAME/IMAGE.gif

 

 

or close window and return to site

 

tsubasa : things with wings is © 2001-2002 by . all rights reserved. version 2.0 features character created for bishoujo senshi sailormoon created by takeuchi naoko.