UberPages :: Tutorials :: HTML Tutorials :: Beginner's HTML Guide
Quick Menu
HTML is the fundamental tool behind just about every web site: If you want to display data to the user, you are most likely using HTML.
Before we start, you should also know that HTML is NOT programming. It's simply just a way of telling the internet browser what to do with things like text, images, flash and other stuff. Keep that in mind for later when you start thinking of CSS.
A good way of getting into and familiar with HTML, is by going around to some of the web sites you know and looking at how things are laid out. Just look at how the tables are positioned, and where the content blocks of text are. You'll notice some sites have their content down the center with navigation to the top, or content to the right with the navigation to the left.
Go ahead and check out the web site's source:
View -> Source, or
Right click on an empty part of the site and click "View
Source" (Internet Explorer).
If you are looking at a site NOT using CSS for it's layout, you'll see that web sites use tables to position much of their content, as well as alignment tags, etc. Maybe you've noticed that HTML reads quite a bit like a book.
A picture near the top of the source code will be near the top of the actual page. Any text near the top of the source code will probably be near the actual top of the page in your browser, too.
Hope you've gotten comfortable with it so far - It's time to try it yourself!
To make pages, the best place to start is Notepad, believe it or not. Try to stay away from some of the visual editors for now, you want to learn the nitty-gritty, dontch'ya?
Click the start button, and click "Run..."
In the box, type: notepad
Start typing - You're ready to rock!
Type this in, word-for-word (you can even copy and paste it, just get it in there!), and I'll explain what it all means.
<head>
<title>My Webpage</title>
</head>
<body>
Hello World!
</body>
</html>
Now SAVE your notepad file, BUT when you put in the filename, enter: index.htm
Note: It's a good idea to name at least one page in a directory (folder) "index.htm" (or .html or .asp or .php and so forth). Most servers look for that file by default, so that's what people name their start page. It's the index, got it?
That's it, you've just made your first page!
Now if you double click it, it will open in your web browser, because it's an HTML file. But if you want to go back to adding stuff to it, just open the file again in Notepad. It's that easy.
Let's take a look at some of that code...
You start by opening by writing <HTML> and then <HEAD>. This tells the browser that HTML is about to start, and then, you tell the browser that you've got some data to go into the head of the browser.
Here's where you added the page <TITLE></TITLE> with your page title encapsulated within it. Have you noticed how tags need to be closed after they have been opened? Always remember to, CLOSE YOUR HTML TAGS.
Next you close off your head tag, and open the body tag.
Everything within the <BODY></BODY> tag is actually what you will see in the browser screen (unless it's hidden otherwise). Lastly of course you need to close off you first <HTML> tag with </HTML>.
There, that's it - I've kept it very basic to start out. When you're feeling up to it, check out the other HTML tutorials about basic tags and more!
