Images
The first thing you need to do in order to put pictures on your website is to create a folder to store your images in. If you're a beginner the best place for your folder is probably on your desktop because it's so easy to find.
1.To create a folder go to your desktop and right click on an open area.
2. Scroll down to 'New'.
3. Left click 'Folder'.
4. Once your folder appears on your desktop you will notice that the folder
name is highlighted. This is giving you the opportunity to name your folder.
It is always best to give your folder a very memorable name that accurately describes it's contents. If you are creating a folder for your Avon website you could name
the folder 'Avon images'. You get the the idea. :)
5. Type in the name you want to give to your newly created folder.
6. Hit Enter to complete the process.
Now you're ready to find some graphics for your website. Google 'free graphics' or 'holiday graphics' ... whatever it is you're looking for. You can also check out my LINKS section which has a nice selection of graphics website links.
When you find a picture you like you'll need to save it in your newly created folder. To save a picture from a Web page to your computer, just hover your mouse over the picture
and 'Right mouse click' to display the menu. Then 'Left Click' on 'Save image as...'. Use the drop-down window to
navigate to the desktop. When you see the name of your folder 'left click' it twice to open the folder and then click on
'Save'.
It's time to upload your pictures. In order for your pictures to be seen on the Web your images must be moved from your computer to a Web server. This is called uploading.
Photobucket offers image hosting. It's easy to use and best of all it's FREE! :) Click here PHOTOBUCKET to sign up for a free account.
After your account is activated and you've logged in you'll see a 'BROWSE' button. Click that button and locate your desktop folder by using the dropdown menu. Choose 'desktop'. When you see the name of your folder 'left click' it twice to open the folder.
Choose the image you would like to upload and 'left click' it. You will then see the image name in the box next to the 'browse' button. Now you'll need to click 'upload'. The upload may take a few moments, depending on your computer speed.
After the image is uploaded you will see a tiny thumbnail of the image right below the 'upload' button. You will see four code choices. For your Avon website you'll need to choose the entire DIRECT LINK (second code), as shown in the photo below. 'Left click' the code and it will automatically copy it for you.
Let's take a moment to talk about The ALT Attribute. Take a look at the code below.
<img src="http://i67.photobucket.com/albums/h292/carvia/avon%20website/cat-1.gif"
alt="cat">
See the part of the code that has the blue alt (alternative) attribute? The alt attribute is used to give a short description of your picture. This gives viewers who do not see your
image some information about the missing image. You should always provide the alt text of an image whenever possible. Just substitute cat with your own image information.
Wanna give it a try? Okay - just hover your mouse over my cat picture. See what happens? Neat, huh? :)
Now you know how to create a folder, save your images to your folder and upload your images to a server.
We're ready to insert an image into our website.
* PLEASE NOTE - If you're using Photobucket for your Avon website you must substitute your own information in place of mine. Just insert your Photobucket DIRECT LINK (second code) in place of my blue text.
How to align an image to the left, center or right -
(REMEMBER ...
you must insert your OWN filename and ALT description where you see the color blue)
<div align="left"><img src="your filename.gif (or .jpg)" border="0" alt="cat"></div>
<div align="center"><img src="your filename.gif (or .jpg)" border="0" alt="cat"></div>
<div align="right"><img src="your filename.gif (or .jpg)" border="0" alt="cat"></div>
If you don't upload and use your own images and tags you will see a red x where the image should be. Make sure your image is uploaded. If it is uploaded and you still see a red x then I recommend that you check your HTML code for possible errors.
Border Around Your Image
Maybe you'd like to jazz up your images with a border. There may also be times when you prefer not to have a border.
The BORDER attribute allows us to add or remove the border. All you have to do is make a few changes in the code.
Notice how our little kitties up above do not have a border? Look closely at the code above. See the border="0" portion of our code?
The BORDER is defined by using numbers - zero being no border. Higher numbers will make the border larger.
Look closely at the code below. See the number 3? That's how you change the thickness of your border. The smaller the number, the thinner the border.
<div align="center"><img src="your filename.gif (or .jpg)" STYLE="BORDER: solid 3px #0276FD" alt="cat"></div>
Now check out the code below. I've changed the number 3 to a number 6.
That's how you change the thickness of your border. The larger the number, the thicker the border.
I think we're now ready to have some fun! Maybe you'd like to add a little color ... or even change the style of your border.
I'm going to show you how to do both.
Look again at the code above. To add color to your border all you have to do is change my #0276FD color code to any color you choose.
Check out this site for a large selection of color codes. Just copy and paste the color code you like and replace it with the numbers in my code.
COLOR CODES
Below you will find several different border styles to choose from. Just copy and paste my code into your website - once again inserting your OWN filename where you see the color blue and changing my border color code #0276FD to the color of your choice. And don't forget that you can change the thickness of your border by changing my number 3 to any number you like.
Width and Height Attributes
There may be times when your images look a little distorted. The browser will stretch (or squash) your images if the WIDTH and HEIGHT values are not correct. Avon doesn't give us much space to edit our websites. Sometimes when you insert an image into that tiny space it comes out looking like a carnival mirror. Especially if the image is really large.
That's when the HEIGHT and WIDTH command comes in handy. It's really easy to find out the size of your image. This is how -
In Netscape, right click on the image.
MAC users click and hold. Choose the menu item, "Show Image". The height and width will be in the title bar.
In Internet Explorer, right click on the image. MAC users should click and hold.
Choose the menu item, "Properties". You'll see the height and width in the box that pops up.
Go ahead and give it a try. 'RIGHT CLICK" on the little cat above. See where it says 'properties' on the bottom?
Right click that and there are the dimensions of my picture. Those are the numbers that you need to include in the
WIDTH and HEIGHT portion of your code.
You may be wondering, what is the point of this tag. Well, there are two different reasons that this tag is important.
The first reason is that, if the height and width are included in the HTML, the page will load faster.
This is because your browser already knows the picture's dimensions and does not have to find them itself.
The second reason is that you are able to change the pictures dimensions
from what they really are, into what you want them to be. For example, there is a picture that is 50x50,
that you want to reduce to 25x25, all you need to do is include the width and height and set them to 25.
Here is an example of how your image can look without the proper HEIGHT and WIDTH.
<div align="center"><img src="your filename.gif (or .jpg)" Height="125" Width="50" border="0" alt="cat"></div>
Now let's put our poor little kitty back the way he is supposed to be. :)
<div align="center"><img src="your filename.gif (or .jpg)" Width="65" Height="83" border="0" alt="cat"></div>
Once again, all you have to do is insert your OWN filename where you see the color blue, change the border to your liking and change my WIDTH and HEIGHT to the dimensions of YOUR image. And don't forget to change my ALT attribute. Just substitute cat with your own image information.
Top of Page
visitors are currently browsing this site
