HTML editor

From Wikipedia, the free encyclopedia

HTML

Character encodings
Dynamic HTML
Font family
HTML editor
HTML element
HTML scripting
Layout engine comparison
Style Sheets
Unicode and HTML
W3C
Web browsers comparison
Web colors
XHTML

 This box: view  talk  edit 

An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version management systems such as CVS or Subversion.

Contents

[edit] Types

There are various forms of HTML editors: text, object and WYSIWYG (What You See Is What You Get) editors.

[edit] Text editors

Text (source) editors intended for use with HTML usually provide syntax highlighting. Templates, toolbars and keyboard shortcuts may quickly insert common HTML elements and structures. Wizards, tooltip prompts and auto-completion may help with common tasks.

Text HTML editors commonly include either built-in functions or integration with external tools for such tasks as source and version control, link-checking, code checking and validation, code cleanup and formatting, spell-checking, uploading by FTP or WebDAV, and structuring as a project.

Text editors require user understanding of HTML and any other web technologies the designer wishes to use like CSS, JavaScript and server-side scripting languages.

[edit] Object editors

Some editors allow alternate editing of the source text of objects in more visually organized modes than simple color highlighting, but in modes not considered WYSIWYG. Some WYSIWYG editors include the option of using palette windows that enable editing the text-based parameters of selected objects. These palettes allow either editing parameters in fields for each individual parameter, or text windows to edit the full group of source text for the selected object. They may include widgets to present and select options when editing parameters. Adobe GoLive provides an outline editor to expand and collapse HTML objects and properties, edit parameters, and view graphics attached to the expanded objects.

[edit] WYSIWYG HTML editors

Amaya HTML editor
Amaya HTML editor
Nvu HTML editor
Nvu HTML editor
Quanta Plus HTML editor
Quanta Plus HTML editor

So-called WYSIWYG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. Some editors, such as ones in the form of browser extensions allow editing actually within a browser. Most WYSIWYG editors also have a mode to edit HTML code by hand as described above. Because using a WYSIWYG editor does not require any HTML knowledge, they are easier for an average computer user to get started with.

The WYSIWYG view is achieved by embedding a layout engine based upon that used in a web browser. The layout engine will have been considerably enhanced by the editor's developers to allow for typing, pasting, deleting and moving the content. The goal is that, at all times during editing, the rendered result should represent what will be seen later in a typical web browser.

Two examples are Dreamweaver and WebEditor+.

[edit] Criticisms of WYSIWYG editors

WYSIWYG editors facilitate the generation of web pages by people with little experience or knowledge of HTML. Experienced hand coders are prone to criticize the editing technology for the neglectful editing habits of the person editing, analogous to faulting automobile technology for reckless driving. Because WYSIWYG editors make it easy to build web pages, the editing technology is often faulted for the inexperience of the person editing, analogous to faulting digital cameras for amateur photography. Because WYSIWYG editors make complex visual layouts easier to create, the editing technology is often faulted for problems due to complexity of the layout.

WYSIWYG editors are sometimes criticized for the following reasons:

  • Depending on the version, WYSIWYG may not automatically generate the most efficient HTML and CSS code. However the code can be edited or generated by hand in WYSIWYG editors. Although third-party optimizers offer solutions to problems from automatically generated code, many of them simply remove extra spaces, rather than looking into the code to remove unneeded structures like compilers do. Unless the optimizer operates as a plug-in for the editor, it cannot take the web author's optimal preferences into account when content is created, resulting in mis-optimized code.
  • WYSIWYG editors make it easier to create layouts with HTML tables as an alternative to or combined with CSS. This is not a criticism of WYSIWYG editors as much as it is a criticism of HTML tables. Table based layouts are considered less efficient to download than CSS. Tables add complexity and obfuscates the documents' structures, resulting in code that is more difficult to maintain in text editing modes than CSS. WYSIWYG editors allow for table-free layouts and CSS as well as text editors allow for HTML tables.
  • Users may be disappointed that the same page is rendered differently in different browsers, on various screen sizes, and on varying monitor settings. This criticism is also misplaced. With the exception of Microsoft FrontPage, WYSIWYG editors mainly use W3C standard code. There are many factors outside of the page designer's control that can affect this—the CSS specification and modern browsers even allow users to override a page author's settings. The inconsistent browser display problem is due to inconsistent web browser technology, not WYSIWYG editing technology. see Difficulties in achieving WYSIWYG below.
  • Documents edited visually without regard to semantic structure can be incomprehensible to search engines, audio and text-only browsers. This is also a criticism of editing habits, not WYSIWYG editing technology. Search engines and browser technology may adapt to the habits of people as well as people will adapt to machines. Artificial intelligence may eventually enable machines to recognize and correct even the rarest problems in both editing and browsing.

[edit] WYSIWYM editors

What You See Is What You Mean (WYSIWYM) is an alternative paradigm to the WYSIWYG editors above. Instead of focusing on the format or presentation of the document, it preserves the intended meaning of each element. For example, page headers, sections, paragraphs, etc. are labeled as such in the editing program, and displayed appropriately in the browser.

[edit] Valid HTML code

HTML is a structured markup language. There are certain rules on how HTML must be written if it is to conform to W3C standards for the World Wide Web. Following these rules means that web sites are accessible on all types and makes of computer, to able-bodied and disabled people, and also on wireless devices like mobile phones and PDAs, with their limited bandwidths and screen sizes.

Unfortunately most HTML documents on the web are not valid according to W3C standards. According to one study only about 1 out of 141 is valid. Even those syntactically correct documents may be inefficient due to an unnecessary use of repetition, or based upon rules that have been deprecated for some years. Current W3C recommendations on the use of CSS with HTML were first formalised by W3C in 1996[1] and have been revised and refined since then. See CSS, XHTML, W3C's current CSS recommendation and W3C's current HTML recommendation.

These guidelines emphasise the separation of content (HTML or XHTML) from style (CSS). This has the benefit of delivering the style information once for a whole site, not repeated in each page, let alone in each HTML element. WYSIWYG editor designers have been struggling ever since with how best to present these concepts to their users without confusing them by exposing the underlying reality. Modern WYSIWYG editors all succeed in this to some extent, but none of them has succeeded entirely.

People who use text editors can generally fix such problems immediately, once they become aware of them. People find it frustrating when such errors come from WYSIWYG editors.

However a web page was created or edited, WYSIWYG or by hand, in order to be successful among the greatest possible number of readers and viewers, as well as to maintain the 'worldwide' value of the Web itself it can be argued that, first and foremost, it should consist of valid markup and code. Some would argue that it should not be delivered by a designer to his or her customer, and not be considered ready for the World Wide Web, until its HTML and CSS syntax has been successfully validated using either the free W3C validator services (W3C HTML Validator and W3C CSS Validator) or some other trustworthy alternatives.

Others would argue[2] that publishing useful information, as soon as possible, should be first and foremost.

Whatever software tools are used to design, create and maintain web pages, there is little doubt that the quality of the underlying HTML is dependent on the skill of the person who works on the page. Some knowledge of HTML, CSS and other scripting languages as well as a familiarity with the current W3C recommendations in these areas will help any designer produce better web pages, with a WYSIWYG HTML editor and without[3].

[edit] Difficulties in achieving WYSIWYG

A given HTML document will have an inconsistent appearance on various platforms and computers for several reasons:

Different browsers and applications will render the same markup differently.
The same page may display slightly differently in Internet Explorer and Firefox on a high-resolution screen, but it will look very different in the perfectly valid text-only Lynx browser. It needs to be rendered differently again on a PDA, an internet-enabled television and on a mobile phone. Usability in a speech or braille browser, or via a screen-reader working with a conventional browser, will place demands on entirely different aspects of the underlying HTML. Printing the page, via different browsers and different printers onto various paper sizes, around the world, places other demands. With the correct use of modern HTML and CSS there is no longer any need to provide 'Printable page' links and then have to maintain two versions of the whole site. Nor is there any excuse for pages not fitting the user's preferred paper size and orientation, or wasting ink printing solid background colours unnecessarily, or wasting paper reproducing navigation panels that will be entirely useless once printed out[4].
Browsers and computer graphics systems have a range of user settings.
Resolution, font size, colour, contrast etc can all be adjusted at the user's discretion, and many modern browsers allow even more user control over page appearance[5]. All an author can do is suggest an appearance.
Web browsers, like all computer software, have bugs
They may not conform to current standards. It is hopeless to try to design Web pages around all of the common browsers current bugs: each time a new version of each browser comes out, a significant proportion of the World Wide Web would need re-coding to suit the new bugs and the new fixes! It is generally considered much wiser to design to standards, staying away from 'bleeding edge' features until they settle down, and then wait for the browser developers to catch up to your pages, rather than the other way round[6]. In this regard, no one can argue that CSS/XHTML is still 'cutting edge' as there is now widespread support available in common browsers for all the major features[7], even if many WYSIWYG and other editors have not yet entirely caught up[8].

What you see may be what most visitors get, but it is not guaranteed to be what everyone gets.

[edit] Comparison of HTML editors

The following tables compare general and technical information for a number of (purportedly) WYSIWYG HTML editors. Please see the individual products' articles for further information, and Comparison of text editors for information on text editors, many of which have features to assist with writing HTML. This article is not all-inclusive or necessarily up-to-date.

[edit] General information

Basic general information about the software: creator/company, license/price etc.

Editor Version Creator Cost (USD) Software license
Amaya 9.53 W3C, INRIA Free W3C
Aptana Milestone 7 Aptana Free EPL
CoffeeCup HTML Editor 2007 CoffeeCup Software US $49 Closed source
Dreamweaver 8 Adobe Systems (formerly Macromedia) US $399 Closed source
Contribute 4 Adobe Systems (formerly Macromedia) US $149 Closed source
FrontPage 2003 Microsoft US $199 Closed source
HomeSite 5.5 Adobe Systems (formerly Macromedia) USD $99 EUR €123 Adobe Acrobat License
Microsoft Expression Web Designer 2006 Microsoft US $299 Closed source
Mozilla Composer 1.7.13 Mozilla Foundation Free MPL/GPL/LGPL
Nvu 1.0 Daniel Glazman Free MPL/GPL/LGPL
OPENBEXI HTML Builder 1.5 arcazj Free GPL
RapidWeaver 3.5.1 Realmac Software $39.95 Closed source
SeaMonkey Composer 1.1.1 SeaMonkey Council Free MPL/GPL/LGPL
Serif WebPlus 10 Serif US $79.99 Closed source
WebEditor+ 1.0 anjoka, Inc. US $19.95/mo. Closed Source

[edit] Operating system support

Editor Windows Mac OS X Mac OS 9 Linux BSD Unix
Amaya Yes Yes No Yes source only source only
Aptana Yes Yes No Yes No No
CoffeeCup HTML Editor Yes No No No No No
Mozilla Composer Terminated (1.7.13) Terminated (1.7.13) Dropped (1.2.1) Terminated (1.7.13) Terminated (1.7.13) Terminated (1.7.13)
Dreamweaver Yes Yes Dropped No No No
Microsoft FrontPage Yes No No[1] No No No
Nvu [2] Yes Yes No? Yes Yes No
SeaMonkey Composer Yes Yes No Yes Yes Yes

[edit] Editor features

Editor FTP Upload Server-side scripting Shared editing Spell checking Templates
Amaya No No No Yes No
Aptana Yes No Yes No Some (i.e. Snippets)
CoffeeCup HTML Editor Yes No No Yes Yes
Dreamweaver Yes Yes Yes Yes Yes
Microsoft FrontPage Yes Yes Yes Yes Yes
Nvu Yes No No Yes Yes
SeaMonkey Composer Yes? No No Yes No

[edit] Web technology support

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
CoffeeCup HTML Editor Yes Yes No Yes No Yes No No Yes Yes No
Dreamweaver Yes Yes No Yes Yes Yes Partial ? Yes ? Yes
FrontPage Partial Yes Yes Yes Yes Yes Yes No No No No
Nvu Yes No No Yes No Yes No No No No No
SeaMonkey Composer No Yes No Yes No No No No No No ?

[edit] Image format support

Editor JPEG GIF PNG MNG TIFF SVG PDF
Amaya Yes Yes Yes ? Yes Yes No
Aptana Yes Yes Yes No (coming soon) Yes Depends Depends
CoffeeCup HTML Editor Yes Yes Yes No Yes No No
Dreamweaver Yes Yes Yes No No No ?
FrontPage[3] Yes Yes Yes Depends Yes? Depends Depends
Nvu Yes Yes Yes No No No No
SeaMonkey Composer Yes Yes Yes No No No No

[edit] See also


[edit] References

  1. ^ A version for Mac OS was released around 1998, but has since been discontinued.
  2. ^ Nvu can be built successfully on any platform with the Netscape Portable Runtime.
  3. ^ Actual amount of supported formats depend on installed converter. FrontPage uses Microsoft Office converters.

[edit] External links