HTML Start - The Right Way Tutorial

About HTML

The Concept of HTML Tags

In ‘Starting a Website…' we dealt with the tag concept of HTML and I showed you how you could manipulate some simple text by adding tags to the text. Tags are used in the following manner:

<tag>Whatever your text is</tag>

For example if I want to put a piece of text into its own paragraph, I can ‘encapsulate' or surround it with paragraph tags which are <p> and </p> . Just like this:

<p>This is my piece of text which will be on a paragraph by itself</p>

Anything in between the tags is treated in the way that the tags define. So if the code was:

<h1>Hello World</h1>

The ‘Hello World' would be treated as the main heading ( <h1> means main heading or top-level heading, subheadings are <h2> , <h3>...<h6> ) and a web browser would by default show it in a large font suitable for a heading. Don't worry about knowing all the tags right now, we will discuss many of them in detail later on.

Another property of tags to keep in mind is that they can have attributes which further define them or give the browser additional instructions on how to show the tag. Whereas you would normally write a tag like this:

<tag>Some Text</tag>

You can add attributes like this:

<tag attribute=”Some Value”>Some Text</tag>

an example of this is the image tag:

<img src=”yourimage.gif”/>

Just an image tag does not tell the browser much, but the ‘src' attribute or ‘source' attribute is used to tell the web browser where the image is and what it is called so that the browser can go get it.

What Not to Do

Now that you are familiar with the basics of how HTML works, I have to give you this warning. In the Starting a Website for Beginners tutorial, I used the example of bolding, centering and italicizing text using HTML. That was just an example and that is NOT what HTML should be used for.

Important!
HTML should only be used to structure content, i.e. define where the body, headings, paragraphs, text and tables are. The formatting (bolding, centering, font sizes, colors etc.) should be done using another basic web technology called CSS (Cascading Style Sheets) which I will introduce in a separate tutorial. (Baby steps, dear reader, baby steps).

Now I know some of you may be saying, “Well, if I shouldn't use those styling tags like <b> and <font> then why do they exist?”

Good question, the quick answer is that they are throwbacks to a time when CSS wasn't used and we needed them. In the future, these styling tags are probably going to be ‘deprecated' (discontinued) and won't work anymore in newer browsers. So get used to not using them.

The Moral
HTML for Structure and CSS for Formatting. If there ever was a moral to any story that you should remember for the rest of your web design days, this is it, so remember this and make it your mantra.

Fun with HTML Documents

Web Pages (HTML documents) are usually divided up into two parts: the <head> and the <body> . The <head> area is not visible to the viewer, (except for the title) but contains important information for a web browser (like Internet Explorer) to interpret. A typical HTML document may have this structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Basic HTML, learn the basics of HTML "/>
<meta name="keywords" content="HTML for beginners, basic HTML, HTML basics"/>
</head>

<body>
All your text, images, links, tables and other HTML code goes here.
</body>

</html>

The part where it says:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

is so that the web browser knows exactly what kind of document this is and how to treat it. In this case, I declare that this is an XHTML document which conforms to W3C standards, and which version of XHTML this was written in.

What s XHTML

XHTML is the new generation of HTML, and this page conforms to XHTML 1.0 Strict ( other versions include HTML 4.01 Transitional, HTML 4.01 Strict, or XHTML 1.0 Transitional). Don't worry about what Transitional and Strict means, you know all you need to know about that for now. But please note that you will learn XHTML 1.0 Strict in the following tutorial.

So that's how an HTML document is structured. You may remember that in a Starting a Website tutorial, I referred to dividing your page into header, body, and footer. In that context, I'm talking about your content, and how you should logically divide up the content that appears within the <body></body> tags. Here, however, I have shown you the structure of an entire HTML document, even the parts the visitor cannot see.

Building your Document

Ok, now we'll start gradually building your web page, you should start off by taking the following code and copying/pasting it into a text editor like Notepad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
HTML is easy
</body>
</html>

Before you save this file, create a new folder called ‘mywebsite' in a location that is easy to remember. Now, Click ‘File -> Save As', browse to the mywebsite folder you just created and for the filename, type in “myfirstwebpage.html” with the quotes. This will save the file as an html file. Make sure to save the file somewhere that is easy for you to remember.

Note About Websites and Folders

Usually when building a website, you want to use separate folder on your computer that will hold the entire website (all the files, subfolders, images etc). This way, it will be easier to upload or publish the website.

Ok, now if you open up a web browser like Internet Explorer, you should be able to click File -> Open and then browse to the file you just saved. Once you open the file, you'll be able to see the result. There should be one line of text that says, “HTML is easy”. Voila! You have your web page.

Now we will start building on this!

Basic Tags

Title

This Title is not one that appears on the main body of the webpage. This title is the one that appears on the top left hand corner, on the browser window's title bar. To add a title to your web page, you just have to add one line to your HTML document between the <head> tags like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>This is My Page</title>

</head>
<body>
HTML is easy
</body>
</html>

Save the document, and go back and re-open it in your Web browser. If you look to the very top left hand corner of the window, you will see the title of the web page. The rest of the page should remain unchanged. The window's title bar is the only area affected by the <title> tag. (Also, search engines usually look at your title while evaluating your content).

Now that you have added a title to your web page, let's talk about headings. Headings are not the same as a title since headings appear in the body of the web page rather than the ‘head'. Let's check them out.

The Paragraph Tag

Breaking up your text into paragraphs is good writing. Doesn't matter where the writing will be published. The paragraph tag <p> serves a very important purpose by starting the text on a new line and leaving a small space.

Let's try this by adding more text to the <body> of the document, but without using paragraph tags and see what happens (you can follow along in your own document):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
HTML is easy.
HTML is great.
HTML rocks my world.
HTML is easy, oh wait I already said that.
</body>
</html>

Save the changes and then view the file again in your browser (remember to hit refresh if you already have it open in y our browser).

You will probably see this:

HTML is easy. HTML is great. HTML rocks my world. HTML is easy, oh wait I already said that

That's right, it's all in one line with no line breaks. No matter how many times you press ‘enter' between those lines, it doesn't matter at all to the browser, go ahead and try it. To the Web browser, they are all part of one line. This is where the paragraph tag comes in.

Wasn't that a clever example? Yes, immensely clever I assure you, I'm quite happy with myself. Ok, so let's get on with it. (This is an example of a wasted paragraph).

Strictly speaking (and I tend to speak strictly), if you begin something on a completely new line, it is a new paragraph that you are beginning, so lets change the above text to take this into account.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<p> HTML is easy. </p>
<p> HTML is great. </p>
<p> HTML rocks my world. </p>
<p> HTML is easy, oh wait I already said that. </p>
</body>
</html>

Similar to the other HTML tags, <p> means begin paragraph and </p> means end paragraph.

Now if you view the file again, you will see the desired result.

Headings

These are tags that you should use if you want to write headings for content. Heading tags come in 6 flavours, going all the way from <h1> , <h2> … to <h6> , with <h1> being the biggest and <h6> being the smallest.

Of course, you have to ‘encapsulate' text with opening and closing heading tags like so:

<h1>This is my main heading</h1>

Don't Let Headings Go To Your Head

Don't overuse the <h1> tag. There should only be a maximum of 1 (one) <h1> per page, and it should be what the entire page is about. Let's look at a sample outline of a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<h1>This is my page</h1>
<p>You can put some text here</p>
<h2>About My family</h2>
<p>Some overview text about my family. </p>
<h3>My sisters</h3>
<p>Text about my sisters goes here. </p>
<h3>My Parents</h3>
<p>Text about my parents goes here.</p>
<h3>My Wife</h3>
<p>Text about my wife goes here.</p>
<h3>My Kids</h3>
<p>Text about my kids goes here.</p>
<h2>About My Car</h2>
<p>Separate subject from Family, so another H2 tag is used.</p>
<h3>Subheading of My Car</h3>
<p>some text here about the subheading</p>
</body>
</html>

Go ahead and edit your HTML document so that you can put in some test headings. Try to structure the headings and paragraphs like I have done above. Do the same drill, save the file and re-open it the web browser (or if you already have it open, click ‘refresh' on the web browser), and you will see your changes.

The above structure is exactly what a Search Engine will see when it is evaluating your page. The better organized and less cluttered the page is, the better it will look in the Search engine, and the higher it will rank (we hope).

Search engine visibility is also one of the biggest reasons why we don't format (style) text using HTML. (Headings are not the same as formatting). See, if we want to format text with HTML, we have to write HTML code like <font size=12 weight=bold>blah blah</font> . This ‘bulks up' the page with unnecessary code.

However, with CSS (which we cover in another tutorial), all the formatting information is contained in ONE separate file which is ‘magically' linked to your html webpage, but not seen by search engines, so your webpage (the html file) is used only to present the content. This allows for a high Content/Code ratio (more readable content than HTML code) in your page, which tells the Search engine, “this page has a lot of content, that's good.”

Lists

Lists are a very important part of structuring data in a way that makes sense. Lists come in 2 basic types: unordered (not numbered) and ordered (numbered).

Unordered lists are defined using the tag <ul> and Ordered lists are defined using <ol> . And both of these kinds of lists will contain List Items which are defined using <li> . Let's have a look.

Let's take a sample unordered list like a “To Do” list:

• Groceries
• Bills
• Car

The HTML code for this would look like the following (you can follow along by editing your document):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<ul>
<li>Groceries</li>
<li>Milk</li>
<li>Car</li>
</ul>
</body>
</html>

Now if you want this list to be a numbered list instead of a bulleted list, you just have to change the <ul> to <ol> and you will be good to go.

Links

These are perhaps the single most important part of the World Wide Web. Without links, there would be no ‘Web' because nothing would be linked together. Without links, we would just have the “World Wide Library of Separate HTML Documents and Other Files”. Doesn't have quite the same ring to it, does it?

Links (also called ‘hyperlinks') are used to (surprise!) link web pages to other web pages and other files. When a visitor clicks on a link, the linked file is opened and displayed to the visitor. From another point of view, the visitor is ‘taken' to the file. If the file is not something that a Web Browser can open or read (like a Zip file or an MP3 file), it usually prompts the visitor to ‘download' the file and save it to their hard drives so they can open it later using the correct program (like WinZip, or an MP3 player).

So, before you can build a link, you need to know what you want to link to.
1. So save your work in your text editor, and open a new file,
2. Type in whatever you want, you can include more HTML code or just type in some text.
3. Save this file as “linked.html” (with the quotes), in the SAME FOLDER as you saved the earlier file.
4. You can call the file whatever you want, just make sure it's easy to remember and that it ends with .html

Ok, so now you have something to ‘link' to. Great. Let's link.

Here's how you build a link:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>

<a href=”linked.html”>My Linked Document</a>

</body>
</html>

And bob's your uncle, you have your link.

The <a> tag is the ‘anchor' tag and the href="... part is a specific attribute of the anchor tag. The ‘linked.html' is the name of the file we want to link to, and is the value we give to that href attribute. This basically tells the browser to take the text ‘My Linked Document' and make it an ‘anchor' which will open up ‘linked.html' when it is clicked.  All these elements (the anchor tag, the href attribute and the filename) make up a link. 

Similarly, on the linked.html document, we could have a link back to your home page like so:

<a href=”myfirstwebpage.html”>Back to the home page</a>

Linking to other websites

Also, you can link to outside web pages (pages on other sites) by putting in the website's address just like you would in a web browser's address bar like this:

<a href=”http://www.sadikhov.com”>Check out Sadikhov.com!</a>

You see, above I didn't have to put in a filename (or pagename) of any sort, because the user's browser will automatically take the user to the ‘default' starting page at http://www.sadikhov.com, whatever that may be. Web browsers are smart like that.

Folders and Linking

This is where linking gets a little tricky. You see, a lot of sites have multiple folders where they put their files. It's good for organizing. The only problem is that if you construct a link like we did above to a ‘local' file, the browser just assumes that the document you are linking to is in the same location as the document you are linking from. This may not always be the case, so we have to tell the browser exactly where the document is and we do that simply by adding the subfolder name to the filename, like this:

<a href=”subfolder-name/linked-file.html”>My Linked Document in a Subfolder </a>

Let's give it a shot by creating a new sub-folder in the folder where you have myfirstwebpage.html saved. Call the sub-folder anything you want, just don't put any spaces in the name (it will work, but this is a BAD habit, don't do it). Also make sure to remember what you called it.

Now, let's go back to Notepad and create another new HTML file. We will call this one ‘linked-2.html' and save this one in the NEW SUBFOLDER that you created. Put whatever HTML code you want into ‘linked-2.html'; just make sure you'll be able to tell the difference between the two files when you see them in a web browser.

Now open up the original myfirstwebpage.html in Notepad, and let's put in another link to the file in the subfolder. Here is what the document would look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>

<a href=”subfolder/linked-2.html”>My Linked Document TWO</a>

</body>
</html>

Now view myfirstwebpage.html in a browser like we did before, and voila, you have linked to a file in a subfolder. Yay!! This comes in handy when you have your content organized in folders, which is a great way to do it. If you have a site that sells blue and red widgets, you could have a separate folder for each of them so you know where everything is. And this way, you won't have any problems linking from the main page to the subfolders.

A common example of this can be found on most Canadian web sites, where the content is usually available in both English and French. You guessed it, these sites usually have a folder for English and one for French.

A very important note: if you are linking two documents within the SAME folder (doesn't matter if it's a subfolder or not), then you can just type in the filename without typing in the folder name, like we did in the first linking example. You only have to tell the browser which folder the file is in if the file is in a DIFFERENT folder.

Ok, so if you're looking at a document in a subfolder, how do you link back out to the main folder?

Good question, if you want to link to a file that is ‘up' one folder, just do this:

<a href=”../yourfilename.html”>File Up One Folder</a>

Or, if it is up two folders:

<a href=”../../yourfilename.html”>File Up Two Folders</a>

And so on and so forth.

Absolute Linking

No, this is not an ad for alcohol, ‘absolute' is the opposite of ‘relative'. Relative linking is what we have shown you so far, where the link's construction depends on where you are constructing it from. In other words, you write the link ‘relative' to your document's location (the folder it is in).

Many people use the alternative called absolute linking. Absolute linking means writing the link so that it points to the same place no matter where it appears in the whole site's structure. An absolute link is written like this:

<a href=”http://www.example.com/example-specific-folder/example-filename.html”>This link is Absolute</a>

Notice we have the complete web address (URL) of the page we want to link to. This link will be absolute because no matter where you save the document, it will always be accurate and pull up the right page.

However, this means that you always have to know what the exact address will be before you construct the link. Also, this kind of linking makes it harder for you to test your sites on your computer before ‘uploading' it to your web host, since none of the links will work until you upload the site to your web host, or if you are not connected to the internet.

Here is where relative linking has an advantage. If you move the entire site from one address to another, it won't matter as long as the structure of folders remains the same. All the links will still work. In contrast, absolute links are very rigid and do not allow for this flexibility.  If you have a site that has 500 pages, all containing absolute links to each other, you will have to change each and every one if you change your website address.  There are ways to do this automatically, but those are advanced topics that go far beyond HTML. 

I would recommend using relative links until you feel that you really need absolute links.

Anchors

A link can also be used to send a visitor to another part of the same page. For example, if the page is very long. Wherever you would like to place these ‘bookmarks' all you have to do is type in:

<a name=”Bookmark1”></a>

You don't have to put any text in between, but you can if you like. You can then link to these bookmarks like this:

From the same page:
<a href=”#Bookmark1”>Bookmark One</a>

From another page in the same folder:
<a href=”your-file-name.html#Bookmark1”>Bookmark One on File Name</a>

From a page in another folder:

<a href=”../foldername/your-file-name.html#Bookmark1”>Bookmark One in some other folder and file</a>

or even from another site:

<a href=”http://www.yoursite.com/foldername/your-file-name.html#Bookmark1”>Bookmark One on Some Other Site</a>

Very flexible and a great tool!

So that ends our (long) discussion of linking, but it's important stuff, so the length was justified :) On to other topics...

Images

Along with text, you can put images on your website. We touched upon this earlier in this tutorial, so let's take a look in detail. First off, just like with links, I need to know which image I want to include and where it is (in which folder). Usually, when making a website, images are kept in a separate folder called ‘images', so we'll use that in our example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>

<img src=”images/my-image.gif”/>

</body>
</html>


Note the slash at the end before the ‘ > '. The image tage ( <img> ) is one of the tags is closed using a slash before the ending ‘ > ' instead of another tag like </img> . Make sure to include this slash.

The above example illustrates how I would insert an image into the body of a document if the image is called ‘my-image.gif' and it is in a folder called ‘images'. In essence, the image is simply ‘linked' to the document, although in a different way. First, instead of the ‘href' attribute, we use the ‘src' attribute (pronounced ‘source'). Also, instead of the visitor having to click on a link to view the file (image), the file is already included in the current document. A file within a file. Aren't web browsers great!

Since these are basically links, the same rules apply when telling the browser the location or ‘source' of the image, including absolute and relative locations. The example above is a relative link, for example.

Tables

Ah, good old tables, the causes of (and solution to) all of life's problems. Okay, I've been watching too much Simpsons. But it is true that tables have caused a great deal of controversy in the geek-circles that you are about to become a part of .

Here's the Cliff notes version: the inventors of HTML gave us the ability to make tables so that us HTML geeks could present tabular data (like statistics, grades, and other stuff that looks good in a table). But then, some guy discovered that if you set the border attribute of the table to zero, the border disappeared and you couldn't see the table outlines anymore, while the table was still there.

So instead of using tables just to present tabular data, people started to use it to do layouts of pages because it allowed for so much flexibility. That created an age of very complex and clever table structures (tables within tables within tables within tables…) that took FOREVER to load (but looked very pretty). And while we were waiting for the page to load, us geeks decided that enough was enough, we will NOT use tables for layout anymore and use CSS instead!

Moral
use tables only for good… er… for tabular data. Try not to use them for layout.

Ok, that was a nice rant, let's get to the code. Tables are made using the <table> tag and are made up of two basic elements: rows ( <tr> )and columns. ( <td> ) I'm going to make a table of some of my grades from University:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Subject</td><td>Grade</td>
</tr>
<tr>
<td>Med. History</td><td>B+</td>
</tr>
<td>Comp. Sci</td><td>A</td>
<tr>
<td>Financial Accounting</td><td>A</td>
</tr>
</table>

</body>
</html>

Try that out in your document..  Table code can be a little confusing, so let's walk through it step by step.

1. <table border=”1”> starts off the table and sets the attribute ‘ border ' to ‘ 1 ' so that we can see the borders/outlines of the table. You can set this higher than 1 to make the border thicker.
2. <tr> establishes a row. The row doesn't do much except give the cells a place to live.
3. <td> establishes cells, you can see I have two cells in each of the rows, so I have two columns. However, you can have different numbers of cells in each row, but then things start getting messy and complicated.

You will notice that in each row I have the <td> tags on the same line. As we saw in the past when discussing paragraphs, line breaks don't mean a thing in an HTML document. The reason I kept both cells in one line was so that you could see how the table will look without really having to look at the page from a browser. I would achieve the same result with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Subject</td>
<td>Grade</td>
</tr>
<tr>
<td>Med. History</td>
<td>B+</td>
</tr>
<td>Comp. Sci</td>
<td>A</td>
<tr>
<td>Financial Accounting</td>
<td>A</td>
</tr>
</table>
</body>
</html>

Alright, that's it for tables.  And I believe that's it for the basic tags, let's see if we can put it all together. 

Conclusion

Altogether Now

Ok young grasshopper, you have learned the very basics of HTML, I will now put it all together for you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is My Page</title>
</head>
<body>
<img src=”http://www.webrightnow.com/mylogo.gif”>
<h1>This is My Page!</h1>
<p> Hi everyone, welcome to my first website. On this website, I will talk about:
<ol>
<li>My family</li>
<li>My car</li>
<li>And my dog</li>
</ol>
</p>
<h2>Shameless Plug</h2>
<p>
If you want to learn how to make a webpage like this, please visit <a href=”http://www.webrightnow.com”>Webrightnow.com</a>, they helped me and they can help you!
</p>
<h2>My University Grades</h2>
<p>I did OK in University, here are my grades</p>
<table border=”1”>
<tr>
<td>Subject</td>
<td>Grade</td>
</tr>
<tr>
<td>Med. History</td>
<td>B+</td>
</tr>
<td>Comp. Sci</td>
<td>A</td>
<tr>
<td>Financial Accounting</td>
<td>A</td>
</tr>
</table>
</body>
</html>

So there you are, all the basic HTML tricks put together into one flashy document.

Flashy? Ok, not so much. The fonts are boring, the headings are way too big and obnoxious, and nothing is indented where it should be. And there's no color!

The main reason why the above code will look.. well… ugly, is that we have been good little web-geeks and not put in any ‘styling' or ‘formatting' in it because that is not a job for HTML.

Although the page is not very pretty, it is impeccably structured and very well organized. However, this is usually not enough to please visitors, so we will learn how to add style to our web pages by using Cascading Style Sheets (CSS). But that's a completely different tutorial altogether.