Valid XHTML 1.0 Transitional

Valid CSS!

Ysu Programming professional web development

Ysu Programming now operates as SmarterSoft.

Ysu Programming HTML tutorial

Introduction

This tutorial is in no way full, I'm merely trying to help those who are struggling with their first steps towards understanding the basic 'language' of web pages.

My aim is to write a text, which can be read and followed by a beginner to learn how to build simple and functional html pages.

If you find any errors, or would like to add something, and especially if you find some parts hard to understand please contact me.

The basics - What is HTML?

The official HTML documentation can be found on the Word Wide Web Consortium markup pages, although that document is not for beginners.

HTML is a very simple markup language, containing only text and 'tags'. A tag is anything between '<' and '>'. Anything between these less-than and greater-than signs will mark something, while everything else is displayed as text. An example: <p> - this tag marks the start of a paragraph.

The well written HTML page is the clean one, as when it comes to finding problems or applying later modifications, a well-formatted text can be a great advantage.

Resources

One of the resources is the aforementioned w3c, but I think one of the most useful resources is at DevGuru, the HTML tags page.

On WYSIWYG tools

"What you see is what you get" they are called, and while it may be partly true, it is never so simple and clean as it sounds. Some can be great help - if you know what to do - but they mostly dumb down the process of creating a html page to a level where it'll not create a good HTML code, especially in the hands of a beginner. The pages created and re-edited with these tools may look good in the editor, and maybe in IE (Internet Explorer) too, but will possibly look garbled in alternative browsers.

Plus, with the effort you learn to use one, you can learn HTML and be free of these tools - or use any if you choose so.

Knowledge and education is the real answer, not the tools, so I don't recommend them, and I don't use them.

How to create a HTML page?

For a beginner, you don't need fancy tools, a simple text editor program is sufficient, for example notepad on windows. To view the created file you need a browser - which you're already using.

Let's create a very simple html file. Create a new file in your text editor, add in this text:

First line
Second line

then save it with a .html extension, say 'first.html', then open it in the browser. It'll display the text - without formatting, like this:

First line Second line

This is where HTML comes in handy.

One of the simplest of the HTML tags is the <br> tag. It tells the browser that a line break is in order. Type or copy this into the previous file:

First line<br>
Second line

As you can see it now breaks into two lines as was intended. Congratulations, you've leared your first HTML tag!

It's important to know, HTML does not make any difference in one or more whitespace (space or newline) characters. So this will create the same result:

First line<br>Second line

as this:

First line<br>
  
  
Second line

or this:

First line<br>       Second line

Close your tags!

Some tags - like the <br> - are individual, but most have to be 'closed'. An example is the <b> tag for bolding text:

some <b>bold</b> text

This will result in:

some bold text

As you can see, the closing tag has the same text as the opening tag, but a slash preceeding the text in the tag. Always use the forward slash: '/', the windows backslash is not good.

Why is it important to remember? If you forget to close one, best thing can happen is an extra piece of bolded text - or the whole page, worst is a completely garbled looking page.

Simple text formatting

The simplest thing we can use HTML tags is text formatting, you may even be allowed to use these tags on public forums.

The <b> tag you've already seen in the previous section. Let's see some others now.

You can make the text italic:

some <i>italic</i> text

Result:

some italic text

Note: You may use these tags, all browsers recognise them, but they have preferred counterparts. The reason is accessibility, those without visual access to the internet are better of if you're using these type of elements. The usable counterparts are the
<strong> - should result in bold text
<em> - (emphasis), should result in italic text
And the importance of this, directly from w3.org:
The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.

Or if you'd like to underline your text:

some <u>underlined</u> text

Result:

some underlined text

Note: the u tag is deprecated. CSS should be used instead. Nonetheless it's working.

As you can see, it very much looks like a link, therefore I advise against using it on the net. The web is not a paper media, it's very different indeed. What looks good on paper may look funny on screen or may lead to confusion.

Divide and Conquer

There are two tags for dividing text: the <p> and the <div> both will define a block, but the <p> usually have a margin, while <div> does not.

Try it out:

<p> 
This is the first paragraph 
</p>

<p> This is the second. 
  Notice the whitespace between, and before-after them. 
</p>

<p> 
Here's a third paragraph to round it out 
</p>

The result will look like this:

This is the first paragraph

This is the second. Notice the whitespace between, and before-after them.

Here's a third paragraph to round it out

If you replace the p tags with div tags:

<div> 
This is the first paragraph 
</div>

<div>This is the second. 
  Notice the lack of whitespace between!
</div>

<div> 
Here's a third paragraph to round it out 
</div>

Result:

This is the first paragraph
This is the second. Notice the lack of whitespace between!
Here's a third paragraph to round it out

While the div may look a bit useless piece of tag, it's in fact quite useful - you'll see how to use it later.

Tables

While originally the tables were created for displaying tabular data, they're quite widely used for formatting and page layout. Thanks to Internet Explorer, some very useful CSS formatting elements are not usable, so web developers have to rely on tables - mostly.

Let's create a simple table. It has three main elements, the <table>, <tr> and <td>. The first defines the table, and it always must be closed. The >tr< (table row) and <td> (table data) defines a row and a cell subsequently. These can be left without a closing tag, as the next opening tag of the same kind, or the table closing defines the closing for it - according to html definition - but a well-formatted code is halfway to success, so let's just close them.

<table>
  <tr> 
    <td> This is a table cell </td>
    <td> This is another table cell </td>
    <td> This is yet another table cell </td>
  </tr>
</table>
	

That'll look like this:

This is a table cell This is another table cell This is yet another table cell

The result does not look like much, so from now on I'll use an attibute of the table, the "border" attibute. It defines the width of the borders on the table and it's cells.

Attributes always set with an equal sign and have to be between quotes.

Let's see a four-cell table:

<table border="1">
  <tr> 
    <td> This is cell #1 on row #1 </td>
    <td> This is cell #2 on row #1 </td>
  </tr>
  <tr> 
    <td> This is cell #3 in row #2 </td>
    <td> This is cell #4 in row #2 </td>
  </tr>
</table>
	

This looks like it has a thick border, not single lines:

This is cell #1 on row #1 This is cell #2 on row #1
This is cell #3 in row #2 This is cell #4 in row #2

Well, in fact those are single lines, but the table itself, and the individual table cells all have them on.

Looking at further attributes of the table can help to clean this mess up a bit. There are a further 2 attributes to consider:
'cellpadding' and
'cellspacing'

All these attributes accept numeric integer values, 0,1,2,3...and so on. It's a measurement of thickness in this case.

The cellspacing refers to the gap between the cells, the cellpadding sets the gap inside the cell, between the cell's wall and the text.

Consider this table

<table border=5 cellpadding=20 cellspacing=20>
  <tr> 
    <td> This is a table with big cell padding and big cell-spacing </td>
    <td> This is a table with big cell padding and big cell-spacing </td>
  </tr>
</table>
	

The resulting table looks like this:

This is a table with big cell padding and big cell-spacing This is a table with big cell padding and big cell-spacing

Now you can see the table itself has an outer border, then each cell has it's own border as well. The table 'border' attribute sets the thickness for the outer border only, that's why it's much thicker than the inside ones. It's also nice and shaded.

If you're not happy with this strict method, learn on. With CSS you can turn this whole thing inside out :)

Images

Important part of web pages are images. They can be linked in from anywhere, and it's a good idea to keep them in separate directories, like 'images' so you don't end up with a mess in your file system either.

The tag to link in images is the <img> tag. It's one of those tags which does not need closing. It can have a number of attibutes set, too.

Most important attribute: the 'src' - that defines the source of information for the browser, the location of the image.

The other must-have attribute I used is the 'alt', the text you put in here will be displayed if the image is unavailable or not displayed for any reason (swithced off in the browser for example)

A simple image tag looks like this:

<img src="images/smallogo.gif" alt="Ysu Programming small logo">

And the result we get - if we have a directory 'images' with the image 'smallogo.gif' in it.

(For this to work, create an 'images' directory right where your local test file is, then right click and download the image below, and save it into that newly created images directory)

Ysu Programming small logo

How and why links are built, I'll get to in the next part.

Linking

The heart and soul of the internet: the hyperlink! It's done with a simple short 'anchor' tag: the <a>

If you want to create a link to a page in the same directory, called 'secondpage.html', simply put this down:
(Don't forget, attributes always have to be in quotes!)

<a href="secondpage.html">Link to second page</a>

The result:

As you can see visible part comes between the opening and the closing tag, while the tag itself is parametered with the correct link.

This seems to be a good place to explain about absolute and relative linking.

The link we used here, just as the link in the image tag above are relative links. They point to a location relative to the location of this file. Unless you need to point outside your domain, it's the preferred way if you want mobile, transportable code. Let me explain.

Here's a piece of absolute link:

<a href="http://www.ysuprogramming.com/secondpage.html">Link to second page</a>

It'll link to the same page in our case here, but as soon as you want to copy this code onto your system, you need to change the first part to point to your server for it to work. This can be very tedious if there is a larger website you need to move, or you're developing on your local computer and you need to upload the whole site. You simply can't change all links every time.

Other handy info to use with relative links:
file : points to the file in the same directory
/file : points to the file in the root (usually the web root)
./file : points to the file int he current directory again
../file : points to the file one directory higher
../../file : points to the file two directories higher

Note: web servers are using forward slash as directory separators. The backslash is not used.

The absolute linking is unavoidable when linking to outside resources. In that case - for example you want to link to my page for some reason - you have to use the 'http://' protocol definition in front of the domain name.

Link to my site:

<a href="http://www.ysuprogramming.com/">Ysu Programming</a>

Headings

The simplest and most effective way to create a heading is to use a heading tag. There are 6 of them to use: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

The biggest heading is the h1, it's really huge, and as you go down, they are getting smaller and more insignificant-looking.

<h2>A category 2 heading your way</h2>

Looks like you get some big text with margins above-below:

A category 2 heading your way

Horizontal line

There's one more simple tag, the <hr> which will create a nice horizontal line for you. There's an extra attribute, the 'noshade' to remove the shadow effect. The hr tag does not need a closing tag.

<hr>
<hr noshade>
	


A few more tags

sub and sup

A few more handy tags are the <sub>, <sup> for subscript and superscript. Both have to be closed. If you don't know what sub- and superscript is, take a look at the example:

the 2<sup>nd</sup> part of the example is <sub>in subscript</sub>
the 2nd part of the example is in subscript

span

The <span> tag is to declare a span of text. Requires closing. Similarly to <div> element, it has no border, margin or padding. It's an inline element, while the div is a block level one. Can be useful when using CSS. Until then - not much. The <div> and <span> are called grouping elements.

pre

Defines a pre-formatted text block. By default it'll usually result in an ugly typewriter-written looking block, but the important thing is, it'll break the text exactly where you define it, and will include the spaces as it was in the source. I've used the <pre> tag for the code samples, although with a bit of CSS formatting to make it nicer.

One thing to watch out for when using pre tags: the width. It'll not break the line. If it runs wide, then it'll be out to the far right, usually either sticking out of the enlcosing element, or pushing the side of it farther out. Looks ugly and can break up the whole site design. So it's not recommended for formatting, only when it's necessary for the text to look as it was entered.

<pre>This is
  some     pre-formatted
  
  text</pre>

Results:

This is
  some     pre-formatted
  
  text

font

The <font> tag is used to be a way set the properties of a section of text. It's deprecated, it's very tedious to use, makes the code a mess, and very hard to maintain. You may still find it sometimes in older or not well-written codes.

Lists

Fairly often used - and often overlooked too - are the list. You can have ordered and unordered list, the tags to define the start of one such list are <ol> and <ul>. The ordered list will have numbers or letters assigned to each element (can be set via CSS!), the unordered will have dots or circles. The deafault used is up to the browser agent.

For both list type the closing tag is mandatory, and the list elements are set by <li> tags, which has to be closed as well. Let's see a simple example of an unordered list.

<ul>
  <li>List elements are always between li tags</li>
  <li>You can have as many of them in a list as you like
    <ul>
      <li>It's also possible to nest them to have multi-level listings</li>
      <li>If a row is too long it'll break into multiple lines, 
        retaining the margins nicely. </li>
    </ul>
   </li>
   <li>After the nested inner part again </li>
</ul>

In the result I used a simple inline CSS definition to restrict the width of it to show you what it looks like when the line breaks.

  • List elements are always between li tags
  • You can have as many of them in a list as you like
    • It's also possible to nest them to have multi-level listings
    • If a row is too long it'll break into multiple lines, retaining the margins nicely.
  • After the nested inner part again

Nesting HTML elements

By now you probably have run into the problem of nested elements. Tags always have to be opened and closed on the same level. This is where correct code indenting can help too.

The very simple example below shows an incorrect nesting of tags:

This is an <b><i>incorrect</b> tag closing</i>

While this simple example will probably not create much difficulty here at all, it's wrong. Incorrect nesting can create plenty of problems - and hard to track ones - when the error is made in formatting elements. The correct way is: what was opened last, must be closed first. Like this:

This is a <i><b>good, correct</b> tag closing</i>

Conclusion

With the given elements, you can create a nice looking webpage. I urge you to try your skills and creativity out, and create something.

Once you feel you've understood all what's written here, take a look at the second part of this tutorial

Professional Web development at ysu programming logo

Ysu Programming now operates as SmarterSoft.
Integra PowerSuite CMS | Website Development | Online Marketing | Web Hosting | Custom Software (PHP / MySQL) | IT Consulting