Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Using HTML

Posted October 18th, 2011 by

In this article, I’m going to (attempt to) show you how to use HTML – A language used to create websites and display web pages.

Yesterday, something interesting happened… I started trying to get the word out that I owned a website, so I got a few friends to look at it. It just so happens that one of them noticed something: The comment box says that you are allowed to use certain HTML tags. THe problem is, not everyone knows how to use them. So it hit me, I should write a tutorial on using HTML.

And here it is…

HTML. You’ve probably heard of it. It stands for Hypertext Markup Language – a language used throughout the web in order to create web pages, the main component of websites. So why don’t we start by having you create a new text file – any plain text editor will do (EG: Notepad, but beware, MS Word doesn’t work all that well). Let’s copy and paste the following code into the text file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>

Now save it as an HTML file, by changing the file type filter to ‘All Files’ and saving it as ‘page.html’. Go ahead and double click your saved file. You’ll be greeted by a pleasant… Blank page. That’s right. Eight lines of code for a blank page. (To be fair, you could’ve gotten a blank page without typing anything into the text file).

The page that you just created is the most simple of all pages. It does nothing, but is completely valid and will be used as the building block for pretty much any other page you create.

Let’s take a look at this code. You’ll see an abundance of greater-than and less-than sights and slashes. These are what ‘tags’ are made of. They work like this:

<html>
</html>

or
<head>
</head>

or something similar. The opening tag, which looks like <html> means the beginning of a container or element in the page. The closing tag, which looks like </html> signifies the end of the container or element. Any code within the tags is considered to be inside the element. An example of this are the <head></head> and <body></body> tags, which are inside the <html></html> tags.

Anything that needs to be displayed on the webpage needs to be contained in the <body></body> tags. Almost everything you see in a webpage is contained within the <body></body> tags. Let’s modify our code slightly to make it more interesting.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
Hello, World!
</body>
</html>

Now look at the page. It greets you with a friendly message. It’s not hard to understand why: You’ve now got the words ‘Hello, World!’ contained in the body tags, which allows you to display the message on the webpage. You can change it to whatever you want now, as long as it’s not something that could be confused with a tag or something similar. If you do wish to use a special symbol, you must use the HTML versions. For example the less than sign is ‘<‘ and the greater than sign is ‘>’.

More tags

There are heaps more tags available for use, from image tags to paragraph and font tags. Once you know the basics, it’s easy to find what you’re looking for.

That’s it. I’m done. It’s hard to write about web languages. I suggest you go to w3schools for a more detailed (And probably easier to understand) tutorial on HTML.

If you want more, check back soon. I’m bound to write more about this.

Comments: none yet | Filed under: articles, tutorials | Tagged: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *