In this html tutorial I will be teaching you how to creat a smart and presentable website using basic html code.
This tutorial has been developed especially for the blind and visually impaired to allow them to design presentable, but screen reader friendly websites, but at the same time being visually appealing.
Below you will find a number of headings entitled a number of a step, 1 through 6.
Please work your way through the steps logically and do not skip any out.

Step 1 - Know How

There is one thing that you need to know before you start to develop in html and it is:
What editor to use to write the code - a symple text editor such as notepad is perfectly sufficient to do the job.
To save your html files, please follow the steps below.
Open notepad by pressing the windows key with the letter r. Then type the word notepad and press enter or click the okay button.
Notepad will then open and you can then start to type your code.
To save your code as a html file, press the control key with the letter s.
In the save as dialogue box that appears, type a file name, of your choice, but ending with the extention .html
Then go to the files of type box, by pressing the tab key once, and select the option all files.
Choose where you want to save the file and then click the save button.
Congradulations! You are now ready to proceed to the next step!

Step 2 - Creating The HTML Template

To create the html template we need to know a few pieces of code
I will write the code and then place a comment after each line

<html>
This is the tag that needs to be displayed at the top of any of your webpages
<head>
Again, another necessary tag
<title> The Title Of Your Page Goes Here Between These Tags </title>
As explained above, the title of your page goes between these tags
</head>
This ends the head tag, really not important but necessary for the page to work properly

<body>
This starts the webpage main body, where all of your text, information and links are shown. As shown above a line space should be left between </head> Tags and the <body> Tag.

</body>
This tag is placed at the bottom of the webpage, it ends the main content of the webpage and no text, information or links can be displayed below this line of code. As shown above, a line should be left between the <body> Tag and the </body> Tags, as your main content will go here when you have learnt the tags.
</html>
This tag is placed at the bottom of the webpage, it ends the webpage and no text, information or links can be displayed below this line of code.

Now, try typing this code out into a text editor. When you have written it a few times, try to memorise it by writing it out again. You can save your creation but it will not display anything when viewed in windows internet explorer or any other browser.
When you have mastered this step, please move on to step 3.

Step 3 - Adding Text

To add text to a webpage, we have to learn a few text attribute tags.

The heading tag <h1>
This tag has 9 different levels of headings starting with the example heading above, which was a level one heading. Heading level 1 is the most important of these and all of the headings 2 through 9 are subheadings under level 1.
To create a heading on your webpage, you would write
<h1>This Is My Heading
Note that you have to end the heading tag after the text you want to be in the heading or else things will go pair shaped.
The tags for the headings, with their respective closing tag, would be
Level 1 <h1> </h1>
Level 2 <h2> </h1>
Level 3 <h3> </h3>
Level 4 <h4> </h4>
Level 5 <h5> </h5>
Level 6 <h6> </h6>
Level 7 <h7> </h7>
Level 8 <h8> </h8>
Level 9 <h9> </h9>
Headings should only cover 1 to 2 lines of text. To include text that is paragraph format, the text should be included between the <p> tag and the closing </p> tag.
For example, if you wanted to write hello on your website in paragraph form, you would write <p>Hello</p>
If you wanted to write Welcome To My Website, as a level 1 heading, and Hello everyone, in paragraph format, the code would be:
<h1>Welcome To My Website</h1>

Hello everyone

There we are, brilliant.
If you wanted to put line breaks, in the paragraphs on your webpage, the code to to this would be <br>
This code would be placed on the page, at the end of the line where you want the line break to occur. For example, if you wanted to write, hello, new line, How are you?, you would write:
<p>Hello<br>
How are you?
The same applies for when you want to split up a heading into two lines. For example, if you want to say in a heading level 1 Welcome To, down a line, My Website, you would write:
<h1>Welcome To<br>
My Website</h1>
See, perfect!!
Now, how to create a hyper link. You use the following tag:
<a href="url_file_name_goes_here">Link Name That You Want To Appear On The Page Goes Here</a>
For the link between the quotation marks, include the whole file name that you want to link to, for example, contact.html not just contact.
If you want a heading to be a link at the same time, the code would look like this:
<h1><a href="contact.html">contact</a></h1>
Similarly, if you want a link on the page, in paragraph format, you would use the following code:
<p><a href="contact.html">contact</a></p>
If you want to link to a zipped folder, for example, a folder with sounds in it, you would use the same code as above, but placing the name of the zipped folder where the url of the file would go. For example:
<a href="sounds.zip">Sounds</a>
If you want to creat an email me link you use the following code:
<a href="mailto:your_email_address">Email Me</a>
Where it says your_email_address, substitute that for your own email address.
If the links do not work, a little playing around with them, will get you up and running.
You have now mastered this step so you can go on to the next step.

Step 4 - Adding styles To Your Code

Adding styles to a website is one of the easiest things that you can do in html. The most used tag is the

<font> and the </font> tags.
Inside of these tags we use three main perammiters and these are:
size
color
And
face
Notice that the colour perammiter is spelt the american way and not the dnglish way, so it is spelt color not colour. This is very important to acknowledge this or else your code will not work.
So lets take each perammiter individually and talk about what we can do with them.
size
The size tag is the first perammiter that comes inside of the <font> tag. You would write it like this.
<font size="3">
There are 7 set sizes that you use in html from 1 through 7. They match up with the font sizes found on a regular font scale as follows:
Size 1 = size 6
Size 2 = size 10
Size 3 = size 14
Size 5 = size 16
Size 6 = size 18
Size 7 = size 20
We then come to the color perammiter.
color
The color perammiter comes second in the font tag. So it would look like this:
<font size="3" color="red">
You see that i have written the colour red as a word and not used a special code. For the common colours like red, blue, black, green, brown, white, yellow and purpil.
Here is a link to a text document where all of the colours are listed with their individual codes. To use the chart, look for the colour you want and then coppy the corresponding code and paste it in the space where I wrote the word red, that is instead of the word red.
Colour Chart
Now we have the face perammiter.
face
The face perammiter controls the style of the font. For example arial or times new roman.
This perammiter comes third and last in the <font> tag.
So, for example:
<font size="3" color="red" face="arial, times new roman">
You can use what ever style of font that you want, so long as the font in a popular font available on most computers. The reason for the two styles in the box, separated with a commar, is because is the first style is not available, the second font will be used.
The font tag is placed around that text that you want to alter the font of.
For example, if you want the text, eat cake, to be in font size 14, color red and style arial, the code would be:
<font size="3" color="red" style="arial, times new roman">eat cake</font>
Do not forget to close the font tag!
You have now finished this step, please move on to the next step.

Step 5 - Lists

Sometimes we want to creat lists of links, bulleted or numbered text. In this step, i will show you how to do this. So let's go!
A list has to start and end with a list tag. This list tag tells the list whether it is a numbered or bulleted list. The tag for a bulleted list is:

<ul> and the closing tag is </ul>
The tag for a numbered list is:
<ol> and the closing tag is </ol>
To make an item in the list, you need to user the tags:
<li>Text for list item goes here</li>
You see that the text for the list item is between the <li> and the </li> tags
So a list would look something like this:
Numbered List:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Numbered List:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Notice that everything is the same for the lists except for the change of the letter u, for a bulleted list, to the letter o, for a numbered list.
To put a link into a link type:
<ul>
<li><a href="url_of_file">file name you want to appear as the link text</a></li>
</ul>
This is a bulleted list but a numbered list would look the same except wita numbered link and not a bulleted link.
To add fonts to the list, you would put the font tag above the start tag of the list, and below the end tag of the list.
Now we have mannaged lists, lets move on to tables.

Step 6 - Tables

Tables can be useful on webpages, but on the other hand they can be more of a hinderence when navigating a website. Please think carefully where you think a table will work on your website before implementing it.
For this reason, i will show you how to implement a symple table on your webpage
The table is made up of three different tags. They are shown below as the opening tag, what ever text goes between and then the closing tag:
<table> No Text Goes Here </table>
<tr> No Text Goes Here </tr>
<td> Text Goes Here </td>
Now we will take the tags and I will explain them.
First of all we have the <table> and </table> tags. These tags start and end the table respectively.
The <tr> and the </tr> tags start and end a table row respectively.
The <td> and the </td> tags start and end a table column respectively.
So, a symple table, with two rows and two columns would look like this:
<table>
<tr>
<td>Cell 1 row 1</td>
<td>Cell 2 row 1</td>
</tr>
<tr>
<td>Cell 1 row 1</td>
<td><a href="test.mp3">Cell 2 row 2 including link to test.mp3 file</td>
</tr>
</table>
So, you see how a table works now. Also, in cell 2 row 2 there is a link to a file named test.mp3. You can include links in any cell of the table.
If you want to add font to the table, place the font tags outside of the table at the top, above the table start tag, and at the bottom, after the table end tag.
This is a symple table. I will not go further in this step as you need to know html very well in order to do more advanced tables as the code gets extremely tricky!

Extra Code

I decided to include this extra piece of code as a bonous to the tutorial. I have found this extremely useful in my time as a web creater so here it is and i hope you enjoy it!!
This code will allow you to place sounds on your webpage that start automatically when the user opens the page. The code is as follows:

Well Done

Well done, if you are reading this text you have worked your way through the tutorial and you now know how to use and create symple websites with html, or you have just skipped to the end and have no idea of html at all!!

6 Steps To Learning HTML

Introduction