If you didn’t check out the last tutorial, quickly check it out. We are going to pull apart the HTML code that we found in that lesson to give a briefer in HTML.
HTML stands for Hyper Text Markup Language. It is a language that is based on control statements, basically commands wrapped around text to tell the web browser how to display the web pages. Without many of the HTML commands that we have available to us, web pages would just display as text. Fortunately, using the generic commands that many web browsers interpret the same way, we can make functional and graphical web pages.
In HTML, the commands are call tags. HTML tags tell the browser what to do with the data returned from the web server. Let’s take a look at our example from lesson 2. The entire text is here:
1 2 3 4 5 6 7 8
<html> <head> <title>My First Webpage</title> </head> <body> <p>Not going to say Hello World!</p> </body> </html>
That would actually display a page that just had some text in it that says “Not going to say Hello World! and the title of the browser changes to “My First Webpage”.
So let’s review the various parts, keeping it in the hierarchy found. First of all we have the beginning and closing HTML tags.
These tell the browser that the markup found in the text is the HTML format. Every HTML page has a tag at the beginning and a tag at the end. The second tag, with the forward slash, is called a closing tag. This tells the browser that it has reached the end of the segment that matches the name in the closing tag. All text and tags found between an opening and closing tags are considered to be “nested” between those tags.
Let’s look at the next part. The head tag.
1 2 3
<head> <title>My First Webpage</title> </head>
The head tag always goes next after the opening html tag. The head is the header section and contains information for the browser about the page, as well much of the scripting instructions that might appear on the page. We will get into that much later, but for now just think of the head section as definitions. For example, the Title tag, which is nested in the head section, tells the browser the name of the specific page that the user is on.
Next comes the body. Let’s look at how we wrote that code:
1 2 3
<body> <p>Not going to say Hello World!</p> </body>
The body section always follows the head section. The body contains the actual data that is to be displayed on the web page, it tells the browser how the page should look. Text, graphics, and links can all be found in the body section. In this example, we are including the p tag which tells the browser to display a block of text as a paragraph. Notice the closing tag both for the p tag and the body tag.
That is it for this lesson. Congratulations, you are getting closer to creating your own web page! Next lesson, we will talk about taking this code, storing it in a file and viewing it in your web browser.