An article that allows you to read basic HTML rules and Web page structure

Source: Internet
Author: User
If you are not committed to becoming a designer, then as a developer, you can read HTML, if necessary, can be easily modified. Following my ideas, to ensure that a text to make you understand HTML, of course, the process of looking, it is best to try it yourself, so that understanding is deeper.

1. Basic HTML Rules

<html><head><title> my page </title>.............................</head><body>......................</body ></html>

Almost all of the pages are in this format, this is a page must have a tag, each tag is placed in < >, to the end of the </>, but in the ellipsis place a lot of clutter, that is, what we see. Copy the above code to a notepad, then save as a.html file, it becomes a webpage, try it! Below, open in Notepad, with the word "home" between <body>, save, then open and look.

Then, before and after the first page of the tag <a> changed to <a href= "#" > Home </a>, save, and then look at the effect?

Is that what we usually see on the Internet hyperlinks? Just here Click "Home" did not change, because we add the empty connection, the strike, we follow the previous method, building a page, save as b.html, and then the above "#" replaced with b.html, in the open, click on the homepage, is not jump to the B page. (Of course A and B pages are in the same directory) so far, you should understand that all the features on the Web page are implemented by a different kind of tag like <a>, you need to remember the features of these tags.

2. Web Structure

If you pay attention to the Internet, the pages are actually divided. Of course, this is just a general structure, you can also be divided into a number of blocks according to the need, the block is mainly to modify aspects and determine their own style of expression. This is mainly achieved by <div></div> tags, and below I will try the "home" plus <div> tag:

<div><a href= "b.html" > Home </a></div>

Save, in open try, what effect? Is it the same as before, we add some decorations to it:

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

On the run, this piece of our mark is shown in a blue background! In the addition of a lot of <div></div> block will be able to put the Web page eight pieces, hehe, and then you put in each block you want to put things. Of course, a lot of <div> add style= "", if these style settings are similar, each of our settings is too troublesome, We generally put style these in another. css file (control the display style of each tag in the Web page), and then make the call where it needs to be called, let's try

Create a new Notepad, rename it to C.css, and then open, write:

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

and delete it in the a.html. Then </head> before adding <link rel= "stylesheet" type= "Text/css" href= "C.css"/> that is to introduce c.css this file. Putting CSS in a separate file The advantage is: if many places are quoted this style, we just modify this one place, all have changed, otherwise we have to manually modify each place, not conducive to post-maintenance.

Finally the a.html <div> changed to <div id=header> effect is not the same as before?

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.

Tags Index: