%META:TOPICINFO{author="TWikiContributor" date="1310075332" format="1.1" version="5"}%
---+ Using HTML, CSS and !JavaScript

%STARTINCLUDE%
You can use most HTML tags in TWiki topics without a problem. This is useful where you want to add some content that is formatted in a way that is not supported using [[#TWikiShorthand][TWiki shorthand]], for example, you can write =&lt;strike&gt;deleted text&lt;/strike&gt;= to get <strike>deleted text</strike>.

There are a few usability and technical considerations to keep in mind:

   * On collaboration pages, it's better *not* to use HTML, but to use TWiki shorthand instead - this keeps the text uncluttered and easy to edit using the plaintext editor.
   * If you _must_ use HTML, use [[http://www.w3.org/TR/xhtml1/][XHTML 1.0 Transitional]] syntax.
   * Use =&lt;literal&gt;..&lt;/literal&gt;= tags around blocks of HTML to avoid accidental interpretation of TWiki shorthand within the HTML.
   * %X% Script tags may be filtered out, at the discretion of your TWiki administrator.

Recommendations when pasting HTML from other sources (using the plain-text editor):

   * Copy only text between =&lt;body&gt;= and =&lt;/body&gt;= tags.
   * Remove all empty lines. TWiki inserts =&lt;p /&gt;= paragraph tags on empty lines, which causes problems if done between HTML tags that do not allow paragraph tags, like for example between table tags.
   * Remove leading spaces. TWiki might interpret some text as lists.
   * Do not span a tag over more than one line. TWiki requires that the opening and closing angle brackets - ==&lt;...&gt;== - of a HTML tag are on the same line, or the tag will be broken.
   * In your HTML editing program, save without hard line breaks on text wrap.

When using a WYSIWYG editor, you can just copy-paste directly into the editor, and the content will be converted to TWiki shorthand automatically when you save.

It is also possible to add Cascading Style Sheets ([[http://en.wikipedia.org/wiki/Cascading_Style_Sheets][CSS]]) and [[http://en.wikipedia.org/wiki/JavaScript][JavaScript]] code to TWiki pages, which can be used to make TWiki application more interactive. To prevent TWiki from interpreting some text as markup, it can be enclosed in HTML-escaped <tt>&lt;pre&gt;</tt>-tags.

<table border="0" cellpadding="5" cellspacing="10">
<tr bgcolor="#DDDDDD"><th valign="top">
!JavaScript Example:
</th><th valign="top">
CSS Example:
<tr bgcolor="#EEEEEE"><td valign="top">
<verbatim>
<!-- <pre> -->
<script language="javascript">
<!--
  // put your JavaScript code here
//-->
</script>
<!-- </pre> -->
</verbatim>
</td><td valign="top">
<verbatim>
<!-- <pre> -->
<style type="text/css">
  /* put your CSS code here */
</style>
<!-- </pre> -->
</verbatim>
</td></tr></table>
%STOPINCLUDE%

__Related topics:__ TextFormattingRules, TWikiShorthand

-- __Contributors:__ TWiki:Main/KennethLavrsen, TWiki:Main/PeterThoeny