Sunday, November 1, 2009

What is HTML and how to use it

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

HTML stands for Hyper Text Markup Language, it is a language (computer language) to tell your browser how a page should be displayed, which makes it possible to present information, showing pictures, graphics and etc. The language consists of codes, and there are plenty different codes for all sorts of formatting. When you view a page from a browser, what you see is the browser’s interpretation of HTML.

You can see the HTML codes of a page on the internet by simply clicking “View” and then select “Source” or if you are using Firefox browser you can press Ctrl + U on your keyboard to view the codes. For people who do not know what is or how to use the codes, HTML code can be very complicated and scary to them. The good news is that HTML is very easy to learn and understand, if you want to build your own website you need to learn what is HTML and how to use it.

The HTML codes consists of tags (markup tags or usually called as HTML tags), and the tag itself consists of keyword inside angle brackets. Most HTML tags start with an opening tag and end with a closing tag. A HTML document has 2 parts: a head (information about the page, anything you put here will not be displayed on the page) and a body (information that constitutes the page, anything you put here will be displayed on the page).

Still get confused? Well, i think it’s better if we put it into practice. Practice can explain and make you understand much better rather than just theory.

Open a Notepad, copy and paste he following HTML codes:



<title>This is my first website</title>



<p><b>This is the first sentence</b></p>

<p><i>This is the second sentence</i></p>

<p><U>This is the third sentence</u></p>



Save your notepad and name it “mypage.htm”, don’t forget to choose “All Files” otherwise you save it as a text document and not HTML document.
How to make a websiteThe ending “.htm” means that it is an HTML document, you also can name it with the ending of “.html”, it gives the same result. After that go and open the document by double-clicking the file. See and notice what happen to each of the sentence, different tag you apply to each of the line produce different effect to the text.

Here another common basic HTML commands:

<HTML> </HTML>To create a Web page. All Web pages must have this command.
<HEAD> </HEAD>All the head elements are written here, anything you put inside a head tag will not be displayed on the page. Elements inside head tag include scripts, meta information, instruct the browser where to find style sheets and more.
Displays the Title in the title bar area.
Anything you put inside the body tag will be displayed on the page and will be shown in the browsers to users.
<B> </B> or <strong> </strong>The text will be shown in Bold

<I> </I> or <em> </em>
The text will be shown in Italics
<u> </u>To underline a text or words.
<strike> </strike>To insert a horizontal line in the middle of the text.
To adjust anything you put in the center of the page.
<H1> </H1>

Heading 1

<H2> </H2>

Heading 2

<H3> </H3>

Heading 3

<H4> </H4>

Heading 4

<H5> </H5>
Heading 5
<H6> </H6>
Heading 6
New Line. Creates single space bettween lines.
<P> </p>
New paragraph. Creates double space between lines, paragraphs.
&nbsp;To add a space.
Produces a horizontal rule across document.
<li>A list</li>
<li>Another list</li>
  • A list information
  • Another list information
<li>First list</li>
<li>Second list</li>
  1. First list information
  2. Second list information

<b> means "bold"
<i> means "italics"
<em> means "emphasis"
<u> means "underline"
<h1> means "heading 1"
<br> means "break"
<p> means "paragraph"
<hr> means "horizontal"
<ul> means "unordered list"
<ol> means "ordered list"

It doesn’t matter whether you type the tags in uppercase or lowercase, it will give the same result.

In the HTML code, there is attribute. Attribute also plays one of the most important role, but what is it? Let us discuss it in the next page.

1 comment:

  1. Thank you for your article thats very helpful for me. Incidentally, I am learning about what is html?