The first four tags
Start at the beginning with HTML
At this point, you should have an open, empty file in your text editor. It probably looks something like this, with just a blinking cursor waiting for you to type some code:
|
The very first thing you need to do when you're creating a page is to tell the browser what language the page is written in. This is easy to do. Just enter the tag <HTML> at the very beginning of the page. This is a container tag, so you will also need to close the tag by placing a </HTML> at the end of the page. Every single thing on this page will be contained by the HTML tag -- so everything else on the page must go between the <HTML> and </HTML>.
|
HEAD and BODY
Every web page has two main parts -- a head and a body. Just like a human, the page needs both a head and a body to function correctly.
The head of the page contains information about the page. The contents of the head generally don't display on the page itself; it's just information for web browsers and search engines to use.
The head is a container tag, too, so make sure that you include both parts!
|
After the head, you need to have a body. (Remember, you always need to have both. There's an exception, but it comes along much later.) Make sure that you close the HEAD tag (with </HEAD> before you open the body tag, and that the closing BODY tag comes right before the closing HTML tag.
|
Now we need to add some basic information to the head of the page. Every page must have a title. The title doesn't appear on the page itself -- it appears at the top of the window bar containing the page. Let's call this page "My First Page," and then we'll see where the title shows up.
|
Once you've done this, save your work. Then you'll need to use your web browser to view what you've done so far.
In your browser, go to the File menu, then select "Open". At this point a dialog box will pop up. It will look different depending on which browser you are using, and which operating system. You need to use this box to find the file you want to view. On a Mac, you'll see a list of files and folders. Just navigate through this list to find the file you just saved. On Windows, you'll see a little box that asks you to enter the name of the file you want to view. Instead, just click the button that says "Browse" or "Choose File". This will allow you to navigate through your directories to find the file you just saved. Once you find that file, open it.
Then, you will see the results of the code you just entered:
Notice that the title isn't on the page itself, but, rather, at the top of the window.
Our final step today is to place something on the page itself. Everything that will be seen on the actual page goes inside, or between, the BODY tags. Let's type something there now.
|
When you're done typing, save your work. Then open the page in your browser, just as we did previously. You should see something like this:
Notice that whatever you typed inside the BODY appears on the page itself. It's not very exciting yet, because we haven't learned the tags used to format the text in any interesting way yet, but it is a real web page. Be proud of it!
The next section includes a few exercises for you to try.