How To Create Website

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
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.

notepadpspad

 

Once you have these tools, you can start to learn to make a web site.

  1. Create an HTML file
    An HTML file is a text file that is stored in the. Html or. Htm.
    1. 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.
    2. Create a new file
    3. Save the file as (your file name).Html example: demo.html
  2. Create HTML Code
    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>
    Click To View DEMO
  3. See Results In Your Web Browser
    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>

1. Meta Tag

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.

  • 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.
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>

2. Body Tag

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:

  • 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.
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>
Click To View DEMO
  • background, you can use this attribute to display an image as the background on your website you replace the bgcolor attribute.
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="../images/background.jpg" > <a href="http://www.sabah.net.my/" target=_blank> Sabah.Net </a> Official Website
</body>
</html>
Click To View DEMO

3. Header

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>

Click To View DEMO

4. Bold Text

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>

Click To View DEMO

5. Italic

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>

Click To View DEMO

6. Underline

<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>

Click To View DEMO

7. Line Breaks

Example of HTML Code
<html>
<head>
<title>Line Breaks</title>
</head>
<body>
<p>Here is a...<br />line break.</p>
</body>
</html>

Click To View DEMO

8. Horizontal Rule

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>

Click To View DEMO

9. Bulleted List

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>

Click To View DEMO

10. Numbered list

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>

Click To View DEMO

11. Option

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>

Click To View DEMO

Attributes that you can use the select tag is as follows:

  • 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.
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>

Click To View DEMO

  • 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.
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>

Click To View DEMO

12. Font

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>

Click To View DEMO

Some attributes that can be used in font tag is:

  • 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.
Example of HTML Code
<html>
<head>
<title>Font</title>
</head>
<body>
<font face="arial black">Text in Arial Black</font>
</body>
</html>

Click To View DEMO

13. Form

<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.

  • 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.

14. Input

<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:

  • type = text, this attribute used to create inline text input box.
Example of HTML Code
<html>
<head>
<title>Bold</title>
</head>
<body>
Input Text: <input type="text" name="input_text" />
</body>
</html>

Click To View DEMO

  • type = checkbox, This attribute is used for data entry options and encourage you to make more than one option.
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>

Click To View DEMO

  • type = radio, This attribute is used for data entry option but encourage you to choose only one final choice.
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>

Click To View DEMO

  • 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.
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
Password: <input type="password" name="password" />
</body>
</html>

Click To View DEMO

  • 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.
Example of HTML Code
<html>
<head>
<title>Input</title>
</head>
<body>
<input type=submit value=Submit>
</body>
</html>

Click To View DEMO

  • type = reset, This attribute is used to generate the button that encourage you to click on the button to clear the data you enter.
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>

Click To View DEMO

15. Textarea

<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>

Click To View DEMO

Some attributes that can be used in the textarea tag is:

  • 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.
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>

Click To View DEMO

  • Disabled, These attributes prevent you from changing the text in the textarea. You can only read the displayed text on it.
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>

Click To View DEMO

 

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
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="../images/sabah flag.png" width="250" height="150" alt="Sabah" />
</body>
</html>

Click To View DEMO

Some attributes that can be used in the img tag is:

  • 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.
Table tag is used for create table. Table has its own nature, such as color, border, etc can be determined.Example of HTML Code
<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>

Click To View DEMO

Basic attributes that can be used in the table tag are:

  • <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.

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.