| Quick Guide | |
Introduction
How To Create A Web Page - A Quick Tutorial
Before we start, let us do a quick exercise. While viewing this page with your browser, click on the view menu on top. You will see a "source" or "page source" option under the view menu - click on it. A new window will pop up and you will see somthing like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
How To Create A Web Page.
</title>.....
You are now looking at the HTML code of the web page. You browser actually convert the codes and display it in human readable form for you. Creating a webpage can be hard or easy. If you want the codes in your web page to be clean and optimized for search engines, you need to be able to hand-code HTML. If you are not bothered with the codes and want to create a webpage quickly, you can use a WYSIWYG (What You See Is What You Get) program like microsoft word, excel, frontpage, dreamweaver ...etc. There are pros and cons for each method. The later method, though can help you to create a web page easily, produces alot of junk codes which may result in unpredictable results in different browsers.
Learning HTML can be a slow process if you are new to internet programming. At the time of writing, HTML forms the foundation of another widely accepted web standard known as XHTML.
XHTML And CSS
XHTML and CSS are the technologies you want to use to create a website compliant to the web standards. You need to know them if you want to be a professional web designer. As we are assuming that you are new to the web, we do not want to confuse you with the technicalities of XHTML and CSS. The 2 links below are good resource for XHTML and CSS if you wish to find out more about them:
A good XHTML resource is http://www.w3schools.com/xhtml/
A good CSS resource is http://www.w3schools.com/css/
The focus of this tutorial is to come up with a working website in the shortest possible time, so we will use the simplest method to create the webpages, ie using a web template. If you do not want to go through this quick tutorial of creating your own web pages from a template, feel free to jump to the next step: Uploading your files to the server.
A Quick And Dirty Solution - Create Your Webpage Using a Template
Visit http://www.oswd.org. Download a free template that you like and unzip it with winzip. For example in this tutorial, I use a template called FunkyCoolBlue by VirtualFunction. The image above is the preview of the template. After you unzip the file, browse the folder and you will see a file call index.html with other folders and files. The index file is also your home page.
View the index.html using your browser (You can open the file from your browser menu). Now go to view menu and click on the "source" option. You will now see the source code of the file in a default editor. For those using Internet Explorer, the default editor is most likely "notepad". Don't be scared because we will show you how easy it is to edit the file.
Everything in HTML begins with a <xxx> and ends with a </xxx>. For example, if you have a table, the <table> tag marks the beginning of the table and </table> marks the end of the table. Let us run through some important HTML tags:
1. <title> - This is the most important tag in your entire page. Look between the opening and closing of the tag (<title> and </title>) and edit its content. Change it to something meaningful.
2. <a href> - This is a hyperlink. If you click on it, it brings you to a new page. Feel free to go through their entire code and change any url and linked text for fun.
3. <p> and <br> or <br/> - These are spacer tags. <p> means starting a new paragraph and <br> or <br/> are line breaks. Look for the main content of the page. Try changing its content to what you like.
4. <img> - The url pointed by the img tag is where your images are located. In the case of FunkyCoolBlue, the images are stored in the "images" folder. If you wish to use your own images, put your own image in that folder and change the <img> tag to point to your images. The "alt" option is the name of your image. So your new tag might look like this: <img src="/images/my_own_image.jpg" alt="My own image" >
After you have made the necessary changes, save the file in the editor ("menu/save"). Then refresh your index page in the browser and you should see the web page updated. Don't worry if your web page does not look good. You can always fix them up later when your HTML skills become better.
We are now ready to upload the files to the server.
Step 4: Uploading Your Files
