Index



1.5 Html Editor



1.5.1 Html Introduction


1.5.1.1 Component of Html Markup


Html is a mark up programing language using html tag to define the attribute of an element. HTML markup consists of several key components, including:
  • elements (and their attributes),
  • character-based data types,
  • character references,
  • entity references, and
  • document type declaration

Element examples

Header of the HTML document:<head>...</head>. Usually the title should be included in the
head, for example:
<head>
  <title>The title</title>
</head>

Headings: HTML headings are defined with the <h1> to <h6> tags:
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

Paragraphs:
<p>Paragraph 1</p>  <p>Paragraph 2</p>

Line breaks:<br>. The difference between <br> and <p> is that 'br' breaks a line without altering the semantic structure of the page, whereas 'p' sections the page into paragraphs. Note also that 'br' is an empty element in that, while it may have attributes, it can take no content and it does not have to have an end tag.
<p>This <br> is a paragraph <br> with <br> line breaks</p>

Comments:
<!-- This is a comment -->
Comments can help understanding of the markup and do not display in the webpage.

1.5.1.2 Sytax of Html Document



eg. Sample Html Document

Text Mode
<!DOCTYPE html>
<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>


Design-Preview Mode


1.5.2 Html Authoring Tools


All text editor can be an authoring tool for creating a web page. To make the creatiive process easier and simpler, user-friendly html editing tools are created.

1.5.2.1 General Information

Editor↓Creator↓Cost (USD)↓Software license↓
AmayaW3C, INRIAFreeW3C
AptanaAptanaFreeAPL/GPL
ArachnophiliaPaul LutusFreeCareware
BluefishBluefishFreeGPL
BlueGriffonDisruptive InnovationsFreeMPL/GPL/LGPL
Claris Homepage(Discontinued)Claris
Proprietary
CodaPanic, Inc.$99Proprietary
CoffeeCup HTML EditorCoffeeCup SoftwareUS $49Proprietary
ContributeAdobe Systems (formerly Macromedia)US $199Proprietary
DreamweaverAdobe Systems (formerly Macromedia)US $399Proprietary
EZGeneratorImage-LineUS $129Proprietary
FreewaySoftpressUS $79(Express)/$249(Pro)Proprietary
GoLive (Discontinued)Adobe Systems (formerly GoLive Systems)US $399Proprietary
HTML-KitChami.comFree ($79 optional registration)Proprietary
KompoZerKazeFreeMPL 1.1/GPL 2.0/LGPL 2.1
Microsoft Expression WebMicrosoftUS $129Proprietary
Microsoft FrontPage(Discontinued)MicrosoftUS $199Proprietary
Microsoft FrontPage Express (Discontinued)MicrosoftFreeProprietary
Microsoft SharePoint DesignerMicrosoftFreeProprietary
Microsoft Visual Web DeveloperMicrosoftFreeProprietary
Mozilla Composer(Discontinued)Mozilla FoundationFreeMPL/GPL/LGPL
Nvu (Discontinued)Linspire / Daniel GlazmanFreeMPL/GPL/LGPL
OpenBEXIArcazjFreeGPL
OpenOffice.orgOracle Corporation (formerly Sun Microsystems)FreeGPL
Quanta PlusThe Quanta TeamFreeGPL
RapidWeaverRealmac SoftwareUS $79Proprietary
SeaMonkey ComposerSeaMonkey CouncilFreeMPL/GPL/LGPL
WebStorm IDEWebStorm IDEUS $69Proprietary
EditorCreatorCost (USD)Software licens
(Source: wikipedia)

 1.5.2.2 Editing Feature
EditorWYSIWYGFTP UploadWebDAV UploadServer-side scriptingShared editingSpell checkingTemplatesTemplates Update SyncPage PreviewForm Handler
AmayaYesNoYesNoNoYesPartial[4]No??
AptanaNoYes?Yes (via plugins)YesNoSome (i.e. Snippets)?Yes?
ArachnophiliaNo????YesYes?Yes?
BluefishNoYesYesYesNoYesYesYesYes?
BlueGriffonYesYes
(via add-on)[5]
No?NoYesYesNoYes?
Claris HomepageYesYesNoNoNoYesYesNoYes?
CoffeeCup HTML EditorYesYes?NoNoYesYes?Yes?
DreamweaverYesYesYesYesYesYesYesYesYesYes
EZGeneratorYesYes???YesYes?Yes?
FreewayYesYesNoYesNoYesYes?Yes?
GoLiveYesYesYesYesNoYesYes?Yes?
HTML-KitYesYes?YesNoYesYes?Yes?
KompoZerYesYesNoNoNoYesYesNoYes?
Microsoft Expression WebYesYesYesYesYesYesYes?Yes?
Microsoft FrontPageYesYesYesYesYesYesYes?Yes?
Microsoft SharePoint DesignerYesYesYesYesYesYesYes?Yes?
Microsoft Visual Web DeveloperYesYesYesYesYesYesYes?Yes?
NvuYesYesYesNoNoYesYesNoYes?
OpenBEXIYesYes?YesNoYesYesYesYes?
OpenOffice.orgYes????Yes??Yes?
Quanta PlusYesYesNo (cvs instead)YesYesYesYesYesYes?
RapidWeaverYesYesNoYesNoYesYes?Yes?
SeaMonkey ComposerYesYesYesNoNoYesNoNoYes?
EditorWYSIWYGFTP UploadWebDAV UploadServer-side scriptingShared editingSpell checkingTemplatesTemplates Update SyncPage PreviewForm Handler

1.5.2.2 Editing Feature
EditorCSS2FramesJavaJavaScriptXSLTXHTMLMathMLXFormsRSSAtomXPath
AmayaPartialNoNoNoNoYesYesNoNoNo?
AptanaYesYesYesYesNoYesNoNoNoNoNo
Arachnophilia???????????
BluefishYesYesYesYesYesYesYesYesYesYesYes
BlueGriffonYes????YesYes
(via add-on)
????
Claris HomepagePartialYesNoYesNoNoNoNoNoNoNo
CoffeeCup HTML EditorYesYesNoYesNoYesNoNoYesYesNo
DreamweaverYesYesYesYesYesYesPartial?Yes?Yes
FreewayYesYesPartialYesYesYesNoNoYesNoNo
GoLiveYesYesYesYesNoYesNoNoNoNoNo
HTML-KitYesYesYesYesYesYesYesNoNoNoNo
KompoZerYesNoYesYesNoYesNoNoNoNoNo
Microsoft Expression WebYesYesYesYesYesYesYesNoYesYesYes
Microsoft FrontPagePartialYesYesYesYesYesYesNoNoNoNo
Microsoft SharePoint DesignerYesYesYesYesYesYesYesNoYesYesYes
Microsoft Visual Web DeveloperYesYesYesYesYesYesYesNoYesYesYes
NvuYesNoNoYesNoYesNoNoNoNoNo
OpenBEXIYesYesYesYesYesYesNoNoYesNoNo
OpenOffice.orgYesYes?Yes???????
Quanta PlusYesYesYesYesYesYes?YesYes?Yes
RapidWeaverYesYesNoYesNoYesNoNoYesNoNo
SeaMonkey ComposerYesYesNoYesNoNoNoNoNoNo?
WebStorm IDEYesYesNoYesYesYesNoNo??Yes
EditorCSS2FramesJavaJavaScriptXSLTXHTML MathMLXFormsRSSAtomXPath
(Source: wikipedia)

1.5.3 Practicum 1- Creating a simple web page without CSS(Cascading Style Sheet)


1.5.3.1 Assigning Title and Name for the Document

1.5.3.2 Typing Text and Changing Attributes:

1.5.3.3 Using Table

1.5.3.4 Inserting Image

1.5.3.5 Inserting Hyper Link



Appendix: Html tag and functionality

TagDescriptionDTD
Basic  
<!DOCTYPE> Defines the document typeSTF
<html>Defines an HTML documentSTF
<body>Defines the document's bodySTF
<h1> to <h6>Defines HTML headingsSTF
<p>Defines a paragraphSTF
<br />Inserts a single line breakSTF
<hr />Defines a horizontal lineSTF
<!--...-->Defines a commentSTF
Formatting  
<acronym>Defines an acronymSTF
<abbr>Defines an abbreviationSTF
<address>Defines contact information for the author/owner of a documentSTF
<b>Defines bold textSTF
<bdo>Defines the text directionSTF
<big>Defines big textSTF
<blockquote>Defines a long quotationSTF
<center>Deprecated. Defines centered textTF
<cite>Defines a citationSTF
<code>Defines computer code textSTF
<del>Defines deleted textSTF
<dfn>Defines a definition termSTF
<em>Defines emphasized text STF
<font>Deprecated. Defines font, color, and size for textTF
<i>Defines italic textSTF
<ins>Defines inserted textSTF
<kbd>Defines keyboard textSTF
<pre>Defines preformatted textSTF
<q>Defines a short quotationSTF
<s>Deprecated. Defines strikethrough textTF
<samp>Defines sample computer codeSTF
<small>Defines small textSTF
<strike>Deprecated. Defines strikethrough textTF
<strong>Defines strong textSTF
<sub>Defines subscripted textSTF
<sup>Defines superscripted textSTF
<tt>Defines teletype textSTF
<u>Deprecated. Defines underlined textTF
<var>Defines a variable part of a textSTF
<xmp>Deprecated. Defines preformatted text 
Forms  
<form>Defines an HTML form for user inputSTF
<input />Defines an input controlSTF
<textarea>Defines a multi-line text input controlSTF
<button>Defines a push buttonSTF
<select>Defines a select list (drop-down list)STF
<optgroup>Defines a group of related options in a select listSTF
<option>Defines an option in a select listSTF
<label>Defines a label for an input elementSTF
<fieldset>Defines a border around elements in a formSTF
<legend>Defines a caption for a fieldset elementSTF
<isindex>Deprecated. Defines a searchable index related to a documentTF
Frames  
<frame />Defines a window (a frame) in a framesetF
<frameset>Defines a set of framesF
<noframes>Defines an alternate content for users that do not support framesTF
<iframe>Defines an inline frameTF
Images  
<img />Defines an imageSTF
<map>Defines an image-map STF
<area />Defines an area inside an image-mapSTF
Links  
<a>Defines an anchorSTF
<link />Defines the relationship between a document and an external resourceSTF
Lists  
<ul>Defines an unordered listSTF
<ol>Defines an ordered listSTF
<li>Defines a list itemSTF
<dir>Deprecated. Defines a directory listTF
<dl>Defines a definition listSTF
<dt>Defines a term (an item) in a definition listSTF
<dd>Defines a description of a term in a definition listSTF
<menu>Deprecated. Defines a menu listTF
Tables  
<table>Defines a tableSTF
<caption>Defines a table captionSTF
<th>Defines a header cell in a tableSTF
<tr>Defines a row in a tableSTF
<td>Defines a cell in a tableSTF
<thead>Groups the header content in a tableSTF
<tbody>Groups the body content in a tableSTF
<tfoot>Groups the footer content in a tableSTF
<col />Defines attribute values for one or more columns in a tableSTF
<colgroup>Defines a group of columns in a table for formattingSTF
Styles  
<style>Defines style information for a documentSTF
<div>Defines a section in a documentSTF
<span>Defines a section in a documentSTF
Meta Info  
<head>Defines information about the documentSTF
<title>Defines the document titleSTF
<meta>Defines metadata about an HTML documentSTF
<base />Defines a default address or a default target for all links on a pageSTF
<basefont />Deprecated. Defines a default font, color, or size for the text in a pageTF
Programming  
<script>Defines a client-side scriptSTF
<noscript>Defines an alternate content for users that do not support client-side scriptsSTF
<applet>Deprecated. Defines an embedded appletTF
<object>Defines an embedded objectSTF
<param />Defines a parameter for an objectSTF
(Source: w3c.com)

Resources:


1 Commercial Software:
Software
Author/Vendor
Official Web/Download Site
Dreamweaver
Adobe
http://www.adobe.com/products/dreamweaver.html
Contribute
Adobe
http://www.adobe.com/products/contribute.html
MS MS Visual Studio Professional Microsoft
http://www.microsoft.com/visualstudio/en-us

2. Free Html Editor Released under GPL

Software
Author/Vendor
Official Web/Download Site
Kompozer
Fabien Cazenave
 (Lead Developer)
http://kompozer.net/
Kompozer is a community-driven WYSIWYG HTML editor fork of NVU. It's a super-fast, very reliable, standards conformant engine maintained on a daily basis by a wide community of developers. Its remarkable support of XML, CSS and JavaScript offers the best authoring platform on the market. Its architecture based on XUL makes it the most extensible editing tool ever.

3. Free Html Editor Released under Other Free License
Software
Author/Vendor
Official Web/Download Site
MS Frontpage
Microsoft
http://www.microsoft.com/download/en/details.aspx?displaylang=EN&id=3942
MS Visual Studio Express
Microshoft
http://www.microsoft.com/express

4. Online Html Editor
Using online software gains a inertia in recent years. All the online editors are featured by the open source tradition of internet and released under various kinds of free license. Among them the CKEditor is the most popular one and the developer also offers a commercial license to those corporate customers adopting a policy forbidding the use of freeware.
Official Web/Download Site
License
Remarks
http://www.onlinehtmleditor.net/ LGPL and ?
Preview available
http://ckeditor.com/ GPL, LGPL, MPL &
CDL (commercial license)
Ckeditor is not exactly an online editor. It work within a web-page so it it designed for web-developer. We feel that this is an excellent WYSIWYG editor, very close to a conventional html editor. For many companies and products, Open Source licenses are not an option. Thus a commercial license, the Closed Distribution License (CDL), has been introduced.

Practicum 1:


1. Start a WYSIWYG Html editor.  If you don't have one, download Kompozer or any Html editor from the above URLs and install it to your computer. Read our disclaimer and the license of the software at first.

2. Get familiar with the interface with the software. Try to switch among different edit modes and experience other tools such as the site manager, ftp uploader, CSS editor, etc.

3. On your computer, open a new folder for keeping you site project. This is also the root directory of the site to be built. Open a new file and name it as index.html. Save it to the said folder.

4. On the menu bar, click "Format" and choose "Page Tile and Properties" command. Enter the "meta" data in the "head" of this web page including "title", "author", "description", and "language". If you are not sure, use default value for "writing direction" and "character set". "ISO 8859-1" is an international code set covering almost all the characters of most countries in the world.

5. Use a scrap paper to draft a layout of a simple web page. Divide the page into rectangular blocks representing the header, menu bar, side bar, content, footer and or other elememt. Then use a set of tables to build the blocks in accordance with the draft layout from outside to the inner blocks.

6. Use the command in the drop down menu of table to set the properties of table such as background color, width, floating mode and so on.

7. Check the source code whenever you change the properties. Think about how it works.

8. Enter Text in the tables from the top to the bottom.

9. Check the source code whenever you change the properties. Think about how it works.


References Links