Saturday, February 12, 2011

Customizing your Great Strides Page

I loved personalizing our family's Great Strides pages with video, pictures, and links. Here's a few tips on customizing yours. Of course, you are always welcome to contact us if you need more help on inserting/customizing code for your Great Strides page.

Insert a Link
  1. Enter the following code where you want your link to appear:
    <A HREF=""></A>
  2. Paste the URL (the web address of the link) in between the two quote marks in the code.
  3. In between the >< marks, type the text you want to have as the link.

    Example: I used the following to code a link to this website:
    <A HREF="http://peterspavementpounders.org">Peter's Pavement Pounders website</A>
Insert an Image
  1. Enter the following code where you want your image to appear:
    <IMG SRC="">
  2. Choose an image from the web that you would like to display on your Great Strides page. Remember to respect copyright and do not use any image you do not have permission to copy. Peter's Pavement Pounders walkers are welcome to use any of the pictures from this site.
  3. If you have a picture you would like to use that is not online, you need to upload it to an image hosting site like Picasa or PhotoBucket, then proceed to step 4.
  4. Right click on your chosen image and choose "Copy image URL."
  5. Paste the image URL (the web address of the image) in between the two quote marks in the code.
  6. If your image is too wide, you can enter the WIDTH code as you see in the example below. I've found that 640 works well for the Great Strides page layout.

    Example: 
    I used this code to insert the following image.

    <IMG SRC="http://4.bp.blogspot.com/_hTg6GhoV9iI/S_WmouAKRPI/AAAAAAAAKvE/P9tGBbGff2Q/s640/PPP+Great+Strides+2010-66.jpg" WIDTH=640>


Insert our Peter's Pavement Pounders video

Enter the following code where you want the PPP video to appear:


<center><iframe src="http://player.vimeo.com/video/11566475?title=0&byline=0&portrait=0&color=ffffff" width="600" height="338" frameborder="0"></iframe></center>


Insert a line break
  1. This code can be anywhere you want a line break.
    <BR>
  2. Hint: Insert two of them for a blank line.
Center 

  1. Place anything you want to center in between the >< marks.
    <CENTER></CENTER>
Bold
  1. Place anything you want in bold in between the >< marks.
    <B></B>
You can find more HTML codes here: http://www.w3schools.com/html/html_examples.asp


No comments:

Post a Comment

LinkWithin

Related Posts with Thumbnails