APEX INSTITUTE OF TECHNOLOGY

COMPUTER SCIENCE & ENGINEERING

Bachelor of Engineering (All Branches) - Elective
Web Development Fundamentals
CSO-453
Anuj Kumar Raghav (E13005)

Chapter 1.6: HTML Editors DISCOVER . LEARN . EMPOWER

Web Development Fundamentals : Course Objective

1. The course will focus on HTML, CSS, JavaScript.

2. The course will focus on jQuery, libraries and different frameworks for frontend
development.

3. The course will focus on Server-Side Scripting languages, hosting of web pages
and concepts of digital marketing.
Web Development Fundamentals : Course Objective

CO1 Define a basic webpage terminology.

CO2 Illustrate the concepts of webpage creation tools and techniques.
CO3 Apply the basic building block of construction of any static and dynamic webpage.

CO4 Interpret the complexity of frontend and backend web development.

CO5 Plan to construct a website.
HTML Editors
• HTML editors are used for creating and editing web pages.

• Notepad (Windows) and TextEdit (Mac), simple common editors are used for creating web
pages specially for beginners. However, it forces to type each HTML tag in full.

• Using simple editor is a good way to learn HTML.

• Types of Editors:

- Textual or Source Code HTML Editors

- WYSIWYG (What You See Is What You Get) or Visual Editors

4
Textual Editors
• These are text-based editors where developers can write their code and compile them.
• The code appears in the same manner we write it, thus it requires basic knowledge of
HTML.
• Some text editors allow editing of the markup tags in more organized and with good visuals
like color highlighting.
• 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 :- Notepad++, Atom, Sublime Text.

5
Notepad++
• Notepad++ is a free, open-source, multi-
language code editor which was initially
developed for Windows based computers.
• It is written in C++.
• 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.

Figure 1. HTML Code in Notepad++. [1]

6
 Sublime Text
• Sublime Text is a shareware cross-platform
source code editor with a python
application programming interface (API).
• It is packed with more advanced tools that
help in providing optimal performance
across operating systems.
• The most recent version also supports JSX
features of JavaScript, along with many
other programming languages.

Figure 2. Sublime Text interface. [2]

 Atom
• Atom is a free, open-source text and source code
editor for MacOS, Linux and Microsoft Windows.

• Most popular HTML editor in market.

• In addition to writing HTML code, Atom supports

multiple programming languages, such as JavaScript,
Node.js, and CSS.

• Atom is a desktop application built using web

technologies.

• It doesn’t come with a visual editor, still it offers a

live preview of your webpage. This way we can spot Figure 3. HTML sample code in Atom. [3]
errors easily and fix the code in the text editor.
8
WYSIWYG Editors
• WYSIWYG stands for “What You See Is What You Get”.
• WYSIWYG editors provide an editing interface which resembles how the page will be
displayed in a web browser.
• In addition, it also provides a visual interface that’s why they are also called Visual
Editors.
• With a WYSIWYG editor, users can add web page elements, such as headings, paragraphs,
or images without touching a line of code - making this type of HTML editor an excellent
option for beginners with little to no coding experience.
• Examples of WYSIWYG editors :- Adobe Dreamweaver, Amaya, Visual Studio Code, etc.

9
Dreamweaver
• Adobe Dreamweaver is a powerful program for
designing and building websites.
• Developed by Adobe Inc. However, it is a
closed-source software and works well only
within an Adobe ecosystem.
• 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.

Figure 4. Starting window of Dreamweaver. [4]

10
 Dreamweaver

Figure 5. Interface of Dreamweaver. [4]

11
 Microsoft Visual Studio
• Visual Studio Code was developed by Microsoft
as a multi-platform and multi-language software.

• Debugging of the code done right from the

editor, without any hassle.

• Extensions are available to add new languages,

debuggers or any other additional services.

• Development Environment – VS Code provides

a customizable user environment where
developers can easily set its theme, layout,
colors, etc. Figure 6. HTML code in Visual Studio. [5]

Task of the day: Study about CoffeeCup Visual Editor. 12

References
1. http://schoolsofweb.com/html-editors/
2. https://www.michaelcrump.net/getting-sublime-3-to-launch-your-html-page-in-a-browser-with-a-key-combo
/
3. https://o7planning.org/12433/install-atom-html-preview
4. https://www.oreilly.com/library/view/dreamweaver-cc-the/9781491948637/ch01.html
5. https://github.com/Microsoft/vscode/issues/36302
6. https://data-flair.training/blogs/html-editors/
7. https://en.wikipedia.org/wiki/HTML_editor

13
THANK YOU

For Queries, Write at :

[email protected]