Editors & Tools

HTML Editors & Tools (HTML编辑器和工具)

From the previous chapter, we learned that HTML is a markup language used for creating web pages. When working on creating web pages, you will need the following tools and programs:

  • text or HTML editor for writing and editing source code, (-用于编写和编辑源代码的文本或HTML编辑器,)

  • browser for checking results, (-用于检查结果的浏览器,)

  • validator - a special program checking the validity or syntactical correctness of a source code. (-验证器-检查源代码的有效性或语法正确性的特殊程序。)

Let’s speak about them in details. (让我们详细谈谈它们。)

HTML Editors

HTML Editors (HTML编辑器)

There are several professional editors web developers use for coding. However, not every editor could satisfy all your needs. So, a good HTML editor must have the following functionality:

  • syntax highlighting - displaying text, especially source code, in different colors and fonts, (-语法突出显示-以不同的颜色和字体显示文本,特别是源代码,)

  • tab view support - keeping multiple web pages open in tabs at the same time, (-选项卡视图支持-同时在选项卡中打开多个网页,)

  • checking HTML document for mistakes, (-检查HTML文档是否存在错误,)

  • wrapping code - hiding large fragments of code leaving only a line. (-包装代码-隐藏大片段代码,只留下一行代码。)

The most popular HTML editors are those listed below:

  • WebStorm

  • Visual Studio Code

  • Atom (原子)

  • Sublime Text (Sublime Text)

  • Notepad++ (Notepad++)

As you are just starting coding, you can use Notepad (PC), simple and easy to use HTML editor. Let’s have a look at how to use it. (当您刚刚开始编码时,您可以使用记事本( PC ) ,简单易用的HTML编辑器。让我们来看看如何使用它。)

Step 1. Open Notepad on your computer

Step 1. Open Notepad on your computer (第1步:在计算机上打开记事本)

If you use Windows 8 or later open the Start Screen and type Notepad. (如果您使用的是Windows 8或更高版本,请打开开始屏幕并键入记事本。)

If you use Windows 7 or earlier version follow the steps below:

Open Start > Programs > Accessories > Notepad (打开“开始” > “程序” > “配件” > “记事本”)

Step 2. Write your code

Step 2. Write your code (第2步:编写代码)

Write or copy some HTML code. (编写或复制一些HTML代码。)

Example of an HTML code:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>Simple example</h1>
   <p>Some text you want to show here</p>
 </body>
</html>

Result

Step 3. Save HTML document

Step 3. Save HTML document (第3步:保存HTML文档)

Go to “File” in Notepad menu and choose “Save as”, give a name to your document, using either the “.htm” or the “.html” file extension. (We recommend to use “.html” file extension). Make sure you set the encoding to UTF-8 to avoid problems with code. Save the file to the basic folder you should create beforehand to store all your HTML documents.

Step 4. Check the HTML file in a browser

Step 4. Check the HTML file in a browser (第4步:在浏览器中检查HTML文件)

Open your HTML file in a browser (right-click on the file and choose “Open with”). (在浏览器中打开您的HTML文件(右键单击该文件并选择“打开方式” )。)

Browser

Browser (浏览器)

You will need a browser to check HTML files. To start with, any browser, Google Chrome, Opera, or Firefox will be enough, but later on, you will need all of them. The thing is that every browser has its characteristics, and you will need to check your code in each of them. (您将需要一个浏览器来检查HTML文件。首先,任何浏览器、Google Chrome、Opera或Firefox都足够了,但稍后,您将需要所有这些浏览器。问题是,每个浏览器都有其特点,您需要检查每个浏览器中的代码。)

Validator

Validator (验证器)

An essential part of the web pages development process is checking the validity of the HTML code. Special validators, programs or services, can be used to check the validity or syntactical correctness of a fragment of code or document. (网页开发过程的一个重要部分是检查HTML代码的有效性。特殊验证器、程序或服务可用于检查代码或文档片段的有效性或语法正确性。)

The most common online service is validator.w3.org. Enter the URL of a web page, and the service will check and show the mistakes in the code if any, or get back а message that your document is valid. (最常见的在线服务是validator.w3.org。输入网页的URL ,服务将检查并显示代码中的错误(如果有) ,或返回您的文件有效的消息。)

For checking the validity of local files, you can use special programs, for example, Tidy. Some editors (e.g., PSPad) have built-in validator, so you can check your code directly in them. (要检查本地文件的有效性,可以使用特殊程序,例如Tidy。某些编辑器(例如PSPad )具有内置验证器,因此您可以直接在其中检查代码。)



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部