Home > Developer > Web Develop
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. Ok, start below: (The following symbols are entered in the English state)
1. Basic HTML Rules
<title> my pages </title>
.............................
<body>
......................
</body>
Almost all of the pages are in this format, this is a page must have a tag, each tag is placed in < >, to </> end, but in the ellipsis place a lot of clutter, which is what we see.
Copy the above code to a notepad, and then save as a.html file, it becomes a webpage, try it
Below, open in Notepad, with the word "home" between <body>, save, and then open to see
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, in fact, the pages are 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.
<link rel= "stylesheet" type= "Text/css" href= "C.css"/>
That is, the C.css file is introduced in. 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, change the <div> of a.html to <div id=header>
is the effect the same as before?
Almost, to here, should be "will not write poetry will also sing", this article is mainly to let everyone from the overall on the HTML have an understanding, know what is going on, there are a lot of marks are not involved, this need you find this page design book to see A look, back a back.
An article teaches you to learn the basics of HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
