How to Create my Own Website
a guide for beginners
You are welcome to evaluate this article
with the stars in the rating tool above :-)
with the stars in the rating tool above :-)
A web page – what is it?
A simple web page is usually a nicely designed text document, with embedded images and with links to other web pages. (More complicated web pages might have other features, too.)
While files used by word processor programs have .doc, or .txt extension, file names of web documents are ending in .html so that the computer can detect, that the file is supposed to be opened with a web browser (e.g. Internet Explorer, or Firefox). Another common feature of text and web documents is that, similarly to word processors, there are web page editors available. Web page editors will save your documents in HTML format. A document created this way is ready to be uploaded to a server.
Does a webpage work only on web servers?
Before, or instead of, publishing your web page on the Internet, you can place it to the hard drive of your computer, too. It makes no difference to a browser program to download a web page from a folder on your C: drive or from a remote computer (web server). This is very helpful anyway, because this way you can try out your website on your own computer before uploading it to a web server.
The browser program will open your document if you enter the folder and file name. This may be e.g. C:/documents/webpage.html on your computer. The difference is that if you want to open a HTML file that is already uploaded in a folder of a server, you will need a domain name too, so that the browser program can find the remote computer on the net. The domain name will direct the browser to the root directory affiliated with this domain. Now you only have to provide the domain, the folder and file names to the browser in order to download an HTML document from the server:
http://www.example.com/ documents/webpage.html = domain/folder/file name
You surely have already opened many web pages simply by typing in the domain name, without any folder, or file names. This easy way of connecting to web sites is made possible by the servers, because, if you enter only a domain name, the server will automatically look for a file called index.html in the root directory. So if you have a website composed of a number of web pages, you will have to call the main page index.html
HTML codes
HTML codes were designed to help in formatting the text and other objects on a web page. (HTML = HyperText Markup Language.) As mentioned earlier, there are web page editor programs available that will generate HTML documents for you, just like word processors produce text documents. One of the free editor programs can be downloaded here: http://nvudev.com/download.php
However, you can create HTML documents without professional web editors as well, because codes are quite easy to use. All you need is a Notepad, or any simple word processor. When saving your document, make sure the extension is .html
It is advisable to open HTML files only with very basic word processors (e.g. Notepad), that save your documents in simple text format. More sophisticated word processors will put their own codes into the text files while you are editing them. These codes may not comply with HTML standards and will not be understood by web browsers.
A simple unit of text, or other object, formatted in HTML, is called an HTML element. An element will look like this:
So if you want to make a sentence bold, you need to type this into the HTML document:
This sentence will be bold
To set the color, you type this:
This text is blue
If you are interested in learning more codes, there are plenty of resources available on the Internet.
Introduction to HTML: http://www.w3schools.com/HTML/html_intro.asp
Try it editor: http://www.w3schools.com/HTML/html_examples.asp
An HTML tutorial: http://www.htmlcodetutorial.com/document/
Other files and codes to improve your website
It is enough to upload a single HTML document to the server in order to create a fully functional website. However, an HTML file contains only text, which is formatted by the codes. If you want to include images, videos, sounds, or other objects, first you have to provide them in separate files. Then, in the HTML document, you need to include references to them (folder and file name), in the part of the document where you would like to include them.
A web site will usually consist of:
1. HTML files (one for each web page on your site)
2. image, video, etc. files (references to them provided in the HTML documents)
2. image, video, etc. files (references to them provided in the HTML documents)
3. possibly other files too (e.g. CSS files for advanced formatting, or PHP files for dynamic pages)
If you have all the files ready, you only need to upload them to the server or to your hard drive.
CSS, PHP, JavaScript and other codes may be used for more advanced sites. There will be a short summary about them later on in this essay.
Uploading your files to a web server
Web hosting is relatively cheap, especially if you have a simple static website. Even free hosting is available at many places.
If you are a beginner, it is a good idea to gain experiences on a server where hosting is free of charge. There are, however, some disadvantages if you choose free servers: the lack of good customer service and that they will usually put ads in one of the corners of your site.
Web developers would typically say that it is not advisable to choose free hosting if you have a serious site.
Before the site becomes fully operational, you need to register a domain name. The hosting provider will do it for you for a fee and you have to wait for a couple of days or weeks for the approval, depending on the type of domain. In the case of free hosting, you don't have to bother about registering a domain, you usually get a free sub-domain immediately after you have opened your account.
After you have finalized the structure of your site and tried it out on your own hard drive, the files can be uploaded to the server. Create the folders (if needed) in the root directory of the server and upload the files. If you have been using a template, the original folder structure can remain as it was downloaded. Make sure all the references pointing at the different folders, pages, images, etc. are correct in the documents, because web editor programs sometimes might make unexpected modifications in the files.
The most common way of uploading the files is through FTP-connection (FTP=File Transfer Protocol). There are many ways to make an FTP-connection; one of them is the Total Commander program. You can download the program at http://www.ghisler.com/
The service provider or your web editor program might also assist you in making FTP-link to the server.
In any case, in order to establish an FTP-connection, you will need the address of the server, the name of your account and a password.
Website templates
There are plenty of free website templates available on the Internet. These templates are professionally formatted, complete sites. You can download your favorite template into a folder of your hard drive (do not forget to check for viruses). If you have a web editor program, open the html file(s) and finalize the web pages. The main page will be called index.html.
In case you don’t have a web editor program, the html files can be edited with simple text editors, too, e.g. with Notepad. After you saved the changes you made in the file, you can check the result by opening it with a browser program.
Some places to download templates from:
www.freecsstemplates.org/css-templates/ www.freelayouts.com/websites
CSS code
Using CSS (Cascading Style Sheets) is an important means to create well formatted web documents. In website templates, the CSS file is usually included in the main folder, together with the HTML files.
One of the main advantages of using CSS is, that the codes defining the “looks” of the webpage are dealt with separately, thus the HTML document doesn’t have to be full with repeated formatting codes. This is especially advantageous if you have several pages within a site: you need to define the format only once. When you decide to do any change in the design of your site later on, you only have to edit the CSS file, this will affect all the HTML pages.
Example:
With the following code, Heading 2 will be formatted in the CSS file:
h2 {
text-align: left;
color: blue;
font-family: "Arial";
font-style: italic;
}
In the HTML file, Heading 2 will be defined like this:
text to be formatted
Now, in any html document, affected by this CSS file, Heading 2 will be aligned to the left, and will contain italic, blue, Arial letters.
CSS codes are usually provided in separate files, but may also be included in the HTML file (the latter solution is not advised if you have more than one page to deal with).
For more details, have a look at any CSS course on the Internet, e.g. on the official Microsoft site
Dynamic web pages – JavaScript, PHP, MySQL
The content of static websites can be altered only by uploading a new HTML file to the server instead of the existing one. In contrast to this, dynamic pages are changeable, with the help of different applications, built in the web page, or running on the server.
JavaScript may be one of the least complicated of these applications. It should not be confused with the Java programming language, although there are some similarities between them.
JavaScript is basically a little application that can be built into a HTML document. Web browsers are able to interpret and run the JavaScript. After the web page has been downloaded to the visitor’s computer, the browser will execute the codes, thus, the program, arriving with the HTML page, will run on the user’s computer. (This is why it is called client-side application.)
These applications can be quite diverse; you certainly have encountered many of them. Java Scripts may instantly check whether you type in the correct answers in a questionnaire, or may alter the size of an image when you pull the mouse over it. Diary applications are very common, too.
If you want to place similar tricks into your HTML-page, simply copy the code into the part of the page where you want it to appear. Plenty of ready to use codes are available on the Internet.
Note: Javascript is a very commonly used friendly little program arriving with web pages. However, as the application runs on the user's machine, it also may be used by hackers to create a gateway to your computer for malicious programs from the Internet. This is one of the reasons why it is important to visit only trusted websites and to run a top quality anti-virus and firewall program.
PHP is one of the most common server-side applications. This code also fits into HTML-files, but, unlike client-side JavaScript, PHP will run on the server. Consequently, the dynamic elements of the webpage are finalized by the server and will arrive at the user’s computer in their final shape. A pre-condition to this is that a program running PHP codes must have been installed on the server. The extension of the file has also be changed from .html to .php so that the server can detect there is an application to be run in the page before forwarding it to the reader. Thus, if your main page contains php codes, its name will be index.php instead of index.html.
How does a PHP-script work? Let’s take a webpage hit counter as an example. This application is able to count the number of visits to the page it is installed on. This little program obviously can only be run on the server, because this is where you can follow the hits at the webpage. Every time when a visitor downloads the page, the server automatically runs the PHP code embedded in the page. This short application basically checks the actual number shown by the counter, adds one to it, saves the new number and displays it in the section of the page where the code was placed.
In practice there is a very wide range of PHP applications, starting from this kind of simple codes to complex ones, like full content management systems.
Databases are often needed to support dynamic web pages. In the example above, you only need to store a single number on the server (number of visitors so far). It is enough to create a text file for this purpose (e.g. counter.txt), where the number is saved, and replaced by a new number when there is a new hit. This file can be stored in one of your folders on the server.
There are of course more serious applications with larger, separate databases. Here comes MySQL into consideration, which is one of the most popular database systems. MySQL is used by most of the free forum programs and content management systems, so if you would like to run one of these, make sure the host is able to provide you with MySQL (usually they are).
JavaScripts and PHP Scripts to download: www.hotscripts.com
There are more complicated dynamic sites available as well. You can download ready to use forum programs, then simply upload the files to a server and you will have your forum administered by yourself. Unlike the case of static website templates, here you don’t need to change anything in the downloaded files before uploading them to the web server. You will have to finalize your site through the Internet, using your administrator rights.
Forum programs can be downloaded e.g. at www.phpbb.com or www.simplemachines.org
Before uploading, make sure that the server is capable of running PHP codes and there is a database (MySQL) connected to your account.
Content Management Systems (CMS) are similarly, or even more sophisticated ready to use programs. CMS programs can provide most of the features needed for a Web 2.0 site. Depending on your choice, authorized users may write articles, blogs, comments, create forums, etc., on your site.
Thanks to Content Management Systems, anybody can create professional dynamic websites without any serious knowledge on informatics. The quality of a web page doesn’t necessarily depend on the amount of invested money anymore; good content created by you will be sufficient to become successful. You will need to spend a couple of days, however, to try and learn the way you can administer the CMS.
Some of the best CMS programs can be downloaded at these sites:
Some recommendations before finalizing your website
When you prepare your web pages on your own computer, keep in mind that readers may have different screen resolutions, or browser programs than you. When you are ready with the website it is worth having a look at it with major web browsers (Internet Explorer 6.0 and 7.0, or Firefox) and checking it with different screen resolutions.
You shouldn’t forget either that some of the visitors will have slow Internet connections. If you don’t want to make your site a nightmare for them, do not use large files. Text files are relatively small; a HTML file is usually only a couple of kilobytes. The main problem is caused by images. It is enough to put a few pictures with a size of a couple megabytes on your webpage and it might prove very slow to download. For this reason, web developers prefer to use images with small file sizes. If you don’t have an image editor program on your computer, you can shrink your images at websites on the Internet, e.g.: www.shrinkpictures.com