If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

image-link-to-your-web-site

Page history last edited by Shal 8 years, 11 months ago

You can use images to link your group's home page with other web sites, with just a little bit of HTML coding. The keys are two HTML elements: <a> (anchor) and <img> (image).

Image

Lets start with the <img> tag. It will look like this:

<img src="..." alt="..." width=... height=...>

The ... above are placeholders for values you must enter. The src and alt attributes are required for images, width and height are recommended, and are listed as required by Yahoo for rich text messages and home pages.

HTML ignores whitespace, treating line breaks and spaces alike, so lets look at a filled in example formatted for readability:

<img src="http://farm1.static.flickr.com/80/214488555_732dc4ca81_m.jpg"
     alt="Bright red Santa Fe caboose."
     width=240 height=145>

Resulting image:

Bright red Santa Fe caboose.

src attribute

The value of the source attribute is a URL. Note that the image must be hosted somewhere on the web, not on your PC and not in your group's Files or Photos sections (because those sections can only be accessed by members of your group). For this example I'm using Flickr because it is a Yahoo company -- you can use the Yahoo account you already have to create and sign in to a free or paid Flickr account.

alt attribute

The value of the alternate text attribute is a description of the image. This text will be displayed if the image can't be loaded for some reason and is also used by screen-reading software for vision impaired users, so it should be descriptive, not a title.

width and height attributes

The value of these attributes determins the size of the image on the user's screen. They may be stated either in pixels or as a percentage of the available space and the image will be scaled to fit them. They are recommended so that the user's browser can immediately reserve space for the image, before it has actually retrieved it; but if omitted the browser will use the actual size of the image (once it is loaded).

I generally recommend that these attributes be filled in exactly matching the actual size of the image. If the attributes are smaller than the actual image that wastes time loading an image that is bigger than necessary for display. If the attributes are bigger than the actual image the resulting display may appear "pixellated" -- blocky or fuzzy. If the actual size of the image is inconvenient for the layout of your page, I recommend making a copy of the image which has been resized instead of using these attributes to shrink or streatch the image.

Anchor

<a href="/...">...</a>

Unlike image, the anchor element has both a starting tag, <a>, and an ending tag, </a>, and both are required. In between the two tags is the page content which becomes the visual link. So for example:

<a href="http://www.flickr.com/photos/shalf/214488555/"> Photo by Shalf </a>

Produces:

Photo by Shalf

href element

The value of the href attribute is a URL. When the user clicks on the visual link, their browser goes to this address. You can send the browser anywhere on the web, including to your own web site address.

Putting it all together

So, to use an image as a link to your own web site, wrap an anchor around an image:

<a href="http://groups.yahoo.com/group/yahoo_group_of_groups/">
<img src="http://farm1.static.flickr.com/80/214488555_732dc4ca81_m.jpg"
     alt="Bright red Santa Fe caboose."
     width=240 height=145>
</a>
<a href="http://www.flickr.com/photos/shalf/214488555/">
   Photo by Shalf
</a>

Resulting links:

Photo by Shalf

Note that Flickr's terms of service require that a photo hosted by their service be accompanied by a link back to the photo's page on Flickr. In this case, since we've used the photo as a link to somewhere else, I've satisfied that requirement with the "Photo by Shalf" adjacent to the image.