Hypertext Markup  «Prev  Next»

Lesson 3 Using editors
Objective Describe the Types of editors used to create Web pages.

Web Page Editors in Modern Web Development

In the fast-evolving domain of web development, choosing the right editor is paramount for productivity, efficiency, and code quality. For an HTML front-end web developer, numerous editors are available, each offering a unique blend of features, integrations, and extensions to streamline the development process. This overview delves into the predominant types of editors leveraged by professionals in the creation of modern web pages.
  1. Text Editors: Often lightweight and highly customizable, text editors are a mainstay for many developers owing to their simplicity and speed.
    1. Sublime Text: A versatile and speedy editor, it boasts a minimalistic interface coupled with powerful features like multi-line editing and a vast library of plugins.
    2. Atom: Developed by GitHub, Atom offers a customizable environment, integrated Git control, and a vast package ecosystem.
    3. Visual Studio Code (VSCode): Microsoft's free editor has gained immense popularity. It offers built-in Git integration, an extensive marketplace for extensions, and superior debugging features.
    4. Vim and Emacs: These are veteran text editors known for their efficiency, though they have steeper learning curves. Both have been extended by the community to support web development through various plugins.
  2. Integrated Development Environments (IDEs): While heavier than text editors, IDEs offer an all-in-one solution, bundling editing, debugging, version control, and other development tools in a unified interface.
    1. WebStorm: Developed by JetBrains, WebStorm is tailored for web development, offering features like deep code understanding, top-notch coding assistance, and support for all modern tools and frameworks.
    2. Adobe Dreamweaver: An established name in web design, Dreamweaver offers a combined code and design view, allowing developers to see their code's real-time visual representation.
    3. Visual Studio: Microsoft's IDE, while often associated with .NET development, provides comprehensive tools for web development, especially when paired with plugins and extensions.
  3. Online/Cloud-based Editors: With the move towards cloud-based solutions, online editors have emerged as viable options for developers seeking flexibility and collaboration.
    1. CodePen: Ideal for prototyping and sharing, CodePen offers a platform to quickly draft and visualize HTML, CSS, and JavaScript.
    2. JSFiddle: Similar to CodePen, it provides a playground for testing and showcasing snippets, offering integrated linting and collaboration capabilities.
    3. Cloud9: Acquired by Amazon Web Services (AWS), Cloud9 provides a full cloud-based IDE, enabling real-time collaboration and a seamless connection to cloud services.
  4. WYSIWYG Editors: Standing for "What You See Is What You Get", these editors allow developers to design web pages visually, with the editor generating the corresponding HTML.
    1. BlueGriffon: An open-source editor, BlueGriffon offers a dual view, allowing developers to switch between the visual design and the raw HTML.
    2. Wix and Weebly: While these are more web builder platforms, they offer WYSIWYG editing capabilities, allowing users to design web pages without delving deep into code.
The modern web development landscape presents a plethora of editor choices, each catering to different needs and preferences. Whether you're seeking the simplicity of a text editor, the comprehensive capabilities of an IDE, the collaboration features of cloud editors, or the visual convenience of WYSIWYG tools, there's a solution tailored for every HTML front-end developer in today's dynamic digital age.

Types of Text editors

HTML code can be composed using any text editor that can output ASCII text. You can create HTML files using one of three types of editors: An HTML document is an unformatted ASCII text file. ASCII text is plain text with upper- and lowercase letters, numbers, and punctuation marks. An ASCII text file contains no special characters or formatting commands.
  1. ASCII text editors
  2. HTML editors
  3. WYSIWYG HTML editors

Word Processor - Save as Text

You can use a word processor such as Microsoft Word to create your documents, but the documents must be saved as plain text (.txt).
You can use an open source editor like w3.org/Amaya to create and edit HTML documents. If you save your HTML documents as something other than text, for example, in MS Word format (.doc), Web browsers will not be able to process the file correctly.

Visualstudio Code

One of the best editors on the market which is free is the editor offered by from Microsoft known as visualstudio.com. It is ideal for checking the syntax of existing JavaScript files. To make this editor compatible with PHP you need to have Composer installed on your machine and select the correspoding

Komodo Edit

Komodo Edit is my favorite text web editor. It includes a lot of great features for HTML and CSS development. Plus, if that is not enough, you can get extensions for it to add on languages or other helpful features (like special characters). It's not the best HTML editor, but it's great for for the price, especially if you build in XML. There are two versions of Komodo: Komodo Edit and Komodo IDE. Komodo Edit is open source and free to download and is a trimmed down version of the IDE.

Notepad++

Notepad++ is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License. Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is useful for coding CSS. When using less CPU power, the PC can reduce power consumption, resulting in an environment which is more efficient.

The ASCII text editors require that you be familiar with HTML. They also do not validate, or check, the HTML statements to make sure they are correct. Using an ASCII text editor does, however, give you complete control of the code you write. Some examples of text editors are Windows Notepad, Macintosh Simple Text, and vi in UNIX.

HTML Editors

HTML editors such as Bare Bones Software's BBEdit, Allaire's HomeSite, and Hot Metal offer features beyond simple ASCII text editors. These include:
  1. HTML statement validation
  2. Automatic link checking
  3. Web site hierarchical structure displays
  4. Completion of HTML tags and attributes
  5. Switching capability between editor and browser (source code) formats
  6. Spell checking
  7. Search and replace capability

Manually coding HTML using Editor

The best way to learn how to code is to do it manually, even if you own an HTML editor or WYSIWYG editor. Having a good sense of how to "hard code" will also help you debug pages that you build with editors.

Hand Coding vs. Visual Editors

At one time, creating web pages in a text editor was considered the best way to build websites. The precise control that handwritten code gave you over HTML was (and often still is) seen as the only way to assure quality web pages. Professional site developers championed hand-coding because many early visual page-building programs added unnecessary code, code that affects how a page appears and how quickly it downloads over the Internet. But hand-coding is time-consuming and error-prone. One typo can render a web page useless. Dreamweaver creates solid code even in a visual environment and since its earliest incarnation, Dreamweaver has prided itself on its ability to produce clean HTML and its tolerance for code created by other programs including text editors. In fact, Dreamweaver includes a powerful built-in text-editing mode that lets you freely manipulate the HTML of a page, or any other code, including JavaScript, XML, PHP, and JSP. But the real story is that the code Dreamweaver produces when you work in Design mode is as solid and well-written as hand-hewn code. Knowing this, feel free to take advantage of the increased productivity that visual-editing mode of Dreamweaver brings to your day-to-day work with its one-click objects, instant JavaScript, and simplified layout tools. Doing so will not compromise your code and will certainly let you finish your website in record time. Every browser interprets the HTML language slightly differently, web design is more like WYSIRWYGOAGD:
what you see is roughly what you will get, on a good day.
That is why Dreamweaver's Live View and integrated Adobe BrowserLab (a browser-testing service) can help you make sure your pages look the way you really want them to. Finally, if you have experience hand-coding HTML and CSS, you will be pleasantly surprised by Dreamweaver's powerful text-editing capabilities. In fact, even though Dreamweaver has a reputation as a visual web page editor, it is also one of the best text-editing programs on the market.

Modern HTML Editors

Here are some examples of modern HTML editors:

Code Editors:

  1. Visual Studio Code: A free and open-source code editor from Microsoft, popular for its powerful features, extensibility, and cross-platform compatibility.
  2. Sublime Text: A cross-platform code editor known for its speed, performance, and extensive plugin ecosystem. It offers a free trial but requires a license for full functionality.
  3. Atom: A free and open-source code editor developed by GitHub, offering a user-friendly interface, extensive customization options, and package management.

WYSIWYG (What-You-See-Is-What-You-Get) Editors:

  1. Adobe Dreamweaver: A comprehensive WYSIWYG editor from Adobe, known for its visual design capabilities, code editing tools, and integration with other Adobe products.
  2. Brackets: A free and open-source WYSIWYG editor from Adobe, focused on web development, offering live preview, inline editing, and preprocessor support.
  3. BlueGriffon: A free and open-source WYSIWYG editor for web development, providing a user-friendly interface, support for modern HTML and CSS features, and compatibility with various platforms.

Headless Editors:

  1. TipTap: A JavaScript framework for building headless rich text editors, offering flexibility and customization for integrating with various web frameworks and applications.
  2. Trix: A rich text editor for everyday writing, developed by Basecamp, providing a clean and intuitive interface for creating and editing content.
  3. Quill: A rich text editor for building modern web applications, offering a lightweight and customizable solution for adding rich text editing capabilities to web pages.
These examples represent a diverse range of HTML editors, catering to different preferences and skill levels, from beginner-friendly WYSIWYG editors to powerful code editors for experienced developers. The choice of editor depends on individual needs, project requirements, and familiarity with different editor types.
In general, it is not necessary to learn or know HTML code to use a WYSIWYG editor. In addition to the features found in HTML editors, WYSIWYG editors include:
  1. Precoded objects
  2. Predesigned color schemes
  3. Visually-based frame design
  4. Ability to invoke an FTP session from within the editor
  5. Sample Java code
In the next lesson, you will learn how to identify HTML page structure and the various types of HTML tags.

Using Editors - Quiz

Click the Quiz link below to test your understanding of the differences among the editors used to create HTML pages.
Using Editors - Quiz