<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#element">HTML5 Elements</a></li>
<li><a href="#breadcrumb">Breadcrumb</a></li>
<li><a href="#assist">Advanced Content Assist</a></li>
<li><a href="#hover">Advanced Content Hover</a></li>
<h1>HTML Editor</h1>
-<p>The Tizen Web IDE provides a WYSIWYG editor for editing HTML files. To clean up HTML code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the HTML files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
-<p>The editor supports a variety of <a href="#element">HTML5 elements</a>. The HTML editor is based on the Web Page Editor (WPE).</p>
+<p>The Tizen Web IDE provides a text editor for an HTML file. The editor supports the basic features like writing, deleting, finding, replacing, and etc. And if you want to indent the codes in the HTML file and insert a carriage return at the end of the code in a CSS file, in the <b>Project Explorer</b> view, select the file, open the context menu, and select <b><a href="code_beautifier_w.htm">Code Beautifier</a></b>. And if you want to compress an HTML file, in the context menu, select <b><a href="code_minifier_w.htm">Code Minifier</a></b>.</p>
+<p>The HTML editor is based on the Structured Text Editor.</p>
<p>The HTML editor has the following features:</p>
<ul>
- <li>Design page</li>
- <li>WYSIWYG Builder
- <ul>
- <li>Drag-and-drop HTML components from the <strong>Palette</strong> menu
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The editor has separate component <strong>Palette</strong> menus for HTML 4.0 and HTML5.</td>
- </tr>
- </tbody>
- </table></li>
- <li>HTML design view</li>
- </ul> </li>
- <li>Modes
- <ul>
- <li>Editor mode toolbar</li>
- <li>The following table lists the available modes.
- <table>
- <caption>Available editor modes</caption>
- <tbody>
- <tr>
- <th>Icon</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="Horizontal Split View" src="../images/hori_split_view.png" /></td>
- <td>Horizontally-split View (Ctrl+Shift+F9)</td>
- </tr>
- <tr>
- <td><img alt="Vertical Split View" src="../images/vert_split_view.png" /></td>
- <td>Vertically-split View (Ctrl+Shift+F10)</td>
- </tr>
- <tr>
- <td><img alt="Designer View" src="../images/designer_view.png" /></td>
- <td>Designer View (Ctrl+Shift+F11)</td>
- </tr>
- <tr>
- <td><img alt="Source View" src="../images/source_view.png" /></td>
- <td>Source View (Ctrl+Shift+F12)</td>
- </tr>
- <tr>
- <td><img alt="Skin" src="../images/skin.png" /></td>
- <td>Manage Skins (see <a href="http://publib.boulder.ibm.com/infocenter/rsasehlp/v7r5m0/index.jsp?topic=%2Forg.eclipse.jst.jsf.doc.user%2Fhtml%2Freference%2Fjsf_design_time_skinning.html" target="_blank">Skins</a>)</td>
- </tr>
- </tbody>
- </table> </li>
- </ul>
- </li>
<li>PropertySheet
<ul>
<li>Edit HTML tag attributes in the <strong>Properties</strong> view
</ul>
<p>After creating HTML files, you can <a href="html_preview_w.htm">preview</a> them in a browser.</p>
-<h2 id="element" name="element">HTML5 Elements</h2>
- <p>The following table lists the HTML5 elements supported by the HTML editor.</p>
- <table>
- <caption>
- Supported HTML5 elements
- </caption>
- <tbody>
- <tr>
- <th>Icon</th>
- <th>Element</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="article" src="../images/article.png" /></td>
- <td>article</td>
- <td>Specifies independent, self-contained content. Articles can be, for example, a forum post or a newspaper article.</td>
- </tr>
- <tr>
- <td><img alt="aside" src="../images/aside.png" /></td>
- <td>aside</td>
- <td>Defines content that is related to surrounding content but can also stand alone.</td>
- </tr>
- <tr>
- <td><img alt="audio" src="../images/audio.png" /></td>
- <td>audio</td>
- <td>Defines a sound or audio stream.</td>
- </tr>
- <tr>
- <td><img alt="canvas" src="../images/canvas.png" /></td>
- <td>canvas</td>
- <td>Provides scripts with a resolution-dependent bitmap canvas that is used for rendering graphs, game graphics, or other visual images on the fly.</td>
- </tr>
- <tr>
- <td><img alt="command" src="../images/command_html.png" /></td>
- <td>command</td>
- <td>Defines a command that a user can invoke.</td>
- </tr>
- <tr>
- <td><img alt="datalist" src="../images/datalist.png" /></td>
- <td>datalist</td>
- <td>Defines a set of option elements that represent predefined options for other controls.</td>
- </tr>
- <tr>
- <td><img alt="details" src="../images/details.png" /></td>
- <td>details</td>
- <td>Defines a disclosure widget from which users obtain additional information or controls.</td>
- </tr>
- <tr>
- <td><img alt="figure" src="../images/figure.png" /></td>
- <td>figure</td>
- <td>Defines flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.</td>
- </tr>
- <tr>
- <td><img alt="footer" src="../images/footer.png" /></td>
- <td>footer</td>
- <td>Defines a footer for a document or section.</td>
- </tr>
- <tr>
- <td><img alt="header" src="../images/header.png" /></td>
- <td>header</td>
- <td>Defines a header for a document or section.</td>
- </tr>
- <tr>
- <td><img alt="hgroup" src="../images/hgroup.png" /></td>
- <td>hgroup</td>
- <td>Defines the heading of a section.</td>
- </tr>
- <tr>
- <td><img alt="keygen" src="../images/keygen.png" /></td>
- <td>keygen</td>
- <td>Defines a key-pair generator control.</td>
- </tr>
- <tr>
- <td><img alt="mark" src="../images/mark.png" /></td>
- <td>mark</td>
- <td>Defines text that is marked or highlighted in a document due to its relevance in another context.</td>
- </tr>
- <tr>
- <td><img alt="math" src="../images/math.png" /></td>
- <td>math</td>
- <td>Defines a MathML element.</td>
- </tr>
- <tr>
- <td><img alt="meter" src="../images/meter.png" /></td>
- <td>meter</td>
- <td>Defines a scalar measurement within a known range, or a fractional value. For example, disk usage.</td>
- </tr>
- <tr>
- <td><img alt="nav" src="../images/nav.png" /></td>
- <td>nav</td>
- <td>Defines a section with navigation links.</td>
- </tr>
- <tr>
- <td><img alt="output" src="../images/output.png" /></td>
- <td>output</td>
- <td>Defines a result of a calculation.</td>
- </tr>
- <tr>
- <td><img alt="progress" src="../images/progress.png" /></td>
- <td>progress</td>
- <td>Represents the progress of a task.</td>
- </tr>
- <tr>
- <td><img alt="ruby" src="../images/ruby.png" /></td>
- <td>ruby</td>
- <td>Defines ruby annotations.</td>
- </tr>
- <tr>
- <td><img alt="section" src="../images/section.png" /></td>
- <td>section</td>
- <td>Defines a generic section in a document or application.</td>
- </tr>
- <tr>
- <td><img alt="source" src="../images/source.png" /></td>
- <td>source</td>
- <td>Defines multiple alternative media resources for media elements.</td>
- </tr>
- <tr>
- <td><img alt="summary" src="../images/summary.png" /></td>
- <td>summary</td>
- <td>Defines a summary, caption, or legend within a details element.</td>
- </tr>
- <tr>
- <td><img alt="svg" src="../images/svg.png" /></td>
- <td>svg</td>
- <td>Defines scalable vector graphics (SVG).</td>
- </tr>
- <tr>
- <td><img alt="time" src="../images/time.png" /></td>
- <td>time</td>
- <td>Defines the time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.</td>
- </tr>
- <tr>
- <td><img alt="video" src="../images/video.png" /></td>
- <td>video</td>
- <td>Used for playing videos or movies, and audio files with captions.</td>
- </tr>
- </tbody>
- </table>
-
<h2 id="breadcrumb" name="breadcrumb in mobile application">Breadcrumb in Mobile Applications</h2>
<p>Breadcrumb (the graphical control) is a navigation aid used in the HTML editor. It allows you to keep track of your location within the HTML code.</p>