Before you begin designing Two Important Points
There are just a couple of things to remember before you begin designing your very own Website.
1. The Internet is an ever changing market. To stay on top, you must stay informed. Within this site, you’ll find many useful resources to help you keep informed about Internet changes and news.
2. Your Website’s success depends on your willingness to add new updates, delete old news, find helpful resources for your visitors, deliver what you’ve promised, and provide a useful and informative contribution to the World Wide Web.
Okay, ready to learn how to create a web site?
HTML, or HyperText Markup Language, is the building block of creating a web site. Writing HTML is similar to creating a very basic computer program where the user inputs basic codes into a file that is downloaded and run by other users, known as visitors.
Before writing HTML you must decide which HTML program you are going to use to create your web page. You can find a basic listing of HTML editors on our HTML editors section of our web site. In addition, you can also create a web site using a basic text editor such as notepad, wordpad, and now even Microsoft Word. Which editor you use to start creating your own page is up to you.
Once you have obtained an HTML editor and are ready to begin setting up your web site, think about how you wish the page to setup or look, maybe even draw out your ideas. Below are some considerations to think about.
How are you going to store all the files? Are all the files going to be in the same folder, or directory, or if you plan on having a lot of different pictures and files, would it be better to separate the pages, files, and pictures into separate directories?
Are all your HTML files you are going to be stored going to be stored as .HTM or .HTML files? There is no advantage or disadvantage of going with .htm or .html; however, it is a good idea to stick with the same extension for your complete site.
Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
How is navigation going to be handled? Do you think it would be better to have a menu on the left side of each page, maybe the bottom of the page, or at the top of the page?
Once you have an HTML editor and your web page and folder structure has also been setup, you are ready to begin creating your page. Begin by creating a file named index.htm or index.html, this will be your start page. All servers on the Internet look for an index file if no file is specified.
For example, when typing http://www.somename.com, the server is really accessing http://www.somename..com/index.htm.
Once you are in the blank index.htm or index.html file, we recommend creating the below source code into your page. Keep in mind some HTML editors may automatically place this code in your page for you. If this is the case, or you have a WYSIWYG HTML editor that allows you to simply design the page and not create the HTML, you can skip to the next section.
<title>My first web page</title>
Your page goes here
The above section is the main body of your web page. As you can see, the section starts of with <html>, which is defining that everything within <html> is HTML language. Next, you have <head>, which is defining the heading of your HTML document. Third, we have the <title> section; within this section you will be able to Title your web site. Finally, you have the <body> section, which is where your complete web page will be contained.
The below code is a simple basic page to get you familiarized with some of the most commonly used HTML commands; all of the below HTML information would be placed in the <body> </body>section.
<center><h1>Welcome to my web page<h1></center>
Hello and welcome to my first web site.
These are my favorite links:
<a href=”http://www.computerhope.com”>Computer Hope</a>
As you can see from looking at the above code you will realize that the basic HTML commands are fairly simple to use. First, we start off with <center>; this is telling the browser to center the information within these tags. Next, you have the <h1> statements, these are the heading statements, which tell the browser to display the text in a large font. Next is the <hr> tag, which tells the browser to display a line straight across the screen. The third line contains <br> which is a simple method of creating a break on the page. Finally, the “a href” tag is a method of creating a link to another location.
Additional HTML commands and HTML information can be found on our main HTML / Web design help page.
Viewing the web site
Now that you have created a basic web site you may want to verify how the web site looks. Being that you have files locally stored on your computer you will not need to connect to the Internet to view your web page.
Open the computer browser and type the location of your web page. For example, if you have placed the index.htm or index.html file within the webpage folder, you would simply type in the browser c:\webpage\index.htm or c:\webpage\index.html if you are using an IBM compatible computer. If you have Microsoft Windows or you are using an Apple computer, you can also double-click on the created file to open the file in a browser automatically for you.
Note: Some HTML editors also allow you to preview a page by clicking the preview button within the HTML editor.
Viewing a web page locally allows you to experiment with a web page and make sure it works before taking the time to upload the page to a server. This also allows users who may not have a web host, or place to store their web page, the ability to create and experiment with their own web page.
Now that you have created a basic web site you can improve the looks and feel of the web site by adding images to the web page. There are two methods of displaying images on your web page. The first method is linking to another web site to display the images by using the below code.
Using the above HTML tag you can display images off of other web sites. However, we recommend that you do not do this if possible as it can cause your web page to load slower and could cause missing pictures to occur if the other site removes or moves the location of the picture to an alternate location. The alternate and recommended method would be to use the below code.
or if you have an images folder:
If the mypic.gif exists on the computer the picture will be displayed on your web site. Adding pictures is an excellent way to spruce up the web site. However, do not get to carried away, adding several images (especially animated images) can look tacky and slow down the time the web page loads. Remember, the average time someone looks at a web site is 10 seconds.
Finally, never place large sized images on your home page. Large images will slow down the web page dramatically and may cause the visitor to leave. If you would like a large picture on your web site, it is recommended that you create a small image called a ‘thumbnail’. If the user is interested they can click the thumbnail to view the larger image.
When creating other directories (folders) on the computer that contain other images or HTML files, it is important that you understand the directory structure of how the server will access other folders. Many times, users will mistakenly create a bad directory that allows the page to work offline but not on the Internet or from another computer.
When accessing files in other directories that are ahead of the current directory, first specify the directory and then the file name. For example, if you are trying to access or display the image file mypic.gif in the image folder, create the link as shown below.
Notice in the above line that the directory is first specified and then the file.
Next, if you wanted to access the image file mypic.gif that is back one directory, you would want to use the below example.
In this example, notice the two dots (..) these tell the browser that you want to go back one directory. If you wanted to go back one directory and then into another directory you would first do ../ and then the directory as shown in the below example.
This rule can be applied to as many directories back as possible. For example, if you wanted to go back three directories and then go into the images directory, then you would use the below example.
A common mistake with PC (Windows) users is that the HTML editor may specify the file to be located in the computer hard disk drive such as c:\mywebpage\image\mypic.gif. This will work work fine on the computer hard disk drive (locally); however, when posted on the Internet, no one but the person with the file locally will be able to display the file.
Finally, remember when specifying the directory that you are using a forward slash (/) and not a back slash.
It is important to remember that many of the Internet servers are utilizing Unix or a *nix variant. With Unix, file names are case sensitive. This means if you link to a file such as Mypage.htm and the file on the server is mypage.htm, the server will be unable to find it because of the capital M. We always recommend that a user create his or her files and links in all lowercase.
Posting the web site
Posting the web site files to the Internet is one of the most complicated steps of setting up a web site for most users. In order for the web page to be viewable by other users, the user must post his or her web site on a server where it can be viewed by individuals on the Internet.
Because of the wide diversity of methods of posting a web site, we will explain one of the most commonly used methods of posting your web site.
Most Internet Service Providers and Web hosting companies provide FTP (File Transfer Protocol) access that allows the users to simply copy files from your computer to the server. PC users have two possibilities; one is to use the FTP program included with Windows and the other is to download a FTP program, such as CUTEFTP, off of the Internet. Using one of these tools should enable the user to send his or her files, providing the server allows FTP access.
To use Windows FTP, the user must open a DOS window by
Type the command.
At the prompt, switch to the directory that contains your web site. For example, if your web site is at c:\webpage; at the C:\>, type cd webpage. Once at the appropriate directory, type FTP, which should take you to FTP>. Finally, at this prompt, type open and then the name of the server or IP address. For example:
Open My Computer
Enter the FTP address in the Explorer address bar
Click “File>Login” to enter login details
This should then prompt you for a username and password, enter both appropriately and then see the second to last paragraph.
CUTEFTP or other FTP client
Thousands of FTP clients are available through the web. One of the more popular FTP programs is CUTEFTP. Using these Windows / MAC applications the user needs to simply specify the ISP or Web hosting server and login information.
Finally, once you are connected to the server you will need to locate the folder that will contain your web page. Generally speaking, this folder is public_html. If you are using Windows FTP, simply type cd public_html or type dir to see what the folder is named. Or open the folder through CUTEFTP or the FTP client program your are opening. Once in this folder, you can send your HTML files to the server to access them over the Internet. Windows FTP users to send your files, for example, type send index.htm.
We understand this can be a complicated process; however, generally, your Internet Service Provider or Web Hosting company will have instructions for posting your web site and sometimes may even have a web based client, which allows the users to simply transfer their files using a web site and not having to follow the above tedious commands. If following the above recommendations you are unable to post your web site, we recommend that you review through your Internet Service provider or Web Hosting company documentation.
A listing of other free and commercial FTP clients can also be found through our FTP dictionary definition.
Additional information about the Windows FTP program can also be found on our FTP page.
Setting up a domain
Users who want their own unique domain or URL may want to know who to go through to setup their own personal domain and/or what is needed. In the below section we have listed additional information about setting up your own domain as well as what is commonly required to setup a domain.
Determining name — Before attempting to setup a domain, you must first determine what names are available on the Internet. It’s very likely that your first choice is already taken. To determine what domain name is available, do a whois lookup on the domain. For example, click here to open the Network Solutions page in a new window. On their page you can find a “WHOIS” link on the page. Using this tool you can search for available names. Although the majority of the Internet users are used to typing .COM as the extension of the domain, if your domain name is already being used, you may want to consider .NET or .ORG as possible alternatives.
Think about the name — Before registering the name, make sure to think about some important considerations. Are there other companies or copyrights your domain name conflicts with? Is the domain name too long for people to type in? Is the name hard to remember or type in? Are there similar addresses on the Internet users may get confused with? Many of these questions can be answered by using a search engine to search for similar names and/or asking friends and family about your domain name.
Getting an ISP / Web host — If you do not already have an ISP or web host that will be storing your files, you should consider first looking at the available ISPs in your area and/or available web hosts on the Internet. Some companies may assist you in registering your domain for you if you are already hosting your files through them. If you do not already have a web host, do a search for “web host” on any popular search engine and decide which host best meets your needs. Additional information about what to look for in an ISP / web host can be found by clicking here.
Domain Name Server (DNS) — If your ISP / web host does not setup or register domains for you or you wish to register your own name for a cheaper price, you will need to know your ISP or Web Host’s DNS server address. This is the computer that allows other computers to know what address to point the domain name to. You will need a Primary, Secondary and/or alternate DNS server address. For example, the DNS IP Computer Hope uses is “188.8.131.52”; although your address will be different from this address you should get a similar address from your ISP or web host.
Register — Once you have thought about and read through all of the above steps and are ready to register, decide who you plan on registering through. There are thousands of different companies that are capable of registering your domain name. We recommend going through network solutions; however, also performing a search on any popular search engine will give you a great list of other available options.
ADDITIONAL DOMAIN RELATED QUESTIONS:
Why should I setup a domain name? A domain can be a very important part of having a web site that you intend to generate revenue from or you would like to have easily accessed and remembered. A domain allows a user and potential customer to easily remember the name for your web site; for example, www.computerhope.com is much easier to remember and type than http://www.webhost.com/user/~computerhope.
What is a domain name alias or domain alias? A domain alias is a cheaper solution that will point a domain name to a web page. For example, a user would type http://www.computerhope.com but be forwarded to http://www.webhost.com/user/~computerhope. Although this is a cheaper solution users should consider if this is the best solution for their site.
Web hosting allows for users to have another company store and maintain your web site for you or your company. A web hosting company may or may not be needed depending upon what is available through your Internet Service Provider. Check with your Internet Service provider to see if they offer a comparable solution to other Web Hosting companies. When setting up with a web hosting company, we recommend that you verify the below information with them before setting the page up.
Domain Registration – Verify that the company allows your company to have a domain such as www.computerhope.com and see if they can set it up for you, and if so, how much will it cost.
E-Mail forwarding – See if the company offers e-mail forwarding where you will be able to forward e-mail from firstname.lastname@example.org to another e-mail address such as your personal e-mail address.
Support – Verify the hours of operation for phone support and check to see if the number is a toll-free number.
Changing companies – Verify their policy and how easy it will be for changing to another company if the time comes.
Site Statistics – While not a necessity, it is a nice feature; see if the company offers site statistics for your web page, allowing you to monitor how well your web site is doing.
Business Account – See if the company will charge you additional fees if you begin to sell something off of your web site.
Bandwidth Limitations – Verify that the company does not have a strict bandwidth limitation, which may limit the amount of traffic you are capable of receiving. It is important to realize that all companies will have a limit but verify it is something that is not expected to be broken easily.
Front Page Extensions – If you are using Front Page, verify that you will be able to have Front Page Extensions. Although not all Front Page users use these features, it is still a good idea to verify this is available.
CGI / Perl / PHP Scripts – While you may not immediately setup a CGI / Perl script, it is important for future use that you verify the server supports this. This allows you to setup counters, message boards, guest books and other various features in the future.
Mover – Responsive Coming Soon / Under Constraction Premium Template