HTML 30-Minute Beginner Tutorial

Goal of This Article

Within 30 minutes, you will understand what HTML is and gain a basic understanding of it. Once you get started, you can find more detailed resources online to continue learning.

What is HTML

HTML is the abbreviation for the English phrase Hyper Text Mark-up Language (hypertext markup language). It defines its own syntax rules to express meanings richer than "text," such as images, tables, links, etc. Browser software (IE, FireFox, etc.) understands the syntax of the HTML language and can be used to view HTML documents. Currently, the vast majority of web pages on the Internet are written using HTML.

What Does HTML Look Like

Simply put, the syntax of HTML is to add to text the meaning-indicatingtags(Tag), allowing users (people or programs) to better understand the text.

The following is the simplest HTML document:

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">Example</a>！
   </body>
</html>

All HTML documents should have an <html> tag. The <html> tag can contain two parts: <head> and <body>.

The <head> tag is used to contain general information about the entire document, such as the document's title (the <title> tag is used to contain the title), a description of the entire document, the document's keywords, and so on. The specific content of the document should be placed in the <body> tag.

The <a> tag is used to represent a link. When viewing an HTML document in a browser (such as IE, Firefox, etc.), clicking the content enclosed by the <a> tag usually jumps to another page. The address of the page to jump to is specified by the href attribute of the <a> tag. In the <a href="../www.example.com/index.html"> above, the value of the href attribute is http://www.example.com/.

What an HTML Document Can Contain

Through different tags, an HTML document can contain different content, such as text, links, images, lists, tables, forms, frames, and so on.

Text: HTML has the richest support for text. You can set headings of different levels, paragraphs and line breaks, specify the semantics and appearance of text, indicate that text is quoted from elsewhere, and so on.
Links: Links are used to indicate that content is related to another page or a certain place on the current page.
Images: Images are used to make the page more attractive or to provide more information.
Lists: Lists are used to indicate that a series of items are related to each other.
Tables: A table is a form of organizing data in rows and columns. Many people also use tables for page layout.
Forms: Forms usually consist of text input boxes, buttons, check boxes, radio buttons, drop-down lists, etc., making HTML pages more interactive.
Frames: Frames allow a page to contain other pages.

Detailed Explanation of HTML Document Format

The basic format of HTML documents was introduced earlier; now a detailed explanation is given below.

HTML documents can be created and edited with any text editor (such as Notepad, UltraEdit, etc.), because their content is essentially just text.

In HTML text, the parts enclosed in angle brackets are called tags. If you want to use angle brackets (or greater-than and less-than signs, in short the same thing) in the body text, you must usecharacter escaping, that is, converting the original meaning of characters. < should use<instead, and > should use>, and as for the & symbol itself, it should use&instead. (It must be said that many HTML documents do not follow this rule, and common browsers can always figure out whether & is the start of an escape or a symbol, but doing so is not recommended.)

Tags are essentially descriptions of the content they contain, and may have attributes to provide more information. For example, the <img> (image) tag has a src attribute (used to specify the image's address), and width and height attributes (used to specify the image's width and height). Which tags can be used in HTML and what attributes each tag can have are all specified. Once you know the basics described here, learning HTML is actually just learning these tags. Later in this article, a brief introduction to common HTML tags will be given.

Tags usually have a start part and an end part (also called start tag and end tag), which together define the content contained by the tag. Attributes can only be specified in the start tag, and attribute values can be enclosed in single or double quotes. End tags are all represented by / plus the tag name. Sometimes, some tags do not contain other content (they only have their own attributes, or even no attributes at all). In this case, it can be written like this: <img src="logo.gif.html" />. Note the final space and backslash; it indicates that this tag has ended and no separate end tag is needed.

Some tags can contain new tags within their content, and the new tag name may even be the same as the name of the tag containing it (which tags can contain tags, and which tags they can contain, are also specified). For example:

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

In this case, the last tag that appears should end first.

All whitespace characters in HTML documents (spaces, tabs, line feeds, carriage returns) are ignored by the browser. The only exception is the space; the way spaces are handled is that all consecutive spaces are treated as one space, whether there is one, two, or 100. The reason for this rule is that ignoring whitespace allows HTML authors to arrange content in the format that is most convenient for them, for example, adding indentation after each tag starts and reducing indentation after a tag ends. Because spaces are commonly used in English text (to separate words), this special handling is applied to spaces. If you want to display consecutive spaces (e.g., for indentation), you should use to represent spaces.

Introduction to Common Tags

Text

The most commonly used tag may be <font>, which is used to change the font, font size, and text color.

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

Bold, underline, and italic text are also common text effects, represented respectively by <b>, <u>, and <i>:

<b>Bold</b>
<i>italic</i>
<u>underline</u>

There are also some tags used to indicate that the contained text has special meaning, such as <abbr> (abbreviation), <em> (emphasis), <strong> (stronger emphasis), <cite> (citation), <address> (address), and so on. These tags do not exist to define display effects, so they may have no visible effect in browsers, or different browsers may display these tags in completely different ways.

For a very long article, if there are appropriate subheadings, you can quickly get a general understanding of its content. In HTML, the tags used to represent headings are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, which represent level-1 heading, level-2 heading, level-3 heading, and so on.

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

Images

The <hr> tag is used to add a horizontal line to the page. You can control the length and color of the horizontal line by specifying the width and color attributes.

<hr width="90%" color="red" />

The <img> tag is used to add an image to the page. The src attribute specifies the image's address. If the image specified by src cannot be opened, the browser usually displays the text defined by the alt attribute in the place where the image needs to be displayed.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

Links

Hyperlinks are represented by the <a> tag, and the href attribute specifies the address to link to. The <a> tag can contain text or images.

<a href="../index.html">Example</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

Paragraphs and Line Breaks

Since HTML documents ignore whitespace, to ensure normal paragraphing and line breaks, you must indicate which text belongs to the same paragraph; this is where the <p> tag is used.

<p>这是第一段。</p>
<p>这是第二段。</p>

Some people do not use <p> but use <br>. <br> only represents a line break, not the beginning or end of a paragraph, so it usually has no end tag.

这是第一段。<br>
这是第二段。<br />
这是第三段。

Sometimes, a document needs to be viewed as a combination of different parts. For example, a typical page may include three parts: header, body, and footer. The <div> tag is specifically used to mark different sections:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

Tables

HTML documents are usually displayed from left to right and top to bottom in a browser, and wrap automatically when reaching the right edge of the window. In order to achieve a multi-column effect, many people use tables (<table>) for page layout (although the original purpose of tables in HTML was not for layout).

The <table> tag usually contains several <tr> tags, where <tr> represents a row in the table. <tr> tags in turn contain <td> tags, each <td> representing a cell.

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr> tags can also be contained by <thead>, <tbody>, or <tfoot> within <table>. They represent the table header, table body, and table footer, respectively. When printing a web page, if the table is too large to fit on one page, <thead> and <tfoot> will appear on every page.

<th> is very similar to <td> and is also used inside <tr>; the difference is that <th> represents that this cell is the title of its row or column.

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

Lists

Tables are used to represent two-dimensional data (rows, columns), while one-dimensional data is represented by lists. Lists can be divided into unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>). The first two types of lists are more common, and both use the <li> tag to contain list items.

An unordered list represents a series of similar items with no particular order among them.

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

In an ordered list, the order among items is important; browsers usually automatically generate numbers for them.

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

Frames

Finally, let's talk about frames, a technology that was once very popular. Frames allow a single window to display multiple documents simultaneously. The main frameset page does not have a <body> tag; instead, it uses <frameset>.

The Rows and Cols attributes of the <frameset> tag are used to specify how many rows (columns) the frameset has, as well as the height (width) of each row (column).

The <frameset> tag can contain <frame> tags. Each <frame> tag represents a document (the src attribute specifies the document's address).

If you think such a page is not complex enough, you can also include <frameset> tags within <frameset> tags.

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

What to Do After 30 Minutes

This article is only intended to give people who have never been exposed to HTML a preliminary impression of HTML, so many things are not covered. This article does not list all HTML tags, nor does it introduce all attributes of the tags it does list. Additionally, what is not mentioned includes things I consider very important: CSS, JavaScript, XHTML, XML, Web Standards, and their relationships with HTML. However, these are unlikely to be learned in 30 minutes. Fortunately, once you get started, you can take advantage of many online resources to continue learning. Of course, if you have a physical book, that's even better; in this regard, I recommend "HTML & XHTML: The Definitive Guide". Below are some online resources that I think are good:

Source: http://deerchao.net/tutorials/html/html.htm