Of all computing technologies, web pages are probably the most interacted with today.The Internet has grown in leaps and bounds over the past two decades. Many of us spend a significant part of our day interacting with websites.
Not many of us have ever wondered exactly how web pages work. Well, not until it does not work as expected, do we take a few moments to think about how it all fits together. You will be amazed by how simple web pages technology actually is.
To understand how web pages work, it's perhaps easier to understand what a Web browser is. At it's heart, a web browser is a file viewer. Consider a photo image file you may have on your disk. An image our your computer is a file that is a collection of zeroes and ones put together in some way. Try to view the file in a simple editor like a text editor and you will see a complex mess of letters numbers and symbols. However, That same photo viewed in an image viewer is a beautiful picture containing your special memories.
Word processor files are another example of file viewers. When viewed in your favourite word processor the file displays your document with all the formatting you expect. However the same file viewed in your image viewer is an unrecognizable mess.
Web pages work in the same way. A web file contains information that a web viewer can make sense of and render a beautiful page for you. This is an example of an encoded web page.
The one difference between a word processor file and a web page is that a word processor file is encoded in a way that is not readable by humans. Web pages, however are designed to be readable by humans.
Web pages works on a system of tag pairs that instruct a browser how to handle information inside the tags.
A web page is recognizable by a pair of tags at the top and bottom of each page telling the browser that the file is a web page.
<html>
<header>
...
</header>
<body>
...contents...
</body>
</html>To see the results of the work above, paste the code into a file using a text editor, then open the file using your browser. It would be advisable to save the file with an extension of ".html" for example hello.html, so that the file is easily recognised as a file containing HTML code.
When a file with the above tags is opened by a browser, it knows how to handle the rest of the file. You can see also that the page consists of a header section and body section. These sections are used to help the browser render your page, as we will see later.
To change the title of the web page, add a title tag to the header.
<title>Welcome to my home page.</title>Headings tags support different levels.
<h1>This is a level 1 heading<h1>
<h2>This is a level 2 heading</h2>A paragraph is supported by the <p> tag.
<p>This is a paragraph of text.</p>You then then add to your page as required. The listing below shows a simple, but complete web page.
<html>
<header>
<title>Welcome to my home page.</title>
</header>
<body>
<h1>This is a level 1 heading<h1>
<h2>This is a level 2 heading</h2>
<p>This is a paragraph of text with some <b>bold text</b>.</p>
</body>
</html>You can copy the text into a file and view the pages in a web browser to see the effect.
The result will be like the picture below.
Web pages of today can be quite complex. But they still follow the general rules of tags outlined here. Keeping to the rules and learning new tags will set you on the path of learning how to code web pages.
You can see a fill list of tags at https://html.com/tags/
Have fun creating a web page.
Why did you write
《body》(which won't work) instead of properly writing<body>(not only for body, but for all tags)?