1.1 Basic structure of HTML

Source: Internet
Author: User

In today's society, the network has become a part of people's lives, the network provides services mainly in the form of web pages to show. HTML is the base language for creating Web pages, if you do not know HTML (Hypertext Markup Language). There is no web design. HTML is also the standard language used by the Web to create and identify documents. These tags are all done by using tags, which specify how the Web page will appear in the browser. This chapter describes the basic structure of HTML files, text-related tags, images tags, page links <A> tags, scrolling <MARQUEE> tags, etc., so that you have a deep understanding of the basic HTML tags, For the back of the study to lay a solid foundation, which is focused on text, images, linked to the use of tags, the difficulty is the comprehensive application of various tags.

Memory of this section: label 1.head 2.title 3.body 4.meta Property 1.bgcolor 2.background

Web Learning Network hints: HTML language is very simple, do not need logical understanding, and most of the friends think it is difficult to master, 90% of the reason is that English words do not pass, so every memory of a few words is very necessary.

1.1 The basic structure of HTML

The full HTML file includes at least <HTML> tags, <HEAD> tags, <TITLE> tags, and <BODY> tags, and these tags are paired, with the start tag <> end tag </>., add content between the two tags. The related properties in these tags allow you to set the background color, background image, and so on for the page.

1. Structure of the HTML document

The HTML document consists mainly of 3 parts.

HTML section: The HTML section starts with the <HTML> tag and ends with the </HTML> tag.


The <HTML> tag tells the browser that the content in the middle of these two tags is an HTML document.

Head: Start with <HEAD> tab and end with </HEAD> tab. This section contains the headings that appear in the title bar of the page and other information that is not displayed in the Web page. The title is included between the <TITLE> and </TITLE> tags.


Body part: The body part contains the text, images, and links displayed in the Web page. The main part starts with the <BODY> tag and ends with the </BODY> tag.


Small experience: Labels are case-insensitive, so users can use

Figure 1 HTML Document structure

2 Creating a Web page with Notepad

Creating an HTML document requires two tools: one is a text editor (such as Notepad, UltraEdit, EditPlus, etc.) and one is a Web browser for viewing HTML document effects (such as Intemet Explorer, Firefox, and so on). The following Web Learning Network uses a Notepad from Windows to quickly write the first HTML file and then use a Web browser to view the HTML document effect.

(1) Click "Start" One "program" one "accessories" a "Notepad" menu or right click the mouse select "New" a "text Document" command, open Notepad program.

(2) In Notepad, enter the HTML code shown in 2, as shown in Notepad 1.2 after you have entered the code.

Figure 2 Editing HTML in Notepad

(3) Click on the "Save as" menu in the Notepad menu bar, pop up the "Save as" dialog box, select the folder to save in the dialog box, then select "All Files" in the "Saving type" drop-down list box, select "ANSI" option in the "Encoding" drop-down list box, save the file name My_ firstpage.html,3, and then click the Save button.

(4) Back to the disk folder, using a Web browser to open my_firstpage.html Zhang pieces, you can see the final page effect, 4 shows.

Figure 4 "Save as" dialog block Diagram 5 browsing effect

3 <META> Tags

<META> tags appear in the title section of the page. This is a special HTML tag that provides information about the Web page. Sometimes when surfing the internet, found that some pages of text is garbled, this is how it? In fact, the CharSet attribute in the <META> tag does not set the encoding language correctly. If we correctly set the encoding of the language of the Web page, the browser will correctly display the contents of the page without garbled characters. To specify gb2312 as the default character set type, use the following <META> tags:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<TITLE> Page Title </TITLE>

Among them, CharSet is used to set the encoding language of the Web page, Simplified Chinese web page Use charset=gb2312, Traditional Chinese use charset=big5, plain English page suggested using iso-8859-1, or do not set the code can also. Set the charset correctly according to the language type that corresponds to your country or page body, so that you can avoid garbled pages. As in China it is suggested to set CharSet as "gb2312".

4 page background color or background image

By default, when browsing Web pages using a Web browser, the background color is white, what if I want to change the background color to a nice color or picture? In fact, it is very simple to use the bgcolor property to change the background color of the page, using the Background property to set the background of the page as a picture.

Syntax: Set the background color or background image of a Web page:

<body bgcolor= "#FFCCFF" background= "back_image. GIF ">
Hello world!

Example 1: Set the code for the background of the Web page.

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<TITLE> My Home </TITLE>
<body bgcolor= "#FFCCFF" >
Hello World

Example 1 is shown in the browser in preview effect 1.5. If you change the example L <body bgcolor= "#FFCCFF" > This part of the code to <body background= "Back_image. GIF > Preview in the browser as shown in effect 6.

Figure 6 Setting the background image of a Web page

Small experience: In order to make the page beautiful and generous, Web page background to be as shallow as possible.

Jobs in this section:

Referring to example 1, creating a simple HTML page from Notepad requires setting the page background.


The basic structure of the 1.HTML document, the label pairing appears.

2. Set the background color to be the bgcolor property, and set the Background property.

Web Learning Network tips: Light reading tutorial is unable to let you master HTML knowledge, it is best to complete the work after the next tutorial, move your hands!

Click to download the first chapter of the case and job resources return to the HTML Getting Started classic tutorial list

Editor: Web Learning Network
This address: http://www.lodidance.com/html/jc/468.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.