Basic HTML
HTML | It's more basic than you think.
Okay, so you're thinking about starting to make websites and don't know a thing about HTML. Or maybe you know a little bit. Or maybe you know a lot, and are just checking to make sure we know our stuff.
In any case, this tutorial will hopefully get you on your way to web design.
The first step is to open up text editor, notepad, or any other plain text editor you might have. Then open a new file and copy and paste the following code into the page:
<html>
<head>
<title>
My New Web Page
</title>
</head>
<body>
Here's some content on my new web page!
</body>
</html>
Now save the file, and open it with your default browser. Congratulations, you've made your first website! Now we'll get into the details as to what everything means.<head>
<title>
My New Web Page
</title>
</head>
<body>
Here's some content on my new web page!
</body>
</html>
HTML is comprised up of 'tags'. Each of these tags begins with a '<' symbol, and ends with a '>' symbol. An 'opening tag' might look like this:
<tag>
And the 'closing tag' might look like this:
</tag>
You'll notice they're exactly the same, only the closing tag has a '/' in front of the word. So what's the point of these tags? They show us where a certain section of the web page starts and ends. Now let's look at our web page code.
1. <html>
2. <head>
3. <title>
4. My New Web Page
5. </title>
6. </head>
7. <body>
8. Here's some content on my new web page!
9. </body>
10. </html>
Line 1 just tells the browser that it's starting a new HTML document. The 'head' tag in line two is the area of the document that all the extras are put in. For example, you'll notice the title tag (beginning on line 3, ending on line 5) is in the head tag. Other things that can go in here are keywords for the web page, descriptions, style sheets, javascript, and a whole plethora of other things.2. <head>
3. <title>
4. My New Web Page
5. </title>
6. </head>
7. <body>
8. Here's some content on my new web page!
9. </body>
10. </html>
The body tag in line 6 is the one that holds all the contents of the web page that you actually see. You'll notice that 'My New Web Page' doesn't show up on the actual web page itself. Following the contents of the web page, we have the closing tags for the body and html sections.
Another thing that you'll notice is that the tags don't overlap each other. If one tag starts in another, it ends inside that tag as well. For example, incorrect code would be:
<html>
<head>
<title>
</head>
</title>
<body>
</html>
</body>
The title tag starts inside the head tag, but ends outside of it. As well, the body tag starts inside the html tag, and ends outside.<head>
<title>
</head>
</title>
<body>
</html>
</body>
I hope you enjoyed our first, very basic tutorial on HTML. We'll post some more on how to add to this later.
Posted by Adam on 18.01.2009.
Our Links
North43 DesignOur Latest
Client Login
Terms of Use
Categories
View AllNews
Samples
Tutorials
Archive
This MonthLast Month
March 2009
February 2009
January 2009