Unit – III

HTML Editors & Tools: Use of different HTML editors and tools like Netscape Communicator
and Microsoft Front Page etc.

When you should use an HTML Editor?

1. Developers prefer to use HTML editors when they want to have a full control over their code
and easily create their websites.
2. HTML editors are of great importance to the users who don’t have much knowledge of
HTML, as of now, and also those who need to generate source codes quickly.
3. HTML editors are highly beneficial for the sake of convenience as they successfully conceal
and correct the developers’ part of minor errors by syntax correction, auto-completion, simple
editing, etc.

Advantages of using HTML Editors

1. They are of great benefit since they allow the users to easily check their syntax, insert
commonly used HTML tags and structures and also provide auto-completion.
2. The code generated through an HTML editor can be translated to other languages such as
XML, JavaScript, etc. For example-NVU editor provides this translation functionality.
3. Website development can be very exhausting and cumbersome. With the help of online
HTML editors, it is possible to create websites with ease and at a faster rate.
4. HTML editors provide full control to the developer, hence helping him to delve deeper
into the source code and find the hidden intricacies.
5. HTML editors provide an interactive designing experience.

Types of HTML Editors

There are broadly two types of HTML Editors:

1. Textual HTML Editor

These are text-based editors where the developers can write their codes and compile them. The
code appears in the same manner we write it, thus it requires basic knowledge of HTML. Some
of these editors also provide features of making a project, managing all the files related to the
web, etc. Examples of HTML Text editors include-Notepad++, VSCode,Sublime Text.
2. WYSIWYG HTML Editor
’What you see is what you get’ is its full form. WYSIWYG are editors that provide the preview
of the output of the source code i.e. as it would appear on a browser. There is a drag and drop
feature available in most of them that eases the handling. It does not require any hardcore
knowledge of HTML, thus enabling non-technicals to easily develop websites. Examples
include-Adobe Dreamweaver, Amaya, BlueGriffon, etc.
HTML can be written in simple text editors such as Notepad or TextEdit, but other widely used
editors are:

1. Atom
Atom is an open source and free code editor. It was released by GitHub in 2014.

Key Features of Atom

It has 81 built-in packages and 8,700 additional packages that can be installed.
Since it’s an open-source text-editor, its code is available on GitHub and can be used by the
developers to extend and edit its source code.
Atom supports multiple sections within a single interface thus helping the developers to write
code side by side.
It also provides flexible auto-completion and syntax correction along with cross-platform editing.
Advantages
The teletype feature of Atom lets developers interact with their teammates and share their codes
in real time.
The feature of cross-platform editing enables developers to work across different Operating
Systems.
Developers can install new packages and build their own.
Smart auto-completion facilitates faster and smoother coding.
Multiple panes help to edit and compare code across different files.
Development Environment – Atom provides an aesthetic, user-friendly environment with an
option to preview the results of the code. It is easy to Download atom.

2. Notepad++
Notepad++ is a free, open-source, multi-language code editor which was initially developed for
Windows-based computers. It uses ‘Scintilla’ as the editing component and is written in C++.

Key Features of Notepad++

It is a lightweight software i.e. smaller program size. It is also available as an application on
mobiles and its source code is available on GitHub.
Since it is an open-source code editor, it is extendable and the users can add functionalities as per
their needs or add plugins from different communities.
It is customizable thus allowing the users to personalize the features as per their preferences.
Advantages
It is a super lightweight editor with color-coding.
Developers can customize its interface according to their preference.
Due to its extensibility, developers can add plug-ins and create their own.
Development Environment – Notepad++ has a familiar environment as most of the windows’
softwares and has a minimalist interface. It supports changing themes and color-coding. We can
easily Download Notepad++ and use it.

3. Sublime Text
It is a cross-platform editor with Python API. Its latest version was released on 29 January 2013.

Key Features
It has the provision of simultaneous editing i.e. it is possible to apply changes to several domains
at a particular time.
It provides many actions such as- command palette, file switching, goto symbols, multi-edit,
alignment, bracket-highlighter, etc.
Sublime falls under the category of freemium software i.e. we need to pay additional money to
enjoy all its features.
Some of the packages of sublime are open-source and are available on git.
Advantages
The ‘Goto Anything’ feature enables developers to open files with just a few keystrokes and
immediately go to words, lines or symbols.
The feature of multiple selections enables developers to make many changes at the same time
such as manipulate many lines at once.
Split Editing permits editing of files side-by-side which escalates the rate of development.
Easy Customization in Sublime using simple JSON files.
Development Environment – Sublime text provides a sophisticated and aesthetic development
environment which can also be customized by the developers.

4. Adobe Dreamweaver CC
Adobe Dreamweaver CC has been developed by Adobe Inc. However, it is a closed-source
software and works well only within an Adobe ecosystem.

Key Features
It has proven to be an important tool in the domain of web-designing using the aesthetic cloud
libraries of Adobe promoting colors,graphics,layers,etc.
It can be used as a text as well as WYSIWYG(what you see is what you get) editor i.e. code can
be edited with or without a visual guide.
This gives the developers additional features of previewing the end results of the code.
It is useful for full-stack development.
Advantages

Adobe Dreamweaver provides a dynamic display and builds web-pages that can fit on any
screen.
The feature of preview enables the developers to know how exactly their web page would look,
before publishing it.
The workspace is customizable, enabling the developers to see only the tools they need in order
to code.
Multi-monitor support feature for Windows helps to view web pages on multiple monitors.
Development Environment – Created by Adobe, Dreamweaver cc provides a magnificent
design and layout for the workspace. Anyone can easily Download Dreamweaver CC and use it.

5. Visual Studio Code

Visual Studio Code was developed by Microsoft as a multi-platform and multi-language
software.
Key Features
It has the features of built-in Git commands, debugging of code right from the editor, live
preview of the web from server, smart code-completion using IntelliSense and many more.
It’s a free and open-source software that is one of the most popular developers’ tool.
The most prominent feature of Visual Studio Code is its interactive debugger which enables
execution of debugging commands on the console.
IntelliSense of VS Code has proven to be extremely beneficial for code understanding,navigation
and refactoring.
Advantages
VS Code has an attractive User-Experience and a customizable workspace.
IntelliSense provides smart completions based on variables, functions and imported libraries.
With VS Code, it is possible to debug the code right from the editor, without any hassle.
Git commits can be made right from the editor.
Extensions are available to add new languages, debuggers or any other additional services. They
run as separate processes, thus not at the cost of speed, of the editor.
Development Environment – VS Code provides a customizable user environment wherein
developers can easily set its theme, layout, colors, etc. Downloading Virtual studio code is very
easy and fast process.

6. Netscape Communicator
Netscape Communicator (or Netscape 4) is a discontinued Internet suite produced by Netscape
Communications Corporation, and was the fourth major release in the Netscape line of browsers.
It was first in beta in 1996 and was released in June 1997. Netscape Communicator addressed the
problem of Netscape Navigator 3.x being used as both the name of the suite and the browser
contained within it by renaming the suite to Netscape Communicator. It included more
groupware features intended to appeal to enterprises.

In February 1998, Netscape announced that Mozilla.org would co-ordinate the development of
Netscape Communicator 5 as "a dedicated team within Netscape with an associated Web site that
will promote, foster and guide open dialog and development of Netscape's client source code.
However, the aging Communicator code proved to be difficult to work with, so it was
abandoned. The whole source code of Communicator was re-written by Mozilla, who were then
testing it as Mozilla Application Suite. Netscape, now owned by AOL, finally released
Communicator's successor Netscape 6 in November 2000, based on Mozilla Application Suite
with changes and additions. Minor updates to Communicator continued to be issued, culminating
in the release of Netscape Communicator 4.8 in August 2002.

7. Microsoft front Page

Following are some HTML Editors.

Graphical and Animation Techniques: Use of Different graphical and animation tools like Abode
Photoshop, Gif Animator etc.

A number of tools exist to simplify the job of creating and manipulating high-quality graphics
for your Web site. Here we list some advanced tools that carry the task of creating Web graphics
to a high level.
Many of these tools can assist you in creating “image maps” – images with clickable objects that
map to specific pages. Most image editing tools are “pixel-oriented.” Some of the newer tools
are “object-oriented.”
Use of Adobe Photoshop in Web design
Photo Shop is one of the most popular software programs for image editing. Web designers
prefer to create their designs in Photo Shop first then convert it into HTML format. Many times,
the designers do not handle the conversion jobs themselves but it is done by the coding experts.
Use of Gif Animator in Web Design
 This software is used for creating the gif animation for web pages that are inserted in web
page by using html.
 Animated GIF inserting to HTML is similar to image inserting. For example, you can
insert animated GIF to HTML with IMG tag:
<IMG SRC="animation1.gif">. Tag IMG must be inserted between and tags.