Index

1.5 Html Editor

Session 1 WWW Elementary

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:

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
Amaya	W3C, INRIA	Free	W3C
Aptana	Aptana	Free	APL/GPL
Arachnophilia	Paul Lutus	Free	Careware
Bluefish	Bluefish	Free	GPL
BlueGriffon	Disruptive Innovations	Free	MPL/GPL/LGPL
Claris Homepage(Discontinued)	Claris		Proprietary
Coda	Panic, Inc.	$99	Proprietary
CoffeeCup HTML Editor	CoffeeCup Software	US $49	Proprietary
Contribute	Adobe Systems (formerly Macromedia)	US $199	Proprietary
Dreamweaver	Adobe Systems (formerly Macromedia)	US $399	Proprietary
EZGenerator	Image-Line	US $129	Proprietary
Freeway	Softpress	US $79(Express)/$249(Pro)	Proprietary
GoLive (Discontinued)	Adobe Systems (formerly GoLive Systems)	US $399	Proprietary
HTML-Kit	Chami.com	Free ($79 optional registration)	Proprietary
KompoZer	Kaze	Free	MPL 1.1/GPL 2.0/LGPL 2.1
Microsoft Expression Web	Microsoft	US $129	Proprietary
Microsoft FrontPage(Discontinued)	Microsoft	US $199	Proprietary
Microsoft FrontPage Express (Discontinued)	Microsoft	Free	Proprietary
Microsoft SharePoint Designer	Microsoft	Free	Proprietary
Microsoft Visual Web Developer	Microsoft	Free	Proprietary
Mozilla Composer(Discontinued)	Mozilla Foundation	Free	MPL/GPL/LGPL
Nvu (Discontinued)	Linspire / Daniel Glazman	Free	MPL/GPL/LGPL
OpenBEXI	Arcazj	Free	GPL
OpenOffice.org	Oracle Corporation (formerly Sun Microsystems)	Free	GPL
Quanta Plus	The Quanta Team	Free	GPL
RapidWeaver	Realmac Software	US $79	Proprietary
SeaMonkey Composer	SeaMonkey Council	Free	MPL/GPL/LGPL
WebStorm IDE	WebStorm IDE	US $69	Proprietary
Editor	Creator	Cost (USD)	Software licens

(Source: wikipedia)

1.5.2.2 Editing Feature

Editor	WYSIWYG	FTP Upload	WebDAV Upload	Server-side scripting	Shared editing	Spell checking	Templates	Templates Update Sync	Page Preview	Form Handler
Amaya	Yes	No	Yes	No	No	Yes	Partial[4]	No	?	?
Aptana	No	Yes	?	Yes (via plugins)	Yes	No	Some (i.e. Snippets)	?	Yes	?
Arachnophilia	No	?	?	?	?	Yes	Yes	?	Yes	?
Bluefish	No	Yes	Yes	Yes	No	Yes	Yes	Yes	Yes	?
BlueGriffon	Yes	Yes (via add-on)[5]	No	?	No	Yes	Yes	No	Yes	?
Claris Homepage	Yes	Yes	No	No	No	Yes	Yes	No	Yes	?
CoffeeCup HTML Editor	Yes	Yes	?	No	No	Yes	Yes	?	Yes	?
Dreamweaver	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
EZGenerator	Yes	Yes	?	?	?	Yes	Yes	?	Yes	?
Freeway	Yes	Yes	No	Yes	No	Yes	Yes	?	Yes	?
GoLive	Yes	Yes	Yes	Yes	No	Yes	Yes	?	Yes	?
HTML-Kit	Yes	Yes	?	Yes	No	Yes	Yes	?	Yes	?
KompoZer	Yes	Yes	No	No	No	Yes	Yes	No	Yes	?
Microsoft Expression Web	Yes	Yes	Yes	Yes	Yes	Yes	Yes	?	Yes	?
Microsoft FrontPage	Yes	Yes	Yes	Yes	Yes	Yes	Yes	?	Yes	?
Microsoft SharePoint Designer	Yes	Yes	Yes	Yes	Yes	Yes	Yes	?	Yes	?
Microsoft Visual Web Developer	Yes	Yes	Yes	Yes	Yes	Yes	Yes	?	Yes	?
Nvu	Yes	Yes	Yes	No	No	Yes	Yes	No	Yes	?
OpenBEXI	Yes	Yes	?	Yes	No	Yes	Yes	Yes	Yes	?
OpenOffice.org	Yes	?	?	?	?	Yes	?	?	Yes	?
Quanta Plus	Yes	Yes	No (cvs instead)	Yes	Yes	Yes	Yes	Yes	Yes	?
RapidWeaver	Yes	Yes	No	Yes	No	Yes	Yes	?	Yes	?
SeaMonkey Composer	Yes	Yes	Yes	No	No	Yes	No	No	Yes	?
Editor	WYSIWYG	FTP Upload	WebDAV Upload	Server-side scripting	Shared editing	Spell checking	Templates	Templates Update Sync	Page Preview	Form Handler

1.5.2.2 Editing Feature

Editor	CSS2	Frames	Java	JavaScript	XSLT	XHTML	MathML	XForms	RSS	Atom	XPath
Amaya	Partial	No	No	No	No	Yes	Yes	No	No	No	?
Aptana	Yes	Yes	Yes	Yes	No	Yes	No	No	No	No	No
Arachnophilia	?	?	?	?	?	?	?	?	?	?	?
Bluefish	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
BlueGriffon	Yes	?	?	?	?	Yes	Yes (via add-on)	?	?	?	?
Claris Homepage	Partial	Yes	No	Yes	No	No	No	No	No	No	No
CoffeeCup HTML Editor	Yes	Yes	No	Yes	No	Yes	No	No	Yes	Yes	No
Dreamweaver	Yes	Yes	Yes	Yes	Yes	Yes	Partial	?	Yes	?	Yes
Freeway	Yes	Yes	Partial	Yes	Yes	Yes	No	No	Yes	No	No
GoLive	Yes	Yes	Yes	Yes	No	Yes	No	No	No	No	No
HTML-Kit	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	No	No	No
KompoZer	Yes	No	Yes	Yes	No	Yes	No	No	No	No	No
Microsoft Expression Web	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes
Microsoft FrontPage	Partial	Yes	Yes	Yes	Yes	Yes	Yes	No	No	No	No
Microsoft SharePoint Designer	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes
Microsoft Visual Web Developer	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes
Nvu	Yes	No	No	Yes	No	Yes	No	No	No	No	No
OpenBEXI	Yes	Yes	Yes	Yes	Yes	Yes	No	No	Yes	No	No
OpenOffice.org	Yes	Yes	?	Yes	?	?	?	?	?	?	?
Quanta Plus	Yes	Yes	Yes	Yes	Yes	Yes	?	Yes	Yes	?	Yes
RapidWeaver	Yes	Yes	No	Yes	No	Yes	No	No	Yes	No	No
SeaMonkey Composer	Yes	Yes	No	Yes	No	No	No	No	No	No	?
WebStorm IDE	Yes	Yes	No	Yes	Yes	Yes	No	No	?	?	Yes
Editor	CSS2	Frames	Java	JavaScript	XSLT	XHTML	MathML	XForms	RSS	Atom	XPath

(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

Tag	Description	DTD
Basic
<!DOCTYPE>	Defines the document type	STF
<html>	Defines an HTML document	STF
<body>	Defines the document's body	STF
<h1> to <h6>	Defines HTML headings	STF
<p>	Defines a paragraph	STF
<br />	Inserts a single line break	STF
<hr />	Defines a horizontal line	STF
<!--...-->	Defines a comment	STF
Formatting
<acronym>	Defines an acronym	STF
<abbr>	Defines an abbreviation	STF
<address>	Defines contact information for the author/owner of a document	STF
<b>	Defines bold text	STF
<bdo>	Defines the text direction	STF
<big>	Defines big text	STF
<blockquote>	Defines a long quotation	STF
<center>	Deprecated. Defines centered text	TF
<cite>	Defines a citation	STF
<code>	Defines computer code text	STF
<del>	Defines deleted text	STF
<dfn>	Defines a definition term	STF
<em>	Defines emphasized text	STF
<font>	Deprecated. Defines font, color, and size for text	TF
<i>	Defines italic text	STF
<ins>	Defines inserted text	STF
<kbd>	Defines keyboard text	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<s>	Deprecated. Defines strikethrough text	TF
<samp>	Defines sample computer code	STF
<small>	Defines small text	STF
<strike>	Deprecated. Defines strikethrough text	TF
<strong>	Defines strong text	STF
<sub>	Defines subscripted text	STF
<sup>	Defines superscripted text	STF
<tt>	Defines teletype text	STF
<u>	Deprecated. Defines underlined text	TF
<var>	Defines a variable part of a text	STF
<xmp>	Deprecated. Defines preformatted text
Forms
<form>	Defines an HTML form for user input	STF
<input />	Defines an input control	STF
<textarea>	Defines a multi-line text input control	STF
<button>	Defines a push button	STF
<select>	Defines a select list (drop-down list)	STF
<optgroup>	Defines a group of related options in a select list	STF
<option>	Defines an option in a select list	STF
<label>	Defines a label for an input element	STF
<fieldset>	Defines a border around elements in a form	STF
<legend>	Defines a caption for a fieldset element	STF
<isindex>	Deprecated. Defines a searchable index related to a document	TF
Frames
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<noframes>	Defines an alternate content for users that do not support frames	TF
<iframe>	Defines an inline frame	TF
Images
<img />	Defines an image	STF
<map>	Defines an image-map	STF
<area />	Defines an area inside an image-map	STF
Links
<a>	Defines an anchor	STF
<link />	Defines the relationship between a document and an external resource	STF
Lists
<ul>	Defines an unordered list	STF
<ol>	Defines an ordered list	STF
<li>	Defines a list item	STF
<dir>	Deprecated. Defines a directory list	TF
<dl>	Defines a definition list	STF
<dt>	Defines a term (an item) in a definition list	STF
<dd>	Defines a description of a term in a definition list	STF
<menu>	Deprecated. Defines a menu list	TF
Tables
<table>	Defines a table	STF
<caption>	Defines a table caption	STF
<th>	Defines a header cell in a table	STF
<tr>	Defines a row in a table	STF
<td>	Defines a cell in a table	STF
<thead>	Groups the header content in a table	STF
<tbody>	Groups the body content in a table	STF
<tfoot>	Groups the footer content in a table	STF
<col />	Defines attribute values for one or more columns in a table	STF
<colgroup>	Defines a group of columns in a table for formatting	STF
Styles
<style>	Defines style information for a document	STF
<div>	Defines a section in a document	STF
<span>	Defines a section in a document	STF
Meta Info
<head>	Defines information about the document	STF
<title>	Defines the document title	STF
<meta>	Defines metadata about an HTML document	STF
<base />	Defines a default address or a default target for all links on a page	STF
<basefont />	Deprecated. Defines a default font, color, or size for the text in a page	TF
Programming
<script>	Defines a client-side script	STF
<noscript>	Defines an alternate content for users that do not support client-side scripts	STF
<applet>	Deprecated. Defines an embedded applet	TF
<object>	Defines an embedded object	STF
<param />	Defines a parameter for an object	STF

(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.