Basic Html For Beginner

When you surf the web, you can see address like http://www.site.com/file.html or http://www.site.com/file.asp or http://www.site.com/file.php. The .html, .asp and .php files are what we call web pages.

The html files are the static web page. We call it static because it will display the same thing that was typed on it. Whereas .asp and .php files are called dynamic web pages because it can respond to a given set of rules or situation.

The dynamic web pages have much advantages over static wbepages. Dynamic web pages are interactive and respond to the user setting. It can read and write to and from databases. Forums are good example of the dynamic web pages. They are easier to maintain and updated but unless you are good in web programming, the dynamic web page is not for you.

HTML or static web page is actually the father of web page technology. All those dynamic web page codes will converted by the webserver to HTML codes so that it can be displayed by your web browser. It does not matter whether the web page is .html, .php or .asp, If ypu right click on your web browser and "view source", all you can see are HTML codes.

Static web page are not interactive. They will stay the same from the very time you build it. However, the biggest advantage of html files ove asp and php files is that html files is the easiest to build. Building an html web page is like writing an article using your word processor like MS Word.

The World Wide Web is born in CERN. Created by Tim Berners-Lee. Based on SGML (Standard Generalized Mark-up Language). The idea was that the language was independent of the formatter (the browser or other viewing software) which actually displayed the text on the screen. The use of pairs of tags such as <TITLE> and </TITLE> is taken directly from SGML, which does exactly the same.

After an early years of difficulties, coding the html code in word editor such as notepad, the birth of WYSIWYG (What You See Is What You Get) HTML editors such as MS Frontpage and Macromedia Dreamweaver, the development of web page today does not belong exclusively to the "computer nerds" anymore. Today, anybody who can read and use computer keyboard can build their own website.

In this section, we will learn few basic HTML tags that could be beneficial for beginners and people who just want to develop web page. Eventhough you will mostly be using the web page editors, there are times that you will be frustrated when the editors does not really responds to your real intention. These basic HTML lesson will be handy for you to directly edit the code when needed.

Most HTML tags comes in pair. Every web page will consist of these building blocks.
<HTML>
<HEAD><TITLE>Your web page title goes here</TITLE></HEAD>
<BODY>
Your intended article/content goes here
</BODY>
</HTML>

Eventhough in the sample code, capitals will be used, HTML is not case sensitive, meaning it will be the same for the computer whether you are using capitals or small caps.

As you can see, those tags comes in pair. It starts with <HTML> and closed with </HTML>. The "/" denotes the closing tag. Only text and tags that comes in between those tags will be read by the browser. <HEAD> denotes the head section. TITLE are strictly in HEAD section. Everything else comes in the BODY section.

For text formatting purpose, the <font> command if closed with </font>. The Font attributes includes size, this text is 11px in size and font for font style. Links tag is <a href="url">your text</a>. The <a href="http://www.google.com">Google</a> will give you Google. For email, we use the <a href="mailto:mywebproject@gmail.com">email me</a> tag which will give us email me.

However there are few tags that does not require a closing tag. The paragaraph tag <p> which will gives you the effect of using <enter> and the page break tag <br> which will gives you the effect of <shift>+<enter> in Dreamweaver and Frontpage. However, the web editor does gives you the closing tag of </p> but it is not compulsory. Image are embedded using <img src="source file/path">. The attribute for image is height and width. Here, I use the 147x142 fox.gif image

My biggest problem using Dreamweaver, one that you won't get with Frontpage is to space the text using the space bar. For example, you space this TEXT1 TEXT1. But you can not make it spaced more than one spacing like this TEXT1 TEXT2 . This is a frustrating overlook by Dreamweaver. However, you can use the   in the code to overcome the problem. One   is equivalent to one space bar hit.

There are 2 kind of list in HTML. The ordered and unordered list. The list tag is <li> closed by </li>. The oredered list tag is <ol></ol> and unordered list tag is <ul></ul>.

<ol> <li> Ordered 1</li> <li>Ordered 2</li> <li>Ordered 3 </li> </ol> gives you this.

<ul> <li> Unordered 1</li> <li>Unordered 2</li> <li>Unordered 3 </li> </ul> gives you this.

The last basic HTML tag that may come handy to you is table. The table tag looks like this
<table border=1><tr><td></td></tr></table>. This tag will give you a 1x1 table. The border=1 makes your border visible. The bigger the number, the bigger the border size. The border will be invisible if you set border=0. The <tr> tag is for the row and the <td> tag is for the cell (or the column). To have a 3 column per row, the tag will look like this <tr><td></td><td></td><td></td></tr>. If you have three set of similar tags in your table, you will get a 3x3 table. This tag
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
will give you this.

If you see the above table, I have created a 2x3 table with a border=1. As you can see, I have combined the first column and the upper row. This is called spanning. The command is colspan=x and rowspan=y respectively. The x and y denotes the number of column and row that you want to combine.

Free Web Template

By reaching this point, you should have a very good idea of creating a web page. However, not many of us have the skill or time to create a good looking web page. Don't worry about that. There are tons of free and paid web page that you can get from the internet. You can have an html template, php template, flash template and lots more either for free or by paying profesional webmaster or web designer.

Choose the one that you like but choose wisely because your website design will affect your visitor due to certain factors. For a little quick info on a good web design, follow this link.