TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Starting with HTML programming

By now, you should know what clients and servers are, and you should also know that you need to use HTML as your basic language to program a website. So, what program are you going to use to write all that code?

HTML documents are plain text files

HTML documents are plain text files, so you don't need to use any fancy editor—in fact, I would recommend never using those do-it-all web page editors since they really limit your creativity—real coders learn how to read the code and visualize it inside their minds.

So what you really want to use is a simple text editor. Any version of Windows comes with Notepad and Mac OS X comes with... well, nothing that really works, so I recommend downloading Smultron (funny name, nice text editor).

Note: For windows users. Although notepad will do the work, I really recommend downloading SEG, a lightweight text editor capable of opening several files at the same time (something you'll find yourself doing very often) and has a very useful code highlighter feature, which allows you to identify important parts of your code in real-time.

Well, without any further ado, let's start our practice.

Open your text editor with a blank document and write:
```
HELLO WORLD!
```
Save your text document as first_practice.html
Note: Be careful to specify the .html extension for your file since some text editors will tend to use the .txt extension as default for new files. You can also use .htm as extension (without the last L).
Also make sure make sure your Windows instalation is not hiding the file extensions.
Double click on your newly created document. A browser window will open displaying its content, in this case a plain "HELLO WORLD!" sentence. (From now on, we will call this: "Testing your file with the web browser").
Notice that there is no format at all in your sentence; it is displayed in simple, plain text using the browser's default font.

Wanna add some format to your text?

HTML is all about tags. Tags are predefined keywords surrounded by angle brackets that define how a text or part of a page will look like. Tags usually come in pairs, like:

<tag> SOME TEXT </tag>

See? Our text is contained between an opening tag and a closing tag. A closing tag always starts with a bar (/).

Open your first_practice.html document using your text editor (not your web browser!).
Place the word
```
HELLO
```
between
```
 
```
tags so your text looks like::
```
HELLO WORLD!
```
Save your .html file and test it with your browser.

Q. What changed?

Q. Can you tell what the

<b>

tag does? (yes, it makes the text to bold).

Now, let's try with the

<i>

tag.

Edit your .html file and change it to:
```
HELLO WORLD!
```
Test your file with your browser.

Q. What changed this time?

The

<i>

tag makes the text to display in italic font.

You can also combine tags.

Try with different combinations of the

<b>

and

<i>

tags:

<b>HELLO</b> <i>WORLD</i>!

and

<i><b>HELLO</b></i> WORLD!

and

<b><i>HELLO WORLD!</i></b>

Test each combination with your browser.

Note: Always remember to close all the tags you have opened. Also, you should close your tags in the reverse order as you opened them (take a look at the examples above). This is called "nesting".

Well, this was your first approach to HTML coding. I recommend following through all our HTML tutorials to learn more tags you can use and more advanced formatting.

I'll see you in the next turorial!

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Starting with HTML programming

HTML documents are plain text files

Wanna add some format to your text?

Comments & Questions