Subject: Hyper Text Markup Language (HTML)
By Muneer Koliyat
(Ref # 002-04112K5)
I really interested in web designing after I got some information on HTML. I think, you also will get some ideas on HTML by reading this article. I would like to explain something that I met while I was trying to be in deep with this language. HTML is a simple markup language used to create hypertext document that are portable from one platform to another. It is readable in any platform. It is very easy to learn and can be created by using even a simple text editor like notepad, which is available with operating systems. So, you do not require any expensive program.
Before Starting
I suggest you to go through some website that has html pages. You will get some ideas on web page that created in html language.
You can view html script by clicking View > Source in web browser (Internet Explorer). In some browser it will be 'document source'.
The Basic Of HTML
HTML files must have htm or html file extension. HTML uses delimiters (<) less than to open and (> ) greater than to enclose html script like as <html> (the word html is written in between greater than and less than symbols.)
HTML pages are starting with <html> tag and ends with </html> tag. It means there should be an opening tag and a closing tag. (the tag with (/) is known as closing tag)
The basic structure of html page will be as in Example #1
Example #1
<html> <head> <title>Heading of your page </title> </head> <body> Body of your page </body> </html> |
Example #1 reveals you that the first line <html> is opening tag of your web page and last line </html> is closing tag.
There will be heading part and body part. These two parts are written between two tags.
There will be an opening tag <head> and a closing tag </head> in heading part. Opening tag of the body part will be <body> and closing tag is </body>
The Title tag will be the title of the page. It will appear in the title bar at the top of the screen when the page is viewed in browser.
Create your first page
v Open notepad ( Start > Programs > Accessories > Notepad )
v Copy and paste above code (Example #1) into notepad
v Save the file as example1.html
v Open the file example1.html
Easy way to create HTML page
First of all, I would like to tell you that there is easy way to create html pages other than typing these long scripts. If you are looking such tool to create web pages, you may immediately not required to know html, you can use the features 'WYSIWYG' ( What You See Is What You Get) user interface similar to those used in word processors like Microsoft Word. If you know this, you can create html page in easy way.
Front Page is a good example for 'WYSIWYG'. You can create and edit pages very easily. This friendly user interface has many convenient formatting wizards and templates. It displays the page just as it appears in web browser.
So, why should I learn HTML script?
Here is the answer for your question….
1- Easy to use & easy to understand codes. Similar words to English language.
2- You can create pages using any text editors like notepad from any computer.
3- Trouble shooting on error will be much easier.
4- You will be able to understand the correct structure of the page and can added some extra add in s from other scripts like java.
Structural codes to keep in mind while learning
Bellow (Table #1) codes are used for different purpose as mentioned in column in the middle. The code which is in left column is the starting tag of each html script and code in right column is ending tag. The sentence is written between these two tags as in Example #2
Example #2
In sentence "My name is Muneer Koliyt"
I want the name Muneer Koliyat to make bold letter
The code will be as follows
"My name is <b>Muneer Koliyat</b>"
The result is "My name is Muneer Koliyat"
|
Table #1
Starting |
| Ending |
<html> | Starting and ending tag of html page | </html> |
</head> | Starting and Ending tag of header part of the page | </head> |
<title> | Starting and Ending tag of title of the page | </title> |
<body> | Starting and Ending tag of body part of the page | </body> |
<b> | These starting and ending codes are used to make letter bold | </b> |
<i> | These starting and ending codes are for making italic letters | </i> |
<u> | This code is to make an underline for the letters between these tags. | </u> |
<tt> | These starting and ending tags are used to make the letters between these codes as Typewriter font | <tt> |
<center> | These are the starting and ending tags for centralizing the sentence. | </center> |
If you watch the structure that I have used in Example #2 , you can write other codes same as I followed.
If you want to make any letter italic just add the code <i> at the beginning of the letter as opening tag and </i> at the end of the letter as closing tag.
<i> This letter is to make italic </i>
There are some tags that does not required an ending tag, see the table #2.
Table #2
<hr> | This is to give a horizontal line across the page |
<br> | This tag is to make line break and start in next line, same like enter in word processor. |
<p> | This is for starting next paragraph, normally the closing tag </p> for a paragraph does not required, but I recommend to use it anyway. |
The html tags are not case sensitive.
So, you can use CAPITAL or small letters to write codes, but I like small letters to write html script.
Extra blanks & spaces can be added
It is easy to read if you add some extra blank lines and spaces in your script, this will be ignored when the HTML is interpreted. See example bellow.
<html>
<head>
<title>Title of your page </title>
</head>
<body>
Body of your page
</body>
</html>
Heading tags.
Normally headings are used to identify its following section. So it will be highlighted. HTML using <hy> as opening tag of the heading and </h y> as closing tag of the heading. y represents the size of heading. Number 1 is largest size and number 6 is small as given in example bellow.
Script Result
<h1>Sample heading</h1> Sample heading
<h6>Sample heading</h6> Sample heading
