An article teaches you how to learn the basic HTML,

Source: Internet
Author: User

An article teaches you how to learn the basic HTML,
Html is the basis for learning to build Web pages. The beautiful web pages and layout are composed of some html code. After reading this article, you can simply understand html, write more, and practice more.

If you do not want to become an artist, you can understand HTML as a developer and make simple modifications when necessary. Next we will follow my ideas to make sure that you understand HTML in a document. Of course, it is best to try it on your own during the process, so that you can understand it more deeply. OK, start at the following: (the following symbols are entered in English)

1. Basic html rules

<Html>

<Head>

<Title> my webpage </title>

.............................

</Head>

<Body>

......................

</Body>

</Html>

Almost all web pages follow this format. This is a must-have mark for a Web page. Each mark is placed in <> and ends with </>, I just added a lot of messy things in the ellipsis, that is, what we see.

Copy the code to a notebook. Then, the.html file becomes a webpage. How can this problem be solved?

Next, open it in notepad, add the word "Homepage" between <body>, save it, and then open it.

Next, add the tag <a> to <a href = "#"> homepage </a> before and after the homepage, save the tag, and check the effect?

Is it the hyperlink we usually see online? Continue, open and click the Home Page. Will it jump to page B. (Of course, both page a and page B must be in the same directory) So far, you should understand, in fact, all functions on the Web page are implemented by different tags similar to <a>. You only need to remember the functions of these tags when you need to do so.

2. webpage Structure

If you pay attention when surfing the Internet, the Web pages are actually segmented,

Of course, this is just a rough structure. You can also divide it into many blocks as needed. The block is mainly used to modify the aspect and determine their respective performance styles.

This is mainly achieved through the <div> </div> MARK. Next I will add the <div> mark on the "Homepage:

<Div>

<A href00000000b.html "> homepage </a>

</Div>

Save and try it on. What effect does it have?

Is it the same as before? Let's add some modifications to it:

<Div style = "width: 200px; height: 100px; border-style: solid;">

When running, we marked this part as a blue background!

After adding a lot of <div> </div> blocks, you can unload eight webpages. Haha, and then you can put what you want in each block.

Of course, there are many <div> widgets files (control the display styles of each tag in the webpage), and then call the areas to be called. Next, let's try it.

Create a new notebook, rename it c.css, then open it, and write:

# Header {width: 200px; height: 100px; border-style: solid ;}

And delete it in a.html.

And then add it before <Link rel = "stylesheet" type = "text/css" href = "c.css"/>
You can also introduce the c.css file. The advantage of placing css in a separate file is that if this style is referenced in many places, we only need to modify this place and it will all change. Otherwise, we have to manually modify each place, it is not conducive to post-maintenance.

Change <div> of a.html to <div id = header>

Is the effect the same as before?

Almost, here, we should say "no poetry or Yin". This article mainly aims to give you a general understanding of html and know what is going on, there are still a lot of tags that are not involved. You need to look for a book designed on this web page and carry it back.

Related 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.