Pages

Monday, June 27, 2011

HTML: The Basics

Today I'm going to be going over the basic tags in a HTML web page, as well as how to save it. To begin with make sure to have your text editor, I personally use Notpad++ (you can find the post about that here) as it is a free program while still giving you customization, tabs, and line numbering.

To start open your program and save the file. Name it whatever you please with the file extension ".htm" or ".html" There's not much difference and explaining it would be more of a history lesson. For this tutorial I'll be calling it "index.html" Now the first tags you need is the <html> tag.

index.html so far:
<html>

</html>


When using tags most of them also need a closing tag. This designates what area the tag affect. The <html> tag is used to describe the code in the webpage. It is needed in all HTML documents. Now we need to add a few more tags to make the page work. <head>, <title> and <body>.

index.html so far:
<html>
<head>
<tittle> Title </tittle>
</head>
<body>

Things that go on the page.

</body>
</html>


This is a lot to add at once so let me break it down.
<head>
<title> Title </title>
</head>


The <head>, tag designate the head of the html page. Pretty simple. the <tittle> tag is within the head tag because it is part of the head of the HTML page. It is the text that is displayed at the top of browsers and on tabs.

<body>

Things that go on the page.

</body>


The <body> designates the body of the page. Also pretty straightforward. This is where all the content on the page goes. You also might notice I skip lines and indent, this is different for everyone but it make the code easier to read for me. Now save your file and open it in the browser of your choice and you should see whatever you place in the body. There are more tag to go within the body of the page but those will be covered another time.

This is the bare bones you need to know to create a HTML page.
Pastebin of the file

I would like a little use feed back, should I continue using blockquotes or should I post a link to a new paste bin for the coding?

7 comments:

  1. that nice....
    wath do you know about PHP?

    ReplyDelete
  2. We might be doing some PHP over the next following weeks.

    ReplyDelete
  3. Already knew most of this but thanks for sharing it was a nice refresher.

    ReplyDelete
  4. Neat explanation. Learnt Html that way.

    ReplyDelete
  5. Nice memory refresh. Keep it up. Please Php next time =).

    ReplyDelete