Beginners HTML Tutorial – Web Design Basics

Are you new to the world of Web Design?, this tutorial is just what you need to get started, it’s aimed at the beginner and assumes no prior knowledge.

What is HTML?

HTML is the most crucial building block of a website. There are many other tools you’ll hear from people talking about making websites – Javascript, PHP, ASP, SQL to name a few – but without HTML you can’t even get started.

HTML is a “markup language” – a structured way of controlling layout and appearance of text, graphics and other elements on a web page. More recently it has developed into “XHTML” which is essentially a stricter and more uniform set of rules for writing HTML. All our code in these articles will be written to the latest XHTML standards, and we’ll use the terms HTML and XHTML interchangeably.

The other thing we’ll be covering in these articles is CSS. This is a way of controlling the style – color, size, font, position, and so on – of various aspects of your page. Its real advantage is that it allows you to alter these properties of more than one area of your page at once, so that you don’t have to set everything individually many times over. We’ll look more at this later on.

What is HTML not?

HTML only allows for static content. That is, pages that do not change in response to user’s commands, and do not draw data out of another source like a database. We’ll look at the best way to achieve “dynamic” pages later on.

HTML is not perfect!

Like anything HTML has its flaws. Over the years the HTML specification has been expanded and altered to take into account users’ demands. However the various internet browsers – Internet Explorer, FireFox, etc – have occasionally made modifications of their own. Some of these were intentional and some were not (i.e. bugs!). As a result, there may be differences between the way a page displays in one browser and another (or even between different versions of the same browser).

Fortunately, today this is less of an issue as all the browsers move towards full and proper compliance with the published standards. However there are still plenty of users who have older versions of the browsers on their computers. You need to be aware of this problem but don’t worry too much for now. We’ll address it as and when it comes up.

What do you need to get started?

An Editor

This is a program to write your code in. Any text editor will do the job, for example Notepad (which you can probably find under Accessories in your Start menu).

However many developers choose to use something a bit more advanced. It can be really useful, particularly when you’re learning, to have an editor that automatically color codes your work to help you tell the code apart from the content. There are lots of editors available that do this. My favourite is EditPlus, which you’ll see in the screenshots in these articles, and is available on a free trial at www.editplus.com.

You may be familiar with programs like Dreamweaver which will write most of the code for you. These are called “WYSIWYG” editors – What You See Is What You Get. They certainly have their place as they can save a lot of time. However they will never be able to do everything that you need them to – so are no substitute for understanding the code behind the scenes. It’s best to learn to write the code properly to start with, and then, if you want to, use a program like Dreamweaver to remove the monotonous tasks, we do offer some excellent Dreamweaver Tutorials for users who decide to go this route.

A Browser

You’ll already have one of these if you are reading this article! Popular browsers include Internet Explorer (http://www.microsoft.com/ie) and FireFox (http://www.mozilla.com/en-US) , but there are lots more. It doesn’t really matter which you use but just make sure if you can that whatever browser you are using is a recent version (current versions are Internet Explorer 7 and FireFox 3).

That’s it – we’re ready to get started!

Writing your first HTML page

HTML uses “tags” to control display of your content. A tag is a word or letter enclosed by angular brackets – e.g. <p> is the tag for a new paragraph, and <title> is the tag for the title of your page.

Every tag must be opened and closed. This is especially important to remember – a lot of the time the page will still work if you don’t add the closing part, but results will be unpredictable, particularly in older browsers. It’s best to get into the habit now.

To close a tag, add a slash before the word in the tag. E.g. </p> or </title>. For example, to make a paragraph of text:

<p> Text goes here </p>

Outline of the page

Every page needs a few tags before you can think about having any content. Look at the example below then we’ll go through it line by line.

<html>

<head>

<title>Page Title</title>

</head>

<body>

</body>

</html>

The <html> tag is fairly self explanatory! It’s important though so don’t forget it. Below that we have the <head> tag which starts a section where you can include various pieces of information about the page.

The <title> tag tells the browser what the heading of the whole page is. This is displayed in the title bar at the top of the browser,

<image 1 >

not actually on the page itself. Put something sensible in here – this is a key thing that the search engines look at when ranking your page. Rather than just putting something like “Home” or “Welcome” try to have a heading that includes some key words about your site.

After the title we need to close this tag with </title>, then finally close the header section with </head>.

<body> is the section of the page that includes all the content visible to the user. At the moment we don’t have any content so this is followed by the </body> tag to close this section.

Then the </html> means it’s the end of the page.

HTML is hierarchical

Take another look at the code above. Every tag is opened and closed, and is fully enclosed within its parent (<head> is a child of <html>, and <head> is a parent of <title>).

It is important to make sure the closing tag comes in the right place. E.g. <head><title> </title></head> is right but <head><title> </head></title> is not. You need to make sure that when you write a closing tag, all other tags that you started within it are also closed.

To make this a bit easier to keep up with, developers use tabs and spacing to make the code simpler to read. You’ll see from the code above that each time we write a parent tag, the next line is tabbed further in than the previous line. So all tags that are horizontally lined up are children of the same parent. This isn’t strictly necessary but it makes things a lot easier when you’re trying to read what you’ve written.

It’s also worth noting that spacing and lines don’t matter. You could leave a dozen lines between each tag if you wanted to and it would make no difference. Content within tags (for example a paragraph of text) can also span multiple lines.

Let’s add some text

For now we’ll just put in a single paragraph of text. The tag for a paragraph is <p>. As you know we need to close the tag as well, so the format for a paragraph is:

<p> text here </p>

This needs to go inside the body section of your page – between the <body> and </body> tags. So your page will end up like the one below (remember to use the tab key to make things easier to read):

<html>

<head>

<title>Page Title</title>

</head>

<body>

<p>

This is my first web page!

</p>

</body>

</html>

Save the page

Now it’s time to save the page. Browsers expect the main page of a website to be called “index.html”. This is how you can type an address like http://www.google.com into your browser and end up at http://www.google.com/index.html.

Make sure that you are saving your page with the “.html” extension. In an HTML editor like EditPlus you will need to choose “HTML” from the “file type” box, or in something like Notepad you will need to choose “All files”. Then type “index.html” in the file name box and click save.

Does it work?

Find your saved page and double-click it to open it up in your internet browser. You should see something like this:

It’s not pretty, but it works. We’ll get to making it look nicer in the next article.

This page is actual being served from your own machine, therefore only up can see it , if we wanted this page to be visible to the world it would need to be upload to a web server using a protocol called FTP ( File Transfer Protocol ), this sounds complicated, it’s not, it’s no harder than sending an email and we will cover this in a later tutorial.

Reference

• <html> – must go at the start and end of every page
• <head> – defines the “header” of a page which contains various pieces of information about the page, that do not actually appear on it
• <title> – the title of a page as viewable in the browser’s title bar
• <body> – the main body of the page – the part visible to the user
• <p> – a paragraph of text

Don’t forget, all of the above tags need a closing tag too. As I said earlier the page will quite possibly work if you forget the closing tags but it will create problems for you later on. Get in the habit now!

Beginners HTML Tutorial part 2:
look at some formatting options to give a bit more life to your page, by introducing CSS.