MaraHTML

¤ Tisha Look's HTML Tutorial ¤

How To Add Graphics

While some people are content to have colorless, black-text-on-white-background pages, most people want some color so they can express themselves. This can be done by changing the color of your text and/or background or you can add some images. We're going to cover images in this section.

Before You Upload:
Most people aren't aware that all images you put on your web page must first be downloaded to a person's computer before they can see them. Let me repeat that: All images on your website must first be downloaded to a person's computer before they can see them. Luckily, the web browser does this automatically. However, it's good to remember since pages with a lot of graphics can take a long time to load. So if you choose to put a lot of images on your page, be aware that some people - especially those with slower internet connections - may decide to go elsewhere instead of waiting to view your page.

Uploading Images:
One of the features of Marasites is the image upload option. This comes in handy since most people have a hard time finding an image hosting service that's both free and reliable. Uploaded images can be used for both your page background or by themselves (i.e. a banner, logo or a picture of your dog). Once you've found the image you'd like to use, simply follow these instructions to upload it:

Go to the MaraUploads site and login using your Marapets login information.
At the top of the next page is a box that says Upload Images. Click the first Browse button and find the image you want to upload on your computer's hard drive. Then click the Upload button.
When the image has successfully uploaded, you'll be taken back to the Image Upload page. Under the Upload Images box there should now be a new table that lists your uploaded images.

Adding An Image To Your Page:
Now that you've got your image uploaded, you're going to want to use it in your site, right? We'll first cover how to use the image by itself. Then, in the next section, I'll explain how to use it as your page's background.

On the Image Upload page, go to the table that lists all your uploaded images.
Find the image you want to use and right-click on the name. From the submenu that pops up, select Copy Shortcut.
Go to the page where you want to add your image and add the following:
<img src="paste shortcut here">
Be sure to replace the "paste shortcut here" with the shortcut you copied in the previous step. When you're done, your link should look something like this:
<img src="http://marauploads.com/tishalook/image.jpg">
Once you've added the image, be sure to save your page so you can go look at it.

Adding An Image To Your Signature:
Since the code for adding an image to your signature is different from HTML, I opted to put this in a separate section.

Follow the directions above on how to upload an image and get the URL for it.
Go to "Forums"
Click the link that says "Update Forum Signature"
Add the image URL so it looks like this:
[img]http://marauploads.com/tishalook/image.jpg[/img]
When you're done click the "Update Forum Signature" button and you're all set!

Adding An Image As A Background:
Let's say you'd like to add a repeating image as your background. Colors are just too boring for you - you need to creatively express yourself! Not a problem! I completely understand since this Marasite has a pretty busy background itself. I don't know what my fascination is with purple, grids or swirls but it seems to work. Chances are you'll want something different for yourself, and that's just dandy. Enough of my rambling, let me show you how to do it.

First, follow the steps listed above to copy the shortcut for your image.
Next, go to the page where you want to add your background image and add the following:
<body background="paste shortcut here">
Be sure to replace the "paste shortcut here" with the shortcut you copied in the previous step. When you're done, your code should look something like this:
<body background="http://marauploads.com/tishalook/image.jpg">
If you don't want your background to "move" while people are scrolling down the page, that means you want the background to be "fixed". For example, the background on my entire Marasite is fixed. To accomplish this, you'll need to add information to the BODY tag as follows:
<body background="http://marauploads.com/tishalook/image.jpg" bgproperties="fixed">
Once you've added the background, be sure to save your page so you can go look at it.