Creating a web site
| Quick links Getting started 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.
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.computerhope.com, the server is really accessing http://www.computerhope.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. <html> 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> <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.
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. Displaying imagesNow 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. <img src="http://www.computerhope.com/logo.gif"> 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. <img src="mypic.gif"> or if you have an images folder: <img src="images/mypic.gif"> 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. Understanding directoriesWhen 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. image/mypic.gif 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. ../mypic.gif 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. ../other/mypic.gif 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. ../../../image/mypic.gif. 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. Case sensitiveIt 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 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. Windows FTP To use Windows FTP, the user must open a DOS window by
OR:
open ftp.computerhope.com 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.
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.
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.
Click here to start a search for third-party hosting companies. |
