EverWeb Widgetbox

HTML Special Characters & Hyperlinks

Line Breaks & Special Characters

Several of the widgets allow text or captions to be entered. Since this text is added in an HTML paragraph, span or heading they require special consideration.

Use <br>, or the XHTML which is <br />, for a line break. Use two of them to create a paragraph break like this: <br><br>

Characters such as & or greater/less than need to use the HTML equivalent rather than just be typed.

Here are some of the most commonly used characters...

  • An ampersand (&) is &amp;
  • A double quote (") is &quot;
  • A single quote (') can be typed
  • A check mark (✓) is &#10003;
  • A fat check mark (✔) is &#10004;
  • A lesser than (<) is &lt;
  • A greater than (>) is &gt;
  • The at symbol @ is &#64;
  • A left arrow (←) is &larr;
  • A right arrow (→) is &rarr;

Hyperlinks

If the text in a widget or an image caption is required to be a hyperlink, these need to be added as HTML. In its simplest form, an HTML hyperlink looks like this...

<a href="#">Hyperlink Text</a>

The hash sign (#) is replaced with a relative or absolute file path. See THIS page for more info.

To open the link in a new window, add target="_blank" like this...

<a href="#" target="_blank">Hyperlink Text</a>

The example to the right shows a text hyperlink in the text wrap widget.

HTML Hyperlins

This is an example of how to add a text hyperlink to the Text Wrap widget.
Enter the text into the box as normal and then find the word or words which are required to be a hyperlink.
Insert this part of the code just before the hyperlinked text…
<a href="#">
…and leave a space between it and the preceeding text.
After the last word in the hyperlink, insert this…
</a>
… so that ot looks something like this…

<a href="#">Hyperlink Text</a>

Leave a space after the closing </a> and type the rest of the text in the sentence.

Now replace the hash sign with the relative or absolute file path to the linked page or file like this…

<a href="page-name.html">Hyperlink Text</a>

If the hyperlink is to open in a new window add this…

<a href="page.html" target="_blank">Text</a>

Click HERE to open the page about file paths in a new window.

Hyperlink Styles

The hyperlink text needs to be styled if the colors are to be different than the website or browser default.

An inline style can be used if all that is required is to change the color of the hyperlink text and perhaps remove the underline...


style="color:#FF0000;text decoration:none"


This is added to the markup like so...


<a href="#" style="color:#FF0000;text decoration:none">TEXT</a>


Styling the hover and/or visited colors requires the use of an inline style.

Internal Styles

An inline style is added to the Head Code in the Page inspector. To do this you have to give the <a> tag a class name which can be anything. This example uses the class name "textwrap" since it is used in the Text Wrap widget.


<a class="textwrap" href="#" target="_blank">Hyperlink Text</a>


The styles entered into the head code box would look like this...


<style type="text/css">

a.textwrap {color:#000FFF;text-decoration:none}

a:hover.textwrap {color:#FF0000}

</style>


Delete "text-decoration:none" if the underline is required.


Use hex color numbers to change the colors to suit.

Italic Bold & Quotes

Widgets that use HTML headings and paragraphs can have words emphasized using the italic <i></i> tag and bold <b></b> tag.

To save having to use &quot; for double quotes, the text can be inserted in the <q></q> tag. All of the above can be styled using inline styles as shown in the example below.

The above h4 HTML heading is written like this...


<h4><i style="color:#1669FF">Italic</i> <b style="color:#FF00FF">Bold</b> &amp; <q style="color:#008000">Quotes</q></h4>


NOTE: If you are using, for example, an HTML heading widget, the <h4></h4> tags are not required!