EverWeb Widgets HTML5

HTML Special Characters & Hyperlinks

Line Breaks & Special Characters

Most 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> 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.

Common Characters

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 File Path page for more info.
To open the link in a new window, add target="_blank" like this...
<a href="#" target="_blank">Hyperlink Text</a>

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">Link 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 "defaultHyperlink" since it is used a lot
<a class="defaultHyperlink" href="#" target="_blank">Hyperlink Text</a>
The styles entered into the head code box would look like this...
<style type="text/css">
a.defaultHyperlink {color:#000FFF;text-decoration:none}
a:hover.defaultHyperlink {color:#FF0000}
</style>

Delete "text-decoration:none" if the underline is required.
Use Hex Color Numbers to change the colors to suit.

ColorHex Number
000000
000FFF
FF0000
00FF00
FFFF00
FF00FF
FF7F00
7F007F
FFFFFF

Bold Underline Italic & Colored Text

Widgets that use HTML headings and paragraphs can have words emphasized using the italic <i></i> tag and bold <b></b> tag.
Instead of using &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 of the above h4 HTML heading which has a base font color of #FFFFFF and is written like this...

<h4><b style="color:1669FF">Bold</b> <u style="color:#FF0000">Underline</u> <i style="color:#FF7F00">Italic</i> &amp; <span style="color:#00FF00">Colored</span> <q>Text</q></h4>

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