How To Create Website
Planing
Nowadays, many people talk about the Internet. They search for information through the Internet by using Internet search engines such as Google, Yahoo, Bing and others. We are also able to communicate or chating with friends wherever they are with an Internet connection via MIRC Chating, Yahoo Massenger, AIM or messenger and etc. Most people now interact and communicate with friends and family around the world with Internet social networking services like Facebook, Twitter, Myspace, Hi5, Flickr and others. But the question is, do you know what is the Internet? How to create a website?
Internet is a network of computer networks with other computer network which covering a very wide around the world. Internet is very useful for us to communicate and exchange information, files, data, voice, pictures, etc. between peoples around the world. Website is also known as a web page which is a file containing combination of text and code "markup". If the document viewed in a web browser, it shows a web page, but when viewed in a text editor such as Notepad it only displays text and code "markup".
Before you start to make your company website or personal website, you need to decide in advance the necessary in formation you publish on the Internet. Planning can help you to plan and make your web site.
Personal Website
Most of the websites on the Internet is a personal website made by an individual. Personal website allows you to share information with friends, family members and others. Here are some of the information typically found on personal websites.
- Personal Background
- Hobby
- Interest
- Contact
- Personal Information Photo Gallery
- Links to other websites
Business Website
More companies realize the potential of the Internet and they want to publish their web sites on the Internet because the Internet is a powerful marketing tool. Through the Internet they can sell products and services and also to advertise their companies to the world wide via Internet services. Here are some fo the information typically found on the business websites.
- Company Background
- Our Mission
- Vision Statement
- Law
- Contact Information
- Reservations
Create Website
After collecting and compiling all the information you need to be included in the website, the next things you should learn is how to create websites. A website is a essentially text file written in HTML (Hypertext Markup Language). To interpret and understand the HTML code, you must have a web browser such as Mozilla Firefox, Google Chrome, Internet Explore, Opera, Netscape Navigator or Netscape Communicator and etc in the latest version for your html code to interpret.
The tool you need to write your HTML text is Notepad or Pspad or any text editor you have.
 |
 |
Once you have these tools, you can start to learn to make a web site.
- Create an HTML file
- Open editor on your computer (if you use Windows Notepad or TextEdit if you use a Mac). You can also use a special HTML editor like Dreamweaver or FrontPage if you wish.
- Create a new file
- Save the file as (your file name).Html example: demo.html
- Create HTML Code
- See Results In Your Web Browser
An HTML file is a text file that is stored in the. Html or. Htm.
Here is an example of a simple HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>Welcome to my WEBSITE</p>
</body>
</html>
Whether you are directed to your HTML file, then double click on it OR
Open a web browser on your computer such as Mozilla Firefox, Google Chrome, Internet Explore, etc.. Choose File> Open, then click "Browse". A dialog box will appear to encourage you to navigate to the file. Refer to your HTML file, then select "Open".
Explanation for Important HTML Tags
- <!DOCTYPE ...> This element is to tell the browser the HTML version of the document used.
- <html> considered as a platform for all other tags can be in it except the DOCTYPE tag!.
- <head> contains information not normally seen in the browser, such as meta tags, Javascript and CSS. However, the <title> tags can be excluded in this case.
- <title> displayed in the browser title bar (located at the top of the browser).
- <body> is the key to your content. This is where most of your code is or visits.
- <p> is the paragraph of the text on your web site.
Closing Your Tags
As mentioned in previous lessons, you can see the opening tag and closing tag, content tag will be placed in between them. However there are some exceptions to this rule.
Closing tag a little different with the opening tag. Closing tag contains a line (/) after the sign <. This tells the browser that this tag has been closed.
UPPERCASE or lowercase?
- Although most browsers will display your site, regardless of case you missed, you should always ensure that your HTML code in lowercase. This helps you out of trouble for the future of XML code.
- True: <html>
- False: <HTML>
HTML Tags
- Meta Tag
- author, work to clarify the planning web site.
- description, this attribute works during we use the search engines. Search engine will find a description of what your web site via this attribute.
- keyword, work for the search engine automatically searches the data from your database.
- Body Tag
- bgcolor, this attribute is used to determine the background color of your website. You can use either the color names such as red, blue, green, black or others, or use the html color code like # FF0000, # FFFFFF, # C0C0C0 and etc.
- text, this attribute is used to determine the color of the text on your web site. As bgcolor attribute, you can use either use the color name or color code in html.
- link, used to determine the color of hyperlinks before the click.
- alink, this attribute is used to determine the color of links when you click the link.
- vlink, this attribute is used to determine the color of the visited link.
- background, you can use this attribute to display an image as the background on your website you replace the bgcolor attribute.
- Header
- Bold Text
- Italic
- Underline
- Line Breaks
- Horizontal Rule
- Bulleted List
- Numbered list
- Option
- name, used as an introduction to the your select tag.
- value, is a very important attribute of this tag as the value that will be submitted to process the input code is entered on the value of this attribute. For example, based on the previous HTML code, if you choose "Option 2" the code that is sent to process the program code is "2" as "2" is included in the value attribute to "Option 2".
- multiple, attribute is used to display more than one option. Typically use this attribute, followed by the size attribute.
- size, used to display more than one option.
- selected, an additional attribute in the option tag which is used to make a choice as an option selected automatically when the user does not replace existing options.
- Font
- size, to determine the size of your text.
- color, used to determine the color of your text. To help you get the html color code you can use "Colorpic" or any other tool you have chosen the color.
- face, used to determine the type of character in your text. The selected font must be the kind existing in your computer.
- Form
- action, formula is used as input data processing. This formula must be written in a logical and understandable programming language such as html, asp, php and etc.
- method, used to determine how to transmit data to the formula of processing your data. You can decide if you want to use the method "get" or "post". The difference between this method is, if you use the method = get, you can view the data you have input on the content in your web browser's address bar. Instead, use method = post, will not show the data.
- Input
- type = text, this attribute used to create inline text input box.
- type = checkbox, This attribute is used for data entry options and encourage you to make more than one option.
- type = radio, This attribute is used for data entry option but encourage you to choose only one final choice.
- type = password, These attributes encourage you enter your secret code into the input. Input is entered in the form of symbols to keep secret the text or code you enter.
- type = submit, These attributes result in the button that encourage you to click on the button to send your data. This attribute must be followed by the process in action inside the form tag.
- type = reset, This attribute is used to generate the button that encourage you to click on the button to clear the data you enter.
- Textarea
- name, this attribute is used as an introduction to your textarea.
- cols, cols attribute is an abbreviation of the columns. Cols attribute is used to determine the measure of the width of your textarea.
- rows, rows attribute is used to determine the measure of your textarea height.
- readonly, this attribute only allows you to read and copy the text in the textarea, but can not change the text.
- Disabled, These attributes prevent you from changing the text in the textarea. You can only read the displayed text on it.
Meta tag is usually used in the head tag. There are three important attributes in the meta tag are the author, decription and keyword. This meta tag not be closed with closing tags as others HTML tags.
Example of HTML Code
<html>
<head>
<title>My Website</title>
<meta name="Author" content="Name of Planning WebSite">
<meta name="Description" content="Site description">
<meta name="Keywords" content="personal">
</head>
<body>
</body>
</html>
In the previous topic, you learn little about the body tag. Here you will learn more aboyt the body tags and the attributes that can be found in it. As you know, the body tag is pair of tag including the contents of your website. Some attributes that can be used in the body tag are:
Example of HTML Code
<html>
<head>
<title>Attribute in body tag</title>
</head>
<body bgcolor=#E0FFFF text=black link=#153E7E alink=green vlink=red ><a href="http://www.sabah.net.my/" target=_blank> Sabah.Net </a> Official Website
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Attribute in body tag</title>
</head>
<body bgcolor=#E0FFFF text=black link=#153E7E alink=green vlink=red background="/elearning/images/background.jpg" > <a href="http://www.sabah.net.my/" target=_blank> Sabah.Net </a> Official Website
</body>
</html>
You can use the header tag to show a header or a title page. There are 6 levels of headers that are commonly used starting from h1 to the most important to h6 for the less important.
Example of HTML Code
<html>
<head>
<title>Header</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
</html>
You can set a bold with <b> tag. "b" is an abbreviation of the word, which means thick.
Example of HTML Code
<html>
<head>
<title>Bold</title>
</head>
<body>
<b>This text is bold.</b>
</body>
</html>
You set the italics text with the tag <i>. "i" is an abbreviation of italics.
Example of HTML Code
<html>
<head>
<title>Italic</title>
</head>
<body>
<i>This text is italicised.</i>
</body>
</html>
<u> Tag used to underline a text. "u" is an abbreviation of the underline.
Example of HTML Code
<html>
<head>
<title>Underline</title>
</head>
<body>
<u>This text is underline.</u>
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Line Breaks</title>
</head>
<body>
<p>Here is a...<br />line break.</p>
</body>
</html>
Is an html tag that uses <hr> tag to create cross on your site. "hr" is the abbreviation of the word horizontal rule.
Example of HTML Code
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
Here's a horizontal rule... <hr /> ...that was a horizontal rule
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Bulleted List</title>
</head>
<body>
<ul>
<li> Bulleted 1</li>>
<li> Bulleted 2</li>
<li> Bulleted 3</li>
</ul>
</body>
</html>
Note, that the only difference between the numbered list and bulleted list is the first letter of the list ("o" for a list of numbered, "u" to the list of bulleted).
Example of HTML Code
<html>
<head>
<title>Numbered List</title>
</head>
<body>
<ol>
<li>Bulleted 1</li>
<li>Bulleted 2</li>
<li>Bulleted 3</li>
</ol>
</body>
</html>
Select tag is used to display the register in a drop down menu options. Select tag must be used with option tag. Option tag is used to display the options available in the list of choices presented by select tag.
Example of HTML Code
<html>
<head>
<title>Option</title>
</head>
<body>
<select name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
Attributes that you can use the select tag is as follows:
Example of HTML Code
<html>
<head>
<title>Option</title>
</head>
<body>
<select name="Option" multiple size=3>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Option</title>
</head>
<body>
<select name="Option">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
the appearance of your text. You can specify color, size and type of character you want to use.
Example of HTML Code
<html>
<head>
<title>Font</title>
</head>
<body>
<font color=#7F00FF size="5">My choice font</font>
</body>
</html>
Some attributes that can be used in font tag is:
Example of HTML Code
<html>
<head>
<title>Font</title>
</head>
<body>
<font face="arial black">Text in Arial Black</font>
</body>
</html>
<form> tag is used to insert the formula for the processing of the data that you fill inside input tag. The important attribute in form tag are the action and method.
<input> tag is used to enter data. Normally this tag is used inside form tag to process data or send data through the input tag.
Attribute type is important to determine the type of input you want to use. Some attribute type that you can use the input tag is:
Example of HTML Code
<html>
<head>
<title>Bold</title>
</head>
<body>
Input Text: <input type="text" name="input_text" />
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
<input type="checkbox" name="checkbox 1"> Checkbox 1
<input type="checkbox" name="checkbox 2"> Checkbox 2
<input type="checkbox" name="checkbox 3"> Checkbox 3
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
<input type="radio" name="sex" value="Female"> Female
<input type="radio" name="sex" value="Male"> Male
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
Password: <input type="password" name="password" />
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
<input type=submit value=Submit>
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
<form action="" method=post>
Your Name: <input type=text name="names">
<input type=reset value=Reset>
</form>
</body>
</html>
<textarea> tag is used to encourage you to fill in text into the text box in large quantities.
Example of HTML Code
<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_1" cols=40 rows=5> Write your text here </textarea>
</body>
</html>
Some attributes that can be used in the textarea tag is:
Example of HTML Code
<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_2" cols=40 rows=5 readonly> This text is only for the read-only </textarea>
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea name="textarea_3" cols=40 rows=5 disabled> Sorry, you can not copy the text </textarea>
</body>
</html>
HTML Links
Links are also known as "hyperlinks", defined by using tag <a> or element referred to as the "anchor". To make a "hyperlink", you use the tag in the href attribute (href is short for Hypertext Reference). The value of href attribute is a URL, or location where the link to the show.
- Example of HTML Code
- Open links in a new window or current window / active
- _blank, To open a link to a new window.
- _self, To open a link to the existing window / active.
- _parent, To open a link in the window frame.
- _top, To open the link in the active browser window. When click on the frame, the link will come out on top frame.
- Named Anchors
- Create your first Named Anchors in which consumers will be ended.
- Then a hyperlink. This is done by connecting the name of the named Anchors with leading names in the hash symbol (#).
- Email Links
<html>
<head>
<title>Links</title>
</head>
<body>
Visit the <a href="http://www.sabah.net.my/">Sabah.Net Website</a>
</body>
</html>
You can decide whether to open links in new window or the active window. You can do this by using the target attribute. For example, target = "_blank" to open links in new window.
Values that can be used in the target attribute is:
Example of HTML Code
<html>
<head>
<title>Bold</title>
</head>
<body>
Visit the <a href="http://www.sabah.net.my/" target="_blank">Sabah.Net Website</a>
</body>
</html>
You can make your links "jump" to other parts of the same page using named anchors. You must first create a two-part code for the hyperlink.
Example of HTML Code
<html>
<head>
<title>Links</title>
</head>
<body>
<a name="top"><b>Link Targets</b></a>
</body>
</html>
Example of HTML Code
<html>
<head>
<title>Links</title>
</head>
<body>
<a name="top"><b>Link Targets</b></a>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
[<b><a href="#top">top</a></b>]
</body>
</html>
You can create a hyperlink to the email address using the mailto attribute in the anchor tag.
Example of HTML Code
<html>
<head>
<title>Email Links</title>
</head>
<body>
<a href="mailto:support@sabah.net.my">Email Us</a>
</body>
</html>
You can also fill in the email subject for your users automatically,
Example of HTML Code
<html>
<head>
<title>Email Links</title>
</head>
<body>
<a href="mailto:support@sabah.net.my?subject=Question&body=Dear Sir">Email Us</a>
</body>
</html>
HTML Image
To insert an image into a website, you must ensure that the image must be in the format jpg, gif or png. You can create an image in an image editor (such as Adobe Photoshop) and save it in the correct format.
To insert an image into a website, you should use <img src> tag, to determine the exact location of the file.
- Example of HTML Code
- src, this attribute is used to find the true position of the image is located. This can prevent you from having problems viewing the image as follows:
- width, used to determine the width of the image display.
- height, used to determine the height-image display.
- alt, Alternative text is used to display the image if the case can not display the image in your browser.
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="/elearning/images/sabah flag.png" width="250" height="150" alt="Sabah" />
</body>
</html>
Some attributes that can be used in the img tag is:
 |
 |
Html Table
Table tag is used for create table. Table has its own nature, such as color, border, etc can be determined.
- Example of HTML Code
- <th></th>, expand and bold as the head table.
- <tr></tr>, used as a row in the table.
- <td></td>, a box for each text in the table.
- border=" ", determine the thickness of table borders.
- width=" " , to determine the table width in pixels.
- height=" " , determine the table height in pixels.
- bgcolor=" " , determine the table color.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border=1>
<tr>
<th>Title</th>
<th>Member Name</th>
<th> Member ID</th>
</tr>
<tr>
<td rowspan=2>Ms. </td>
<td>Rochella</td>
<td>850603-12-5963</td>
</tr>
<tr bgcolor=#D2D2D2>
<td>Sylvia</td>
<td></td>
</tr>
<tr>
<td>Mr. </td>
<td>Ronald </td>
<td>821220-12-6598</td>
</tr>
</table>
</body>
</html>
Basic attributes that can be used in the table tag are:
Blog?
Want to create a Blog?
Blogs are increasingly popular in conjunction with other social networks. Blogs also have a huge influence on mass media and other Internet users around the world. Some people make the blog as their homepage. More and more companies are encouraged to make their business through a blog that is easy to identity, advertising and booking.
Currently, there are dozens of services that offer to make your blog more easily and free. Such as blogspot, wordpress, blogger, Vox and etc. Through a search engine as you can find too many types of blogs that have been loaded such as a political blog, health and beauty blog, religion blog, education blog and etc.
How to Blog?
You can create a blog with easy to use software services such as wordpress. You can download this software free of charge via the Internet. You now have a basic knowledge of html, so this can help you to understand the software easily.
The difference between a blog with your website is, blogs more to social network which allows you to interact with other users around the world via the same Internet network. Some features that must appear on your blog is:
- You are easy to update your post with the new version.
- Your blog visitors can send comments on your blog.
- Blogs are easy to change themes, add a link, activate the plugin and add categories.
- Automatic post.
- Blogs can be a sales or personal websites.
e.g: Sandakan, Tawau, Lahad Datu
-
24 x 7 Hotline
088-234101 -
Tel (Working Hours)
088-231101 -
Office Opening Hours
Mon-Fri: 8:00am-5:00pm
- Ambulance: 999
- Fire: 999
- Police: 999
- Police Hotline: 088-318555
Kota Kinabalu
- Queen Elizabeth Hospital: 088-517555
- Sabah Women's & Children's Hospital: 088-522600
- Hospital Mesra Bukit Padang: 088-240984
Other Districts
- Beaufort Hospital: 087-212333
- Beluran Hospital: 089-511333
- Keningau Hospital: 087-333355
- Kinabatangan Hospital: 089-561857
- Kota Belud Hospital: 088-976333
- Kota Marudu Hospital: 088-661980
- Kuala Penyu Hospital: 087-853100
- Kudat Hospital: 088-611581
- Kunak Hospital: 089-894100
- Lahad Datu Hospital: 089-881522
- Papar Hospital: 088-913333
- Pitas Hospital: 088-676100
- Ranau Hospital: 088-875266
- Duchess of Kent Hospital, Sandakan: 089-212111
- Semporna Hospital: 089-781522
- Sipitang Hospital: 087-821533
- Tambunan Hospital: 087-774333
- Tawau Hospital: 089-773533
- Tenom Hospital: 087-735577
- Tuaran Hospital: 088-787355
Private Medical Facilities
- Damai Specialist Centre: 088-222922
- Kota Kinabalu Specialist Centre: 088-252500
- Rafflesia Medical Centre: 088-272620
- Sabah Medical Centre: 088-211333
Electricity Services
- SESB (General): 088-282500
- SESB (Complaints): 15454
Telephone Services
- Celcom: 1300-111000
- DiGi: 016-2211800
- Maxis: 1800-821123
- Telekom Call Centre: 100
- U Mobile: 018-3881318
Water Services
- Water Department (General): 088-232364
- Water Department (Complaints): 088-711767
- Water Department (Beaufort): 087-212295
- Water Department (Beluran): 089-511176
- Water Department (Keningau): 087-334428
- Water Department (Kinabatangan): 089-561970
- Water Department (Kota Belud): 088-977846
- Water Department (Kota Marudu): 088-661450
- Water Department (Kuala Penyu): 087-884243
- Water Department (Kudat): 088-612004
- Water Department (Kunak): 089-851113
- Water Department (Lahad Datu): 087-881767
- Water Department (Membakut): 087-887362
- Water Department (Papar): 088-911434
- Water Department (Sandakan): 089-663001
- Water Department (Semporna): 089-781274
- Water Department (Sibuga): 089-665460
- Water Department (Sipitang): 087-821904
- Water Department (Tambunan): 087-774270
- Water Department (Tawau): 089-761057
- Water Department (Tenom): 087-735762
- Water Department (Tuaran): 088-788350
Airports
- Kota Kinabalu International Airport: 088-325555
- Lahad Datu Airport: 089-881491
- Sandakan Airport: 089-660405
- Tawau Airport: 089-950777
Libraries
- Sabah State Library Headquarters: 088-214828
- Keningau Regional Library: 087-336096
- Kota Kinabalu Regional Library: 088-254333
- Sandakan Regional Library: 089-210916
- Tawau Regional Library: 089-760632
Sports Complexes & Hostels
Sports Complexes
- Keningau Sports Complex: 087-341702
- Kota Kinabalu Sports Complex: 088-232166 / 088-259466
- Penampang Sports Complex: 088-718060
- Sandakan Sports Complex: 089-632684 / 089-665448
- Tambunan Sports Complex: 087-773014
- Tawau Sports Complex: 089-752820
- Tenom Sports Complex: 087-735625
Hostels
- Keningau Hostel: 087-341702
- Kinabalu Hostel: 088-221567
- Sandakan Hostel: 089-665326
- Tawau Hostel: 089-752818
Hotels & Resorts
Kota Kinabalu
- Bunga Raya Island Resort: 088-380390
- Gayana Eco Resort: 088-380390
- Hyatt Regency Kinabalu: 088-221234
- Le Meridien: 088-322222
- Nexus Resort & Spa Karambunai: 088-480888
- Promenade Hotel: 088-265555
- Shangri-La's Rasa Ria: 088-792888
- Shangri-La's Tanjung Aru Resort & Spa: 088-327888
- Sutera Habour Resort: 088-318888
Ranau / Kundasang
- Kinabalu Pine Resort: 088-386775
- Mount Kinabalu Heritage Resort & Spa: 088-889511
- United Merlin Resort: 088-889366
Sandakan
- Hotel Seafront Sandakan: 089-222233
- Sabah Hotel Sandakan: 089-213299
- Sepilok Jungle Resort: 089-533031
- Swiss Inn Waterfront Sandakan: 089-240888
Tawau
- Belmont Marco Polo Hotel: 089-777988
- De Choice Hotel: 089-776655
- Hotel Emas: 089-762000
- Promenade Hotel: 089-982888
- Walaitokou Hotel: 089-772428