Learn Basic HTML in 10 Minutes

claire0917 — Mon, 20 Jul 2009 01:07:55 +0000

About HTML Tags

First thing you need to know about HTML is tags. Tags are keywords enclosed by brackets (ex. , ). 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, is a start tag, while 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:


  
    HELLO WORLD

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

What happend?

First, let me explain what each tag means.

	All HTML pages start and end with these tags. These tags describe your HTML page. Don’t worry about this for now.
	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.


  
    My First HTML Page
  
  
    HELLO WORLD

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 and .</p> <table class="table" border="0"> <tbody> <tr> <td style="width:90px;"><head></td> <td>This is normally placed right above the <body>. Anything placed here will not be displayed by your browser.</td> </tr> <tr> <td><title></td> <td>Sets your browser title to whatever you place between these tags</td> </tr> </tbody> </table> </div> <h3>Formatting Text</h3> <p>Now lets proceed to adding styles to your text.</p> <p>Add the following lines to sample.html then refresh your browser.</p> <div class="code"> <pre><html> <span style="color:#000000;"> <head> <title>My First HTML Page 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.

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.

–	Heading tags. The lower the number, the higher the importance, thus, the bigger the size. A new line is automatically added after these tags
	Paragraph. Creates a paragraph, or in other words, adds a new line.
	Bold. Turns text to bold.
	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.

Learn Basic CSS in 10 minutes

claire0917 — Mon, 20 Jul 2009 01:07:26 +0000

Center-Aligning a DIV Container

claire0917 — Mon, 20 Jul 2009 01:07:02 +0000

Using DIV Positioning

claire0917 — Mon, 20 Jul 2009 01:06:36 +0000

Starting a Blog Using WordPress

claire0917 — Mon, 20 Jul 2009 01:05:41 +0000

Choosing a Good Domain Name

claire0917 — Mon, 20 Jul 2009 01:05:19 +0000

Optimizing Images Using Photoshop

claire0917 — Mon, 20 Jul 2009 01:04:45 +0000

Include CSS First Before Scripts

claire0917 — Mon, 20 Jul 2009 01:03:57 +0000

Using Image Sprite for Faster Loading

claire0917 — Mon, 20 Jul 2009 01:03:31 +0000

Be Aware of ‘dofollow’ and ‘nofollow’ Links

claire0917 — Mon, 20 Jul 2009 01:02:26 +0000

Blog Improvement Craft

Learn Basic HTML in 10 Minutes

About HTML Tags

Creating Your First HTML Page

What happend?

Adding a Title

What happend?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

What happend?

–

Creating a Link

Learn Basic CSS in 10 minutes

Center-Aligning a DIV Container

Using DIV Positioning

Starting a Blog Using WordPress

Choosing a Good Domain Name

Optimizing Images Using Photoshop

Include CSS First Before Scripts

Using Image Sprite for Faster Loading

Be Aware of ‘dofollow’ and ‘nofollow’ Links