Ok, let's get put that cool new logo on your website. Open up HomeSite and then open the file "upperleft.inc.php" which is in the "includes" folder of the website. This is the code:
The first section tells the computer to add a hyperlink to an image; in this case, the logo. The "<a href=" tells the computer to hyperlink to the file "index.php". This way when a visitor clicks on the logo, they will be taken directly to the main index page. The ">" character tells the computer to start executing the tag.
The next section tells the computer about the logo. The tag could be changed by directly typing, however, if you are using HomeSite it's easier to let the computer do the work.
Place cursor over the word "img" and right click on the mouse. Choose the option "Edit Current Tag".
The "Source" box tells the computer where to find the image to display from the location of the file you are working on. The folder button at the end of the box can navigate you to the file so you don't have to type the correct path.
If this wasn't an includes file, a portion of the image would display in the larger box. Since it is an includes file, the path to the file is written as if it were in the main directory. This is done so the image will have the correct path when it is included in the page that is being displayed.
The "Alt. Text" box tells the computer what to say when a visitor moves their mouse over the image. This information is helpful to visitors who have difficulty seeing and need special software to read a webpage out loud.
The "Width" and "Height" section tells the computer how big to display the picture. An image that is 400x400 can be displayed in a 100x100 area. The visitors will still download the whole larger image, slowing down the time it takes for a webpage to load. The calculator button can calculate the current size of the picture when it can see the image directly. If you want the system to recalculate the dimensions of the image, remove the "includes/" from the "Source" box. Just make sure to replace them or to see the image when it is included into a webpage.
The "HSpace" and "VSpace" sections tell the computer how much spacing is needed around the image.
The "Border" box tells the computer the size of border around the image. The number 1 is 1 point thick and the number 5 would be 5 points thick. We don't want a border around this image because it wouldn't look good with the transparency on the logo.
The "Align" box tells the computer where to place the image. If the image should be on the left, use the drop-down to choose the word left. . If it should be the right, use the drop-down to choose the word right, and so on.
After all of the changes have been made click on the ok button and all of the changes made will be transferred to the tag.
The last section "</a>" closes or ends the hyperlink. Anytime a tag that starts with "</" it is the end of a tag. Without this, the computer would hyperlink everything until it found a tag to stop. Always close a tag, it prevents problems later.
Upload the new "logo" to the "images" folder on the web server and the "upperleft.inc.php" file to the "includes" folder on the web server. After the files have been uploaded, open and new browser window and look at your website. It should look something like this:
