Web Design Tutorial - Lesson 1, Part 5
Lesson 1, Part 5
So, Where Do We Start?
To finish up this lesson, we are going to build a very simple web page, and analyze the different parts of it. You’ll learn some new fundamental tags, and what they do.
To begin, start up your editor of choice. If you are using Notepad++ (N++ from here on) as I recommended in Lesson 1, Part 4, go to the Language menu at the top and select HTML. This will set the syntax highlighting to recognize HTML tags. You don’t have to do this, since once you save the file the program will automatically switch to the appropriate setting. However, if you want the highlighting enabled right away, you should do this now.
If you don’t know what Notepad++ is, I recommend you go back to Lesson 1, Part 4 and read about it.
Type the following code into your editor. Do NOT copy and paste. I can’t stress this enough, and I will probably reiterate it often. The point is to learn to do this, and copying and pasting will teach you nothing.
First, let’s put in our own html tag. As I explained in Part 3 of this lesson, this will allow the browser to recognize the page as an html document. Begin by typing <html> on the first line.
Now hit ENTER to skip to the next line. Next we’ll open the document header by using the header tag <head>. The header is where you put information you need the browser to know about, but that you do not want to show up on your page for users to view. We’ll use the next part as an example.
Press ENTER again to skip to the next line, then press TAB. Type in <title>. This will open up the title tag. The title element contained in this tag is what will show up in the blue bar at the top of your browser window. This is an item that you want the browser to know about, so that it can display it in the window’s title bar, but that you don’t want to appear in the actual page. This is why the title is in the header. Now type “Hello World!”, and close the title tag by typing </title>.
That’s all we need in the header section for now. Press ENTER to go to a new line. If your cursor is indented so that it’s right under the beginning of <title>, hit BACKSPACE (or DELETE for Mac users) to go back to the beginning of the line. Now close up the header section by typing in </head>.
Now that we’re done with the header, we can proceed to the body section. The body section is where all your content is written. Anything you want the user to see must be entered in the document’s body. Begin the body section with the tag <body> on a new line.
Since this is a very basic web page, we’re not going to get into anything too fancy here. Skip to the next line, indent using TAB, and type in <h1>Hello World!</h1>. The “h1″ tag is a heading tag. This is not to be confused with header. You will learn more about heading tags in the next lesson.
That’s all. Let’s wrap up this page by closing the remaining open tags: body and html. Press ENTER once, make sure your cursor is lined up with the <body> tag, not the <h1> tag, and type in </body>. Skip to the following line and type in </html>. That’s it! Your code should now look like this:
<html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
I want to point out just one more thing. The indentations for the “title” and “h1″ tags are not necessary as far as the browser is concerned. In fact, HTML doesn’t recognize anything beyond a single white space in between two words. That’s why if you try to type <h1>Hello World!</h1>, the browser will still output “Hello World!” with a single space.
I digress. The point is that the reason for the indentations is for code readability. It allows whoever is reading the code, be it yourself or someone else, to immediately identify that the indented section belongs inside the section it is indented from. So anyone looking at the code you just wrote can immediately tell that the “title” section belongs to the “head” section, and the “h1″ section belongs to the “body” section. This is a good practice, and you should always use such visual hints to keep your code from becoming one big unintelligible blob.
Alright! Now go ahead and save your file to your desktop as “basic.html”. HTML pages can be saved with either “.htm” or “.html” extensions, though currently “.html” is the more frequently used. In your Save dialog box, you should set the file type (under the box where you would input the name) to “All Files”, so you can avoid accidentally saving your file as something like “basic.html.txt”. Now go to your desktop and double-click on “basic.html”. Your default browser should open up displaying your page. Notice “Hello World!” both in the title bar of the browser window (courtesy of the “title” tag), and in big letters in the web page itself (which came from the “h1″ tag).
Congratulations! Your first very own web page! But you’re just scratching the surface of what can be done with HTML. There’s many more tags to learn, so Subscribe to My RSS Feed to find out when Lesson 2 is available!
Enjoyed the lesson? Keep your eyes open for Lesson 2.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!
<< Go back to Lesson 1, Part 4 Table of Contents Continue on to Lesson 2, Part 1 >>
Leave a Reply