My thanks to Code Punk and the many people who have taught me coding over the years. (Hwesta and Edonil to name a few.)

I made this tutorial to teach someone how to code after I made her a layout. Therefore, it assumes that you have a CSS page and is to help you with things like adding links and images. Links and images are what I like to call the ‘content’ of the site. It is what people will see when they view your site. I hope this helps you to learn some basic html code.

Html Tags
The code used to make a webpage consists of plain text (this is what you will see on the page) and the html coding tag (or html tag) which formats everything.
Html tags use angle brackets (< >) with the code between the brackets.
   Example:
      <h1>

A closing tag is very similar to an opening tag. Before the first word in the angle brackets (called the element) you put a forward slash (/).
   Example:
      </h1>

What goes between the html tags is the plain text.
   Example:
      <h1>This text would appear on the webpage.</h1>

So basically you have an opening and closing tag. (Always remember to close your tags; otherwise, weird things will happen to your webpage.) These tags affect the text in between them.

Breaks
In text programs (like Microsoft Word) when you hit enter you create a line break. Browsers do not render these line breaks. (This can be useful when making your code nice and neat.) Instead you must use the break tag (<br/>). The break tag isn’t like a normal tag with an opening and closing tag so you need to put a slash at the end to close it.
   Example:
      Here is some text.
      <br/>
      Here is some more text.

Or

      Here is some text.<br/>Here is some more text.

This will appear as...

      Here is some text.
      Here is some more text.

Notice which one is neater and how they both appear on the webpage the same way. In the first example I hit enter to make the code neater. Those line breaks were not rendered. You can also use the break tag to separate text.
   Example:
      We shall put some white space between the text using the break tag.
      <br/>
      <br/>
      <br/>
      Notice that there is two lines worth of white when I put in three break tags.

This will appear as...

      We shall put some white space between the text using the break tag.


      Notice that there is two lines worth of white when I put in three break tags.

Basically all you need to know is that to make a line break put in <br/>

Paragraphs
Whenever I want text on my webpage I use the paragraph tags. (<p> to open and </p> to close) The paragraph tags act as the bread in a sandwich. You have the opening tag, the text (this will appear on the webpage) and then the closing tag. The paragraph tags make blocks of text with two line breaks in between each block.
   Example:
      <p>This text will appear on the webpage.</p>
      <p>Don’t forget to close all of your tags.</p>

This will appear as...

      This text will appear on the web

      Don’t forget to close all of your tags.

Remember that the only time the paragraph tags are used is when you will be putting text between the two tags. To create line breaks (no matter how many you want) use the <br/> tag. (An example would be if you wanted line breaks between two pictures.)
Something to think about... I always write out the opening, the closing tag and then the text in between. That way, I know I will never forget to close it. (If you find weird things happening to your webpage, chances are, you forgot to close a tag.)

Italic and Bold Text
This is pretty simple if you understand everything I’ve been talking about so far. Put the text you want italic or bold between the appropriate tags. For start tag for italics is <i> and the end tag is </i>. The start tag for bold text is <b> and the end tag is </b>.
   Example:
      <p>I have put some text in the paragraph tags with <i>some</i> words emphasized and other words <b>not</b> emphasized.</p>

This will appears as...

      I have put some text in the paragraph tags with some words emphasized and other words not emphasized.

Comments
To make it easier to navigate your code you can add comments. These comments will not appear when the page is viewed by the browser. To make a comment put <!-- then your comment followed by -->.
   Example:
      <!--This will not appear when your page is viewed by the browser. It will only appear in your code making it easier for you and others to navigate through your code.-->

Headers
Headers work in a similar way to paragraphs. You have an opening and closing tag.
   Example:
      <h1>I am a header</h1>

This will appear as...

I am a header

You will note that I had the number one following the ‘h’. There are six headers you can use. <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Header one is the biggest with header six as the smallest. (If you are using CSS you can set how big you want each to be but header one as the biggest is standard.) The closing tag must have the same number as the opening tag: </h4> will not close <h1>.

Attributes
So far all we have had in a tag is one word known as an element. Now we are going to add attributes to an element. (Attributes are used to make the tag do more.)
   Example:
      <p align="center">Some centred text.</p>

This will appear as...

Some centred text.

         Terminology:
         ‘p’                    element
         ‘align’               attribute
         ‘center’             attribute value

Now note the space between the element and the attribute. The space inside the tag tells the browser that there is an attribute and value. Attributes are almost always followed by a value put in quotations (" "). Attributes are only put in opening tags, not the closing tag.
One time you might use attributes is centring text or if you want the text to be off to the left or right. To do this use your normal opening and closing tag. (Say <p> and </p> for example.) Now in your opening tag put a space, the attribute align, an equals sign (=) and then the value in quotes (" ").
   Example:
      <p align="right">This text would appear to the right.<p>

This will appear as...

This text would appear to the right.

         Some attributes and values to know:
         Attribute     Value
         align             left, center, right, justify
                             *if no attribute given it will automatically be left
                             *not all values apply to every tag
         target           _blank (you will learn about this attribute a little later)

Aligning
Above you learned how to centre your text using the align attribute put in your opening tag. Here is another way to centre text (can also be used for centring images) that uses the align attribute. In this case you will use the <div> tag. (Always remember the closing tag - </div>) After the element (div) put in the attribute and value.
   Example:
      <div align="center">
      <p>This text will appear centred.</p>
      </div>

This will appear as...

This text will appear centred.

Note that the div tag does not replace the paragraph tag (<p>) it has to be used with it. Also note that you must use the American spelling of centred (center), it won’t work it you spell it the Canadian way.

Links
The Basics
Everyone likes links so let’s learn how to make one. The tags used are <a> and </a>, the ‘a’ refers to ‘anchors’. The opening tag must have the attribute ‘href’ standing for HyperText Reference.
   Example:
      <a href="http://www.tierrastower.com/">My Website</a>

This will appear as...

      My Website

The url is the value for the attribute href. In between the tags (<a> and </a>) is the text which the viewers of your site will see and click. Always a good idea to check your links, lots of dead links on a site can become annoying.
If you want regular text beside your link just put the link inside the paragraph tags.
   Example:
      <p><a href="http://www.tierrastower.com/">My site</a> is wonderful!</p>

This will appear as...

      My site is wonderful!

Something you need to know... There are two types of linking, universal and relative. For universal linking the entire url down to the file is needed (http://www.tierra.edonil.com/page1.php). Relative linking gives the path from the page with the link to the page which is linked to (./page1.php). Relative linking could also be called internal linking. Both use the same opening and closing tags the only difference is how the link it written.

Universal Linking
Universal linking is very simple. All you need to remember is to put the entire url, http and all.
   Example:
      <a href="http://www.tierrastower.com/">My site</a>

Internal Linking
It’s always a good idea to separate your files for your site into sub-folders so you need to know how to link to them. (You could use the full url but this is a much neater way of doing it.) The difference between universal and internal (relative) linking is that you don’t have to write out the entire link.
In my example I’m going to use the following folder structure.
        

Same Folder
Linking from page1.php to page4.php involves linking from one file to another where both files are in the same folder. To do this put a dot slash (./) before the name of the file.
   Example:
      <a href="./page4.php">Go to page 4</a>

Downward Linking
Linking from page1.php to page2.php involves going down one folder. Before the file name (page2.php) put a dot slash (./), the folder name (folder2) and then a slash (/).
   Example:
      <a href="./folder2/page2.php">Link to page 2</a>

Upward Linking
Now say you want to link from page2.php to page1.php. This involves going up a folder. Before the file name put two dots and a slash (../).
   Example:
      <a href="../page1.php">Link to page 1</a>

If you want to go up another folder just add two more dots and a slash (../../). For every folder you need to go up add two dots and a slash. Pretty simple?

Up and Down Linking
So we know to go down a folder you add the folder name (folder2.php) and to go up you add two dots and a slash (../). Now, not only are we going to go up a folder we are going to go down into another one (folder3). Say you want to link from page2.php to page3.php. To do this you need to go up to folder1 and then down into folder3. Time to put the up (../) and down (folder3.php) together.
   Example:
      <a href="../folder3/page3.php">Link to page 3</a>

Link Review
         Same folder: "./page1.php"
         To go down: "./folder2/page2.php"
         To go up: "../page2.php"
         To go up and down: "../folder3/page3.php"
         Outside your site (universal): "http://www.tierrastower.com/"

Targeted Links
If you want your link to open in a new browser window all you need to do is add attribute and value target="_blank".
   Example:
      <a href="http://www.tierrasower.com/" target="_blank">My site</a>

This will appear as...

      My site

Images
Basics
It is time to learn how to put images on your site. For images we use the <img> tag with the attribute ‘src’. The image tag has no closing tag so we put a slash (/) before the final bracket. The value of the src attribute is the url to the image. How you format the image link (with a ./, a ../ or the whole url etc.) is done the same way as formatting website links. (See above.)
   Example:
      <img src="./image1.gif"/>

Alt and Title Attributes
Some sites have it where when you hover over an image some text appears. This text might tell you about the image. To get this text you can use either the alt or title attribute. Because Firefox doesn’t show the text if you use the alt attribute it is better to use the title attribute. Even if you use the title attribute you have to remember to add the alt attribute, you just don’t need to put in any text. (It is a required field for images so you must have it if you want your site to validate.)
   Example:
      <img src="./image1.gif" alt="" title="Here is where you would put some words about the image. Remember that you do have a character limit."/>

This will appear as...

     

Images as Links
Now we will combine making links and images. Say you want to have an image be a link. All you have to do is put the image code between the link tags.
   Example:
      <a href="http://www.tierrastower.com/" target="_blank"><img src="./image1.gif alt="" title="click to go to Tierra’s Tower"/></a>

This will appear as...

     

Congratulations, you are now well on your way in learning website coding. If anything doesn't make sense don't feel afraid to e-mail me or drop me a tag. Hopefully I'll be able to clarify. If you want to go more indepth or want to learn how to make a CSS page I'd suggest going to code punk. (Link at the top) Hope you found this useful.