Introduction to HTML Part 1 HTML简介第1部分

Websites are created with two main elements, these are visible and non-visible elements. The most noticeable elements of a website are the visible elements of the design, the non-visible elements, or the HTML code (Hyper Text Markup Language) that makes the website work is hidden from the viewer.
网站由两个主要元素构成，即可见元素和不可见元素。网站最值得注意的元素是设计中的可见元素，而不可见元素，即使网站工作的HTML代码（超文本标记语言）是对浏览者隐藏的。

HTML code is a program language, and like any language has its own unique syntax, but what is syntax?
HTML代码是一种程序语言，和任何语言一样，它有自己独特的语法，那什么是语法呢？

syntax |ˈsinˌtaks| noun
The arrangement of words and phrases to create well-formed statements in a language.
在一种语言中，用来形成格式良好的陈述的各种词和短语之间的排列及规则

Learning code is just like learning any other language. There are rules to the language, and if these rules are not followed the language does not make sense, and just like different languages, each program language has its own unique syntax.

学习代码就像学习任何其他语言一样。语言有规则，如果不遵循这些规则，语言就没有意义，就像不同的语言一样，每种程序语言都有自己独特的语法。

Basic HTML websites use a series of elements called HTML tags as part of their unique syntax. Some HTML tags are self explanatory such as the title tag <title>Your Title Goes Here</title>, but other tags have been simplified and will need to be memorized such as the paragraph tag <p>Paragraph Goes Here</p>.

基本HTML网站使用一系列称为HTML标签的元素作为其独特语法的一部分。有些HTML标签是不言自明的，例如标题标签<title>Your Title Goes Here</title>，但其他标签已经简化，需要记住，例如段落标签<p>Paragraph Goes Here</p>。

However modern websites have become much more complicated in recent years and rely on a combination of several different types of code to create all the different interactive elements that are used in the design of a web-page. These include Java Scripts which use the script tag <script>The java script program goes here</script>. Flash, which uses the Action Script language, is also used in many websites designs to add interactive elements; however Flash is quickly being replaced by new additions to the HTML5 program language which is introducing Flash like functionality to the HTML language.

然而，近年来，现代网站变得更加复杂，需要依靠几种不同类型的代码组合来创建网页设计中使用的所有不同交互元素，其中包括使用脚本标签的Java脚本<script>The java script program goes here</script>。Flash使用动作脚本语言，在许多网站设计中也使用Flash添加交互元素；然而，Flash很快就被HTML5程序语言的新添加所取代，该语言将类似Flash的功能引入到HTML语言中。

Many websites also use CSS (Cascading Style Sheets) instead of programming the styles using traditional HTML tags on each page. Instead of programming styles individually for each page, style sheets are made and multiple pages can be linked to a single style sheet. More importantly, CSS enables programs to apply styles independently of the HTML code used in each web page which saves times and improves efficiency; therefore one style can be applied to the entire website, and changing the style sheet will affect the look of the entire website.

许多网站也使用CSS（层叠样式表），而不是在每个页面上使用传统的HTML标记来编程样式。不需要为每个页面单独编程样式，而是创建样式表，且多个页面链接到单个样式表。更重要的是，CSS使程序能够独立于每个网页中使用的HTML代码应用样式，从而节省时间并提高效率；因此，一种样式可以应用于整个网站，而更改样式表将影响整个网站的外观。

Basic HTML Tags 基本HTML标签：

The table below shows several of the most common HTML Tags that are used by many websites. The table has been formatted to show a typical hierarchy in an HTML website and how these tags might be used in context. Keep in mind that most, but not all tags, have both an open and close tag with information being contained between these two tags; however some tags are singular with all the relevant information being contained within the tag itself.

下表显示了许多网站使用的几种最常见的HTML标签。该表已格式化，以显示HTML网站中的典型层次结构以及这些标签在上下文中的使用方式。请记住，大多数但不是所有的标签都有一个打开和关闭标签，信息包含在这两个标签之间；然而，有些标签是单数的，所有相关信息都包含在标签本身中。

HTML Tag Type	Open	Close	Singular Tag / Element
Document Type Comment Tags HTML	<html>	</html>	<!doctype html> <!– comment here –>
-Head -Title -Metadata -Styles	<head <title> <style>	</head </title> </style>	<meta>
-Body -Div Tag (generic) -Heading Tags 1-6 -Paragraph -Bold Text -Strong Tag -Emphasis Tag -Strike Through -Citation -Quotation -Line Break -Image -Link -Address	<body> <div> <h1> <p> <b> <strong <em> <s> <cite> <q> <address>	</body> </div> </h1> </p> </b> </strong> </em> </s> </cite </q> </address>	<br> <img src=” ” alt=” “> <link rel=” ” href=” “>

Writing Code编写代码:

HTML code can be generated in a number of different ways using an HTML editor which is a software application for creating web pages. Although the HTML code of a web page can be written with any Text editor, specialized HTML editors can offer added convenience and added functionality for the coder.

HTML代码可以使用HTML编辑器以多种不同的方式生成，HTML编辑器是用于创建网页的软件应用程序。尽管网页的HTML代码可以用任何文本编辑器编写，但是专门的HTML编辑器可以为编码者提供额外的便利和功能。

There are 3 main types of HTML editors HTML编辑器有3种主要类型：:

text editors文本编辑器
object orientated editors面向对象编辑器
WYSIWYG editors所见即所得编辑器

Text editors文本编辑器:

Simple text editors allow the user to program HTML code by manually typing the code out by hand. This requires an understanding of HTML and any other web technologies the designer wishes to use like CSS and Java Script. Some regular text editors such as Windows Notepad, or Text Edit on Mac also provide the ability to write HTML code and save the document as HTML file with an “.html” extension.

简单的文本编辑器允许用户手动输入HTML代码来编程，这需要对HTML和设计师希望使用的任何其他web技术，如CSS和Java脚本有一定了解。一些常规的文本编辑器，如Windows记事本或Mac上的文本编辑，也可以编写HTML代码并将文档保存为扩展名为“.HTML”的HTML文件。

Some professional HTML text editors also include built-in functions or integration with external tools for tasks such as: code checking, code cleanup, spell-checking, and FTP (File Transfer Protocol) functions for uploading a webpage to the internet. text editors intended for writing HTML code usually also provide syntax highlighting which makes writing code easier.

一些专业的HTML文本编辑器还包括内置功能或与外部工具的集成，用于执行以下任务：代码检查、代码清理、拼写检查，以及将网页上载到internet的FTP（文件传输协议）功能。用于编写HTML代码的文本编辑器通常还提供语法突出显示，这使得编写代码更容易。

There are also many free online HTML editors which are MAC and PC compatible. The following online editor has a code input field and a live preview. This interface is very useful when learning how to write HTML code because you can see the results of your code instantly.

还有许多与MAC和PC兼容且免费的在线HTML编辑器。以下在线编辑器具有代码输入字段和实时预览。在学习如何编写HTML代码时，此界面非常有用，因为可以立即查看代码的结果。

WYSIWYG Editors 所见即所得编辑器:

The exact opposite of coding HTML by hand in a text editor is a WYSIWYG editor (What You See Is What You Get) which focuses on a visual approach to create code. With WYSIWYG editors the content creator will create the website using a Graphic User Interface (GUI). The program will then translate the visual elements into code. Because using a WYSIWYG editor does not require any knowledge of HTML they are easier for a novice user to learn how to use; however these editors are very limited in their capabilities due to the simplicity of the user interface.

与在文本编辑器中手动编写HTML完全相反的是WYSIWYG编辑器（所见即所得），它侧重于创建代码的可视化方法。使用所见即所得编辑器，内容创建者将使用图形用户界面（GUI）创建网站。然后程序将把可视元素转换成代码。因为使用所见即所得编辑器不需要任何HTML知识，所以新手更容易学会如何使用；然而，由于用户界面的简单性，这些编辑器的功能非常有限。

Object Orientated HTML Editors 面向对象编辑器:

Object Orientated editors are somewhere in-between an HTML text editor and a WYSIWYG interface. These programs allow the editing of HTML source code in a more visually organized method based on the objects and assets used in the design of a webpage. These editors also include the option to edit the text-based parameters of selected objects in addition to defining the object parameters using different program palettes or windows.

面向对象的编辑器位于HTML文本编辑器和所见即所得界面之间。这些程序允许根据网页设计中使用的对象和资源，以更直观的组织方式编辑HTML源代码。除了使用不同的程序选项板或窗口定义对象参数外，这些编辑器还包括编辑选定对象的基于文本的参数的选项。

Programs such as Adobe Dreamweaver, which is an industry standard web-programming application, offer several different configurations that a user can switch between. The designer view allows the user to control and define elements using program windows and let Dreamweaver generate the HTML code for them, or users can use the code view which includes syntax highlighting and program the HTML code by hand. These features also allow different users, such as a web designer and programer to collaborate with each other easily on the same project.

Adobe Dreamweaver等程序是一种行业标准的web编程应用程序，提供了几种不同的配置，用户可以在这些配置之间进行切换。设计器视图允许用户使用程序窗口控制和定义元素，并让Dreamweaver为它们生成HTML代码，或者用户可以使用代码视图，其中包括语法高亮显示和手动编程HTML代码。这些特性还允许不同的用户（例如web设计师和程序员）在同一项目上轻松地相互协作。

Try HTML coding for free at免费试用HTML编码: http://www.onlinehtmleditor.net

Try this example. Retype the code below and compare the difference between the HTML code and the live preview that is generated by the online HTML editor. Notice the comments that are in a comment tag <!– –> do not show on the webpage. After analyzing the difference between the code and the preview you should try modifying the code and customize this simple webpage.

试试这个例子。重新键入下面的代码，并比较HTML代码与在线HTML编辑器生成的实时预览之间的差异。请注意注释标签中的注释<!– –> 不显示在网页上。在分析代码和预览之间的差异后，应该尝试修改代码并自定义此简单网页。