6.

HTML Editors and Tools:

An HTML editor is a program for editing HTML, the markup of a web page. Although
the HTML markup in a web page can be controlled with any text editor,
specialized HTML editors can offer convenience and added functionality.
6.1 Different HTML editors and tools

HTML editor is a software used for writing code in HTML, which is used for structuring
and creating websites. Even though codes can be written from scratch using a normal text
editor, HTML editors provide a great deal of ease to the developers by ensuring hassle-free
coding.
a. Dreamweaver

Dreamweaver is a software program for designing web pages, essentially a more

fully featured HTML web and programming editor. The program provides
a WYSIWYG (what you see is what you get) interface to create and edit web pages.
Dreamweaver supports many markup languages, including HTML, XML, CSS,
and JavaScript.
Features of Dreamweaver
 It is important tool in the domain of web designing.
 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.
 Dreamweaver provides a dynamic display and builds web-pages that can fit
on any screen.
 The features of preview enable the developers to know how exactly their web
page would look, before publishing it.
 Multi-Monitor support feature for Windows helps to view web pages on
multiple monitors.

b. 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++.
 Notepad++ has a familiar environment as most of the windows’ software and has a
minimalist interface. It supports changing themes and color-coding.

Features Notepad ++
 It is a lightweight software i.e. smaller program size.
 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.
 It is a super lightweight editor with color-coding.

c. NetBeans

NetBeans IDE is a free and open source integrated development environment for
application development on Windows, Mac, Linux, and Solaris operating systems.
The IDE simplifies the development of web, enterprise, desktop, and mobile
applications that use the Java and HTML5 platforms.
NetBeans also has a large plugin marketplace, and developers are encouraged to
write and share their own plugins.

d. Eclipse

Eclipse is an open-source platform of extensible software development application

frameworks, tools and run times that was initially created as a Java-based integrated
development environment (IDE).

Eclipse’s runtime system is based on a collection of Equinox Open Services

Gateway Initiative (OSGI) runtime-built open-source projects covering Java IDE,
static/dynamic languages, thick/thin-client and server-side frameworks,
modeling/business reporting and embedded/mobile systems.

Although Eclipse was developed for Java applications, plug-ins allow programmers
to develop applications with other languages, including HTML, C, C++, COBOL,
Perl, PHP and Python.
6.2 Graphical and Animation tools

Graphical tool is a software application or platform that makes use of visual effects to
improve any content. Animation tools are a vital part of the process for a digital artist, game
developer or character designer. This roundup gives you some of the best tools for creating
2D animation. There's a focus on gaming, using pixel art to vector-based graphics.
i. Adobe Photoshop

Adobe Photoshop is software that is extensively used for raster image editing,
graphic design and digital art. It makes use of layering to allow for depth and
flexibility in the design and editing process, as well as provide powerful editing
tools, that when combined, are capable of just about anything.
Photoshop is specifically designed to allow users to create and edit raster images in
multiple layers. These overlays or layers can support transparency and can also act
as masks or filters that can alter underlying images in the layers below them.
Shadows and other effects such as alpha compositing can be applied. It is also
possible of apply several color models to these layers – CMYK, RGB, Spot Color,
and Duotone and Lap color space.
Photoshop offers 2D image manipulation, 3D image manipulation, Compositing,
video editing and video analysis etc.

ii. MS Paint

Microsoft Paint or MS Paint (MSP) is a legacy graphics drawing program that has
been shipped with all versions of Windows. MSP is an easy way to create different
kinds of graphics, with tools such as brushes, erasers, pens and shape generators.

MSP allows Windows users not only to view graphics files, but also to edit them or
create their own graphics. With tools like color fillers, complex line generators,
image pasting and even a text tool for adding text in various fonts and sizes, MSP
has provided generations of Windows users with ways to integrate more
sophisticated graphics into documents and images.
MSP can read and save images in various formats, including .BMP, .PNG, .JPG, etc.

iii. Flash

Adobe Flash is a proprietary application development platform developed by Adobe

Systems. The primary focus of the Flash platform is the creation of Rich Internet
 applications (RIA), which combine graphics, animation, video and sound for an
enhanced Web user experience.
Basic features of Flash include simple vector-based drawing tools, media effects,
and simple and complex interactions.
6.3 Adding Sounds and Animation to the web page

The <embed> tag in HTML is used for embedding external applications which are
generally multimedia content like audio or video into an HTML document. It is used as a
container for embedding plug-ins such as flash animations. This tag is a new tag in HTML
5, and it requires only starting tag.
a) Adding Sound
We can add external sound in web page using <embed> tag.

Examples:

<! DOCTYPE html>

<html>
<head>
<title>Embed Tag</title>
</head>
<body>
<q>Maisap</q> song.
<br/>
<embed src="maisap.mp3">
</body>
</html>

Output:
b) Adding Animation

We can also add external animation in html using <embed> tag.

<! DOCTYPE html>

<html>
<head>
<title> Embed Demo </title>
</head>
<body>

<embed type="video/webm" src="kutu.webm"

width="400" height="300">

</body>
</html>

Output: