HTML & CSS for beginners

HTML & CSS for beginners (part 48): The website goes online

All videos of the tutorial HTML & CSS for beginners

You usually develop your website locally. To do this, you create a corresponding directory structure - as has already been shown.

HTML & CSS for beginners (part 48): The website goes online


This structure is ultimately what you then put online. (I am assuming a static HTML website here. But even if you develop dynamic websites based on PHP and MySQL, for example, you can do this locally first. The magic word is then XAMPP, for example). Make sure that your directory and file names do not contain any spaces or special characters. I also recommend that you consistently use lowercase letters for these names.

Put your website through its paces locally. It should actually run as error-free as possible.


The right provider

To be able to put your website online at all, you need the right web space. (I am assuming here that you do not want to run your own server, but rather rent web space from a provider).

First of all, you need to get storage space from a provider. The same applies to a domain, i.e. ultimately the address via which the website can later be accessed. There are now numerous providers from whom you can rent inexpensive web space. You should pay attention to the following things when choosing a provider and web space package:

- At least 1.5 gigabytes of storage space

- 1 de-domain included

- Normally at least php should be supported.

- A MySQL database should be included.

- Make sure you have unlimited traffic.

The last point in particular is crucial, as traffic is often a real cost trap.

Of course, the things mentioned are only really minimum requirements for small websites. If you run a well-frequented site, you should of course upgrade here. However, it is always possible to upgrade from a small to a larger web space package at a later date without any problems. If in doubt, ask your provider beforehand.

You can explicitly search for the right provider for you at http://www.webhostlist.de/webhosting/vergleich/.

HTML & CSS for beginners (part 48): The website goes online



The provider selection can be started there according to very different criteria.

As soon as you have decided on a provider, selected the package and registered your desired domain, you can get started. The provider will send you all the relevant information, such as FTP access data etc., by e-mail.

Transfer the data

As soon as you have the necessary data, you can transfer your local files to the website. However, check your files and the syntax they contain again first. The following things are particularly important:

- Check that all hyperlinks and image paths are correct. (Especially if you have created the HTML pages with a WYSIWYG editor, it can happen that local paths were used here, which are then no longer correct online).

- Check the file and directory names for spaces and special characters.

Is everything correct? Then you can now put the pages online. To do this, establish an FTP connection to the web space. You can do this with any FTP tool. One of the best tools of this type, which is also available free of charge, is FileZilla, which can be downloaded from http://www.filezilla.de/.

HTML & CSS for beginners (part 48): The website goes online

After you have installed and started FileZilla, go to File>Server Manager. In the dialog box that opens, click on New server.

HTML & CSS for beginners (part 48): The website goes online

In the right-hand section of the window, enter the FTP data that you have received from your provider. This could look like this, for example:

- Server = www.dein-benutzername.de

- Server type = FTP file transfer protocol

- Connection type = Normal

- User = ftp_sdfsdfsfd@dein-benutzername.de

- Password = Your password

The FTP data must be entered here. If necessary, ask your provider again.

The connection to the FTP server is established with Connect.

For the sake of simplicity, I assume at this point that you are copying your website directly into the root directory of the website. You can recognize the root directory by the slash in front of it.

HTML & CSS for beginners (part 48): The website goes online

The advantage of this direct variant is that the website can then be accessed at http://www.deine-domain.de/ without any further settings. You therefore do not need to set up a redirect or similar.

With many providers, the two directories cgi-data and cgi-bin are already in the root directory by default. All directories and files from the local environment are copied to this level. To do this, search for the local files in the top left-hand window area of FileZilla.

Click on the files and directories in which the local data is located.

Now you only need to mark the files and directories that are visible in the lower window area. Then right-click on the selected directories/files and select Upload.

HTML & CSS for beginners (part 48): The website goes online

The data will now be uploaded to the server. Make sure that all files have actually been transferred. If there are problems uploading individual files, you can see this in the lower window area of FileZilla.

As soon as all content is on the server, you can start testing the website. Above all, check that all images are present and the links are correct.

End and conclusion

This brings us to the end of this HTML CSS series. What you should have taken away with you are the basic steps on how to create websites based on HTML and CSS and then actually present them to the public. Above all, however, one thing should have become clear: creating a website is a lengthy process. It starts with the design, continues with the actual web development and ends with uploading and checking the website. And now I wish you every success with your new website!