printer friendly version

Introduction to HTML

If you're completely new to HTML, but you would like to learn something about it, then you should read this tutorial, as well as it's sequels.
In this first tutorial you will learn the use and functioning of HTML, and get some directions on how to create your first HTML webpage.

What is HTML?

HTML (HyperText Markup Language), is a text readable in more dimensions, or hyperlinked textual file. Now this sounds a bit abstract, it would be a lot simplier to say that HTML file is an ordinary text file, but the browsers (Internet Explorer, Netscape Navigator, Mozilla, Avant, Opera...) interpret the codes so the text file turns out a bit more than ordinary. No matter how many effects or multimedia the page has, in it's essence it's just a text file — click View > Source and you'll see what I mean.

What programs should I use to create HTML webpages?

You can create webpages in any text editor, starting from MS Notepad. My first webpage was coded entirely in Notepad ^_^ (don't even try to imagine what it looked like...)
As I said before, HTML is an ordinary text, all you need to do is save a properly coded page with the .html extension and voilla!
Offcourse, begginers will probably find coding in Notepad too difficult. There are plenty of programs that enable you to make a webpage without writing a single line of code, so-called WYSIWYG editors. But, I strongly advise you to check your code if you're using one of those because you can learn a lot that way.
The most famous WYSIWYG editors are probably Microsoft FrontPage (no serious webdesigner will recommend you that one, and neither will I. The good thing is that you get it in Microsoft Office package, but your webpages will be a mess) and Macromedia Deamweaver (I used to use it). I'm currently using Programmers Notepad and I love it. Working in text editor is a lot safer because you are the one to decide which tags to use and how. Well, you should choose by yourself. There are plenty of programs on the market, some of them are freeware.

How can you add pictures and music to webpages?

I told you that HTML is an ordinary text file. How do you do that then you wonder? The answer is: you don't put pictures and multimedia inside the page (like you do in the .DOC file in MS Word) — you link the file to the .html document. You need to insert code that includes the path to the image on the place you want that image to appear, so the browser does the rest of the job. HTML documents are rather small, and they have to remain that way in order to load quickly. Adding multimedial content increases the webpage loading time.

What is a path?

Path is a direction to the browser where to "pick up" an image, another webpage, or any other supplemental. An absolute path (looks like this: http://www.server.ext/foldername/page.html), is actually the file's address on the Internet. You use absolute paths when linking files that aren't on your server (server is a remote computer that stores your files). Relative path (looks like this: foldername/page.html) tells the browser where to go from this current page, assuming that the files is on the same server your page is. Adress of this page is, and the relative path to here from the main page is extras/tutorials/html1.php

I have seen some awesome websites, can I do it too?

Absolutely! :D
A lot of websites out there are a work of art, so they make us think we have nothing to look for in the world of webdesign. But, you'll see that most of this websites seem spectacular, but it's just a few nice images and carefully picked colors. That's the "thing" with web design — make more by using less. Anyone with basic knowledge of using computers can make a website — all you need is a code editor, image editor and a lot of enthusiasm :)

What should I make my webpage about?

Oh... well I can't tell you that, you know. A lot of people started by making a page about themselves. In Croatia, the blogging tool incited many users that never thought of Internet as a medium of self-expression to become public writers and therefore, to wish for a decent look of their virtual home. Being one of the most influent croatian bloggers, I've witnessed and helped many of them making their first steps in web design.
I won't tell you what to do, but from the experience I gained I'd suggest you to make a blog, or a small site dedicated to your favourite subject — cartoon, band, writer, animal, sports club... Your website should have a lot of information, and it should be original, not copied from other sites. Try hard to update it frequetly!

Please, resist the urge to make a free graphics site offering web layouts, because being a beginner you cannot be in position to offer those services to other people. You will realize this when you become more experienced.

If I have an idea, how should I do it?

There are plenty of tutorials here to help you out, so if you have the tools and the idea, continue to read them :)

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business