An article to teach you HTML

If you are not committed to becoming an artist, then as a developer, you can just read HTML and make simple modifications when necessary. Follow my train of thought below and I guarantee that this article will help you understand HTML. Of course, while reading, it is best to try it yourself so that you can have a deeper understanding. Ok, let's start: (The following symbols are all entered in English)

1. Basic rules of HTML

<html>

<head>

<title>My webpage</title>

…………………………..

</head>

<body>

……………….

</body>

</html>

Almost all web pages follow this format. This is a necessary tag for a web page. Each tag is placed in < > and ends with </ >, except that a lot of messy things are added in the place of the ellipsis, which is the content we see.

Copy the above code to a notepad and save it as a.html file to create a web page.

Next, open it in Notepad, add the word "Home" between <body>, save it, and then open it to see the following picture:

html

Next, add the tag <a> before and after the homepage to change it to <a href=”#”>Homepage</a>, save it, and see the effect.

Is it the hyperlink we usually see on the Internet? It’s just that there is no change when you click “Home” here, because we added an empty link. So, strike while the iron is hot. Let’s follow the previous method to create a page, save it as b.html, then replace the “#” above with b.html, open it, and click Home. Should it jump to page b? (Of course, pages a and b must be in the same directory.) So far, you should understand that all the functions on a web page are implemented by different tags like <a>. All you need to do is remember the functions of these tags.

2. Web page structure

If you pay attention when you surf the Internet, web pages are actually divided into blocks, as shown in the figure
html

Of course, this is just a rough structure. You can divide it into many blocks according to your needs. The purpose of dividing into blocks is mainly to modify aspects and determine their respective expression styles.

This is mainly achieved through the <div></div> tag. Let me try adding a <div> tag to the "Homepage":

<div>

<a href=”b.html”>Homepage</a>

</div>

Save it and try opening it again. What is the effect?

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

During operation, the area we marked is indicated by a blue background!

By adding a lot of <div></div> blocks, you can break the web page into eight pieces, haha, and then put what you want in each block.

Of course, many <div> add style="" . If these style settings are similar, it would be too troublesome for us to set each one. We usually put these styles in another .css file (which controls the display style of each tag in the web page), and then call it where it is needed. Let's try it below.

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

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

And delete it in a.html

 Then add <link rel="stylesheet" type="text/css" href="c.css" /> before </head>

 That is to introduce the c.css file. The advantage of putting CSS into a separate file is that if this style is referenced in many places, we only need to modify this one place and all will change. Otherwise, we have to modify each place manually, which is not conducive to later maintenance.

Finally, change the <div> of a.html to <div id=header>

Is the effect the same as before?

Almost, by now, you should be able to "recite poems even if you can't write them". This article is mainly to give you a general understanding of HTML and know what it is about. There are still many tags that have not been covered. For this, you need to find a book on web design to read and memorize them.

<<: A brief analysis of how to use border and display attributes in CSS

>>: Learn how to deploy and start multiple tomcats and migrate projects in one article