HTML: basic geekyness – Part 1

In this time of internet and webapplications it can be handy if you know something about HTML. A web programming language.

If you ever wondered how websites are made, well it’s something alike creating a computer program. You need an editor, something to view/compile (although this not entirely correct) your website and the correct technology.

There are a lot of ways to create a website. You can use for example HTML (can be combined with javascript and css), flash, ASP, PHP, … .

The most basic form, or at least in my opinion, is HTML. No matter which type of website you make or which technology you use, there will always be some HTML code used (or at least in 95% of all cases). Therefore it is important to know how this language works and how you can use it.

Like most programming languages it seems very complicated and hard, but the truth is… It ain’t all that bad. HTML is a very “straight forward” language. Once you get the principle you will be well on your way.

Let me therefore explain you what HTML is first.
HTML stands for HyperText Markup Language. This language works with, what is called, container tags. Something like this “<name of the tag>”. Most of these tags also have a closing tag, which is actually exactly the same as the opening tag but with a “/” in front. So “</name of the tag>.

You can start creating HTML pages with a lot of tools. A very good HTML editor is for example dreamweaver (well this is not ony an html editor, it understands a lot of other languages as well). Frontpage is another example. But don’t worry, there is no need for additional and expensive software. You can, and yes this will be hard when you start creating larger websites, start creating HTML pages simply in notepad (or something similar).
Save the code you wrote in notepad to a file with extension .html or .htm and there you have it.. A webpage.

Now.. the basics. I’ll be using notepad as well to show you the example.
First of all you need to understand that HTML is structured. Most containertags you open must be closed as well and some of them need to be nested.
How do you start…

You ALWAYS start your html document with the containertag <HTML>. This is how your browser will recognise it is an html document.
This tag needs to be closed, so you will need to put </html> as well.
Everything else that you will program/create needs to be done within these tags.
Your document looks like this right now



Good!.. The next tag you need to know about is the HEAD tag.
This tag will contain all the head (du’h) elements. Like for example a title, a script, a style.. You’ll see soon enough.
As I said before, all the containertags you will be using from now on will be between the html tags. So, add the HEAD container tag.

The code will look like this now:


Do yourself a favour and add tabs in your code (for some reason I can’t do that in this editor). After a while it really becomes hard to read.
For now we have only done some administrative things. let’s add a title right now.
With the TITLE tag… That was surprising.. wasn’t it?

Now, Title goes within HEAD so your code will be as followed.

<TITLE>Sharp’s tutorial</TITLE>

Between the title tags you can put whatever you like. This will be the title that will be shown in the browser window.
I saved my document as tut.htm. And if I open it, following info is shown:
Notice in the TOP LEFT of the window my title. My code looks like this for now:
Excellent! So far so good. Now let’s put some actual text on the website.
In order to let the browser know what he needs to show in the body of the page you can use the containertag <BODY> (this is getting boring). This containertag is also administrative (has a few options though) and needs to be within the HTML tag.

So, your code will look as followed:

<TITLE>Sharp’s tutorial</TITLE>

Now let’s add a line of text. There are 2 basic ways to define how your text should look. You have the <FONT> tag and the <H1> to <H6> tags. The font tag will be the most commonly used, this allows you to define the color, size and face of your text yourself. The “H” containers are more or less predefined styles. H stands for Heading or Header (like in word, indeed). H1 is the largest, H6 the smallest.

<TITLE>Sharp’s tutorial</TITLE>
<H1>This is a heading</H1>
<font> This is normal text</font>

Save your document and open it in a webbrowser. It will look as such:
My code so far:
Let’s keep it at this for now. I’ll explain more of HTML asap.


8 thoughts on “HTML: basic geekyness – Part 1

  1. Pingback: HTML: basic geekyness – Part 2 « Tech-o-rama

  2. Pingback: HTML: basic geekyness – Part 3 « Tech-o-rama

  3. Pingback: HTML: basic geekyness – Part 4 « Tech-o-rama

  4. Pingback: CSS: The basics part 1 « Tech-o-rama

  5. Pingback: CSS: The basics part 3 – Inline CSS « Tech-o-rama

  6. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  7. Pingback: Advanced webcoding: PHP – Part 1 « Tech-o-rama

  8. Pingback: Beginners guide to advanced webcoding « Tech-o-rama

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: