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:

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.

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:



And the 'closing tag' might look like this:



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.

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.

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:

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.

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.

Welcome to Our Blog!

A resource for developers, designers, and those without anything else to do.

Thanks for stopping by, and welcome to our official North43 Design blog. We hope to adopt the whole 'open source' attitude by sharing our resources with you and the rest of the web design community. Keep checking back for new projects, samples and tutorials to keep your skills sharp.

See you soon.

Posted by Adam on 14.01.2009.

Our Links

North43 Design
Our Latest
Client Login
Terms of Use

Categories

View All
News
Samples
Tutorials

Archive

This Month
Last Month
March 2009
February 2009
January 2009