HTML Editors – Web Page Authoring Tools

Web authoring tools and HTML editors range from simple text editors to high powered graphical authoring tools and content management systems. HTML editors make it easy to write web pages. While it is possible to write a web page using just the text editor on your computer, most web designers find that it is much more efficient to use an HTML editor. HTML editors give you features that are not usually available in plain text editors.

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.

Types of HTML Editors

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

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.

Example ; notepad and editplus

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.

WYSIWYG HTML editors

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 within a web browser. 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.

There are many online WYSIWYG HTML editors, some of them are:

CLEditor
CKEditor
OpenBEXI
TinyMCE

HTML-Kit is a free text editor with a lot of features. It’s one of the more popular text editors available for Windows. It has tag completion and HTML and CSS validation and a lot of features you wouldn’t expect in free software. The only issue I have with it is that it doesn’t default to HTML, you have to convert your documents to that. Many of the About.com Guides use HTML-Kit because it is so easy to extend and make macros for. It is also one of the only free editors I’ve found with support for accessibility validating.

In computer graphics, graphics software or image editing software is a program or collection of programs that enable a person to manipulate visual images on a computer.

Image editors usually have a list of special effects that can create unusual results. Images may be skewed and distorted in various ways. Scores of special effects can be applied to images which include various forms of distortion, artistic effects, geometric transforms and texture effects, or combinations thereof.

Image editors are capable of altering an image to be rotated in any direction and to any degree. Mirror images can be created and images can be horizontally flipped or vertically flopped.

Image editor features

Image size alteration
Cropping an image
Removal of unwanted elements
Selective color change
Image orientation
Enhancing images
Sharpening and softening images
Selecting and merging of images
Slicing of images
Change color depth
Contrast change and brightening
Color adjustments

Inkscape is an open source vector graphics editor much like Adobe Illustrator, CorelDraw, and Xara X.

Fireworks is Adobe’s image editing software for the web designers. It excels in several areas over its big brother Photoshop, namely in high-fidelity prototyping of sites and a workspace environment that’s optimized for web designers

GIMP – which stands for the GNU Image Manipulation Program – is a feature-packed and powerful open source image editor that can be used in all major operating systems (Linux, Mac, and Windows). It has a customizable interface so that you can easily set the view and behavior of GIMP.It has a huge set of retouching tools that will allow you to perform advanced image retouching and manipulation. The GIMP outputs your work in many common formats like JPG, GIF, PNG, TIFF, and even PSD (Photoshop’s native file format).

Photoshop is what comes to mind when image editing is involved there’s very little that can be said about it that hasn’t been said already.

Overview

Web design involves the structure of the website including the information architecture (navigation schemes and naming conventions), the layout or the pages (wireframes or page schematics are created to show consistent placement of items including functional features), and the conceptual design with branding.

All websites should begin with a clear strategy so that it is apparent what they are trying to achieve. The strategy then enables the design to fulfill defined goals.

Content

Such elements as text, forms, images (GIFs, JPEGs, Portable Network Graphics) and video can be placed on the page using HTML/XHTML/XML tags. Older browsers may require Plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc. to display some media, which are embedded into web page by using HTML/XHTML tags.

Improvements in browsers’ compliance with W3C standards prompted a widespread acceptance and usage of XHTML/XML in conjunction with Cascading Style Sheets (CSS) to position and manipulate web page elements and objects.

Typically web pages are classified as static or dynamic:

Static pages don’t change content and layout with every request unless a human (web master/programmer) manually updates the page. A simple HTML page is an example of static content.
Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user’s computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.

With growing specialization in the information technology field there is a strong tendency to distinguish between web design and web development. Web design is a kind of graphic design intended for the development and styling of objects of the Internet’s information environment to provide them with high-end consumer features and aesthetic qualities.

This definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.The process of designing web pages, web sites, web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography.

Markup languages (such as HTML, XHTML and XML)
Style sheet languages (such as CSS and XSL)
Client-side scripting (such as JavaScript)
Server-side scripting (such as PHP and ASP)
Database technologies (such as MySQL and PostgreSQL)
Multimedia technologies (such as Flash and Silverlight)

Web pages and websites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the webmaster or changes in the computing environment (such as the site’s associated database having been modified).

Functional Issues involved in Web Site Creation

States major site goals
Clearly state the purpose of the website.
Why do you need the website?
What do you want to accomplish with the site?
Clearly define the target audience
- Age
- Occupation
- Sex
- Education
- Race
- Computer literacy
- Technologies they can understand
Major team members & their responsibilities
Content creators & technology needs
Defines production issues including budgets, schedules & delivery dates
Determine approximate number of site pages
Define & document functionality issues such as target browsers, css, etc.
Define site maintenance team, have them involved from the beginning
Risk Management