EverWeb Widgets HTML5

Hyperlinks

HTML

The HTML <a> tag defines a hyperlink. The hyperlink code looks like this…

<a href="http://www.website.com/page-name.html" target="_self" title="Tooltip Text">Link Text</a>

The URL - marked in red - can be a relative or an absolute file path. See THIS page for more info about file paths.

The target - marked in blue - defines how the linked page or is opened.

target="_self" is the default and the page or file opens in the same browser window. It is not necessary to specify this target as it is the browser default.

target="_blank" will open the page or file in a new browser window. NOTE: This should only be used when absolutely necessary as many visitors will find this irritating!

target="_top" is useful if you want a hyperlink which is contained in an iframe to open in the full browser window rather than in the confines of the iframe.

The title attribute - marked in purple - will show up in the browser default tooltip when the link is hovered for more than a few seconds. This tooltip looks rather ugly and, although the tooltip text is helpful to both humans and the search engine spiders, it can be omitted for the sake of appearance.

The link text - marked in green - is what the visitors see and click to follow the link.

CSS

A hyperlink can be styled for color and text decoration using an inline style like this…

<a href="page-name.html" style="color:#FF0000;text-decoration:none">Link Text</a>

A hover style cannot be entered into inline CSS so the styles need to be entered into the Head Code box as an internal style. The style needs a class name so that it won't be overwritten by the EverWeb default styles. In this case the class is "custom-link".

<style type="text/css">
a.custom-link {color:#000FFF;text-decoration:underline}
a:hover.custom-link {color:#FF0000}
</style>

See THIS page about using hex colors. Text decoration can be none, underline or line-through.

Now the HTML will be like this…

<a href="page-name.html" class="custom-link">Link Text</a>

NOTE: The class name has a period in front of it in the internal CSS but none in the HTML!

Once this style has been entered into the page Head Code box, any hyperlinks with the class "custom-link" will inherit these styles. Insert the code into the site wide Head Code box in the Site Publishing settings if it is required on several or all of the pages of the website.