Learning Web page should know: Use the example to learn HTML

Source: Internet
Author: User
Tags define definition character set integer mail connect
Beginners | Web page Remember when I first started to learn to write a Web site to a master of how to use FrontPage 98来 to make a colorful personal web page. He told me that he did not use any web-making software to make the Web pages, but by handwriting. I was stunned at the moment, "WHAT?" Handwriting pages! Oh,my gad! This man is an ace in the ACE! "From then on, he was as tall as a great man in my mind ... However, after half a year to today, he is no longer my idol. Because I can also write pages, and the Web is written to win him (feel). See here you will ask me, in the end I took what "canon" can "carefree fairyland"? In fact, it is very simple, that is HTML language.

HTML is a markup language created by the web's inventor Tim Berners-lee and colleague Daniel W.connolly in 1990. It is the application of standard generic Markup Language SGML. Documents created with its grammar rules can be run on platforms of different operating systems. Therefore, an HTML document belongs to a plain text file (it can be written in any text writer). Now there are many Web fans called HTML as the programming language, the writing HTML document is understood as Programming, which is clearly a misunderstanding.

After understanding the definition of HTML, we will learn the language. Due to its limited space, it is impossible to explain the attribute one by one of HTML language. The author only selected some more important and widely used elements for analysis.

Before we get to the point, let's take a look at the source code below. (This is the author's personal homepage source code, this article will be around this code for detailed explanation.) )

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Artistic Conception </title>
<body>
<table border= "0" width= "100%" cellpadding= "0" >
<tr>
&LT;TD width= "100%" ><p align= "center" ><font face= "official script" size= "6" color= "#FF00FF" ><strong> Welcome to the Chinese website </strong></font></td>
</tr>
</table>
<table border= "0" width= "100%" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD width= "100%" ><table border= "0" width= "100%" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD width= "10%" valign= "Top" align= "center" ></td>
&LT;TD width= "80%" valign= "Top" ><table border= "0" width= "100%" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" >
<a href= "Http://202.103.176.80/g/speaker/cool.htm" >
</a></td>"
&LT;TD width= "17%" ></td>
</tr>
<tr>
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" ></td>
</tr>
<tr>
&LT;TD width= "17%" >
alt= "Personal Works website entry" width= "180" height= "></td>"
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" ><a href= "http://202.103.176.80/g/speaker/dault.htm" >
</a></td>
</tr>
<tr>
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" > <p> </td>
&LT;TD width= "17%" ></td>
</tr>
<tr>
&LT;TD width= "17%" ></td>
&LT;TD width= "17%" >
</td>
&LT;TD width= "17%" ></td>
</tr>
</table>
</td>
&LT;TD width= "10%" valign= "Top" align= "center" ></td>
</tr>
<tr>
&LT;TD width= "10%" ></td>
&LT;TD width= "80%" ></td>
&LT;TD width= "10%" ></td>
</tr>
</table>
</td>
</tr>
</table>

<p> </p>

<table border= "0" width= "100%" cellpadding= "0" >
<tr>
<TD width= "100%" ><table border= "0" width= "100%" cellpadding= "0" >
<tr>
<TD width= "100%" ><p align= "center" ><strong><font face= "official script" color= "#A6A6FF" > two ooo March 30 </font></strong></td>
</tr>
<tr>
<TD width= "100%" ><p align= "center" ><font face= "official script" color= "#A6A6FF" ><strong> Thank you for your visit </ Strong></font></td>
</tr>
<tr>
<TD width= "100%" ><p align= "center" ><strong><font face= "official script" color= "#A6A6FF" > Chinese webmaster: Renmin </ Font></strong></td>
</tr>
<tr>

&LT;TD width= "100%" ><strong><font face= "official script" color= "#A6A6FF" >
<marquee border= "0" align= "Middle" scrolldelay= ">"
If you need help, please contact me in time e-mail:dibazh@online.sh.cn</marquee></font></strong></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
After reading this code, do you feel a little dizzy? (so many English, so complex yo!) In fact, this is not complicated, please listen to me slowly.
A <HTML></HTML> elements. It represents this document as an HTML document, that is, what we call a Web page.
Two <HEAD></HEAD> elements. It is used to indicate some information about the current document. For example, the document title, the character set used for the document, and so on. The title and meta elements inserted in the,Three <TITLE></TITLE> and <META> elements. Above mentioned the meaning of these two elements respectively. Title is a topic for the document, Meta is a description of some of the information used in HTML. (Note: This element is not confused with the head, and meta elements are generally included in the head element.) Meta can not only indicate the character set used in the document, but also provide some interesting features. For example:automaticallyJump page (code: <meta http-equiv= "Refresh"
Content= "240 (seconds); Url=http://breaker.126.com (address) ">" and how the Web page appears (you can open the page in circles, square open pages, and so on).
Four Four table elements. It is the most important element in HTML. It can help you solve a lot of problems in typesetting, such as text and image alignment, and so on. If someone tells you that I never use a form element when making a Web page, then the person's Web page is definitely not a "boutique".
1. <table></table>. This is the element that defines the form, and it can be said to be the "id" of the form. If you want to know how many tables there are in a Web page, you can count the number of these elements. Taking the example, there are a total of five pairs of <table></table&gt, and there are five tables on this page. In addition this element also attaches some attributes, here I introduce a few more important.
A <table border= number > indicates the width of the table border line.
B. <table border width= numbers; height= number > Specify the width and height of the entire table.
C. <table Border cellspacing= number > represents the distance between two cells.
D. <table Border cellpadding= number > indicates the size of the cell.
Note: the "number" above can be expressed as a positive integer or as a percentage. Their units are all "pixels". In addition, I recommend that you write a Web page, it is best to use a positive integer to express, because this is more intuitive. In the case of percentages, you need to convert to know the size of your table or cell.
2. <tr></tr>. This is the element used to define the table row. That is: the "identity card" of the bank in the form. Several pairs of this element in the table indicate that there are several rows in the current table.
3. <td></td>. The definition of this element is very professional in many books, and it is difficult to understand when you first know the HTML language. Now I pass my own understanding and give it a definition:<td></td> is an element that represents a cell in a row. The same principle, there are several pairs of this element in a row, there are several cells.
4. <th></th>. It is used to define the header, but this element is not used today. Therefore, the author does not make more introductions.
Five <font></font>. This element sets the way the font is used, and it has three properties: Size,color,face. This represents the size, color, and font of the font. For example, the above page in the code <font face= "Official script" size= "6" color= "# (can be omitted) ff00ff" ><strong> Welcome to the Chinese website </strong></font > It said "Welcome to the Chinese website" Eight words, with the official script sixth bold (<strong></strong> for bold font) font purple color in the Web page display. In addition, the "#" in the color= "#FF00FF" code can be omitted.
Six . It is an element that specifically sets the properties of a picture. We analyze this code in the above example:
refers to the path of the picture. To properly display the picture you set on the Web page on the iternent, the path to your picture must be correct. Otherwise, the picture will not be rendered. This is a description that appears when the browser can't open the picture, which can be named by you, but it's best to write meaningful text. As I give this picture named "Shared program site entry", which means that when clicked on this image, the page willautomaticallyConnect to the shared program site and open the home page of this site. As for border,width,height These properties are simple: the border line width of the picture, the width of the picture, and the height of the picture. It is similar to the table's Border,width,height property definition, except that the former is for the picture and the latter is for the table.
Seven <a href></a>. This is a hyper-connected element. Write the URL that you want to connect to behind the href, write text or insert a picture between <a href> and <a>, and your super connection is complete. How easy it is!
Eight <marquee></marquee>. This is the Advanced HTML languageTechnologyUse elements. It can be used to achieve the scrolling effect of text in the Web, so that your Web page more dynamic charm. This element supports the following several properties:
1. DIRECTION. It is the scrolling direction of the specified text, for example, <marquee direction=right> refers to text
Scrolls from left to right. In addition to right, we can use Left (right-to-left), up (from bottom), down (from the bottom) to set the direction of the text.
2. BEHAVIOR. This is the way that the specified text is scrolled. It has three objects: Scroll,slide,alternate. This
The three objects represent the wrapping scrolling, scrolling once, and scrolling back and forth. Where wrapping scrolling (that is, scroll) is the default value of the scrolling method (BEHAVIOR). For example, in the previous example, "<marquee border=" 0 "align=" Middle "scrolldelay=" > If you need help, please contact me in time e-mail:dibazh@online.sh.cn</ The code for Marquee> "indicates that the text scrolls with the default value scroll.
3. LOOP. This is the number of loops for the specified text to scroll. When Loop=-1 or Loop=infinite, it indicates that the text is scrolling
is an infinite loop.
4. Scrolldelay. This refers to the speed at which text is scrolled. Its unit is in milliseconds. Look at this code again "<marquee
Border= "0" align= "Middle" scrolldelay= ">" If you need help, please contact me in time, e-mail:dibazh@online.sh.cn</marquee> ", which" Scrolldelay= "120" indicates that the text scrolls at a speed of 120 milliseconds.
5. ALIGN. This is the alignment property of the scrolling text, which is the position. It has top (aligned), middle (for
To the middle), BOTTOM (align) three objects. The "align=" Middle "" in the previous code explicitly positions the text in the middle. In addition, this element can be used not only in marquee but also in other elements, such as TABLE,TD and so on. Their usage and meaning are the same as those of marquee.
Okay, so here's the HTML introduction to the paragraph. Now look back at the beginning of the page code, whether you think it is too easy. (Miserable!) Another web master appeared, my "rice bowl" is not guaranteed. ) Yes! As a Web page writing language ――html It really is very easy. I have only spent a very small amount of time to fully understand the essence of it, I think for the smart reader must be a cinch.
In writing this article, the author met a computer friend, he advised me not to write this article because today there are many web editing software, such as Prontpage98,dreamweaver3 and so on, they canautomaticallyGenerate Web pages, why do you need to study HTML? The friend's words sounded reasonable at first, but after careful thinking, he felt a lack of "taste" in his words. In fact, HTML language is the basis of all Web pages, for a want to become a Web master of you, learning HTML is essential. Just like today we have calculators, but we still have to start from "1+1=2" when we are learning maths, which is the basic skill. You know, "the palaces built in the desert, the luxury will collapse." "(For lack of foundation!) )
Finally, wish you can become a Web master! If there is a problem, please email me: dibazh@online.sh.cn.

From the world of software/article

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.