Acme Web Design Info Logo Everything your mother didn't teach you about the web Hand pulling Acme Web Design package

Acme Web Design Info

Build Your First Web Page with HTML

The Principles of HTML

Computers are actually pretty stupid machines, and those who understand this principle typically spend a lot less time banging their heads on their desks. What computers are very good at is following instructions, and in many cases they do this more accurately and much faster than humans. HTML code is basically a set of explicit instructions you give to a browser so it knows what to do with the information you have given it.

Here is what a very simple web page looks like, in HTML:

<html>
  <head>
    <title>Bludge's Music Collection</title>
  </head>
  <body>
    <p>This is the page text</p>
  </body>
</html>

Even before we go into details about the code above, you can probably figure out about what it does. HTML is designed to be easily read by human eyes.

As you can see, HTML uses snippets of characters between the "<" and ">" brackets, like <html>. These are called "tags". Every tag we used above also has an ending tag, which looks like this: </html>. The <html> tag says to the browser: "this is the beginning of an HTML page." The </html> ending tag says "this is the end of the HTML page."

The next tag you see is the <head> tag. The information between <head> and </head> typically tell the browser what it needs to know before it displays the content of the page. For instance, you see the <tile> tag "nested" within the <head> tag, as follows:

<head>
  <title>Bludge's Music Collection</title>
</head>

The <title> tag tells the browser what to display in the topmost bar of the browser. There are several other useful tags that belong in the <head> tag, but we will cover those later.

After the <title> tag comes the <body> tag. The <body> tag contains the information that will be displayed in the browser window. In the example we used above, we have the following code:

<body>
  <p>This is the page text</p>
</body>

This tells the browser to show a paragraph (which uses the tag "<p></p>") containing the words "This is the page text" in the browser window.

Are you getting the hang of it? Good. Try copying and pasting the code below into the document you saved earlier ("hello.html"), and open it to see what it looks like.

Note: To open your document with your text editor rather than your browser, take the following steps:

  1. Right-click your document and hover over the "Open with" option.
  2. Select "Notepad" from the options available.

Now that you know the basic principles of HTML, it's time to actually start building the content of your page with paragraphs and headings.




<< BACK NEXT: Headings and Paragraphs NEXT >>
BACK: What is a Web Page? A Practical Answer


Link to this page and help others find this stuff!

Copy and paste this code:

Friendly Linking