How to use a MaxPreps logo on your website.

To place a MaxPreps Logo on your website follow these step-by-step instructions.

1. Right Click a MaxPreps logo to the right and choose "Save Picture As" (IE) or "Save Image As" (FF) from the context menu.

Figure 1

2. You will be prompted to save the image somewhere on your hard drive. Select the location where you are storing all the other images for your website. For example; most website images and graphics are kept in a folder called "images" or "img". This folder is typically found on the root of your website file structure. Figure 1. is a screen shot taken from Adobe DreamWeaver and shows a typical folder setup for a website. You can see that the root folder in this example is located at c:\myWebsite\. The "images" folder for this website is stored inside of the "myWebsite" folder and all the website's images and graphics should be kept here. In this case the path to this folder is c:\myWebsite\images\. Your actual path will most likely be different.

3. Once you have the image that you want in your website's image folder you can then create a link to it in your HTML document. You must use the <img> (Image) tag to link an image or graphic to your web page. The syntax should look something like this: <img src="/images/mplogo.jpg">. Notice that the path to the image described in the "src" attribute of the tag does not include the "myWebsite" folder. This is because the computer already knows that our files are kept in the myWebsite folder, so we don't have to include that folders name in the path. This kind of linking is called relative linking. You can also create links to images and graphics like this: <img src="http://www.myWebsite.com/images/mplogo.jpg">. Notice that in this example we included the name of our website, but still made no direct reference to the "myWebsite" folder. For the same reasons as already mentioned the computer already knows that the image folder is inside the "myWebsite" folder. The "myWebsite" folder is referred to as the root in our example site. Computers that serve websites to the world know what the root folder of a particular website is and therefore you do not need to include that folder in any paths to pages, images, or graphics you are making reference to.

When you include the entire name of a website in a link to an image or graphic on your site you create what is called an absolute link. In other words the path to the image is complete or you could say, starts at the root of the entire internet and works it's way down to your image folder. This comes in real handy when you want to display images on your site that are actually on another website. That's right you can link to just about anything you want if you know what the absolute path is to that item, whether it is an image, graphic, or an entire web page, But more on that later.

4. Once you have added the image code you need to update your HTML page on the server where your actual website files are kept. This tutorial does not go into the intricacies of transferring your local files to the internet, but most software like MS FrontPage, or Adobe DreamWeaver have that functionality built in. Make sure and transfer your updated and saved HTML document to your live website on the internet. Also make sure to upload your images, and or graphics to the images folder on your live site. The folder structure on your live site should mirror exactly the folder structure you created on the inside of your website folder kept on your local machine. If you do not upload all the images and graphics you are keeping in your "images" folder to the "images" folder on your live site you will not be able to see those images or graphics when you view your web page from the internet.

Have fun and good luck!

How to create a link to MaxPreps on your website.

To place a simple text link to MaxPreps on your website follow these step-by-step instructions.

1. Simply copy and paste this code into your HTML document where ever you want the link

<a href="http://www.maxpreps.com">MaxPreps</a>

2. Once you have added the linking code you need to update your HTML page on the server where your actual website files are kept. This tutorial does not go into the intricacies of transferring your local files to the internet, but most software like MS FrontPage, or Adobe DreamWeaver have that functionality built in. Make sure and transfer your updated and saved HTML document to your live website on the internet to see your changes.

Have fun and good luck!

To place a graphic as a link to MaxPreps on your website follow these step-by-step instructions.

1. In the tutorial on placing a MaxPreps logo on your website we showed you how to get an image into your HTML document. From there it is actually quite simple to make any image on a web page a link.

Let's say you want to make the MaxPreps logo you put on your web page a link to MaxPreps. Follow the first 3 steps in the first tutorial on this page and then go to step 2 here.

2. Now that you have a MaxPreps logo on your web page you will need to wrap the <img> tag with an <a> tag (Anchor). The anchor tag will take the attribute "href" (hyper reference) which will include the path to the page, or site you want to link to. Currently you have something like this: <img src="/images/mplogo.jpg">. To wrap the existing tag with the code that makes the MaxPreps logo a link simply add <a href="http://www.maxpreps.com"> right before the <img> tag, and </a> right after the <img> tag.

You should have something like this when you are done: <a href="http://www.maxpreps.com"><img src="/images/mplogo.jpg" border=0></a>.

Did you notice that we added the border=0 attribute to the Image tag? Web Browsers automatically put borders around graphics and images that have been made into links. This is usually very unpleasing. If you wish, feel free to experiment and set the border attribute to a number other than 0 and see what happens. If you leave out the border attribute the browser will automatically create a border around your graphical link. Setting the border attribute to 0 ensures that no border will appear.

Have fun and good luck!

How to embed schedules and stats from MaxPreps directly onto your site.

To embed schedules and stats from MaxPreps directly onto your website follow these step-by-step instructions.

1. Go to the MaxPreps page where the stats, or schedule you want can be found. In our example we went to Ponderosa Bruins Girls Soccer for Spring 2008. On this page you will find a link labelled as "Printable Schedule" it looks like this   Printable Schedule. If you are looking for Stats the link will be Printable Team Stats.

2. Click the Printable Schedule/Stats link and the printable schedule/Stats page will open in a new window.

3. Once the page displaying the schedule/stats is loaded, right click on the page and select View Source.

4. Once the view source window is open select all the code between AND including the opening and closing <center> tags. Right click on the selected source code and copy the code to your computer's clipboard. NOTE: You must right click on the selected source code. If you right click anywhere else you will lose your selection.

5. Paste the code into your HTML document where you want it to show up.

6. Save your document and test in your local browser. If all looks good publish your changes to your live site.

Have fun and good luck!

High School Webmasters If you have a question relating to one of these tutorials please fill out the form below completely and submit it to the MaxPreps web development team and we will get back to you with the answer.
Name:
Email:
School:
Question: