| |
Using HTML within Visualizer Album Designer - Part 3.
You can easily insert logos, banners and other images you may want to include within your photo albums. As mentioned in part 1 anything can be placed in the header and footer section, as long as it is compatible with the web. In the next following steps we will be looking at how to insert an image and how to wrap a link around the image. We will also be looking at how to wrap a link around a text.
Adding an image to your documents.
Before you start inserting images within your documents, you need to make sure it is available on the Internet, meaning that you can point the path to a valid address. Another good thing to know is the dimensions of the image. If you are not sure of the dimensions of the image you want to add, open the image with Visualizer Photo FX and look in the lower left corner of your screen. Here you will be able to see the width and height of the image. Let's try and setup an image within the document.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" />
When using the img tag we are informing the browser that we want to add an image. The src attribute is the source that informs the browser where the image is located. As you can see I measured and added the width and height, so the correct dimensions (ratio) will be used when the image is displayed within the browser. As we have learned from the previous aritcles we need to close the tag when we are done, to inform the browser that we are done with the image.
The above example showed you the standard procedure to go about adding an image, but there are still attributes we can continue to add to our img tag. We can continue to add a border size, and we can add a hint when we mouse over the image. Worth mentioning about borders is that if we do not inform the browser about the border size, a 1 pixel border will automatically be added when we wrap a link around the image. We will learn more about adding links to an image later on in this article. First let us have a look at the border and hint attributes.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" alt="Visualizer Image Group" border="0" />
The alt attribute will let you add hints to your images. Hints can be very helpful when using icons that needs further explanation. It is not always we want to add a hint to our image(s), however, we should always make sure to add the alt attribute to keep our pages XHTML compliant. Leave the alt attribute blank in case you do not want to add a hint to an image. In the example below I have left out the hint but still made sure to keep alt attribute within my img tag. I have also changed the border size to a width of 1 pixel.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" alt="" border="1" />
You should be aware of the color you have selected for your links will also decide the border color when you wrap a link around an image. By changing the border width to zero you can set the border to not be visible. In the next section we will learn how to wrap a link around an image and around a text.
Wrapping a link around an image and text.
Everything is easy when you know how, however, wrapping a link around an image or text really is easy and will definitely come in handy many times. As we have learned previously, we now know when we start a tag we also need to close it. The procedure is the same for linking an object, whether that being an image or a text. Let's first have a look what a link really looks like in HTML.
<a href="http://www.freeimagebrowser.com/">INSERT CONTENT HERE</a>
The above example shows you how we can wrap a link around what could be an image or text. The link we are calling in this example is "http://www.freeimagebrowser.com/" but it could also be any link of your choice. When people click on the content placed between the link wrapper, they will automatically be directed to the referring link (href) provided within the anchor (a). Let's give it a try using our own text.
<a href="http://www.freeimagebrowser.com/">Come and visit my website</a>
We can also add attributes to an anchor (a), such as the target attribute which I will show you and explain what it means. The target attribute lets us decide how we want to direct our visitors. Typically we do not inlcude the target attribute when we link to a page at our website, but there can be times where it can come quite in handy, espeically when we refer people to a page or a site which is not provided by us. I will show you two variables which are commonly used.
target="_blank"
target="_self"
The first option will refer visitors to a page or site by opening a new window. It is important to mention that this option does not go under the terms of being a popup window. It is a regular link where people are referred within a new window. The second option will refer people within the same window, as the default method will do when the target attribute has not been included. Let's wrap a link around a text and include the target attribute within our anchor.
<a href="http://www.freeimagebrowser.com/" target="_blank">Come and visit my website</a>
The link above will refer visitors to "http://www.freeimagebrowser.com/", but only when the browser has successfully opened a new window where it can refer the visitor. The procedure is the same when we wrap a link around an image. Let's use the image we added earlier and wrap the above link around it, instead of using text.
<a href="http://www.freeimagebrowser.com/" target="_blank"><img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" alt="Visualizer Image Group" border="0" /></a>
Remember earlier when we talked about borders, you will notice that I have set the border size to zero so the link wrapper will not create a border, using the link color we have selected for our document. If you would like to add a border and use the link color selected within the document, set the border size to a value greater than zero. Let me just show you the last example before I end this article. I will still be using the same link but I will remove the target attribute, so visitors will be referred in the same window instead of a new window as the above example is showing.
<a href="http://www.freeimagebrowser.com/"><img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" alt="Visualizer Image Group" border="0" /></a> |
|
|
|
 |
|
Submitted by:
ParaMan
Popularity: 7 %
Viewed 154 times |
|
 |
|
