A website that can be accessed on the Internet consists of a few simple components. I would like to briefly present them here in order to get a better understanding of the topic.
- Computer or laptop to create the page
- Editor, IDE or WYSIWYG editor
- Basic knowledge of HTML
- Browser
- Server/Hosting with domain
- FTP software
A modern website also consists of several additional components, such as CMS, HTML with CSS, PHP and usually also a database with SQL queries (e.g. MySQL) to make the website interactive.
But I want to concentrate on the absolute basics here in order to make the topic easier to understand and to be able to understand it better in the end.
Computer or laptop to create the page
A simple laptop that can also be used for office applications is sufficient here. Personally, I'd rather work on a big screen and a computer with a bit too much than too little power. This makes the work itself simply easier because the computer does not reach its overload limit so quickly and generally works faster.
Editor, IDE or WYSIWYG editor
Basically, a website is nothing more than a very simple text file with the extension .htm/.html. To edit them, it is sufficient to use a very simple text editor, e.g. Notepad or Editor from Windows. However, editors that also recognize HTML and display their commands formatted accordingly are more suitable for larger work. Atom for example, is very well suited for this.
Then there are the so-called IDEs. IDE stands for Integrated Development Environment., auf Deutsch, Integrierte EntwicklungsumgebungA well-known open source IDE is e.g. NetBeans. These programs are very extensive, support several programming languages and have some features to simplify coding, especially for larger projects.
Then there are the so-called WYSIWYG editors. WYSIWYG stands for, What You See Is What You Get, auf Deutsch, was du siehst ist was du bekommst. These are editors in which you can create a website purely graphically, similar to documents in MS Word or LibreOffice Writer. You don't have to edit the HTML yourself. Sounds great, but in practice it doesn't always work well and reliably for various reasons.
Incidentally, MS Office or other word processing programs are not suitable. You can also save the created documents as HTML files, but the presentation on the web leaves a lot to be desired.
Basic knowledge of HTML
What is then written into the .html file is called HTML, Hyper Text Markup Language. Hypertext AuszeichnungsspracheIf you then open this file in a browser, the elements and tags of HTML are interpreted by the browser, which then displays the contents accordingly.
A very simple basic framework for an HTML file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Titel der Webseite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Dies ist ein Kommentar. Kommentare werden im Browser nicht angezeigt. -->
</head>
<body>
<p>Hello World!</p>
</body>
</html>You can simply copy this HTML source code and paste it into a simple text file. Then change the file extension to .html and open the whole thing in your browser. Then you see – Hello World! - in your browser. Voilá, this is your first website :).
Browser
The browser is particularly important, because without it you cannot check how the website or changes to the website really look like. Some browsers interpret HTML differently, but those who work with Mozilla Firefox or Google Chrome will have relatively few problems. Web designers and developers usually have a wide range of browsers installed. Microsoft Edge, Firefox, Chrome and Opera are the best known.
In the past there was still Netscape Navigator and the good old Internet Explorer, which very often interpreted HTML incorrectly or simply differently than the other browsers.
Server/Hosting with domain
Ok, so now we have our first little "Hello World!" website. However, how do we get it onto the Internet so that friends and colleagues can also look at it?
For this you need web hosting, offered by a web host. Hosting providers basically do nothing other than rent storage space on their servers. A server is basically nothing more than a computer that is constantly connected to the Internet and of course is also optimized to display websites.
In addition to the storage space for the website (web space), the web hosting provider also gives you a domain under which the storage space on the Internet can be found. This can be your own domain, but if this does not yet exist, you usually get a somewhat more complicated Internet address, e.g. http://myclientid.webhoster.serverxy.com. This Internet address is then entered in the browser and you can see your web space.
Of course, having your own domain is nicer. You get these from the web host in a package or you have to order them separately. The prices vary from approx. $10 to $40 per year, depending on the domain ending, it can sometimes be more.
You then get access data from the web host to log in and upload files from the website to your own web space. This is done with the so-called file transfer protocol.
FTP software
FTP stands for File Transfer Protokoll, auf Deutsch, Dateiübertragungsprotokoll and is an interface to transfer files from your own computer to a server connected to the Internet.
The web host gives you access data for this. You enter this in the FTP program and then you get a file overview similar to that on your own hard drive in Explorer. Only the overview is now not your own hard drive but that of the web space.
By default, most FTP programs show your computer on the left and the server on the right. Files can now be easily stored on the server, overwritten or downloaded by double-clicking or dragging and dropping with the mouse.
The currently best-known FTP program is FileZilla. It's open source, free, and receives regular updates.
As soon as you have uploaded the files from the local computer to the server via FTP, they can also be accessed under your own domain or the Internet address provided by the hoster. Your first website is online :).
Important: The first HTML file that is called up in a folder or the domain of the website is almost always, unless otherwise configured on the server, the file with the name index.html. This means that if you create a website, the file name of the homepage of the website must be index.html.
If you liked the little introduction, feel free to leave a comment. I would be happy 🙂
