My first website

For many years now I am giving workshops HTML/Webdesign. Many of the participants in my workshops have been people who had never made a website before. When I teach people who have no experience at all with making websites, I prefer to follow the same path how I learned it. That is starting with plain, simple, basic HTML.

HTML is the language used to create websites. It stands for HyperText Markup Language. It is not a programming language. It is just a 'markup language'. And the basics of HTML are easy to learn. If you have no experience yet with using a program that offers a graphical interface to do webdesign, the best is to start with basic HTML.

Especially in the beginning it can be frustrating to work with HTML, which is in fact a very limited language. However, as soon as you get familiar with the basics of HTML, you will also understand a lot better any graphical program, 'wysiwyg editor', which you can use to do webdesign. And you will understand much better why some things 'simply just don't work'.

Very often, when I start showing the basics of HTML, I am interrupted by one of the participants, with a remark such as: 'But it is possible to do that in Dreamweaver!'

For some reason it is very difficult to explain that Dreamweaver is just a tool to help you to create the code for your webpage and that Dreamweaver cannot do things you couldn't write yourself using a text editor. Dreamweaver is not a magic program which can create animated designs, popup menus and flashy gadgets, which would not be possible to create with other programs.

So, usually at this point, I tell my students to just forget about all the flashy, blinking websites, at least for the moment and to first go back to the beginning of HTML. As I wrote before, this can be a little frustrating in the beginning, but it will give you a big advantage in the end.

One of the things which I have always liked about HTML is that it takes just a simple text editor to create your code. You can work on any computer, on any platform, with any system in any language. If you know the basics of HTML you do not depend on any program or system to create and update your webpages.

A simple editor, for example, is the program called Notepad on the Windows platform. This program can usually be found under Start -> All Programs -> Accessories -> Notepad

This program is a good example of a very simple editor. In this program you can type a text and save it, but you cannot design the text. In this program it is not possible to change the look of the text, for example to make text bold or to change the color. For your first experiments with HTML I recommend to use a really simple text editor, like Notepad, just to experience how it works and to see that it is really possible to create a website without any special program.

If you are working on Macintosh there used to be a program called SimpleText, which is perfect to use for your first HTML file. On linux I have been using gedit and kedit. Any simple text editor will do. Experienced linux users can also type directly in jed or vi. It is better not to use a more advanced editor, like Word, as this will only confuse you, especially in the beginning.

There are also many free editors available which are made especially to type HTML. When you enjoy coding HTML you could try out some of these HTML editors. Many of them can be downloaded for free. However, when you become more experienced with coding HTML, you might also start to use Dreamweaver as an HTML editor. Dreamweaver not only has a graphical interface to design websites, it also offers the possibility to directly edit the HTML code. When you become more experienced with writing HTML, you will also start to understand much better how to use the graphical interface of Dreamweaver combined with the possibility to edit the HTML code at the same time.

So, the best is to use a simple text editor to type your first HTML code. If you have no experience with programming, designing your website in a text editor might be a bit of an unusual experience at first. HTML is not a programming language, but the feeling of typing your code into a text editor to create a page is similar to the feeling of typing your code to program something.

If you want your website to look a little bit more attractive than the most basic website, you will need to include every detail of the design in your HTML code. Every detail that goes beyond the most standard layout needs to be added with HTML commands. And that really goes as far as including each new line as an HTML command.

When you are done typing down your code into the editor, you will want to see what your new page looks like. Viewing your page is done with a web browser. Before you can view your page with a browser, you need to save the file which you created in the text editor. There are many details to take care of when saving a file for a website, which I will include in a separate hub.

A web browser is a program to view websites. On purpose I am calling this program a web browser. During the many workshops webdesign which I have given, I have noticed that many people are very much stuck inside the setup of their own computer. They usually know their way around on their own computer, but as soon as the environment is different, a different system or when different programs are installed, they are completely lost.

'A browser is a program to view websites.'
So, which program, for example, is a web browser?

For many people this question is not so easy to answer. I'll give you the answer right away, so you will understand what I am talking about. Probably the best known browser is 'Internet Explorer'. If you are using Windows this program is already installed on your computer. Then there used to be Netscape and Mozilla. These days Firefox is widely used. Besides Firefox and Internet Explorer there are many more programs, like Safari, Opera or Google Chrome.

Another correct answer to above's question would be:
'The program which you are using right now to read this article is a web browser.'

During my workshops there have been many participants who would answer that 'Google' is the program they use to view websites. 'Google' might be the first page to appear when you start Internet Explorer, but it is not a program. 'Google' is a website, a webpage, just like the page which you are viewing now. Any page on the Internet is opened inside a program which can display websites. You can open the Google page in any of the programs, 'the browsers', which I mentioned before. If this sounds complicated now, I will try to explain it again later.

The thing which all these 'browsers' have in common, is that all of them are able to read and understand HTML code. Web browsers are programs which are able to display HTML code as webpages. Web browsers translate your HTML code into a graphical display of your page and enable you to 'browse', to click through your pages. When you are using basic HTML to create your website, it doesn't really matter which of these programs, which 'browser', you are using to view your page. Any of these browsers is able to display your webpage.

And this is where the big advantage of good old HTML comes in. A page written in simple HTML should display more or less correctly in any of these programs, these browsers. There might be slight differences in the way how certain things are displayed, depending on which browser or platform you are using to view the page, but the general content and layout of the page should look more or less similar in each of these programs called web browsers.

Another advantage of using HTML is that you can update your page from anywhere. You don't depend on a certain program to make changes to your page. You can download your page wherever you are, open your page in any text editor, on any computer, make the necessary changes and upload the file again.

In order to upload your file you will need another program to be installed, a program which can do ftp or scp, depending on your server. And you will need username and password to upload the file to your server. I will write more details about uploading your website in a separate hub.

This hub is only an introduction to HTML. It should explain some very basic things which are important to understand, when you start making your first webpage with HTML. If the information in this hub is still a bit confusing to you, don't worry. It will become more clear when you start actually doing it. When you start to type your first lines of HTML, saving it and viewing your first page in a browser, you will start to understand how all these programs work together.

I have put the first steps to create a webpage with HTML in a separate hub called 'My first webpage'. It will be good to come back again to this hub some time after you have made your first webpage with HTML. When you have a little experience with typing HTML in a text editor and viewing your page in a web browser, the information in this hub will make much more sense. So move on now to creating your first webpage and then come back here again!