Content Text and HTML

Content can be added to a Site Builder Software Site Code site without any programming or html knowledge. Simply Sign In and click the New Item link. This displays a Title text input field and a Content text area field. You can simply type directly into these fields and Save. When you Save any line breaks in the Content text area will be converted to html line breaks ( ie < br /> ) and urls ( www. or http:// looking text ) will be converted to a clickable link.

When editing you can use the Spell Checker in the free Google Toolbar to check spelling before you save the Item. The Google Toolbar is available for both Internet Explorer and FireFox browsers.

Typing in Plain Text


This is some text followed by 1 line break (enter key once)
This is some text followed by 2 line breaks (enter key twice)

This is an autmatically generated hyper-link www.softswot.com . Hyper-links will be created for any text that starts with http:// , https://, ftp:// or www. . All charaters from the start of this pattern to a space are treated as the anchor href link value.

Any character combinations that have special meaning within HTML are convert to their HTML encoded form before they are saved or displayed. This ensures that characters are correctly rendered and improves the validity and standards compliance of the site. The only character combinations that are not encoded are those used for the allowed xHTML tags. Allowed HTML tags are displayed as buttons above the Content text area. To display a valid xHTML tag as text in an Item insert a space after the < in each tag.

This is a valid bold (b) tag

If I insert a space after the < ie the start tag becomes < b> and the end tag becomes < /b> the display becomes..

< b>This is a valid bold (b) tag< /b>

Using xHTML


When you Edit a selection of xHTML tags are provided at the top of the Contet text area. These can be used to add set xHTML tags to your Content. Only the xHTML tags displayed can be used all other tags will be treated as text. To use these tags position the cursor in the Content text area at the location the tag should be inserted, our highlight the text in the text area the tag should encompass. Then click the required xHTML Tag button.

Site Code pages are designed to be valid XHTML, which is the recommended document format for web pages. Valid XHTML tags consist of a start tag ie < b> and a corresponding end tag < /b> or are a single tag including a / at the end ie />
. All tags should be lower case.

Header 2 Tag

< h2>h2 style< /h2>

Text between these tags is displayed in the format set by the h2 style in the Style Sheet.

Header 3 Tag

< h3>h3 style< /h3>

Text between these tags is displayed in the format set by the h3 style in the Style Sheet.

Bold Tag

< b>b style< /b>

Text between these tags is displayed in the format set by the b style in the Style Sheet.

Italics Tag

< i>italics style< /i>

Text between these tags is displayed in italics style.

Paragraph Tag

< p>Displayed Text< /p>

Text between these tags is displayed based on the paragraph style in the Style Sheet. A paragraph is a block formatting style. Block formatting separates the formatted content from the preceding and following content.

Div Tag

< div>Displayed Text< /div>

Text between these tags is displayed based on the div style in the Style Sheet. A div is an block formatting style. It is commonly used with a class attribute to provide a range of formatting styles and positioning.

Span Tag

< span>Displayed Text< /span>

Text between these tags is displayed based on the span style in the Style Sheet. A span is an inline formatting style. It allows formatting to be applied a selection of text. It is commonly used with a class attribute to provide a range of formatting styles.

Anchor Tag

< a href="http://www.softswot.com/">Displayed Text< /a>

Text between these tags is displayed as a hyper-link with the url for the link as the href value (between the " " 's). Formatting is based on the a style in the Style Sheet. When the attribute target="_blank" is added (ie < a href="http://www.softswot.com/" target="_blank">Displayed Text< /a>)the link will open in a new window.

Ordered List Tag

< ol>< /ol>

Text in List Item Tags < li>< /li> between these tags is displayed as a list with each item numbered. Formatting is based on the ol style in the Style Sheet.

Unordered List Tag

< ul>< /ul> Text in List Item Tags < li>< /li> between these tags is displayed as a list with out ordering ie no numbers. Formatting is based on the ul style in the Style Sheet.

List Item Tag

< li>< /li> Text between these tags is displayed as a list. Formatting is based on the li style in the Style Sheet.

Table Tag

< table>< /table>

Text in Table Data Tags < td>< /td> within Table Row Tags < tr>< /tr> between these tags is displayed as a table. Formatting is based on the table style in the Style Sheet.

Table Row Tag

< tr>< /tr>

Text in Table Data Tags < td>< /td> between these tags is displayed as a table. Formatting is based on the tr style in the Style Sheet.

Table Data Tag

< td>< /td>

Text between these tags is displayed as a table. Formatting is based on the td style in the Style Sheet.

Image Tag

< img src="http://www.softswot.com/images/logo.gif" alt="softSWOT Logo" />

This displays an image with the image source url as the src value (between the " " 's) and the alternative txt for the image as the alt value. Formatting is based on the img style in the Style Sheet.

Script Tag

< script type="text/javascript" src="script.js">< /script>

This includes an external JavaScript file within a page with the source file as the src value (between the " " 's). For more information see Using JavaScript.

Question and Answer Tag

< a href = " javascript:void(0); " onclick = " javascript:useNode = document.getElementById( '1164182262734' ); curDisplay = useNode.style.display; if(curDisplay == 'none') { useNode.style.display = 'block'; } else{ useNode.style.display = 'none'; } return false; ">

Q:

< /a>

< span id="1164182262734" style="display: none">

A:

< /span>

This is a specialized tag designed to display a clickable Question and only display the Answer once the Question has been clicked. The Question Text is placed after or in place of the Q: and the Answer text is placed after or in place of the A:. Resulting in:


Q: What is the answer to the Ultimate Question of Life, the Universe and Everything (click to show the answer)?



Class Attribute

Selecting the Class check box adds a class attribute to inserted tags ie < div class="">< /div>. A class attribute allows an element to be identified and is used in conjunction with the Style Sheet to provide specific formatting. The class value is added between the " " 's. A div tag the with class display appears as < div class="display">< /div> and is formatted by the div.display style in the Style Sheet.

The Class attribute can be used to define new classes or use classes already defined in the default Style Sheet (style.css). Defined default Style Sheet classes are:

.small {font-size:75%;}
.center{text-align: center;}
.right{text-align: right;}
.high{font-weight: bold; background-color: #ffffff; color: #ff3300;}
.floatleft{float: left; margin: 10px;}
.floatright{float: right; margin: 10px;}

These can be applied to an element by simply adding the class attribute. For example to decrease the text font size use < div class="center">Small Text< /div> this displays as:

Small Text

To align the text in the center use < div class="center">Center Text< /div> this displays as:
Center Text

To align the text to the right use < div class="right">Right Text< /div> this displays as:
Right Text

To highlight the text use < div class="high">Highlight Text< /div> this displays as:
Highlight Text

softSWOT LogoThe Float Styles cause an element to float to the left or the right of the containing element and allow text to flow around them. They are particularly useful for positioning images within text. The image on the right has the class floatright. It floats the image to the right of the page and allows the text to wrap around the image. The code is:

< img src = "http://www.softswot.com/images/softswot.gif" alt ="softSWOT Logo" class="floatright"/>

softSWOT LogoThe image on the left has the class floatleft. It floats the image to the left of the page and allows the text to wrap around the image. The code is:

< img src = "http://www.softswot.com/images/softswot.gif" alt = "softSWOT Logo" class="floatleft"/>



Applying Style by Element


Style can also be set directly to an element. This overrides the Style Sheet settings. Applying stlye by element should only be used for individual formatting. All site wide styles should be set within the Stlye Sheet to allow one change site wide modification.

To set Style by Element a style attribute and settings are added to the element. For example



< b style="background-color: black; color: white;">Bold element modifed by Style to White Text on Black Background< /b>

displays as

Bold element modifed by Style to White Text on Black Background



< h2 style="text-align:center;width:100%;border-style:none">Header 2 element modified by Style to Center Alignment, a Width of 100%, with No Border< /h2>

displays as

Header 2 element modified by Style to Center Alignment, a Width of 100%, with No Border




< div class="center">< div style="width:200px">Elements can be nested, and use a combination of Style Sheet ansd Element Styles. This is a div element modified by Style to a Width of 200 pixels and nested within a div.center (class="center").< /div>< /div>

displays as

Elements can be nested, and use a combination of Style Sheet ansd Element Styles. This is a div element modified by Style to a Width of 200 pixels and nested within a div.center (class="center").

Sign In