| 
  • 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!

View
 

Bigger Home Page Photo

This version was saved 15 years, 6 months ago View current version     Page history
Saved by Shal
on September 10, 2008 at 11:02:08 pm
 

You can take control of your group's home page photo, even have multiple photos, with just a little bit of HTML coding.

 

Image

 

The key is the HTML <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.

 

 

----

<a href="http://www.flickr.com/photos/shalf/214488555/" title="Caboose Unfettered by shalf, on Flickr"><img src="http://farm1.static.flickr.com/80/214488555_732dc4ca81_o.jpg" width="1056" height="640" alt="Caboose Unfettered" /></a><br>

 

----

<img src="http://farm1.static.flickr.com/80/214488555_732dc4ca81_o.jpg"
width="1056" height="640" alt="Caboose Unfettered" />

 

Anchor

 

<a href="/..." title="...">...</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/"
title="Caboose Unfettered by shalf, on Flickr"> <img ...> </a>

 

 

href attribute

 

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.

 

title attribute

 

The value of the title attribute is a title for the link. This text may be presented as a pop up "tool-tip" and may also used by screen-reading software for vision impaired users.

 

 

 

Putting it all together

 

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

 


Bigger Image

  

<a href="http://www.flickr.com/photos/shalf/214488555/"
title="Caboose Unfettered by shalf, on Flickr"> <img src="http://farm1.static.flickr.com/80/214488555_732dc4ca81_o.jpg" alt="Bright red Santa Fe caboose." width=1056 height=640> </a>

 

Resulting image:

 

Bright red Santa Fe caboose. 

 

 

 

References:

HTML allowed by Yahoo: help.yahoo.com/l/us/yahoo/groups/original/members/email/email-19.html

Overview of HTML elements: en.wikipedia.org/wiki/HTML_element

Specification of <img>: www.w3.org/TR/html401/struct/objects.html#edef-IMG

Specification of <a>: www.w3.org/TR/html401/struct/links.html#edef-A

 

 

 

Comments (0)

You don't have permission to comment on this page.