WYSIWYG Editor Advanced Fields

Specifies the value of the id attribute for the link. In previous incarnations of HTML, the name attribute on an <a> element was used to create an anchor and target it. For conformance with HTML5, the id attribute is preferred over the name attribute. For Modern Campus CMS pages the id should at least be unique to a page. The id attribute is flexible in implementation and can provide a specific target for an element, including for on-page linking within a document. An id can also be used as a target by scripts. Another usage of id is to style an element with CSS, or to bookmark or footnote a document.

An id attribute:

• Is a global attribute in HTML5.
• Must be a unique value relative to the "element's home subtree."
• Must contain at least one character.
• Must not contain any space characters.

The following example first shows a link to a footnote, and an id within its <a> element. The second example below is a caret character that links back to the text. This is how footnotes are accomplished on this page.

Syntax

<a id="hyperlink-comparison" href="index.html#f1">See footnote.[1]</a>
<a id="#f1" href="index.html#hyperlink-comparison">^</a>

The style attribute can be used to apply inline CSS for the hyperlink. Several attributes from HTML 4 now apply to all elements as global attributes; the style attribute is one of them. It is not necessary to enter the quotation marks. For a markup like:

<a style="color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;" href="https://support.modercampus.com/">Funny Link Styling</a>

Enter the following in the field:

color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;

Specifies the tab index (tabindex attribute) for the hyperlink. The tabindex attribute is considered a global attribute in HTML5. The value must be a valid integer and is used to indicate that an element is focusable. Positive numbers specify the relative position of the element's focusable areas in the sequential focus navigation order, and negative numbers indicate that the control is to be unreachable by sequential focus navigation.

• A tabindex makes an element selectable by mouse click in that it adds dotted outlines, which can be styled using :focus.
• May be more useful in changing the tab-through order of a form than for changing the tabbing order of links on a page.
• Since <a> tags have focus by default, could also be used to negate the tabbing through a page.

Syntax

<a tabindex="1" href="https://support.modercampus.com">Link to page</a>

Executes JavaScript when the link is clicked.

Syntax

<a href="https://support.modercampus.com" onclick="getElementById('demo').innerHTML=Date()">What is the time?</a>

Define the alignment of the image to the text, as follows:

• Baseline: Align the image with the baseline of the parent element; adds vertical-align: baseline;.

• Top: Align the image with the top of the tallest element in the line; adds vertical-align: top;.
• Middle: Place the image in the middle of the parent element; adds vertical-align: middle;.

• Bottom: Align the image with the lowest element in the line; adds vertical-align: bottom;.

• Text Top: Align the image with the top of the parent element's font; adds vertical-align: text-top;.

• Text Bottom: Align the image with the bottom of the parent element's font; adds vertical-align: text-bottom;.

• Subscript: Align the image with the subscript baseline of the parent element; adds vertical-align: sub;.
• Superscript: Align the image with the superscript baseline of the parent element; adds vertical-align: super;.

• Left: Float the image to the left of its container; adds float: left;.

• Right: Float the image to the right of its container; adds float: right;.

Type a number to define the margin, in pixels, for the image, as follows:

• Vertical space: Add top and bottom margin to the image; adds margin-top: and margin-bottom:.
• Horizontal space: Add left and right margin to the image; adds margin-left: and margin-right:.

Add a border around the image, as follows:

• Border width: Type a number to add a border width, in pixels, around the image; adds border-width:.
• Border style: Click the dropdown to select solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden; adds border-style:.

View image styles, as follows:

• Style: Selecting alignment, space, and borders populates this field with the CSS properties.
• Style preview: See a preview of the styles with a placeholder image and text.

Use to define another format of the same media.

Adds the <source> as a child element of <video> or <audio>. For example: <source src="video.ogg">.

Enter the external URL or use the file chooser to browse to the Modern Campus CMS file so that the dependency tag is inserted.

Use media poster to add a still image as the first frame rather than the first frame of the media.

Adds the poster attribute as a child element of <video> or <audio>.  For example: <poster="slide1.jpg">.

Click the dropdown to select a color for the table border; adds border-color:.

Click the dropdown to select a background color for the table; adds background-color:.