h1

Learn Basic HTML in 10 Minutes

July 20, 2009

About HTML Tags

First thing you need to know about HTML is tags. Tags are keywords enclosed by brackets (ex. <html>, <body>). They give your browser instructions on how to display your content. They usually come in pairs and are called start and end tags. The end tag has “/” symbol prefixed before the tag name. For example, <html> is a start tag, while </html> is an end tag.

Creating Your First HTML Page

Now lets create your first HTML page. To do that, all you need is a text editor (Notepad will do). Open your text editor then save it as “sample.html“. You now have a blank HTML file which you can open using your browser (it will display a blank page).

Now place the following code in sample.html and refresh your browser:

<html>
  <body>
    HELLO WORLD
  </body>
</html>

You should be able to see “HELLO WORLD” on your browser.

What happend?

First, let me explain what each tag means.

<html> All HTML pages start and end with these tags. These tags describe your HTML page. Don’t worry about this for now.
<body> Anything placed inside this tag will be displayed by the browser. Which is why in our example, the browser showed HELLO WORLD.

Adding a Title

If you’re using Firefox, you’d notice that on top of your browser, the title says “Mozilla Firefox”. For IE users, it shows the path to sample.html.

We can change that title by adding the following lines to sample.html Refresh your browser afterwards.

<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    HELLO WORLD
  </body>
</html>

You should see “My First HTML Page” on top of your browser. This code structure is used in most, if not all, HTML pages.

What happend?

We just added <head> and <title>.

<head> This is normally placed right above the <body>. Anything placed here will not be displayed by your browser.
<title> Sets your browser title to whatever you place between these tags

Formatting Text

Now lets proceed to adding styles to your text.

Add the following lines to sample.html then refresh your browser.

<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    HELLO WORLD
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>This is a paragraph using Normal text.</p>
    <p><b>This is a paragraph using Bold text.</b></p>
    <p><i>This is a paragraph using Italic text.</i></p>
    <p>This is a paragraph using Normal, <b>Bold</b>, and <i>Italic</i> text.</p>
  </body>
</html>

You should see something like this:

HELLO WORLD

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph using Normal text.

This is a paragraph using Bold text.

This is a paragraph using Italic text.

This is a paragraph using Normal, Bold, and Italic text.

What happend?

I know we added a lot of new tags in this example, but these are very easy to understand. Let me explain each.

<h1> – <h6> Heading tags. The lower the number, the higher the importance, thus, the bigger the size. A new line is automatically added after these tags
<p> Paragraph. Creates a paragraph, or in other words, adds a new line.
<b> Bold. Turns text to bold.
<i> Italic. Turns text to italic.

Creating a Link

Links allow you to create a text or image that, when clicked on, redirects the browser to another HTML page.

Advertisements
h1

Learn Basic CSS in 10 minutes

July 20, 2009
h1

Center-Aligning a DIV Container

July 20, 2009
h1

Using DIV Positioning

July 20, 2009
h1

Starting a Blog Using WordPress

July 20, 2009
h1

Choosing a Good Domain Name

July 20, 2009
h1

Optimizing Images Using Photoshop

July 20, 2009