ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

My first website

Updated on May 27, 2009

An introduction to HTML

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'.

What about Dreamweaver?

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.

A simple text editor

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.

Writing your code and viewing your code

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

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.

Updating your page

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.

Putting it all together

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!

Feedback - Leave a comment!

    0 of 8192 characters used
    Post Comment

    • adorababy profile image

      adorababy 7 years ago from Syracuse, NY

      At first, building a website can be overwhelming. Don't get me wrong, it is indeed overwhelming to process. But when you start to learn the step by step basics and the not so basics about web design, that is when you really feel the fulfillment of enjoying what you have accomplished.

    • profile image

      Ecommerce Website Design Company 7 years ago

      Wow... found it interesting... have a new idea in the post “Calling all business women!”….hope it'll be beneficial for me and my friends...

      I read this above tips. It is very informative. Thanks for clearing that up.

    • profile image

      gaajar 8 years ago

      fireFox is the best available browsers for developers

    • profile image

      msayyed75 8 years ago

      FireFox is one of the best browsers available for developers..

    • profile image

      adsense clicks 8 years ago

      Besides Firefox and Internet Explorer there are many more programs, like Safari, Opera or Google Chrome.