Introduction and recommendations for HTML editors

HTML editor

The HTML Editor is a tool for writing HTML, using the HTML Editor to edit themes, indexes, customize windows, and choose to add search pages.

Use Notepad or TextEdit to write HTML

Here are three HTML editors dedicated to editing HTML:

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML Editor

However, we also recommend using a text editor to learn HTML, such as Notepad (PC) or TextEdit (Mac). We believe that using a simple text editor is a great way to learn HTML.

We can use the Notepad tool to create HTML files, as follows:

Step 1: Start Note book

To open notepad (in Windows):

1. Open the Start menu
   
2. Select All Programs
   
3. Select Attachments
   
4. Select Note book
   

Step 2: Use Note book to edit HTML

Enter HTML code in Note book:

Step 3: Save your HTML

Select Save as in the Notepad file menu.

You can .htm .html your HTML file with an extension, no difference, depending on your usage habits.

Save the file in a folder you use frequently, such w3cschool

Step 4: Run this HTML file in a browser

Start your browser, then select the Open Files command in the Files menu, or double-click your HTML file directly in the folder.

The results of the run are similar to the following:

Common HTML editor download

1, with UltraEdit (editing tools)

UltraEdit Text Editor is the editor for all your editing needs.

UltraEdit Text Editor is a powerful set of text editors.

UltraEdit Text Editor has built-in English word checking, highlighted by C and VB instructions, to edit multiple files at the same time, and not slow to open even large files.

UltraEdit software comes with HTML tag color display, search for replacements, and unlimited restore capabilities that are commonly used to modify EXE or DLL files.

2. Notepad (Code Editor)

Notepad is a free code editor under Microsoft Windows. I t uses less CPU power and reduces the energy consumption of your computer system, but it's lightweight and efficient, making notepad a perfect replacement for Microsoft Windows Notepad.

3、Adobe Dreamweaver CC

Dreamweaver CC is a web design software launched by Adobe, the world's top software vendor, with a visual editing interface for making and editing websites and mobile applications. B ecause it supports code, splitting, designing, live view, and many other ways to author, write, and modify Web pages, for beginners, you can quickly create Web pages without writing any code. Its proven code editing tools are better suited for authoring by web development executives!

Click to download it . . .

4, EditPlus (text editor)

EditPlus is a powerful text editor that replaces note books with unlimited Undo/Redo, English Scrabble, line-changing, column number tags, search replacements, simultaneous editing of multiple files, and full-screen browsing. A nd it also has a useful feature, is that it has the ability to monitor the scrapbook, can be synchronized in the scrapbook automatically paste text into editPlus edit window, let you save the steps to do the paste. I t is also a good HTML editor, in addition to being able to color-mark HTML Tags (while supporting C/C,Perl, Java), it also has a full HTML and CSS1 instruction capability built in for friends who are used to editing web pages with Noteamoto. Saves you more than half of your web production time, and if you have installed versions above IE 3.0, it will also be combined with an IE browser in the EditPlus window, allowing you to preview edited pages directly (or specify a browser path if you don't have IE installed).

• EditPlus3 Editor's Manual: https://www.w3cschool.cn/editplus3/

Click to download . . .

HTML debugging

---

There are usually two main types of errors when writing HTML code:

• Grammar errors: Programs that fail to run because of spelling errors are often easy to fix when you are familiar with the grammar and understand the error message.
• Logical errors: There are no syntax errors, but the code does not work as expected;

HTML itself is not prone to syntax errors because the browser runs in loose mode, which means that the browser continues to run even if there is a syntax error. B rowsers often have built-in rules to parse the markup of writing errors, so the page can still be displayed even if it does not match expectations. Of course, there are hidden dangers.

Note: HTML is parsed in a relaxed way because the web was created with the initial intention that everyone could publish content without tangled code syntax.

Instance

Let's discuss it with a piece of HTML code that contains errors:

The instance title

<h1>HTML 调试示例</h1>
<p>什么使得 HTML 出错？
<ul>
<li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。
<li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？
</em>
<li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.w3cschool.cn/>W3Cschool 主页链接</a>
</ul>

Try it out . . .

Here's the problem with the code above:

• The paragraph and list item elements do not have an end label. However, since the end of the element and the beginning of another are easy to infer, there are no too serious rendering errors in the figure above.
• The first <strong> not have an end label. T his is serious because the end of the element is difficult to determine. In fact, all the remaining text is bold.
• There <li> a nesting problem in the second element: For <strong> emphasis" and the emphasis is on the "strong" and <em> and "strong"? </strong> is this? </em> explain correctly for the same reasons.
• href property is missing a double quote. This leads to one of the most serious problems: the entire link is completely rendered.

However, the browser tries to fix the code error:

• <p> labeled <li> off.
• The first <strong> no explicit off-label, so the browser has filled out <strong> the separate blocks after </strong>
• The browser fixes nesting errors like this:

The instance title

<strong>重点（strong）

<em>重点强调（strongly emphasised）？</em>

</strong>

<em>这又是什么鬼？</em>

Try it out . . .

• Remove the entire missing double-quote link. The last list item becomes:

The instance code

<li>
<strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>
</li>

Try it out . . .

After reading the examples above, you'll see the importance of maintaining a good HTML format.